@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Form/Form.mdx

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

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

package/src/GridView/GridView.mdx

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

package/src/GridView/GridView.tsx

@@ -0,0 +1,150 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import * as React from 'react'
+
+import { BoxProps } from '../Box'
+import splitStyles from '../system/split-styles'
+import { spacingValue } from '../system'
+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 = spacingValue(columnSpacing)
+    }
+    if (rowSpacing !== undefined && styles.gridRowGap === undefined) {
+      styles.gridRowGap = spacingValue(rowSpacing)
+    }
+    if (spacing !== undefined && styles.gap === undefined) {
+      styles.gap = spacingValue(spacing)
+    }
+    return styles
+  },
+}
+
+export type GridViewProps = {
+  /** Any direct children can use the `column|Start|End` or `row|Start|End` [shorthand properties](/style-props#grid) to place themselves on the grid. */
+  children?: any
+
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
+  as?: any
+
+  /** 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
+
+  /**  If true, sets `display: inline-grid`, otherwise it defaults to `display: grid` */
+  inline?: boolean
+
+  /** Gain access to the internal ref */
+  innerRef?: any
+
+  /** 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 [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) property. */
+  spacing?: number | string
+
+  /** 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 | string
+
+  /** 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 | string
+
+  /** Describes styles at various points in time. [Read about variants](/variants).*/
+  variants?: object
+
+  /** Describes props at different breakpoints. [Read about mediaQueries](/responsive). */
+  mediaQueries?: object
+} & 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'

package/src/Group/Group.mdx

@@ -0,0 +1,79 @@
+---
+title: Group
+category: General
+summary: Used to lay out groups of elements like cards, buttons, and/or inputs.
+propsSummary: Accepts [StackView](/stackview) props.
+---
+
+```jsx live
+render(
+  <Group>
+    <Button
+      icon={{ name: 'general.envelope' }}
+      tooltip={{ title: 'Email' }}
+      variant="outline"
+    />
+    <Button
+      icon={{ name: 'general.printer' }}
+      tooltip={{ title: 'Print' }}
+      variant="outline"
+    />
+    <Button
+      icon={{ name: 'general.thickToBottomArrow' }}
+      tooltip={{ title: 'Download' }}
+      variant="outline"
+    />
+  </Group>
+)
+```
+
+```jsx live
+render(
+  <Group axis="vertical" maxWidth={60} fontSize={4} elevation={1}>
+    <Card axis="horizontal" distribution="space-between" padding={2}>
+      <Text>General Permissions</Text>
+      <Text>Administrator</Text>
+    </Card>
+    <Card
+      axis="horizontal"
+      alignment="center"
+      padding={2}
+      color="grey-8"
+      subdued
+    >
+      <Icon name="general.outlinedInfoCircle" size="sm" color="grey-6" marginRight={2} />
+      <Text>
+        David is an <Link to="#">Organization Administrator</Link> with full
+        Administrator permission everywhere.
+      </Text>
+    </Card>
+    <Card axis="horizontal" distribution="space-between" padding={2}>
+      <Text>File Access:</Text>
+      <Text>Plan, Song, and Media</Text>
+    </Card>
+  </Group>
+)
+```
+
+```jsx live
+render(
+  <ThemeProvider theme={{ group: { radius: 16 } }}>
+    <Group size="md">
+      <Button title="Email" variant="outline" />
+      <Button
+        icon={{ name: 'general.printer', color: 'foregroundSecondary' }}
+        tooltip={{ title: 'Print' }}
+      />
+    </Group>
+  </ThemeProvider>
+)
+```
+
+```jsx live
+render(
+  <Group radius={0} size="lg">
+    <Input placeholder="Search things..." />
+    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'Search' }} />
+  </Group>
+)
+```

package/src/Group/Group.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import StackView, { StackViewProps } from '../StackView'
+import { useThemeValue } from '../system'
+import { cloneChildren } from '../utils'
+
+export type GroupProps = {
+  /**
+   * The direction the dividing line should span.
+   */
+  axis?: 'horizontal' | 'vertical'
+
+  /**
+   * Props to pass down to all children.
+   */
+  childProps?: object
+
+  /**
+   * Children elements to be grouped.
+   */
+  children?: React.ReactNode
+
+  /**
+   * The size of the radius.
+   */
+  radius?: number | string
+
+  /**
+   * The amount of space or element that is inserted between each child.
+   */
+  spacing?: number | string | React.ReactNode
+} & StackViewProps
+
+export function Group({
+  axis = 'horizontal',
+  childProps,
+  children,
+  radius,
+  spacing,
+  ...restProps
+}: GroupProps) {
+  const themeRadius = useThemeValue('group.radius')
+  const radiusValue = radius ?? themeRadius
+
+  const isHorizontalLayout = axis === 'horizontal'
+  const startRadius = isHorizontalLayout ? 'radiusLeft' : 'radiusTop'
+  const endRadius = isHorizontalLayout ? 'radiusRight' : 'radiusBottom'
+
+  const marginBottom = isHorizontalLayout ? 0 : '-1px'
+  const marginRight = isHorizontalLayout ? '-1px' : 0
+
+  return (
+    <StackView {...{ axis, spacing }} {...restProps}>
+      {cloneChildren(children, (child, { firstChild, lastChild }) => ({
+        ...childProps,
+        [startRadius]: firstChild ? radiusValue : 0,
+        [endRadius]: lastChild ? radiusValue : 0,
+        ...(!spacing && !lastChild && { marginBottom }),
+        ...(!spacing && !lastChild && { marginRight }),
+      }))}
+    </StackView>
+  )
+}

