@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

package/src/system/colors/utils.js

@@ -1,191 +0,0 @@
-import {
-  darken,
-  setLightness,
-  parseToRgb,
-  parseToHsl,
-  rgba,
-  mix,
-  getLuminance,
-  toColorString,
-} from 'polished'
-import { getCSSProperty } from '../../utils'
-
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1)
-}
-
-export function setAlphaChannel(alpha, color) {
-  if (typeof alpha !== 'undefined') {
-    const { red, green, blue } = parseToRgb(color)
-    return `rgba(${red}, ${green}, ${blue}, ${alpha})`
-  } else {
-    return color
-  }
-}
-
-export function generateColorScale({ key, baseColor }) {
-  return {
-    [`${key}-lightest`]: setLightness(0.94, baseColor),
-    [`${key}-lighter`]: setLightness(0.92, baseColor),
-    [`${key}-light`]: setLightness(0.7, baseColor),
-    [key]: baseColor,
-    [`${key}-dark`]: darken(0.04, baseColor),
-    [`${key}-darker`]: darken(0.08, baseColor),
-    [`${key}-darkest`]: darken(0.16, baseColor),
-  }
-}
-
-export function eachPalette(palette, getColor) {
-  return Object.keys(palette).map((key) => {
-    const colorSet = palette[key]
-    let nextColors
-    if (typeof colorSet === 'string') {
-      nextColors = {
-        [key]: colorSet,
-      }
-    } else if (Array.isArray(colorSet)) {
-      // deal with scale values: color, color-0, color-1, etc.
-      nextColors = colorSet.reduce(
-        (flatColors, color, index) => ({
-          ...flatColors,
-          [`${key}-${index}`]: color,
-        }),
-        {}
-      )
-    } else {
-      // if palette contains a "base" key spread under key name: primary, primary-light, etc.
-      if (colorSet.base) {
-        nextColors = Object.keys(colorSet).reduce(
-          (flatColors, colorSetKey) => ({
-            ...flatColors,
-            [colorSetKey === 'base' ? key : `${key}-${colorSetKey}`]: colorSet[
-              colorSetKey
-            ],
-          }),
-          {}
-        )
-      } else {
-        nextColors = Object.keys(colorSet).reduce(
-          (flatColors, colorSetKey) => ({
-            ...flatColors,
-            [colorSetKey]: colorSet[colorSetKey],
-          }),
-          {}
-        )
-      }
-    }
-    return getColor({
-      name: capitalizeFirstLetter(key),
-      colors: nextColors,
-    })
-  })
-}
-
-export function flattenPalette(palette) {
-  const parsedPalette = eachPalette(palette, ({ colors }) => colors).reduce(
-    (prevColors, nextColors) => ({ ...prevColors, ...nextColors }),
-    {}
-  )
-  // now that we have a resolved collection, run through it again to fill in any aliased colors
-  return Object.keys(parsedPalette).reduce((collection, key) => {
-    const value = parsedPalette[key]
-    const aliasValue = parsedPalette[value]
-    return {
-      ...collection,
-      [key]: aliasValue ? getCSSProperty('colors', value) : value,
-    }
-  }, {})
-}
-
-// ported from ChromaJS
-// https://github.com/gka/chroma.js/blob/d2c6d917df4ba2b87d8a740de116a0656bcbdfd5/src/io/lightness.coffee
-const EPS = 1e-7
-
-export function adjustLightness(amount, color) {
-  const { alpha = 1 } = parseToRgb(color)
-  let rgb
-  if (amount === 0) {
-    rgb = rgba(0, 0, 0, alpha)
-  } else if (amount === 1) {
-    rgb = rgba(255, 255, 255, alpha)
-  } else {
-    let maxIteration = 20
-    const test = (color1, color2) => {
-      const mixed = mix(0.5, color1, color2)
-      const mixedlightness = getLuminance(mixed)
-      if (Math.abs(amount - mixedlightness) < EPS || !maxIteration--) {
-        return mixed
-      }
-      if (mixedlightness > amount) {
-        return test(color1, mixed)
-      }
-      return test(mixed, color2)
-    }
-    rgb =
-      getLuminance(color) > amount ? test('#000', color) : test(color, '#fff')
-  }
-  return rgb
-}
-
-export function adjustSaturation(amount, color) {
-  const hsl = parseToHsl(color)
-  hsl.saturation += hsl.saturation * amount
-  return toColorString(hsl)
-}
-
-// Color pallette functions
-export function createTone(color, desaturate = 0.5) {
-  return (value) => {
-    // we clamp the number so we can generate better shades if 0 or 1 are passed,
-    // otherwise these colors would be pure black or white
-    const lightnessAmount = Math.min(Math.max(value, 0.05), 0.95)
-    return adjustSaturation(
-      -value * desaturate,
-      adjustLightness(lightnessAmount, color)
-    )
-  }
-}
-
-// calculations repurposed from jxnblk
-// https://github.com/jxnblk/monochrome/blob/master/src/palette.js#L22-L34
-export function createTones(color, desaturate) {
-  const tone = createTone(color, desaturate)
-  const lightness = getLuminance(color)
-  const lowerstep = lightness / 5
-  const upperstep = (1 - lightness) / 6
-  const lower = [4, 3, 2, 1].map((step) => tone(step * lowerstep))
-  const upper = [5, 4, 3, 2, 1, 0].map((step) =>
-    tone(lightness + step * upperstep)
-  )
-  return [...upper, ...lower]
-}
-
-export function createColorScale(color, desaturate) {
-  return {
-    base: color,
-    text: getLuminance(color) < 0.5 ? '#fff' : '#000',
-    tone: createTone(color, desaturate),
-    tones: createTones(color, desaturate),
-  }
-}
-
-export function createColorScales(colors, desaturate) {
-  function colorReducer(parsedColors, key) {
-    return {
-      ...parsedColors,
-      [key]: createColorScale(colors[key], desaturate),
-    }
-  }
-  return Object.keys(colors).reduce(colorReducer, {})
-}
-
-export function flattenColorScales(colors) {
-  return Object.keys(colors).reduce((parsedColors, key) => {
-    const color = colors[key]
-    parsedColors[key] = color.base
-    color.tones.forEach((tone, index) => {
-      parsedColors[`${key}-${index}`] = tone
-    })
-    return parsedColors
-  }, {})
-}

