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

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-media-query.js

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export function useMediaQuery(query) {
+  const getMatches = (query) => {
+    // Prevents SSR issues
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      return window.matchMedia(query).matches
+    }
+    return false
+  }
+
+  const [matches, setMatches] = useState(getMatches(query))
+
+  const handleChange = useCallback(() => {
+    setMatches(getMatches(query))
+  }, [query])
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      const matchMedia = window.matchMedia(query)
+
+      // Triggered at the first client-side load and if query changes
+      handleChange()
+
+      // Listen to matchMedia
+      if (matchMedia.addListener) {
+        matchMedia.addListener(handleChange)
+      } else {
+        matchMedia.addEventListener('change', handleChange)
+      }
+
+      return () => {
+        if (matchMedia.removeListener) {
+          matchMedia.removeListener(handleChange)
+        } else {
+          matchMedia.removeEventListener('change', handleChange)
+        }
+      }
+    }
+  }, [handleChange, query])
+
+  return matches
+}

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,
+  }
+}

package/src/hooks/useConstant.ts

@@ -0,0 +1,17 @@
+// A copy/paste of the source of the `use-constant` package.
+// https://github.com/Andarist/use-constant/blob/main/src/index.ts
+// This is done to reduce dependencies.
+
+import * as React from 'react'
+
+type ResultBox<T> = { v: T }
+
+export default function useConstant<T>(fn: () => T): T {
+  const ref = React.useRef<ResultBox<T>>()
+
+  if (!ref.current) {
+    ref.current = { v: fn() }
+  }
+
+  return ref.current.v
+}

package/src/index.d.ts

