@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/TokenInput/TokenInput.js

@@ -0,0 +1,251 @@
+// @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>,
+  /**
+   * > `function(event: {
+   *  added: boolean
+   *  token: any,
+   *  tokenIndex: number,
+   *  tokens: array,
+   * })`
+   * Callback when a token has been added or removed.
+   */
+  onChange: Function,
+  /**
+   * > `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)`
+   * 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

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

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

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

package/src/Toolbar/Action.js

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

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

@@ -0,0 +1,46 @@
+---
+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.
+---
+
+```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

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