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

package/src/hooks/use-measure.js

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

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

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

@@ -1,415 +0,0 @@
-import * as React from 'react'
-import { LiteralUnion } from 'type-fest'
-
-import { BoxProps } from './Box'
-import { NativeStyleNames, ColorStyleNames } from './system/style-names'
-
-export interface BoxSizes {}
-
-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 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 './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 './Text'
-export * from './TileView'
-export * from './ToggleSwitch'
-export * from './ThemeProvider'
-export * from './WrapView'

package/src/index.js

@@ -1,95 +0,0 @@
-import 'focus-options-polyfill'
-import 'focus-visible'
-
-export * as designSystem from './system'
-export * as hooks from './hooks'
-export * as server from './server'
-export * as utils from './utils'
-
-export { default as ActionsDropdown } from './ActionsDropdown'
-export { default as Alert } from './Alert'
-export { default as Avatar } from './Avatar'
-export { default as Badge } from './Badge'
-export { default as Box } from './Box'
-export { default as Button } from './Button'
-export { default as Calendar } from './Calendar'
-export { default as Card } from './Card'
-export { default as Checkbox } from './Checkbox'
-export { default as CheckboxCard } from './CheckboxCard'
-export { default as CheckboxGroup } from './CheckboxGroup'
-export { default as ChurchCenterStatus } from './ChurchCenterStatus'
-export { default as Collapse } from './Collapse'
-export { default as ColumnView } from './ColumnView'
-export { default as Combobox } from './Combobox'
-export { default as DataTable } from './DataTable'
-export { default as DateField } from './DateField'
-export { default as Divider } from './Divider'
-export { default as DragDrop } from './DragDrop'
-export { default as Drawer } from './Drawer'
-export { default as Dropdown } from './Dropdown'
-export { default as EditActions } from './EditActions'
-export { default as Field } from './Field'
-export { default as Form } from './Form'
-export { default as FieldSet } from './FieldSet'
-export { default as FilterLayout } from './FilterLayout'
-export { default as GridView } from './GridView'
-export { default as Group } from './Group'
-export { default as Heading } from './Heading'
-export { default as HelperDrawer } from './HelperDrawer'
-export { default as Highlight } from './Highlight'
-export { default as Icon } from './Icon'
-export { default as Input } from './Input'
-export { default as Link } from './Link'
-export { default as LinkList } from './LinkList'
-export { default as List } from './List'
-export { default as Logo } from './Logo'
-export { default as Menu } from './Menu'
-export { default as Modal } from './Modal'
-export { default as NumberField } from './NumberField'
-export {
-  PageActions,
-  PageBody,
-  PageButton,
-  PageDropdown,
-  PageHeader,
-  PageTab,
-  PageTabList,
-  PageTitle,
-  PageToolbar,
-} from './Page'
-export { default as PagerView } from './PagerView'
-export { default as Pagination } from './Pagination'
-export { default as Popover } from './Popover'
-export { default as Portal } from './Portal'
-export { default as Progress } from './Progress'
-export { default as Radio } from './Radio'
-export { default as RangeSlider } from './RangeSlider'
-export { default as ScreenReader } from './ScreenReader'
-export { default as Scrim } from './Scrim'
-export { default as Section } from './Section'
-export { default as HeadingUppercase } from './HeadingUppercase'
-export { default as SegmentedControl } from './SegmentedControl'
-export { default as SegmentedTabs } from './SegmentedTabs'
-export { default as Select } from './Select'
-export { default as Sidebar } from './Sidebar'
-export { default as Sortable } from './Sortable'
-export { default as Spinner } from './Spinner'
-export { default as StackView } from './StackView'
-export { default as StepperField } from './StepperField'
-export { default as StepperProgress } from './StepperProgress'
-export { default as Summary } from './Summary'
-export { default as Tab } from './Tab'
-export { default as Table } from './Table'
-export { default as Tabs } from './Tabs'
-export { default as Text } from './Text'
-export { default as TextArea } from './TextArea'
-export { default as ThemeProvider } from './ThemeProvider'
-export { default as TileView } from './TileView'
-export { default as TimeField } from './TimeField'
-export { default as ToggleSwitch } from './ToggleSwitch'
-export { default as Toolbar } from './Toolbar'
-export { default as TokenInput } from './TokenInput'
-export { default as Tooltip } from './Tooltip'
-export { default as VariantProvider } from './VariantProvider'
-export { default as Wizard } from './Wizard'
-export { default as WrapView } from './WrapView'