package/src/system/css.js

@@ -1,3 +0,0 @@
-import { parseCssStyles } from './parse-styles'
-
-export default (styles) => (theme) => parseCssStyles(styles, null, theme)

package/src/system/cxs.js

@@ -1,82 +0,0 @@
-let cache = {}
-let prefix = 'x'
-const isDev = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV
-const rules = []
-let insert = (rule) => rules.push(rule)
-const hyphen = (str) => str.replace(/[A-Z]|^ms/g, '-$&').toLowerCase()
-const wrapMediaQuery = (rule, media) => {
-  return media === '' ? rule : `${media}{${rule}}`
-}
-const createRule = (name, selector, prop, value) => {
-  const className =
-    selector === ''
-      ? `.${name}`
-      : selector.includes('&')
-      ? selector.replace('&', `.${name}`)
-      : `.${name}${selector}`
-  return `${className.trim()}{${hyphen(prop)}:${value}}`
-}
-
-function parse(styles, selector = '', parentMedia = '') {
-  let className = ''
-  for (let key in styles) {
-    const value = styles[key]
-    if (value === undefined || value === null) {
-      continue
-    }
-    if (typeof value === 'object') {
-      const media = /^@/.test(key) ? key : null
-      const chainedSelector = media
-        ? selector
-        : key.startsWith(':')
-        ? `${selector}${key}`
-        : `${selector} ${key}`
-      className += parse(value, chainedSelector, media || parentMedia)
-      continue
-    }
-    const cacheKey = key + value + selector + parentMedia
-    if (cache[cacheKey]) {
-      className += ' ' + cache[cacheKey]
-    } else {
-      const utilityClassName = prefix + rules.length.toString(36)
-      const rule = wrapMediaQuery(
-        createRule(utilityClassName, selector, key, value),
-        parentMedia
-      )
-      insert(rule)
-      cache[cacheKey] = utilityClassName
-      className += ' ' + utilityClassName
-    }
-  }
-  return className
-}
-
-function cxs(...styles) {
-  return styles
-    .map((style) => parse(style))
-    .join(' ')
-    .trim()
-}
-
-cxs.css = () => rules.sort().join('')
-
-cxs.reset = () => {
-  cache = {}
-  while (rules.length) rules.pop()
-}
-
-if (typeof document !== 'undefined') {
-  const sheet = document.head.appendChild(document.createElement('style')).sheet
-  insert = (rule) => {
-    try {
-      rules.push(rule)
-      sheet.insertRule(rule, sheet.cssRules.length)
-    } catch (error) {
-      if (isDev) {
-        console.warn('whoops, illegal rule inserted', rule)
-      }
-    }
-  }
-}
-
-export default cxs

