@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/system/plugins/flex.js

@@ -0,0 +1,88 @@
+// @flow
+import { alignTypes, justifyTypes, spacingValue } from '../utils'
+
+type Props = {
+  alignItems?: 'start' | 'end' | 'center' | 'stretch' | 'baseline',
+  alignSelf?: 'auto' | 'start' | 'end' | 'center' | 'stretch' | 'baseline',
+  basis?: number | string,
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse',
+  grow?: number,
+  justifyContent?:
+    | 'start'
+    | 'end'
+    | 'center'
+    | 'space-around'
+    | 'space-between'
+    | 'space-evenly',
+  shrink?: number,
+  wrap?: boolean,
+}
+
+function flex({
+  alignItems,
+  alignSelf,
+  basis,
+  direction,
+  flexBasis,
+  flexGrow,
+  flexShrink,
+  flexWrap,
+  grow,
+  justifyContent,
+  shrink,
+  wrap,
+  ...styles
+}: Props = {}) {
+  if (direction) {
+    styles.flexDirection = direction
+  }
+
+  if (typeof wrap === 'undefined') {
+    wrap = flexWrap
+  }
+  if (typeof wrap !== 'undefined') {
+    styles.flexWrap =
+      wrap === 'reverse'
+        ? 'wrap-reverse'
+        : wrap === true || wrap === 'wrap'
+        ? 'wrap'
+        : 'nowrap'
+  }
+
+  if (typeof grow === 'undefined') {
+    grow = flexGrow
+  }
+  if (typeof grow !== 'undefined') {
+    styles.flexGrow = grow === true ? 1 : grow
+  }
+
+  if (typeof shrink === 'undefined') {
+    shrink = flexShrink
+  }
+  if (typeof shrink !== 'undefined') {
+    styles.flexShrink = shrink === true ? 1 : shrink
+  }
+
+  if (typeof basis === 'undefined') {
+    basis = flexBasis
+  }
+  if (typeof basis !== 'undefined') {
+    styles.flexBasis = spacingValue(basis)
+  }
+
+  if (justifyContent) {
+    styles.justifyContent = justifyTypes[justifyContent] || justifyContent
+  }
+
+  if (alignItems) {
+    styles.alignItems = alignTypes[alignItems] || alignItems
+  }
+
+  if (alignSelf) {
+    styles.alignSelf = alignTypes[alignSelf] || alignSelf
+  }
+
+  return styles
+}
+
+export default flex

package/src/system/plugins/grid.js

@@ -0,0 +1,41 @@
+// @flow
+type Props = {
+  column: number,
+  columnStart: number,
+  columnEnd: number,
+  row: number,
+  rowStart: number,
+  rowEnd: number,
+}
+
+function grid({
+  column,
+  columnStart,
+  columnEnd,
+  row,
+  rowStart,
+  rowEnd,
+  ...styles
+}: Props = {}) {
+  if (column !== undefined && styles.gridColumn === undefined) {
+    styles.gridColumn = column
+  }
+  if (columnStart !== undefined && styles.gridColumnStart === undefined) {
+    styles.gridColumnStart = columnStart
+  }
+  if (columnEnd !== undefined && styles.gridColumnEnd === undefined) {
+    styles.gridColumnEnd = columnEnd
+  }
+  if (row !== undefined && styles.gridRow === undefined) {
+    styles.gridRow = row
+  }
+  if (rowStart !== undefined && styles.gridRowStart === undefined) {
+    styles.gridRowStart = rowStart
+  }
+  if (rowEnd !== undefined && styles.gridRowEnd === undefined) {
+    styles.gridRowEnd = rowEnd
+  }
+  return styles
+}
+
+export default grid

package/src/system/plugins/index.js

@@ -0,0 +1,27 @@
+import border from './border'
+import color from './color'
+import elevation from './elevation'
+import flex from './flex'
+import grid from './grid'
+import misc from './misc'
+import position from './position'
+import size from './size'
+import space from './space'
+import stroke from './stroke'
+import transform from './transform'
+import typography from './typography'
+
+export default [
+  grid,
+  flex,
+  position,
+  size,
+  space,
+  border,
+  stroke,
+  typography,
+  color,
+  elevation,
+  transform,
+  misc,
+]

package/src/system/plugins/misc.js

