@planningcenter/tapestry-react 2.10.0-rc.2 → 2.10.0-rc.3

package/src/Dropdown/Link.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+import { ItemListItem } from '../ItemList'
+import Menu from '../Menu'
+
+export const LINK_DISPLAY_NAME = 'Dropdown.Link'
+
+class Link extends Component {
+  // Graphql wasn't picking up the correct displayName when this was
+  // assigned to LINK_DISPLAY_NAME, but using a string works
+  static displayName = 'Dropdown.Link'
+
+  render() {
+    const { disabled, external, index, text, to, ...restProps } = this.props
+    if (external) {
+      restProps.target = '_blank'
+    }
+    return (
+      <ItemListItem data="link" 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,76 @@
+// @flow
+import React, { Children, useEffect, useState } from 'react'
+
+import Button from '../Button'
+import StackView from '../StackView'
+import { useDocumentEvent, useFocus, useHover } from '../hooks'
+import { useThemeProps } from '../system'
+
+type Props = {
+  /** Renders any custom component or HTML element when not in the edit state.  */
+  display?: React.ReactNode,
+
+  /** Renders any custom component or HTML element, usually form elments to capture user values. */
+  edit?: React.ReactNode,
+
+  /** Shows a spinner if true and then optimistically shows a checkmark when false again. */
+  loading?: boolean,
+}
+
+function EditActions({ display, edit, loading, ...restProps }: Props) {
+  const { focus, focusProps } = useFocus()
+  const { hover, hoverProps } = useHover()
+  const [on, setOn] = useState(false)
+  const [showCheck, setShowCheck] = useState(false)
+  const toggle = () => setOn((bool) => !bool)
+  const { buttonProps, ...themeProps } = useThemeProps('editActions', restProps)
+
+  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}
+      {...themeProps}
+    >
+      {Children.toArray(on ? edit : display)}
+      <Button
+        grow={0}
+        title={on ? 'Close' : 'Edit'}
+        icon={{
+          name: showCheck ? 'general.check' : on ? 'general.x' : 'general.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}
+        {...buttonProps}
+      />
+    </StackView>
+  )
+}
+
+export default EditActions

package/src/EditActions/EditActions.mdx

@@ -0,0 +1,145 @@
+---
+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`.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: editActions
+---
+
+```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,149 @@
+// @flow
+import React 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'
+import { useThemeProps } from '../system'
+
+type Props = {
+  /** Usually accepts form fields, such as `input` or `select`. */
+  children?: any,
+
+  /** Gain access to the internal ref. */
+  innerRef?: any,
+
+  /** 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 label and field[s] smaller. */
+  compact?: 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,
+
+  /** Controls distribution between fields, by [passing this prop to StackView](/stackview#distribution). (Defaults to "fill".) */
+  distribution?: number,
+
+  /** State of field[s]. */
+  state?: 'success' | 'error',
+
+  /** Places an icon to the left of the label. */
+  icon?: any,
+}
+
+function Field({ ...props }: Props) {
+  const {
+    children,
+    compact,
+    distribution = 'fill',
+    feedbackText,
+    helpContent,
+    icon,
+    inline,
+    innerRef,
+    label,
+    labelBasis,
+    labelColor,
+    labelGrow,
+    spacing = 1,
+    state,
+    ...restProps
+  } = useThemeProps('field', props)
+  const helperDrawerId = generateId('field-helper-drawer')
+  const fieldId = generateId('field')
+  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={fieldId}
+              fontSize={compact ? 4 : 3}
+              color={labelColor}
+            >
+              {label}
+            </Input.InputLabel>
+
+            {helpContent && (
+              <HelperDrawer.Toggle
+                drawerId={helperDrawerId}
+                marginLeft={0.25}
+                marginRight={inline ? 1 : undefined}
+              />
+            )}
+          </StackView>
+        )}
+
+        {helpContent && (
+          <StackView axis="horizontal" order={inline ? 1 : 0} width="100%">
+            <HelperDrawer
+              id={helperDrawerId}
+              marginTop={1}
+              children={helpContent}
+            />
+          </StackView>
+        )}
+
+        <StackView
+          axis="horizontal"
+          alignment="center"
+          distribution={distribution}
+          order={inline ? 0 : 1}
+          grow={1}
+          marginTop={inline || !label ? undefined : 1}
+          maxWidth="100%"
+          spacing={spacing}
+        >
+          {cloneChildren(children, (child, { firstChild }) =>
+            firstChild
+              ? {
+                  id: 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,39 @@
+---
+title: Field
+category: Forms
+summary: Composes [InputLabel](/inputlabel) and passes an `id` to the first child to pair labels and controls automatically.
+propsSummary: Accepts [Box](/box) props.
+themeKey: field
+---
+
+```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,81 @@
+// @flow
+import React from 'react'
+
+import Heading from '../Heading'
+import StackView from '../StackView'
+import TileView from '../TileView'
+import Toolbar from '../Toolbar'
+import { useThemeProps } from '../system'
+
+type Props = {
+  children?: any,
+
+  /**
+   * Accepts any valid [Heading](/heading) props.
+   */
+  headingProps?: object,
+
+  /**
+   * 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,
+
+  /**
+   * Accepts any valid [TileView](/tileview) props.
+   */
+  tileViewProps?: object,
+}
+
+function FieldSet({ children, helpContent, legend, ...restProps }: Props) {
+  const {
+    headingProps,
+    tileViewProps,
+    spacing = 1,
+    minCellWidth = 16,
+    ...themeProps
+  } = useThemeProps('fieldset', { ...restProps })
+
+  return (
+    <StackView
+      as="fieldset"
+      padding={0}
+      margin={2}
+      {...themeProps}
+      {...restProps}
+    >
+      <Toolbar
+        title={
+          <Heading as="legend" level={4} {...headingProps}>
+            {legend}
+          </Heading>
+        }
+        helpContent={helpContent}
+        marginBottom={1}
+      />
+      <TileView
+        minCellWidth={minCellWidth}
+        spacing={spacing}
+        {...tileViewProps}
+      >
+        {children}
+      </TileView>
+    </StackView>
+  )
+}
+
+export default FieldSet

package/src/FieldSet/FieldSet.mdx

@@ -0,0 +1,26 @@
+---
+title: FieldSet
+category: Forms
+summary: Used to group several controls as well as labels within a web form.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: fieldSet
+---
+
+```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,34 @@
+---
+title: FilterLayout
+category: General
+summary: Used to display a filterable content area. Use with [DataTable](/datatable).
+propsSummary: Accepts [Card](/card) props.
+---
+
+```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>
+)
+```