@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Tooltip/Tooltip.js

@@ -0,0 +1,247 @@
+// @flow
+import React, { Component, Children, cloneElement } from 'react'
+import mitt from 'mitt'
+
+import Popover from '../Popover'
+import { composeEvents, pageViewChange } from '../utils'
+
+export type Props = {
+  /**
+   * 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,
+
+  /**
+   * Accepts any valid [Popover](/popover) props.
+   */
+  popoverProps?: object,
+}
+
+const emitter = mitt()
+let globalTimeoutId = null
+let instantDelay = false
+
+function startGlobalTimeout() {
+  instantDelay = true
+  globalTimeoutId = setTimeout(() => {
+    instantDelay = false
+  }, 500)
+}
+
+function clearGlobalTimeout() {
+  clearTimeout(globalTimeoutId)
+}
+
+class Tooltip extends Component<Props> {
+  static defaultProps = {
+    openDelay: 500,
+    closeDelay: 300,
+    keepInView: true,
+    triggerOnFocus: true,
+    triggerOnHover: true,
+    defaultOpen: false,
+  }
+
+  state = {
+    isPopoverOpen: this.props.defaultOpen,
+  }
+
+  isPageInView = true
+
+  isFocused = false
+
+  isMouseDown = false
+
+  openTimeoutId = null
+
+  closeTimeoutId = null
+
+  // prevents tooltips showing when focused and navigating back to a page after leaving
+  cleanupPageViewChange = pageViewChange((inView) =>
+    setTimeout(() => (this.isPageInView = inView))
+  )
+
+  componentDidMount() {
+    emitter.on('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips)
+  }
+
+  componentDidUpdate(lastProps) {
+    if (
+      (lastProps.triggerOnFocus !== this.props.triggerOnFocus &&
+        this.props.triggerOnFocus === false) ||
+      (lastProps.triggerOnHover !== this.props.triggerOnHover &&
+        this.triggerOnHover === false)
+    ) {
+      this.close()
+    }
+  }
+
+  componentWillUnmount() {
+    emitter.off('CLOSE_OPEN_TOOLTIPS', this.handleCloseOpenTooltips)
+    clearTimeout(this.openTimeoutId)
+    clearTimeout(this.closeTimeoutId)
+    this.cleanupPageViewChange()
+  }
+
+  handleCloseOpenTooltips = (instance) => {
+    if (this !== instance) {
+      this.close()
+    }
+  }
+
+  createOpenTimeout = () => {
+    clearGlobalTimeout()
+    if (this.openTimeoutId === null) {
+      clearTimeout(this.closeTimeoutId)
+      this.closeTimeoutId = null
+      if (this.state.isPopoverOpen === false) {
+        emitter.emit('CLOSE_OPEN_TOOLTIPS')
+        this.openTimeoutId = setTimeout(
+          () => this.open(),
+          instantDelay ? 0 : this.props.openDelay
+        )
+      }
+    }
+  }
+
+  createCloseTimeout = () => {
+    startGlobalTimeout()
+    if (this.closeTimeoutId === null) {
+      clearTimeout(this.openTimeoutId)
+      this.openTimeoutId = null
+      this.closeTimeoutId = setTimeout(() => {
+        this.close()
+      }, this.props.closeDelay)
+    }
+  }
+
+  open = () => {
+    clearTimeout(this.closeTimeoutId)
+    this.closeTimeoutId = null
+    this.setState({ isPopoverOpen: true })
+  }
+
+  close = () => {
+    clearTimeout(this.openTimeoutId)
+    this.openTimeoutId = null
+    this.setState({ isPopoverOpen: false })
+  }
+
+  toggle = () => {
+    this.setState((state) => ({ isPopoverOpen: !state.isPopoverOpen }))
+  }
+
+  handleFocus = () => {
+    if (this.isPageInView && !this.isMouseDown) {
+      this.open()
+    }
+  }
+
+  handleMouseDown = () => {
+    this.isMouseDown = true
+    this.close()
+  }
+
+  handleMouseUp = () => {
+    this.isMouseDown = false
+  }
+
+  render() {
+    const {
+      children,
+      openDelay,
+      closeDelay,
+      defaultOpen,
+      keepInView,
+      placement,
+      popoverProps,
+      renderTo,
+      title,
+      triggerOnFocus,
+      triggerOnHover,
+      ...childProps
+    } = this.props
+    const { isPopoverOpen } = this.state
+    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(this.handleFocus, onFocus)
+      childProps.onBlur = composeEvents(this.close, onBlur)
+      childProps.onMouseDown = composeEvents(this.handleMouseDown, onMouseDown)
+      childProps.onMouseUp = composeEvents(this.handleMouseUp, onMouseUp)
+    }
+
+    if (triggerOnHover) {
+      childProps.onMouseEnter = composeEvents(
+        this.createOpenTimeout,
+        onMouseEnter
+      )
+      childProps.onMouseLeave = composeEvents(
+        this.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={9999}
+        {...popoverProps}
+        anchorElement={cloneElement(child, childProps)}
+        onMouseEnter={this.createOpenTimeout}
+        onMouseLeave={this.createCloseTimeout}
+        keepInView={keepInView}
+        placement={placement}
+        renderTo={renderTo}
+        children={title}
+        open={isPopoverOpen}
+      />
+    )
+  }
+}
+
+export default Tooltip

package/src/Tooltip/Tooltip.mdx

@@ -0,0 +1,77 @@
+---
+title: Tooltip
+category: Overlays
+summary: Composes [Popover](/popover). Used to display a minimal amount of helpful information.
+---
+
+```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: '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="exclamation-circle-filled" 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/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.js

@@ -0,0 +1,253 @@
+// @flow
+import React, { Children, Component } from 'react'
+
+import Button from '../Button'
+import Card from '../Card'
+import Divider from '../Divider'
+import StackView from '../StackView'
+import PagerView from '../PagerView'
+import StepperProgress from '../StepperProgress'
+import Text from '../Text'
+
+import Step from './Step'
+import WizardContext from './WizardContext'
+
+export type Props = {
+  /**
+   * Pass props to the back button.
+   */
+  backButtonProps: Object,
+
+  /**
+   * Pass props to all Button components in the footer.
+   */
+  buttonProps: Object,
+
+  /**
+   * Pass props to the cancel button.
+   */
+  cancelButtonProps: Object,
+
+  /**
+   * Pass props to the Button components.
+   */
+  footerProps: Object,
+
+  /**
+   * The initial payload state.
+   */
+  initialPayload: Object,
+
+  /**
+   * Pass props to the next button.
+   */
+  nextButtonProps: Object,
+
+  /**
+   * Determines what the next button title displays.
+   */
+  nextButtonTitle: (props: {
+    activeStepIndex: number,
+    steps: Array<string>,
+    totalSteps: number,
+  }) => null,
+
+  /**
+   * Creates a cancel button for canceling a process from the first step.
+   */
+  onCancel: Function,
+
+  /**
+   * Called when the `Done` button is pressed on the last view. Passes back the `payload` state
+   * as well as an option `complete` callback to revert the button spinner back to normal.
+   */
+  onSubmit: (payload: Object, complete: () => null) => null,
+
+  /**
+   * Provide a custom progress component to render in place of `StepperProgress`.
+   */
+  renderProgress: (props: {
+    activeStepIndex: Number,
+    steps: Array<string>,
+    totalSteps: number,
+  }) => null,
+}
+
+class Wizard extends Component<Props> {
+  static Step = Step
+
+  static defaultProps = {
+    autoFocus: true,
+    initialPayload: {},
+    nextButtonTitle: ({ activeStepIndex, steps, totalSteps }) =>
+      activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next',
+  }
+
+  state = {
+    activeStepIndex: 0,
+    payload: this.props.initialPayload,
+    steps: [],
+    totalSteps: -1,
+    sendingPayload: false,
+  }
+
+  setPayload = (newPayload, cb) => {
+    this.setState(
+      (state) => ({
+        payload: {
+          ...state.payload,
+          ...newPayload,
+        },
+      }),
+      cb
+    )
+  }
+
+  setSteps = (getSteps) => {
+    this.setState((state) => {
+      const nextSteps = getSteps(state.steps)
+      return {
+        steps: nextSteps,
+        totalSteps: nextSteps.length,
+      }
+    })
+  }
+
+  addStep = (step) => {
+    this.setSteps((steps) => [...steps, step])
+    return () => {
+      this.setSteps((steps) =>
+        steps.filter((previousStep) => previousStep.name !== step.name)
+      )
+    }
+  }
+
+  isCurrentStepValid() {
+    const { activeStepIndex, payload, steps } = this.state
+    const currentStep = steps[activeStepIndex]
+    return currentStep && currentStep.valid ? currentStep.valid(payload) : true
+  }
+
+  handleSubmit = () => {
+    if (this.props.onSubmit) {
+      const complete = () => this.setState({ sendingPayload: false })
+      this.setState({ sendingPayload: true })
+      this.props.onSubmit(this.state.payload, complete)
+    }
+  }
+
+  render() {
+    const {
+      autoFocus,
+      backButtonProps,
+      buttonProps,
+      cancelButtonProps,
+      children,
+      footerProps,
+      initialPayload,
+      nextButtonProps,
+      nextButtonTitle,
+      onCancel,
+      onSubmit,
+      renderProgress,
+      ...restProps
+    } = this.props
+    const { activeStepIndex, sendingPayload, steps, totalSteps } = this.state
+    return (
+      <WizardContext.Provider
+        value={{
+          activeStepIndex: this.state.activeStepIndex,
+          addStep: this.addStep,
+          setPayload: this.setPayload,
+          payload: this.state.payload,
+          totalSteps: this.state.totalSteps,
+        }}
+      >
+        <StackView
+          alignment="center"
+          minWidth={48}
+          maxWidth={96}
+          {...restProps}
+        >
+          {renderProgress ? (
+            renderProgress({ activeStepIndex, steps, totalSteps })
+          ) : (
+            <StepperProgress
+              width="80%"
+              paddingTop={6}
+              paddingBottom={4}
+              activeStepIndex={activeStepIndex}
+            >
+              {steps.map((step, index) => (
+                <StepperProgress.Step
+                  key={index}
+                  renderEnd={
+                    <Text align="center" marginTop={2}>
+                      {step.name}
+                    </Text>
+                  }
+                />
+              ))}
+            </StepperProgress>
+          )}
+          <Card spacing={<Divider />} elevation={1}>
+            <PagerView activeViewIndex={activeStepIndex} autoFocus={autoFocus}>
+              {Children.map(children, (child, index) => (
+                <PagerView.View key={index}>{child}</PagerView.View>
+              ))}
+            </PagerView>
+            <StackView
+              axis="horizontal"
+              distribution={activeStepIndex > 0 ? 'space-between' : 'end'}
+              padding={1}
+              spacing={1}
+              {...footerProps}
+            >
+              {activeStepIndex === 0 && onCancel && (
+                <Button
+                  disabled={sendingPayload}
+                  onClick={onCancel}
+                  size="lg"
+                  title="Cancel"
+                  variant="naked"
+                  {...buttonProps}
+                  {...cancelButtonProps}
+                />
+              )}
+              {activeStepIndex > 0 && (
+                <Button
+                  disabled={sendingPayload}
+                  iconLeft={{ name: 'caret-left' }}
+                  onClick={() =>
+                    this.setState({ activeStepIndex: activeStepIndex - 1 })
+                  }
+                  size="lg"
+                  title="Back"
+                  variant="naked"
+                  {...buttonProps}
+                  {...backButtonProps}
+                />
+              )}
+              <Button
+                disabled={!this.isCurrentStepValid()}
+                onClick={() =>
+                  activeStepIndex >= totalSteps - 1
+                    ? this.handleSubmit()
+                    : this.setState({ activeStepIndex: activeStepIndex + 1 })
+                }
+                size="lg"
+                spinner={sendingPayload}
+                theme="primary"
+                title={nextButtonTitle({ activeStepIndex, steps, totalSteps })}
+                {...buttonProps}
+                {...nextButtonProps}
+              />
+            </StackView>
+          </Card>
+        </StackView>
+      </WizardContext.Provider>
+    )
+  }
+}
+
+export default Wizard

package/src/Wizard/Wizard.mdx

@@ -0,0 +1,99 @@
+---
+title: Wizard
+category: General
+---
+
+```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' }}
+    footerProps={{ backgroundColor: 'grey-2' }}
+    nextButtonProps={{ iconRight: { name: 'caret-right' } }}
+    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>
+)
+```

package/src/Wizard/WizardContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react'
+const WizardContext = createContext()
+export default WizardContext