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

package/src/Tooltip/Tooltip.js

@@ -0,0 +1,275 @@
+// @flow
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useRef,
+  useState,
+  useImperativeHandle,
+  useEffect,
+} from 'react'
+import mitt from 'mitt'
+
+import Popover from '../Popover'
+import { composeEvents, pageViewChange } from '../utils'
+import { useThemeProps } from '../system'
+
+export type Props = {
+  /**
+   * The child becomes the trigger for the tooltip, unless it is overridden with `popoverProps={{relativeTo: ref}}`.
+   */
+  children?: any,
+  /**
+   * The amount of time in milliseconds before the tooltip closes.
+   */
+  closeDelay: number,
+
+  /**
+   * Controls whether the Popover is rendered as open or closed.
+   */
+  defaultOpen: boolean,
+
+  /**
+   * The amount of time in milliseconds before the tooltip opens.
+   */
+  openDelay: number,
+
+  /**
+   * The title of the tooltip. Accepts a string or a React element.
+   */
+  title: any,
+
+  /**
+   * Reveals the tooltip when the cloned child receives focus.
+   */
+  triggerOnFocus: boolean,
+
+  /**
+   * Reveals the tooltip when the cloned child is hovered.
+   */
+  triggerOnHover: boolean,
+
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean,
+
+  /** 
+   * `'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end'`
+
+   * Where to place the popover. 
+  */
+  placement?: string,
+
+  /**
+   * Where to render the composed popover into. Accepts an HTML element or selector.
+   * Uses the closest fixed parent or `document.body` by default. This will only
+   * be computed once on initial render.
+   */
+  renderTo?: HTMLElement | string,
+
+  /**
+   * Accepts any valid [Popover](/popover) props.
+   */
+  popoverProps?: object,
+
+  /**
+   * Set a specific z-index for Tooltip. (defaults to `9999`)
+   * This option can be helpful in adjusting elements that overlap visually.
+   */
+  zIndex: number,
+
+  /**
+   * Passes props to [Popover](/popover)'s `anchorElement`.
+   */
+  childProps?: object,
+}
+
+const emitter = mitt()
+let globalTimeoutId = null
+let instantDelay = false
+
+function startGlobalTimeout() {
+  instantDelay = true
+  globalTimeoutId = setTimeout(() => {
+    instantDelay = false
+  }, 500)
+}
+
+function clearGlobalTimeout() {
+  clearTimeout(globalTimeoutId)
+}
+
+function Tooltip(props: Props, ref) {
+  const {
+    children,
+    openDelay = 500,
+    closeDelay = 300,
+    defaultOpen = false,
+    keepInView = true,
+    placement,
+    popoverProps,
+    renderTo,
+    title,
+    triggerOnFocus = true,
+    triggerOnHover = true,
+    zIndex = 9999,
+    ...childProps
+  } = useThemeProps('tooltip', props)
+
+  let isPageInView = useRef(true)
+  let isMouseDown = useRef(false)
+  let openTimeoutId = useRef(null)
+  let closeTimeoutId = useRef(null)
+
+  const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
+
+  useEffect(() => {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    const cleanupPageViewChange = pageViewChange((inView) =>
+      setTimeout(() => (isPageInView.current = inView))
+    )
+    emitter.on('CLOSE_OPEN_TOOLTIPS', close)
+    return () => {
+      emitter.off('CLOSE_OPEN_TOOLTIPS', close)
+      clearTimeout(openTimeoutId.current)
+      clearTimeout(closeTimeoutId.current)
+      cleanupPageViewChange()
+    }
+  }, [])
+
+  const open = () => {
+    clearTimeout(closeTimeoutId.current)
+    closeTimeoutId.current = null
+    setIsPopoverOpen(true)
+  }
+
+  const close = () => {
+    clearTimeout(openTimeoutId.current)
+    openTimeoutId.current = null
+    setIsPopoverOpen(false)
+  }
+
+  const toggle = () => {
+    setIsPopoverOpen(!isPopoverOpen)
+  }
+
+  useImperativeHandle(ref, () => ({
+    open,
+    close,
+    toggle,
+  }))
+
+  useEffect(() => {
+    if (triggerOnFocus === false) {
+      close()
+    }
+  }, [triggerOnFocus])
+
+  useEffect(() => {
+    if (triggerOnHover === false) {
+      close()
+    }
+  }, [triggerOnHover])
+
+  const createOpenTimeout = () => {
+    clearGlobalTimeout()
+    if (openTimeoutId.current === null) {
+      clearTimeout(closeTimeoutId.current)
+      closeTimeoutId.current = null
+      if (isPopoverOpen === false) {
+        emitter.emit('CLOSE_OPEN_TOOLTIPS')
+        openTimeoutId.current = setTimeout(
+          () => open(),
+          instantDelay ? 0 : openDelay
+        )
+      }
+    }
+  }
+
+  const createCloseTimeout = () => {
+    startGlobalTimeout()
+    if (closeTimeoutId.current === null) {
+      clearTimeout(openTimeoutId.current)
+      openTimeoutId.current = null
+      closeTimeoutId.current = setTimeout(() => close(), closeDelay)
+    }
+  }
+
+  const handleFocus = () => {
+    if (isPageInView.current && !isMouseDown.current) {
+      open()
+    }
+  }
+
+  const handleMouseDown = () => {
+    isMouseDown.current = true
+    close()
+  }
+
+  const handleMouseUp = () => {
+    isMouseDown.current = false
+  }
+
+  const child = Children.only(children)
+  const {
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onMouseUp,
+  } = child.props
+
+  if (!title) {
+    return cloneElement(child, childProps)
+  }
+
+  if (triggerOnFocus) {
+    childProps.onFocus = composeEvents(handleFocus, onFocus)
+    childProps.onBlur = composeEvents(close, onBlur)
+    childProps.onMouseDown = composeEvents(handleMouseDown, onMouseDown)
+    childProps.onMouseUp = composeEvents(handleMouseUp, onMouseUp)
+  }
+
+  if (triggerOnHover) {
+    childProps.onMouseEnter = composeEvents(createOpenTimeout, onMouseEnter)
+    childProps.onMouseLeave = composeEvents(createCloseTimeout, onMouseLeave)
+  }
+
+  return (
+    <Popover
+      shouldFlip
+      paddingHorizontal={0.75}
+      paddingVertical={0.25}
+      fontSize={5}
+      textAlign="center"
+      radius={2}
+      backgroundColor="grey-9"
+      color="rgba(255,255,255,0.94)"
+      zIndex={zIndex}
+      {...popoverProps}
+      anchorElement={cloneElement(child, childProps)}
+      onMouseEnter={createOpenTimeout}
+      onMouseLeave={createCloseTimeout}
+      keepInView={keepInView}
+      placement={placement}
+      renderTo={renderTo}
+      children={title}
+      open={isPopoverOpen}
+    />
+  )
+}
+Tooltip = forwardRef(Tooltip)
+export default Tooltip