package/src/system/cxs.test.js

@@ -1,126 +0,0 @@
-import cxs from './cxs'
-
-afterEach(() => {
-  cxs.reset()
-})
-
-test('exports a function', () => {
-  expect(typeof cxs).toEqual('function')
-})
-
-test('returns a className', () => {
-  const className = cxs({ color: 'tomato' })
-  expect(typeof className).toEqual('string')
-  expect(className).toEqual(expect.stringMatching(/^x/))
-})
-
-test('creates a CSS rule', () => {
-  cxs({ color: 'tomato' })
-  expect(typeof cxs.css()).toEqual('string')
-  expect(cxs.css()).toEqual('.x0{color:tomato}')
-})
-
-test('deduplicates', () => {
-  const a = cxs({ color: 'tomato' })
-  const b = cxs({ color: 'tomato' })
-  expect(a).toEqual(b)
-})
-
-test('handles multiple declarations', () => {
-  const className = cxs({
-    fontSize: '48px',
-    color: 'tomato',
-    ':hover': {
-      color: 'black',
-    },
-  })
-  expect(className.split(' ').length).toEqual(3)
-})
-
-test('handles child selectors', () => {
-  cxs({
-    color: 'tomato',
-    ':hover': {
-      color: 'black',
-    },
-  })
-  expect(cxs.css()).toEqual('.x0{color:tomato}.x1:hover{color:black}')
-})
-
-test('replaces ampersand selectors', () => {
-  cxs({
-    '&:hover': {
-      color: 'black',
-    },
-  })
-  expect(cxs.css()).toEqual('.x0:hover{color:black}')
-})
-
-test('replaces complex ampersand selectors', () => {
-  cxs({
-    '[role="row"]:hover > &': {
-      color: 'black',
-    },
-  })
-  expect(cxs.css()).toEqual('[role="row"]:hover > .x0{color:black}')
-})
-
-test('handles media queries', () => {
-  cxs({
-    '@media print': {
-      color: 'black',
-    },
-  })
-  expect(cxs.css()).toEqual('@media print{.x0{color:black}}')
-})
-
-test('handles nested objects', () => {
-  cxs({
-    '@media screen': {
-      ':hover': {
-        color: 'tomato',
-      },
-    },
-  })
-  expect(cxs.css()).toEqual('@media screen{.x0:hover{color:tomato}}')
-})
-
-test('handles media queries with ampersand selectors', () => {
-  cxs({
-    '@media print': {
-      '[role="row"]:hover > &': {
-        color: 'tomato',
-      },
-    },
-  })
-  expect(cxs.css()).toEqual(
-    '@media print{[role="row"]:hover > .x0{color:tomato}}'
-  )
-})
-
-test('ignores undefined and null values', () => {
-  const className = cxs({
-    display: undefined,
-    color: null,
-  })
-  expect(className).toEqual('')
-  expect(cxs.css()).toEqual('')
-})
-
-test('resets cached rules', () => {
-  cxs({ color: 'tomato' })
-  cxs.reset()
-  expect(cxs.css().length).toEqual(0)
-})
-
-test('media rules stay in order', () => {
-  cxs({
-    color: 'tomato',
-    '@media screen': {
-      color: 'black',
-    },
-  })
-  const css = cxs.css()
-  expect(css).toEqual(expect.stringMatching(/^\.x0/))
-  expect(css).toEqual(expect.stringMatching(/@media/))
-})

package/src/system/default-theme.ts

