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

package/src/system/style-names.ts

@@ -1,278 +0,0 @@
-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',
-  'outlineColor',
-  '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

@@ -1,12 +0,0 @@
-import { useCallback } from 'react'
-import { useTheme } from '@emotion/react'
-
-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

@@ -1,138 +0,0 @@
-import { useContext, useCallback } from 'react'
-import { ThemeContext } from '@emotion/react'
-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,
-  }
-}