@jaak/primitives/lib/util.js

JAAK UI primitives

import { borderWidth, modularScale, size } from 'polished'
import { css as cssHelper } from 'styled-components'

/**
 * Shorthand margin attribute utility method
 *
 * @param  {Array}  margin Shorthand margin notation [top, right, bottom, left]
 * @return {Object}        Margin CSS attribute
 */
const margin = margin =>
  margin && {
    margin: margin.join(' '),
  }

/**
 * Shorthand padding attribute utility method
 *
 * @param  {Array}  padding Shorthand padding notation [top, right, bottom, left]
 * @return {Object}         Padding CSS attribute
 */
const padding = padding =>
  padding && {
    padding: padding.join(' '),
  }

/**
 * Shorthand method to get height and width, wraps polished.size

 * @param  {Array}  dimensions Shorthand size properties
 * @return {Object}            height and width
 */
const getSize = dimensions => dimensions && size(...dimensions)

/**
 * Shorthand method to get border-width properties, wraps polished.borderWidth
 * @param  {Array} borderWidths Shorthand border width values
 * @return {Object}             border widths
 */
const getBorderWidth = borderWidths =>
  borderWidths && borderWidth(...borderWidths)

/**
 * Get CSS font-size from a theme, with fallback
 *
 * @param  {Number|String} fontSize       Input font size
 * @param  {Boolean}       [modular=true] Flag for use of modular scale
 * @param  {Object}        theme          Theme object
 * @return {String}                       Font size value
 */
export const getFontSize = (fontSize, modular = true, theme) => {
  // not using modular scale? Return off-scale font size from component props
  if (!modular) return fontSize

  // use a custom scale step from component props or a predefined step from theme
  const fs =
    typeof fontSize === 'number' ? fontSize : theme.typography[fontSize]

  // calculate the font size based on modular scale
  return modularScale(
    fs,
    theme.dimension.modularScaleBase,
    theme.dimension.modularScaleRatio
  )
}

/**
 * Generate background CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const background = ({
  background,
  backgroundColor,
  backgroundImage,
  backgroundPosition,
  backgroundRepeat,
  backgroundSize,
  boxShadow,
  theme,
}) => ({
  background: background,
  backgroundColor: theme.palette[backgroundColor] || backgroundColor,
  backgroundImage: backgroundImage,
  backgroundPosition: backgroundPosition,
  backgroundRepeat: backgroundRepeat,
  backgroundSize: backgroundSize,
  boxShadow: theme.depth[boxShadow] || boxShadow,
})

/**
 * Generate border CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const border = ({
  borderBottomLeftRadius,
  borderBottomRightRadius,
  borderColor,
  borderRadius,
  borderStyle,
  borderTopLeftRadius,
  borderTopRightRadius,
  theme,
  ...props
}) => ({
  ...getBorderWidth(props.borderWidth),
  borderColor: theme.palette[borderColor] || borderColor,
  borderStyle: borderStyle,
  borderBottomLeftRadius:
    typeof borderBottomLeftRadius !== 'undefined'
      ? borderBottomLeftRadius
      : borderRadius,
  borderBottomRightRadius:
    typeof borderBottomRightRadius !== 'undefined'
      ? borderBottomRightRadius
      : borderRadius,
  borderTopLeftRadius:
    typeof borderTopLeftRadius !== 'undefined'
      ? borderTopLeftRadius
      : borderRadius,
  borderTopRightRadius:
    typeof borderTopRightRadius !== 'undefined'
      ? borderTopRightRadius
      : borderRadius,
})

/**
 * Generate box model CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const boxModel = ({
  marginBottom,
  marginLeft,
  marginRight,
  marginTop,
  maxHeight,
  maxWidth,
  minHeight,
  minWidth,
  paddingBottom,
  paddingLeft,
  paddingRight,
  paddingTop,
  ...props
}) => ({
  ...margin(props.margin),
  ...padding(props.padding),
  ...getSize(props.size),
  marginBottom: marginBottom,
  marginLeft: marginLeft,
  marginRight: marginRight,
  marginTop: marginTop,
  maxHeight: maxHeight,
  maxWidth: maxWidth,
  minHeight: minHeight,
  minWidth: minWidth,
  paddingBottom: paddingBottom,
  paddingLeft: paddingLeft,
  paddingRight: paddingRight,
  paddingTop: paddingTop,
})

/**
 * Provide inline CSS extension with support for psuedo-elements and classes
 *
 * @param  {Object} props     React component props
 * @param  {String} props.css Inline CSS
 * @return {Object}           Styles
 */
