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

package/src/FilterLayout/FilterLayout.tsx

@@ -1,99 +0,0 @@
-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
-              ? 'general.leftChevron'
-              : 'general.threeReducingHorizontalBars',
-            size: sidebarOpen ? 'xs' : 'md',
-          }}
-          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
-          visibility={sidebarOpen && fill ? 'hidden' : 'visible'}
-          maxHeight={sidebarOpen && fill ? 0 : 'initial'}
-          grow={1}
-          shrink={1}
-          basis="100%"
-        >
-          <Box overflow="hidden">{toolbar}</Box>
-          <Divider />
-          {table}
-        </StackView>
-      </StackView>
-    </Card>
-  )
-}

package/src/FilterLayout/index.ts

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

package/src/FocusGroup/FocusGroup.js

@@ -1,93 +0,0 @@
-import React, { Component, createContext } from 'react'
-
-import { getClosestFocusableElement } from '../utils'
-
-const SetRefContext = createContext()
-
-class FocusGroup extends Component {
-  static defaultProps = {
-    onBlur: () => null,
-  }
-
-  static contextType = SetRefContext
-
-  nodes = {}
-
-  setRef = (id) => (node) => {
-    if (this.context) {
-      this.context(id)(node)
-    }
-    if (node) {
-      this.nodes[id] = node
-    } else {
-      delete this.nodes[id]
-    }
-  }
-
-  isElementOutside = (target) => {
-    return Object.values(this.nodes).every(
-      (node) => node !== target && !node.contains(target)
-    )
-  }
-
-  maybeRestoreFocus = (nextFocusedElement, event) => {
-    const focusableElement = nextFocusedElement
-      ? getClosestFocusableElement(nextFocusedElement.parentNode)
-      : null
-
-    if (focusableElement) {
-      const observer = new MutationObserver((mutationsList) => {
-        for (let mutation of mutationsList) {
-          if (
-            mutation.type === 'childList' &&
-            mutation.removedNodes.length > 0
-          ) {
-            const removedElement = mutation.removedNodes[0]
-            if (
-              removedElement === nextFocusedElement &&
-              focusableElement.focus
-            ) {
-              const previousScrollY = window.pageYOffset
-              focusableElement.focus()
-              if (this.isElementOutside(focusableElement)) {
-                this.props.onBlur(event)
-              }
-              setTimeout(() => {
-                window.scroll(0, previousScrollY)
-              })
-            }
-          }
-        }
-      })
-
-      observer.observe(nextFocusedElement.parentNode, { childList: true })
-
-      setTimeout(() => {
-        observer.disconnect()
-      }, 800)
-    }
-  }
-
-  requestBlur = (event) => {
-    const nextFocusedElement = event.relatedTarget || document.activeElement
-
-    this.maybeRestoreFocus(nextFocusedElement, event)
-
-    if (this.isElementOutside(nextFocusedElement)) {
-      this.props.onBlur(event)
-    }
-  }
-
-  render() {
-    return (
-      <SetRefContext.Provider value={this.setRef}>
-        {this.props.children({
-          setRef: this.setRef,
-          requestBlur: this.requestBlur,
-        })}
-      </SetRefContext.Provider>
-    )
-  }
-}
-
-export default FocusGroup

package/src/FocusGroup/index.js

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

package/src/Form/Form.js