package/src/Tooltip/Tooltip.mdx

@@ -0,0 +1,79 @@
+---
+title: Tooltip
+category: Overlays
+summary: Used to display a minimal amount of helpful information.
+propsSummary: Accepts [Popover](/popover) props.
+themeKey: tooltip
+---
+
+```jsx live
+render(
+  <StackView
+    axis="horizontal"
+    alignment="center"
+    distribution="center"
+    spacing={8}
+  >
+    <Tooltip placement="left" title="Tooltip">
+      <Box>Left</Box>
+    </Tooltip>
+    <Tooltip placement="top" title="Tooltip">
+      <Box>Top</Box>
+    </Tooltip>
+    <Tooltip placement="bottom" title="Tooltip">
+      <Box>Bottom</Box>
+    </Tooltip>
+    <Tooltip placement="right" title="Tooltip">
+      <Box>Right</Box>
+    </Tooltip>
+    <Button icon={{ name: 'general.search' }} tooltip={{ title: 'search' }} />
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <Tooltip
+    title={
+      <StackView width={24} spacing={1} cursor="default">
+        <StackView axis="horizontal" alignment="center" spacing={1}>
+          <Icon name="general.exclamationCircle" size="md" color="error" />
+          <Text fontSize={3} weight={500} color="error">
+            Error
+          </Text>
+        </StackView>
+        <Text fontSize={3} lineHeight={3}>
+          This action is not permitted.
+        </Text>
+      </StackView>
+    }
+    openDelay={0}
+    closeDelay={300}
+    popoverProps={{
+      textAlign: 'left',
+      paddingHorizontal: 2,
+      paddingVertical: 2,
+      backgroundColor: 'surface',
+      color: 'foreground',
+      stroke: 'separator',
+      strokeWeight: 1,
+      elevation: 2,
+    }}
+  >
+    <Text>Custom Tooltip</Text>
+  </Tooltip>
+)
+```
+
+```jsx live
+render(() => {
+  const ref = React.useRef()
+  return (
+    <StackView innerRef={ref} padding={4} backgroundColor="surfaceSecondary">
+      <Tooltip title="Hello tooltip" popoverProps={{ relativeTo: ref }}>
+        <Box>Tooltip relative to the parent view.</Box>
+      </Tooltip>
+    </StackView>
+  )
+})
+```

