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

package/src/Sortable/SortableList.js

@@ -1,115 +0,0 @@
-// @flow
-import React, { Children } from 'react'
-
-import Box from '../Box'
-import DragDrop from '../DragDrop'
-import GridView from '../GridView'
-import HeadingUppercase from '../HeadingUppercase'
-import { cloneChildren } from '../utils'
-
-import { SORTABLE_TYPE } from './constants'
-import SortableEmpty from './SortableEmpty'
-import { SORTABLE_ITEM_DISPLAY_NAME } from './SortableItem'
-
-function SortableList({
-  children,
-  disabled,
-  emptyText,
-  id,
-  onItemRemoveRequest,
-  title,
-  readOnly,
-  ...restProps
-}: {
-  children: mixed,
-  disabled?: boolean,
-  emptyText?: string,
-  id: number,
-  onItemRemoveRequest?: () => null,
-  readOnly?: boolean,
-  title?: string,
-}) {
-  const childCount = Children.count(children)
-  return (
-    <Box {...restProps}>
-      {title && (
-        <HeadingUppercase
-          padding={1}
-          backgroundColor="surfaceSecondary"
-          borderBottomWidth={1}
-          borderBottomColor="separatorTertiary"
-        >
-          {title}
-        </HeadingUppercase>
-      )}
-      <DragDrop.Droppable
-        type={SORTABLE_TYPE}
-        isDropDisabled={disabled || readOnly}
-        droppableId={id}
-      >
-        {(provided, snapshot) => (
-          <GridView
-            innerRef={provided.innerRef}
-            minHeight={5}
-            backgroundColor="surfaceSecondary"
-            position="relative"
-            css={
-              emptyText && childCount <= 0
-                ? {
-                    '[data-rbd-placeholder-context-id]': {
-                      column: 1,
-                      row: 1,
-                    },
-                  }
-                : undefined
-            }
-            {...provided.droppableProps}
-          >
-            {emptyText && childCount <= 0 && (
-              <SortableEmpty
-                emptyText={emptyText}
-                isDraggingOver={snapshot.isDraggingOver}
-              />
-            )}
-            {cloneChildren(children, (child, { index }) => {
-              const childProps = {
-                pointerEvents: snapshot.isDraggingOver ? 'none' : undefined,
-              }
-
-              if (index !== 0) {
-                childProps.borderTopWidth = 1
-                childProps.borderTopColor = 'separatorTertiary'
-              }
-
-              if (
-                child &&
-                child.type.displayName === SORTABLE_ITEM_DISPLAY_NAME
-              ) {
-                childProps.index = index
-                if (
-                  !readOnly &&
-                  !snapshot.isDraggingOver &&
-                  (onItemRemoveRequest || child.props.onRemoveRequest)
-                ) {
-                  childProps.onRemoveRequest = (e) => {
-                    const itemPayload = { id, index }
-                    if (onItemRemoveRequest) {
-                      onItemRemoveRequest(itemPayload, e)
-                    }
-                    if (child.props.onRemoveRequest) {
-                      child.props.onRemoveRequest(itemPayload, e)
-                    }
-                  }
-                }
-              }
-              return childProps
-            })}
-            {provided.placeholder}
-          </GridView>
-        )}
-      </DragDrop.Droppable>
-    </Box>
-  )
-}
-
-export default SortableList

package/src/Sortable/SortableManager.js

@@ -1,20 +0,0 @@
-import React from 'react'
-
-import Box from '../Box'
-import DragDrop from '../DragDrop'
-
-export default ({
-  children,
-  onDragStart,
-  onDragUpdate,
-  onDragEnd,
-  ...restProps
-}) => (
-  <DragDrop.Provider
-    onDragStart={onDragStart}
-    onDragUpdate={onDragUpdate}
-    onDragEnd={(props) => props.destination && onDragEnd(props)}
-  >
-    <Box {...restProps}>{children}</Box>
-  </DragDrop.Provider>
-)

package/src/Sortable/constants.js

@@ -1 +0,0 @@
-export const SORTABLE_TYPE = 'SORTABLE_LIST'

package/src/Sortable/index.js

@@ -1,32 +0,0 @@
-import SortableItem from './SortableItem'
-import SortableList from './SortableList'
-import SortableManager from './SortableManager'
-
-const insert = ({ fromList, fromIndex, toList, toIndex }) => {
-  const result = Array.from(toList)
-  const [removed] = Array.from(fromList).splice(fromIndex, 1)
-  result.splice(toIndex, 0, removed)
-  return result
-}
-
-const remove = ({ list, index }) => {
-  const result = Array.from(list)
-  result.splice(index, 1)
-  return result
-}
-
-const reorder = ({ list, startIndex, endIndex }) => {
-  const result = Array.from(list)
-  const [removed] = result.splice(startIndex, 1)
-  result.splice(endIndex, 0, removed)
-  return result
-}
-
-export default {
-  SortableItem,
-  SortableList,
-  SortableManager,
-  insert,
-  remove,
-  reorder,
-}

