@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/system/style-names.ts

@@ -0,0 +1,277 @@
+export const nativeStyleNames = [
+  'alignContent',
+  'alignItems',
+  'alignSelf',
+  'alignmentBaseline',
+  'animation',
+  'animationDelay',
+  'animationDirection',
+  'animationDuration',
+  'animationFillMode',
+  'animationIterationCount',
+  'animationName',
+  'animationPlayState',
+  'animationTimingFunction',
+  'backfaceVisibility',
+  'background',
+  'backgroundAttachment',
+  'backgroundBlendMode',
+  'backgroundClip',
+  'backgroundImage',
+  'backgroundOrigin',
+  'backgroundPosition',
+  'backgroundPositionX',
+  'backgroundPositionY',
+  'backgroundRepeat',
+  'backgroundSize',
+  'baselineShift',
+  'border',
+  'borderBottom',
+  'borderBottomLeftRadius',
+  'borderBottomRightRadius',
+  'borderBottomStyle',
+  'borderBottomWidth',
+  'borderCollapse',
+  'borderImage',
+  'borderImageOutset',
+  'borderImageRepeat',
+  'borderImageSlice',
+  'borderImageSource',
+  'borderImageWidth',
+  'borderLeft',
+  'borderLeftStyle',
+  'borderLeftWidth',
+  'borderRadius',
+  'borderRight',
+  'borderRightStyle',
+  'borderRightWidth',
+  'borderSpacing',
+  'borderStyle',
+  'borderTop',
+  'borderTopLeftRadius',
+  'borderTopRightRadius',
+  'borderTopStyle',
+  'borderTopWidth',
+  'borderWidth',
+  'bottom',
+  'boxShadow',
+  'boxSizing',
+  'breakAfter',
+  'breakBefore',
+  'breakInside',
+  'clear',
+  'clip',
+  'clipPath',
+  'clipRule',
+  'columnCount',
+  'columnFill',
+  'columnGap',
+  'columnRule',
+  'columnRuleColor',
+  'columnRuleStyle',
+  'columnRuleWidth',
+  'columnSpan',
+  'columnWidth',
+  'columns',
+  'contain',
+  'content',
+  'counterIncrement',
+  'counterReset',
+  'cursor',
+  'direction',
+  'display',
+  'fillOpacity',
+  'fillRule',
+  'filter',
+  'flex',
+  'flexBasis',
+  'flexDirection',
+  'flexFlow',
+  'flexGrow',
+  'flexShrink',
+  'flexWrap',
+  'font',
+  'fontFamily',
+  'fontFeatureSettings',
+  'fontKerning',
+  'fontSize',
+  'fontStretch',
+  'fontStyle',
+  'fontVariant',
+  'fontVariantCaps',
+  'fontVariantLigatures',
+  'fontVariantNumeric',
+  'fontWeight',
+  'gap',
+  'gridArea',
+  'gridAutoColumns',
+  'gridAutoFlow',
+  'gridAutoRows',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnGap',
+  'gridColumnStart',
+  'gridGap',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowGap',
+  'gridRowStart',
+  'gridTemplate',
+  'gridTemplateAreas',
+  'gridTemplateColumns',
+  'gridTemplateRows',
+  'height',
+  'imageRendering',
+  'isolation',
+  'justifyContent',
+  'justifyItems',
+  'justifySelf',
+  'left',
+  'letterSpacing',
+  'lightingColor',
+  'lineHeight',
+  'listStyle',
+  'listStyleImage',
+  'listStylePosition',
+  'listStyleType',
+  'margin',
+  'marginBottom',
+  'marginLeft',
+  'marginRight',
+  'marginTop',
+  'mask',
+  'maskType',
+  'maxHeight',
+  'maxWidth',
+  'minHeight',
+  'minWidth',
+  'mixBlendMode',
+  'motion',
+  'objectFit',
+  'objectPosition',
+  'opacity',
+  'order',
+  'outline',
+  'outlineColor',
+  'outlineOffset',
+  'outlineStyle',
+  'outlineWidth',
+  'overflow',
+  'overflowWrap',
+  'overflowX',
+  'overflowY',
+  'padding',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  'pageBreakAfter',
+  'pageBreakBefore',
+  'pageBreakInside',
+  'perspective',
+  'perspectiveOrigin',
+  'placeItems',
+  'placeSelf',
+  'pointerEvents',
+  'position',
+  'resize',
+  'right',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeLinecap',
+  'strokeLinejoin',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+  'tabSize',
+  'tableLayout',
+  'textAlign',
+  'textDecoration',
+  'textIndent',
+  'textOrientation',
+  'textOverflow',
+  'textRendering',
+  'textShadow',
+  'textTransform',
+  'top',
+  'touchAction',
+  'transform',
+  'transformOrigin',
+  'transformStyle',
+  'transition',
+  'transitionDelay',
+  'transitionDuration',
+  'transitionProperty',
+  'transitionTimingFunction',
+  'verticalAlign',
+  'visibility',
+  'clipPath',
+  'filter',
+  'userSelect',
+  'WebkitOverflowScrolling',
+  'writingMode',
+  'whiteSpace',
+  'width',
+  'willChange',
+  'wordBreak',
+  'wordSpacing',
+  'wordWrap',
+  'zIndex',
+] as const
+
+export type NativeStyleNames = typeof nativeStyleNames[number]
+
+export const colorStyleNames = [
+  'backgroundColor',
+  'borderColor',
+  'borderBottomColor',
+  'borderLeftColor',
+  'borderRightColor',
+  'borderTopColor',
+  'color',
+  'fill',
+  'stroke',
+] as const
+
+export type ColorStyleNames = typeof colorStyleNames[number]
+
+export const customStyleNames = [
+  'css',
+  'column',
+  'columnStart',
+  'columnEnd',
+  'row',
+  'rowStart',
+  'rowEnd',
+  'basis',
+  'elevation',
+  'grow',
+  'marginHorizontal',
+  'marginVertical',
+  'paddingHorizontal',
+  'paddingVertical',
+  'radius',
+  'radiusTop',
+  'radiusRight',
+  'radiusBottom',
+  'radiusLeft',
+  'x',
+  'y',
+  'rotate',
+  'scale',
+  'uppercase',
+  'shrink',
+  'wrap',
+  'strokeAlign',
+  'strokeWeight',
+] as const
+
+export type CustomStyleNames = typeof customStyleNames[number]
+
+export const stylePropNames = [
+  ...nativeStyleNames,
+  ...colorStyleNames,
+  ...customStyleNames,
+] as const
+
+export const pseudoPropNames = ['active', 'focus', 'hover'] as const

