@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/DateField/DateField.js

@@ -0,0 +1,172 @@
+// @flow
+import React, { Component } from 'react'
+import { format } from 'date-fns'
+
+import Card from '../Card'
+import Calendar from '../Calendar'
+import FocusGroup from '../FocusGroup'
+import Icon from '../Icon'
+import Input from '../Input/Input'
+import Popover from '../Popover'
+import { generateId } from '../utils'
+
+export type DateFieldProps = {
+  /**
+   * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
+   */
+  formatValue: string,
+
+  /**
+   * Controls the initial Popover state: open or closed (default).
+   */
+  defaultOpen: boolean,
+
+  /**
+   * The minimum date that can be chosen.
+   */
+  minDate: Date,
+
+  /**
+   * The maximum date that can be chosen.
+   */
+  maxDate: Date,
+
+  /**
+   * Called when a date has been selected.
+   */
+  onChange: (date: Date) => null,
+
+  /**
+   * Determines where the popover is placed.
+   */
+  placement: string,
+
+  /**
+   * The date that will be selected.
+   */
+  value: Date,
+
+  /**
+   * Accepts any valid [Popover](/popover) props.
+   */
+  popoverProps?: object,
+}
+
+class DateField extends Component<DateFieldProps> {
+  canClosePopover = true
+
+  static defaultProps = {
+    defaultOpen: false,
+    lockScrollWhileOpen: true,
+    formatValue: 'MMMM dd, yyyy',
+  }
+
+  state = {
+    isPopoverOpen: this.props.defaultOpen,
+  }
+
+  id = generateId('datefield')
+
+  openPopover = () => {
+    this.setState({ isPopoverOpen: true })
+  }
+
+  closePopover = () => {
+    if (this.canClosePopover) {
+      this.setState({ isPopoverOpen: false })
+    }
+  }
+
+  togglePopover = () => {
+    if (this.state.isPopoverOpen) {
+      this.closePopover()
+    } else {
+      this.openPopover()
+    }
+  }
+
+  handleDateSelect = (date) => {
+    const input = this.inputWrapper.querySelector('input')
+    if (input.focus) {
+      input.focus()
+    }
+    if (this.props.onChange) {
+      this.props.onChange(date)
+    }
+    this.closePopover()
+  }
+
+  render() {
+    const {
+      formatValue,
+      defaultOpen,
+      keepInView,
+      lockScrollWhileOpen,
+      minDate,
+      maxDate,
+      onChange,
+      placement,
+      value,
+      popoverProps,
+      ...restProps
+    } = this.props
+    const { isPopoverOpen } = this.state
+    return (
+      <FocusGroup onBlur={this.closePopover}>
+        {({ requestBlur, setRef }) => (
+          <Popover
+            {...popoverProps}
+            ref={(component) => {
+              this.popover = component
+            }}
+            innerRef={(node) => {
+              setRef(`${this.id}-popover`)(node)
+            }}
+            as={Card}
+            tabIndex={-1}
+            elevation={2}
+            onBlur={requestBlur}
+            keepInView={keepInView}
+            lockScrollWhileOpen={lockScrollWhileOpen}
+            placement={placement}
+            open={isPopoverOpen}
+            onRequestClose={this.closePopover}
+            anchorElement={
+              <Input
+                innerRef={(node) => {
+                  this.inputWrapper = node
+                  setRef(`${this.id}-input`)(node)
+                }}
+                readOnly
+                value={value ? format(value, formatValue) : ''}
+                renderRight={
+                  <Icon name="calendar" color="foregroundTertiary" />
+                }
+                onClick={this.togglePopover}
+                onBlur={requestBlur}
+                onKeyDown={(event) => {
+                  if (event.key === ' ') {
+                    event.preventDefault()
+                    this.togglePopover()
+                  }
+                }}
+                {...restProps}
+              />
+            }
+          >
+            <Calendar
+              size="sm"
+              initialDate={value}
+              selected={value}
+              minDate={minDate}
+              maxDate={maxDate}
+              onDateSelect={this.handleDateSelect}
+            />
+          </Popover>
+        )}
+      </FocusGroup>
+    )
+  }
+}
+
+export default DateField

package/src/DateField/DateField.mdx

@@ -0,0 +1,17 @@
+---
+title: DateField
+category: Forms
+---
+
+```jsx live
+render(() => {
+  const [date, setDate] = React.useState(Calendar.TODAY)
+  return (
+    <DateField
+      minDate={Calendar.TODAY}
+      value={date}
+      onChange={(date) => setDate(date)}
+    />
+  )
+})
+```

package/src/DateField/index.js

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

package/src/Divider/Divider.mdx

