@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Wizard/index.js

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

package/src/WrapView/WrapView.mdx

@@ -0,0 +1,72 @@
+---
+title: WrapView
+category: Layout
+summary: Lay out children in a row, wrapping if necessary.
+---
+
+```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,55 @@
+import React from 'react'
+
+import { BoxProps } from '../Box'
+import StackView from '../StackView'
+
+export type WrapViewProps = {
+  /** The amount of space between children. */
+  spacing?: number
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  WrapViewProps
+
+let supportsFlexGap = null
+
+function getSupportsFlexGap() {
+  if (typeof document !== 'undefined' && supportsFlexGap === null) {
+    const div = document.createElement('div')
+    div.style.display = 'flex'
+    div.style.flexDirection = 'column'
+    div.style.gap = '1px'
+    div.appendChild(document.createElement('div'))
+    div.appendChild(document.createElement('div'))
+    document.body.appendChild(div)
+    supportsFlexGap = div.scrollHeight === 1
+    document.body.removeChild(div)
+  }
+  return supportsFlexGap
+}
+
+export function WrapView({ children, spacing, ...restProps }: Props) {
+  const supportsFlexGap = getSupportsFlexGap()
+  const styles = {
+    basis: '100%',
+  } as any
+  if (spacing) {
+    if (supportsFlexGap) {
+      styles.gap = spacing
+    } else {
+      styles.marginBottom = -spacing
+      styles['& > *'] = {
+        marginRight: spacing,
+        marginBottom: 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/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,7 @@
+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

@@ -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="exclamation-circle-filled" 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 }
+}

package/src/hooks/use-measure.js

@@ -0,0 +1,120 @@
+import * as React from 'react'
+import ResizeObserver from 'resize-observer-polyfill'
+import mitt from 'mitt'
+
+let animationId = null
+const emitter = mitt()
+const handleMeasure = () => {
+  if (animationId === null) {
+    animationId = window.requestAnimationFrame(() => {
+      emitter.emit('measure')
+      window.requestAnimationFrame(() => {
+        animationId = null
+      })
+    })
+  }
+}
+const mutationObserver =
+  typeof window === 'undefined' ? {} : new MutationObserver(handleMeasure)
+const resizeObserver =
+  typeof window === 'undefined' ? {} : new ResizeObserver(handleMeasure)
+
+/**
+ * Creates a set of hooks to help manage collecting and using measurements
+ * from one or many components.
+ *
+ * @example
+ *
+ * function Singular({ ref, value }) {
+ *   const [useMeasureRef, useMeasureEffect] = useMeasure()
+ *   useMeasureRef(ref)
+ *   useMeasureEffect(([node]) => {
+ *     console.log(node)
+ *   }, [value])
+ *   return <div />
+ * }
+ *
+ * function Parent({ children }) {
+ *   const [useMeasureRef, useMeasureEffect] = useMeasure()
+ *   useMeasureEffect(nodes => {
+ *     console.log(nodes)
+ *   }, [])
+ *   return (
+ *     <div>
+ *       {Children.map(children, child =>
+ *         React.cloneElement(child, { useMeasureRef })
+ *       )}
+ *     </div>
+ *   )
+ * }
+ *
+ * function Child({ useMeasureRef }) {
+ *   const ref = useMeasureRef(ref)
+ *   return <div ref={ref} />
+ * }
+ *
+ * @returns {[(ref?: React.RefObject) => React.RefObject, (onMeasure: Function, dependencies: Array) => void]}
+ */
+export function useMeasure() {
+  const refs = React.useRef([])
+  const storeRef = React.useCallback((node) => {
+    if (refs.current.indexOf(node) === -1) {
+      refs.current.push(node)
+    }
+  }, [])
+  const refsEmitter = React.useMemo(() => {
+    const emitter = mitt()
+    emitter.on('storeRef', storeRef)
+    return emitter
+  }, [])
+
+  const useMeasureRef = React.useCallback((ref) => {
+    const measureRef = ref || React.useRef()
+    const connected = React.useRef(false)
+    React.useLayoutEffect(() => {
+      const node = measureRef.current
+      mutationObserver.observe(node, {
+        characterData: true,
+        childList: true,
+        subtree: true,
+      })
+      resizeObserver.observe(node)
+      return () => {
+        resizeObserver.unobserve(node)
+      }
+    }, [])
+
+    React.useLayoutEffect(() => {
+      refsEmitter.emit('storeRef', measureRef.current)
+    })
+
+    return measureRef
+  }, [])
+
+  const useMeasureEffect = React.useCallback((onMeasure, dependencies) => {
+    React.useLayoutEffect(() => {
+      function handleMeasure() {
+        onMeasure([...refs.current])
+      }
+      handleMeasure()
+      emitter.on('measure', handleMeasure)
+      return () => {
+        emitter.off('measure', handleMeasure)
+      }
+    }, dependencies)
+
+    React.useLayoutEffect(() => {
+      return () => {
+        refs.current = []
+      }
+    })
+
+    React.useEffect(() => {
+      return () => {
+        refsEmitter.off('storeRef', storeRef)
+      }
+    }, [])
+  }, [])
+
+  return [useMeasureRef, useMeasureEffect]
+}

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

@@ -0,0 +1,59 @@
+import { useCallback, useState } from 'react'
+
+/**
+ * Manages a set of indices that need to wrap or be contained.
+ *
+ * @example
+ *
+ * const {
+ *   activeIndex,
+ *   moveActiveIndex,
+ * } = useRovingIndex({ maxIndex: items.length - 1 })
+ *
+ * @param {{
+ *   maxIndex: number,
+ *   defaultIndex?: number,
+ *   wrap?: boolean
+ * }} [options]
+ * @returns {{
+ *   activeIndex: number,
+ *   moveActiveIndex: (amountToMove: number) => void,
+ *   setActiveIndex: (nextIndex: number) => void,
+ *   moveBackwardDisabled: boolean,
+ *   moveForwardDisabled: boolean,
+ * }}
+ */
+export function useRovingIndex({ maxIndex, defaultIndex = 0, wrap = false }) {
+  const [activeIndex, setActiveIndex] = useState(defaultIndex)
+  const getWrappedIndex = useCallback(
+    (nextIndex) => {
+      return wrap
+        ? ((nextIndex % maxIndex) + maxIndex) % maxIndex
+        : nextIndex > maxIndex
+        ? maxIndex
+        : nextIndex < 0
+        ? 0
+        : nextIndex
+    },
+    [maxIndex, wrap]
+  )
+  return {
+    activeIndex,
+    moveActiveIndex: useCallback(
+      (amountToMove) => {
+        setActiveIndex((currentIndex) =>
+          getWrappedIndex(currentIndex + amountToMove)
+        )
+      },
+      [getWrappedIndex]
+    ),
+    setActiveIndex: useCallback(
+      (nextIndex) => {
+        setActiveIndex(getWrappedIndex(nextIndex))
+      },
+      [getWrappedIndex]
+    ),
+    moveBackwardDisabled: activeIndex <= 0,
+    moveForwardDisabled: activeIndex >= maxIndex,
+  }
+}