@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/index.js

@@ -0,0 +1,94 @@
+import 'focus-options-polyfill'
+import 'focus-visible'
+
+export * as designSystem from './system'
+export * as hooks from './hooks'
+export * as server from './server'
+export * as utils from './utils'
+
+export { default as ActionsDropdown } from './ActionsDropdown'
+export { default as Alert } from './Alert'
+export { default as Avatar } from './Avatar'
+export { default as Badge } from './Badge'
+export { default as Box } from './Box'
+export { default as Button } from './Button'
+export { default as Calendar } from './Calendar'
+export { default as Card } from './Card'
+export { default as Checkbox } from './Checkbox'
+export { default as CheckboxCard } from './CheckboxCard'
+export { default as CheckboxGroup } from './CheckboxGroup'
+export { default as ChurchCenterStatus } from './ChurchCenterStatus'
+export { default as Collapse } from './Collapse'
+export { default as ColumnView } from './ColumnView'
+export { default as Combobox } from './Combobox'
+export { default as DataTable } from './DataTable'
+export { default as DateField } from './DateField'
+export { default as Divider } from './Divider'
+export { default as DragDrop } from './DragDrop'
+export { default as Drawer } from './Drawer'
+export { default as Dropdown } from './Dropdown'
+export { default as EditActions } from './EditActions'
+export { default as Field } from './Field'
+export { default as Form } from './Form'
+export { default as FieldSet } from './FieldSet'
+export { default as FilterLayout } from './FilterLayout'
+export { default as GridView } from './GridView'
+export { default as Group } from './Group'
+export { default as Heading } from './Heading'
+export { default as HelperDrawer } from './HelperDrawer'
+export { default as Highlight } from './Highlight'
+export { default as Icon } from './Icon'
+export { default as Input } from './Input'
+export { default as Link } from './Link'
+export { default as LinkList } from './LinkList'
+export { default as List } from './List'
+export { default as Logo } from './Logo'
+export { default as Menu } from './Menu'
+export { default as Modal } from './Modal'
+export { default as NumberField } from './NumberField'
+export {
+  PageActions,
+  PageBody,
+  PageButton,
+  PageDropdown,
+  PageHeader,
+  PageTab,
+  PageTabList,
+  PageTitle,
+  PageToolbar,
+} from './Page'
+export { default as PagerView } from './PagerView'
+export { default as Pagination } from './Pagination'
+export { default as Popover } from './Popover'
+export { default as Portal } from './Portal'
+export { default as Progress } from './Progress'
+export { default as Radio } from './Radio'
+export { default as RangeSlider } from './RangeSlider'
+export { default as ScreenReader } from './ScreenReader'
+export { default as Scrim } from './Scrim'
+export { default as Section } from './Section'
+export { default as HeadingUppercase } from './HeadingUppercase'
+export { default as SegmentedControl } from './SegmentedControl'
+export { default as SegmentedTabs } from './SegmentedTabs'
+export { default as Select } from './Select'
+export { default as Sidebar } from './Sidebar'
+export { default as Sortable } from './Sortable'
+export { default as Spinner } from './Spinner'
+export { default as StackView } from './StackView'
+export { default as StepperField } from './StepperField'
+export { default as StepperProgress } from './StepperProgress'
+export { default as Summary } from './Summary'
+export { default as Tab } from './Tab'
+export { default as Table } from './Table'
+export { default as Tabs } from './Tabs'
+export { default as Text } from './Text'
+export { default as TextArea } from './TextArea'
+export { default as ThemeProvider } from './ThemeProvider'
+export { default as TileView } from './TileView'
+export { default as TimeField } from './TimeField'
+export { default as Toolbar } from './Toolbar'
+export { default as TokenInput } from './TokenInput'
+export { default as Tooltip } from './Tooltip'
+export { default as VariantProvider } from './VariantProvider'
+export { default as Wizard } from './Wizard'
+export { default as WrapView } from './WrapView'

package/src/server.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ThemeProvider from './ThemeProvider'
+
+export const styleElement = (
+  <style
+    id="uikit-style"
+    dangerouslySetInnerHTML={{ __html: ThemeProvider.styleReset }}
+  />
+)
+
+export const themeInitializerElement = (
+  <script
+    dangerouslySetInnerHTML={{ __html: ThemeProvider.themeInitializerScript }}
+  />
+)

package/src/system/README.md

