@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Dropdown/Link.js

@@ -0,0 +1,43 @@
+import React, { Component } from 'react'
+
+import { ItemListItem } from '../ItemList'
+import Menu from '../Menu'
+
+export const LINK_DISPLAY_NAME = 'Dropdown.Link'
+export const LINK_DATA = 'link'
+
+class Link extends Component {
+  static displayName = LINK_DISPLAY_NAME
+
+  render() {
+    const { disabled, external, index, text, to, ...restProps } = this.props
+    if (external) {
+      restProps.target = '_blank'
+    }
+    return (
+      <ItemListItem
+        data={LINK_DATA}
+        text={text}
+        disabled={disabled}
+        index={index}
+      >
+        {({ id, highlight, highlighted, clearHighlight, select }) => (
+          <Menu.Item
+            as="a"
+            id={id}
+            href={disabled ? undefined : to}
+            disabled={disabled}
+            isHighlighted={highlighted}
+            onMouseOver={highlight}
+            onMouseOut={clearHighlight}
+            onKeyDown={(event) => event.key === 'Enter' && select(event)}
+            onClick={(event) => event.metaKey === false && select(event)}
+            {...restProps}
+          />
+        )}
+      </ItemListItem>
+    )
+  }
+}
+
+export default Link

package/src/Dropdown/index.js

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

package/src/EditActions/EditActions.js

@@ -0,0 +1,61 @@
+import React, { Children, useEffect, useState } from 'react'
+
+import Button from '../Button'
+import StackView from '../StackView'
+import { useDocumentEvent, useFocus, useHover } from '../hooks'
+
+function EditActions({ display, edit, loading, ...restProps }) {
+  const { focus, focusProps } = useFocus()
+  const { hover, hoverProps } = useHover()
+  const [on, setOn] = useState(false)
+  const [showCheck, setShowCheck] = useState(false)
+  const toggle = () => setOn((bool) => !bool)
+
+  useEffect(() => {
+    if (loading === false) {
+      setShowCheck(true)
+      setTimeout(() => {
+        setShowCheck(false)
+      }, 800)
+    }
+  }, [loading])
+
+  useDocumentEvent('keydown', (event) => {
+    if (on && event.keyCode === 27) {
+      setOn(false)
+    }
+  })
+
+  return (
+    <StackView
+      axis="horizontal"
+      alignment="center"
+      spacing={1}
+      width="100%"
+      onClick={on ? undefined : () => setOn(true)}
+      {...focusProps}
+      {...hoverProps}
+      {...restProps}
+    >
+      {Children.toArray(on ? edit : display)}
+      <Button
+        grow={0}
+        title={on ? 'Close' : 'Edit'}
+        icon={{
+          name: showCheck ? 'checkmark' : on ? 'close' : 'pencil',
+          color: showCheck ? 'green' : undefined,
+        }}
+        tooltip={{
+          title: showCheck ? undefined : on ? 'Close' : 'Edit',
+        }}
+        size="sm"
+        variant="naked"
+        onClick={focus || on ? toggle : () => setOn(true)}
+        opacity={focus || hover || on ? 1 : 0}
+        spinner={on && loading ? { color: 'primary' } : undefined}
+      />
+    </StackView>
+  )
+}
+
+export default EditActions

package/src/EditActions/EditActions.mdx

