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

package/src/DateField/DateField.tsx

@@ -1,239 +0,0 @@
-// @flow
-import React, { useState, useCallback, useMemo, useRef } from 'react'
-
-import Card from '../Card'
-import Calendar from '../Calendar'
-import FocusGroup from '../FocusGroup'
-import Icon from '../Icon'
-import Input from '../Input/Input'
-import Popover from '../Popover'
-import { generateId } from '../utils'
-import { useThemeProps } from '../system'
-import { useArrowKeysToNavigateCalendar } from './useArrowKeysToNavigateCalendar'
-import { useEditableDate } from './useEditableDate'
-
-export type DateFieldProps = {
-  /**
-   * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
-   */
-  formatValue: string
-
-  /**
-   * Controls the initial Popover state: open or closed (default).
-   */
-  defaultOpen: boolean
-
-  /**
-   * The minimum date that can be chosen.
-   */
-  minDate: Date
-
-  /**
-   * The maximum date that can be chosen.
-   */
-  maxDate: Date
-
-  /**
-   * Called when a date has been selected.
-   */
-  onChange: (date: Date) => null
-
-  /**
-   * Determines where the popover is placed.
-   */
-  placement: string
-
-  /**
-   * The date that will be selected.
-   */
-  value: Date
-
-  /**
-   * Locks external scrollbars when open.
-   */
-  lockScrollWhileOpen?: boolean
-
-  /**
-   * Attempts to keep popover in view clipping edges if too large.
-   */
-  keepInView?: boolean
-
-  /**
-   * Accepts any valid [Calendar](/calendar) props.
-   */
-  calendarProps?: object
-
-  /**
-   * Accepts any valid [Popover](/popover) props.
-   */
-  popoverProps?: object
-}
-
-function DateField({
-  formatValue = 'MMMM dd, yyyy',
-  defaultOpen = false,
-  keepInView,
-  lockScrollWhileOpen = true,
-  minDate,
-  maxDate,
-  onChange,
-  placement,
-  value,
-  ...props
-}: DateFieldProps) {
-  const {
-    calendarProps,
-    color,
-    popoverProps,
-    sizes,
-    thickness: sizeThickness,
-    trackColor,
-    ...restProps
-  } = useThemeProps('dateField', props)
-  const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
-  const id = generateId('datefield')
-  const popover = useRef(null)
-  const inputWrapper = useRef(null)
-
-  const focusInput = useCallback(() => {
-    const input = inputWrapper.current.querySelector('input')
-    if (input.focus) {
-      input.focus()
-    }
-  }, [])
-
-  const openPopover = useCallback(() => {
-    setIsPopoverOpen(true)
-  }, [])
-
-  const closePopover = useCallback(() => {
-    setIsPopoverOpen(false)
-  }, [])
-
-  const dateValidator = useCallback(
-    (date: Date) => {
-      if (!date) return false
-      if (minDate && date < minDate) return false
-      if (maxDate && date > maxDate) return false
-      return true
-    },
-    [minDate, maxDate]
-  )
-
-  const {
-    formattedDate,
-    setDate,
-    clearKeyBuffer,
-    invalidKeyBuffer,
-  } = useEditableDate({
-    date: value,
-    dateFormat: formatValue,
-    dateValidator,
-    onChange,
-  })
-
-  const handleDateSelectedFromCalendar = useCallback(
-    (date) => {
-      focusInput()
-      setDate(date)
-      closePopover()
-    },
-    [focusInput, setDate, closePopover]
-  )
-
-  const handleNavigationChangeFromCalendar = useCallback(
-    (date) => {
-      setDate(date)
-    },
-    [setDate]
-  )
-
-  const navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
-    date: value,
-    calendarIsOpen: isPopoverOpen,
-    closeCalendar: closePopover,
-    openCalendar: openPopover,
-    onChange: setDate,
-  })
-
-  const handleInputOnChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      setDate(event.currentTarget.value)
-    },
-    [setDate]
-  )
-
-  const handleOnBlur = useCallback(() => {
-    clearKeyBuffer()
-    closePopover()
-  }, [clearKeyBuffer, closePopover])
-
-  const inputColors = useMemo(() => {
-    if (invalidKeyBuffer) {
-      return { color: 'error-darker', backgroundColor: 'error-lighter' }
-    } else {
-      return {}
-    }
-  }, [invalidKeyBuffer])
-
-  return (
-    <FocusGroup onBlur={handleOnBlur}>
-      {({ requestBlur, setRef }) => (
-        <Popover
-          {...popoverProps}
-          ref={(component) => {
-            popover.current = component
-          }}
-          as={Card}
-          elevation={2}
-          innerRef={(node) => {
-            popover.current = node
-            setRef(`${id}-popover`)(node)
-          }}
-          keepInView={keepInView}
-          lockScrollWhileOpen={lockScrollWhileOpen}
-          onBlur={requestBlur}
-          onRequestClose={closePopover}
-          open={isPopoverOpen}
-          placement={placement}
-          tabIndex={-1}
-          anchorElement={
-            <Input
-              innerRef={(node) => {
-                inputWrapper.current = node
-                setRef(`${id}-input`)(node)
-              }}
-              onBlur={requestBlur}
-              onFocus={openPopover}
-              onChange={handleInputOnChange}
-              onKeyDown={navigateCalendarWithArrowKeys}
-              value={formattedDate}
-              renderRight={
-                <Icon
-                  name="general.calendar"
-                  color="foregroundTertiary"
-                  onClick={openPopover}
-                />
-              }
-              {...inputColors}
-              {...restProps}
-            />
-          }
-        >
-          <Calendar
-            size="sm"
-            {...calendarProps}
-            date={value}
-            selected={value}
-            minDate={minDate}
-            maxDate={maxDate}
-            onDateSelect={handleDateSelectedFromCalendar}
-            onDateChange={handleNavigationChangeFromCalendar}
-          />
-        </Popover>
-      )}
-    </FocusGroup>
-  )
-}
-
-export default DateField

