@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/TokenInput/DefaultToken.js

@@ -1,36 +0,0 @@
-import React from 'react'
-
-import Badge from '../Badge'
-import Icon from '../Icon'
-
-function DefaultToken({
-  keyboardControls,
-  removeToken,
-  selectFirstToken,
-  selectLastToken,
-  selectPreviousToken,
-  selectNextToken,
-  token,
-  tokenIndex,
-  ...restProps
-}) {
-  return (
-    <Badge
-      size="sm"
-      renderRight={
-        <Icon
-          name="general.x"
-          size="xs"
-          cursor="pointer"
-          onClick={() => removeToken(false)}
-        />
-      }
-      {...keyboardControls}
-      {...restProps}
-    >
-      {token}
-    </Badge>
-  )
-}
-
-export default DefaultToken

package/src/TokenInput/TokenInput.js

@@ -1,257 +0,0 @@
-// @flow
-import React, { Component, cloneElement } from 'react'
-
-import { getBoxSize, navigateSize } from '../system'
-import InputBox from '../Input/InputBox'
-import WrapView from '../WrapView'
-
-import { defaultRenderToken, defaultRenderInput } from './default-renders'
-import DefaultToken from './DefaultToken'
-
-type Props = {
-  /**
-   * `array` | defaults to `null`
-   * Controlled set of tokens.
-   */
-  tokens: Array<any>,
-  /**
-   * ```js
-   *  function(event: {
-   *  added: boolean
-   *  token: any,
-   *  tokenIndex: number,
-   *  tokens: array,
-   * })
-   * ```
-   * Callback when a token has been added or removed.
-   */
-  onChange: Function,
-  /**
-   * ```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,
-  /**
-   * ```js
-   * function(inputProps: object)
-   * ```
-   * Control how the internal input is rendered, `inputProps` must be passed
-   * through to the rendered input.
-   */
-  renderInput?: Function,
-}
-
-class TokenInput extends Component<Props> {
-  static Token = DefaultToken
-
-  static defaultProps = {
-    tokens: null,
-    renderToken: defaultRenderToken,
-    renderInput: defaultRenderInput,
-    size: 'md',
-  }
-
-  state = {
-    inputValue: '',
-  }
-
-  componentDidUpdate(lastProps) {
-    if (lastProps.tokens.length !== this.props.tokens.length) {
-      this.clearInputValue()
-    }
-  }
-
-  clearInputValue = () => {
-    this.setState({ inputValue: '' })
-  }
-
-  addToken = (token) => {
-    const newTokens = [...this.props.tokens]
-    const tokenIndex = newTokens.indexOf(token)
-    if (tokenIndex > -1) {
-      const removed = newTokens.splice(tokenIndex, 1)
-      newTokens.push(removed[0])
-    } else {
-      newTokens.push(token)
-    }
-    if (this.props.onChange) {
-      this.props.onChange({
-        token,
-        tokenIndex,
-        tokens: newTokens,
-        added: true,
-      })
-    }
-    this.clearInputValue()
-  }
-
-  removeToken = (token, focusIndex) => {
-    const newTokens = [...this.props.tokens]
-    let tokenIndex = -1
-    if (token.constructor === Array) {
-      token.some((val) => {
-        tokenIndex = newTokens.indexOf(val)
-        if (tokenIndex > -1) {
-          newTokens.splice(tokenIndex, 1)
-          return true
-        }
-        return false
-      })
-    } else {
-      tokenIndex = newTokens.indexOf(token)
-      if (tokenIndex > -1) {
-        newTokens.splice(tokenIndex, 1)
-      }
-    }
-    if (this.props.onChange) {
-      this.props.onChange({
-        token,
-        tokenIndex,
-        tokens: newTokens,
-        added: false,
-      })
-    }
-    if (typeof focusIndex === 'number') {
-      setTimeout(() => {
-        this.focus(focusIndex >= newTokens.length ? undefined : focusIndex)
-      })
-    } else {
-      this.blur()
-    }
-  }
-
-  handleInputKeyDown = (e) => {
-    const { selectionStart, selectionEnd } = e.target
-    const canMoveFocusBackward = selectionStart === 0 && selectionEnd === 0
-    if (
-      this.props.tokens.length > 0 &&
-      canMoveFocusBackward &&
-      (e.key === 'Backspace' || e.key === 'ArrowLeft')
-    ) {
-      e.preventDefault()
-      this.focusLastToken()
-    }
-  }
-
-  handleInputChange = (e) => {
-    this.setState({ inputValue: e.target.value })
-  }
-
-  blur = () => {
-    this.inputBox.blur()
-  }
-
-  focus = (index) => {
-    this.inputBox.focus(index)
-  }
-
-  focusFirstToken = () => {
-    this.focus(0)
-  }
-
-  focusLastToken = () => {
-    this.focus(this.props.tokens.length - 1)
-  }
-
-  render() {
-    const {
-      onChange,
-      renderInput,
-      renderToken,
-      tokens,
-      ...restProps
-    } = this.props
-    const inputProps = {
-      size: navigateSize(restProps.size, -1),
-      stroke: false,
-      strokeWeight: 0,
-      grow: 1,
-      shrink: 1,
-      paddingLeft: 0,
-      paddingRight: 0,
-      paddingVertical: 0,
-      onKeyDown: this.handleInputKeyDown,
-      onChange: this.handleInputChange,
-      value: this.state.inputValue,
-    }
-    const { paddingVertical } = getBoxSize(restProps.size)
-    return (
-      <WrapView
-        as={InputBox}
-        innerRef={(c) => (this.inputBox = c)}
-        role="group"
-        focusChildIndex={tokens.length}
-        evenPadding
-        spacing={paddingVertical}
-        {...restProps}
-      >
-        {tokens.map((token, tokenIndex) => {
-          const removeToken = this.removeToken.bind(this, token)
-          const selectFirstToken = this.focusFirstToken
-          const selectLastToken = this.focusLastToken
-          const selectNextToken = this.focus.bind(this, tokenIndex + 1)
-          const selectPreviousToken = this.focus.bind(this, tokenIndex - 1)
-          const tokenToRender = renderToken(token, {
-            keyboardControls: {
-              tabIndex: 0,
-              onKeyDown: (e) => {
-                if (e.key === 'Backspace') {
-                  e.preventDefault()
-                  removeToken(tokenIndex)
-                }
-                if (e.key === 'ArrowLeft') {
-                  e.preventDefault()
-                  selectPreviousToken()
-                }
-                if (e.key === 'ArrowRight') {
-                  e.preventDefault()
-                  selectNextToken()
-                }
-              },
-            },
-            removeToken,
-            selectFirstToken,
-            selectLastToken,
-            selectNextToken,
-            selectPreviousToken,
-            tokenIndex,
-          })
-          return typeof tokenToRender === 'string' ? (
-            <DefaultToken
-              key={tokenToRender}
-              removeToken={removeToken}
-              selectFirstToken={selectFirstToken}
-              selectLastToken={selectLastToken}
-              selectNextToken={selectNextToken}
-              selectPreviousToken={selectPreviousToken}
-              token={tokenToRender}
-              tokenIndex={tokenIndex}
-            />
-          ) : (
-            cloneElement(tokenToRender, { key: JSON.stringify(token) })
-          )
-        })}
-        {renderInput(inputProps, {
-          clearInputValue: this.clearInputValue,
-          addToken: this.addToken,
-          removeToken: this.removeToken,
-          selectFirstToken: this.focusFirstToken,
-          selectLastToken: this.focusLastToken,
-        })}
-      </WrapView>
-    )
-  }
-}
-
-export default TokenInput

