@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/src/Select/Select.test.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Select from '.'
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider'
+
+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', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <ThemeProvider>
+      <Select onChange={selectMock}>
+        {people.map(p => (
+          <Select.Option value={p.twitter} key={p.twitter}>{p.first} {p.last}</Select.Option>
+        ))}
+      </Select>
+    </ThemeProvider>
+  )
+
+  userEvent.click(screen.getByRole('button'))
+  jest.runAllTimers()
+  userEvent.click(screen.getByText('Travis Arnold'))
+
+  expect(selectMock).toHaveBeenCalledWith(
+    { selectedValue: 'souporserious', value: 'souporserious' }
+  )
+
+  jest.useRealTimers()
+})
+
+it('updates display value when value of label changes and using options array', () => {
+  function TestCase({ options }) {
+    return (
+      <ThemeProvider>
+        <Select {...{ options }} value="us"></Select>
+      </ThemeProvider>
+    )
+  }
+
+  const canada = { label: 'Canada', value: 'ca' }
+  const options = [canada, { label: 'United States', value: 'us' }]
+  const { rerender } = render(<TestCase {...{ options }} />)
+
+  expect(screen.getByText('United States')).toBeInTheDocument()
+
+  rerender(
+    <TestCase
+      options={[canada, { label: 'United States of America', value: 'us' }]}
+    />
+  )
+
+  expect(screen.getByText('United States of America')).toBeInTheDocument()
+})
+
+it('updates display value when value of label changes and using full components', () => {
+  function TestCase({ options }) {
+    return (
+      <ThemeProvider>
+        <Select value="us">
+          {options.map((option) => (
+            <Select.Option value={option.value} key={option.value}>
+              <div>{option.label}</div>
+            </Select.Option>
+          ))}
+        </Select>
+      </ThemeProvider>
+    )
+  }
+
+  const canada = { label: 'Canada', value: 'ca' }
+  const options = [canada, { label: 'United States', value: 'us' }]
+  const { rerender } = render(<TestCase {...{ options }} />)
+
+  expect(screen.getByText('United States')).toBeInTheDocument()
+
+  rerender(
+    <TestCase
+      options={[canada, { label: 'United States of America', value: 'us' }]}
+    />
+  )
+
+  expect(screen.getByText('United States of America')).toBeInTheDocument()
+})

package/src/Select/Value.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Text from '../Text'
+
+function Value(props) {
+  return (
+    <Text
+      as="span"
+      grow={1}
+      shrink={1}
+      fontSize="inherit"
+      lineHeight="inherit"
+      textAlign="left"
+      truncate
+      {...props}
+    />
+  )
+}
+
+Value.displayName = 'Select.Value'
+
+export default Value

package/src/Select/Value.mdx

@@ -0,0 +1,67 @@
+---
+title: Select.Value
+category: Forms
+summary: Composes [Text](/text) and allows for styling selected values within the [Select](/select). (Out-of-the-box it provides truncation.)
+propsSummary: Accepts [Text](/text) props.
+parent: Select
+---
+
+```jsx live
+const options = [
+  {
+    title: 'Arrangement Files',
+    options: [
+      {
+        label: 'Chord Chart + → Lyrics & Chords',
+        type: 'TXT',
+      },
+      {
+        label: 'Lead Sheet',
+        type: 'PDF',
+      },
+    ],
+  },
+  {
+    title: 'E (Most Common)',
+    options: [
+      {
+        label: 'E Chord Chart +',
+        type: 'PDF',
+      },
+    ],
+  },
+  {
+    title: 'Ab',
+    options: [
+      {
+        label: 'Ab Chord Chart +',
+        type: 'PDF',
+      },
+    ],
+  },
+]
+render(
+  <Select
+    multiple
+    renderValue={(selectedOptions) => (
+      <Select.Value>
+        {selectedOptions.map((option) => option.value).join(', ')}
+      </Select.Value>
+    )}
+    style={{ maxWidth: 400 }}
+  >
+    {options.map((optgroup) => (
+      <Select.OptionGroup key={optgroup.title} title={optgroup.title}>
+        {optgroup.options.map((option) => (
+          <Select.Option key={option.label} value={option.label}>
+            <Text marginRight={2}>{option.label}</Text>
+            <Badge size="xs" marginLeft="auto">
+              {option.type}
+            </Badge>
+          </Select.Option>
+        ))}
+      </Select.OptionGroup>
+    ))}
+  </Select>
+)
+```

