@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Combobox/Combobox.mdx

@@ -0,0 +1,177 @@
+---
+title: Combobox
+category: Forms
+summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/ministrycentered/ui-kit/blob/master/packages/ui-kit/src/Combobox/ComboboxInput.js) and [Popover](/popover).
+---
+
+### Combobox
+
+```jsx live
+const people = [
+  {
+    first: 'Charlie',
+    last: 'Brown',
+    twitter: 'dancounsell',
+  },
+  {
+    first: 'Charlotte',
+    last: 'White',
+    twitter: 'mtnmissy',
+  },
+  {
+    first: 'Chloe',
+    last: 'Jones',
+    twitter: 'ladylexy',
+  },
+  {
+    first: 'Cooper',
+    last: 'King',
+    twitter: 'steveodom',
+  },
+  {
+    first: 'James',
+    last: 'Miller',
+    twitter: 'bensie',
+  },
+  {
+    first: 'John',
+    last: 'James',
+    twitter: 'miller',
+  },
+  {
+    first: 'Travis',
+    last: 'Arnold',
+    twitter: 'souporserious',
+  },
+]
+
+function App() {
+  const [value, setValue] = React.useState('')
+  return (
+    <Card width={60} padding={2}>
+      <Combobox
+        minWidth={40}
+        onSelect={(selectedValue) =>
+          alert(`You selected: ${selectedValue.first} ${selectedValue.last}`)
+        }
+      >
+        <Combobox.Input
+          autoFocus
+          renderLeft={<Icon name="search" />}
+          placeholder="Search by name, email, or phone number"
+          value={value}
+          onClear={value.length > 0 ? () => setValue('') : null}
+          onChange={(event) => setValue(event.target.value)}
+          marginBottom={1}
+        />
+        <Combobox.Items
+          value={value}
+          filter={{
+            keys: [(person) => person.first + ' ' + person.last, 'twitter'],
+          }}
+          items={people}
+          renderItem={(person, index) => (
+            <Combobox.Item
+              key={person.first + ' ' + person.last}
+              value={person}
+              index={index}
+              distribution="space-between"
+            >
+              <Highlight
+                query={value}
+                text={person.first + ' ' + person.last}
+              />
+              <Highlight fontSize={5} query={value} text={person.twitter} />
+            </Combobox.Item>
+          )}
+          renderEmpty={
+            <Menu.Item>
+              No results for
+              <Text as="span" inline color="grey-7">
+                "{value}"
+              </Text>
+            </Menu.Item>
+          }
+        />
+      </Combobox>
+    </Card>
+  )
+}
+
+render(<App />)
+```
+
+### Combobox.Popover
+
+```jsx live
+function App() {
+  const [data, setData] = React.useState([])
+  const [value, setValue] = React.useState('')
+  const [fetching, setFetching] = React.useState(false)
+
+  function clearValue() {
+    setValue('')
+  }
+
+  function handleSelect(character) {
+    alert(`You chose ${character.name}`)
+    clearValue()
+  }
+
+  function handleChange(event) {
+    const value = event.target.value
+    const urlSafeValue = value.replace(' ', '+')
+    setValue(value)
+    setFetching(true)
+    fetch(`https://rickandmortyapi.com/api/character/?name=${urlSafeValue}`)
+      .catch((e) => e)
+      .then((response) => response.json())
+      .then((data) => {
+        setData(data.results || [])
+        setFetching(false)
+      })
+  }
+
+  return (
+    <Combobox.Popover
+      openOnFocus
+      closeOnSelect
+      maxWidth={60}
+      placeholder="Search Rick and Morty characters"
+      value={value}
+      isLoading={fetching}
+      onChange={handleChange}
+      onClear={clearValue}
+      onSelect={handleSelect}
+    >
+      {data.length > 0 ? (
+        data.map((character, index) => (
+          <Combobox.Item
+            key={index}
+            index={index}
+            value={character}
+            spacing={1}
+          >
+            <Avatar
+              source={character.image}
+              size="sm"
+              backgroundColor="grey-2"
+            />
+            <Text>{character.name}</Text>
+            <Badge title={character.species} size="xs" marginLeft="auto" />
+          </Combobox.Item>
+        ))
+      ) : (
+        <Menu.Item>
+          {fetching
+            ? 'Searching...'
+            : value.length > 0
+            ? 'No results found'
+            : 'Start typing to search the Rick and Morty character API.'}
+        </Menu.Item>
+      )}
+    </Combobox.Popover>
+  )
+}
+render(<App />)
+```

package/src/Combobox/Combobox.test.js

@@ -0,0 +1,90 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import Combobox from './Combobox'
+
+const people = [
+  {
+    first: 'Charlie',
+    last: 'Brown',
+    twitter: 'dancounsell',
+    active: true,
+  },
+  {
+    first: 'Charlotte',
+    last: 'White',
+    twitter: 'mtnmissy',
+    active: true,
+  },
+  {
+    first: 'John',
+    last: 'James',
+    twitter: 'miller',
+    active: false,
+  },
+  {
+    first: 'Travis',
+    last: 'Arnold',
+    twitter: 'souporserious',
+    active: true,
+  },
+]
+
+const selectMock = jest.fn()
+
+test('can click to select item from list', () => {
+  render(
+    <Combobox onSelect={selectMock}>
+      <Combobox.Input value="" />
+      <Combobox.Items
+        items={people}
+        renderItem={(person, index) => (
+          <Combobox.Item
+            disabled={!person.active}
+            index={index}
+            key={`${person.first} ${person.last}`}
+            value={person}
+          >
+            {person.first} {person.last}
+          </Combobox.Item>
+        )}
+      />
+    </Combobox>
+  )
+
+  fireEvent.click(screen.getByText('Travis Arnold'))
+
+  expect(selectMock).toHaveBeenCalledWith(
+    {
+      first: 'Travis',
+      last: 'Arnold',
+      twitter: 'souporserious',
+      active: true,
+    },
+    expect.anything()
+  )
+})
+
+test('disabled items cannot be selected', () => {
+  render(
+    <Combobox onSelect={selectMock}>
+      <Combobox.Input value="" />
+      <Combobox.Items
+        items={people}
+        renderItem={(person, index) => (
+          <Combobox.Item
+            disabled={!person.active}
+            index={index}
+            key={`${person.first} ${person.last}`}
+            value={person}
+          >
+            {person.first} {person.last}
+          </Combobox.Item>
+        )}
+      />
+    </Combobox>
+  )
+
+  fireEvent.click(screen.getByText('John James'))
+
+  expect(selectMock).not.toHaveBeenCalled()
+})

package/src/Combobox/ComboboxInput.js

@@ -0,0 +1,136 @@
+// @flow
+import React, { Component } from 'react'
+
+import Input from '../Input'
+import { ItemListController } from '../ItemList'
+
+type Props = {
+  isOpen?: boolean,
+  isLoading?: boolean,
+  onClose?: Function,
+  onClear?: Function | boolean,
+}
+
+class ComboboxInput extends Component<Props> {
+  static displayName = 'Combobox.Input'
+
+  componentDidUpdate(lastProps) {
+    if (lastProps.value !== this.props.value) {
+      // needs to be called after items have been sorted, there's probably a better way to fix this
+      setTimeout(() => {
+        this.itemList.setHighlightedIndex(0)
+      })
+    }
+  }
+
+  setInputNode = (node) => {
+    this.inputNode = node
+  }
+
+  handleKeyDown = (e) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      this.itemList.moveHighlightedIndex(-1, { contain: false })
+    }
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      this.itemList.moveHighlightedIndex(1, { contain: false })
+    }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      this.itemList.selectHighlightedItem()
+    }
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(e)
+    }
+    if (this.props.onClose && e.key === 'Tab') {
+      this.props.onClose()
+    }
+  }
+
+  handleDocumentKeyDown = (e) => {
+    if (this.props.onClear && e.key === 'Escape') {
+      this.props.onClear()
+    }
+  }
+
+  focus() {
+    this.inputNode.focus()
+  }
+
+  blur() {
+    this.inputNode.blur()
+  }
+
+  render() {
+    const {
+      autoFocus,
+      defaultValue,
+      disabled,
+      innerRef,
+      isOpen,
+      isLoading,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      onClear,
+      onClose,
+      onKeyDown,
+      onKeyUp,
+      placeholder,
+      readOnly,
+      size,
+      type,
+      value,
+      ...restProps
+    } = this.props
+    return (
+      <ItemListController>
+        {(itemList) => {
+          const { highlightedItemId, id } = itemList
+          if (!this.itemList) {
+            this.itemList = itemList
+          }
+          return (
+            <Input.InputBox
+              innerRef={innerRef}
+              size={size}
+              disabled={disabled}
+              isLoading={isLoading}
+              onClear={onClear}
+              {...restProps}
+              grow={1}
+            >
+              <Input.InputField
+                innerRef={this.setInputNode}
+                grow={1}
+                role="combobox"
+                autoComplete="off"
+                aria-autocomplete="list"
+                aria-controls={id}
+                aria-expanded={isOpen}
+                aria-activedescendant={highlightedItemId}
+                autoFocus={autoFocus}
+                type={type}
+                name={name}
+                disabled={disabled}
+                readOnly={readOnly}
+                placeholder={placeholder}
+                defaultValue={defaultValue}
+                value={value}
+                onChange={onChange}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                onKeyDown={this.handleKeyDown}
+                onKeyUp={onKeyUp}
+              />
+            </Input.InputBox>
+          )
+        }}
+      </ItemListController>
+    )
+  }
+}
+
+export default ComboboxInput

package/src/Combobox/ComboboxItem.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+
+import { ItemListItem } from '../ItemList'
+import Menu from '../Menu'
+
+class ComboboxItem extends Component {
+  static displayName = 'Combobox.Item'
+
+  render() {
+    const { value, index, text, disabled = false, ...restProps } = this.props
+    return (
+      <ItemListItem data={value} disabled={disabled} index={index} text={text}>
+        {({ id, highlight, highlighted, clearHighlight, select }) => (
+          <Menu.Item
+            disabled={disabled}
+            id={id}
+            isHighlighted={highlighted}
+            onMouseOver={highlight}
+            onMouseOut={clearHighlight}
+            onClick={(event) => {
+              event.stopPropagation()
+              event.nativeEvent.stopImmediatePropagation()
+              select()
+            }}
+            {...restProps}
+          />
+        )}
+      </ItemListItem>
+    )
+  }
+}
+
+export default ComboboxItem

package/src/Combobox/ComboboxItems.js

@@ -0,0 +1,121 @@
+// @flow
+import React, { Component, Children } from 'react'
+import { matchSorter } from 'match-sorter'
+
+import Box from '../Box'
+import Menu from '../Menu'
+import HeadingUppercase from '../HeadingUppercase'
+import StackView from '../StackView'
+import Text from '../Text'
+import { shallowEqual } from '../utils'
+
+import ComboboxItem from './ComboboxItem'
+
+const defaultRenderEmpty = (value) => (
+  <Menu.Item>
+    No results for
+    <Text as="span" inline color="grey-7">
+      "{value}"
+    </Text>
+  </Menu.Item>
+)
+
+const defaultRenderItem = (item) => (
+  <ComboboxItem value={item} children={item ? String(item) : null} />
+)
+
+type Props = {
+  /*
+    Array of items to display.
+   */
+  items: Array<Object>,
+
+  /*
+    Value to filter items by.
+   */
+  value: string,
+
+  /*
+    Accepts any match-sorter advanced option.
+   */
+  filter?: string,
+
+  /*
+    Optional title for items section.
+   */
+  title?: string,
+
+  /*
+    Must return a React compatible component that will be rendered when `value` is empty.
+   */
+  renderEmpty?: (value: string) => null,
+
+  /*
+    Controls rendering of each item in `items`. Must return a `<Combobox.Item />`.
+   */
+  renderItem?: (item: mixed, index: number) => null,
+}
+
+class ComboboxItems extends Component<Props> {
+  static displayName = 'Combobox.Items'
+
+  static defaultProps = {
+    value: '',
+    renderEmpty: defaultRenderEmpty,
+    renderItem: defaultRenderItem,
+  }
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      sortedItems: this.getSortedItems(props),
+    }
+  }
+
+  componentDidUpdate(lastProps) {
+    if (
+      lastProps.value !== this.props.value ||
+      !shallowEqual(lastProps.items, this.props.items) ||
+      !shallowEqual(lastProps.filter, this.props.filter)
+    ) {
+      this.setState({
+        sortedItems: this.getSortedItems(this.props),
+      })
+    }
+  }
+
+  getSortedItems({ items, value, filter }) {
+    return matchSorter(items, value.length > 0 ? value : '', filter)
+  }
+
+  render() {
+    const {
+      filter,
+      items,
+      renderEmpty,
+      renderItem,
+      title,
+      value,
+      ...restProps
+    } = this.props
+    const { sortedItems } = this.state
+    return (
+      <Box {...restProps}>
+        {title && (
+          <StackView paddingHorizontal={1} paddingVertical={0.5}>
+            <HeadingUppercase>{title}</HeadingUppercase>
+          </StackView>
+        )}
+        {Children.toArray(
+          sortedItems.length > 0
+            ? sortedItems.map((item, index) => renderItem(item, index))
+            : typeof renderEmpty === 'function'
+            ? renderEmpty(value)
+            : renderEmpty
+        )}
+      </Box>
+    )
+  }
+}
+
+export default ComboboxItems