package/src/Spinner/Spinner.mdx

@@ -1,50 +0,0 @@
----
-title: Spinner
-category: Indicators
-propsSummary: Accepts [Box](/box) props.
-themeKey: spinner
----
-
-```jsx live
-render(
-  <StackView axis="horizontal" spacing={1}>
-    {['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => (
-      <Spinner key={size} size={size} color="primary" />
-    ))}
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <StackView axis="horizontal" spacing={1}>
-    <Spinner size="sm" thickness={1} color="primary" />
-    <Spinner size="sm" thickness={4} color="primary" />
-    <Spinner size="sm" thickness={8} color="primary" />
-    <Spinner size={3} thickness={1} color="primary" />
-    <Spinner size="24px" thickness={4} color="primary" />
-    <Spinner size="lg" thickness={8} color="primary" />
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <ThemeProvider
-    theme={{
-      spinner: {
-        color: 'foregroundTertiary',
-        sizes: { sm: 4, md: 6, lg: 8 },
-        thickness: { sm: 1, md: 1, lg: 1 },
-        trackColor: 'surfaceTertiary',
-      },
-    }}
-  >
-    <StackView axis="horizontal" spacing={1}>
-      {['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'].map((size) => (
-        <Spinner key={size} size={size} color="primary" />
-      ))}
-    </StackView>
-  </ThemeProvider>
-)
-```

package/src/Spinner/Spinner.tsx

@@ -1,101 +0,0 @@
-import React from 'react'
-import { keyframes } from '@emotion/react'
-
-import { Box } from '../Box'
-import { useThemeProps } from '../system'
-import { StyleProps } from '../index'
-
-const rotate = keyframes({
-  '100%': { transform: 'rotate(360deg)' },
-})
-
-const rotateCentered = keyframes({
-  '100%': { transform: 'translate(-50%, -50%) rotate(360deg)' },
-})
-
-export type SpinnerProps = {
-  /**
-   * Uses position absolute and transforms to position in the center of a relative parent.
-   */
-  center?: boolean
-
-  /**
-   * Primary color of spinner.
-   */
-  color?: string
-
-  /**
-   * Size of spinner.
-   */
-  size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | number | string
-
-  /**
-   * Thickness of spinner.
-   */
-  thickness?: number
-
-  /**
-   * Secondary color of spinner.
-   */
-  trackColor?: string
-} & StyleProps & React.HTMLAttributes<HTMLElement>
-
-export function Spinner({
-  center,
-  size = 'md',
-  thickness,
-  ...props
-}: SpinnerProps) {
-  const {
-    color,
-    sizes,
-    thickness: sizeThickness,
-    trackColor,
-    ...restProps
-  } = useThemeProps('spinner', props)
-
-  const boxProps: any = {
-    inline: true,
-    alignSelf: 'center',
-    verticalAlign: 'middle',
-    radius: 'circle',
-    borderColor: trackColor,
-    borderTopColor: color,
-  }
-
-  const sizeValue = sizes[size] || size
-  const thicknessValue = thickness || sizeThickness[size]
-
-  const boxSizeStyles = {
-    borderWidth: thicknessValue,
-    height: sizeValue,
-    width: sizeValue,
-  }
-
-  if (process.env.NODE_ENV !== 'production') {
-    const width =
-      typeof sizeValue === 'number'
-        ? sizeValue * 8
-        : sizeValue.includes('px')
-        ? parseInt(sizeValue)
-        : null
-    const spinnerRadius = width && width / 2
-    if (spinnerRadius && thicknessValue > spinnerRadius)
-      console.warn(
-        `The thickness value (${thicknessValue}px) of this spinner is larger than the radius (${spinnerRadius}px), this will distort the rendered size.`
-      )
-  }
-
-  if (center) {
-    boxProps.position = 'absolute'
-    boxProps.left = '50%'
-    boxProps.top = '50%'
-    boxProps.transform = 'translate(-50%, -50%) rotate(0deg)'
-    boxProps.animation = `${rotateCentered} 500ms infinite linear`
-  } else {
-    boxProps.transform = 'rotate(0deg)'
-    boxProps.animation = `${rotate} 500ms infinite linear`
-  }
-
-  return <Box {...boxProps} {...boxSizeStyles} {...restProps} />
-}

package/src/Spinner/index.tsx

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

package/src/StackView/StackView.mdx

