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

package/src/DragDrop/DragDrop.js

@@ -1,216 +0,0 @@
-import React, {
-  Children,
-  Fragment,
-  createElement,
-  createContext,
-  useContext,
-  useEffect,
-} from 'react'
-import { createPortal } from 'react-dom'
-import * as RBDND from '@planningcenter/react-beautiful-dnd'
-import mitt from 'mitt'
-import { getThemeDataAttribute } from '../ThemeProvider/styles'
-import { useThemeValue } from '../system'
-
-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()
-  const themeId = useThemeValue('id')
-  if (typeof document !== 'undefined' && portalNode === null) {
-    portalNode = document.createElement('div')
-    portalNode.id = 'rbd-portal'
-    portalNode.className = 'tapestry-react-reset'
-    portalNode.setAttribute(getThemeDataAttribute(themeId), 'true')
-    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

@@ -1,218 +0,0 @@
----
-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: 'general.outlinedLocationPin', name: 'Home' },
-  { icon: 'general.person', name: 'Profile' },
-  { icon: 'general.checkCircle', name: 'Check-In' },
-  { icon: 'general.twoPeople', name: 'Groups' },
-  { icon: 'general.calendar', name: 'Events' },
-  { icon: 'general.search', name: 'Search' },
-]
-function Item({
-  icon,
-  name,
-  type,
-  index,
-  onAdd,
-  onRemove,
-  hoverEnabled = true,
-  ...restProps
-}) {
-  const { hover, hoverProps } = hooks.useHover()
-  
-  const actions = {
-    add: {
-      icon: "general.plusCircle",
-      color: "success",
-      label: "Add",
-    },
-    remove: {
-      icon: "general.minusCircle",
-      color: "error",
-      label: "Remove",
-    }
-  }
-
-  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={actions.[type].label}
-        icon={{
-          name: actions.[type].icon,
-          color: actions.[type].color,
-        }}
-        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

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

package/src/Drawer/Drawer.js

@@ -1,96 +0,0 @@
-// @flow
-import React, {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
-
-import StackView from '../StackView'
-import { useThemeValue } from '../system'
-
-function DrawerContents({ shouldClose, onClose, ...restProps }) {
-  const themeProps = useThemeValue('drawer')
-  const ref = useRef(null)
-  const [show, setShow] = useState(false)
-
-  useEffect(() => {
-    const node = ref.current
-    let firstTransition = true
-    function handleTransitionEnd(event) {
-      if (event.target === node && event.propertyName === 'transform') {
-        if (firstTransition) {
-          firstTransition = false
-        } else {
-          onClose()
-        }
-      }
-    }
-    setShow(true)
-    node.addEventListener('transitionend', handleTransitionEnd)
-    return () => {
-      node.removeEventListener('transitionend', handleTransitionEnd)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (shouldClose) {
-      setShow(false)
-    }
-  }, [shouldClose])
-
-  return (
-    <StackView
-      innerRef={ref}
-      width={52}
-      height="100%"
-      x={`${show ? 0 : 100}%`}
-      position="absolute"
-      bottom={0}
-      right={0}
-      zIndex={999}
-      boxShadow="-6px 0px 6px -4px rgba(150,150,150,0.25)"
-      backgroundColor="surfaceTertiary"
-      transition="transform 240ms ease-out"
-      {...themeProps}
-      {...restProps}
-    />
-  )
-}
-
-export type Props = {
-  /** Controls whether the drawer is visible or not. Won't render contents until open is `true`. */
-  open?: boolean,
-}
-
-function Drawer(props: Props) {
-  const { open, ...restProps } = props
-  const [localOpen, setLocalOpen] = useState(null)
-  const [shouldClose, setShouldClose] = useState(null)
-  const handleClose = useCallback(() => {
-    setLocalOpen(false)
-    setShouldClose(true)
-  }, [])
-
-  useLayoutEffect(() => {
-    if (open) {
-      setLocalOpen(true)
-      setShouldClose(false)
-    } else if (localOpen !== null) {
-      setShouldClose(true)
-    }
-  }, [open])
-
-  return (
-    localOpen && (
-      <DrawerContents
-        shouldClose={shouldClose}
-        onClose={handleClose}
-        {...restProps}
-      />
-    )
-  )
-}
-
-export default Drawer

package/src/Drawer/Drawer.mdx

@@ -1,51 +0,0 @@
----
-title: Drawer
-category: General
-summary: Use to add collapsible navigation items or content anchored to the right side of the screen.
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: drawer
----
-
-```jsx live
-render(() => {
-  const [open, setOpen] = React.useState(false)
-  const [saving, setSaving] = React.useState(false)
-  React.useEffect(() => {
-    if (saving) {
-      setTimeout(() => setSaving(false), 1000)
-    }
-  }, [saving])
-  return (
-    <StackView height={32}>
-      <Button title="Open Drawer" onClick={() => setOpen(true)} />
-      <Drawer open={open} width={32}>
-        <GridView
-          columns="auto 1fr auto"
-          alignment="center"
-          padding={1}
-          spacing={1}
-          backgroundColor="white"
-        >
-          <Button
-            title="close drawer"
-            icon={{ name: 'general.x', color: 'primary' }}
-            variant="naked"
-            onClick={() => setOpen(false)}
-          />
-          <Heading level={3} weight={700}>
-            Item Details
-          </Heading>
-          <Button
-            title="Save"
-            theme="primary"
-            spinner={saving}
-            onClick={() => setSaving(true)}
-          />
-        </GridView>
-        <Divider />
-        <StackView padding={2}>Drawer Content</StackView>
-      </Drawer>
-    </StackView>
-  )
-})
-```

package/src/Drawer/index.js

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