package/src/system/use-css.js

@@ -0,0 +1,12 @@
+import { useCallback } from 'react'
+import { useTheme } from 'emotion-theming'
+
+import css from './cxs'
+import { parseCssStyles } from './parse-styles'
+
+export default function useCss() {
+  const theme = useTheme()
+  return useCallback((styles) => css(parseCssStyles(styles, null, theme)), [
+    theme,
+  ])
+}

package/src/system/utils.js

@@ -0,0 +1,138 @@
+import { useContext, useCallback } from 'react'
+import { ThemeContext } from '@emotion/core'
+import { darken, getLuminance, lighten, parseToRgb } from 'polished'
+import get from 'lodash.get'
+
+import { getColor } from './colors'
+import defaultTheme from './default-theme'
+
+export const spacing = 8
+export const fontSizeBase = 16
+export const sizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+
+export const alignTypes = {
+  baseline: 'baseline',
+  center: 'center',
+  end: 'flex-end',
+  start: 'flex-start',
+  stretch: 'stretch',
+}
+
+export const justifyTypes = {
+  center: 'center',
+  end: 'flex-end',
+  'space-around': 'space-around',
+  'space-between': 'space-between',
+  'space-evenly': 'space-evenly',
+  start: 'flex-start',
+}
+
+export function navigateSize(startSize, amount) {
+  const index = sizes.indexOf(startSize)
+  return sizes[index + amount] || startSize
+}
+
+export function anyDefined(...args) {
+  return args.some((arg) => arg !== undefined && arg !== null)
+}
+
+export function spacingValue(value: string | number): string {
+  return typeof value === 'number' ? value * spacing + 'px' : value
+}
+
+export function expandDirectionalProperty(name, value) {
+  let values = value.split(/\s+/)
+  if (values.length === 1) {
+    const value = values[0]
+    values = [value, value, value, value]
+  } else if (values.length === 2) {
+    values = values.concat(values)
+  } else if (values.length === 3) {
+    values.push(values[1])
+  }
+  return ['Top', 'Right', 'Bottom', 'Left'].reduce(
+    (acc, direction, i) => ({
+      ...acc,
+      [`${name}${direction}`]: values[i],
+    }),
+    {}
+  )
+}
+
+export function parseSides(...sides: Array<number | string>) {
+  return sides.reduce((acc, side) => {
+    if (typeof side === 'string') {
+      return side
+    } else if (side !== null && typeof side !== 'undefined') {
+      return side * spacing + 'px'
+    }
+    return acc
+  }, 0)
+}
+
+export function parseColor(color) {
+  if (typeof color === 'object') {
+    let parsedColor = getColor(color.base) || color.base
+
+    if (parsedColor === 'transparent') {
+      return parsedColor
+    }
+
+    if (color.darken) {
+      parsedColor = darken(color.darken, parsedColor)
+    }
+
+    if (color.lighten) {
+      parsedColor = lighten(color.lighten, parsedColor)
+    }
+
+    if (typeof color.alpha !== 'undefined') {
+      const { red, green, blue } = parseToRgb(parsedColor)
+      return `rgba(${red}, ${green}, ${blue}, ${color.alpha})`
+    } else {
+      return parsedColor
+    }
+  }
+  return getColor(color) || color
+}
+
+export function isLightColor(color) {
+  if (color === 'transparent') {
+    return null
+  }
+  try {
+    return getLuminance(parseColor(color)) > 0.5
+  } catch (err) {
+    return null
+  }
+}
+
+export function getForegroundColor(color) {
+  return isLightColor(color) ? 'dark-9' : 'light-9'
+}
+
+export function useThemeValue(path, defaultValue) {
+  const userTheme = useContext(ThemeContext)
+  return path
+    ? get(userTheme, path, defaultValue || get(defaultTheme, path))
+    : userTheme || defaultTheme
+}
+
+export function useThemeProps(path, props) {
+  return { ...useThemeValue(path), ...props }
+}
+
+export function useBoxSize(size = 'md') {
+  const boxSizes = useThemeValue('boxSizes')
+  const navigateSize = useCallback(
+    (amount) => {
+      const index = Object.keys(boxSizes).indexOf(size)
+      return sizes[index + amount] || size
+    },
+    [size]
+  )
+  return {
+    ...(boxSizes[size] || {}),
+    navigateSize,
+  }
+}