@@ -1,155 +0,0 @@
----
-title: StackView
-category: Layout
-summary: Lay out children in either a column or row. Wraps flexbox styles in a simple API inspired by Apple's UIStackView.
-propsSummary: Accepts all valid HTML attributes.
----
-
-```jsx live
-const highlight = '0px 0px 0px 2px white, 0px 0px 0px 4px hotpink'
-const defaultItem = { grow: 1 }
-const Item = ({ selected, ...restProps }) => (
-  <Box
-    minHeight={4}
-    backgroundColor="blue-5"
-    boxShadow={selected ? highlight : undefined}
-    {...restProps}
-  />
-)
-render(() => {
-  const [items, setItems] = React.useState([
-    defaultItem,
-    defaultItem,
-    defaultItem,
-  ])
-  const [selectedIndex, setSelectedIndex] = React.useState(null)
-  const selectedItemProps = items[selectedIndex] || {}
-  const setItem = (value) => {
-    const nextItems = [...items]
-    nextItems[selectedIndex] = {
-      ...nextItems[selectedIndex],
-      ...value,
-    }
-    setItems(nextItems)
-  }
-  return (
-    <StackView width="100%" padding={4} spacing={2}>
-      <StackView axis="horizontal" alignment="center" spacing={2}>
-        <StackView
-          axis="horizontal"
-          grow={1}
-          padding={2}
-          spacing={2}
-          backgroundColor="blue-0"
-        >
-          {items.map((itemProps, index) => (
-            <Item
-              key={index}
-              selected={selectedIndex === index}
-              onClick={(event) => {
-                event.stopPropagation()
-                setSelectedIndex(index)
-              }}
-              {...itemProps}
-            />
-          ))}
-        </StackView>
-      </StackView>
-      {selectedIndex === null ? (
-        <StackView
-          alignSelf="center"
-          axis="horizontal"
-          alignment="center"
-          spacing={1}
-        >
-          <Text>Select a cell above to edit or add a new one</Text>
-          <Button
-            size="xs"
-            title="Add item"
-            icon="general.plus"
-            onClick={() => setItems([...items, defaultItem])}
-          />
-        </StackView>
-      ) : (
-        <StackView
-          axis="horizontal"
-          alignment="center"
-          distribution="space-between"
-        >
-          <Text shrink={0} weight={600}>
-            Cell {selectedIndex}
-          </Text>
-          <Field label="Grow" inline width="auto">
-            <NumberField
-              value={selectedItemProps.grow || 0}
-              onChange={(value) => setItem({ grow: value })}
-            />
-          </Field>
-          <Field label="Shrink" inline width="auto">
-            <NumberField
-              value={selectedItemProps.shrink || 0}
-              onChange={(value) => setItem({ shrink: value })}
-            />
-          </Field>
-          <Field label="Basis" inline width="auto">
-            <NumberField
-              value={selectedItemProps.basis || 0}
-              onChange={(value) => setItem({ basis: value })}
-            />
-          </Field>
-          <Button
-            title="Deselect"
-            size="xs"
-            onClick={() => setSelectedIndex(null)}
-          />
-        </StackView>
-      )}
-    </StackView>
-  )
-})
-```
-
-```jsx live
-render(
-  <StackView axis="horizontal" spacing={2}>
-    {[1, 2, 3].map((index) => (
-      <Box
-        key={index}
-        padding={1}
-        radius={3}
-        backgroundColor="blue-5"
-        color="white"
-      >
-        Cell {index}
-      </Box>
-    ))}
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <StackView spacing={<Divider color="blue-5" />}>
-    {[1, 2, 3].map((index) => (
-      <Box key={index} padding={1}>
-        Cell {index}
-      </Box>
-    ))}
-  </StackView>
-)
-```
-
-## Setting Axis, Alignment and Distribution
-
-The standard way of defining these flex settings is via props, but they can appear as:
-
-- `StackView.BASELINE`
-- `StackView.CENTER`
-- `StackView.END`
-- `StackView.FILL`
-- `StackView.HORIZONTAL`
-- `StackView.SPACE_BETWEEN`
-- `StackView.SPACE_EVENLY`
-- `StackView.START`
-- `StackView.STRETCH`
-- `StackView.VERTICAL`

package/src/StackView/StackView.tsx

