@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/CheckboxGroup/CheckboxGroup.mdx

@@ -0,0 +1,27 @@
+---
+title: CheckboxGroup
+category: Forms
+summary: Manage a group of checkboxes with one value and one callback.
+---
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(['One', 'Three'])
+  return (
+    <CheckboxGroup
+      name="checkbox-group"
+      value={value}
+      onChange={(value) => {
+        console.log(value)
+        setValue(value)
+      }}
+    >
+      <StackView axis="horizontal" spacing={2}>
+        {['One', 'Two', 'Three', 'Four'].map((value) => (
+          <Checkbox key={value} value={value} label={value} />
+        ))}
+      </StackView>
+    </CheckboxGroup>
+  )
+})
+```

package/src/CheckboxGroup/CheckboxGroupContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+const CheckboxGroupContext = createContext()
+export default CheckboxGroupContext

package/src/CheckboxGroup/index.js

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

package/src/ChurchCenterStatus/ChurchCenterStatus.mdx

@@ -0,0 +1,105 @@
+---
+title: ChurchCenterStatus
+category: General
+---
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled={false}
+    ccPublishingEnabled
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled={false}
+    ccPublishingEnabled
+    ccWebEnabled={false}
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+```jsx live
+render(
+  <ChurchCenterStatus
+    ccAppEnabled
+    ccPublishingEnabled={false}
+    ccWebEnabled
+    description="On Church Center, people can browse and register for events."
+    destinationLabel="event list"
+    productUrl="#product"
+    settingsUrl="#settings"
+  />
+)
+```
+
+## Custom icons
+
+To use the Planning Center General set of icons, import the general set to your theme and define the overrides with the `icons` prop.
+
+To learn how to import the general set to your theme, see [Grouped Icon Sets](/icon#grouped-icon-sets).
+
+```jsx live
+render(
+  <ThemeProvider theme={{ icons }}>
+    <StackView axis="horizontal" spacing={2}>
+      <ChurchCenterStatus
+        ccAppEnabled
+        ccPublishingEnabled
+        ccWebEnabled={false}
+        description="On Church Center, people can browse and register for events."
+        destinationLabel="event list"
+        icons={{
+          check: 'general.check',
+          exclamationTriangle: 'general.exclamationTriangle',
+          external: 'general.newWindow',
+          x: 'general.x',
+        }}
+        productUrl="#product"
+        settingsUrl="#settings"
+      />
+      <ChurchCenterStatus
+        ccAppEnabled
+        ccPublishingEnabled={false}
+        ccWebEnabled
+        description="On Church Center, people can browse and register for events."
+        destinationLabel="event list"
+        icons={{
+          check: 'general.check',
+          exclamationTriangle: 'general.exclamationTriangle',
+          external: 'general.newWindow',
+          x: 'general.x',
+        }}
+        productUrl="#product"
+        settingsUrl="#settings"
+      />
+    </StackView>
+  </ThemeProvider>
+)
+```

package/src/ChurchCenterStatus/ChurchCenterStatus.tsx

@@ -0,0 +1,168 @@
+import React from 'react'
+
+import Button from '../Button'
+import Divider from '../Divider'
+import Dropdown from '../Dropdown'
+import Icon from '../Icon'
+import StackView from '../StackView'
+import Text from '../Text'
+
+type ChurchCenterStatusProps = {
+  /**
+   * Determines status of Church Center App.
+   */
+  ccAppEnabled?: boolean
+
+  /**
+   * Determines status of publishing to Church Center.
+   */
+  ccPublishingEnabled?: boolean
+
+  /**
+   * Determines status of Church Center Web.
+   */
+  ccWebEnabled?: boolean
+
+  /**
+   * Renders a text description in popover when status is active.
+   */
+  description: string
+
+  /**
+   * Renders a text for Church Center destination button ("Visit {destinationLabel}").
+   */
+  destinationLabel: string
+
+  /**
+   * Renders a text description in popover when status is inactive.
+   */
+  disabledDescription?: string
+
+  /**
+   * Pass props to the Dropdown component.
+   */
+  dropdownProps?: object
+
+  /**
+   * Provide icon overrides for "check", "exclamationTriangle", "external", and "x" icons.
+   */
+  icons?: object
+
+  /**
+   * Where the browser should navigate when destination button is pressed.
+   */
+  productUrl: string
+
+  /**
+   * Where the browser should navigate when settings button is pressed.
+   */
+  settingsUrl: string
+}
+
+export function ChurchCenterStatus({
+  ccAppEnabled = false,
+  ccPublishingEnabled = false,
+  ccWebEnabled = false,
+  description,
+  destinationLabel,
+  disabledDescription = 'People cannot access this product on the web or mobile app.',
+  dropdownProps = {},
+  icons,
+  productUrl,
+  settingsUrl,
+  ...props
+}: ChurchCenterStatusProps) {
+  const buttonProps: any = {
+    distribution: 'start',
+    fontWeight: 400,
+    paddingHorizontal: 2,
+    radius: 0,
+    variant: 'naked',
+  }
+
+  const ccEnabled = ccAppEnabled || ccWebEnabled
+
+  const icon = {
+    check: 'checkmark',
+    exclamationTriangle: 'exclamation-triangle-filled',
+    external: 'external',
+    x: 'close',
+    ...icons,
+  }
+
+  return (
+    <StackView axis="horizontal" spacing={1} {...props}>
+      <Dropdown
+        fontWeight={400}
+        placement="bottom-end"
+        popoverProps={{ width: '280px', ...dropdownProps['popoverProps'] }}
+        theme="dark"
+        title="Church Center"
+        variant="outline"
+        {...((!ccEnabled || !ccPublishingEnabled) && {
+          iconLeft: { name: icon.exclamationTriangle, size: 'sm' },
+        })}
+        {...dropdownProps}
+      >
+        <StackView padding={2} spacing={2}>
+          {!ccPublishingEnabled ? (
+            <Text size="14px">
+              <strong>This product is not published on Church Center.</strong>{' '}
+              {disabledDescription}
+            </Text>
+          ) : !ccEnabled ? (
+            <Text size="14px">
+              <strong>Church Center is disabled.</strong> {disabledDescription}
+            </Text>
+          ) : (
+            <Text size="14px">{description}</Text>
+          )}
+          {ccEnabled && ccPublishingEnabled && (
+            <StackView axis="horizontal" spacing={3}>
+              <StackView axis="horizontal" alignment="center" spacing={0.5}>
+                <Icon
+                  color={ccWebEnabled ? 'success' : 'error'}
+                  name={ccWebEnabled ? icon.check : icon.x}
+                  size="sm"
+                />
+                <Text size="14px" weight={700}>
+                  Web
+                </Text>
+              </StackView>
+              <StackView axis="horizontal" alignment="center" spacing={0.5}>
+                <Icon
+                  color={ccAppEnabled ? 'success' : 'error'}
+                  name={ccAppEnabled ? icon.check : icon.x}
+                  size="sm"
+                />
+                <Text size="14px" weight={700}>
+                  Mobile app
+                </Text>
+              </StackView>
+            </StackView>
+          )}
+        </StackView>
+        <Divider margin={0.5} />
+        <StackView>
+          <Button
+            external
+            title="Update settings"
+            to={settingsUrl}
+            {...buttonProps}
+          />
+          {ccEnabled && ccPublishingEnabled && (
+            <Button external to={productUrl} {...buttonProps}>
+              Visit {destinationLabel}
+              <Icon
+                color="primary"
+                name={icon.external}
+                marginLeft={1}
+                size="sm"
+              />
+            </Button>
+          )}
+        </StackView>
+      </Dropdown>
+    </StackView>
+  )
+}

package/src/ChurchCenterStatus/index.tsx

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

package/src/Collapse/Collapse.js

@@ -0,0 +1,118 @@
+// @flow
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import { useLayoutEffect, useRef, useState } from 'react'
+
+const transition = 'height 200ms ease-out'
+
+export type Props = {
+  /**
+   * Controls whether or not children are visible.
+   */
+  open?: boolean,
+  /**
+   * Determines if children should render `null` or not while closed.
+   */
+  lazy?: boolean,
+  /**
+   * Instantly expand and collapse children.
+   */
+  instant?: boolean,
+  /**
+   * Called when opening or closing.
+   */
+  onComplete?: Function,
+}
+
+function Collapse(props: Props) {
+  const { children, instant, lazy, onComplete, open, ...restProps } = props
+  const [renderChildren, setRenderChildren] = useState(lazy ? open : true)
+  const ref = useRef()
+  const firstRender = useRef(true)
+  const instantRender = instant || firstRender.current
+
+  function openCollapse() {
+    const node = ref.current
+    requestAnimationFrame(() => {
+      node.style.height = node.scrollHeight + 'px'
+    })
+  }
+
+  function closeCollapse() {
+    const node = ref.current
+    requestAnimationFrame(() => {
+      node.style.height = node.offsetHeight + 'px'
+      node.style.overflow = 'hidden'
+      requestAnimationFrame(() => {
+        node.style.height = 0
+      })
+    })
+  }
+
+  useLayoutEffect(() => {
+    if (lazy) {
+      if (open) {
+        if (renderChildren) {
+          openCollapse()
+        } else {
+          setRenderChildren(true)
+        }
+      } else {
+        closeCollapse()
+      }
+    } else {
+      if (open) {
+        openCollapse()
+      } else {
+        closeCollapse()
+      }
+    }
+  }, [open, renderChildren])
+
+  useLayoutEffect(() => {
+    const node = ref.current
+    function handleComplete() {
+      node.style.overflow = open ? 'initial' : 'hidden'
+      if (open) {
+        requestAnimationFrame(() => {
+          node.style.margin = null
+          node.style.height = 'auto'
+        })
+      }
+      if (!open && lazy) {
+        node.style.margin = '0'
+        setRenderChildren(false)
+      }
+      if (firstRender.current) {
+        firstRender.current = false
+      } else if (onComplete) {
+        onComplete()
+      }
+    }
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'height') {
+        handleComplete()
+      }
+    }
+    if (instantRender) {
+      handleComplete()
+    }
+    node.addEventListener('transitionend', handleTransitionEnd)
+    return () => {
+      node.removeEventListener('transitionend', handleTransitionEnd)
+    }
+  }, [open])
+
+  return (
+    <div
+      ref={ref}
+      css={{ transition: instantRender ? undefined : transition }}
+      {...restProps}
+    >
+      {renderChildren ? children : null}
+    </div>
+  )
+}
+
+export default Collapse

package/src/Collapse/Collapse.mdx

@@ -0,0 +1,26 @@
+---
+title: Collapse
+category: General
+summary: Simplifies information by expanding and collapsing content.
+---
+
+```jsx live
+render(() => {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <StackView alignment="center" spacing={1}>
+      <Button
+        title="Toggle Collapse"
+        onClick={() => setOpen((open) => !open)}
+      />
+      <Collapse
+        lazy
+        open={open}
+        onComplete={() => console.log('collapse is ', open ? 'open' : 'closed')}
+      >
+        <Card padding={2}>Collapsed content 🎉</Card>
+      </Collapse>
+    </StackView>
+  )
+})
+```

package/src/Collapse/index.js

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

package/src/ColumnView/ColumnView.js

@@ -0,0 +1,61 @@
+// @flow
+import React, { Children } from 'react'
+
+import StackView from '../StackView'
+
+function Column() {
+  return null
+}
+
+export type Props = {
+  /** The amount of columns to be rendered. */
+  sizes?: Array<
+    | {
+        basis?: string | number,
+        grow?: number,
+        shrink?: number,
+      }
+    | number
+    | string
+  >,
+  /** The amount of space between columns. */
+  spacing?: number,
+}
+
+function ColumnView(props: Props) {
+  const { children, sizes = [], spacing, ...restProps } = props
+  const sortedColumns = Children.toArray(children)
+    .sort((a, b) => (a.props.order || 0) - (b.props.order || 0))
+    .reduce((columns, cell, index) => {
+      const columnIndex =
+        cell.props.index === undefined ? index : cell.props.index
+      if (!columns[columnIndex]) {
+        columns[columnIndex] = []
+      }
+      columns[columnIndex].push(cell)
+      return columns
+    }, [])
+  return (
+    <StackView axis="horizontal" grow={1} shrink={1} {...restProps}>
+      {sortedColumns.map((column, index) => {
+        const size = sizes ? sizes[index] || 'auto' : 'auto'
+        return (
+          <StackView
+            key={index}
+            basis={size === 'auto' ? '100%' : size.basis || size}
+            shrink={size === 'auto' ? 1 : size.shrink || 0}
+            grow={size === 'auto' ? 1 : size.grow || 0}
+            marginLeft={index === 0 ? null : spacing}
+            spacing={spacing}
+          >
+            {column.map((cell) => cell.props.children)}
+          </StackView>
+        )
+      })}
+    </StackView>
+  )
+}
+
+ColumnView.Column = Column
+
+export default ColumnView

package/src/ColumnView/ColumnView.mdx

@@ -0,0 +1,39 @@
+---
+title: ColumnView
+category: Layout
+summary: Place children into different sized columns.
+---
+
+```jsx live
+const Cell = (props) => (
+  <Box
+    padding={2}
+    radius={3}
+    backgroundColor="blue-5"
+    color="white"
+    {...props}
+  />
+)
+render(
+  <ColumnView
+    sizes={[{ basis: '280px', grow: 0 }, null, { basis: '100px' }]}
+    spacing={2}
+  >
+    <ColumnView.Column index={0}>
+      <Cell minHeight={20}>1</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={0}>
+      <Cell minHeight={8}>2</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={1}>
+      <Cell minHeight={5}>3</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={1}>
+      <Cell minHeight={10}>4</Cell>
+    </ColumnView.Column>
+    <ColumnView.Column index={2}>
+      <Cell minHeight={24}>5</Cell>
+    </ColumnView.Column>
+  </ColumnView>
+)
+```

package/src/ColumnView/index.js

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

package/src/Combobox/Combobox.js

@@ -0,0 +1,39 @@
+import React, { Component } from 'react'
+
+import Box from '../Box'
+import { ItemList } from '../ItemList'
+
+import ComboboxInput from './ComboboxInput'
+import ComboboxItem from './ComboboxItem'
+import ComboboxItems from './ComboboxItems'
+import ComboboxPopover from './ComboboxPopover'
+
+class Combobox extends Component {
+  static Input = ComboboxInput
+
+  static Item = ComboboxItem
+
+  static Items = ComboboxItems
+
+  static Popover = ComboboxPopover
+
+  render() {
+    const {
+      children,
+      multiple,
+      onSelect,
+      selectedValue,
+      ...restProps
+    } = this.props
+    return (
+      <ItemList
+        selected={(item) => item.value === selectedValue}
+        onSelect={onSelect}
+      >
+        <Box {...restProps}>{children}</Box>
+      </ItemList>
+    )
+  }
+}
+
+export default Combobox