@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/src/Dialog/Dialog.test.tsx

@@ -0,0 +1,221 @@
+import React from 'react'
+import { Dialog } from '../'
+import { render, screen } from '@testing-library/react'
+
+describe('Dialog', () => {
+  describe('visual props', () => {
+    it('should set the title', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+        />
+      )
+      const title = screen.getByRole('heading', { level: 1, hidden: true })
+      expect(title.textContent).toBe('Test Dialog Title')
+    })
+
+    it('should not render a subtitle when omitted', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+        />
+      )
+      expect(
+        screen.queryByRole('heading', { level: 2, hidden: true })
+      ).toBeNull()
+    })
+
+    it('should set the subtitle', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          subtitle="Test Dialog Subtitle"
+        />
+      )
+      const subtitle = screen.getByRole('heading', { level: 2, hidden: true })
+      expect(subtitle.textContent).toBe('Test Dialog Subtitle')
+    })
+
+    it('should set the body with a string', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="this is the body"
+        />
+      )
+      expect(screen.getByText('this is the body')).not.toBeNull()
+    })
+
+    it('should set the body with a node', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body={
+            <>
+              <div data-testid="test-div">test div</div>
+              <p data-testid="test-p">test paragraph</p>
+            </>
+          }
+        />
+      )
+      expect(screen.getByTestId('test-div').textContent).toBe('test div')
+      expect(screen.getByTestId('test-p').textContent).toBe('test paragraph')
+    })
+
+    it('should have a Done button by default', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+        />
+      )
+      expect(screen.getByText('Done')).not.toBeNull()
+    })
+
+    it('should set the confirm button text', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          confirmText="Confirm"
+        />
+      )
+      expect(screen.getByText('Confirm')).not.toBeNull()
+    })
+
+    it('should not show a cancel or delete button by default', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+        />
+      )
+      expect(screen.queryByText('Cancel')).toBeNull()
+      expect(screen.queryByText('Delete')).toBeNull()
+      expect(screen.queryAllByRole('button', { hidden: true })).toHaveLength(2)
+    })
+
+    it('shows a cancel button when showCancel is true', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showCancel
+        />
+      )
+      expect(screen.getByText('Cancel')).not.toBeNull()
+    })
+
+    it('sets the cancel button text', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showCancel
+          cancelText="Abort"
+        />
+      )
+      expect(screen.getByText('Abort')).not.toBeNull()
+    })
+
+    it('shows a delete button when showDestroy is true', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showDestroy
+        />
+      )
+      expect(screen.getByText('Delete')).not.toBeNull()
+    })
+
+    it('sets the delete button text', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showDestroy
+          destroyText="Destroy"
+        />
+      )
+      expect(screen.getByText('Destroy')).not.toBeNull()
+    })
+
+    it('shows all the buttons with proper config', () => {
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showCancel
+          showDestroy
+        />
+      )
+      expect(screen.getByText('Done')).not.toBeNull()
+      expect(screen.getByText('Cancel')).not.toBeNull()
+      expect(screen.getByText('Delete')).not.toBeNull()
+      expect(screen.queryAllByRole('button', { hidden: true })).toHaveLength(4)
+    })
+  })
+
+  describe('callbacks', () => {
+    it('calls onConfirmClick when the confirm button is clicked', () => {
+      const onConfirmClick = jest.fn()
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          onConfirmClick={onConfirmClick}
+        />
+      )
+      screen.getByText('Done').click()
+      expect(onConfirmClick).toHaveBeenCalled()
+    })
+
+    it('calls onCancelClick when the cancel button is clicked', () => {
+      const onCancelClick = jest.fn()
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showCancel
+          onCancelClick={onCancelClick}
+        />
+      )
+      screen.getByText('Cancel').click()
+      expect(onCancelClick).toHaveBeenCalled()
+    })
+
+    it('calls onDestroyClick when the delete button is clicked', () => {
+      const onDestroyClick = jest.fn()
+      render(
+        <Dialog
+          dialogRef={React.createRef()}
+          title="Test Dialog Title"
+          body="body"
+          showDestroy
+          onDestroyClick={onDestroyClick}
+        />
+      )
+      screen.getByText('Delete').click()
+      expect(onDestroyClick).toHaveBeenCalled()
+    })
+  })
+})

package/src/Dialog/Dialog.tsx