package/src/DateField/index.js

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

package/src/DateField/parse.test.ts

@@ -1,76 +0,0 @@
-import { format } from 'date-fns'
-import { parseDate, isValidDate, parseMonth } from './parse'
-
-describe('isValidDate', () => {
-  const validDates = [
-    'jun 6, 2022',
-    'June-06-2022',
-    '6-6-2022',
-    '6/6/2022',
-    '06-06-2022',
-    '2022-06-26', // year, month, day
-    '2022/6/1', // year, month, day
-  ]
-
-  validDates.forEach((date) => {
-    it(`returns true for "${date}"`, () => {
-      expect(isValidDate(date)).toBe(true)
-    })
-  })
-
-  const invalidDates = [
-    'June-06-22',
-    '13-6-2022',
-    'June 6 2022',
-    '2022/6/1/1',
-    '2022-15-06',
-  ]
-
-  invalidDates.forEach((date) => {
-    it(`returns false for "${date}"`, () => {
-      expect(isValidDate(date)).toBe(false)
-    })
-  })
-})
-
-describe('parseDate', () => {
-  const dates = [
-    ['January 31, 2022', 'January 31, 2022'],
-    ['jun 9, 2022', 'June 09, 2022'],
-    ['June-09-2022', 'June 09, 2022'],
-    ['6-9-2022', 'June 09, 2022'],
-    ['6/9/2022', 'June 09, 2022'],
-    ['06-09-2022', 'June 09, 2022'],
-    ['2022-06-26', 'June 26, 2022'],
-    ['2022/6/1', 'June 01, 2022', 'MMMM dd, yyyy'],
-    ['15/6/2022', 'June 15, 2022', 'dd/MM/YYYY'],
-    ['1/6/2022', 'June 01, 2022', 'dd MMMM, yyyy'],
-    ['15-aug-2023', 'August 15, 2023', 'dd MMMM, yyyy'],
-    ['15 August, 2023', 'August 15, 2023', 'dd MMMM, yyyy'],
-  ]
-
-  dates.forEach(([date, expected, dateFormat]) => {
-    it(`returns ${expected} for "${date}"`, () => {
-      expect(
-        format(parseDate({ date, format: dateFormat }), 'MMMM dd, yyyy')
-      ).toEqual(expected)
-    })
-  })
-})
-
-describe('parseMonth', () => {
-  const months: [string, number][] = [
-    ['jan', 1],
-    ['feb', 2],
-    ['December', 12],
-    ['2', 2],
-    ['12', 12],
-    ['05', 5],
-  ]
-
-  months.forEach(([month, expected]) => {
-    it(`returns ${expected} for "${month}"`, () => {
-      expect(parseMonth(month)).toBe(expected)
-    })
-  })
-})

package/src/DateField/parse.ts