@@ -0,0 +1,143 @@
+---
+title: EditActions
+category: General
+summary: Helper component that manages switching between initial and editing states of inline forms. It uses an optimisitic save that will render a checkmark after the loading prop has been set to `false`.
+---
+
+```jsx live
+class EditActionsExample extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: 'Edit this value',
+      isBusy: false,
+    }
+  }
+
+  render() {
+    const { value, isBusy } = this.state
+    const resetBusy = () => {
+      setTimeout(() => this.setState({ isBusy: false }), 2000)
+    }
+    return (
+      <EditActions
+        display={<Text>{value}</Text>}
+        edit={
+          <Input
+            autoFocus
+            value={value}
+            onChange={(e) =>
+              this.setState({ value: e.target.value, isBusy: true }, resetBusy)
+            }
+          />
+        }
+        loading={isBusy}
+      />
+    )
+  }
+}
+
+render(EditActionsExample)
+```
+
+```jsx live
+const candies = [
+  {
+    label: 'Wonka Bar',
+    value: 'wonka-bar',
+  },
+  {
+    label: 'Bubblegum',
+    value: 'bubblegum',
+  },
+  {
+    label: 'Raisins',
+    value: 'raisins',
+  },
+  {
+    label: 'Oranges',
+    value: 'oranges',
+  },
+]
+
+class EditActionsExample extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      value: {
+        name: 'Charlie',
+        favoriteCandy: ['wonka-bar'],
+      },
+      isBusy: false,
+    }
+  }
+
+  render() {
+    const { value, isBusy } = this.state
+    const resetBusy = () => {
+      setTimeout(() => this.setState({ isBusy: false }), 2500)
+    }
+    return (
+      <EditActions
+        display={
+          <Text>
+            {value.name}'s favorite candy is{' '}
+            <StackView inline as="span" axis="horizontal" spacing=", ">
+              {candies
+                .filter(
+                  (candy) => value.favoriteCandy.indexOf(candy.value) > -1
+                )
+                .map((candy) => candy.label)}
+            </StackView>
+          </Text>
+        }
+        edit={[
+          <Input
+            autoFocus
+            value={value.name}
+            onChange={(e) =>
+              this.setState(
+                {
+                  value: {
+                    ...value,
+                    name: e.target.value,
+                  },
+                  isBusy: true,
+                },
+                resetBusy
+              )
+            }
+          />,
+          <Select
+            matchWidths={false}
+            multiple
+            placement="bottom-start"
+            value={value.favoriteCandy}
+            onChange={(e) =>
+              this.setState(
+                {
+                  value: {
+                    ...value,
+                    favoriteCandy: e.value,
+                  },
+                  isBusy: true,
+                },
+                resetBusy
+              )
+            }
+          >
+            {candies.map((candy) => (
+              <Select.Option key={candy.value} value={candy.value}>
+                {candy.label}
+              </Select.Option>
+            ))}
+          </Select>,
+        ]}
+        loading={isBusy}
+      />
+    )
+  }
+}
+
+render(EditActionsExample)
+```

package/src/EditActions/index.js

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

package/src/Field/Field.js

@@ -0,0 +1,141 @@
+// @flow
+import React, { Component } from 'react'
+
+import Box from '../Box'
+import HelperDrawer from '../HelperDrawer'
+import Input from '../Input'
+import Text from '../Text'
+import StackView from '../StackView'
+import { cloneChildren, generateId } from '../utils'
+
+type Props = {
+  /** Label that describes field[s]. */
+  label?: string | React.ReactNode,
+
+  /** Label color. */
+  labelColor?: string,
+
+  /** Label flex basis. */
+  labelBasis?: string | number,
+
+  /** Label flex grow. */
+  labelGrow?: string | number,
+
+  /** Renders label and field[s] inline. */
+  inline?: boolean,
+
+  /** Renders content into a [HelperDrawer](/helperdrawer) next to label. */
+  helpContent?: string | React.ReactNode,
+
+  /** Helpful text to accompany fields. */
+  feedbackText?: string,
+
+  /** Controls spacing between fields. */
+  spacing?: number,
+
+  /** State of field[s]. */
+  state?: 'success' | 'error',
+}
+
+class Field extends Component<Props> {
+  static defaultProps = {
+    distribution: 'fill',
+    spacing: 1,
+  }
+
+  helperDrawerId = generateId('field-helper-drawer')
+
+  fieldId = generateId('field')
+
+  render() {
+    const {
+      children,
+      compact,
+      distribution,
+      feedbackText,
+      helpContent,
+      icon,
+      inline,
+      innerRef,
+      label,
+      labelBasis,
+      labelColor,
+      labelGrow,
+      spacing,
+      state,
+      ...restProps
+    } = this.props
+    return (
+      <Box innerRef={innerRef} width="100%" {...restProps}>
+        <StackView axis={inline ? 'horizontal' : 'vertical'} wrap>
+          {label && (
+            <StackView
+              axis="horizontal"
+              alignment="center"
+              grow={labelGrow}
+              basis={labelBasis}
+              marginRight={inline ? 2 : undefined}
+            >
+              {icon}
+
+              <Input.InputLabel
+                controls={this.fieldId}
+                fontSize={compact ? 4 : 3}
+                color={labelColor}
+              >
+                {label}
+              </Input.InputLabel>
+
+              {helpContent && (
+                <HelperDrawer.Toggle
+                  drawerId={this.helperDrawerId}
+                  marginLeft={0.25}
+                  marginRight={inline ? 1 : undefined}
+                />
+              )}
+            </StackView>
+          )}
+
+          {helpContent && (
+            <StackView axis="horizontal" order={inline ? 1 : 0} width="100%">
+              <HelperDrawer
+                id={this.helperDrawerId}
+                marginTop={1}
+                children={helpContent}
+              />
+            </StackView>
+          )}
+
+          <StackView
+            axis="horizontal"
+            alignment="center"
+            distribution={distribution}
+            order={inline ? 0 : 1}
+            grow={1}
+            marginTop={inline || !label ? undefined : 1}
+            spacing={spacing}
+          >
+            {cloneChildren(children, (child, { firstChild }) =>
+              firstChild
+                ? {
+                    id: this.fieldId,
+                    size: child.props.size || (compact ? 'sm' : 'md'),
+                  }
+                : {
+                    size: child.props.size || (compact ? 'sm' : 'md'),
+                  }
+            )}
+          </StackView>
+        </StackView>
+
+        {feedbackText && (
+          <Text marginTop={1} color={state} align={inline ? 'right' : 'left'}>
+            {feedbackText}
+          </Text>
+        )}
+      </Box>
+    )
+  }
+}
+
+export default Field

