@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/FocusGroup/FocusGroup.js

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

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

package/src/Form/Form.js

@@ -0,0 +1,189 @@
+// @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: '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

@@ -0,0 +1,152 @@
+---
+title: Form
+category: Forms
+---
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState({ name: "Dave's Band Tag Team" })
+  return (
+    <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="split" size="md" color="light-6" />
+            <Icon name="tag" size="md" color="light-6" />
+          </StackView>
+        </StackView>
+      )}
+    </Form>
+  )
+})
+```
+
+```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

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

package/src/GridView/GridView.mdx

@@ -0,0 +1,55 @@
+---
+title: GridView
+category: Layout
+summary: Lay out children in columns and rows. Wraps CSS grid styles in a simple API. Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/system-props#css-grid) to place themselves on the grid. To learn more about how you can use CSS grid visit [learncssgrid.com](https://learncssgrid.com/).
+---
+
+```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>
+)
+```

package/src/GridView/GridView.tsx

@@ -0,0 +1,131 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import * as React from 'react'
+
+import { BoxProps } from '../Box'
+import splitStyles from '../system/split-styles'
+import { MediaQueries, Variants } from '../index'
+import { useVariant } from '../VariantProvider'
+
+function getTemplateValue(value) {
+  return value
+    ? value.constructor === Array
+      ? value.map((v) => (typeof v === 'number' ? `${v * 8}px` : v)).join(' ')
+      : value
+    : undefined
+}
+
+const gridViewPlugin = {
+  styleProps: [
+    'autoFlow',
+    'autoColumns',
+    'autoRows',
+    'columns',
+    'rows',
+    'alignment',
+    'distribution',
+    'columnSpacing',
+    'rowSpacing',
+    'spacing',
+  ],
+  getStyles({
+    autoFlow,
+    autoColumns,
+    autoRows,
+    columns,
+    rows,
+    alignment,
+    distribution,
+    columnSpacing,
+    rowSpacing,
+    spacing,
+    ...styles
+  }) {
+    if (autoFlow !== undefined && styles.gridAutoFlow === undefined) {
+      styles.gridAutoFlow = autoFlow
+    }
+    if (autoColumns !== undefined && styles.gridAutoColumns === undefined) {
+      styles.gridAutoColumns = autoColumns
+    }
+    if (autoRows !== undefined && styles.autoRows === undefined) {
+      styles.gridAutoRows = autoRows
+    }
+    if (columns !== undefined && styles.gridTemplateColumns === undefined) {
+      styles.gridTemplateColumns = getTemplateValue(columns)
+    }
+    if (rows !== undefined && styles.gridTemplateRows === undefined) {
+      styles.gridTemplateRows = getTemplateValue(rows)
+    }
+    if (alignment !== undefined && styles.alignItems === undefined) {
+      styles.alignItems = alignment
+    }
+    if (distribution !== undefined && styles.distribution === undefined) {
+      styles.justifyItems = distribution
+    }
+    if (columnSpacing !== undefined && styles.gridColumnGap === undefined) {
+      styles.gridColumnGap = columnSpacing * 8
+    }
+    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
+      styles.gridRowGap = rowSpacing * 8
+    }
+    if (spacing !== undefined && styles.gridGap === undefined) {
+      styles.gridGap = spacing * 8
+    }
+    return styles
+  },
+}
+
+export type GridViewProps = {
+  /** The algorithm used to implicitly place grid items. Maps to CSS [gridAutoFlow](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) property. */
+  autoFlow?: 'column' | 'row' | 'dense'
+
+  /** The size of implicit grid columns. Maps to CSS [gridAutoColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns) property. */
+  autoColumns?: string
+
+  /** The size of implicit grid rows. Maps to CSS [gridAutoRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows) property. */
+  autoRows?: string
+
+  /** The columns of the grid. Maps to CSS [gridTemplateColumns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) property. */
+  columns?: Array<any> | string
+
+  /** The rows of the grid. Maps to CSS [gridTemplateRows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) property. */
+  rows?: Array<any> | string
+
+  /** Aligns content in a grid item along the column axis. Maps to CSS [alignItems](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) property. */
+  alignment?: 'start' | 'end' | 'center' | 'stretch'
+
+  /** The amount of space between children. Maps to CSS [gridGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap) property. */
+  spacing?: number
+
+  /** The amount of space between columns. Maps to CSS [gridColumnGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-gap) property. */
+  columnSpacing?: number
+
+  /** The amount of space between rows. Maps to CSS [gridRowGap](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-gap) property. */
+  rowSpacing?: number
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  GridViewProps &
+  MediaQueries<GridViewProps> &
+  Variants<GridViewProps>
+
+const defaultElement = 'div'
+
+export function GridView({ as, inline, innerRef, ...props }: Props) {
+  const Element: React.ElementType = as || defaultElement
+  const variant = useVariant()
+  return (
+    <Element
+      ref={innerRef}
+      {...splitStyles({
+        display: inline ? 'inline-grid' : 'grid',
+        autoColumns: 'minmax(0, auto)',
+        plugin: gridViewPlugin,
+        variant,
+        ...props,
+      })}
+    />
+  )
+}

package/src/GridView/index.ts

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