@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Drawer/Drawer.js

@@ -0,0 +1,93 @@
+// @flow
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+
+import StackView from '../StackView'
+
+function DrawerContents({ shouldClose, onClose, ...restProps }) {
+  const ref = useRef(null)
+  const [show, setShow] = useState(false)
+
+  useEffect(() => {
+    const node = ref.current
+    let firstTransition = true
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'transform') {
+        if (firstTransition) {
+          firstTransition = false
+        } else {
+          onClose()
+        }
+      }
+    }
+    setShow(true)
+    node.addEventListener('transitionend', handleTransitionEnd)
+    return () => {
+      node.removeEventListener('transitionend', handleTransitionEnd)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (shouldClose) {
+      setShow(false)
+    }
+  }, [shouldClose])
+
+  return (
+    <StackView
+      innerRef={ref}
+      width={52}
+      height="100%"
+      x={`${show ? 0 : 100}%`}
+      position="absolute"
+      bottom={0}
+      right={0}
+      zIndex={999}
+      boxShadow="-6px 0px 6px -4px rgba(150,150,150,0.25)"
+      backgroundColor="surfaceTertiary"
+      transition="transform 240ms ease-out"
+      {...restProps}
+    />
+  )
+}
+
+export type Props = {
+  /** Controls whether the drawer is visible or not. Won't render contents until open is `true`. */
+  open?: boolean,
+}
+
+function Drawer(props: Props) {
+  const { open, ...restProps } = props
+  const [localOpen, setLocalOpen] = useState(null)
+  const [shouldClose, setShouldClose] = useState(null)
+  const handleClose = useCallback(() => {
+    setLocalOpen(false)
+    setShouldClose(true)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (open) {
+      setLocalOpen(true)
+      setShouldClose(false)
+    } else if (localOpen !== null) {
+      setShouldClose(true)
+    }
+  }, [open])
+
+  return (
+    localOpen && (
+      <DrawerContents
+        shouldClose={shouldClose}
+        onClose={handleClose}
+        {...restProps}
+      />
+    )
+  )
+}
+
+export default Drawer

package/src/Drawer/Drawer.mdx

@@ -0,0 +1,49 @@
+---
+title: Drawer
+category: General
+summary: Use to add collapsible navigation items or content anchored to the right side of the screen.
+---
+
+```jsx live
+render(() => {
+  const [open, setOpen] = React.useState(false)
+  const [saving, setSaving] = React.useState(false)
+  React.useEffect(() => {
+    if (saving) {
+      setTimeout(() => setSaving(false), 1000)
+    }
+  }, [saving])
+  return (
+    <StackView height={32}>
+      <Button title="Open Drawer" onClick={() => setOpen(true)} />
+      <Drawer open={open} width={32}>
+        <GridView
+          columns="auto 1fr auto"
+          alignment="center"
+          padding={1}
+          spacing={1}
+          backgroundColor="white"
+        >
+          <Button
+            title="close drawer"
+            icon={{ name: 'close', color: 'primary' }}
+            variant="naked"
+            onClick={() => setOpen(false)}
+          />
+          <Heading level={3} weight={700}>
+            Item Details
+          </Heading>
+          <Button
+            title="Save"
+            theme="primary"
+            spinner={saving}
+            onClick={() => setSaving(true)}
+          />
+        </GridView>
+        <Divider />
+        <StackView padding={2}>Drawer Content</StackView>
+      </Drawer>
+    </StackView>
+  )
+})
+```

package/src/Drawer/index.js

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

package/src/Dropdown/Dropdown.js