@@ -0,0 +1,120 @@
+# System
+
+The underlying architecture of Tapestry-React that powers the CSS in JS styling.
+
+![System Graph](../../../../images/system-graph.png)
+
+- [Style Props](#style-props)
+- [CSS Prop](#css-prop)
+- [Split Styles](#split-styles)
+- [CXS](#cxs)
+- [Related Libraries](#related-libraries)
+
+## Style Props
+
+Styles in Tapestry-React are predominantly driven by style props. In a simple example, we map props to styles that can interact with a defined theme:
+
+```jsx
+<Box color="pink">Hello Box</Box>
+```
+
+This has the benefit of colocating styles making it easier to add, change, or remove as needed.
+
+## CSS Prop
+
+While style props takes care of most use cases, we can also define Sass-like styles through the `css` prop:
+
+```jsx
+<Box css={{ ':hover': { color: 'pink' } }}>Hello Box</Box>
+```
+
+## Split Styles
+
+We achieve this CSS-in-JS solution through a helper [splitStyles](split-styles.js) function that will split out style props and the `css` prop from other props and generate a `className` while passing all other props through:
+
+```jsx
+function Box(props) {
+  const splitProps = splitStyles(props)
+  return <div {...splitProps} />
+}
+```
+
+<small>See the [Box](../Box/Box.tsx) component for an actual implementation.</small>
+
+The `splitStyles` function will also process any `mediaQueries` and `variants` props that are defined. See [Responsive](https://ministrycentered.github.io/ui-kit/responsive) and [Variants](https://ministrycentered.github.io/ui-kit/variants) for more information and examples.
+
+### Plugins
+
+There are two types of plugins `Global` and `Local`. Plugins allow intercepting props designated for styles and mapping them to CSS. The architecture specifically comes from Glamor's [plugin system](https://github.com/threepointone/glamor/blob/master/docs/plugins.md) and has since been modified to be more agnostic and work with `Emotion`.
+
+#### Global
+
+Global plugins are defined in the [plugins](plugins) directory and currently do not support user-defined plugins, only what is available and exported from [plugins/index](plugins/index.js).
+
+```js
+function colorPlugin({ backgroundColor, ...styles }, theme) {
+  if (backgroundColor) {
+    styles.backgroundColor = theme.colors[backgroundColor]
+  }
+  return styles
+}
+```
+
+#### Local
+
+Local plugins are defined in the `splitStyles` function and allow for mapping specific component props to CSS:
+
+```jsx
+const plugin = {
+  // determines what props splitStyles should intercept as styles
+  styleProps: ['axis', 'alignment'],
+  // remove style props here to map properly and return all styles
+  getStyles({ alignment, axis, ...styles }) {
+    return {
+      flexDirection: axis === 'horizontal' ? 'row' : 'column',
+      alignItems: alignment,
+      ...styles,
+    }
+  },
+}
+function StackView(props) {
+  const splitProps = splitStyles({ ...props, plugin })
+  return <div {...splitProps} />
+}
+```
+
+<small>See the [StackView](../StackView/StackView.tsx) component for an actual implementation.</small>
+
+## CXS
+
+A fork of the [CXS](https://github.com/cxs-css/cxs) library is available as an escape hatch if Emotion is performing poorly. This is specifically used to combat performance issues in intensive components like `DataTable`. This is done through a `useCss` hook exported from system:
+
+```jsx
+import { designSystem } from '@planning-center/ui-kit'
+function Box({ color, ...props }) {
+  const css = designSystem.useCss()
+  return <div className={css({ color })} {...props} />
+}
+```
+
+## Related Libraries
+
+Tapestry-React is built on the shoulders of giants. These libraries were and continue to be influential to the success of Tapestry-React.
+
+### Initial architecture inspired by:
+
+[Glamor](https://github.com/threepointone/glamor) (forked [split styles](https://github.com/threepointone/glamor/blob/master/src/jsxstyle.js))
+
+[JSX Style](https://github.com/jsxstyle/jsxstyle/) (style props)
+
+[Rebass](https://rebassjs.org/) (primitive Box component)
+
+### Similar solutions in the wild:
+
+[Styled System](https://styled-system.com/)
+
+[Theme UI](https://theme-ui.com/)
+
+[Chakra UI](https://chakra-ui.com/)
+
+[Material UI](https://material-ui.com/)

package/src/system/box-sizes.js

@@ -0,0 +1,51 @@
+export const boxSizes = {
+  xs: {
+    boxSize: 2.5,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 0.75,
+    paddingVertical: 0,
+    radius: 2.5,
+  },
+  sm: {
+    boxSize: 3,
+    fontSize: 5,
+    lineHeight: 2.5,
+    paddingHorizontalDense: 0.5,
+    paddingHorizontal: 1,
+    paddingVertical: 0.25,
+    radius: 3,
+  },
+  md: {
+    boxSize: 4,
+    fontSize: 4,
+    lineHeight: 3,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.375,
+    paddingVertical: 0.5,
+    radius: 4,
+  },
+  lg: {
+    boxSize: 5,
+    fontSize: 3,
+    lineHeight: 4,
+    paddingHorizontalDense: 1,
+    paddingHorizontal: 1.75,
+    paddingVertical: 0.5,
+    radius: 5,
+  },
+  xl: {
+    boxSize: 8,
+    fontSize: 1,
+    lineHeight: 5,
+    paddingHorizontalDense: 2,
+    paddingHorizontal: 2.25,
+    paddingVertical: 1.5,
+    radius: 6,
+  },
+}
+
+export function getBoxSize(size = 'md') {
+  return boxSizes[size] || {}
+}

package/src/system/button-themes.js

@@ -0,0 +1,173 @@
+export const buttonThemes = {
+  default: {
+    fill: {
+      color: 'foreground',
+      backgroundColor: 'grey-3',
+      hover: { backgroundColor: 'grey-4' },
+      active: { backgroundColor: 'grey-5' },
+    },
+    outline: {
+      stroke: 'separatorSecondary',
+      color: 'foreground',
+      hover: { backgroundColor: 'highlight' },
+      active: { backgroundColor: 'highlightSecondary' },
+    },
+    naked: {
+      color: 'foreground',
+      hover: { backgroundColor: 'highlight' },
+      active: { backgroundColor: 'highlightSecondary' },
+    },
+  },
+  white: {
+    fill: {
+      color: 'primary',
+      backgroundColor: 'white',
+      hover: { backgroundColor: 'grey-0' },
+      active: { backgroundColor: 'grey-1' },
+    },
+    outline: {
+      stroke: 'white',
+      color: 'white',
+      hover: { backgroundColor: 'light-0' },
+      active: { backgroundColor: 'light-1' },
+    },
+    naked: {
+      color: 'white',
+      hover: { backgroundColor: 'light-0' },
+      active: { backgroundColor: 'light-1' },
+    },
+  },
+  light: {
+    fill: {
+      color: 'white',
+      backgroundColor: 'light-1',
+      hover: { backgroundColor: 'light-2' },
+      active: { backgroundColor: 'light-3' },
+    },
+    outline: {
+      stroke: 'light-3',
+      color: 'white',
+      hover: { backgroundColor: 'light-0' },
+      active: { backgroundColor: 'light-1' },
+    },
+    naked: {
+      color: 'light-9',
+      hover: { backgroundColor: 'light-0' },
+      active: { backgroundColor: 'light-1' },
+    },
+  },
+  dark: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'dark-0',
+      hover: { backgroundColor: 'dark-1' },
+      active: { backgroundColor: 'dark-2' },
+    },
+    outline: {
+      stroke: 'dark-3',
+      color: 'dark-9',
+      hover: { backgroundColor: 'dark-0' },
+      active: { backgroundColor: 'dark-1' },
+    },
+    naked: {
+      color: 'dark-9',
+      hover: { backgroundColor: 'dark-0' },
+      active: { backgroundColor: 'dark-1' },
+    },
+  },
+  primary: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'primary',
+      hover: { backgroundColor: 'primary-dark' },
+      active: { backgroundColor: 'primary-darker' },
+    },
+    outline: {
+      stroke: 'primary',
+      color: 'primary',
+      hover: { backgroundColor: 'primary-lightest' },
+      active: { backgroundColor: 'primary-lighter' },
+    },
+    naked: {
+      color: 'primary',
+      hover: { backgroundColor: 'primary-lightest' },
+      active: { backgroundColor: 'primary-lighter' },
+    },
+  },
+  warning: {
+    fill: {
+      color: 'dark-9',
+      backgroundColor: 'yellow-5',
+      hover: { backgroundColor: 'yellow-4' },
+      active: { backgroundColor: 'yellow-3' },
+    },
+    outline: {
+      stroke: 'yellow-5',
+      color: 'yellow-9',
+      hover: { backgroundColor: 'yellow-0' },
+      active: { backgroundColor: 'yellow-1' },
+    },
+    naked: {
+      color: 'yellow-9',
+      hover: { backgroundColor: 'yellow-0' },
+      active: { backgroundColor: 'yellow-1' },
+    },
+  },
+  error: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'red-5',
+      hover: { backgroundColor: 'red-4' },
+      active: { backgroundColor: 'red-3' },
+    },
+    outline: {
+      stroke: 'red-5',
+      color: 'red-5',
+      hover: { backgroundColor: 'red-0' },
+      active: { backgroundColor: 'red-1' },
+    },
+    naked: {
+      color: 'error',
+      hover: { backgroundColor: 'red-0' },
+      active: { backgroundColor: 'red-1' },
+    },
+  },
+  success: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'green-5',
+      hover: { backgroundColor: 'green-4' },
+      active: { backgroundColor: 'green-3' },
+    },
+    outline: {
+      stroke: 'green-5',
+      color: 'green-5',
+      hover: { backgroundColor: 'green-0' },
+      active: { backgroundColor: 'green-1' },
+    },
+    naked: {
+      color: 'green',
+      hover: { backgroundColor: 'green-0' },
+      active: { backgroundColor: 'green-1' },
+    },
+  },
+  info: {
+    fill: {
+      color: 'light-9',
+      backgroundColor: 'blue-5',
+      hover: { backgroundColor: 'blue-4' },
+      active: { backgroundColor: 'blue-3' },
+    },
+    outline: {
+      stroke: 'blue-5',
+      color: 'blue-5',
+      hover: { backgroundColor: 'blue-0' },
+      active: { backgroundColor: 'blue-1' },
+    },
+    naked: {
+      color: 'blue-5',
+      hover: { backgroundColor: 'blue-0' },
+      active: { backgroundColor: 'blue-1' },
+    },
+  },
+}

package/src/system/colors/colors.js

@@ -0,0 +1,195 @@
+import { flattenPalette } from './utils'
+
+export const palette = {
+  primary: {
+    lightest: 'hsl(88, 24%, 92%)',
+    lighter: 'hsl(88, 32%, 86%)',
+    light: 'hsl(88, 40%, 54%)',
+    base: 'hsl(88, 44%, 40%)',
+    dark: 'hsl(88, 46%, 36%)',
+    darker: 'hsl(88, 52%, 32%)',
+    darkest: 'hsl(88, 72%, 20%)',
+  },
+
+  warning: {
+    lighter: 'hsl(60, 99%, 90%)',
+    light: 'hsl(56, 97%, 74%)',
+    base: 'hsl(50, 94%, 56%)',
+    dark: 'hsl(48, 93%, 48%)',
+    darker: 'hsl(42, 90%, 30%)',
+  },
+
+  error: {
+    lighter: 'hsl(7, 60%, 90%)',
+    light: 'hsl(7, 72%, 76%)',
+    base: 'hsl(7, 78%, 64%)',
+    dark: 'hsl(7, 80%, 52%)',
+    darker: 'hsl(7, 86%, 30%)',
+  },
+
+  success: {
+    lighter: 'hsl(96, 24%, 92%)',
+    light: 'hsl(96, 32%, 76%)',
+    base: 'hsl(96, 40%, 58%)',
+    dark: 'hsl(96, 44%, 50%)',
+    darker: 'hsl(96, 60%, 20%)',
+  },
+
+  red: [
+    'hsl(8, 73%, 96%)',
+    'hsl(8, 74%, 92%)',
+    'hsl(8, 75%, 88%)',
+    'hsl(8, 76%, 68%)',
+    'hsl(8, 77%, 60%)',
+    'hsl(8, 78%, 56%)',
+    'hsl(8, 79%, 52%)',
+    'hsl(8, 80%, 48%)',
+    'hsl(8, 81%, 40%)',
+    'hsl(8, 82%, 30%)',
+  ],
+
+  blue: [
+    'hsl(197, 56%, 92%)',
+    'hsl(197, 56%, 88%)',
+    'hsl(197, 56%, 72%)',
+    'hsl(197, 56%, 64%)',
+    'hsl(197, 56%, 52%)',
+    'hsl(197, 56%, 44%)',
+    'hsl(197, 56%, 40%)',
+    'hsl(197, 56%, 32%)',
+    'hsl(197, 56%, 24%)',
+    'hsl(197, 56%, 20%)',
+  ],
+
+  green: [
+    'hsl(96, 24%, 92%)',
+    'hsl(96, 30%, 84%)',
+    'hsl(96, 32%, 76%)',
+    'hsl(96, 34%, 72%)',
+    'hsl(96, 36%, 64%)',
+    'hsl(96, 40%, 58%)',
+    'hsl(96, 44%, 50%)',
+    'hsl(96, 48%, 40%)',
+    'hsl(96, 52%, 30%)',
+    'hsl(96, 60%, 20%)',
+  ],
+
+  yellow: [
+    'hsl(50, 89%, 90%)',
+    'hsl(50, 90%, 86%)',
+    'hsl(50, 91%, 74%)',
+    'hsl(50, 92%, 68%)',
+    'hsl(50, 93%, 62%)',
+    'hsl(50, 94%, 56%)',
+    'hsl(50, 95%, 48%)',
+    'hsl(50, 96%, 40%)',
+    'hsl(50, 97%, 32%)',
+    'hsl(50, 98%, 26%)',
+  ],
+
+  light: [
+    'hsla(0,0%,100%,0.16)',
+    'hsla(0,0%,100%,0.24)',
+    'hsla(0,0%,100%,0.32)',
+    'hsla(0,0%,100%,0.44)',
+    'hsla(0,0%,100%,0.50)',
+    'hsla(0,0%,100%,0.60)',
+    'hsla(0,0%,100%,0.68)',
+    'hsla(0,0%,100%,0.76)',
+    'hsla(0,0%,100%,0.88)',
+    'hsla(0,0%,100%,0.96)',
+  ],
+
+  dark: [
+    'hsla(0,0%,0%,0.04)',
+    'hsla(0,0%,0%,0.08)',
+    'hsla(0,0%,0%,0.12)',
+    'hsla(0,0%,0%,0.16)',
+    'hsla(0,0%,0%,0.24)',
+    'hsla(0,0%,0%,0.32)',
+    'hsla(0,0%,0%,0.40)',
+    'hsla(0,0%,0%,0.46)',
+    'hsla(0,0%,0%,0.54)',
+    'hsla(0,0%,0%,0.68)',
+  ],
+
+  grey: [
+    'hsl(200,1%,98%)',
+    'hsl(200,1%,96%)',
+    'hsl(200,1%,94%)',
+    'hsl(200,1%,92%)',
+    'hsl(200,1%,90%)',
+    'hsl(200,1%,86%)',
+    'hsl(200,1%,74%)',
+    'hsl(200,1%,58%)',
+    'hsl(200,1%,46%)',
+    'hsl(200,1%,28%)',
+  ],
+
+  foreground: {
+    foreground: 'grey-9',
+    foregroundSecondary: 'grey-8',
+    foregroundTertiary: 'grey-7',
+  },
+
+  background: {
+    background: 'hsl(30, 9%, 99%)',
+    backgroundSecondary: 'hsl(30, 9%, 97%)',
+    backgroundTertiary: 'hsl(30, 9%, 95%)',
+  },
+
+  surface: {
+    surface: 'white',
+    surfaceSecondary: 'grey-0',
+    surfaceTertiary: 'grey-1',
+  },
+
+  separator: {
+    separator: 'grey-6',
+    separatorSecondary: 'grey-5',
+    separatorTertiary: 'grey-4',
+    separatorHover: 'separator',
+    separatorFocus: 'primary',
+    separatorFocusSecondary: 'primary-lighter',
+  },
+
+  highlight: {
+    highlight: 'grey-2',
+    highlightSecondary: 'grey-3',
+  },
+
+  link: {
+    linkForeground: 'primary',
+    linkBackground: 'hsl(200,100%,98%)',
+  },
+
+  days: {
+    sunday: '#7DC156',
+    monday: '#789FF8',
+    tuesday: '#A193FD',
+    wednesday: '#D18CF6',
+    thursday: '#FA7EA4',
+    friday: '#F69688',
+    saturday: '#66BEEB',
+  },
+
+  apps: {
+    'check-ins': '#8c6999',
+    giving: '#f4c551',
+    groups: '#f58a4f',
+    'music-stand': '#4984c4',
+    pco: '#3565cf',
+    people: '#5781cf',
+    'planning-center': '#2266f7',
+    projector: '#f19900',
+    registrations: '#569690',
+    calendar: '#cc4832',
+    services: '#6a9639',
+  },
+}
+
+export const colors = flattenPalette(palette)
+
+export function getColor(key) {
+  return key ? colors[key] : colors
+}

package/src/system/colors/index.js

@@ -0,0 +1,8 @@
+export { colors, palette, getColor } from './colors'
+export {
+  createTones,
+  eachPalette,
+  flattenPalette,
+  generateColorScale,
+  setAlphaChannel,
+} from './utils'