package/src/Select/constants.js

@@ -0,0 +1,3 @@
+export const SELECT_DISPLAY_NAME = 'Select'
+export const OPTIONGROUP_DISPLAY_NAME = 'Select.OptionGroup'
+export const OPTION_DISPLAY_NAME = 'Select.Option'

package/src/Select/index.js

@@ -0,0 +1,12 @@
+import Select from './Select'
+import Inline from './Inline'
+import Option from './Option'
+import OptionGroup from './OptionGroup'
+import Value from './Value'
+import { toggleValue } from './utils'
+Select.Inline = Inline
+Select.Option = Option
+Select.OptionGroup = OptionGroup
+Select.Value = Value
+Select.toggleValue = toggleValue
+export default Select

package/src/Select/utils.js

@@ -0,0 +1,108 @@
+import React, { Children, cloneElement, isValidElement } from 'react'
+
+import Box from '../Box'
+import Menu from '../Menu'
+import { shallowEqual } from '../utils'
+
+import { OPTIONGROUP_DISPLAY_NAME, OPTION_DISPLAY_NAME } from './constants'
+import Option from './Option'
+import OptionGroup from './OptionGroup'
+
+export function getSelectedOptions(children, selected) {
+  const selectedChildren = []
+  let index = -1
+  function getSelectedOption(child) {
+    index++
+    if (selected(child.props.value)) {
+      return {
+        index,
+        value: child.props.value,
+        text: child.props.text,
+        children:
+          typeof child.props.children === 'function'
+            ? child.props.children()
+            : child.props.children,
+      }
+    } else {
+      return false
+    }
+  }
+  function pushSelectedOption(child) {
+    const option = getSelectedOption(child)
+    if (option) {
+      selectedChildren.push(option)
+    }
+  }
+  Children.toArray(children).forEach((child) => {
+    if (child) {
+      if (child.type.displayName === OPTIONGROUP_DISPLAY_NAME) {
+        Children.toArray(child.props.children)
+          .filter(isValidElement)
+          .forEach((grandChild) => {
+            if (grandChild.type.displayName === OPTION_DISPLAY_NAME) {
+              pushSelectedOption(grandChild)
+            }
+          })
+      }
+      if (child.type.displayName === OPTION_DISPLAY_NAME) {
+        pushSelectedOption(child)
+      }
+    }
+  })
+  return selectedChildren
+}
+
+export function renderOptions(children) {
+  let index = -1
+  function renderOption(child) {
+    index++
+    return cloneElement(child, { index })
+  }
+  return Children.map(children, (child) => {
+    if (child) {
+      if (child.type.displayName === OPTIONGROUP_DISPLAY_NAME) {
+        return (
+          <Box>
+            <Menu.Heading>{child.props.title}</Menu.Heading>
+            {Children.map(child.props.children, renderOption)}
+          </Box>
+        )
+      }
+      if (child.type.displayName === OPTION_DISPLAY_NAME) {
+        return renderOption(child)
+      }
+    }
+    return child
+  })
+}
+
+export function optionsToElements(options) {
+  return options.map((option) =>
+    option.optgroup ? (
+      <OptionGroup
+        title={option.label}
+        children={option.optgroup.map((option) => (
+          <Option value={option.value}>{option.label}</Option>
+        ))}
+      />
+    ) : (
+      <Option value={option.value}>{option.label}</Option>
+    )
+  )
+}
+
+export function toggleValue(collection, item) {
+  let previousValue = false
+  const newValue = collection.reduce((newCollection, value) => {
+    if (shallowEqual(item, value)) {
+      previousValue = true
+      return newCollection
+    } else {
+      return [...newCollection, value]
+    }
+  }, [])
+  if (!previousValue) {
+    newValue.push(item)
+  }
+  return newValue
+}

package/src/Sidebar/Sidebar.js

