@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/system/colors/utils.js

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

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

package/src/system/cxs.js

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

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

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

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

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

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

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