@@ -1,53 +0,0 @@
-import * as general from '@planningcenter/icons/paths/general'
-import * as tapestry from '@planningcenter/icons/paths/tapestry'
-
-import { Theme } from '../index'
-
-import { boxSizes } from './box-sizes'
-import { buttonThemes } from './button-themes'
-import { colors } from './colors'
-
-const controlStyles = {
-  fill: 'surfaceTertiary',
-  stroke: 'separatorSecondary',
-  focusStroke: 'blue-5',
-  checkedFill: 'primary-light',
-  checkedStroke: 'primary',
-}
-
-const defaultTheme: Theme = {
-  id: 'default',
-  boxSizes,
-  colors,
-  icons: {
-    general,
-    tapestry,
-  },
-  breakpoints: { xs: 480, sm: 600, md: 720, lg: 960, xl: 1200 },
-  button: { themes: buttonThemes },
-  calendar: { weekStartsOn: 0 },
-  checkbox: controlStyles,
-  radio: controlStyles,
-  elevations: [
-    '0 2px 5px rgba(219,219,219,0.3)',
-    '0 4px 12px rgba(0,0,0,0.12)',
-    '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
-    '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-    '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-    '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
-  ],
-  fontSizes: [30, 21, 18, 16, 14, 12, 10],
-  lineHeights: [40, 32, 24, 24, 20, 16, 16],
-  group: { radius: 3 },
-  spinner: {
-    color: 'primary',
-    sizes: { xxs: 1.5, xs: 1.75, sm: 2, md: 2.5, lg: 3, xl: 5, xxl: 8 },
-    thickness: { xxs: 3, xs: 3, sm: 3, md: 4, lg: 5, xl: 7, xxl: 9 },
-    trackColor: 'primary-lighter',
-  },
-  toggleSwitch: {
-    backgroundColor: 'interaction66',
-  },
-}
-
-export default defaultTheme

package/src/system/index.js

@@ -1,36 +0,0 @@
-export { boxSizes, getBoxSize } from './box-sizes'
-export {
-  colors,
-  createTones,
-  eachPalette,
-  flattenPalette,
-  generateColorScale,
-  getColor,
-  palette,
-  setAlphaChannel,
-} from './colors'
-export { default as css } from './css'
-export { default as defaultTheme } from './default-theme'
-export { default as border } from './plugins/border'
-export { default as color } from './plugins/color'
-export { default as elevation } from './plugins/elevation'
-export { default as flex } from './plugins/flex'
-export { default as misc } from './plugins/misc'
-export { default as position } from './plugins/position'
-export { default as size } from './plugins/size'
-export { default as space } from './plugins/space'
-export { default as stroke } from './plugins/stroke'
-export { default as typography } from './plugins/typography'
-export { default as splitStyles } from './split-styles'
-export { default as useCss } from './use-css'
-export {
-  getForegroundColor,
-  isLightColor,
-  navigateSize,
-  parseColor,
-  spacing,
-  spacingValue,
-  useBoxSize,
-  useThemeProps,
-  useThemeValue,
-} from './utils'

package/src/system/parse-styles.js

@@ -1,49 +0,0 @@
-import stylePlugins from './plugins'
-import { colorStyleNames } from './style-names'
-
-const pluginCount = stylePlugins.length
-
-export function parsePluginStyles(initialStyles = {}, componentPlugin, theme) {
-  let nextStyles = { ...initialStyles }
-  if (componentPlugin) {
-    nextStyles = componentPlugin.getStyles(nextStyles, theme)
-  }
-  for (var index = 0; index < pluginCount; index++) {
-    const stylePlugin = stylePlugins[index]
-    nextStyles = stylePlugin(nextStyles, theme)
-  }
-  if (nextStyles.css) {
-    nextStyles = {
-      ...nextStyles,
-      ...parseCssStyles(nextStyles.css, componentPlugin, theme),
-    }
-    delete nextStyles.css
-  }
-  return nextStyles
-}
-
-export function parseStyles(style, plugin, theme) {
-  const parsedStyle = {}
-  for (const prop in style) {
-    const value = style[prop]
-    parsedStyle[prop] =
-      colorStyleNames.indexOf(prop) === -1 && typeof value === 'object'
-        ? parseStyles(value, plugin, theme)
-        : value
-  }
-  return parsePluginStyles(parsedStyle, plugin, theme)
-}
-
-export function parseCssStyles(style, plugin, theme) {
-  return style
-    ? style.constructor === Array
-      ? style.reduce(
-          (collection, styles) => ({
-            ...collection,
-            ...parseStyles(styles, plugin, theme),
-          }),
-          {}
-        )
-      : parseStyles(style, plugin, theme)
-    : null
-}

package/src/system/plugins/border.js