package/src/Group/index.ts

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

package/src/Heading/Heading.mdx

@@ -0,0 +1,18 @@
+---
+title: Heading
+category: General
+summary: Headings communicate the hierarchy of content to users and assistive technologies.
+propsSummary: Accepts [Text](/text) props.
+---
+
+```jsx live
+render(
+  <StackView spacing={2}>
+    {[1, 2, 3, 4, 5, 6].map((level) => (
+      <Heading key={level} level={level}>
+        Heading {level}
+      </Heading>
+    ))}
+  </StackView>
+)
+```

package/src/Heading/Heading.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import Text from '../Text'
+import { useThemeValue } from '../system'
+
+type HeadingProps = {
+  children?: React.ReactNode
+
+  /** Sets the heading tag (1-6) and the respective font size corresponding to the index position (level - 1) in theme `fontSizes`
+   * `1 | 2 | 3 | 4 | 5 | 6`
+   */
+  level?: number
+}
+
+const Heading = ({ level = 1, ...restProps }: HeadingProps): JSX.Element => {
+  const headingTheme = useThemeValue('heading')
+  const lineHeights = useThemeValue('lineHeights')
+  const index = level - 1
+  return (
+    <Text
+      as={`h${level}`}
+      fontSize={index}
+      lineHeight={lineHeights[index] + 'px'}
+      {...headingTheme}
+      {...restProps}
+    />
+  )
+}
+
+export default Heading

package/src/Heading/index.js

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

package/src/HeadingUppercase/HeadingUppercase.mdx

@@ -0,0 +1,10 @@
+---
+title: HeadingUppercase
+category: General
+propsSummary: Accepts [Text](/text) props.
+themeKey: HeadingUppercase
+---
+
+```jsx live
+render(<HeadingUppercase>Heading</HeadingUppercase>)
+```

package/src/HeadingUppercase/HeadingUppercase.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import Text from '../Text'
+import { useThemeProps } from '../system'
+
+type HeadingUppercaseProps = {
+  children?: React.ReactNode
+}
+
+const HeadingUppercase = ({
+  children,
+  ...restProps
+}: HeadingUppercaseProps): JSX.Element => {
+  const themeProps = useThemeProps('HeadingUppercase', restProps)
+
+  return (
+    <Text
+      as="span"
+      color="foregroundSecondary"
+      cursor="default"
+      fontSize={5}
+      fontWeight={700}
+      margin={0}
+      shrink={0}
+      uppercase
+      {...themeProps}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export default HeadingUppercase

package/src/HeadingUppercase/index.js

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

package/src/HelperDrawer/HelperDrawer.js

@@ -0,0 +1,65 @@
+// @flow
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react'
+import { useCallback, useEffect, useState } from 'react'
+
+import Button from '../Button'
+import Card from '../Card'
+import Collapse from '../Collapse'
+
+const drawerToggles = {}
+
+function Toggle({ drawerId, ...restProps }) {
+  const handleClick = useCallback(
+    (event) => {
+      const drawerToggle = drawerToggles[drawerId]
+      if (drawerToggle) {
+        event.preventDefault()
+        drawerToggle()
+      }
+    },
+    [drawerId]
+  )
+  return (
+    <Button
+      icon={{ name: 'general.outlinedInfoCircle' }}
+      tooltip={{ title: 'More info' }}
+      size="xs"
+      theme={false}
+      color="foregroundSecondary"
+      hover={{ backgroundColor: 'highlight' }}
+      onClick={handleClick}
+      data-helper-drawer-toggle
+      {...restProps}
+    />
+  )
+}
+
+type Props = {
+  children?: any,
+
+  /** Used by the `HelperDrawer.Toggle` to connect to.  */
+  id?: string | number,
+}
+
+function HelperDrawer({ children, id, ...restProps }: Props) {
+  const [open, setOpen] = useState(false)
+  useEffect(() => {
+    drawerToggles[id] = () => setOpen((open) => !open)
+    return () => {
+      delete drawerToggles[id]
+    }
+  }, [id])
+  return (
+    <Collapse open={open} lazy css={{ width: '100%' }}>
+      <Card subdued padding={1} fontSize={4} {...restProps}>
+        {children}
+      </Card>
+    </Collapse>
+  )
+}
+
+HelperDrawer.Toggle = Toggle
+
+export default HelperDrawer