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

package/src/Select/Select.test.tsx

@@ -1,58 +0,0 @@
-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()
-})

package/src/Select/Value.js

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

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

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

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

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

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

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

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

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

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

package/src/Sortable/Sortable.mdx

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

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

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