@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/system/plugins/elevation.js

@@ -1,8 +0,0 @@
-function elevation({ elevation: _elevation, ...styles }, theme) {
-  if (typeof _elevation !== 'undefined') {
-    styles.boxShadow = theme.elevations[parseFloat(_elevation) - 1]
-  }
-  return styles
-}
-
-export default elevation

package/src/system/plugins/flex.js

@@ -1,88 +0,0 @@
-// @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

@@ -1,41 +0,0 @@
-// @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

@@ -1,27 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,49 +0,0 @@
-// @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

@@ -1,37 +0,0 @@
-// @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

@@ -1,133 +0,0 @@
-// @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

@@ -1,48 +0,0 @@
-// @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

@@ -1,27 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,109 +0,0 @@
-import { stylePropNames, pseudoPropNames } from './style-names'
-import { parsePluginStyles } from './parse-styles'
-
-export default function SplitStyles({
-  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
-      ? `tapestry-react-reset ${className}`
-      : `tapestry-react-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]
-    },
-  }
-}