package/src/Field/Field.mdx

@@ -0,0 +1,37 @@
+---
+title: Field
+category: Forms
+summary: Composes [InputLabel](/inputlabel) and passes an `id` to the first child to pair labels and controls automatically.
+---
+
+```jsx live
+render(
+  <StackView width={60} spacing={4}>
+    <Field inline label="First Name" helpContent="What's my name again?">
+      <Input />
+    </Field>
+
+    <Field
+      state="error"
+      feedbackText="Select at least one choice, Name cannot be blank"
+    >
+      <Select state="error">
+        <Select.Option value="1">One</Select.Option>
+        <Select.Option value="2">Two</Select.Option>
+        <Select.Option value="3">Three</Select.Option>
+      </Select>
+      <Input placeholder="Name" state="error" />
+    </Field>
+
+    <FieldSet margin={0}>
+      <Field label="First Name">
+        <Input />
+      </Field>
+
+      <Field label="Last Name" helpContent="Where to find your last name.">
+        <Input />
+      </Field>
+    </FieldSet>
+  </StackView>
+)
+```

package/src/Field/index.js

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

package/src/FieldSet/FieldSet.js

@@ -0,0 +1,57 @@
+// @flow
+import React from 'react'
+
+import Heading from '../Heading'
+import StackView from '../StackView'
+import TileView from '../TileView'
+import Toolbar from '../Toolbar'
+
+type Props = {
+  /**
+   * Maps to internal `Toolbar` prop.
+   */
+  helpContent: mixed,
+
+  /**
+   * Title of fieldset group.
+   */
+  legend: mixed,
+
+  /**
+   * Maps to internal `TileView` prop.
+   */
+  minCellWidth: number,
+
+  /**
+   * Maps to internal `TileView` prop.
+   */
+  spacing: number,
+}
+
+function FieldSet({
+  children,
+  minCellWidth = 16,
+  spacing = 1,
+  helpContent,
+  legend,
+  ...restProps
+}: Props) {
+  return (
+    <StackView as="fieldset" padding={0} margin={2} {...restProps}>
+      <Toolbar
+        title={
+          <Heading as="legend" level={4}>
+            {legend}
+          </Heading>
+        }
+        helpContent={helpContent}
+        marginBottom={1}
+      />
+      <TileView minCellWidth={minCellWidth} spacing={spacing}>
+        {children}
+      </TileView>
+    </StackView>
+  )
+}
+
+export default FieldSet

package/src/FieldSet/FieldSet.mdx

@@ -0,0 +1,24 @@
+---
+title: FieldSet
+category: Forms
+summary: Used to group several controls as well as labels within a web form.
+---
+
+```jsx live
+render(
+  <Card width={40}>
+    <FieldSet legend="General">
+      <Checkbox label="Titles" />
+      <Checkbox label="Service Times" />
+      <Checkbox label="Item Lengths" />
+    </FieldSet>
+
+    <FieldSet legend="Item Types">
+      <Checkbox label="Regular Items" />
+      <Checkbox label="Media" />
+      <Checkbox label="Songs" />
+      <Checkbox label="Headers" />
+    </FieldSet>
+  </Card>
+)
+```