@@ -0,0 +1,42 @@
+---
+title: Divider
+category: General
+---
+
+```jsx live
+render(
+  <StackView
+    axis="horizontal"
+    alignment="center"
+    spacing={<Divider axis="vertical" margin={1} color="grey-7" />}
+  >
+    <Link>One</Link>
+    <Link>Two</Link>
+    <Link>Three</Link>
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <Menu>
+    <Menu.Item>One</Menu.Item>
+    <Menu.Item>Two</Menu.Item>
+    <Divider margin={0.5} />
+    <Menu.Item>Three</Menu.Item>
+    <Menu.Item>Four</Menu.Item>
+    <Menu.Item>Five</Menu.Item>
+  </Menu>
+)
+```
+
+```jsx live
+render(
+  <Card spacing={<Divider />}>
+    <Card.Section subdued>
+      <HeadingUppercase>Card Heading</HeadingUppercase>
+    </Card.Section>
+    <Card.Section>Card Section</Card.Section>
+  </Card>
+)
+```

package/src/Divider/Divider.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+
+import Box from '../Box'
+import { BoxProps, ColorProp } from '../index'
+
+export type DividerProps = {
+  /**
+   * The direction the dividing line should span.
+   */
+  axis?: 'horizontal' | 'vertical'
+
+  /**
+   * The color of the line
+   */
+  color?: ColorProp
+
+  /**
+   * Controls the space on sides opposite to the line's defined axis
+   */
+  margin?: number | string
+
+  /**
+   * The size of the line in pixels
+   */
+  size?: number
+}
+
+/**
+ * Used to break up content
+ */
+export function Divider({
+  axis = 'horizontal',
+  color = 'separatorTertiary',
+  margin = 0,
+  size = 1,
+  ...restProps
+}: DividerProps) {
+  const props = {
+    as: 'div',
+    alignSelf: 'stretch',
+    backgroundColor: color,
+  } as BoxProps
+  if (axis === 'horizontal') {
+    props.height = size + 'px'
+    props.marginVertical = margin
+  } else {
+    props.width = size + 'px'
+    props.marginHorizontal = margin
+  }
+  return <Box {...props} {...restProps} />
+}

package/src/Divider/index.ts

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

package/src/DragDrop/DragDrop.js