@@ -0,0 +1,168 @@
+/** @jsx jsx */
+import React from 'react'
+import { jsx } from '@emotion/react'
+import { Button, StackView, Heading, Divider, Box } from '../.'
+
+export type DialogProps = {
+  /**
+   * Body of the dialog to display in the main content area.
+   */
+  body: React.ReactNode | string
+
+  /**
+   * Text to display on the cancel button.
+   */
+  cancelText?: string
+
+  /**
+   * Text to display on the confirm button.
+   */
+  confirmText?: string
+
+  /**
+   * Text to display on the destroy button.
+   */
+  destroyText?: string
+
+  /**
+   * Create with the `React.useRef()` hook and pass the ref to the dialog.
+   */
+  dialogRef: React.MutableRefObject<HTMLDialogElement>
+
+  /**
+   * Callback fired when the cancel button is clicked.
+   */
+  onCancelClick?: () => void
+
+  /**
+   * Callback fired when the close (X) button is clicked.
+   */
+  onCloseClick?: () => void
+
+  /**
+   * Callback fired when the confirm button is clicked.
+   */
+  onConfirmClick?: () => void
+
+  /**
+   * Callback fired when the destroy button is clicked.
+   */
+  onDestroyClick?: () => void
+
+  /**
+   * Determines whether the cancel button is shown.
+   */
+  showCancel?: boolean
+
+  /**
+   * Determines whether the destroy button is shown.
+   */
+  showDestroy?: boolean
+
+  /**
+   * Subtitle of the dialog to display in the header. No subtitle appears if omitted.
+   */
+  subtitle?: string
+
+  /**
+   * Title of the dialog to display in the header.
+   */
+  title: string
+}
+
+const dialogStyles = {
+  padding: 0,
+  minWidth: '400px',
+  borderRadius: '8px',
+  border: 'none',
+  boxShadow: '0px 0px 20px 0px hsla(0, 0%, 0%, 0.15)',
+  '&::backdrop': {
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+  },
+}
+
+export const Dialog = ({
+  body,
+  cancelText = 'Cancel',
+  confirmText = 'Done',
+  destroyText = 'Delete',
+  dialogRef,
+  onCancelClick = () => dialogRef.current.close(),
+  onCloseClick = () => dialogRef.current.close(),
+  onConfirmClick = () => dialogRef.current.close(),
+  onDestroyClick = () => dialogRef.current.close(),
+  showCancel = false,
+  showDestroy = false,
+  subtitle = '',
+  title,
+}: DialogProps): JSX.Element => {
+  return (
+    <dialog ref={dialogRef} css={dialogStyles}>
+      <Box paddingTop={3} paddingHorizontal={4}>
+        <StackView axis="horizontal" distribution="space-between">
+          <Heading
+            level={1}
+            margin={0}
+            fontSize="25px"
+            lineHeight="35px"
+            weight={500}
+          >
+            {title}
+          </Heading>
+          <Button
+            title="Close"
+            icon={{ name: 'general.x', color: 'grey-7' }}
+            radius="circle"
+            height={4}
+            width={4}
+            variant="naked"
+            onClick={onCloseClick}
+          />
+        </StackView>
+        {subtitle && (
+          <Heading
+            level={2}
+            fontSize="16px"
+            lineHeight="26px"
+            weight={500}
+            color="grey-8"
+          >
+            {subtitle}
+          </Heading>
+        )}
+      </Box>
+      <Box padding={4}>{body}</Box>
+      <Divider />
+      <Box paddingVertical={3} paddingHorizontal={4}>
+        <StackView axis="horizontal" distribution="space-between">
+          {showDestroy ? (
+            <Button
+              onClick={onDestroyClick}
+              title={destroyText}
+              theme="error"
+              variant="outline"
+            />
+          ) : (
+            <Box />
+          )}
+          <StackView axis="horizontal" spacing={2}>
+            {showCancel && (
+              <Button
+                title={cancelText}
+                variant="naked"
+                onClick={onCancelClick}
+              />
+            )}
+            <Button
+              title={confirmText}
+              onClick={onConfirmClick}
+              theme="primary"
+            />
+          </StackView>
+        </StackView>
+      </Box>
+    </dialog>
+  )
+}
+
+export default Dialog

package/src/Dialog/index.ts

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

package/src/Divider/Divider.mdx

@@ -0,0 +1,43 @@
+---
+title: Divider
+category: General
+propsSummary: Accepts [Box](/box) props.
+---
+
+```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, StyleProps } 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
+} & StyleProps
+
+/**
+ * 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,216 @@
+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,
+}