@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Tabs/Tabs.js

@@ -0,0 +1,128 @@
+// @flow
+import React, { Component, Children } from 'react'
+
+import StackView from '../StackView'
+import { generateId } from '../utils'
+
+import Tab from './Tab'
+import TabList, { TABLIST_DISPLAY_NAME } from './TabList'
+import TabPanel from './TabPanel'
+import TabPanels, { TABPANELS_DISPLAY_NAME } from './TabPanels'
+
+type Props = {
+  /**
+   * Controls the active `Tab` and `TabPanel`.
+   */
+  activeIndex?: number,
+  /**
+   * Used in place of `activeIndex` for uncontrolled components.
+   */
+  defaultActiveIndex?: number,
+  /**
+   * Called when the active tab should change.
+   *
+   * returns `nextActiveIndex`
+   */
+  onChange?: Function,
+}
+
+class Tabs extends Component<Props> {
+  static Tab = Tab
+
+  static TabList = TabList
+
+  static TabPanel = TabPanel
+
+  static TabPanels = TabPanels
+
+  static defaultProps = {
+    activeIndex: null,
+    defaultActiveIndex: 0,
+  }
+
+  id = generateId('tabs')
+
+  state = {
+    activeIndex: this.props.defaultActiveIndex,
+  }
+
+  setTabList = (node) => {
+    if (node) {
+      this.tabList = node.querySelector('[role="tablist"]')
+    }
+  }
+
+  setActiveIndex = (activeIndex) => {
+    if (this.props.onChange) {
+      this.props.onChange(activeIndex)
+    }
+    if (this.props.activeIndex === null) {
+      this.setState({ activeIndex })
+    }
+  }
+
+  getActiveIndex = () => {
+    return this.props.activeIndex === null
+      ? this.state.activeIndex
+      : this.props.activeIndex
+  }
+
+  getNextTab = (startIndex, direction) => {
+    const tabCount = this.tabList.children.length
+    let nextIndex = startIndex + direction
+    if (nextIndex < 0) {
+      nextIndex = tabCount - 1
+    } else if (nextIndex >= tabCount) {
+      nextIndex = 0
+    }
+    const nextTab = this.tabList.children[nextIndex]
+    if (nextTab.getAttribute('aria-disabled') === 'true') {
+      return this.getNextTab(nextIndex, direction)
+    } else {
+      return nextTab
+    }
+  }
+
+  moveTabFocus = (direction) => {
+    const nextTab = this.getNextTab(this.getActiveIndex(), direction)
+    if (nextTab) {
+      nextTab.focus()
+    }
+  }
+
+  render() {
+    const {
+      activeIndex,
+      children,
+      defaultActiveIndex,
+      onChange,
+      ...restProps
+    } = this.props
+    return (
+      <StackView innerRef={this.setTabList} {...restProps}>
+        {Children.map(children, (child, index) => {
+          if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
+            return React.cloneElement(child, {
+              id: this.id,
+              activeIndex: this.getActiveIndex(),
+              moveTabFocus: this.moveTabFocus,
+              setActiveIndex: this.setActiveIndex,
+            })
+          } else if (
+            child &&
+            child.type.displayName === TABPANELS_DISPLAY_NAME
+          ) {
+            return React.cloneElement(child, {
+              id: this.id,
+              activeIndex: this.getActiveIndex(),
+            })
+          } else {
+            return child
+          }
+        })}
+      </StackView>
+    )
+  }
+}
+
+export default Tabs

package/src/Tabs/Tabs.mdx

@@ -0,0 +1,49 @@
+---
+title: Tabs
+category: General
+summary: A single content area with multiple panels, each associated with a header in a list.
+---
+
+```jsx live
+const { Tab, TabList, TabPanel, TabPanels } = Tabs
+const tabs = [1, 2, 3, 4]
+render(
+  <Tabs>
+    <TabList minWidth={60}>
+      {tabs.map((tab, index) => (
+        <Tab key={tab} disabled={index === 2}>
+          Tab {tab}
+        </Tab>
+      ))}
+    </TabList>
+    <TabPanels>
+      {tabs.map((tab) => (
+        <TabPanel key={tab} padding={2}>
+          Content for tab {tab}
+        </TabPanel>
+      ))}
+    </TabPanels>
+  </Tabs>
+)
+```
+
+```jsx live
+const { Tab, TabList, TabPanel, TabPanels } = Tabs
+const tabs = [1, 2, 3, 4]
+render(
+  <Card as={Tabs} axis="horizontal">
+    <TabList axis="vertical" distribution="start" minWidth={20}>
+      {tabs.map((tab) => (
+        <Tab key={tab}>Tab {tab}</Tab>
+      ))}
+    </TabList>
+    <TabPanels>
+      {tabs.map((tab) => (
+        <TabPanel key={tab} padding={2}>
+          Content for tab {tab}
+        </TabPanel>
+      ))}
+    </TabPanels>
+  </Card>
+)
+```