@@ -0,0 +1,211 @@
+import React, {
+  Children,
+  Fragment,
+  createElement,
+  createContext,
+  useContext,
+  useEffect,
+} from 'react'
+import { createPortal } from 'react-dom'
+import * as RBDND from 'react-beautiful-dnd'
+import mitt from 'mitt'
+
+import StackView from '../StackView'
+
+const DragDropContext = createContext(false)
+const DroppableContext = createContext(false)
+const emitter = mitt()
+const draggableData = {}
+let portalNode = null
+let providerCount = 0
+
+function setDraggableData(id, data) {
+  draggableData[id] = data
+  return () => {
+    delete draggableData[id]
+  }
+}
+
+function useDragDrop() {
+  const hasParentDragDrop = useContext(DragDropContext)
+  return hasParentDragDrop
+}
+
+function Provider({ onDragStart, onDragEnd, ...props }) {
+  const hasParentDragDrop = useDragDrop()
+  if (typeof document !== 'undefined' && portalNode === null) {
+    portalNode = document.createElement('div')
+    portalNode.id = 'rbd-portal'
+    document.body.appendChild(portalNode)
+  }
+  useEffect(() => {
+    providerCount += 1
+    return () => {
+      providerCount -= 1
+      // last unmounting provider clears the portalNode
+      if (providerCount === 0) {
+        portalNode = null
+      }
+    }
+  }, [])
+  return hasParentDragDrop ? (
+    props.children
+  ) : (
+    <DragDropContext.Provider value={true}>
+      <RBDND.DragDropContext
+        onDragStart={(event) => {
+          const augmentedEvent = {
+            ...event,
+            data: draggableData[event.draggableId] || null,
+          }
+          emitter.emit('dragStart', augmentedEvent)
+          if (onDragStart) {
+            onDragStart(augmentedEvent)
+          }
+        }}
+        onDragEnd={(event) => {
+          const augmentedEvent = {
+            ...event,
+            data: draggableData[event.draggableId] || null,
+          }
+          emitter.emit('dragEnd', augmentedEvent)
+          if (onDragEnd) {
+            onDragEnd(augmentedEvent)
+          }
+        }}
+        {...props}
+      />
+    </DragDropContext.Provider>
+  )
+}
+
+function Droppable({
+  children,
+  sourceOnly,
+  onDragStart,
+  onDragEnd,
+  onDrop,
+  ...props
+}) {
+  useEffect(() => {
+    function handleDragStart(event) {
+      if (onDragStart && event.source.droppableId === props.droppableId) {
+        onDragStart(event)
+      }
+    }
+    emitter.on('dragStart', handleDragStart)
+    return () => {
+      emitter.off('dragStart', handleDragStart)
+    }
+  }, [onDragStart])
+  useEffect(() => {
+    function handleDragEnd(event) {
+      if (onDragEnd && event.source.droppableId === props.droppableId) {
+        onDragEnd(event)
+      }
+      if (
+        onDrop &&
+        event.destination &&
+        event.destination.droppableId === props.droppableId
+      ) {
+        onDrop(event)
+      }
+    }
+    emitter.on('dragEnd', handleDragEnd)
+    return () => {
+      emitter.off('dragEnd', handleDragEnd)
+    }
+  }, [onDragEnd, onDrop])
+  return (
+    <DroppableContext.Provider value={sourceOnly}>
+      <RBDND.Droppable isDropDisabled={sourceOnly} {...props}>
+        {(provided, snapshot) => {
+          if (sourceOnly) {
+            provided.placeholder = (
+              <div style={{ display: 'none' }}>{provided.placeholder}</div>
+            )
+          }
+          return children(provided, snapshot)
+        }}
+      </RBDND.Droppable>
+    </DroppableContext.Provider>
+  )
+}
+
+function Draggable({ children, placeholder, data, ...props }) {
+  const sourceOnly = useContext(DroppableContext)
+  useEffect(() => setDraggableData(props.draggableId, data), [data])
+  return (
+    <RBDND.Draggable {...props}>
+      {(provided, snapshot) => {
+        if (sourceOnly) {
+          provided.draggableProps.style = snapshot.isDragging
+            ? provided.draggableProps.style
+            : { transform: 'none', transition: 'none' }
+        }
+        const child = children(provided, snapshot)
+        return snapshot.isDragging ? (
+          <Fragment>
+            {createPortal(child, portalNode)}
+            {sourceOnly && placeholder && placeholder()}
+          </Fragment>
+        ) : (
+          child
+        )
+      }}
+    </RBDND.Draggable>
+  )
+}
+
+function StaticList({ children, variants: _variants, id, ...props }) {
+  const variants = {
+    item: (style) => style,
+    placeholder: { opacity: 0.5 },
+    ..._variants,
+  }
+  return (
+    <Droppable droppableId={id} isDropDisabled={true}>
+      {(provided) => (
+        <StackView innerRef={provided.innerRef} {...props}>
+          {Children.map(children, (child, index) => {
+            const { id, ...childProps } = child.props
+            return (
+              <Draggable key={child.key} draggableId={id} index={index}>
+                {(provided, snapshot) => (
+                  <Fragment>
+                    {createElement(child.type, {
+                      ...childProps,
+                      ...provided.draggableProps,
+                      ...provided.dragHandleProps,
+                      innerRef: provided.innerRef,
+                      style: variants.item(
+                        snapshot.isDragging
+                          ? provided.draggableProps.style
+                          : { transform: 'none', transition: 'none' },
+                        snapshot
+                      ),
+                    })}
+                    {snapshot.isDragging &&
+                      createElement(child.type, {
+                        ...childProps,
+                        ...variants.placeholder,
+                      })}
+                  </Fragment>
+                )}
+              </Draggable>
+            )
+          })}
+          <div style={{ display: 'none' }}>{provided.placeholder}</div>
+        </StackView>
+      )}
+    </Droppable>
+  )
+}
+
+export default {
+  Provider,
+  Droppable,
+  Draggable,
+  StaticList,
+  useDragDrop,
+}

package/src/DragDrop/DragDrop.mdx

