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

package/src/Wizard/Wizard.tsx

@@ -0,0 +1,231 @@
+import React, { Children, useCallback, useReducer, useState } 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 { ButtonProps } from '../Button/Button'
+import { useThemeProps } from '../system'
+
+import WizardContext from './WizardContext'
+
+export type Step = {
+  name: string
+  valid?: (payload: Record<string, any>) => boolean
+}
+
+export type WizardProps = {
+  /**
+   * Pass props to the back button.
+   */
+  backButtonProps?: ButtonProps
+
+  /**
+   * Pass props to all Button components in the footer.
+   */
+  buttonProps?: ButtonProps
+
+  /**
+   * Pass props to the cancel button.
+   */
+  cancelButtonProps?: ButtonProps
+
+  /**
+   * The content of the component.
+   */
+  children: React.ReactNode
+
+  /**
+   * Pass props to the Button components.
+   */
+  footerProps?: ButtonProps
+
+  /**
+   * The initial payload state.
+   */
+  initialPayload?: Record<string, any>
+
+  /**
+   * Pass props to the next button.
+   */
+  nextButtonProps?: ButtonProps
+
+  /**
+   * Determines what the next button title displays.
+   */
+  nextButtonTitle?: (props: {
+    activeStepIndex: number
+    steps: Step[]
+    totalSteps: number
+  }) => string
+
+  /**
+   * Creates a cancel button for canceling a process from the first step.
+   */
+  onCancel?: () => void
+
+  /**
+   * 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: Record<string, any>, complete: () => void) => void
+
+  /**
+   * Provide a custom progress component to render in place of `StepperProgress`.
+   */
+  renderProgress?: (props: {
+    activeStepIndex: number
+    steps: Step[]
+    totalSteps: number
+  }) => React.ReactNode
+}
+
+const Wizard = (props: WizardProps): JSX.Element => {
+  const {
+    autoFocus = true,
+    backButtonProps,
+    buttonProps,
+    cancelButtonProps,
+    children,
+    footerProps,
+    initialPayload = {},
+    nextButtonProps,
+    nextButtonTitle = ({ activeStepIndex, steps, totalSteps }) =>
+      activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next',
+    onCancel,
+    onSubmit,
+    renderProgress,
+    ...restProps
+  } = useThemeProps('wizard', props)
+  const [activeStepIndex, setActiveStepIndex] = useState(0)
+  const [steps, setSteps] = useState<Step[]>([])
+  const [sendingPayload, setSendingPayload] = useState(false)
+  const totalSteps = steps.length
+  const [payload, setPayload] = useReducer(
+    (prevState: Record<string, any>, updatedProperty: Record<string, any>) => ({
+      ...prevState,
+      ...updatedProperty,
+    }),
+    initialPayload
+  )
+
+  const addStep = useCallback((step) => {
+    setSteps((steps) => [...steps, step])
+    return () => {
+      setSteps((steps) =>
+        steps.filter((previousStep) => previousStep.name !== step.name)
+      )
+    }
+  }, [])
+
+  const isCurrentStepValid = useCallback(
+    function () {
+      const currentStep = steps[activeStepIndex]
+      return currentStep && currentStep.valid
+        ? currentStep.valid(payload)
+        : true
+    },
+    [activeStepIndex, steps, payload]
+  )
+
+  const handleSubmit = useCallback(() => {
+    if (onSubmit) {
+      const complete = () => setSendingPayload(false)
+      setSendingPayload(true)
+      onSubmit(payload, complete)
+    }
+  }, [onSubmit, payload])
+
+  return (
+    <WizardContext.Provider
+      value={{
+        activeStepIndex,
+        addStep,
+        setPayload,
+        payload,
+        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: 'general.leftChevron', size: 'sm' }}
+                onClick={() => setActiveStepIndex(activeStepIndex - 1)}
+                size="lg"
+                title="Back"
+                variant="naked"
+                {...buttonProps}
+                {...backButtonProps}
+              />
+            )}
+            <Button
+              disabled={!isCurrentStepValid()}
+              onClick={() =>
+                activeStepIndex >= totalSteps - 1
+                  ? handleSubmit()
+                  : setActiveStepIndex(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/WizardContext.js

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

package/src/Wizard/index.js

@@ -0,0 +1,4 @@
+import Wizard from './Wizard'
+import Step from './Step'
+Wizard.Step = Step
+export default Wizard

package/src/WrapView/WrapView.mdx

@@ -0,0 +1,73 @@
+---
+title: WrapView
+category: Layout
+summary: Lay out children in a row, wrapping if necessary.
+propsSummary: Accepts all valid HTML attributes, [StackView](/stackview) and [Box](/box) props.
+---
+
+```jsx live
+render(
+  <WrapView
+    width="100%"
+    maxWidth={60}
+    padding={2}
+    spacing={2}
+    backgroundColor="backgroundSecondary"
+  >
+    {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((index) => (
+      <Box
+        key={index}
+        padding={1}
+        radius={3}
+        backgroundColor="blue-5"
+        color="white"
+      >
+        Cell {index}
+      </Box>
+    ))}
+  </WrapView>
+)
+```
+
+```jsx live
+render(
+  <Card width="100%" maxWidth={60}>
+    <WrapView padding={1} spacing={1}>
+      <Select value="every">
+        <Select.Option value="every">Every</Select.Option>
+      </Select>
+      <Select value="month">
+        <Select.Option value="month">month</Select.Option>
+      </Select>
+      <Select value="day">
+        <Select.Option value="day">on the 11th day</Select.Option>
+      </Select>
+      <Select value="until">
+        <Select.Option value="until">until</Select.Option>
+      </Select>
+      <DateField />
+    </WrapView>
+  </Card>
+)
+```
+
+```jsx live
+const users = generateFakeData(
+  (faker) => faker.name.firstName() + ' ' + faker.name.lastName(),
+  6
+)
+render(
+  <WrapView
+    as={Input.InputBox}
+    maxWidth={60}
+    evenPadding
+    spacing={0.5}
+    focusChildIndex={users.length} // focus last item (input) when clicking view
+  >
+    {users.map((name) => (
+      <Badge key={name} title={name} tabIndex={0} size="xs" />
+    ))}
+    <Input.InputField />
+  </WrapView>
+)
+```

package/src/WrapView/WrapView.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { BoxProps } from '../Box'
+import StackView from '../StackView'
+import { spacingValue } from '../system'
+
+export type WrapViewProps = {
+  children?: any
+  
+  /** The amount of space between children. */
+  spacing?: number | string
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  WrapViewProps
+
+export function WrapView({ children, spacing, ...restProps }: Props) {
+  const styles = {
+    basis: '100%',
+  } as any
+  if (spacing) {
+    styles.gap = spacingValue(spacing)
+  }
+
+  return (
+    <StackView axis="horizontal" {...restProps}>
+      <StackView wrap axis="horizontal" css={styles}>
+        {children}
+      </StackView>
+    </StackView>
+  )
+}

package/src/WrapView/index.ts

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

package/src/designTokens/index.ts

@@ -0,0 +1,80 @@
+import { default as tokens } from '@planningcenter/tapestry-design-tokens/dist/js/tokens.module'
+
+const colors = {
+  black10: 'hsl(0 0% 0% / 0.1)',
+  black40: 'hsl(0 0% 0% / 0.4)',
+  black60: 'hsl(0 0% 0% / 0.6)',
+  black80: 'hsl(0 0% 0% / 0.8)',
+  black: 'hsl(0 0% 0%)',
+  lightNeutral07: 'hsl(0 0% 7%)',
+  lightNeutral12: 'hsl(0 0% 12%)',
+  lightNeutral15: 'hsl(0 0% 15%)',
+  lightNeutral17: 'hsl(0 0% 17%)',
+  lightNeutral19: 'hsl(0 0% 19%)',
+  lightNeutral24: 'hsl(0 0% 24%)',
+  lightNeutral32: 'hsl(0 0% 32%)',
+  // NOTE: lightNeutral40 is NOT in Neutral (Grays) in Figma
+  lightNeutral40: 'hsl(0 0% 40%)',
+  lightNeutral45: 'hsl(0 0% 45%)',
+  lightNeutral50: 'hsl(0 0% 50%)',
+  lightNeutral62: 'hsl(0 0% 62%)',
+  lightNeutral68: 'hsl(0 0% 68%)',
+  lightNeutral81: 'hsl(0 0% 81%)',
+  lightNeutral88: 'hsl(0 0% 88%)',
+  lightNeutral93: 'hsl(0 0% 93%)',
+  lightNeutral95: 'hsl(0 0% 95%)',
+  lightNeutral97: 'hsl(0 0% 97%)',
+  lightNeutral98: 'hsl(0 0% 98%)',
+  lightNeutral100: 'hsl(0 0% 100%)',
+  white45: 'hsl(0 0% 100% / 0.45)',
+  white: 'hsl(0 0% 100%)',
+}
+
+export const designTokens = {
+  button: {
+    borderRadius: tokens.button.borderRadius.value,
+  },
+  input: {
+    borderRadius: 4,
+  },
+  tabNav: {
+    desktop: {
+      paddingX: 24,
+      selectedTabBackgroundColor: colors.white,
+      spacing: 8,
+    },
+    mobile: {
+      backgroundColor: colors.white,
+      borderBottomColor: colors.lightNeutral88,
+      borderBottomStyle: 'solid',
+      borderBottomWidth: 1,
+      paddingX: 16,
+      spacing: 20,
+    },
+    tab: {
+      badgeBackgroundColor: colors.black10,
+      badgeFontSize: 12,
+      badgeTextColor: colors.black80,
+      disabledTextColor: colors.black40,
+      iconColor: colors.lightNeutral40,
+      selectedTextColor: colors.black80,
+      textColor: colors.black60,
+      desktop: {
+        activeTextColor: colors.black80,
+        borderRadiusTop: 4,
+        defaultBackgroundColor: colors.white45,
+        hoverTextColor: colors.black80,
+        fontSize: 14,
+        height: 40,
+        paddingX: 16,
+      },
+      mobile: {
+        borderBottomWidth: 3,
+        fontSize: 16,
+        height: 44,
+        paddingBottom: 10,
+        paddingTop: 7,
+      },
+    },
+  },
+}

package/src/hooks/__tests__/use-roving-index.js

@@ -0,0 +1,58 @@
+import { renderHook, act } from '@testing-library/react-hooks'
+import { useRovingIndex } from '../use-roving-index'
+
+test('index stays contained', () => {
+  const maxIndex = 3
+  const { result } = renderHook(() => useRovingIndex({ maxIndex }))
+
+  act(() => {
+    result.current.setActiveIndex(5)
+  })
+
+  expect(result.current.activeIndex).toBe(maxIndex)
+
+  act(() => {
+    result.current.setActiveIndex(-5)
+  })
+
+  expect(result.current.activeIndex).toBe(0)
+})
+
+test('index wraps properly', () => {
+  const { result } = renderHook(() =>
+    useRovingIndex({
+      maxIndex: 5,
+      wrap: true,
+    })
+  )
+
+  act(() => {
+    result.current.moveActiveIndex(-3)
+  })
+
+  expect(result.current.activeIndex).toBe(2)
+})
+
+test('disables moving backwards', () => {
+  const { result } = renderHook(() => useRovingIndex({ maxIndex: 3 }))
+
+  expect(result.current.moveBackwardDisabled).toBe(true)
+
+  act(() => {
+    result.current.moveActiveIndex(1)
+  })
+
+  expect(result.current.moveBackwardDisabled).toBe(false)
+})
+
+test('disables moving forwards', () => {
+  const { result } = renderHook(() => useRovingIndex({ maxIndex: 3 }))
+
+  expect(result.current.moveForwardDisabled).toBe(false)
+
+  act(() => {
+    result.current.setActiveIndex(3)
+  })
+
+  expect(result.current.moveForwardDisabled).toBe(true)
+})

package/src/hooks/index.js

@@ -0,0 +1,8 @@
+export { useDocumentEvent } from './use-document-event'
+export { useFocus } from './use-focus'
+export { useHover } from './use-hover'
+export { useId } from './use-id'
+export { useKeyboardShortcuts } from './use-keyboard-shortcuts'
+export { useMeasure } from './use-measure'
+export { useMediaQuery } from './use-media-query'
+export { useRovingIndex } from './use-roving-index'

package/src/hooks/use-accessibility-violation.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+
+import Icon from '../Icon'
+import StackView from '../StackView'
+import Text from '../Text'
+
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+export function useAccessibilityViolation(
+  /** Content to be displayed in tooltip when hovering element. */
+  tooltipContent: React.ReactNode,
+
+  /** Content to be displayed in the console with a reference to the element. */
+  consoleContent: string
+) {
+  if (process.env.NODE_ENV === 'production') {
+    return {}
+  } else {
+    const wrapperRef = React.useRef(null)
+    const tooltipProps = {
+      title: (
+        <StackView width={32} spacing={1} cursor="default">
+          <StackView axis="horizontal" alignment="center" spacing={1}>
+            <Icon name="general.exclamationCircle" size="md" color="error" />
+            <Text fontSize={3} weight={500}>
+              Accessibility Violation
+            </Text>
+          </StackView>
+          <Text fontSize={3} lineHeight={3}>
+            {tooltipContent}
+          </Text>
+        </StackView>
+      ),
+      openDelay: 0,
+      closeDelay: 300,
+      popoverProps: {
+        textAlign: 'left',
+        paddingHorizontal: 2,
+        paddingVertical: 2,
+        backgroundColor: 'surface',
+        color: 'foreground',
+        stroke: 'separator',
+        strokeWeight: 1,
+        elevation: 2,
+      },
+    }
+    const wrapperProps = {
+      innerRef: wrapperRef,
+      stroke: 'error',
+      strokeAlign: 'outside',
+      strokeWeight: 4,
+    }
+    React.useEffect(() => {
+      if (wrapperRef.current) {
+        console.error(consoleContent, wrapperRef.current)
+      }
+    }, [])
+    return { tooltipProps, wrapperProps }
+  }
+}

package/src/hooks/use-document-event.js

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Provide a callback for any document event type.
+ *
+ * @event {string} type - A valid [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
+ * @param {Function} callback - Callback when specified event type occurs.
+ *
+ * @example
+ *
+ * function App() {
+ *   useDocumentEvent('keydown', event => {
+ *     console.log(`${event.key} pressed`)
+ *   })
+ *   return <div>App</div>
+ * }
+ */
+export function useDocumentEvent(type, callback) {
+  const savedCallback = useRef(callback)
+
+  useEffect(() => {
+    savedCallback.current = callback
+  }, [callback])
+
+  useEffect(() => {
+    function handleEvent(event) {
+      savedCallback.current(event)
+    }
+    document.addEventListener(type, handleEvent)
+    return () => {
+      document.removeEventListener(type, handleEvent)
+    }
+  }, [])
+}

package/src/hooks/use-focus.js

@@ -0,0 +1,17 @@
+import { useState } from 'react'
+
+/**
+ * Determines when one or many elements take focus.
+ *
+ * @returns {{ focus: boolean, focusProps: Object }}
+ */
+export function useFocus() {
+  const [focus, setFocus] = useState(false)
+  return {
+    focus,
+    focusProps: {
+      onFocus: () => setFocus(true),
+      onBlur: () => setFocus(false),
+    },
+  }
+}

package/src/hooks/use-hover.js

@@ -0,0 +1,12 @@
+import { useState } from 'react'
+
+export function useHover() {
+  const [hover, setHover] = useState(false)
+  return {
+    hover,
+    hoverProps: {
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false),
+    },
+  }
+}

package/src/hooks/use-id.js

@@ -0,0 +1,19 @@
+// this will eventually be replaced with useOpaqueIdentifier once it is stable:
+// https://github.com/facebook/react/pull/17322
+import { useRef } from 'react'
+
+let idCounter = 1
+
+/**
+ * Generates a unique id based on the provided prefix.
+ * Be aware using the same prefix elsewhere _does not_ generate a unique id.
+ * @param {string} prefix
+ * @returns {string} unique prefixed id
+ */
+export function useId(prefix) {
+  const id = useRef(null)
+  if (id.current === null) {
+    id.current = `${prefix}-${idCounter++}`
+  }
+  return id.current
+}

package/src/hooks/use-keyboard-shortcuts.js

@@ -0,0 +1,26 @@
+import { useEffect } from 'react'
+import Mousetrap from 'mousetrap'
+
+export function useKeyboardShortcuts(keyboardShortcuts, data) {
+  function bindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach((key) =>
+        Mousetrap.bind(key, keyboardShortcuts[key].bind(null, data))
+      )
+    }
+  }
+
+  function unbindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach((key) => Mousetrap.unbind(key))
+    }
+  }
+
+  useEffect(() => {
+    return () => {
+      unbindKeyboardShortcuts()
+    }
+  }, [])
+
+  return { bindKeyboardShortcuts, unbindKeyboardShortcuts }
+}