@@ -0,0 +1,426 @@
+import * as React from 'react'
+import { LiteralUnion } from 'type-fest'
+
+import { BoxProps } from './Box'
+import { NativeStyleNames, ColorStyleNames } from './system/style-names'
+
+export interface BoxSizes {
+  xxs: number
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+export interface Breakpoints {}
+
+export interface DefaultBreakpoints {
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+}
+
+export interface SpinnerSizes {
+  xxs: number
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+export interface SpinnerThickness {
+  xxs: number
+  xs: number
+  sm: number
+  md: number
+  lg: number
+  xl: number
+  xxl: number
+}
+
+export interface Colors {
+  foreground: string
+  foregroundSecondary: string
+  foregroundTertiary: string
+  background: string
+  backgroundSecondary: string
+  backgroundTertiary: string
+  surface: string
+  surfaceSecondary: string
+  surfaceTertiary: string
+  separator: string
+  separatorSecondary: string
+  separatorTertiary: string
+  separatorHover: string
+  separatorFocus: string
+  separatorFocusSecondary: string
+  highlight: string
+  highlightSecondary: string
+  linkForeground: string
+  linkBackground: string
+  primary: string
+  'primary-light': string
+  'primary-lighter': string
+  'primary-lightest': string
+  'primary-dark': string
+  'primary-darker': string
+  'primary-darkest': string
+  warning: string
+  'warning-light': string
+  'warning-lighter': string
+  'warning-lightest': string
+  'warning-dark': string
+  'warning-darker': string
+  'warning-darkest': string
+  error: string
+  'error-light': string
+  'error-lighter': string
+  'error-lightest': string
+  'error-dark': string
+  'error-darker': string
+  'error-darkest': string
+  success: string
+  'success-light': string
+  'success-lighter': string
+  'success-lightest': string
+  'success-dark': string
+  'success-darker': string
+  'success-darkest': string
+  sunday: string
+  monday: string
+  tuesday: string
+  wednesday: string
+  thursday: string
+  friday: string
+  saturday: string
+  'check-ins': string
+  giving: string
+  groups: string
+  'music-stand': string
+  pco: string
+  people: string
+  'planning-center': string
+  projector: string
+  registrations: string
+  calendar: string
+  services: string
+  'red-0': string
+  'red-1': string
+  'red-2': string
+  'red-3': string
+  'red-4': string
+  'red-5': string
+  'red-6': string
+  'red-7': string
+  'red-8': string
+  'red-9': string
+  'blue-0': string
+  'blue-1': string
+  'blue-2': string
+  'blue-3': string
+  'blue-4': string
+  'blue-5': string
+  'blue-6': string
+  'blue-7': string
+  'blue-8': string
+  'blue-9': string
+  'green-0': string
+  'green-1': string
+  'green-2': string
+  'green-3': string
+  'green-4': string
+  'green-5': string
+  'green-6': string
+  'green-7': string
+  'green-8': string
+  'green-9': string
+  'yellow-0': string
+  'yellow-1': string
+  'yellow-2': string
+  'yellow-3': string
+  'yellow-4': string
+  'yellow-5': string
+  'yellow-6': string
+  'yellow-7': string
+  'yellow-8': string
+  'yellow-9': string
+  'light-0': string
+  'light-1': string
+  'light-2': string
+  'light-3': string
+  'light-4': string
+  'light-5': string
+  'light-6': string
+  'light-7': string
+  'light-8': string
+  'light-9': string
+  'dark-0': string
+  'dark-1': string
+  'dark-2': string
+  'dark-3': string
+  'dark-4': string
+  'dark-5': string
+  'dark-6': string
+  'dark-7': string
+  'dark-8': string
+  'dark-9': string
+  'grey-0': string
+  'grey-1': string
+  'grey-2': string
+  'grey-3': string
+  'grey-4': string
+  'grey-5': string
+  'grey-6': string
+  'grey-7': string
+  'grey-8': string
+  'grey-9': string
+  transparent: string
+}
+
+export type ColorProp = LiteralUnion<keyof Colors, string>
+
+export interface ButtonTheme {
+  fill: any
+  outline: any
+  naked: any
+}
+
+export interface Theme {
+  id?: string
+  boxSizes?: Record<keyof BoxSizes, BoxProps>
+  breakpoints?: Partial<Breakpoints>
+  button?: { themes?: { [key: string]: ButtonTheme } }
+  calendar?: any
+  checkbox?: any
+  colors?: Partial<Colors>
+  elevations?: Array<string>
+  fontSizes?: Array<number>
+  group?: { radius?: number }
+  pageBody?: BoxProps
+  pageButton?: any
+  pageDropdown?: any
+  pageHeader?: BoxProps
+  pageTitle?: any
+  icons?: object
+  lineHeights?: Array<number>
+  radio?: any
+  spinner?: {
+    color?: ColorProp
+    sizes?: Partial<SpinnerSizes>
+    thickness?: Partial<SpinnerThickness>
+    trackColor?: ColorProp
+  }
+  toggleSwitch?: {
+    backgroundColor?: ColorProp
+  }
+}
+
+export interface MediaQueries<T> {
+  mediaQueries?: Partial<Record<keyof Breakpoints, T>>
+}
+
+export interface Variants<T> {
+  variants?: {
+    [key in any]?: T
+  }
+}
+
+type CustomStyles = {
+  css?: any
+  paddingHorizontal?: number | string
+  paddingVertical?: number | string
+  marginHorizontal?: number | string
+  marginVertical?: number | string
+  column?: React.CSSProperties['gridColumn']
+  columnStart?: React.CSSProperties['gridColumnStart']
+  columnEnd?: React.CSSProperties['gridColumnEnd']
+  row?: React.CSSProperties['gridRow']
+  rowStart?: React.CSSProperties['gridRowStart']
+  rowEnd?: React.CSSProperties['gridRowEnd']
+  basis?: React.CSSProperties['flexBasis']
+  grow?: React.CSSProperties['flexGrow']
+  shrink?: React.CSSProperties['flexShrink']
+  wrap?: boolean | string
+  radius?: React.CSSProperties['borderRadius']
+  radiusTop?: number | string
+  radiusRight?: number | string
+  radiusBottom?: number | string
+  radiusLeft?: number | string
+  strokeAlign?: 'inside' | 'center' | 'outside'
+  strokeWeight?: number
+  elevation?: number
+  x?: number | string
+  y?: number | string
+  rotate?: number
+  scale?: number
+  uppercase?: boolean
+}
+
+export type StyleProps = Pick<React.CSSProperties, NativeStyleNames> &
+  Partial<Record<ColorStyleNames, ColorProp>> &
+  CustomStyles
+
+export type CommonProps = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  any
+
+export type CommonComponent = React.FC<CommonProps>
+export type CommonPropsWith<T extends object> = Omit<CommonProps, keyof T> & T
+export type CommonComponentWith<T extends object> = React.FC<CommonPropsWith<T>>
+
+export const designSystem: any
+export const hooks: any
+export const server: any
+export const utils: any
+
+export const Avatar: React.FC<CommonProps>
+export const Badge: React.FC<CommonProps>
+export const Calendar: React.FC<CommonProps>
+export const CheckboxCard: React.FC<CommonProps>
+export const CheckboxGroup: React.FC<CommonProps>
+export const ChurchCenterStatus: React.FC<CommonProps>
+export const Collapse: React.FC<CommonProps>
+export const ColumnView: React.FC<CommonProps>
+export const Combobox: React.FC<CommonProps>
+export const DataTable: React.FC<CommonProps>
+export const DateField: React.FC<CommonProps>
+export const DragDrop: React.FC<CommonProps>
+export const Drawer: React.FC<CommonProps>
+export const Dropdown: React.FC<CommonProps>
+export const EditActions: React.FC<CommonProps>
+export const Field: React.FC<CommonProps>
+export const Form: React.FC<CommonProps>
+export const FieldSet: React.FC<CommonProps>
+export const Heading: React.FC<CommonProps>
+export const HelperDrawer: React.FC<CommonProps>
+export const Highlight: React.FC<CommonProps>
+export const Icon: React.FC<CommonProps>
+export const Link: React.FC<CommonProps>
+export const LinkList: React.FC<CommonProps>
+export const Logo: React.FC<CommonProps>
+export const Menu: React.FC<CommonProps>
+export const Modal: React.FC<CommonProps>
+export const NumberField: React.FC<CommonProps>
+export const PageActions: CommonComponent
+export const PageBody: CommonComponent
+export const PageButton: CommonComponent
+export const PageDropdown: CommonComponent
+export const PageHeader: CommonComponent
+export const PageTab: CommonComponent
+export const PageTabList: CommonComponent
+export const PageTitle: CommonComponent
+export const PageToolbar: CommonComponent
+export const PagerView: React.FC<CommonProps>
+export const Pagination: React.FC<CommonProps>
+export const Progress: React.FC<CommonProps>
+export const Radio: React.FC<CommonProps>
+export const RangeSlider: React.FC<CommonProps>
+export const ScreenReader: React.FC<CommonProps>
+export const Section: React.FC<CommonProps>
+export const HeadingUppercase: React.FC<CommonProps>
+export const SegmentedControl: React.FC<CommonProps>
+export const SegmentedTabs: React.FC<CommonProps>
+export const Sidebar: React.FC<CommonProps>
+export const StepperField: React.FC<CommonProps>
+export const StepperProgress: React.FC<CommonProps>
+export const Summary: React.FC<CommonProps>
+export const Table: React.FC<CommonProps>
+export const Tabs: React.FC<CommonProps>
+export const TabNav: React.FC<CommonProps>
+export const TextArea: React.FC<CommonProps>
+export const TimeField: React.FC<CommonProps>
+export const ToggleSwitch: React.FC<CommonProps>
+export const Toolbar: React.FC<CommonProps>
+export const TokenInput: React.FC<CommonProps>
+export const Tooltip: React.FC<CommonProps>
+export const VariantProvider: React.FC<CommonProps>
+export const Wizard: React.FC<CommonProps>
+
+// ============
+// Manual Types
+// ===========
+// These are components written in JS, where we can provide very small (one prop at a time) useful
+// typings for consumers.
+// ============
+
+type HTMLInputWrapperComponent = CommonComponentWith<{
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}>
+
+// ========
+// Checkbox
+// ========
+
+export const Checkbox: HTMLInputWrapperComponent
+
+// =====
+// Input
+// =====
+
+export const Input: HTMLInputWrapperComponent & {
+  Inline: HTMLInputWrapperComponent
+  Input: HTMLInputWrapperComponent
+  InputBox: CommonComponent
+  InputField: HTMLInputWrapperComponent
+  InputLabel: CommonComponent
+}
+
+// ====
+// List
+// ====
+
+export const List: CommonComponent & { Item: CommonComponent }
+
+// ======
+// Select
+// ======
+
+export const Select: CommonComponent & {
+  Inline: CommonComponent
+  Option: CommonComponent
+  OptionGroup: CommonComponent
+  Value: CommonComponent
+  toggleValue: (...args: unknown) => unknown
+}
+
+// ========
+// Sortable
+// ========
+
+export const Sortable: CommonComponent & {
+  SortableManager: CommonComponent
+  SortableList: CommonComponent
+  SortableItem: CommonComponent
+}
+
+// =====================
+// Typescript Components
+// =====================
+
+export * from './Alert'
+export * from './Box'
+export * from './Button'
+export * from './Card'
+export * from './Dialog'
+export * from './Divider'
+export * from './FilterLayout'
+export * from './GridView'
+export * from './Group'
+export * from './Popover'
+export * from './Portal'
+export * from './Scrim'
+export * from './Spinner'
+export * from './StackView'
+export * from './Tab'
+export * from './TabNav'
+export * from './Text'
+export * from './TileView'
+export * from './ToggleSwitch'
+export * from './ThemeProvider'
+export * from './WrapView'