@@ -1,92 +0,0 @@
-const monthDayYearFormat = /^(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|\s)(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|,\s)(\d{4})$/i
-const dayMonthYearFormat = /^(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|\s)(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|,\s)(\d{4})$/i
-const yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/
-
-interface Params {
-  /**
-   * The string we want to parse into a date object
-   */
-  date: string
-
-  /**
-   * Format hint for parser
-   * Helps us know if we should parse day/month/year or month/day/year
-   *
-   * Should adhere to [date-fns spec](https://date-fns.org/v2.0.0-alpha.9/docs/format).
-   */
-  format?: string
-}
-
-export const parseDate = ({ date, format }: Params): Date | null => {
-  try {
-    const { year, month, day } = parseDateIntoObject(date, format)
-    return new Date(year, month - 1, day)
-  } catch (e) {
-    return null
-  }
-}
-
-export const isValidDate = (date: string) => {
-  return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date)
-}
-
-export const parseMonth = (monthString: string): number => {
-  const months = {
-    jan: 1,
-    feb: 2,
-    mar: 3,
-    apr: 4,
-    may: 5,
-    jun: 6,
-    jul: 7,
-    aug: 8,
-    sep: 9,
-    oct: 10,
-    nov: 11,
-    dec: 12,
-  }
-
-  const normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3)
-
-  if (/^\d+$/.test(normalizedString)) {
-    const month = parseInt(normalizedString, 10)
-    if (month >= 1 && month <= 12) {
-      return month
-    }
-  } else if (normalizedString in months) {
-    return months[normalizedString]
-  }
-
-  throw new Error(`Invalid month string: ${monthString}`)
-}
-
-const parseDateIntoObject = (date: string, format?: string) => {
-  if (format?.match(/d.*M/) && dayMonthYearFormat.test(date)) {
-    const { 1: day, 2: month, 3: year } = dayMonthYearFormat.exec(date)
-    return {
-      year: parseInt(year, 10),
-      month: parseMonth(month),
-      day: parseInt(day, 10),
-    }
-  }
-
-  if (monthDayYearFormat.test(date)) {
-    const { 1: month, 2: day, 3: year } = monthDayYearFormat.exec(date)
-    return {
-      year: parseInt(year, 10),
-      month: parseMonth(month),
-      day: parseInt(day, 10),
-    }
-  }
-
-  if (yearMonthDayFormat.test(date)) {
-    const { 1: year, 2: month, 3: day } = yearMonthDayFormat.exec(date)
-    return {
-      year: parseInt(year, 10),
-      month: parseMonth(month),
-      day: parseInt(day, 10),
-    }
-  }
-
-  throw new Error(`Invalid date: ${date}`)
-}

package/src/DateField/useArrowKeysToNavigateCalendar.ts

@@ -1,59 +0,0 @@
-import { useCallback } from "react"
-
-interface Props {
-  date: Date
-  calendarIsOpen: boolean
-  openCalendar: () => void
-  closeCalendar: () => void
-  onChange: (date: Date) => void
-}
-
-export const useArrowKeysToNavigateCalendar = ({
-  date,
-  calendarIsOpen,
-  closeCalendar,
-  openCalendar,
-  onChange,
-}: Props) => {
-  const incrementDate = useCallback(
-    (by: number): void => {
-      if (!date) return
-
-      const newDate = new Date(date)
-      newDate.setDate(newDate.getDate() + by)
-      onChange(newDate)
-    },
-    [date, onChange]
-  )
-
-  const handleInputKeyDown = useCallback(
-    (event: React.KeyboardEvent<HTMLInputElement>) => {
-      if (calendarIsOpen) {
-        if (event.key === 'ArrowUp') {
-          event.preventDefault()
-          incrementDate(-7)
-        } else if (event.key === 'ArrowDown') {
-          event.preventDefault()
-          incrementDate(7)
-        } else if (event.key === 'ArrowLeft') {
-          event.preventDefault()
-          incrementDate(-1)
-        } else if (event.key === 'ArrowRight') {
-          event.preventDefault()
-          incrementDate(1)
-        } else if (event.key === 'Enter') {
-          event.preventDefault()
-          closeCalendar()
-        }
-      } else {
-        if (event.key === 'ArrowDown') {
-          event.preventDefault()
-          openCalendar()
-        }
-      }
-    },
-    [calendarIsOpen, openCalendar, incrementDate]
-  )
-
-  return handleInputKeyDown
-}

package/src/DateField/useEditableDate.ts

