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

package/src/Dropdown/Link.js

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

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

package/src/EditActions/EditActions.js

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

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

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

package/src/Field/Field.js

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

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

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

package/src/FieldSet/FieldSet.js

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

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

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

package/src/FilterLayout/FilterLayout.mdx

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