@@ -1,189 +0,0 @@
-// @flow
-import * as React from 'react'
-
-import { shallowEqual } from '../utils'
-
-type Props = {
-  /**
-   * The initial data to seed the form with. Used to determine
-   * previous state when a cancel action occurs as well as if the
-   * form should submit or not. This can be passed new data
-   * (like updating from `onSubmit`). Use a simple data structure
-   * to avoid false positives when the previous and initial payload
-   * are compared to determine calling `onSubmit`.
-   */
-  initialPayload: Object<any>,
-
-  /**
-   * Called whenever a submit action occurs (enter key / form blur)
-   * and the form has a different internal payload compared to
-   * the `initialPayload`.
-   *
-   * `payload`
-   *
-   * The newly edited `payload` that should be submitted.
-   *
-   * `complete`
-   *
-   * Call whenever the form is done completing to re-enable the form.
-   */
-  onSubmit: (payload: Object<any>, complete: () => void) => void,
-
-  /**
-   * `isEditing`
-   *
-   * Toggled by trigger or focusing/blurring a field.
-   *
-   * `isSubmitting`
-   *
-   * True when a submit action occurs either from the enter key or
-   * blurring the form with different data from `initialPayload`.
-   *
-   * `editButtonProps`
-   *
-   * Provides the proper props and callbacks to toggle editing
-   * mode and show a spinner when submitting. Must be passed to
-   * a [Button](/button) component.
-   *
-   * `getFieldProps`
-   *
-   * Accepts an `id` as the first argument that maps to the respective
-   * field key in `initialPayload`. It also receives a `getChangeValue`
-   * function as the second argument used to resolve the value when
-   * dealing with non traditional events like `Select` or `NumberField`.
-   */
-  children: (props: {
-    isEditing: boolean,
-    isSubmitting: boolean,
-    editButtonProps: Object,
-    getFieldProps: (id: any) => Object,
-  }) => React.Node,
-}
-
-class Form extends React.Component<Props> {
-  state = {
-    isEditing: false,
-    isSubmitting: false,
-    payload: this.props.initialPayload,
-  }
-
-  submitTimeoutId = null
-
-  startSubmitTimeout = () => {
-    this.submitTimeoutId = setTimeout(this.handleSubmit)
-  }
-
-  clearSubmitTimeout = () => {
-    clearTimeout(this.submitTimeoutId)
-    this.submitTimeoutId = null
-  }
-
-  componentDidUpdate(lastProps) {
-    if (!shallowEqual(lastProps.initialPayload, this.props.initialPayload)) {
-      this.setState({
-        payload: this.props.initialPayload,
-      })
-    }
-  }
-
-  handleEditing = () => {
-    this.setState({ isEditing: true })
-    if (this.focusable) {
-      this.focusable.focus()
-    }
-  }
-
-  handleReset = () => {
-    this.setState({
-      isEditing: false,
-      payload: this.props.initialPayload,
-    })
-  }
-
-  handleSubmit = () => {
-    if (
-      JSON.stringify(this.props.initialPayload) ===
-      JSON.stringify(this.state.payload)
-    ) {
-      this.setState({ isEditing: false }, this.clearSubmitTimeout)
-    } else {
-      let timeoutId = setTimeout(() => {
-        this.setState({ isEditing: false, isSubmitting: true })
-      })
-      this.props.onSubmit(this.state.payload, () => {
-        clearTimeout(timeoutId)
-        this.clearSubmitTimeout()
-        this.setState({ isSubmitting: false })
-      })
-    }
-  }
-
-  storeFocusRef = (node) => {
-    if (!this.focusable) {
-      this.focusable = node
-    }
-  }
-
-  render() {
-    const { isEditing, isSubmitting, payload } = this.state
-    return this.props.children({
-      ...this.state,
-      editButtonProps: {
-        disabled: isSubmitting,
-        icon: isEditing ? undefined : { name: 'general.pencil' },
-        onClick: () => {
-          // bail out if we've already triggered a submit in onBlur
-          if (this.submitTimeoutId === null) {
-            if (isEditing) {
-              this.handleSubmit()
-            } else {
-              this.handleEditing()
-            }
-          }
-        },
-        spinner: isSubmitting,
-        title: isEditing ? 'Save' : 'Edit',
-        tooltip: isEditing
-          ? isSubmitting
-            ? { title: 'Saving' }
-            : undefined
-          : { title: 'Edit' },
-      },
-      getFieldProps: (key, getChangeValue = (event) => event.target.value) => ({
-        innerRef: this.storeFocusRef,
-        disabled: isSubmitting,
-        hover: isEditing,
-        value: payload[key],
-        onFocus: () => {
-          this.clearSubmitTimeout()
-          this.setState({ isEditing: true })
-        },
-        onBlur: () => {
-          this.startSubmitTimeout()
-        },
-        onChange: (event) => {
-          const nextValue = getChangeValue(event)
-          this.setState((state) => {
-            return {
-              payload: {
-                ...state.payload,
-                [key]: nextValue,
-              },
-            }
-          })
-        },
-        onKeyDown: (event) => {
-          if (event.key === 'Enter' || event.key === 'Escape') {
-            event.preventDefault()
-            event.target.blur()
-            if (event.key === 'Escape') {
-              this.handleReset()
-            }
-          }
-        },
-      }),
-    })
-  }
-}
-
-export default Form

package/src/Form/Form.mdx