@@ -1,81 +0,0 @@
-import { useCallback, useMemo, useState } from "react"
-import { format } from 'date-fns'
-import { parseDate } from "./parse"
-
-interface Params {
-  /**
-   * The currently selected date
-   */
-  date: Date
-
-  /**
-   * Format the displayed date using date-fns [format](https://date-fns.org/v2.0.0-alpha.9/docs/format) function.
-   */
-  dateFormat: string
-
-  /**
-   * Custom function that validates date
-   */
-  dateValidator: (date: Date) => boolean
-
-  /**
-   * Called when a valid date is entered
-   */
-  onChange: (date: Date) => void
-}
-
-export const useEditableDate = ({ date, dateFormat, dateValidator, onChange }: Params) => {
-  const [keyBuffer, setKeyBuffer] = useState<string>()
-  const [invalidKeyBuffer, setInvalidKeyBuffer] = useState(false)
-
-  const formattedDate = useMemo(() => {
-    if (keyBuffer !== undefined) {
-      return keyBuffer
-    } else {
-      return date ? format(date, dateFormat) : ''
-    }
-  }, [date, dateFormat, keyBuffer])
-
-  const setKeyBufferAndValidate = useCallback(
-    (value: string) => {
-      setKeyBuffer(value)
-      if (
-        value &&
-        !dateValidator(parseDate({ date: value, format: dateFormat }))
-      ) {
-        setInvalidKeyBuffer(true)
-      } else {
-        setInvalidKeyBuffer(false)
-      }
-    },
-    [dateFormat, dateValidator]
-  )
-
-  const setDate = useCallback(
-    (date: Date | string) => {
-      let newDate: Date
-
-      if (typeof date === 'string') {
-        setKeyBufferAndValidate(date)
-        newDate = parseDate({ date, format: dateFormat })
-      } else {
-        setKeyBufferAndValidate(undefined)
-        newDate = date
-      }
-
-      if (dateValidator(newDate) && onChange) onChange(newDate)
-    },
-    [onChange, setKeyBufferAndValidate, dateValidator, dateFormat]
-  )
-
-  const clearKeyBuffer = useCallback(() => {
-    setKeyBufferAndValidate(undefined)
-  }, [])
-
-  return {
-    formattedDate,
-    setDate,
-    clearKeyBuffer,
-    invalidKeyBuffer,
-  }
-}

package/src/Divider/Divider.mdx

@@ -1,43 +0,0 @@
----
-title: Divider
-category: General
-propsSummary: Accepts [Box](/box) props.
----
-
-```jsx live
-render(
-  <StackView
-    axis="horizontal"
-    alignment="center"
-    spacing={<Divider axis="vertical" margin={1} color="grey-7" />}
-  >
-    <Link>One</Link>
-    <Link>Two</Link>
-    <Link>Three</Link>
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <Menu>
-    <Menu.Item>One</Menu.Item>
-    <Menu.Item>Two</Menu.Item>
-    <Divider margin={0.5} />
-    <Menu.Item>Three</Menu.Item>
-    <Menu.Item>Four</Menu.Item>
-    <Menu.Item>Five</Menu.Item>
-  </Menu>
-)
-```
-
-```jsx live
-render(
-  <Card spacing={<Divider />}>
-    <Card.Section subdued>
-      <HeadingUppercase>Card Heading</HeadingUppercase>
-    </Card.Section>
-    <Card.Section>Card Section</Card.Section>
-  </Card>
-)
-```

package/src/Divider/Divider.tsx

@@ -1,51 +0,0 @@
-import React from 'react'
-
-import Box from '../Box'
-import { BoxProps, ColorProp, StyleProps } from '../index'
-
-export type DividerProps = {
-  /**
-   * The direction the dividing line should span.
-   */
-  axis?: 'horizontal' | 'vertical'
-
-  /**
-   * The color of the line
-   */
-  color?: ColorProp
-
-  /**
-   * Controls the space on sides opposite to the line's defined axis
-   */
-  margin?: number | string
-
-  /**
-   * The size of the line in pixels
-   */
-  size?: number
-} & StyleProps
-
-/**
- * Used to break up content
- */
-export function Divider({
-  axis = 'horizontal',
-  color = 'separatorTertiary',
-  margin = 0,
-  size = 1,
-  ...restProps
-}: DividerProps) {
-  const props = {
-    as: 'div',
-    alignSelf: 'stretch',
-    backgroundColor: color,
-  } as BoxProps
-  if (axis === 'horizontal') {
-    props.height = size + 'px'
-    props.marginVertical = margin
-  } else {
-    props.width = size + 'px'
-    props.marginHorizontal = margin
-  }
-  return <Box {...props} {...restProps} />
-}

package/src/Divider/index.ts

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