@@ -0,0 +1,262 @@
+// @flow
+import React, { Component, cloneElement, createElement } from 'react'
+
+import Button from '../Button'
+import FocusGroup from '../FocusGroup'
+import { ItemList, ItemListController } from '../ItemList'
+import Menu from '../Menu'
+import Popover from '../Popover'
+import { cloneChildren, generateId } from '../utils'
+
+import Item, { ITEM_DISPLAY_NAME } from './Item'
+import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link'
+
+type Props = {
+  /** Allows specifying a type or custom element that will be cloned and provided `Dropdown` trigger props. */
+  triggerElement?: React.ElementType | React.ReactNode,
+  /** Closes Popover upon selecting a `Dropdown.Item`. */
+  closeOnSelect?: boolean,
+  /** Forces Popover open for testing purposes. */
+  forceOpen?: boolean,
+  /** Externally control Popover open state on initial render. */
+  defaultOpen?: boolean,
+  /** Callback when Popover is opened. */
+  onOpen?: boolean,
+  /** Callback when Popover is closed. */
+  onClose?: boolean,
+  /** Overrides the default search function for selecting a dropdown item via keyboard. */
+  onSearch?: func,
+  /** * Accepts any valid [Popover](/popover) props. */
+  popoverProps?: object,
+}
+
+class Dropdown extends Component<Props> {
+  static Item = Item
+
+  static Link = Link
+
+  static defaultProps = {
+    triggerElement: Button,
+    closeOnSelect: true,
+    defaultOpen: false,
+  }
+
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      isPopoverOpen: props.defaultOpen || props.forceOpen,
+    }
+    this.id = generateId('dropdown')
+  }
+
+  openPopover = (event) => {
+    if (this.props.onOpen) {
+      this.props.onOpen()
+    }
+    this.setState({ isPopoverOpen: true })
+  }
+
+  closePopover = (event) => {
+    if (this.props.onClose) {
+      this.props.onClose()
+    }
+    if (!this.props.forceOpen) {
+      this.setState({ isPopoverOpen: false })
+    }
+  }
+
+  togglePopover = (event) => {
+    if (this.state.isPopoverOpen) {
+      this.closePopover(event)
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  handleSelect = (data, { node }) => {
+    if (this.props.closeOnSelect) {
+      this.itemList.clearHighlightedIndex()
+      this.closePopover()
+      this.popover.focusAnchor()
+    }
+    if (data === LINK_DATA) {
+      node.click()
+    } else if (this.props.onSelect) {
+      this.props.onSelect(data)
+    }
+  }
+
+  render() {
+    const {
+      forceOpen,
+      closeOnSelect,
+      children,
+      as,
+      defaultOpen,
+      innerRef,
+      keepInView,
+      lockScrollWhileOpen,
+      matchWidths,
+      onClick,
+      onClose,
+      onKeyDown,
+      onOpen,
+      onSearch,
+      placement,
+      popoverProps,
+      renderTo,
+      triggerElement,
+      ...restProps
+    } = this.props
+    const { isPopoverOpen } = this.state
+    const arrowIconOnly = !restProps.icon && !restProps.title
+    let index = -1
+    return (
+      <FocusGroup onBlur={this.closePopover}>
+        {({ requestBlur, setRef }) => (
+          <ItemList
+            ref={(c) => (this.itemList = c)}
+            onSelect={this.handleSelect}
+          >
+            {({
+              getItemByText,
+              moveHighlightedIndex,
+              selectHighlightedItem,
+              setHighlightedIndex,
+              stringSearch,
+            }) => (
+              <Popover
+                {...popoverProps}
+                as={Menu}
+                ref={(component) => {
+                  this.popover = component
+                }}
+                innerRef={(node) => {
+                  setRef(`${this.id}-popover`)(node)
+                }}
+                role="menu"
+                tabIndex={-1}
+                elevation={2}
+                display={Boolean(restProps.spinner) ? 'none' : undefined}
+                onBlur={requestBlur}
+                matchWidths={matchWidths}
+                keepInView={keepInView}
+                lockScrollWhileOpen={lockScrollWhileOpen}
+                placement={placement}
+                renderTo={renderTo}
+                open={isPopoverOpen}
+                onRequestClose={() => {
+                  this.closePopover()
+                  this.popover.focusAnchor()
+                }}
+                anchorElement={(anchorProps) => (
+                  <ItemListController>
+                    {({ getHighlightedItemId }) => {
+                      const triggerProps = {
+                        innerRef: (node) => {
+                          if (typeof anchorProps.innerRef === 'function') {
+                            anchorProps.innerRef(node)
+                          } else if (anchorProps.innerRef?.current) {
+                            anchorProps.innerRef.current = node
+                          }
+                          setRef(`${this.id}-button`)(node)
+                          if (innerRef) {
+                            innerRef(node)
+                          }
+                        },
+                        'aria-activedescendant': getHighlightedItemId(),
+                        'aria-owns': getHighlightedItemId(),
+                        'aria-haspopup': true,
+                        'aria-expanded': isPopoverOpen,
+                        [arrowIconOnly ? 'icon' : 'iconRight']: {
+                          name: isPopoverOpen ? 'arrow-up' : 'arrow-down',
+                          size: 'sm',
+                        },
+                        title: arrowIconOnly ? 'arrow down' : restProps.title,
+                        tabIndex: 0,
+                        cursor: 'pointer',
+                        onBlur: requestBlur,
+                        onClick: () => {
+                          this.togglePopover()
+                          if (!isPopoverOpen) {
+                            this.popover.focusAnchor()
+                          }
+                        },
+                        onKeyDown: (event) => {
+                          anchorProps.onKeyDown(event)
+                          switch (event.key) {
+                            case 'ArrowUp':
+                              event.preventDefault()
+                              if (isPopoverOpen) {
+                                moveHighlightedIndex(-1)
+                              } else {
+                                this.openPopover()
+                                setTimeout(() => {
+                                  moveHighlightedIndex(-1)
+                                })
+                              }
+                              break
+                            case 'ArrowDown':
+                              event.preventDefault()
+                              if (isPopoverOpen) {
+                                moveHighlightedIndex(1)
+                              } else {
+                                this.openPopover()
+                                setTimeout(() => {
+                                  moveHighlightedIndex(1)
+                                })
+                              }
+                              break
+                            case 'Enter':
+                              if (isPopoverOpen) {
+                                event.preventDefault()
+                                selectHighlightedItem()
+                              }
+                              break
+                            case ' ':
+                              event.preventDefault()
+                              this.togglePopover()
+                              break
+                            default:
+                              onSearch
+                                ? onSearch(event)
+                                : stringSearch(event).then((text) => {
+                                    const item = getItemByText(text)
+                                    if (item) {
+                                      setHighlightedIndex(item.props.index)
+                                    }
+                                  })
+                          }
+                        },
+                        ...restProps,
+                      }
+                      if (React.isValidElement(triggerElement)) {
+                        return cloneElement(triggerElement, triggerProps)
+                      } else {
+                        return createElement(triggerElement, triggerProps)
+                      }
+                    }}
+                  </ItemListController>
+                )}
+              >
+                {cloneChildren(children, (child) => {
+                  if (
+                    child.type.displayName === ITEM_DISPLAY_NAME ||
+                    child.type.displayName === LINK_DISPLAY_NAME
+                  ) {
+                    index++
+                    return { index }
+                  } else {
+                    return {}
+                  }
+                })}
+              </Popover>
+            )}
+          </ItemList>
+        )}
+      </FocusGroup>
+    )
+  }
+}
+
+export default Dropdown

package/src/Dropdown/Dropdown.mdx

@@ -0,0 +1,201 @@
+---
+title: Dropdown
+category: General
+summary: A compact way of displaying content or actionable items in a popover. Use [Select](/select) for selectable options if needed. Composes [Button](/button) and [Popover](/popover) components.
+---
+
+### Items
+
+```jsx live
+render(
+  <Dropdown icon={{ name: 'cog' }} title="Folder settings" variant="outline">
+    <Dropdown.Item onSelect={() => console.log('edit folder')}>
+      Edit Folder
+    </Dropdown.Item>
+    <Dropdown.Item onSelect={() => console.log('add folder')}>
+      Add Folder
+    </Dropdown.Item>
+  </Dropdown>
+)
+```
+
+### Links
+
+```jsx live
+render(
+  <Dropdown title="Links" size="sm" variant="outline">
+    <Dropdown.Link to="http://planning.center" external>
+      Planning Center
+    </Dropdown.Link>
+    <Dropdown.Link to="https://reactjs.org" external>
+      React Docs
+    </Dropdown.Link>
+  </Dropdown>
+)
+```
+
+### Custom children
+
+```jsx live
+render(() => {
+  const [previous, setPrevious] = React.useState(0)
+  const [future, setFuture] = React.useState(4)
+  return (
+    <Group>
+      <Button title="Matrix" size="xs" />
+      <Dropdown aria-label="Matrix options" size="xs">
+        <StackView width={28} padding={1} spacing={1}>
+          <StackView
+            as="label"
+            axis="horizontal"
+            alignment="center"
+            distribution="space-between"
+            spacing={1}
+          >
+            <Text>Past plans to load</Text>
+            <NumberField
+              size="xs"
+              minWidth="49px"
+              value={previous}
+              min={0}
+              onChange={(value) => setPrevious(value)}
+            />
+          </StackView>
+          <StackView
+            as="label"
+            axis="horizontal"
+            alignment="center"
+            distribution="space-between"
+            spacing={1}
+          >
+            <Text>Future plans to load</Text>
+            <NumberField
+              size="xs"
+              minWidth="49px"
+              value={future}
+              min={0}
+              onChange={(value) => setFuture(value)}
+            />
+          </StackView>
+        </StackView>
+      </Dropdown>
+    </Group>
+  )
+})
+```
+
+### Fetch data on open
+
+```jsx live
+render(() => {
+  const [loading, setLoading] = React.useState(false)
+  return (
+    <Dropdown
+      title="Lazy Items"
+      spinner={loading}
+      onOpen={() => {
+        setLoading(true)
+        setTimeout(() => {
+          setLoading(false)
+        }, 2000)
+      }}
+      onSelect={(value) => console.log(`Item "${value}" selected`)}
+    >
+      {loading
+        ? null
+        : [1, 2, 3].map((value) => (
+            <Dropdown.Item key={value} value={value}>
+              Item {value}
+            </Dropdown.Item>
+          ))}
+    </Dropdown>
+  )
+})
+```
+
+### No arrow and text truncation
+
+```jsx live
+render(
+  <StackView width={16}>
+    <Dropdown
+      iconRight={undefined}
+      title={<Text truncate>Supercalifragilisticexpialidocious</Text>}
+      variant="outline"
+    >
+      <Dropdown.Item value="item-1">Item 1</Dropdown.Item>
+      <Dropdown.Item value="item-2">Item 2</Dropdown.Item>
+      <Dropdown.Item value="item-3">Item 3</Dropdown.Item>
+    </Dropdown>
+  </StackView>
+)
+```
+
+### Custom Trigger
+
+```jsx live
+function GuitarIcon({ fill }) {
+  return (
+    <svg width="28" height="28" fill="none" viewBox="0 0 28 28">
+      <path
+        fill={fill}
+        fillRule="evenodd"
+        d="M27.349 2.657L24.887.237c-.32-.32-.88-.319-1.183.023l-3.38 3.46a1.607 1.607 0 00-.423.863l-.123.722c-.041.321-.182.622-.424.863l-5.072 5.37-.04.046c-2.081-1.322-4.576-1.324-6.055.155l-.127.127c-1.356 1.358-3.226 3.23-4.953 3.951-.68.285-1.312.7-1.858 1.246-2.443 2.443-.991 5.328 1.684 8.004 2.675 2.675 5.56 4.127 8.004 1.684a5.764 5.764 0 001.246-1.859c.721-1.726 2.592-3.596 3.95-4.952l.127-.127c1.479-1.479 1.478-3.972.157-6.052.037-.033.073-.067.108-.104l5.051-5.347c.241-.242.523-.403.844-.444l.722-.123c.32-.041.622-.222.843-.444l3.38-3.46a.83.83 0 00-.016-1.182zM8.584 19.415a2.284 2.284 0 103.23-3.23 2.284 2.284 0 00-3.23 3.23z"
+      />
+    </svg>
+  )
+}
+const colors = [
+  '#714dd8',
+  '#3c8bf7',
+  '#72bb52',
+  '#ff6767',
+  '#ffa833',
+  '#000000',
+]
+render(() => {
+  const [activeColor, setActiveColor] = React.useState('#000000')
+  return (
+    <Dropdown
+      triggerElement={
+        <StackView
+          width={10}
+          height={10}
+          alignment="center"
+          distribution="center"
+          stroke={activeColor === '#000000' ? 'separator' : activeColor}
+          strokeWeight={2}
+          spacing={1}
+          radius={5}
+        >
+          <GuitarIcon fill={activeColor} />
+          <Text size={4} weight={600} letterSpacing="0.05em">
+            Guitar
+          </Text>
+        </StackView>
+      }
+      title="Drums"
+      popoverProps={{
+        paddingHorizontal: 1,
+        paddingVertical: 1,
+      }}
+    >
+      <GridView columns="1fr 1fr 1fr" spacing={1}>
+        {colors.map((color, index) => (
+          <Dropdown.Item
+            key={color}
+            index={index}
+            width={4}
+            height={4}
+            backgroundColor={color}
+            highlightedColor={color + 'd1'}
+            stroke={color === activeColor ? color + '75' : undefined}
+            strokeWeight={2}
+            onSelect={() => setActiveColor(color)}
+          />
+        ))}
+      </GridView>
+    </Dropdown>
+  )
+})
+```

package/src/Dropdown/Dropdown.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import Dropdown from './Dropdown'
+import ThemeProvider from '../ThemeProvider'
+
+it(`should render title`, () => {
+  render(<Dropdown title="A menu"></Dropdown>)
+  screen.getByText('A menu')
+})
+
+it(`calls passed onSearch function when receiving keyboard input`, () => {
+  const customTextSearch = jest.fn()
+  render(
+    <ThemeProvider>
+      <Dropdown title="A menu" onSearch={customTextSearch}></Dropdown>
+    </ThemeProvider>
+  )
+  const dropdown = screen.getByText('A menu')
+
+  fireEvent.keyDown(dropdown, { key: 'A', code: 'KeyA' })
+  expect(customTextSearch).toHaveBeenCalled()
+})

package/src/Dropdown/Item.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+import { ItemListItem } from '../ItemList'
+import Menu from '../Menu'
+
+export const ITEM_DISPLAY_NAME = 'Dropdown.Item'
+
+class Item extends Component {
+  static displayName = ITEM_DISPLAY_NAME
+
+  render() {
+    const { disabled, index, onSelect, text, value, ...restProps } = this.props
+    return (
+      <ItemListItem
+        data={value}
+        text={text}
+        disabled={disabled}
+        index={index}
+        onSelect={onSelect}
+      >
+        {({ id, highlight, highlighted, clearHighlight, select }) => (
+          <Menu.Item
+            id={id}
+            role="menuitem"
+            aria-disabled={disabled}
+            disabled={disabled}
+            isHighlighted={highlighted}
+            onMouseOver={highlight}
+            onMouseOut={clearHighlight}
+            onClick={select}
+            {...restProps}
+          />
+        )}
+      </ItemListItem>
+    )
+  }
+}
+
+export default Item