@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/Wizard/Wizard.js

@@ -1,224 +0,0 @@
-// @flow
-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 { useThemeProps } from '../system'
-
-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,
-}
-
-function Wizard(props: Props) {
-  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([])
-  const [sendingPayload, setSendingPayload] = useState(false)
-  const totalSteps = steps.length
-  const [payload, setPayload] = useReducer(
-    (prevState, updatedProperty) => ({
-      ...prevState,
-      ...updatedProperty,
-    }),
-    initialPayload
-  )
-
-  const addStep = useCallback(
-    (step) => {
-      setSteps((steps) => [...steps, step])
-      return () => {
-        setSteps((steps) =>
-          steps.filter((previousStep) => previousStep.name !== step.name)
-        )
-      }
-    },
-    [steps]
-  )
-
-  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)
-    }
-  }, [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/Wizard.mdx

@@ -1,105 +0,0 @@
----
-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>
-)
-```

package/src/Wizard/WizardContext.js

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

package/src/Wizard/index.js

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

package/src/WrapView/WrapView.mdx

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

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

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

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

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

@@ -1,7 +0,0 @@
-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 { useRovingIndex } from './use-roving-index'
-export { useMeasure } from './use-measure'

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

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

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

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

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

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

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