package/src/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import { act, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import { Button, Link, StackView, Text, Tooltip, hooks } from '..'
+
+describe('Tooltip', () => {
+  test('does not render string when closed', () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string}>
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    expect(screen.queryByText(string)).toBeNull()
+  })
+
+  test('renders string on hover', async () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string}>
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    userEvent.hover(screen.getByText('Tooltip anchor'))
+    const tooltip = await screen.findByText(string)
+    expect(tooltip).toBeInTheDocument()
+  })
+
+  test('renders string on focus', async () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string} triggerOnFocus={true}>
+        <Button>Tooltip anchor</Button>
+      </Tooltip>
+    )
+    userEvent.tab()
+    const tooltip = await screen.findByText(string)
+    expect(tooltip).toBeInTheDocument()
+  })
+
+  test('removes string after timeout', async () => {
+    const string = 'Test Text'
+    render(
+      <Tooltip title={string}>
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    const anchor = screen.getByText('Tooltip anchor')
+    expect(screen.queryByText(string)).toBeNull()
+
+    userEvent.hover(anchor)
+
+    const tooltip = await screen.findByText(string)
+    expect(tooltip).toBeInTheDocument()
+
+    userEvent.unhover(anchor)
+    await waitFor(() => {
+      expect(screen.queryByText(string)).not.toBeInTheDocument()
+    })
+  })
+
+  test('stays open when hovering a custom tooltip', () => {
+    const CustomTooltip = function () {
+      const { hover, hoverProps } = hooks.useHover()
+
+      return (
+        <Tooltip
+          title={
+            <Link to="#">
+              <StackView>
+                <Text data-hover={hover}>{string}</Text>
+              </StackView>
+            </Link>
+          }
+        >
+          <Button {...hoverProps}>Tooltip anchor</Button>
+        </Tooltip>
+      )
+    }
+    const string = 'Test Text'
+    render(<CustomTooltip />)
+    const anchor = screen.getByText('Tooltip anchor')
+
+    userEvent.hover(anchor)
+    act(() => {
+      jest.runAllTimers()
+    })
+    const tooltip = screen.getByText(string)
+    expect(tooltip).toBeInTheDocument()
+
+    userEvent.unhover(anchor)
+    userEvent.hover(tooltip)
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(tooltip).toBeInTheDocument()
+
+    userEvent.unhover(tooltip)
+    act(() => {
+      jest.runAllTimers()
+    })
+    expect(tooltip).not.toBeInTheDocument()
+  })
+
+  test('cleans up pageViewChange listeners', () => {
+    window.removeEventListener = jest
+      .fn()
+      .mockImplementation((event, callback) => {})
+    document.removeEventListener = jest
+      .fn()
+      .mockImplementation((event, callback) => {})
+
+    const { unmount } = render(
+      <Tooltip title="Test Text">
+        <Text>Tooltip anchor</Text>
+      </Tooltip>
+    )
+    unmount()
+
+    expect(window.removeEventListener).toBeCalledWith(
+      'focus',
+      expect.any(Function)
+    )
+
+    expect(window.removeEventListener).toBeCalledWith(
+      'blur',
+      expect.any(Function)
+    )
+
+    expect(document.removeEventListener).toBeCalledWith(
+      'visibilitychange',
+      expect.any(Function)
+    )
+  })
+})