@@ -1,100 +0,0 @@
-// @flow
-type Props = {
-  borderWidth: string | number,
-  borderTopWidth: string | number,
-  borderRightWidth: string | number,
-  borderBottomWidth: string | number,
-  borderLeftWidth: string | number,
-
-  radius: string | number,
-  radiusTop: string | number,
-  radiusRight: string | number,
-  radiusBottom: string | number,
-  radiusLeft: string | number,
-}
-
-function appendPixel(value) {
-  return typeof value === 'number' ? value + 'px' : value
-}
-
-function border({
-  borderWidth,
-  borderTopWidth,
-  borderRightWidth,
-  borderBottomWidth,
-  borderLeftWidth,
-
-  radius,
-  radiusTop,
-  radiusRight,
-  radiusBottom,
-  radiusLeft,
-
-  ...styles
-}: Props) {
-  if (typeof borderWidth !== 'undefined') {
-    styles.borderTopWidth = appendPixel(borderWidth)
-    styles.borderRightWidth = appendPixel(borderWidth)
-    styles.borderBottomWidth = appendPixel(borderWidth)
-    styles.borderLeftWidth = appendPixel(borderWidth)
-  }
-
-  if (typeof borderTopWidth !== 'undefined') {
-    styles.borderTopWidth = appendPixel(borderTopWidth)
-  }
-
-  if (typeof borderRightWidth !== 'undefined') {
-    styles.borderRightWidth = appendPixel(borderRightWidth)
-  }
-
-  if (typeof borderBottomWidth !== 'undefined') {
-    styles.borderBottomWidth = appendPixel(borderBottomWidth)
-  }
-
-  if (typeof borderLeftWidth !== 'undefined') {
-    styles.borderLeftWidth = appendPixel(borderLeftWidth)
-  }
-
-  if (typeof radius !== 'undefined') {
-    if (radius === 'circle') {
-      styles.borderRadius = '100%'
-    } else if (radius === 'pill') {
-      styles.borderRadius = '10em'
-    } else if (radius === 'pill-left') {
-      styles.borderTopLeftRadius = '10em'
-      styles.borderBottomLeftRadius = '10em'
-    } else if (radius === 'pill-right') {
-      styles.borderTopRightRadius = '10em'
-      styles.borderBottomRightRadius = '10em'
-    } else {
-      styles.borderTopLeftRadius = appendPixel(radius)
-      styles.borderTopRightRadius = appendPixel(radius)
-      styles.borderBottomRightRadius = appendPixel(radius)
-      styles.borderBottomLeftRadius = appendPixel(radius)
-    }
-  }
-
-  if (typeof radiusTop !== 'undefined') {
-    styles.borderTopLeftRadius = appendPixel(radiusTop)
-    styles.borderTopRightRadius = appendPixel(radiusTop)
-  }
-
-  if (typeof radiusRight !== 'undefined') {
-    styles.borderTopRightRadius = appendPixel(radiusRight)
-    styles.borderBottomRightRadius = appendPixel(radiusRight)
-  }
-
-  if (typeof radiusBottom !== 'undefined') {
-    styles.borderBottomRightRadius = appendPixel(radiusBottom)
-    styles.borderBottomLeftRadius = appendPixel(radiusBottom)
-  }
-
-  if (typeof radiusLeft !== 'undefined') {
-    styles.borderTopLeftRadius = appendPixel(radiusLeft)
-    styles.borderBottomLeftRadius = appendPixel(radiusLeft)
-  }
-
-  return styles
-}
-
-export default border

package/src/system/plugins/color.js

@@ -1,60 +0,0 @@
-// @flow
-import { parseColor } from '../utils'
-import { getCSSProperty } from '../../utils'
-
-type Props = {
-  backgroundColor?: string | Object,
-  borderColor?: string | Object,
-  borderBottomColor?: string | Object,
-  borderLeftColor?: string | Object,
-  borderRightColor?: string | Object,
-  borderTopColor?: string | Object,
-  color?: string | Object,
-  fill?: string | Object,
-  outlineColor?: string | Object,
-  stroke?: string | Object,
-}
-
-function color(
-  {
-    backgroundColor,
-    borderColor,
-    borderBottomColor,
-    borderLeftColor,
-    borderRightColor,
-    borderTopColor,
-    color,
-    fill,
-    outlineColor,
-    stroke,
-    ...styles
-  }: Props,
-  theme
-) {
-  const colorProps = {
-    backgroundColor,
-    borderColor,
-    borderBottomColor,
-    borderLeftColor,
-    borderRightColor,
-    borderTopColor,
-    color,
-    fill,
-    outlineColor,
-    stroke,
-  }
-  Object.keys(colorProps).forEach((key) => {
-    const colorProp = colorProps[key]
-    if (colorProp) {
-      styles[key] =
-        theme && theme.colors
-          ? theme.colors[colorProp]
-            ? getCSSProperty('colors', colorProp)
-            : parseColor(colorProp)
-          : parseColor(colorProp)
-    }
-  })
-  return styles
-}
-
-export default color