@@ -1,124 +0,0 @@
-/** @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 { joinChildren } from '../utils'
-import { useVariant } from '../VariantProvider'
-
-const BASELINE = 'baseline'
-const CENTER = 'center'
-const END = 'end'
-const FILL = 'fill'
-const HORIZONTAL = 'horizontal'
-const SPACE_EVENLY = 'space-evenly'
-const SPACE_BETWEEN = 'space-between'
-const START = 'start'
-const STRETCH = 'stretch'
-const VERTICAL = 'vertical'
-
-const stackViewPlugin = {
-  styleProps: ['alignment', 'axis', 'distribution', 'spacing'],
-  getStyles({ inline, alignment, axis, distribution, spacing, ...styles }) {
-    if (axis && styles.flexDirection === undefined) {
-      styles.flexDirection = axis === HORIZONTAL ? 'row' : 'column'
-    }
-    if (alignment && styles.alignItems === undefined) {
-      styles.alignItems = alignment
-    }
-    if (distribution === FILL) {
-      styles['& > *'] = { flex: '1 0 0px' }
-    } else if (styles.justifyContent === undefined) {
-      styles.justifyContent = distribution
-    }
-    if (typeof spacing === 'number' || typeof spacing === 'string') {
-      styles.gap = spacingValue(spacing)
-    }
-    return styles
-  },
-}
-
-export type StackViewProps = {
-  children?: any
-  
-  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
-  as?: any
-
-  /** The axis along which children are laid out. */
-  axis?: 'horizontal' | 'vertical'
-
-  /** The alignment of children perpendicular to the stack view’s main axis. */
-  alignment?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
-
-  /** The distribution of children along the main axis. */
-  distribution?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'fill'
-    | 'space-between'
-    | 'space-evenly'
-
-  /**  If true, sets `display: inline-flex`, otherwise it defaults to `display: flex` */
-  inline?: boolean
-
-  /** Gain access to the internal ref */
-  innerRef?: any
-
-  /** The amount of space or element that is inserted between each child. */
-  spacing?: number | string | React.ReactNode
-
-  /** 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> &
-  StackViewProps &
-  MediaQueries<StackViewProps> &
-  Variants<StackViewProps>
-
-const defaultElement = 'div'
-
-export function StackView({ as, children, inline, innerRef, ...props }: Props) {
-  const Element: React.ElementType = as || defaultElement
-  const variant = useVariant()
-  const childrenToRender =
-    Element === 'textarea'
-      ? undefined
-      : typeof props.spacing === 'object'
-      ? joinChildren(children, props.spacing)
-      : children
-  return (
-    <Element
-      ref={innerRef}
-      {...splitStyles({
-        display: inline ? 'inline-flex' : 'flex',
-        axis: VERTICAL,
-        plugin: stackViewPlugin,
-        variant,
-        ...props,
-      })}
-    >
-      {childrenToRender}
-    </Element>
-  )
-}
-
-StackView.BASELINE = BASELINE
-StackView.CENTER = CENTER
-StackView.END = END
-StackView.FILL = FILL
-StackView.HORIZONTAL = HORIZONTAL
-StackView.SPACE_BETWEEN = SPACE_BETWEEN
-StackView.SPACE_EVENLY = SPACE_EVENLY
-StackView.START = START
-StackView.STRETCH = STRETCH
-StackView.VERTICAL = VERTICAL

package/src/StackView/index.ts

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

package/src/StepperField/StepperField.js

@@ -1,77 +0,0 @@
-// @flow
-import React from 'react'
-
-import Button from '../Button'
-import { useBoxSize, useThemeProps } from '../system'
-import NumberField from '../NumberField'
-import StackView from '../StackView'
-
-type Props = {
-  /**
-   * The current value of the stepper.
-   */
-  value?: number,
-  /**
-   * Minimum number that can be selected.
-   */
-  min?: number,
-  /**
-   * Maximum number that can be selected.
-   */
-  max?: number,
-  /**
-   * Specifies the size of each movement when incrementing/decrementing the value. Defaults to `1`.
-   */
-  step?: number,
-  /**
-   * Called when incrementing/decrementing the value.
-   */
-  onChange?: Function,
-}
-
-function StepperField({
-  min = -Infinity,
-  max = Infinity,
-  onChange,
-  step = 1,
-  value,
-  ...restProps
-}: Props) {
-  const { size = 'md', ...themeProps } = useThemeProps(
-    'stepperField',
-    restProps
-  )
-
-  const { fontSize, paddingHorizontal, navigateSize } = useBoxSize(size)
-
-  return (
-    <StackView axis="horizontal" fontSize={fontSize} {...themeProps}>
-      <Button
-        size={size}
-        title={`Decrement by ${step}`}
-        icon={{ name: 'general.minus', size: navigateSize(size, -1) }}
-        disabled={value <= min}
-        onClick={() => onChange(Math.max(value - step, min))}
-      />
-      <NumberField
-        fontSize="inherit"
-        paddingHorizontal={paddingHorizontal}
-        min={min}
-        max={max}
-        step={step}
-        size={size}
-        value={value}
-        onChange={onChange}
-      />
-      <Button
-        size={size}
-        title={`Increment by ${step}`}
-        icon={{ name: 'general.plus', size: navigateSize(size, -1) }}
-        disabled={value >= max}
-        onClick={() => onChange(Math.min(value + step), max)}
-      />
-    </StackView>
-  )
-}
-
-export default StepperField