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

package/src/Tabs/Tabs.js

@@ -0,0 +1,112 @@
+// @flow
+import React, { useState, useRef, useCallback, Children } from 'react'
+
+import StackView from '../StackView'
+import { generateId } from '../utils'
+import { useThemeProps } from '../system'
+
+import { TABLIST_DISPLAY_NAME } from './TabList'
+import { TABPANELS_DISPLAY_NAME } from './TabPanels'
+
+type Props = {
+  /**
+   * Usually accepts `TabList` and `TabPanel` components.
+   */
+  children?: React.ReactNode,
+
+  /**
+   * 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,
+}
+
+function Tabs(props: Props) {
+  const {
+    activeIndex = null,
+    children,
+    defaultActiveIndex = 0,
+    onChange,
+    ...restProps
+  } = useThemeProps('tabs', props)
+
+  const id = generateId('tabs')
+  const [localActiveIndex, setLocalActiveIndex] = useState(defaultActiveIndex)
+  const tabListRef = useRef(null)
+
+  const setActiveIndex = useCallback((index) => {
+    if (onChange) {
+      onChange(index)
+    }
+    if (activeIndex === null) {
+      setLocalActiveIndex(index)
+    }
+  })
+
+  const getActiveIndex = useCallback(() => {
+    return activeIndex === null ? localActiveIndex : activeIndex
+  })
+
+  const getNextTab = useCallback((startIndex, direction) => {
+    const tabCount = tabListRef.current.children.length
+    let nextIndex = startIndex + direction
+    if (nextIndex < 0) {
+      nextIndex = tabCount - 1
+    } else if (nextIndex >= tabCount) {
+      nextIndex = 0
+    }
+    const nextTab = tabListRef.current.children[nextIndex]
+    if (nextTab.getAttribute('aria-disabled') === 'true') {
+      return getNextTab(nextIndex, direction)
+    } else {
+      return nextTab
+    }
+  })
+
+  const moveTabFocus = useCallback((direction) => {
+    const nextTab = getNextTab(getActiveIndex(), direction)
+    if (nextTab) {
+      nextTab.focus()
+    }
+  })
+
+  return (
+    <StackView
+      innerRef={(node) => {
+        if (node) {
+          tabListRef.current = node.querySelector('[role="tablist"]')
+        }
+      }}
+      {...restProps}
+    >
+      {Children.map(children, (child, index) => {
+        if (child && child.type.displayName === TABLIST_DISPLAY_NAME) {
+          return React.cloneElement(child, {
+            id,
+            activeIndex: getActiveIndex(),
+            moveTabFocus,
+            setActiveIndex,
+          })
+        } else if (child && child.type.displayName === TABPANELS_DISPLAY_NAME) {
+          return React.cloneElement(child, {
+            id,
+            activeIndex: 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.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: tabs
+---
+
+```jsx live
+const tabs = [1, 2, 3, 4]
+render(
+  <Tabs>
+    <Tabs.TabList minWidth={60}>
+      {tabs.map((tab, index) => (
+        <Tabs.Tab key={tab} disabled={index === 2}>
+          Tab {tab}
+        </Tabs.Tab>
+      ))}
+    </Tabs.TabList>
+    <Tabs.TabPanels>
+      {tabs.map((tab) => (
+        <Tabs.TabPanel key={tab} padding={2}>
+          Content for tab {tab}
+        </Tabs.TabPanel>
+      ))}
+    </Tabs.TabPanels>
+  </Tabs>
+)
+```
+
+```jsx live
+const tabs = [1, 2, 3, 4]
+render(
+  <Card as={Tabs} axis="horizontal">
+    <Tabs.TabList axis="vertical" distribution="start" minWidth={20}>
+      {tabs.map((tab) => (
+        <Tabs.Tab key={tab}>Tab {tab}</Tabs.Tab>
+      ))}
+    </Tabs.TabList>
+    <Tabs.TabPanels>
+      {tabs.map((tab) => (
+        <Tabs.TabPanel key={tab} padding={2}>
+          Content for tab {tab}
+        </Tabs.TabPanel>
+      ))}
+    </Tabs.TabPanels>
+  </Card>
+)
+```

package/src/Tabs/index.js

@@ -0,0 +1,10 @@
+import Tabs from './Tabs'
+import Tab from './Tab'
+import TabList from './TabList'
+import TabPanel from './TabPanel'
+import TabPanels from './TabPanels'
+Tabs.Tab = Tab
+Tabs.TabList = TabList
+Tabs.TabPanel = TabPanel
+Tabs.TabPanels = TabPanels
+export default Tabs

package/src/Text/Text.mdx

@@ -0,0 +1,20 @@
+---
+title: Text
+category: Primitives
+summary: Text is a primitive component that typography components build from.
+propsSummary: Accepts all [style props](/style-props) and valid HTML attributes.
+themeKey: text
+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,133 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import * as React from 'react'
+
+import { BoxProps } from '../Box'
+import { useThemeProps } from '../system'
+import splitStyles from '../system/split-styles'
+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<E extends React.ElementType = React.ElementType> = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a `<div>` element).
+   */
+  as?: E
+  /**
+   * 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
+  /**
+   * Describes styles at various points in time. [Read about variants](/variants).
+   */
+  variants?: object
+  /**
+   * Describes props at different breakpoints. [Read about mediaQueries](/responsive).
+   */
+  mediaQueries?: object
+} & BoxProps
+
+const defaultElement = 'p'
+
+export const Text = <E extends React.ElementType = 'p'>({
+  as,
+  innerRef,
+  ...props
+}: TextProps<E>) => {
+  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.mdx

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

package/src/TextArea/TextArea.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import InputBox from '../Input/InputBox'
+
+export type TextAreaProps = {
+  /** Provides an initial value to the `textarea`. */
+  defaultValue?: string
+}
+
+const TextArea = ({
+  defaultValue,
+  ...restProps
+}: TextAreaProps): JSX.Element => {
+  return (
+    <InputBox
+      as="textarea"
+      defaultValue={defaultValue}
+      maxWidth="100%"
+      minWidth="100%"
+      tabIndex={0}
+      {...restProps}
+    />
+  )
+}
+
+export default TextArea

package/src/TextArea/index.js

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

package/src/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,113 @@
+import React, { useLayoutEffect, useMemo, useState } from 'react'
+import { ThemeProvider as EmotionThemeProvider } from '@emotion/react'
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import merge from 'lodash/merge'
+import { Box, BoxProps } from '../Box'
+
+import defaultTheme from '../system/default-theme'
+import { flattenPalette } from '../system'
+import { Theme } from '../index'
+import { objectToCSSProperties, shallowEqual } from '../utils'
+import { getThemeDataAttribute, setRootStyles, styleReset } from './styles'
+
+const STORAGE_KEY = 'tapestry-react-theme'
+
+const caches = {
+  default: createCache({ key: 'tapestry-react' })
+}
+
+function mergeIntoNewObject(...merges: object[]) {
+  return merge({}, ...merges)
+}
+
+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.documentElement.dataset.theme = theme
+  }
+} catch (e) {}
+`
+const emptyTheme = {}
+
+function mergeThemes(a: Theme = {}, b: Theme = {}) {
+  return {
+    ...a,
+    ...b,
+    button: {
+      ...a.button,
+      ...b.button,
+      themes: mergeIntoNewObject(a.button?.themes || {}, b.button?.themes || {}),
+    },
+    colors: mergeIntoNewObject(
+      flattenPalette(a.colors || {}),
+      flattenPalette(b.colors || {})
+    ),
+    spinner: {
+      ...a.spinner,
+      ...b.spinner,
+      sizes: mergeIntoNewObject(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
+      thickness: mergeIntoNewObject(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
+    },
+  }
+}
+
+type Props = {
+  theme?: Theme
+  children: React.ReactNode
+} & BoxProps
+
+export function ThemeProvider({
+  theme = emptyTheme,
+  children,
+  ...boxProps
+}: Props) {
+  const [mergedTheme, setMergedTheme] = useState(() =>
+    mergeThemes(defaultTheme, theme)
+  )
+  const cache = useMemo(() => {
+    if (caches[theme.id]) {
+      return caches[theme.id]
+    } else {
+      caches[theme.id] = createCache({ key: `tapestry-react-${theme.id}` })
+      return caches[theme.id]
+    }
+  }, [theme.id])
+  useLayoutEffect(() => {
+    const nextTheme = mergeThemes(defaultTheme, theme)
+    setRootStyles(
+      nextTheme.id,
+      objectToCSSProperties('colors', nextTheme.colors)
+    )
+    if (!shallowEqual(mergedTheme, nextTheme)) {
+      setMergedTheme(nextTheme)
+    }
+  }, [theme])
+  return (
+    <CacheProvider value={cache}>
+      <EmotionThemeProvider theme={mergedTheme}>
+        <Box
+          className="tapestry-react-reset"
+          {...boxProps}
+          {...{ [`${getThemeDataAttribute(mergedTheme.id)}`]: true }}
+        >
+          {children}
+        </Box>
+      </EmotionThemeProvider>
+    </CacheProvider>
+  )
+}
+
+ThemeProvider.cache = caches.default
+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,96 @@
+import { defaultTheme, flattenPalette } from '../system'
+import { objectToCSSProperties } from '../utils'
+
+export function getThemeDataAttribute(themeId) {
+  if (themeId) {
+    return `data-tapestry-react-theme-provider-${themeId}`
+  } else {
+    return 'data-tapestry-react-theme-provider'
+  }
+}
+
+const getRootStyles = (id, styles) => {
+  const styleString = Object.keys(styles)
+    .map((key) => `${key}: ${styles[key]}`)
+    .join('; ')
+
+  return `[${getThemeDataAttribute(id)}] { ${styleString} }`
+}
+
+export const setRootStyles = (themeId, styles) => {
+  ensureStyleElement(themeId)
+  const styleElement = <HTMLStyleElement>(
+    document.getElementById(`tapestry-react-style-${themeId}`)
+  )
+
+  const sheet = <CSSStyleSheet>styleElement.sheet
+  const styleString = getRootStyles(themeId, styles)
+  sheet.deleteRule(0)
+  sheet.insertRule(styleString, 0)
+}
+
+export const defaultColorProperties = objectToCSSProperties(
+  'colors',
+  flattenPalette(defaultTheme.colors)
+)
+
+export const styleReset = `
+${getRootStyles(null, defaultColorProperties)}
+
+.tapestry-react-reset {
+  appearance: none;
+  background-color: transparent;
+  border-width: 0px;
+  border-style: solid;
+  border-color: transparent;
+  box-sizing: border-box;
+  color: inherit;
+  box-sizing: border-box;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  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;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
+  min-width: 0px;
+  min-height: 0px;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  text-decoration: none;
+}
+
+.tapestry-react-reset::-moz-focus-inner {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
+  border: none;
+}
+
+.tapestry-react-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
+function ensureStyleElement(themeId) {
+  if (
+    typeof window !== 'undefined' &&
+    !document.getElementById(`tapestry-react-style-${themeId}`)
+  ) {
+    const styleElement = document.createElement('style')
+    styleElement.id = `tapestry-react-style-${themeId}`
+    styleElement.innerHTML = styleReset
+    document.head.insertAdjacentElement('afterbegin', styleElement)
+  }
+}

package/src/TileView/TileView.mdx

@@ -0,0 +1,56 @@
+---
+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.
+propsSummary: Accepts all valid HTML attributes.
+---
+
+```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>
+)
+```