@@ -0,0 +1,21 @@
+import { spacingValue } from '../utils'
+
+function misc({ lineHeight, uppercase, ...styles }) {
+  if (styles.boxShadow && styles.boxShadow.constructor === Array) {
+    styles.boxShadow = styles.boxShadow.join(', ')
+  }
+
+  if (typeof lineHeight !== 'undefined') {
+    styles.lineHeight =
+      typeof lineHeight === 'number' ? spacingValue(lineHeight) : lineHeight
+  }
+
+  if (uppercase) {
+    styles.textTransform = 'uppercase'
+    styles.letterSpacing = '0.15em'
+  }
+
+  return styles
+}
+
+export default misc

package/src/system/plugins/position.js

@@ -0,0 +1,49 @@
+// @flow
+import { spacingValue } from '../utils'
+
+type Props = {
+  position?: 'absolute' | 'fixed' | 'relative' | 'static',
+  top?: string | number,
+  right?: string | number,
+  bottom?: string | number,
+  left?: string | number,
+  zIndex?: string | number,
+}
+
+function position({
+  position,
+  top,
+  right,
+  bottom,
+  left,
+  zIndex,
+  ...styles
+}: Props) {
+  if (position) {
+    styles.position = position
+  }
+
+  if (typeof top !== 'undefined') {
+    styles.top = spacingValue(top)
+  }
+
+  if (typeof right !== 'undefined') {
+    styles.right = spacingValue(right)
+  }
+
+  if (typeof bottom !== 'undefined') {
+    styles.bottom = spacingValue(bottom)
+  }
+
+  if (typeof left !== 'undefined') {
+    styles.left = spacingValue(left)
+  }
+
+  if (typeof zIndex !== 'undefined') {
+    styles.zIndex = zIndex
+  }
+
+  return styles
+}
+
+export default position

package/src/system/plugins/size.js

@@ -0,0 +1,37 @@
+// @flow
+import { spacingValue } from '../utils'
+
+type Props = {
+  width: string | number,
+  height: string | number,
+
+  minWidth: string | number,
+  minHeight: string | number,
+
+  maxWidth: string | number,
+  maxHeight: string | number,
+}
+
+function size({
+  width,
+  height,
+
+  minWidth,
+  minHeight,
+
+  maxWidth,
+  maxHeight,
+
+  ...styles
+}: Props) {
+  const props = { width, height, minWidth, minHeight, maxWidth, maxHeight }
+  Object.keys(props).forEach((key) => {
+    const value = props[key]
+    if (typeof value !== 'undefined') {
+      styles[key] = spacingValue(value)
+    }
+  })
+  return styles
+}
+
+export default size

package/src/system/plugins/space.js