@@ -0,0 +1,51 @@
+// @flow
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import { Children } from 'react'
+import StickyBox from 'react-sticky-box'
+
+import { css } from '../system'
+import StackView from '../StackView'
+
+import SidebarList from './SidebarList'
+import SidebarItem from './SidebarItem'
+
+const flexColumnCss = css({ display: 'flex', flexDirection: 'column' })
+
+type Props = {
+  /** Only accepts `Sidebar.List` and `Sidebar.Item` components. */
+  children?: React.ReactNode,
+}
+
+function Sidebar({ children, ...restProps }: Props) {
+  return (
+    <StackView
+      grow={1}
+      paddingTop={2}
+      boxShadow="inset -8px 0px 8px -8px rgba(150, 150, 150, 0.25)"
+      backgroundColor="surfaceTertiary"
+      {...restProps}
+    >
+      <StickyBox css={flexColumnCss}>
+        {Children.map(children, (child) => {
+          if (
+            child &&
+            child.type !== Sidebar.List &&
+            child.type !== Sidebar.Item
+          ) {
+            console.warn(
+              `Invalid component nesting. ${child.type} cannot appear as a child of <Sidebar>. Only <Sidebar.List/> or <Sidebar.Item/> may be used.`
+            )
+          }
+          return child
+        })}
+      </StickyBox>
+    </StackView>
+  )
+}
+
+Sidebar.List = SidebarList
+Sidebar.Item = SidebarItem
+
+export default Sidebar

package/src/Sidebar/Sidebar.mdx

@@ -0,0 +1,28 @@
+---
+title: Sidebar
+category: General
+---
+
+```jsx live
+render(
+  <Sidebar>
+    <Sidebar.Item>
+      <HeadingUppercase>Group 1</HeadingUppercase>
+    </Sidebar.Item>
+    <Sidebar.List>
+      <Sidebar.Item>Sidebar Item 1</Sidebar.Item>
+      <Sidebar.Item active>Sidebar Item 2</Sidebar.Item>
+      <Sidebar.Item>Sidebar Item 3</Sidebar.Item>
+    </Sidebar.List>
+
+    <Sidebar.Item>
+      <HeadingUppercase>Group 2</HeadingUppercase>
+    </Sidebar.Item>
+    <Sidebar.List>
+      <Sidebar.Item>Sidebar Item 4</Sidebar.Item>
+      <Sidebar.Item>Sidebar Item 5</Sidebar.Item>
+      <Sidebar.Item>Sidebar Item 6</Sidebar.Item>
+    </Sidebar.List>
+  </Sidebar>
+)
+```

package/src/Sidebar/SidebarItem.js

@@ -0,0 +1,34 @@
+import React from 'react'
+
+import List from '../List'
+
+function SidebarItem({ active, url, ...restProps }) {
+  const link = !active && url
+  const listItemProps = {
+    alignItems: 'center',
+    backgroundColor: 'surfaceTertiary',
+    boxShadow: 'inset -8px 0px 8px -8px rgba(150, 150, 150, 0.25)',
+    as: link ? 'a' : 'div',
+    href: url,
+    justifyContent: 'space-between',
+    lineHeight: '20px',
+    shrink: 0,
+    ...restProps,
+  }
+
+  if (active) {
+    listItemProps.backgroundColor = 'surfaceSecondary'
+    listItemProps.boxShadow = 'inset 0 -2px var(--colors-primary)'
+    listItemProps.zIndex = 1
+  }
+
+  if (link) {
+    listItemProps.hover = {
+      backgroundColor: 'grey-2',
+    }
+  }
+
+  return <List.Item {...listItemProps} />
+}
+
+export default SidebarItem

package/src/Sidebar/SidebarList.js

@@ -0,0 +1,20 @@
+import React from 'react'
+
+import List from '../List'
+
+function SidebarList(props) {
+  return (
+    <List
+      as="div"
+      marginBottom={2}
+      border
+      borderColor="separatorSecondary"
+      shrink={0}
+      divider
+      dividerColor="separatorSecondary"
+      {...props}
+    />
+  )
+}
+
+export default SidebarList

package/src/Sidebar/index.js

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

package/src/Sortable/Sortable.mdx