package/src/FieldSet/index.js

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

package/src/FilterLayout/FilterLayout.mdx

@@ -0,0 +1,33 @@
+---
+title: FilterLayout
+category: General
+summary: Used to display a filterable content area. Use with [DataTable](/datatable).
+---
+
+```jsx live
+render(
+  <FilterLayout
+    sidebarWidth={224}
+    header={<Box padding={2}>HEADER</Box>}
+    sidebar={<Box padding={2}>SIDEBAR</Box>}
+    toolbar={<Box padding={2}>TOOLBAR</Box>}
+    table={<Box padding={2}>TABLE</Box>}
+  />
+)
+```
+
+## Condensed
+
+```jsx live
+render(
+  <StackView width={40}>
+    <FilterLayout
+      sidebarWidth="fill"
+      header={<Box padding={2}>HEADER</Box>}
+      sidebar={<Box padding={2}>SIDEBAR</Box>}
+      toolbar={<Box padding={2}>TOOLBAR</Box>}
+      table={<Box padding={2}>TABLE</Box>}
+    />
+  </StackView>
+)
+```

package/src/FilterLayout/FilterLayout.tsx

@@ -0,0 +1,93 @@
+import * as React from 'react'
+import Mousetrap from 'mousetrap'
+
+import Box from '../Box'
+import Button from '../Button'
+import Card from '../Card'
+import Divider from '../Divider'
+import StackView from '../StackView'
+
+export type Props = {
+  /** Render slot for header. */
+  header?: any
+
+  /** Render slot for sidebar. */
+  sidebar?: any
+
+  /** Size of sidebar in pixels or `fill` for full width when open. */
+  sidebarWidth?: number | 'fill'
+
+  /** Render slot for table. */
+  table?: any
+
+  /** Render slot for toolbar. */
+  toolbar?: any
+}
+
+export function FilterLayout(props: Props) {
+  const {
+    header,
+    sidebarWidth = 400,
+    sidebar,
+    table,
+    toolbar,
+    ...restProps
+  } = props
+  const fill = sidebarWidth === 'fill'
+  const [sidebarOpen, setSidebarOpen] = React.useState(false)
+  const toggleSidebar = React.useCallback(() => {
+    setSidebarOpen((sidebarOpen) => !sidebarOpen)
+  }, [])
+  React.useEffect(() => {
+    Mousetrap.bind('f', toggleSidebar)
+    return () => {
+      Mousetrap.unbind('f')
+    }
+  }, [])
+  return (
+    <Card minHeight={50} overflow={undefined} {...restProps}>
+      <StackView axis="horizontal" minHeight={6}>
+        <Button
+          grow={0}
+          shrink={0}
+          basis={sidebarOpen ? (fill ? '100%' : sidebarWidth + 'px') : '100px'}
+          distribution={sidebarOpen ? 'space-between' : undefined}
+          width="100%"
+          paddingHorizontal={2}
+          borderRightWidth={1}
+          borderRightColor="separatorTertiary"
+          radius={0}
+          title="Filter"
+          aria-label={sidebarOpen ? 'close filter' : 'open filter'}
+          iconRight={{ name: sidebarOpen ? 'caret-left' : 'filter' }}
+          onClick={toggleSidebar}
+        />
+        <Box visible={!(sidebarOpen && fill)} grow={1} shrink={1}>
+          {header}
+        </Box>
+      </StackView>
+      <Divider />
+      <StackView axis="horizontal" grow={1}>
+        <StackView
+          visible={sidebarOpen}
+          basis={fill ? '100%' : sidebarWidth + 'px'}
+          borderRightWidth={1}
+          borderRightColor="separatorTertiary"
+          backgroundColor="surfaceSecondary"
+        >
+          {sidebar}
+        </StackView>
+        <StackView
+          visible={!(sidebarOpen && fill)}
+          grow={1}
+          shrink={1}
+          basis="100%"
+        >
+          {toolbar}
+          <Divider />
+          {table}
+        </StackView>
+      </StackView>
+    </Card>
+  )
+}

package/src/FilterLayout/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterLayout'
+export { FilterLayout as default } from './FilterLayout'