@@ -0,0 +1,133 @@
+// @flow
+import {
+  anyDefined,
+  expandDirectionalProperty,
+  parseSides,
+  spacingValue,
+} from '../utils'
+
+type Props = {
+  padding: string | number,
+  paddingHorizontal: string | number,
+  paddingVertical: string | number,
+  paddingTop: string | number,
+  paddingRight: string | number,
+  paddingBottom: string | number,
+  paddingLeft: string | number,
+
+  margin: string | number,
+  marginHorizontal: string | number,
+  marginVertical: string | number,
+  marginTop: string | number,
+  marginRight: string | number,
+  marginBottom: string | number,
+  marginLeft: string | number,
+
+  gap: string | number,
+  columnGap: string | number,
+  rowGap: string | number,
+}
+
+function space({
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft,
+
+  gap,
+  columnGap,
+  rowGap,
+
+  ...styles
+}: Props) {
+  if (anyDefined(padding)) {
+    if (typeof padding === 'string') {
+      const paddingStyles = expandDirectionalProperty('padding', padding)
+      styles.paddingTop = paddingStyles.paddingTop
+      styles.paddingRight = paddingStyles.paddingRight
+      styles.paddingBottom = paddingStyles.paddingBottom
+      styles.paddingLeft = paddingStyles.paddingLeft
+    } else {
+      const paddingValue = parseSides(padding)
+      styles.paddingTop = paddingValue
+      styles.paddingRight = paddingValue
+      styles.paddingBottom = paddingValue
+      styles.paddingLeft = paddingValue
+    }
+  }
+
+  if (anyDefined(paddingVertical, paddingTop)) {
+    styles.paddingTop = parseSides(paddingVertical, paddingTop)
+  }
+
+  if (anyDefined(paddingHorizontal, paddingRight)) {
+    styles.paddingRight = parseSides(paddingHorizontal, paddingRight)
+  }
+
+  if (anyDefined(paddingVertical, paddingBottom)) {
+    styles.paddingBottom = parseSides(paddingVertical, paddingBottom)
+  }
+
+  if (anyDefined(paddingHorizontal, paddingLeft)) {
+    styles.paddingLeft = parseSides(paddingHorizontal, paddingLeft)
+  }
+
+  if (anyDefined(margin)) {
+    if (typeof margin === 'string') {
+      const marginStyles = expandDirectionalProperty('margin', margin)
+      styles.marginTop = marginStyles.marginTop
+      styles.marginRight = marginStyles.marginRight
+      styles.marginBottom = marginStyles.marginBottom
+      styles.marginLeft = marginStyles.marginLeft
+    } else {
+      const marginValue = parseSides(margin)
+      styles.marginTop = marginValue
+      styles.marginRight = marginValue
+      styles.marginBottom = marginValue
+      styles.marginLeft = marginValue
+    }
+  }
+
+  if (anyDefined(marginVertical, marginTop)) {
+    styles.marginTop = parseSides(marginVertical, marginTop)
+  }
+
+  if (anyDefined(marginHorizontal, marginRight)) {
+    styles.marginRight = parseSides(marginHorizontal, marginRight)
+  }
+
+  if (anyDefined(marginVertical, marginBottom)) {
+    styles.marginBottom = parseSides(marginVertical, marginBottom)
+  }
+
+  if (anyDefined(marginHorizontal, marginLeft)) {
+    styles.marginLeft = parseSides(marginHorizontal, marginLeft)
+  }
+
+  if (gap !== undefined) {
+    styles.gap = spacingValue(gap)
+  }
+
+  if (columnGap !== undefined) {
+    styles.columnGap = spacingValue(columnGap)
+  }
+
+  if (rowGap !== undefined) {
+    styles.rowGap = spacingValue(rowGap)
+  }
+
+  return styles
+}
+
+export default space

package/src/system/plugins/stroke.js

@@ -0,0 +1,48 @@
+// @flow
+import { parseColor } from '../utils'
+import { getCSSProperty } from '../../utils'
+
+type Props = {
+  strokeAlign: 'center' | 'inside' | 'outside',
+  strokeOpacity: number,
+  strokeWeight: number,
+  stroke: string,
+}
+
+function stroke(
+  {
+    stroke: _stroke,
+    strokeAlign = 'outside',
+    strokeOpacity,
+    strokeWeight,
+    ...styles
+  }: Props,
+  theme
+) {
+  if (_stroke && strokeWeight) {
+    const color =
+      theme && theme.colors
+        ? theme.colors[_stroke]
+          ? getCSSProperty('colors', _stroke)
+          : parseColor(_stroke)
+        : parseColor(_stroke)
+    const shadow = styles.boxShadow ? styles.boxShadow.split(', ') : []
+    if (strokeAlign === 'inside') {
+      shadow.unshift(`inset 0px 0px 0px ${strokeWeight}px ${color}`)
+    } else if (strokeAlign === 'outside') {
+      shadow.unshift(`0px 0px 0px ${strokeWeight}px ${color}`)
+    } else if (strokeAlign === 'center') {
+      shadow.unshift(`inset 0px 0px 0px ${strokeWeight / 2}px ${color}`)
+      shadow.unshift(`0px 0px 0px ${strokeWeight / 2}px ${color}`)
+    }
+    styles.boxShadow = shadow.join(', ')
+  } else {
+    styles.stroke = _stroke
+    if (strokeOpacity) {
+      styles.strokeOpacity = strokeOpacity
+    }
+  }
+  return styles
+}
+
+export default stroke

package/src/system/plugins/transform.js

@@ -0,0 +1,27 @@
+function transform({ x, y, scale, rotate, ...styles }) {
+  let transform = ''
+  if (x && y) {
+    transform += `translate(${x}, ${y}) `
+  } else {
+    if (x) {
+      transform += `translateX(${x}) `
+    }
+    if (y) {
+      transform += `translateY(${y}) `
+    }
+  }
+  if (scale) {
+    transform += `scale(${scale}) `
+  }
+  if (rotate) {
+    transform += `rotate(${rotate}deg) `
+  }
+  if (transform.length > 0) {
+    styles.transform = styles.transform
+      ? `${styles.transform} ${transform}`
+      : transform
+  }
+  return styles
+}
+
+export default transform

