Implementation of responsive styled components

responsive-styled-components.js

// helpers.js
/**
 * Generate a valid structure for responsive configuration for a component
 * @param {object} props props received from the component
 * @param {array} baseProps list of props to be validated
 *
 * @returns a structured object with the props for each media query
 */
export const generateResponsiveProps = (props, baseProps) => {
  // from the breakpoints registered check which props exists
  const shapedPropsWithMq = Object.keys(BREAKPOINTS).reduce(
    (responsiveProps, mqName) => {
      const propsForMq = props[mqName];
      if (!propsForMq && typeof propsForMq !== 'object') return responsiveProps;

      // for the props that exists, prepare them with the correct shape
      const shapedProps = baseProps.reduce(
        (propList, prop) => ({
          ...propList,
          [prop]: propsForMq[prop],
        }),
        {}
      );

      return {
        ...responsiveProps,
        [mqName]: shapedProps,
      };
    },
    {}
  );

  return shapedPropsWithMq;
};

/**
 * Call the styles factory for with the correct props for each media query
 * @param {function} stylesGenerator function that generates the styles
 *
 * @returns {array} array of styles to be applied for the registered media queries
 */
export const generateResponsiveStyles = stylesGenerator => props =>
  Object.keys(mediaqueries).reduce((rules, mq) => {
    if (!props[mq]) return rules;

    const styles = mediaqueries[mq]`
    ${stylesGenerator(props[mq])}
  `;
    return [...rules, styles];
  }, []);
  
// styled components
const baseStyles = ({ top, left, right, bottom }) => css`
  margin-top: ${top ? unitizedPx(top) : null};
  margin-right: ${right ? unitizedPx(right) : null};
  margin-bottom: ${bottom ? unitizedPx(bottom) : null};
  margin-left: ${left ? unitizedPx(left) : null};
`;

const responsiveStyles = generateResponsiveStyles(baseStyles);

export const Root = styled.div`
  display: ${props => (props.inline ? 'inline-block' : 'block')};
  ${baseStyles}
  ${responsiveStyles}
}
`;

// component
const BASE_PROPS = ['top', 'left', 'right', 'bottom'];

const Spacer = ({ top, left, bottom, right, children, inline, ...rest }) => {
  const responsiveProps = generateResponsiveProps(rest, BASE_PROPS);
  return (
    <Root
      bottom={bottom}
      inline={inline}
      left={left}
      right={right}
      top={top}
      {...responsiveProps}
    >
      {children}
    </Root>
  );
};