package/src/TokenInput/TokenInput.mdx

@@ -1,103 +0,0 @@
----
-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
-function App() {
-  const [foods, setFoods] = React.useState([
-    'apple',
-    'pears',
-    'oranges',
-    'bananas',
-    'kiwis',
-  ])
-  return (
-    <TokenInput
-      maxWidth={80}
-      tokens={foods}
-      onChange={(event) => setFoods(event.tokens)}
-    />
-  )
-}
-render(<App />)
-```
-
-```jsx live
-function App() {
-  const countries = useCountries()
-  const [selectedCountries, setSelectedCountries] = React.useState([])
-  const fieldRef = React.useRef(null)
-  return (
-    <Field
-      label="Favorite Countries"
-      helpContent="Start typing any of your favorite countries you have visited so far."
-      innerRef={fieldRef}
-    >
-      <TokenInput
-        naked
-        tokens={selectedCountries}
-        onChange={({ tokens, token, added }) => {
-          console.log({ tokens, token, added })
-          setSelectedCountries(added ? [...selectedCountries, token] : tokens)
-        }}
-        renderToken={(country, { keyboardControls, removeToken }) => (
-          <TokenInput.Token
-            title={country.name.common}
-            renderLeft={country.flag}
-            keyboardControls={keyboardControls}
-            removeToken={removeToken}
-          />
-        )}
-        renderInput={(inputProps, { clearInputValue }) => (
-          <Combobox.Popover
-            openOnFocus
-            secondaryStroke={false}
-            relativeTo={fieldRef}
-            placeholder="Add country..."
-            onSelect={(token) => {
-              console.log({ token })
-              setSelectedCountries([...selectedCountries, token])
-            }}
-            {...inputProps}
-          >
-            <Combobox.Items
-              value={inputProps.value}
-              filter={{ keys: ['name.common'] }}
-              items={countries.filter(
-                (country) =>
-                  !selectedCountries.some(
-                    (selectedCountry) =>
-                      selectedCountry.name.common === country.name.common
-                  )
-              )}
-              renderItem={(country, index) => (
-                <Combobox.Item
-                  key={country.name.common}
-                  value={country}
-                  index={index}
-                >
-                  <Text marginRight={1}>{country.flag}</Text>
-                  {country.name.common}
-                </Combobox.Item>
-              )}
-              renderEmpty={
-                <Box padding={1}>
-                  No results for{' '}
-                  <Text as="strong" inline weight={700}>
-                    "{inputProps.value}"
-                  </Text>
-                </Box>
-              }
-            />
-          </Combobox.Popover>
-        )}
-      />
-    </Field>
-  )
-}
-
-render(<App />)
-```

package/src/TokenInput/default-renders.js

@@ -1,47 +0,0 @@
-import React from 'react'
-
-import InputField from '../Input/InputField'
-
-import DefaultToken from './DefaultToken'
-
-export function defaultRenderToken(
-  token,
-  {
-    keyboardControls,
-    removeToken,
-    selectFirstToken,
-    selectLastToken,
-    selectNextToken,
-    selectPreviousToken,
-    tokenIndex,
-  }
-) {
-  return (
-    <DefaultToken
-      keyboardControls={keyboardControls}
-      removeToken={removeToken}
-      selectFirstToken={selectFirstToken}
-      selectLastToken={selectLastToken}
-      selectNextToken={selectNextToken}
-      selectPreviousToken={selectPreviousToken}
-      token={token}
-      tokenIndex={tokenIndex}
-    />
-  )
-}
-
-export function defaultRenderInput({ onKeyDown, ...restProps }, { addToken }) {
-  return (
-    <InputField
-      onKeyDown={(e) => {
-        if (e.target.value !== '' && e.key === 'Enter') {
-          addToken(e.target.value)
-        }
-        if (onKeyDown) {
-          onKeyDown(e)
-        }
-      }}
-      {...restProps}
-    />
-  )
-}

package/src/TokenInput/index.js

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

package/src/Toolbar/Action.js

@@ -1,16 +0,0 @@
-import React from 'react'
-
-import Button from '../Button'
-
-function ToolbarAction({ secondary, ...restProps }) {
-  return (
-    <Button
-      size="xs"
-      theme="primary"
-      variant={secondary ? 'naked' : 'outline'}
-      {...restProps}
-    />
-  )
-}
-
-export default ToolbarAction

package/src/Toolbar/Toolbar.js

@@ -1,139 +0,0 @@
-import React, { Component, Children, cloneElement } from 'react'
-import type { Node } from 'react'
-
-import Badge from '../Badge'
-import HelperDrawer from '../HelperDrawer'
-import StackView from '../StackView'
-import { generateId } from '../utils'
-
-import ToolbarAction from './Action'
-
-export type ToolbarProps = {
-  /**
-   * Renders a heading in the left portion of the toolbar.
-   */
-  title: Node,
-
-  /**
-   * Render help content inside of a `Collapse` that is triggered by an info button placed next to the title.
-   */
-  helpContent: string | Node,
-
-  /**
-   * Provide either a single action like a `Button` or `Dropdown` or an array of actions.
-   * Each element will be cloned with the following props: `{ size: 'xs', borderColor: 'primary' }`.
-   */
-  actions: Node | Array<Node>,
-
-  /**
-   * Adds a counter next to the title of the toolbar.
-   */
-  count: number,
-
-  /**
-   * Controls the color of the counter.
-   */
-  countColor: string,
-
-  /**
-   * Used to clear a status once it has been set.
-   */
-  onStatusClearRequest: () => null,
-
-  /**
-   * Renders either a saved or error badge.
-   */
-  status: 'error' | 'success',
-}
-
-class Toolbar extends Component<ToolbarProps> {
-  static Action = ToolbarAction
-
-  helperDrawerId = generateId('toolbar-helper-drawer')
-
-  static defaultProps = { countColor: 'grey-7' }
-
-  render() {
-    const {
-      actions,
-      count,
-      countColor,
-      helpContent,
-      onStatusClearRequest,
-      status,
-      title,
-      ...restProps
-    } = this.props
-
-    return (
-      <StackView {...restProps}>
-        <StackView
-          alignment="center"
-          axis="horizontal"
-          distribution="space-between"
-          spacing={1}
-        >
-          <StackView alignment="center" axis="horizontal" grow={1} shrink={1}>
-            {title}
-            {count && (
-              <Badge
-                color={countColor}
-                marginLeft={0.75}
-                radius="circle"
-                size="xs"
-                title={count}
-              />
-            )}
-            {helpContent && (
-              <HelperDrawer.Toggle
-                drawerId={this.helperDrawerId}
-                marginLeft={0.25}
-                tooltip={{ title: 'More info', triggerOnFocus: false }}
-              />
-            )}
-          </StackView>
-
-          {(status || actions) && (
-            <StackView axis="horizontal" spacing={status && actions ? 1 : 0}>
-              {status && (
-                <Badge.Status
-                  onClearRequest={onStatusClearRequest}
-                  size="xs"
-                  status={status}
-                  title={status === 'success' ? 'Saved' : 'Error'}
-                />
-              )}
-
-              {actions && (
-                <StackView
-                  axis="horizontal"
-                  spacing={actions.length > 1 ? 1 : 0}
-                >
-                  {Children.map(actions, (child) =>
-                    child && child.type.displayName === 'ToolbarAction'
-                      ? child
-                      : cloneElement(child, {
-                          size: child.props.size || 'xs',
-                          theme: child.props.theme || 'primary',
-                          variant: child.props.variant || 'outline',
-                        })
-                  )}
-                </StackView>
-              )}
-            </StackView>
-          )}
-        </StackView>
-
-        {helpContent && (
-          <HelperDrawer
-            children={helpContent}
-            id={this.helperDrawerId}
-            marginTop={1}
-          />
-        )}
-      </StackView>
-    )
-  }
-}
-
-export default Toolbar

package/src/Toolbar/Toolbar.mdx

@@ -1,47 +0,0 @@
----
-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
-render(
-  <StackView grow={1} shrink={1} spacing={2}>
-    <Toolbar
-      title={<Heading level={3}>Title</Heading>}
-      count={24}
-      countColor="warning"
-    />
-    <TileView minCellWidth={24} spacing={2}>
-      <Card padding={1} subdued>
-        Resource
-      </Card>
-      <Card padding={1} subdued>
-        Resource
-      </Card>
-      <Card padding={1} subdued>
-        Resource
-      </Card>
-      <Card padding={1} subdued>
-        Resource
-      </Card>
-    </TileView>
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <Card padding={2} spacing={1}>
-    <Toolbar
-      title="Title"
-      helpContent="Toolbars need help too"
-      actions={[<Button title="Cancel" />, <Button title="Add Item" />]}
-    />
-    <Card padding={1} subdued>
-      Resource
-    </Card>
-  </Card>
-)
-```

package/src/Toolbar/index.js

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