package/src/Tooltip/index.js

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

package/src/VariantProvider/VariantProvider.js

@@ -0,0 +1,15 @@
+import React, { createContext, useContext } from 'react'
+
+const VariantContext = createContext()
+
+export function useVariant() {
+  const variant = useContext(VariantContext)
+  return variant ? Object.keys(variant).filter((key) => variant[key]) : null
+}
+
+export function VariantProvider({ children, ...props }) {
+  const parentVariant = useVariant()
+  return (
+    <VariantContext.Provider value={props}>{children}</VariantContext.Provider>
+  )
+}

package/src/VariantProvider/index.js

@@ -0,0 +1 @@
+export { VariantProvider as default, useVariant } from './VariantProvider'

package/src/Wizard/Step.js

@@ -0,0 +1,11 @@
+import { useContext, useEffect } from 'react'
+
+import WizardContext from './WizardContext'
+
+function Step({ children, name, valid }) {
+  const { addStep, ...wizard } = useContext(WizardContext)
+  useEffect(() => addStep({ name, valid }), [])
+  return children(wizard)
+}
+
+export default Step

package/src/Wizard/Wizard.mdx

@@ -0,0 +1,105 @@
+---
+title: Wizard
+category: General
+propsSummary: Accepts [StackView](/stackview) props.
+themeKey: wizard
+---
+
+```jsx live
+function Step({ name }) {
+  return (
+    <Wizard.Step name={name}>
+      {(wizard) => (
+        <Box padding={4}>
+          <Input
+            value={wizard.payload[name]}
+            placeholder={name}
+            onChange={(event) => {
+              wizard.setPayload({
+                [name]: event.target.value,
+              })
+            }}
+          />
+        </Box>
+      )}
+    </Wizard.Step>
+  )
+}
+
+function sendPayload(payload, complete) {
+  new Promise((resolve, reject) => {
+    console.log('Sending payload...', payload)
+    setTimeout(() => {
+      if (Math.random() > 0.5) {
+        resolve()
+      } else {
+        reject()
+      }
+      complete()
+    }, 2500)
+  })
+    .then(() => {
+      console.log('Payload was successful')
+    })
+    .catch(() => {
+      console.log('Payload failed to send')
+    })
+}
+
+render(
+  <Wizard
+    width="100%"
+    padding={8}
+    nextButtonTitle={({ activeStepIndex, steps, totalSteps }) =>
+      activeStepIndex >= totalSteps - 1
+        ? 'Finish'
+        : `Next: ${steps[activeStepIndex + 1].name}`
+    }
+    initialPayload={{ 'Step 1': 'Initial wizard content' }}
+    onSubmit={sendPayload}
+  >
+    <Step name="Step 1" />
+    <Step name="Step 2" />
+    <Step name="Step 3" />
+  </Wizard>
+)
+```
+
+```jsx live
+render(
+  <Wizard
+    buttonProps={{ size: 'sm' }}
+    cancelButtonProps={{ theme: 'error', variant: 'fill' }}
+    backButtonProps={{
+      theme: 'dark',
+      variant: 'outline',
+      iconLeft: { name: 'general.leftChevron', size: 'xxs' }
+    }}
+    footerProps={{ backgroundColor: 'grey-2' }}
+    nextButtonProps={{ iconRight: { name: 'general.rightChevron', size: 'xxs' } }}
+    onCancel={() => console.log('cancel')}
+    onSubmit={() => console.log('submit')}
+    padding={8}
+    renderProgress={({ activeStepIndex, totalSteps }) => {
+      const value = ((activeStepIndex + 1) / totalSteps) * 100
+
+      return (
+        <Box padding={4} width="100%">
+          <Progress value={value} />
+        </Box>
+      )
+    }}
+    width="100%"
+  >
+    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((n) => (
+      <Wizard.Step name={`Step ${n}`}>
+        {() => (
+          <Box padding={4}>
+            <Text align="center">This is step number {n}.</Text>
+          </Box>
+        )}
+      </Wizard.Step>
+    ))}
+  </Wizard>
+)
+```