package/src/system/plugins/typography.js

@@ -0,0 +1,12 @@
+function typography({ fontSize, ...styles }, theme) {
+  if (typeof fontSize !== 'undefined') {
+    const value =
+      theme && theme.fontSizes
+        ? theme.fontSizes[fontSize] || fontSize
+        : fontSize
+    styles.fontSize = typeof value === 'number' ? value + 'px' : value
+  }
+  return styles
+}
+
+export default typography

package/src/system/split-styles.js

@@ -0,0 +1,107 @@
+import { stylePropNames, pseudoPropNames } from './style-names'
+import { parsePluginStyles } from './parse-styles'
+
+export default function ({
+  className,
+  mediaQueries = {},
+  plugin,
+  variant,
+  variants = {},
+  visible = true,
+  ...combinedProps
+}) {
+  const restProps = {}
+  const styleProps = {}
+  const isStyleProp = (prop) =>
+    stylePropNames.indexOf(prop) > -1 ||
+    pseudoPropNames.indexOf(prop) > -1 ||
+    (plugin && plugin.styleProps.indexOf(prop) > -1)
+  for (const prop in combinedProps) {
+    const value = combinedProps[prop]
+    if (isStyleProp(prop)) {
+      styleProps[prop] = value
+    } else {
+      restProps[prop] = value
+    }
+  }
+  return {
+    ...restProps,
+    className: className ? `uikit-reset ${className}` : `uikit-reset`,
+    css: (theme) => {
+      const propStyles = {}
+      for (const prop in styleProps) {
+        const value = styleProps[prop]
+        if (
+          stylePropNames.indexOf(prop) > -1 ||
+          (plugin && plugin.styleProps.indexOf(prop) > -1)
+        ) {
+          propStyles[prop] = value
+        } else if (pseudoPropNames.indexOf(prop) > -1) {
+          propStyles[`&:${prop}`] = parsePluginStyles(value, plugin, theme)
+        }
+      }
+      const baseStyles = parsePluginStyles(propStyles, plugin, theme)
+      const mediaQueryStyles = Object.keys(mediaQueries).reduce(
+        (collection, key) => {
+          const themeBreakpoint = theme?.breakpoints[key]
+          const query = themeBreakpoint
+            ? typeof themeBreakpoint === 'number'
+              ? `@media screen and (min-width: ${themeBreakpoint}px)`
+              : themeBreakpoint
+            : key
+          const queryStyles = parsePluginStyles(
+            mediaQueries[key],
+            plugin,
+            theme
+          )
+          if (queryStyles.visible !== undefined) {
+            queryStyles.display = queryStyles.visible
+              ? baseStyles.display
+              : 'none'
+            delete queryStyles.visible
+          }
+          collection[query] = queryStyles
+          return collection
+        },
+        {}
+      )
+      const mergeVariantsIntoStyles = (styles) => {
+        const { variants, ...restStyles } = styles
+        if (variants) {
+          return {
+            ...restStyles,
+            ...getVariantStyles(variants),
+          }
+        } else {
+          return styles
+        }
+      }
+      const getVariantStyles = (variants) =>
+        Object.keys(variants).reduce((mergedStyles, key) => {
+          const styles = parsePluginStyles(variants[key], plugin, theme)
+          if (styles.visible !== undefined) {
+            styles.display = styles.visible ? baseStyles.display : 'none'
+            delete styles.visible
+          }
+          if (variant.includes(key)) {
+            return {
+              ...mergedStyles,
+              ...mergeVariantsIntoStyles(styles),
+            }
+          } else if (pseudoPropNames.includes(key)) {
+            return {
+              ...mergedStyles,
+              [`:${key}`]: mergeVariantsIntoStyles(styles),
+            }
+          } else {
+            return mergedStyles
+          }
+        }, {})
+      const variantStyles = getVariantStyles(variants)
+      if (visible === false) {
+        baseStyles.display = 'none'
+      }
+      return [baseStyles, mediaQueryStyles, variantStyles]
+    },
+  }
+}