@@ -0,0 +1,100 @@
+---
+title: Sortable
+category: General
+---
+
+```jsx live
+const items = generateFakeData(
+  (faker) => ({
+    id: faker.random.uuid(),
+    name: faker.name.firstName() + ' ' + faker.name.lastName(),
+    sticky: faker.random.boolean(),
+  }),
+  10
+)
+
+class App extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      sticky: items.filter((item) => item.sticky),
+      notSticky: [],
+    }
+
+    this.onDragEnd = ({ source, destination }) => {
+      // dropped on same board
+      if (source.droppableId === destination.droppableId) {
+        this.setState((state) => ({
+          [destination.droppableId]: Sortable.reorder({
+            list: [...state[destination.droppableId]],
+            startIndex: source.index,
+            endIndex: destination.index,
+          }),
+        }))
+      } else {
+        this.setState((state) => ({
+          [source.droppableId]: Sortable.remove({
+            list: state[source.droppableId],
+            index: source.index,
+          }),
+          [destination.droppableId]: Sortable.insert({
+            fromList: state[source.droppableId],
+            fromIndex: source.index,
+            toList: state[destination.droppableId],
+            toIndex: destination.index,
+          }),
+        }))
+      }
+    }
+
+    this.handleRemove = ({ id, index }) => {
+      console.log('remove index ' + index + ' from ' + id)
+    }
+  }
+
+  render() {
+    return (
+      <Box minWidth={60} padding={1}>
+        <Card>
+          <Toolbar
+            title="Item Notes"
+            helpContent="Toolbars need help too"
+            actions={<Button title="Add" />}
+            padding={1}
+          />
+          <Divider />
+          <Sortable.SortableManager onDragEnd={this.onDragEnd}>
+            <Sortable.SortableList
+              id="sticky"
+              title="Frequently Used"
+              onItemRemoveRequest={this.handleRemove}
+            >
+              {this.state.sticky.map((item) => (
+                <Sortable.SortableItem key={item.id} id={item.id}>
+                  <Input.Inline defaultValue={item.name} grow={1} />
+                </Sortable.SortableItem>
+              ))}
+            </Sortable.SortableList>
+            <Divider />
+            <Sortable.SortableList
+              id="notSticky"
+              title="Occasionally Used"
+              onItemRemoveRequest={this.handleRemove}
+              emptyText="Drag a category here to hide it when it's blank."
+            >
+              {this.state.notSticky.map((item) => (
+                <Sortable.SortableItem key={item.id} id={item.id}>
+                  <Input.Inline defaultValue={item.name} grow={1} />
+                </Sortable.SortableItem>
+              ))}
+            </Sortable.SortableList>
+          </Sortable.SortableManager>
+        </Card>
+      </Box>
+    )
+  }
+}
+
+render(App)
+```

package/src/Sortable/SortableEmpty.js

@@ -0,0 +1,39 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import Text from '../Text'
+
+function SortableEmpty({
+  emptyText,
+  isDraggingOver,
+  ...restProps
+}: {
+  emptyText?: string,
+  isDraggingOver: boolean,
+}) {
+  return (
+    <Box
+      column={1}
+      row={1}
+      padding={1}
+      backgroundColor={isDraggingOver ? 'warning-lightest' : 'white'}
+      {...restProps}
+    >
+      <Box
+        padding={0.5}
+        backgroundColor={isDraggingOver ? 'warning-lightest' : 'white'}
+        borderWidth={1}
+        borderStyle="dashed"
+        borderColor={isDraggingOver ? 'warning' : 'grey-5'}
+        radius={3}
+      >
+        <Text fontSize={5} textAlign="center" opacity={isDraggingOver ? 0 : 1}>
+          {emptyText}
+        </Text>
+      </Box>
+    </Box>
+  )
+}
+
+export default SortableEmpty

package/src/Sortable/SortableItem.js

@@ -0,0 +1,57 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+import DragDrop from '../DragDrop'
+import Icon from '../Icon'
+import List from '../List'
+
+import { SORTABLE_TYPE } from './constants'
+
+export const SORTABLE_ITEM_DISPLAY_NAME = 'SortableItem'
+
+function SortableItem({
+  children,
+  disabled,
+  id,
+  index,
+  isDraggingOver,
+  onRemoveRequest,
+  readOnly,
+  ...restProps
+}: {
+  children: mixed,
+  disabled?: boolean,
+  id: number,
+  index: number,
+  readOnly?: boolean,
+}) {
+  return (
+    <DragDrop.Draggable
+      type={SORTABLE_TYPE}
+      draggableId={id}
+      isDragDisabled={disabled || readOnly}
+      index={index}
+    >
+      {(provided) => (
+        <List.Item
+          innerRef={provided.innerRef}
+          onRemoveRequest={onRemoveRequest}
+          {...restProps}
+          {...provided.draggableProps}
+        >
+          {!readOnly && (
+            <Box {...provided.dragHandleProps} marginRight={1}>
+              <Icon name="general.dragHandle" size="sm" color="foregroundTertiary" />
+            </Box>
+          )}
+          {children}
+        </List.Item>
+      )}
+    </DragDrop.Draggable>
+  )
+}
+
+SortableItem.displayName = SORTABLE_ITEM_DISPLAY_NAME
+
+export default SortableItem