export const css = ({ css }) => cssHelper`${css}`

/**
 * Generate display CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const display = ({ display }) => ({
  display: display,
})

/**
 * Generate flexbox CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const flexbox = ({
  alignContent,
  alignItems,
  alignSelf,
  flexBasis,
  flexGrow,
  flexShrink,
  flex,
  flexDirection,
  flexFlow,
  flexWrap,
  justifyContent,
  order,
}) => ({
  alignContent: alignContent,
  alignItems: alignItems,
  alignSelf: alignSelf,
  flex: flex,
  flexBasis: flexBasis,
  flexDirection: flexDirection,
  flexFlow: flexFlow,
  flexGrow: flexGrow,
  flexShrink: flexShrink,
  flexWrap: flexWrap,
  justifyContent: justifyContent,
  order: order,
})

/**
 * Generate grid CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const grid = ({
  grid,
  gridArea,
  gridAutoColumns,
  gridAutoFlow,
  gridAutoRows,
  gridColumn,
  gridColumnEnd,
  gridColumnGap,
  gridColumnStart,
  gridGap,
  gridRow,
  gridRowEnd,
  gridRowGap,
  gridRowStart,
  gridTemplate,
  gridTemplateAreas,
  gridTemplateColumns,
  gridTemplateRows,
}) => ({
  grid: grid,
  gridArea: gridArea,
  gridAutoColumns: gridAutoColumns,
  gridAutoFlow: gridAutoFlow,
  gridAutoRows: gridAutoRows,
  gridColumn: gridColumn,
  gridColumnEnd: gridColumnEnd,
  gridColumnGap: gridColumnGap,
  gridColumnStart: gridColumnStart,
  gridGap: gridGap,
  gridRow: gridRow,
  gridRowEnd: gridRowEnd,
  gridRowGap: gridRowGap,
  gridRowStart: gridRowStart,
  gridTemplate: gridTemplate,
  gridTemplateAreas: gridTemplateAreas,
  gridTemplateColumns: gridTemplateColumns,
  gridTemplateRows: gridTemplateRows,
})

/**
 * Generate link CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const link = ({ cursor, outline }) => ({
  cursor: cursor,
  outline: outline,
})

/**
 * Generate list CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const list = ({
  listStyle,
  listStyleImage,
  listStylePosition,
  listStyleType,
}) => ({
  listStyle: listStyle,
  listStyleImage: listStyleImage,
  listStylePosition: listStylePosition,
  listStyleType: listStyleType,
})

/**
 * Generate position CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const position = ({
  bottom,
  left,
  position,
  right,
  top,
  transform,
  zIndex,
}) => ({
  bottom: bottom,
  left: left,
  position: position,
  right: right,
  top: top,
  transform: transform,
  zIndex: zIndex,
})

/**
 * Generate text CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const text = ({
  color,
  fontFamily,
  fontSize,
  fontStyle,
  fontWeight,
  letterSpacing,
  lineHeight,
  modular,
  textAlign,
  textDecoration,
  textTransform,
  theme,
}) => ({
  color: theme.palette[color] || color,
  fontFamily: fontFamily,
  fontSize: getFontSize(fontSize, modular, theme),
  fontStyle: fontStyle,
  fontWeight: fontWeight,
  letterSpacing: letterSpacing,
  lineHeight: lineHeight,
  textAlign: textAlign,
  textDecoration: textDecoration,
  textTransform: textTransform,
})

/**
 * Generate transition CSS attributes
 *
 * @param  {Object} props React component props
 * @return {Object}       Styles
 */
export const transition = ({
  transition,
  transitionDelay,
  transitionDuration,
  transitionProperty,
  transitionTimingFunction,
}) => ({
  transition: transition,
  transitionDelay: transitionDelay,
  transitionDuration: transitionDuration,
  transitionProperty: transitionProperty,
  transitionTimingFunction: transitionTimingFunction,
})