@@ -0,0 +1,204 @@
+---
+title: DragDrop
+category: General
+summary: Custom components that wrap [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/). Uses the same API exported under `Provider`, `Droppable`, and `Draggable` components.
+---
+
+```jsx live
+const navigationItems = [
+  { icon: 'house', name: 'Home' },
+  { icon: 'person', name: 'Profile' },
+  { icon: 'checkmark-circle-filled', name: 'Check-In' },
+  { icon: 'people', name: 'Groups' },
+  { icon: 'calendar', name: 'Events' },
+  { icon: 'search', name: 'Search' },
+]
+function Item({
+  icon,
+  name,
+  type,
+  index,
+  onAdd,
+  onRemove,
+  hoverEnabled = true,
+  ...restProps
+}) {
+  const { hover, hoverProps } = hooks.useHover()
+  return (
+    <Card
+      axis="horizontal"
+      alignment="center"
+      marginBottom={1}
+      padding={1}
+      spacing={1}
+      elevation={1}
+      borderColor="transparent"
+      hover={hoverEnabled ? { borderColor: 'blue-5' } : {}}
+      {...hoverProps}
+      {...restProps}
+    >
+      <Icon name={icon} color="grey-7" />
+      <Text grow={1}>{name}</Text>
+      <Button
+        title={type === 'remove' ? 'Remove' : 'Add'}
+        icon={{
+          name: `${type}-circle-filled`,
+          color: type === 'remove' ? 'error' : 'success',
+        }}
+        variant="naked"
+        opacity={hover && hoverEnabled ? 1 : 0}
+        transform={`scale(${hover && hoverEnabled ? 1 : 0.9})`}
+        transition="all 280ms ease-out"
+        onClick={() => (type === 'remove' ? onRemove() : onAdd({ icon, name }))}
+      />
+    </Card>
+  )
+}
+function App() {
+  const [activeNavigationItems, setActiveNavigationItems] = React.useState(
+    navigationItems.slice(1, 3)
+  )
+  const filteredNavigationItems = navigationItems.filter((item) =>
+    activeNavigationItems.every((activeItem) => activeItem.name !== item.name)
+  )
+  return (
+    <DragDrop.Provider>
+      <GridView width="100%" columns="1fr 240px">
+        <StackView padding={6} spacing={2}>
+          <DragDrop.Droppable
+            droppableId="navigation"
+            onDrop={(event) => {
+              if (event.source.droppableId === 'static') {
+                setActiveNavigationItems(
+                  utils.insertAtIndex({
+                    list: activeNavigationItems,
+                    index: event.destination.index,
+                    value: filteredNavigationItems[event.source.index],
+                  })
+                )
+              } else {
+                setActiveNavigationItems(
+                  utils.reorderArray({
+                    list: activeNavigationItems,
+                    startIndex: event.source.index,
+                    endIndex: event.destination.index,
+                  })
+                )
+              }
+            }}
+          >
+            {(provided, snapshot) => (
+              <Card
+                innerRef={provided.innerRef}
+                subdued
+                minWidth={32}
+                paddingTop={1}
+                paddingHorizontal={1}
+              >
+                {activeNavigationItems.map((item, index) => (
+                  <DragDrop.Draggable
+                    key={item.name}
+                    draggableId={item.name}
+                    index={index}
+                  >
+                    {(provided, snapshot) => (
+                      <Item
+                        type="remove"
+                        innerRef={provided.innerRef}
+                        onRemove={() => {
+                          setActiveNavigationItems((activeNavigationItems) => {
+                            const nextItems = [...activeNavigationItems]
+                            nextItems.splice(index, 1)
+                            return nextItems
+                          })
+                        }}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        {...item}
+                      />
+                    )}
+                  </DragDrop.Draggable>
+                ))}
+                {provided.placeholder}
+              </Card>
+            )}
+          </DragDrop.Droppable>
+        </StackView>
+        <StackView padding={3} spacing={1} backgroundColor="grey-1">
+          <DragDrop.Droppable
+            droppableId="static"
+            onDragStart={console.log}
+            onDragEnd={console.log}
+            sourceOnly
+          >
+            {(provided) => (
+              <StackView innerRef={provided.innerRef}>
+                {filteredNavigationItems.map((item, index) => (
+                  <DragDrop.Draggable
+                    key={item.name}
+                    draggableId={item.name}
+                    index={index}
+                    placeholder={() => (
+                      <Item type="add" opacity={0.65} {...item} />
+                    )}
+                  >
+                    {(provided, snapshot) => (
+                      <Item
+                        type="add"
+                        innerRef={provided.innerRef}
+                        onAdd={(item) =>
+                          setActiveNavigationItems((activeNavigationItems) => [
+                            ...activeNavigationItems,
+                            item,
+                          ])
+                        }
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        {...item}
+                      />
+                    )}
+                  </DragDrop.Draggable>
+                ))}
+                {provided.placeholder}
+              </StackView>
+            )}
+          </DragDrop.Droppable>
+        </StackView>
+      </GridView>
+    </DragDrop.Provider>
+  )
+}
+render(<App />)
+```
+
+## Props
+
+Please refer to [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) for documentation on events and setting up drag and drop lists. In addition to the default functionality provided, we augment the library with the following props:
+
+### DragDrop.Droppable
+
+`onDragStart: (event) => void`
+
+Called at the start of a child `Draggable` drag.
+
+`onDragEnd: (event) => void`
+
+Called at the end of a child `Draggable` drag.
+
+`onDrop: (event) => void`
+
+This function will be called when a `Draggable` has been dropped. Returns the `onDragEnd` event with any `Draggable` `data` attached.
+
+`sourceOnly: boolean`
+
+This prop controls whether or not the droppable can receive and reorder draggables. If `true`, draggables may move outside the droppable, but not added.
+
+### DragDrop.Draggable
+
+`data: any`
+
+An additional `data` prop has been added to flow data more easily between components that will be attached to the `onDragEnd` and `onDrop` events.
+
+`placeholder: () => React.ReactNode`
+
+The `placeholder` prop allows a custom placeholder to be rendered when used in conjunction with the `sourceOnly` prop on `Droppable`.

package/src/DragDrop/index.js

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