@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/src/Tab/Tab.mdx

@@ -1,6 +1,7 @@
 ---
 title: Tab
 category: General
+propsSummary: Accepts [Text](/text) props.
 ---
 
 ```jsx live

package/src/Table/ColumnPicker.js

@@ -15,7 +15,7 @@ function ColumnPicker({
   return (
     <Dropdown
       variant="outline"
-      icon={{ name: 'columns' }}
+      icon={{ name: 'general.threeVerticalBars' }}
       tooltip={{ title: 'Filter Columns' }}
       placement="bottom-end"
       closeOnSelect={false}

package/src/Table/DragHandle.js

@@ -3,7 +3,7 @@ import React from 'react'
 import Icon from '../Icon'
 
 const DragHandle = () => (
-  <Icon name="drag-handle" size="sm" color="foregroundTertiary" cursor="grab" />
+  <Icon name="general.dragHandle" size="sm" color="foregroundTertiary" cursor="grab" />
 )
 
 export default DragHandle

package/src/Table/NavigationArrow.js

@@ -38,7 +38,7 @@ function NavigationArrow({
     transition: 'all 300ms ease',
   }
   const buttonProps = {
-    icon: { name: `caret-${side}` },
+    icon: { name: `general.${side}Chevron` },
     title: `navigate ${side}`,
     theme: false,
     disabled: direction === 1 ? progress >= 0.99 : progress <= 0,

package/src/Table/SubRowToggleCell.js

@@ -27,7 +27,7 @@ const SubRowToggleCell = ({
         // TODO: expose for better accessibility
         theme={false}
         title="Toggle row"
-        icon={{ name: 'arrow-down' }}
+        icon={{ name: 'general.downCaret' }}
         transform={!toggled && 'rotate(-90deg)'}
         {...restProps}
       />

package/src/Table/Table.js

@@ -1,8 +1,7 @@
 // @flow
 import React, { PureComponent, Children, Fragment } from 'react'
 import { Global } from '@emotion/core'
-import camelCase from 'lodash.camelcase'
-import snakeCase from 'lodash.snakecase'
+import { camelCase, snakeCase } from 'lodash'
 
 import type { PaginationProps } from '../Pagination/Pagination'
 
@@ -265,7 +264,7 @@ class Table extends PureComponent<TableProps> {
   }
 
   static getIconDirection(direction) {
-    return direction === Table.ASC ? 'arrow-up' : 'arrow-down'
+    return direction === Table.ASC ? 'general.upCaret' : 'general.downCaret'
   }
 
   static defaultProps = {

package/src/Table/Table.mdx

@@ -188,7 +188,7 @@ class TableExample extends React.Component {
         marginLeft: 'auto',
         position: 'sticky',
         right: 0,
-        header: <Icon name="person" />,
+        header: <Icon name="general.person" />,
         label: 'Age',
         cell: 'age',
       },
@@ -241,7 +241,7 @@ class TableExample extends React.Component {
             <Button
               title="Compact header"
               iconRight={
-                this.state.compactHeader ? { name: 'checkmark' } : undefined
+                this.state.compactHeader ? { name: 'general.check' } : undefined
               }
               variant="outline"
               onClick={() =>

package/src/Tabs/Tab.js

@@ -45,4 +45,5 @@ function Tab(props: Props) {
   )
 }
 
+Tab.displayName = 'Tabs.Tab'
 export default Tab

package/src/Tabs/Tabs.js

@@ -10,6 +10,11 @@ import TabPanel from './TabPanel'
 import TabPanels, { TABPANELS_DISPLAY_NAME } from './TabPanels'
 
 type Props = {
+  /**
+   * Usually accepts `TabList` and `TabPanel` components.
+   */
+  children?: React.ReactNode,
+
   /**
    * Controls the active `Tab` and `TabPanel`.
    */

package/src/Tabs/Tabs.mdx

@@ -2,6 +2,7 @@
 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.
 ---
 
 ```jsx live

package/src/Text/Text.mdx

@@ -2,6 +2,7 @@
 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.
 order: 2
 ---
 

package/src/Text/Text.tsx

@@ -58,6 +58,10 @@ const textPlugin = {
 }
 
 export type TextProps = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a `<div>` element).
+   */
+  as?: any
   /**
    * Gain access to the internal ref
    */