@@ -1,154 +0,0 @@
----
-title: Form
-category: Forms
----
-
-```jsx live
-render(() => {
-  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
-  return (
-    <ThemeProvider theme={{ icons }}>
-      <Form
-        initialPayload={value}
-        onSubmit={(payload, complete) => {
-          setTimeout(() => {
-            setValue(payload)
-            complete()
-          }, 1600)
-        }}
-      >
-        {({ editButtonProps, getFieldProps }) => (
-          <StackView
-            minWidth={64}
-            padding={2}
-            spacing={1}
-            backgroundColor="primary-light"
-          >
-            <StackView axis="horizontal" alignment="center" spacing={1}>
-              <Input.Inline fontSize={0} light {...getFieldProps('name')} />
-              <Button size="xs" theme="light" {...editButtonProps} />
-              <Icon name="services.split" size="md" color="light-6" />
-              <Icon name="services.tag" size="md" color="light-6" />
-            </StackView>
-          </StackView>
-        )}
-      </Form>
-    </ThemeProvider>
-  )
-})
-```
-
-```jsx live
-render(() => {
-  const [state, setState] = React.useState({
-    name: 'Chris Tomlin',
-    minutes: 8,
-    seconds: 0,
-    bpm: 65,
-    meter: '4/4',
-  })
-  return (
-    <Form
-      initialPayload={state}
-      onSubmit={(payload, complete) => {
-        setTimeout(() => {
-          setState(payload)
-          complete()
-        }, 1600)
-      }}
-    >
-      {({ editButtonProps, getFieldProps, isEditing, isSubmitting }) => (
-        <StackView
-          padding={2}
-          spacing={1}
-          backgroundColor="backgroundSecondary"
-        >
-          <StackView axis="horizontal" alignment="center" marginBottom={1}>
-            <Button
-              size="xs"
-              theme="primary"
-              variant="outline"
-              order={1}
-              marginLeft={1}
-              {...editButtonProps}
-            />
-            <Input.Inline fontSize={0} order={0} {...getFieldProps('name')} />
-          </StackView>
-          <StackView axis="horizontal" alignment="center" spacing={2}>
-            <StackView axis="horizontal" alignment="center">
-              <Input.InputLabel
-                controls="minutes"
-                fontSize={1}
-                color="foregroundSecondary"
-                marginRight={1}
-              >
-                Length:
-              </Input.InputLabel>
-              <NumberField
-                id="minutes"
-                as={Input.Inline}
-                min={0}
-                max={59}
-                pad={1}
-                fontSize={1}
-                lineHeight={4}
-                {...getFieldProps('minutes', (value) => value)}
-              />
-              <Text fontSize={1} marginHorizontal={0.5}>
-                :
-              </Text>
-              <NumberField
-                as={Input.Inline}
-                min={0}
-                max={59}
-                pad={2}
-                fontSize={1}
-                lineHeight={4}
-                {...getFieldProps('seconds', (value) => value)}
-              />
-            </StackView>
-            <StackView axis="horizontal" alignment="center" spacing={1}>
-              <Input.InputLabel
-                controls="bpm"
-                fontSize={1}
-                color="foregroundSecondary"
-              >
-                BPM:
-              </Input.InputLabel>
-              <NumberField
-                id="bpm"
-                as={Input.Inline}
-                min={0}
-                pad={1}
-                fontSize={1}
-                lineHeight={4}
-                {...getFieldProps('bpm', (value) => value)}
-              />
-            </StackView>
-            <StackView axis="horizontal" alignment="center" spacing={1}>
-              <Input.InputLabel
-                controls="meter"
-                fontSize={1}
-                color="foregroundSecondary"
-              >
-                Meter:
-              </Input.InputLabel>
-              <Select.Inline
-                id="meter"
-                fontSize={1}
-                {...getFieldProps('meter', (event) => event.value)}
-              >
-                <Select.Option value="none">None</Select.Option>
-                <Select.Option value="2/2">2/2</Select.Option>
-                <Select.Option value="2/4">2/4</Select.Option>
-                <Select.Option value="3/4">3/4</Select.Option>
-                <Select.Option value="4/4">4/4</Select.Option>
-              </Select.Inline>
-            </StackView>
-          </StackView>
-        </StackView>
-      )}
-    </Form>
-  )
-})
-```

package/src/Form/index.js

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

package/src/GridView/GridView.mdx

@@ -1,56 +0,0 @@
----
-title: GridView
-category: Layout
-summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
-propsSummary: Accepts all valid HTML attributes.
----
-
-```jsx live
-const Cell = (props) => (
-  <StackView
-    alignment="center"
-    distribution="center"
-    padding={1}
-    radius={3}
-    backgroundColor="blue-5"
-    color="white"
-    {...props}
-  />
-)
-render(
-  <GridView columns={[12, 32]} minHeight={20} spacing={2}>
-    <Cell column={1}>A</Cell>
-    <Cell column={2}>B</Cell>
-  </GridView>
-)
-```
-
-```jsx live
-const Cell = (props) => (
-  <StackView
-    alignment="center"
-    distribution="center"
-    padding={1}
-    radius={3}
-    backgroundColor="blue-5"
-    color="white"
-    {...props}
-  />
-)
-render(
-  <GridView columns="100px 300px" rows="40px 200px 80px" spacing={2}>
-    <Cell columnStart={1} columnEnd={-1} row={1}>
-      Header
-    </Cell>
-    <Cell column={2} row={2}>
-      Content
-    </Cell>
-    <Cell column={1} row={2}>
-      Sidebar
-    </Cell>
-    <Cell columnStart={1} columnEnd={-1} row={3}>
-      Footer
-    </Cell>
-  </GridView>
-)
-```