@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.2

package/src/Dialog/Dialog.test.tsx

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

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

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

package/src/Divider/Divider.mdx

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

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

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

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,
-}