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

package/src/DateField/DateField.tsx

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

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

package/src/DateField/parse.test.ts

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

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

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

@@ -0,0 +1,81 @@
+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/Dialog/Dialog.mdx

@@ -0,0 +1,41 @@
+---
+title: Dialog
+category: Overlays
+summary: A UX compliant dialog that uses `HTMLDialogElement` under the hood.
+uxCompliant: true
+---
+
+```jsx live
+render(() => {
+  const simpleDialog = React.useRef(null)
+  const customDialog = React.useRef(null)
+  return (
+    <StackView spacing={2}>
+      <Button
+        title="Simple dialog"
+        theme="primary"
+        onClick={() => simpleDialog.current.showModal()}
+      />
+      <Dialog
+        dialogRef={simpleDialog}
+        title="Simple Dialog"
+        body="Look at this information"
+      />
+      <Button
+        title="Custom dialog"
+        theme="primary"
+        onClick={() => customDialog.current.showModal()}
+      />
+      <Dialog
+        dialogRef={customDialog}
+        title="My Custom Dialog"
+        showCancel
+        showDestroy
+        confirmText="Save"
+        subtitle="That has a subtitle"
+        body="Composable content area"
+      />
+    </StackView>
+  )
+})
+```