package/src/Tabs/index.js

@@ -0,0 +1,2 @@
+import Tabs from './Tabs'
+export default Tabs

package/src/Text/Text.mdx

@@ -0,0 +1,18 @@
+---
+title: Text
+category: Primitives
+summary: Text is a primitive component that typography components build from.
+order: 2
+---
+
+```jsx live
+render(
+  <StackView spacing={1}>
+    {[300, 600, 900].map((weight) => (
+      <Text key={weight} weight={weight} mediaQueries={{ lg: { size: 2 } }}>
+        Text weight: {weight}
+      </Text>
+    ))}
+  </StackView>
+)
+```

package/src/Text/Text.tsx

@@ -0,0 +1,124 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import * as React from 'react'
+
+import { BoxProps } from '../Box'
+import { useThemeProps } from '../system'
+import splitStyles from '../system/split-styles'
+import { MediaQueries, Variants } from '../index'
+import { useVariant } from '../VariantProvider'
+
+const textPlugin = {
+  styleProps: ['italic', 'truncate', 'size', 'underline', 'weight', 'wrap'],
+  getStyles({
+    align,
+    italic,
+    truncate,
+    size,
+    underline,
+    weight,
+    wrap = true,
+    ...styles
+  }) {
+    if (align) {
+      styles.textAlign = align
+    }
+
+    if (italic) {
+      styles.fontStyle = 'italic'
+    }
+
+    if (truncate) {
+      if (styles.display !== 'block' || styles.display !== 'flex') {
+        styles.display = 'block'
+      }
+      styles.overflow = 'hidden'
+      styles.textOverflow = 'ellipsis'
+    }
+
+    if (truncate || wrap === false) {
+      styles.whiteSpace = 'nowrap'
+    }
+
+    if (underline) {
+      styles.textDecoration = underline
+    }
+
+    if (typeof size !== 'undefined') {
+      styles.fontSize = size
+    }
+
+    if (weight) {
+      styles.fontWeight = weight
+    }
+
+    return styles
+  },
+}
+
+export type TextProps = {
+  /**
+   * Gain access to the internal ref
+   */
+  innerRef?: Function | Object
+  /**
+   * If `true`, sets `display: inline-block`, otherwise it defaults to `display: block`
+   */
+  inline?: boolean
+  /**
+   * Maps to CSS `textAlign` property
+   */
+  align?: 'left' | 'center' | 'right'
+  /**
+   * Sets `fontStyle: italic`
+   */
+  italic?: boolean
+  /**
+   * Sets `whiteSpace: nowrap`, `overflow: hidden`, `textOverflow: ellipsis`
+   */
+  truncate?: boolean
+  /**
+   * Maps to CSS `fontSize` property. Accepts an index to `fontSizes` theme when using a numeric value, sets a pixel value if a no theme value found.
+   */
+  size?: number | string
+  /**
+   * Maps to CSS `textDecoration` property
+   */
+  underline?: string
+  /**
+   * Maps to CSS `fontWeight` property
+   */
+  weight?: number | string
+  /**
+   * Sets `whiteSpace: nowrap` when `false`
+   */
+  wrap?: boolean
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  TextProps &
+  MediaQueries<TextProps> &
+  Variants<TextProps>
+
+const defaultElement = 'p'
+
+export function Text({ as, innerRef, ...props }: Props) {
+  const { inline, ...restProps } = useThemeProps('text', props)
+  const Element: React.ElementType = as || (inline ? 'p' : defaultElement)
+  const variant = useVariant()
+  return (
+    <Element
+      ref={innerRef}
+      {...splitStyles({
+        display: inline ? 'inline-block' : 'block',
+        lineHeight: '20px',
+        shrink: 1,
+        plugin: textPlugin,
+        variant,
+        ...restProps,
+      })}
+    />
+  )
+}

package/src/Text/index.ts

@@ -0,0 +1,2 @@
+export * from './Text'
+export { Text as default } from './Text'

package/src/TextArea/TextArea.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import InputBox from '../Input/InputBox'
+
+function TextArea(props) {
+  return (
+    <InputBox
+      as="textarea"
+      tabIndex={0}
+      minWidth="100%"
+      maxWidth="100%"
+      {...props}
+    />
+  )
+}
+
+export default TextArea

package/src/TextArea/TextArea.mdx

@@ -0,0 +1,12 @@
+---
+title: TextArea
+category: Forms
+---
+
+```jsx live
+render(() => (
+  <StackView width={32}>
+    <TextArea defaultValue="Simple wrapper around the HTML textarea element using InputBox." />
+  </StackView>
+))
+```

package/src/TextArea/index.js

@@ -0,0 +1,2 @@
+import TextArea from './TextArea'
+export default TextArea

package/src/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,99 @@
+import React, { useLayoutEffect, useState } from 'react'
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
+import { CacheProvider } from '@emotion/core'
+import createCache from '@emotion/cache'
+import merge from 'deepmerge'
+
+import defaultTheme from '../system/default-theme'
+import { flattenPalette } from '../system'
+import { Theme } from '../index'
+import { objectToCSSProperties, shallowEqual } from '../utils'
+import { setRootStyles, styleReset } from './styles'
+
+const STORAGE_KEY = 'ui-kit-theme'
+
+export const cache = createCache({
+  key: 'uikit',
+  prefix: (key) => {
+    switch (key) {
+      case 'appearance':
+      case 'user-select':
+      case 'position':
+      case ':placeholder':
+        return true
+      default:
+        return false
+    }
+  },
+})
+
+export const themeStorage = {
+  get: () => window.localStorage.getItem(STORAGE_KEY),
+  set: (value) => window.localStorage.setItem(STORAGE_KEY, value),
+}
+
+export const themeInitializerScript = `
+try {
+  var theme = window.localStorage.getItem('${STORAGE_KEY}')
+  if (theme) {
+    document.body.dataset.theme = theme
+  }
+} catch (e) {}
+`
+const emptyTheme = {}
+
+function mergeThemes(a: Theme = {}, b: Theme = {}) {
+  return {
+    ...a,
+    ...b,
+    button: {
+      ...a.button,
+      ...b.button,
+      themes: merge(a.button?.themes || {}, b.button?.themes || {}),
+    },
+    colors: merge(
+      flattenPalette(a.colors || {}),
+      flattenPalette(b.colors || {})
+    ),
+    spinner: {
+      ...a.spinner,
+      ...b.spinner,
+      sizes: merge(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
+      thickness: merge(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
+    },
+  }
+}
+
+export function ThemeProvider({
+  theme = emptyTheme,
+  children,
+}: {
+  theme?: Theme
+  children: React.ReactNode
+}) {
+  const [mergedTheme, setMergedTheme] = useState(() =>
+    mergeThemes(defaultTheme, theme)
+  )
+  useLayoutEffect(() => {
+    const nextTheme = mergeThemes(defaultTheme, theme)
+    setRootStyles(objectToCSSProperties('colors', nextTheme.colors))
+    if (!shallowEqual(mergedTheme, nextTheme)) {
+      setMergedTheme(nextTheme)
+    }
+  }, [theme])
+  return (
+    <CacheProvider value={cache}>
+      <EmotionThemeProvider theme={mergedTheme}>
+        {children}
+      </EmotionThemeProvider>
+    </CacheProvider>
+  )
+}
+
+ThemeProvider.cache = cache
+ThemeProvider.setRootStyles = setRootStyles
+ThemeProvider.styleReset = styleReset
+ThemeProvider.themeInitializerScript = themeInitializerScript
+ThemeProvider.themeStorage = themeStorage
+
+export { setRootStyles, styleReset }

package/src/ThemeProvider/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemeProvider'
+export { ThemeProvider as default } from './ThemeProvider'

package/src/ThemeProvider/styles.ts

@@ -0,0 +1,64 @@
+import { defaultTheme, flattenPalette } from '../system'
+import { objectToCSSProperties } from '../utils'
+
+const getRootStyles = (styles) => {
+  const styleString = Object.keys(styles)
+    .map((key) => `${key}: ${styles[key]}`)
+    .join('; ')
+  return `:root { ${styleString} }`
+}
+
+export const setRootStyles = (styles) => {
+  const styleElement = <HTMLStyleElement>document.getElementById('uikit-style')
+  const sheet = <CSSStyleSheet>styleElement.sheet
+  const styleString = getRootStyles(styles)
+  sheet.deleteRule(0)
+  sheet.insertRule(styleString, 0)
+}
+
+export const defaultColorProperties = objectToCSSProperties(
+  'colors',
+  flattenPalette(defaultTheme.colors)
+)
+
+export const styleReset = `
+${getRootStyles(defaultColorProperties)}
+
+.uikit-reset {
+  appearance: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  font-weight: 400;
+  text-decoration: none;
+  flex: 0 0 auto;
+  min-width: 0px;
+  min-height: 0px;
+  padding: 0px;
+  margin: 0px;
+  border: 0px solid transparent;
+  background-color: transparent;
+  color: inherit;
+}
+
+.uikit-reset::-moz-focus-inner {
+  padding: 0px;
+  border: 0px;
+}
+
+.uikit-reset:focus:not(.focus-visible) {
+  outline: 0px;
+}
+`
+  // minify string
+  .replace(/\n/g, '')
+  .replace(/\s\s+/g, ' ')
+
+// we use our own global style implementation in place of Emotion Global
+// so we can have more control over when styles are injected since multiple
+// Providers can be used on a page
+if (typeof window !== 'undefined' && !document.getElementById('uikit-style')) {
+  const styleElement = document.createElement('style')
+  styleElement.id = 'uikit-style'
+  styleElement.innerHTML = styleReset
+  document.head.insertAdjacentElement('afterbegin', styleElement)
+}

package/src/TileView/TileView.mdx

@@ -0,0 +1,55 @@
+---
+title: TileView
+category: Layout
+summary: Auto place children into a grid and let the browser handle columns responsively, showing fewer columns on smaller viewports, and more columns as the viewport increases.
+---
+
+```jsx live
+render(
+  <TileView minCellWidth={30} spacing={2}>
+    {[0, 1, 2, 3, 4, 5, 6, 7, 8].map((index) => (
+      <StackView
+        key={index}
+        padding={1}
+        radius={3}
+        backgroundColor="blue-5"
+        color="white"
+      >
+        Cell {index}
+      </StackView>
+    ))}
+  </TileView>
+)
+```
+
+```jsx live
+render(
+  <ColumnView sizes={[30, 'auto']} spacing={2}>
+    <ColumnView.Column>
+      <StackView
+        height="100%"
+        padding={1}
+        radius={3}
+        backgroundColor="backgroundSecondary"
+      >
+        Sidebar
+      </StackView>
+    </ColumnView.Column>
+    <ColumnView.Column>
+      <TileView minCellWidth={10} spacing={2}>
+        {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((index) => (
+          <StackView
+            key={index}
+            padding={1}
+            radius={3}
+            backgroundColor="blue-5"
+            color="white"
+          >
+            Cell {index}
+          </StackView>
+        ))}
+      </TileView>
+    </ColumnView.Column>
+  </ColumnView>
+)
+```

package/src/TileView/TileView.tsx

@@ -0,0 +1,58 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import * as React from 'react'
+
+import { BoxProps } from '../Box'
+import splitStyles from '../system/split-styles'
+import { spacingValue } from '../system'
+import { MediaQueries, Variants } from '../index'
+import { useVariant } from '../VariantProvider'
+
+const tileViewPlugin = {
+  styleProps: ['minCellWidth', 'spacing'],
+  getStyles({ minCellWidth, spacing, ...styles }) {
+    const parsedMinCellWidth = spacingValue(minCellWidth)
+    if (parsedMinCellWidth) {
+      styles.gridTemplateColumns = `repeat(auto-fill, minmax(${parsedMinCellWidth}, 1fr))`
+    }
+    if (spacing !== undefined) {
+      styles.gridGap = spacingValue(spacing)
+    }
+    return styles
+  },
+}
+
+export type TileViewProps = {
+  /** The minimum width a cell must be. */
+  minCellWidth?: number
+
+  /** The amount of space between children. */
+  spacing?: number
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  TileViewProps &
+  MediaQueries<TileViewProps> &
+  Variants<TileViewProps>
+
+const defaultElement = 'div'
+
+export function TileView({ as, innerRef, ...props }) {
+  const Element: React.ElementType = as || defaultElement
+  const variant = useVariant()
+  return (
+    <Element
+      ref={innerRef}
+      {...splitStyles({
+        display: 'grid',
+        grow: 1,
+        shrink: 1,
+        plugin: tileViewPlugin,
+        variant,
+        ...props,
+      })}
+    />
+  )
+}

package/src/TileView/index.ts

@@ -0,0 +1,2 @@
+export * from './TileView'
+export { TileView as default } from './TileView'