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

package/src/ChurchCenterStatus/ChurchCenterStatus.tsx

@@ -1,200 +0,0 @@
-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 = {
-  /**
-   * Pass props to the Dropdown buttons.
-   */
-  buttonProps?: object
-
-  /**
-   * 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
-
-  /**
-   * Render nodes at the end of the popover. `buttonProps` is passed as an argument
-   * and can be spread on any `<Button />` component to match the style of the other
-   * popover links.
-   */
-  renderPopoverFooter: Function
-
-  /**
-   * Where the browser should navigate when settings button is pressed.
-   */
-  settingsUrl: string
-
-  /**
-   * Toggle the settings link display.
-   */
-  showSettingsLink?: boolean
-}
-
-export function ChurchCenterStatus({
-  buttonProps: passedButtonProps = {},
-  ccAppEnabled = false,
-  ccPublishingEnabled = false,
-  ccWebEnabled = false,
-  description,
-  destinationLabel,
-  disabledDescription = 'People cannot access this product on the web or mobile app.',
-  dropdownProps = {},
-  icons,
-  productUrl,
-  renderPopoverFooter = () => {},
-  settingsUrl,
-  showSettingsLink = true,
-  ...props
-}: ChurchCenterStatusProps) {
-  const buttonProps: any = {
-    distribution: 'start',
-    fontWeight: 400,
-    paddingHorizontal: 2,
-    radius: 0,
-    variant: 'naked',
-    ...passedButtonProps,
-  }
-
-  const ccEnabled = ccAppEnabled || ccWebEnabled
-  const hasLinks =
-    showSettingsLink ||
-    (ccEnabled && ccPublishingEnabled) ||
-    !!renderPopoverFooter()
-
-  const icon = {
-    check: 'general.check',
-    exclamationTriangle: 'general.exclamationTriangle',
-    external: 'general.newWindow',
-    x: 'general.x',
-    ...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>
-        {hasLinks && <Divider margin={0.5} />}
-        <StackView>
-          {showSettingsLink && (
-            <Button
-              external
-              title="Update settings"
-              to={settingsUrl}
-              {...buttonProps}
-            />
-          )}
-          {ccEnabled && ccPublishingEnabled && (
-            <Button
-              external
-              iconRight={{
-                color: 'primary',
-                name: icon.external,
-                marginLeft: 1,
-                size: 'xs',
-              }}
-              title={`Visit ${destinationLabel}`}
-              to={productUrl}
-              {...buttonProps}
-              as="a"
-            />
-          )}
-          {renderPopoverFooter(buttonProps)}
-        </StackView>
-      </Dropdown>
-    </StackView>
-  )
-}

package/src/ChurchCenterStatus/index.tsx

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

package/src/Collapse/Collapse.js

@@ -1,123 +0,0 @@
-// @flow
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { jsx } from '@emotion/react'
-import { useLayoutEffect, useRef, useState } from 'react'
-
-const transition = 'height 200ms ease-out'
-
-export type Props = {
-  children?: any,
-
-  /**
-   * 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) {
-      requestAnimationFrame(() => handleComplete())
-    }
-    node.addEventListener('transitionend', handleTransitionEnd)
-    return () => {
-      node.removeEventListener('transitionend', handleTransitionEnd)
-    }
-  }, [open])
-
-  return (
-    <div
-      ref={ref}
-      css={{
-        transition: instantRender ? undefined : transition,
-        visibility: open ? 'visible' : 'hidden',
-      }}
-      {...restProps}
-    >
-      {renderChildren ? children : null}
-    </div>
-  )
-}
-
-export default Collapse

package/src/Collapse/Collapse.mdx

@@ -1,26 +0,0 @@
----
-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/Collapse.test.tsx

@@ -1,42 +0,0 @@
-import React, { useState } from 'react'
-import { render, screen } from '@testing-library/react'
-import { isInaccessible } from '@testing-library/dom'
-import userEvent from '@testing-library/user-event'
-import '@testing-library/jest-dom/extend-expect'
-import { Box, Button, Collapse } from '..'
-
-describe('Collapse', () => {
-  describe('Render children', () => {
-    const Component = () => {
-      const [open, setOpen] = useState(false)
-      return (
-        <Box>
-          <Button data-testid="toggle" onClick={() => setOpen(!open)}>
-            Toggle
-          </Button>
-          <Collapse open={open}>
-            <Button data-testid="child" />
-          </Collapse>
-        </Box>
-      )
-    }
-
-    it('should render collapsed children', () => {
-      render(<Component />)
-      expect(screen.getByTestId('child')).toBeInTheDocument()
-    })
-
-    it('should hide children from accessibility tree when collapsed', () => {
-      render(<Component />)
-      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false)
-      expect(isInaccessible(screen.getByTestId('child'))).toBe(true)
-    })
-
-    it('should include children in accessibility tree when open', () => {
-      render(<Component />)
-      userEvent.click(screen.getByTestId('toggle'))
-      expect(isInaccessible(screen.getByTestId('toggle'))).toBe(false)
-      expect(isInaccessible(screen.getByTestId('child'))).toBe(false)
-    })
-  })
-})

package/src/Collapse/index.js

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

package/src/ColumnView/ColumnView.js

@@ -1,65 +0,0 @@
-// @flow
-import React, { Children } from 'react'
-
-import StackView from '../StackView'
-import { spacingValue } from '../system'
-
-function Column() {
-  return null
-}
-
-export type Props = {
-  /** Often wraps the `ColumnView.Column` component. */
-  children?: any,
-  /** 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 | string,
-}
-
-function ColumnView(props: Props) {
-  const { children, sizes = [], spacing, ...restProps } = props
-  const parsedSpacing = spacingValue(spacing)
-  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 : parsedSpacing}
-            spacing={parsedSpacing}
-          >
-            {column.map((cell) => cell.props.children)}
-          </StackView>
-        )
-      })}
-    </StackView>
-  )
-}
-
-ColumnView.Column = Column
-
-export default ColumnView

package/src/ColumnView/ColumnView.mdx

@@ -1,40 +0,0 @@
----
-title: ColumnView
-category: Layout
-summary: Place children into different sized columns.
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```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

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

package/src/Combobox/Combobox.js

@@ -1,35 +0,0 @@
-// @flow
-import React from 'react'
-
-import Box from '../Box'
-import { ItemList } from '../ItemList'
-import { useThemeProps } from '../system'
-
-type ComboboxProps = {
-  /**
-   * Usually takes `Combobox.Input`, `Combobox.Items` and `Combobox.Item` components.
-   */
-  children: any,
-  onSelect: Function,
-  selectedValue: any,
-}
-
-function Combobox(props: ComboboxProps) {
-  const {
-    children,
-    multiple,
-    onSelect,
-    selectedValue,
-    ...restProps
-  } = useThemeProps('combobox', props)
-  return (
-    <ItemList
-      selected={(item) => item.value === selectedValue}
-      onSelect={onSelect}
-    >
-      <Box {...restProps}>{children}</Box>
-    </ItemList>
-  )
-}
-
-export default Combobox