@planningcenter/tapestry-react 2.6.2 → 2.8.0

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,54 @@
+import { useCallback } from "react"
+
+interface Props {
+  date: Date
+  calendarIsOpen: boolean
+  openCalendar: () => void
+  onChange: (date: Date) => void
+}
+
+export const useArrowKeysToNavigateCalendar = ({
+  date,
+  calendarIsOpen,
+  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 === '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/Icon/Icon.mdx

@@ -68,8 +68,9 @@ Preview all of the available icon sets and their icon's names from `@planningcen
 
 ```jsx live
 render(() => {
-  const [value, setValue] = React.useState('')
-  const [appName, setAppName] = React.useState('general')
+  const iconSets = Object.keys(icons).filter(icons => icons !== "tapestry")
+  const [searchValue, setSearchValue] = React.useState('')
+  const [selectedIconSet, setSelectedIconSet] = React.useState('general')
 
   return (
     <StackView grow={1}>
@@ -77,12 +78,12 @@ render(() => {
         <Select
           basis={26}
           emptyValue="Choose icon set"
-          onChange={(event) => setAppName(event.value)}
-          defaultValue={appName}
+          onChange={(event) => setSelectedIconSet(event.value)}
+          defaultValue={selectedIconSet}
         >
-          {appNames.map((appName) => (
-            <Select.Option key={appName} value={appName}>
-              {appName}
+          {iconSets.map((icons) => (
+            <Select.Option key={icons} value={icons}>
+              {icons}
             </Select.Option>
           ))}
         </Select>
@@ -91,14 +92,14 @@ render(() => {
           autoFocus
           renderLeft={<Icon name="general.search" />}
           placeholder="Search by icon name"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
         />
       </StackView>
       <TileView minCellWidth={16} spacing={4} margin={4}>
-        {matchSorter(Object.keys(icons[appName]), value).map((iconName) => (
+        {matchSorter(Object.keys(icons[selectedIconSet]), searchValue).map((iconName) => (
           <StackView key={iconName} alignment="center" spacing={1}>
-            <Icon key={iconName} name={`${appName}.${iconName}`} size="xl" />
+            <Icon key={iconName} name={`${selectedIconSet}.${iconName}`} size="xl" />
             <Text fontSize={5} color="foregroundSecondary">
               {iconName}
             </Text>

package/src/Select/Select.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Select from '.'
+import { ThemeProvider } from '../ThemeProvider/ThemeProvider'
+
+const people = [
+  {
+    first: 'Charlie',
+    last: 'Brown',
+    twitter: 'dancounsell',
+    active: true,
+  },
+  {
+    first: 'Charlotte',
+    last: 'White',
+    twitter: 'mtnmissy',
+    active: true,
+  },
+  {
+    first: 'John',
+    last: 'James',
+    twitter: 'miller',
+    active: false,
+  },
+  {
+    first: 'Travis',
+    last: 'Arnold',
+    twitter: 'souporserious',
+    active: true,
+  },
+]
+
+const selectMock = jest.fn()
+
+test('can click to select item from list', async () => {
+  jest.useFakeTimers()
+
+  render(
+    <ThemeProvider>
+      <Select onChange={selectMock}>
+        {people.map(p => (
+          <Select.Option value={p.twitter} key={p.twitter}>{p.first} {p.last}</Select.Option>
+        ))}
+      </Select>
+    </ThemeProvider>
+  )
+
+  userEvent.click(screen.getByRole('button'))
+  jest.runAllTimers()
+  userEvent.click(screen.getByText('Travis Arnold'))
+
+  expect(selectMock).toHaveBeenCalledWith(
+    { selectedValue: 'souporserious', value: 'souporserious' }
+  )
+
+  jest.useRealTimers()
+})

package/src/system/colors/colors.js

@@ -12,27 +12,30 @@ export const palette = {
   },
 
   warning: {
-    lighter: 'hsl(60, 99%, 90%)',
-    light: 'hsl(56, 97%, 74%)',
-    base: 'hsl(50, 94%, 56%)',
-    dark: 'hsl(48, 93%, 48%)',
-    darker: 'hsl(42, 90%, 30%)',
+    lightest: 'hsl(42, 87%, 97%)',
+    lighter: 'hsl(42, 87%, 94%)',
+    light: 'hsl(42, 87%, 90%)',
+    base: 'hsl(42, 84%, 63%)',
+    dark: 'hsl(42, 84%, 55%)',
+    darker: 'hsl(42, 84%, 49%)',
   },
 
   error: {
-    lighter: 'hsl(7, 60%, 90%)',
-    light: 'hsl(7, 72%, 76%)',
-    base: 'hsl(7, 78%, 64%)',
-    dark: 'hsl(7, 80%, 52%)',
-    darker: 'hsl(7, 86%, 30%)',
+    lightest: 'hsl(7, 60%, 97%)',
+    lighter: 'hsl(9, 59%, 93%)',
+    light: 'hsl(8, 60%, 85%)',
+    base: 'hsl(8, 60%, 47%)',
+    dark: 'hsl(8, 60%, 45%)',
+    darker: 'hsl(9, 61%, 43%)',
   },
 
   success: {
-    lighter: 'hsl(96, 24%, 92%)',
-    light: 'hsl(96, 32%, 76%)',
-    base: 'hsl(96, 40%, 58%)',
-    dark: 'hsl(96, 44%, 50%)',
-    darker: 'hsl(96, 60%, 20%)',
+    lightest: 'hsl(93, 53%, 97%)',
+    lighter: 'hsl(95, 50%, 91%)',
+    light: 'hsl(86, 91%, 35%)',
+    base: 'hsl(86, 91%, 27%)',
+    dark: 'hsl(86, 91%, 25%)',
+    darker: 'hsl(86, 91%, 23%)',
   },
 
   red: [