@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.2

package/src/Tabs/Tabs.js

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

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

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

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

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

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

package/src/TextArea/TextArea.mdx

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

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

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

package/src/ThemeProvider/ThemeProvider.tsx

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

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

package/src/ThemeProvider/styles.ts

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

@@ -1,56 +0,0 @@
----
-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>
-)
-```