@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Select/Select.mdx

@@ -0,0 +1,177 @@
+---
+title: Select
+category: Forms
+summary: Provide a list of options that can be selected. Replaces native select menus by using aria roles to enhance accessibility while allowing full customization of the options and what is used in the select popover. Composes [InputBox](/inputbox) and [Popover](/popover).
+---
+
+```jsx live
+render(
+  <Select
+    emptyValue="Select a fruit"
+    tooltip={{ title: 'Select a fruit' }}
+    onChange={(e) => console.log(e)}
+  >
+    <Select.Option value="apple">Apple</Select.Option>
+    <Select.Option value="orange">Orange</Select.Option>
+    <Select.Option value="banana">Banana</Select.Option>
+    <Select.Option value="mango">Mango</Select.Option>
+    <Select.Option value="kiwi" disabled>
+      Kiwi (Out of stock)
+    </Select.Option>
+    <Select.Option value="strawberry">Strawberry</Select.Option>
+    <Divider margin={0.5} />
+    <Menu.Item distribution="fill" spacing={1}>
+      <Button title="Action 1" size="sm" />
+      <Button title="Action 2" size="sm" />
+    </Menu.Item>
+  </Select>
+)
+```
+
+```jsx live
+const options = [
+  {
+    label: 'Dogs',
+    optgroup: [
+      { value: 'frenchy', label: 'French Bulldog' },
+      { value: 'pit-bull', label: 'Pit Bull' },
+    ],
+  },
+  {
+    label: 'Cats',
+    optgroup: [
+      { value: 'munchkin', label: 'Munchkin' },
+      { value: 'persian', label: 'Persian' },
+    ],
+  },
+]
+render(() => {
+  const ref = React.useRef(null)
+  const [selectedValues, setSelectedValues] = React.useState([])
+  return (
+    <StackView
+      innerRef={ref}
+      as="form"
+      id="container"
+      position="relative"
+      alignment="center"
+      spacing={1}
+    >
+      <Select
+        name="pets"
+        multiple
+        options={options}
+        value={selectedValues}
+        matchWidths={false}
+        emptyValue="Choose your favorite pets"
+        renderTo="#container"
+        onChange={(event) => setSelectedValues(event.value)}
+      />
+      <Button
+        title="Submit"
+        size="xs"
+        theme="primary"
+        onClick={() => ref.current.submit()}
+      />
+    </StackView>
+  )
+})
+```
+
+```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>
+    )}
+  >
+    {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>
+)
+```
+
+```jsx live
+render(
+  <Box>
+    <Select multiple>
+      <Select.OptionGroup title="Group 1">
+        <Select.Option value="1">One</Select.Option>
+        <Select.Option value="2">Two</Select.Option>
+        <Select.Option value="3">Three</Select.Option>
+      </Select.OptionGroup>
+      <Select.OptionGroup title="Group 2">
+        <Select.Option value="4">Four</Select.Option>
+        <Select.Option value="5">Five</Select.Option>
+        <Select.Option value="6">Six</Select.Option>
+      </Select.OptionGroup>
+    </Select>
+  </Box>
+)
+```
+
+```jsx live
+render(
+  <Box padding={2} backgroundColor="primary">
+    <Select.Inline light>
+      {generateRange(100).map((number) => (
+        <Select.Option key={number} value={number}>
+          {number}
+        </Select.Option>
+      ))}
+    </Select.Inline>
+    <Input.Inline
+      size="xl"
+      fontSize={0}
+      light
+      defaultValue="Editable Heading"
+    />
+  </Box>
+)
+```

package/src/Select/Value.js

@@ -0,0 +1,20 @@
+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}
+    />
+  )
+}
+
+export default Value

package/src/Select/constants.js

@@ -0,0 +1,3 @@
+export const SELECT_DISPLAY_NAME = 'Select'
+export const OPTIONGROUP_DISPLAY_NAME = 'OptionGroup'
+export const OPTION_DISPLAY_NAME = '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,42 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import { Children } from 'react'
+import StickyBox from 'react-sticky-box'
+import warning from 'warning'
+
+import { css } from '../system'
+import StackView from '../StackView'
+
+import SidebarList from './SidebarList'
+import SidebarItem from './SidebarItem'
+
+const flexColumnCss = css({ display: 'flex', flexDirection: 'column' })
+
+function Sidebar({ children, ...restProps }) {
+  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) => {
+          warning(
+            (child && child.type !== Sidebar.List) ||
+              (child && child.type !== Sidebar.Item),
+            `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="drag-handle" size="sm" color="foregroundTertiary" />
+            </Box>
+          )}
+          {children}
+        </List.Item>
+      )}
+    </DragDrop.Draggable>
+  )
+}
+
+SortableItem.displayName = SORTABLE_ITEM_DISPLAY_NAME
+
+export default SortableItem