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

package/src/Sortable/SortableList.js

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

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

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

package/src/Sortable/index.js

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

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

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

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

package/src/StackView/StackView.mdx

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

@@ -0,0 +1,126 @@
+/** @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<E extends React.ElementType = React.ElementType> = {
+  /** Render custom component or HTML element tag. (Defaults to a `<div>` element). */
+  as?: E
+
+  /** 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 content of the StackView. */
+  children?: React.ReactNode
+
+  /** 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?: React.Ref<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
+
+const defaultElement = 'div'
+
+export const StackView = <E extends React.ElementType = 'div'>({
+  as,
+  children,
+  inline,
+  innerRef,
+  ...props
+}: StackViewProps<E> &
+  Omit<React.ComponentPropsWithoutRef<E>, keyof StackViewProps<E>>) => {
+  const variant = useVariant()
+  const Element: React.ElementType = as || defaultElement
+
+  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

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

package/src/StepperField/StepperField.mdx

@@ -0,0 +1,21 @@
+---
+title: StepperField
+category: Forms
+summary: Number input used to collect numeric information from users with increment/decrement buttons.
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: stepperField
+---
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(1)
+  return (
+    <StepperField
+      min={0}
+      max={10}
+      value={value}
+      onChange={(value) => setValue(value)}
+    />
+  )
+})
+```