@@ -94,6 +98,14 @@ export type TextProps = {
    * 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
 
 type Props = React.RefAttributes<any> &

package/src/TextArea/TextArea.js

@@ -1,8 +1,14 @@
+// @flow
 import React from 'react'
 
 import InputBox from '../Input/InputBox'
 
-function TextArea(props) {
+export type Props = {
+  /** Provides an initial value to the `textarea`. */
+  defaultValue?: string,
+}
+
+function TextArea(props: Props) {
   return (
     <InputBox
       as="textarea"

package/src/TextArea/TextArea.mdx

@@ -1,6 +1,7 @@
 ---
 title: TextArea
 category: Forms
+propsSummary: Accepts [Input.InputBox](/Input.InputBox) props.
 ---
 
 ```jsx live

package/src/ThemeProvider/ThemeProvider.tsx

@@ -2,7 +2,7 @@ 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 { merge } from 'lodash'
 
 import defaultTheme from '../system/default-theme'
 import { flattenPalette } from '../system'

package/src/TileView/TileView.mdx

@@ -2,6 +2,7 @@
 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

package/src/TileView/TileView.tsx

@@ -17,18 +17,32 @@ const tileViewPlugin = {
       styles.gridTemplateColumns = `repeat(auto-fill, minmax(${parsedMinCellWidth}, 1fr))`
     }
     if (spacing !== undefined) {
-      styles.gridGap = spacingValue(spacing)
+      styles.gap = spacingValue(spacing)
     }
     return styles
   },
 }
 
 export type TileViewProps = {
+  children?: any
+
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element).*/
+  as?: any
+
   /** The minimum width a cell must be. */
   minCellWidth?: number
 
   /** The amount of space between children. */
-  spacing?: number
+  spacing?: number | string
+
+  /** Gain access to the internal ref */
+  innerRef?: any
+
+  /** 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
 
 type Props = React.RefAttributes<any> &
@@ -39,7 +53,7 @@ type Props = React.RefAttributes<any> &
 
 const defaultElement = 'div'
 
-export function TileView({ as, innerRef, ...props }) {
+export function TileView({ as, innerRef, ...props }: Props) {
   const Element: React.ElementType = as || defaultElement
   const variant = useVariant()
   return (

package/src/TimeField/TimeField.mdx

@@ -1,6 +1,7 @@
 ---
 title: TimeField
 category: Forms
+propsSummary: Accepts [Input](/input) props.
 ---
 
 ```jsx live

package/src/TokenInput/DefaultToken.js

@@ -19,7 +19,7 @@ function DefaultToken({
       size="sm"
       renderRight={
         <Icon
-          name="close"
+          name="general.x"
           size="xs"
           cursor="pointer"
           onClick={() => removeToken(false)}

package/src/TokenInput/TokenInput.js

@@ -10,36 +10,42 @@ import DefaultToken from './DefaultToken'
 
 type Props = {
   /**
-   * > `array` | defaults to `null`
+   * `array` | defaults to `null`
    * Controlled set of tokens.
    */
   tokens: Array<any>,
   /**
-   * > `function(event: {
+   * ```js
+   *  function(event: {
    *  added: boolean
    *  token: any,
    *  tokenIndex: number,
    *  tokens: array,
-   * })`
+   * })
+   * ```
    * Callback when a token has been added or removed.
    */
   onChange: Function,
   /**
-   * > `function(token: any, {
+   * ```js
+   *  function(token: any, {
    *  removeToken: func,
    *  selectFirstToken: func,
    *  selectLastToken: func,
    *  selectNextToken: func,
    *  selectPreviousToken: func,
    *  tokenIndex: number
-   * })`
+   * })
+   * ```
    * Control how a token is rendered. As long as this function returns a string,
    * it will use a default badge, otherwise pass any custom component and
    * functionality you need.
    */
   renderToken?: Function,
   /**
-   * > `function(inputProps: object)`
+   * ```js
+   * function(inputProps: object)
+   * ```
    * Control how the internal input is rendered, `inputProps` must be passed
    * through to the rendered input.
    */

package/src/TokenInput/TokenInput.mdx

@@ -2,6 +2,7 @@
 title: TokenInput
 category: Forms
 summary: Allow users to add and delete multiple items, optionally using autocompletion as they type to find each item when paired with [`Combobox.Popover`](/combobox/#comboboxpopover).
+propsSummary: Accepts [WrapView](/wrapview) props.
 ---
 
 ```jsx live

package/src/Toolbar/Toolbar.mdx

@@ -2,6 +2,7 @@
 title: Toolbar
 category: General
 summary: Toolbars are used to help separate content that have a title as well as an optional helper drawer and/or section actions.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Tooltip/Tooltip.js

@@ -6,6 +6,10 @@ import Popover from '../Popover'
 import { composeEvents, pageViewChange } from '../utils'
 
 export type Props = {
+  /**
+   * The child becomes the trigger for the tooltip, unless it is overridden with `popoverProps={{relativeTo: ref}}`.
+   */
+  children?: any,
   /**
    * The amount of time in milliseconds before the tooltip closes.
    */
@@ -36,10 +40,45 @@ export type Props = {
    */
   triggerOnHover: boolean,
 
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean,
+
+  /** 
+   * `'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end'`
+
+   * Where to place the popover. 
+  */
+  placement?: string,
+
+  /**
+   * Where to render the composed popover into. Accepts an HTML element or selector.
+   * Uses the closest fixed parent or `document.body` by default. This will only
+   * be computed once on initial render.
+   */
+  renderTo?: HTMLElement | string,
+
   /**
    * Accepts any valid [Popover](/popover) props.
    */
   popoverProps?: object,
+
+  /**
+   * Passes props to [Popover](/popover)'s `anchorElement`.
+   */
+  childProps?: object,
 }
 
 const emitter = mitt()

package/src/Tooltip/Tooltip.mdx

@@ -1,7 +1,8 @@
 ---
 title: Tooltip
 category: Overlays
-summary: Composes [Popover](/popover). Used to display a minimal amount of helpful information.
+summary: Used to display a minimal amount of helpful information.
+propsSummary: Accepts [Popover](/popover) props.
 ---
 
 ```jsx live
@@ -24,7 +25,7 @@ render(
     <Tooltip placement="right" title="Tooltip">
       <Box>Right</Box>
     </Tooltip>
-    <Button icon={{ name: 'search' }} tooltip={{ title: 'search' }} />
+    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'search' }} />
   </StackView>
 )
 ```
@@ -35,7 +36,7 @@ render(
     title={
       <StackView width={24} spacing={1} cursor="default">
         <StackView axis="horizontal" alignment="center" spacing={1}>
-          <Icon name="exclamation-circle-filled" size="md" color="error" />
+          <Icon name="general.exclamationCircle" size="md" color="error" />
           <Text fontSize={3} weight={500} color="error">
             Error
           </Text>

package/src/Wizard/Wizard.js

@@ -217,7 +217,7 @@ class Wizard extends Component<Props> {
               {activeStepIndex > 0 && (
                 <Button
                   disabled={sendingPayload}
-                  iconLeft={{ name: 'caret-left' }}
+                  iconLeft={{ name: 'general.leftChevron', size: 'sm' }}
                   onClick={() =>
                     this.setState({ activeStepIndex: activeStepIndex - 1 })
                   }

package/src/Wizard/Wizard.mdx

@@ -1,6 +1,7 @@
 ---
 title: Wizard
 category: General
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -68,9 +69,13 @@ render(
   <Wizard
     buttonProps={{ size: 'sm' }}
     cancelButtonProps={{ theme: 'error', variant: 'fill' }}
-    backButtonProps={{ theme: 'dark', variant: 'outline' }}
+    backButtonProps={{ 
+      theme: 'dark', 
+      variant: 'outline',
+      iconLeft: { name: 'general.leftChevron', size: 'xxs' }
+    }}
     footerProps={{ backgroundColor: 'grey-2' }}
-    nextButtonProps={{ iconRight: { name: 'caret-right' } }}
+    nextButtonProps={{ iconRight: { name: 'general.rightChevron', size: 'xxs' } }}
     onCancel={() => console.log('cancel')}
     onSubmit={() => console.log('submit')}
     padding={8}

package/src/WrapView/WrapView.mdx

@@ -2,6 +2,7 @@
 title: WrapView
 category: Layout
 summary: Lay out children in a row, wrapping if necessary.
+propsSummary: Accepts all valid HTML attributes, [StackView](/stackview) and [Box](/box) props.
 ---
 
 ```jsx live

package/src/WrapView/WrapView.tsx

@@ -2,49 +2,27 @@ import React from 'react'
 
 import { BoxProps } from '../Box'
 import StackView from '../StackView'
+import { spacingValue } from '../system'
 
 export type WrapViewProps = {
+  children?: any
+  
   /** The amount of space between children. */
-  spacing?: number
+  spacing?: number | string
 } & BoxProps
 
 type Props = React.RefAttributes<any> &
   React.HTMLAttributes<any> &
   WrapViewProps
 
-let supportsFlexGap = null
-
-function getSupportsFlexGap() {
-  if (typeof document !== 'undefined' && supportsFlexGap === null) {
-    const div = document.createElement('div')
-    div.style.display = 'flex'
-    div.style.flexDirection = 'column'
-    div.style.gap = '1px'
-    div.appendChild(document.createElement('div'))
-    div.appendChild(document.createElement('div'))
-    document.body.appendChild(div)
-    supportsFlexGap = div.scrollHeight === 1
-    document.body.removeChild(div)
-  }
-  return supportsFlexGap
-}
-
 export function WrapView({ children, spacing, ...restProps }: Props) {
-  const supportsFlexGap = getSupportsFlexGap()
   const styles = {
     basis: '100%',
   } as any
   if (spacing) {
-    if (supportsFlexGap) {
-      styles.gap = spacing
-    } else {
-      styles.marginBottom = -spacing
-      styles['& > *'] = {
-        marginRight: spacing,
-        marginBottom: spacing,
-      }
-    }
+    styles.gap = spacingValue(spacing)
   }
+
   return (
     <StackView axis="horizontal" {...restProps}>
       <StackView wrap axis="horizontal" css={styles}>

package/src/hooks/use-accessibility-violation.tsx

@@ -22,7 +22,7 @@ export function useAccessibilityViolation(
       title: (
         <StackView width={32} spacing={1} cursor="default">
           <StackView axis="horizontal" alignment="center" spacing={1}>
-            <Icon name="exclamation-circle-filled" size="md" color="error" />
+            <Icon name="general.exclamationCircle" size="md" color="error" />
             <Text fontSize={3} weight={500}>
               Accessibility Violation
             </Text>

package/src/hooks/useConstant.ts

@@ -0,0 +1,17 @@
+// A copy/paste of the source of the `use-constant` package.
+// https://github.com/Andarist/use-constant/blob/main/src/index.ts
+// This is done to reduce dependencies.
+
+import * as React from 'react'
+
+type ResultBox<T> = { v: T }
+
+export default function useConstant<T>(fn: () => T): T {
+  const ref = React.useRef<ResultBox<T>>()
+
+  if (!ref.current) {
+    ref.current = { v: fn() }
+  }
+
+  return ref.current.v
+}

package/src/system/default-theme.ts

@@ -1,4 +1,6 @@
-import icons from '../icons'
+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'
@@ -16,7 +18,10 @@ const controlStyles = {
 const defaultTheme: Theme = {
   boxSizes,
   colors,
-  icons,
+  icons: {
+    general,
+    tapestry,
+  },
   breakpoints: { xs: 480, sm: 600, md: 720, lg: 960, xl: 1200 },
   button: { themes: buttonThemes },
   calendar: { weekStartsOn: 0 },

package/src/system/utils.js

@@ -1,7 +1,7 @@
 import { useContext, useCallback } from 'react'
 import { ThemeContext } from '@emotion/core'
 import { darken, getLuminance, lighten, parseToRgb } from 'polished'
-import get from 'lodash.get'
+import { get } from 'lodash'
 
 import { getColor } from './colors'
 import defaultTheme from './default-theme'

package/src/utils.js

@@ -1,6 +1,6 @@
 import { Children, cloneElement } from 'react'
 import { tabbable } from 'tabbable'
-import camelToKebabCase from 'camel-to-kebab'
+import { kebabCase } from 'lodash'
 
 /**
  * Returns true if user platform is an iOS device
@@ -682,12 +682,12 @@ function createCSSProperty(key, value) {
   if (!createdCSSProperties.has(key)) {
     createdCSSProperties.add(key)
   }
-  return `--${camelToKebabCase(key)}-${camelToKebabCase(value)}`
+  return `--${kebabCase(key)}-${kebabCase(value)}`
 }
 
 function getCSSProperty(key, value) {
   return key && value
-    ? `var(--${camelToKebabCase(key)}-${camelToKebabCase(value)})`
+    ? `var(--${kebabCase(key)}-${kebabCase(value)})`
     : undefined
 }
 

package/src/utils.test.js

@@ -0,0 +1,29 @@
+import { createCSSProperty, getCSSProperty } from './utils'
+
+describe('createCSSProperty', () => {
+  test('kebab cases the key and value', () => {
+    expect(createCSSProperty('theCamelCasedKey', 'theCamelCasedValue')).toEqual(
+      '--the-camel-cased-key-the-camel-cased-value'
+    )
+  })
+
+  test("does not mess with already kebab'd keys and values", () => {
+    expect(
+      createCSSProperty('mixedCamel-and-kebab', 'only-kebab-case')
+    ).toEqual('--mixed-camel-and-kebab-only-kebab-case')
+  })
+})
+
+describe('getCSSProperty', () => {
+  test('kebab cases the key and value', () => {
+    expect(getCSSProperty('theCamelCasedKey', 'theCamelCasedValue')).toEqual(
+      'var(--the-camel-cased-key-the-camel-cased-value)'
+    )
+  })
+
+  test("does not mess with already kebab'd keys and values", () => {
+    expect(getCSSProperty('mixedCamel-and-kebab', 'only-kebab-case')).toEqual(
+      'var(--mixed-camel-and-kebab-only-kebab-case)'
+    )
+  })
+})