@coopdigital/react 0.49.0 → 0.50.0

package/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import type { InputHTMLAttributes, JSX, Ref } from "react"
 
 import clsx from "clsx"
 
-import { StandardSizes } from "../../../src/types"
+import { ComponentConfig, StandardSizes } from "../../../src/types"
 import { useId } from "../../hooks/useId"
 
 export interface CheckboxProps extends Omit<
@@ -50,4 +50,9 @@ export const Checkbox = ({
   return <input {...componentProps} ref={ref} />
 }
 
+Checkbox.config = {
+  isField: true,
+  isInline: true,
+} satisfies ComponentConfig
+
 export default Checkbox

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,372 @@
+import type { FormEvent, InputHTMLAttributes, JSX, Ref } from "react"
+import type {
+  DayPickerProps,
+  Formatters,
+  Mode,
+  PropsMulti,
+  PropsRange,
+  PropsSingle,
+} from "react-day-picker"
+
+import clsx from "clsx"
+import { useCallback, useMemo, useReducer } from "react"
+import { DayPicker } from "react-day-picker"
+
+import type { ComponentConfig, StandardSizes } from "../../types"
+import type {
+  DateRange,
+  DateType,
+  TDateMultiple,
+  TDateRange,
+  TDateSingle,
+} from "./datepicker-utils"
+
+import { useId } from "../../hooks/useId"
+import Button from "../Button"
+import { CloseIcon, TickIcon } from "../Icon"
+import Popover from "../Popover"
+import TextInput from "../TextInput"
+import {
+  getDateValues,
+  getDefaultMonth,
+  getEndDate,
+  getInitialDate,
+  getStartDate,
+  shouldClose,
+  shouldSkipParsing,
+} from "./datepicker-utils"
+
+type OnDateSelectHandler = (
+  selected: string | string[] | { from?: string; to?: string } | undefined
+) => void
+
+interface PickerState {
+  message?: string
+  multiple?: TDateMultiple
+  open?: boolean
+  range?: TDateRange
+  single?: TDateSingle
+  validated: boolean
+  view?: Date
+}
+
+export interface DatePickerProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "onSelect" | "onChange" | "onChangeCapture" | "size" | "type"
+> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the wrapper. */
+  className?: string
+  /** **(Optional)** Specify whether the picker should close when selecting a date. Has no effect in range mode. */
+  closeOnSelect?: boolean
+  /** **(Optional)** Specify the date format. This affects the values displayed to users and the accepted format for manual inputs. */
+  dateFormat?: string
+  /** **(Optional)** Specify whether the Date Picker should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
+  /** **(Optional)** Specify dates to be disabled. Refer to react-daypicker docs for full configuration. */
+  disabledDates?: DayPickerProps["disabled"]
+  /** **(Optional)** Specify the upper bound for the picker.
+   *
+   * Default: today plus one year.
+   */
+  endDate?: Date
+  /** **(Optional)** Specify the Date Picker error state. */
+  error?: boolean
+  /** **(Optional)** Specify the Date Picker id. Will be auto-generated if not set. */
+  id?: string
+  /** **(Optional)** Specify the initial month view for the picker.
+   *
+   * Default: today.
+   */
+  initialDate?: Date | DateRange
+
+  initialSelected?: boolean
+
+  /** **(Optional)** Specify the picker mode. */
+  mode?: Mode
+  /** Specify the Datepicker name. */
+  name: string
+  /** Provided only for compatibility with form libraries. Use `onSelect` instead. */
+  onChange?: OnDateSelectHandler
+  /** **(Optional)** Callback to run when a date is selected and validated.
+   *
+   * Contains the selected value, which is either an ISO-8601 formatted date string, or an object with from and to values. */
+  onSelect?: OnDateSelectHandler
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLInputElement>
+  /** **(Optional)** Specify whether this is a required field. */
+  required?: boolean
+  /** **(Optional)** Specify the DatePicker size. */
+  size?: StandardSizes
+  /** **(Optional)** Specify the lower bound for the picker.
+   *
+   * Default: today minus one year.
+   */
+  startDate?: Date
+}
+
+const now = new Date()
+
+const componentConfig: ComponentConfig = {
+  fieldSuffix: "_display",
+  isField: true,
+}
+
+const baseValueProps = {
+  readOnly: true,
+  type: "hidden",
+}
+
+const footerMessage = {
+  multiple: "Pick one or more dates.",
+  range: "Pick a date range.",
+  single: "Pick a date.",
+}
+
+const initialState: PickerState = {
+  message: undefined,
+  validated: false,
+}
+
+const defaultFormatters: Partial<Formatters> = {
+  formatWeekdayName: (d) => d.toLocaleDateString("default", { weekday: "short" }).slice(0, 2),
+}
+
+const Calendar = ({
+  captionLayout = "label",
+  className,
+  disabled,
+  endMonth,
+  formatters,
+  showOutsideDays = true,
+  startMonth,
+  ...props
+}: DayPickerProps) => {
+  return (
+    <DayPicker
+      captionLayout={captionLayout}
+      className={className}
+      disabled={disabled}
+      endMonth={endMonth}
+      formatters={{
+        ...defaultFormatters,
+        ...formatters,
+      }}
+      navLayout="around"
+      showOutsideDays={showOutsideDays}
+      startMonth={startMonth}
+      weekStartsOn={1}
+      {...props}
+    />
+  )
+}
+
+export const DatePicker = ({
+  className,
+  closeOnSelect = true,
+  dateFormat = "dd/MM/yyyy",
+  disabled,
+  disabledDates,
+  endDate,
+  error = false,
+  id,
+  initialDate = now,
+  initialSelected = false,
+  mode = "single",
+  name,
+  onChange,
+  onSelect,
+  ref,
+  required = false,
+  size = "md",
+  startDate,
+  ...props
+}: DatePickerProps): JSX.Element => {
+  const uid = useId(id)
+
+  initialDate = getInitialDate(mode, initialDate)
+
+  startDate = useMemo(() => startDate ?? getStartDate(initialDate), [initialDate, startDate])
+  endDate = useMemo(() => endDate ?? getEndDate(initialDate), [initialDate, endDate])
+
+  const defaultMonth = useMemo(() => getDefaultMonth(initialDate), [initialDate])
+
+  let initialValues: { state?: TDateSingle | TDateRange | TDateMultiple; view?: Date } = {
+    state: undefined,
+    view: defaultMonth,
+  }
+
+  if (initialSelected) {
+    initialValues = getDateValues(mode, initialDate, dateFormat, now) ?? {}
+  }
+
+  const [state, setState] = useReducer(
+    (stale: PickerState, fresh: Partial<PickerState>) => ({ ...stale, ...fresh }),
+    { ...initialState, [mode]: initialValues.state, open: false, view: initialValues.view }
+  )
+
+  const updateValues = useCallback(
+    (selected: DateType) => {
+      const values = getDateValues(mode, selected, dateFormat, now)
+
+      if (values) {
+        setState({
+          message: values.message,
+          [mode]: values.state,
+          validated: values.validated,
+          view: values.view,
+          ...(shouldClose(mode, values.state?.value, closeOnSelect) && {
+            open: false,
+          }),
+        })
+
+        if (values.validated && values.state) {
+          typeof onChange === "function" && onChange(values.state.field)
+          typeof onSelect === "function" && onSelect(values.state.field)
+        }
+      }
+    },
+    [dateFormat, mode, onChange, onSelect, closeOnSelect]
+  )
+
+  const updateFromInput = useCallback(
+    (e: FormEvent<HTMLInputElement>) => {
+      if (shouldSkipParsing(e.currentTarget.value)) {
+        setState({
+          message: undefined,
+          [mode]: { input: e.currentTarget.value },
+          validated: false,
+        })
+      } else {
+        updateValues(e.currentTarget?.value)
+      }
+    },
+    [updateValues, mode]
+  )
+
+  const setOpen = useCallback((open: boolean) => setState({ open }), [])
+  const setView = useCallback((view: Date) => setState({ view }), [])
+  const resetState = useCallback(() => setState({ ...initialState, [mode]: undefined }), [mode])
+
+  const componentProps = {
+    className: clsx("coop-datepicker", className),
+    "data-error": error || undefined,
+    "data-mode": mode,
+    ...props,
+  }
+
+  const calendarProps: {
+    multiple: PropsMulti
+    range: PropsRange
+    single: PropsSingle
+  } = {
+    multiple: { mode: "multiple", selected: state.multiple?.value },
+    range: { mode: "range", selected: state.range?.value },
+    single: { mode: "single", selected: state.single?.value },
+  }
+
+  const valueProps = {
+    ...baseValueProps,
+    id: uid,
+    name: name,
+  }
+
+  const getPlaceholder = () => {
+    const lowerCaseDateFormat = dateFormat.toLowerCase()
+    switch (mode) {
+      case "range":
+        return lowerCaseDateFormat + " - " + lowerCaseDateFormat
+      case "multiple":
+        return lowerCaseDateFormat + ", " + lowerCaseDateFormat
+      default:
+        return lowerCaseDateFormat
+    }
+  }
+
+  return (
+    <div {...componentProps}>
+      <Popover onOpenChange={setOpen} open={state.open}>
+        <Popover.Anchor className="coop-datepicker-inner">
+          <TextInput
+            autoComplete="off"
+            className="coop-datepicker-input"
+            disabled={disabled}
+            id={uid + componentConfig.fieldSuffix}
+            //maxLength={dateFormat.length}
+            name={name + componentConfig.fieldSuffix}
+            onChange={updateFromInput}
+            placeholder={getPlaceholder()}
+            ref={ref}
+            required={required}
+            size={size}
+            value={state?.[mode]?.input ?? ""}
+          />
+          <Popover.Trigger asChild>
+            <Button className="coop-datepicker-button" disabled={disabled} size={size}>
+              Select
+            </Button>
+          </Popover.Trigger>
+        </Popover.Anchor>
+        <Popover.Content
+          aria-label="Date picker"
+          className="coop-datepicker-calendar bg-white"
+          collisionPadding={16}
+          sideOffset={4}
+        >
+          <Calendar
+            // jsx-ally throws here because we set autoFocus, but this
+            // is not a standard element. Daypicker uses this value to
+            // focus the day rather than the nav when it renders.
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+            captionLayout="dropdown"
+            //defaultMonth={defaultMonth}
+            disabled={disabledDates}
+            endMonth={endDate}
+            month={state.view}
+            onMonthChange={setView}
+            onSelect={updateValues}
+            startMonth={startDate}
+            {...calendarProps[mode]}
+          />
+          <div className="coop-datepicker-actions">
+            <Button aria-label="Cancel" onClick={resetState} size="sm" variant="grey">
+              Clear <CloseIcon stroke="black" strokeWidth={1} />
+            </Button>
+            <Popover.Close asChild>
+              <Button aria-label="Accept" size="sm">
+                OK <TickIcon stroke="white" strokeWidth={1} />
+              </Button>
+            </Popover.Close>
+          </div>
+        </Popover.Content>
+      </Popover>
+
+      <div aria-live="assertive" className="sr-only coop-datepicker-status" role="status">
+        {state.message ?? footerMessage[mode]}
+      </div>
+
+      {mode === "single" && <input {...valueProps} value={state.single?.field ?? ""} />}
+      {mode === "multiple" && <input {...valueProps} value={state.multiple?.field ?? ""} />}
+      {mode === "range" && (
+        <>
+          <input
+            {...baseValueProps}
+            id={`${uid}_start`}
+            name={`${name}_start`}
+            value={state.range?.field?.from ?? ""}
+          />
+          <input
+            {...baseValueProps}
+            id={`${uid}_end`}
+            name={`${name}_end`}
+            value={state.range?.field?.to ?? ""}
+          />
+        </>
+      )}
+    </div>
+  )
+}
+
+DatePicker.config = componentConfig
+
+export default DatePicker

package/src/components/DatePicker/datepicker-utils.ts

@@ -0,0 +1,269 @@
+import { addYears, format, isBefore, isValid, parse } from "date-fns"
+import { Mode } from "react-day-picker"
+
+interface DateRangeStr {
+  from?: string
+  to?: string
+}
+
+export interface DateRange {
+  from: Date | undefined
+  to?: Date | undefined
+}
+
+interface DateReturn {
+  message?: string
+  validated?: boolean
+  view?: Date
+}
+
+export type DateBase = string | undefined
+export type DateType = Date | Date[] | DateRange | string | undefined
+
+export interface TDateSingle {
+  event?: string
+  field?: string
+  input: string
+  value?: Date
+}
+
+export interface TDateMultiple {
+  event?: string[]
+  field?: string
+  input: string
+  value?: Date[]
+}
+
+export interface TDateRange {
+  event?: DateRangeStr
+  field?: DateRangeStr
+  input: string
+  value?: DateRange
+}
+
+type RDateSingle = DateReturn & { state?: TDateSingle }
+type RDateMultiple = DateReturn & { state?: TDateMultiple }
+type RDateRange = DateReturn & { state?: TDateRange }
+
+export function isValidDate(date: unknown): date is Date {
+  return !!date && typeof date !== "string" && typeof date !== "number" && isValid(date)
+}
+
+export function isValidRangeFrom(date: unknown): date is { from: Date; to?: Date } {
+  return !!date && typeof date === "object" && "from" in date && isValid(date.from)
+}
+
+export function isValidRangeTo(date: unknown): date is { from?: Date; to: Date } {
+  return !!date && typeof date === "object" && "to" in date && isValid(date.to)
+}
+
+export function getISODateString(date: Date): string {
+  return format(date, "yyyy-MM-dd")
+}
+
+export function getRangeFromString(input: string): DateRangeStr {
+  if (input.includes("-")) {
+    const [from, to] = input.split("-")
+
+    return { from: from.trim(), to: to.trim() }
+  }
+
+  return { from: undefined, to: undefined }
+}
+
+export const getStartDate = (date: Date | Partial<DateRange>): Date | undefined => {
+  if (isValidDate(date)) return addYears(date, -1)
+  else if (isValidRangeFrom(date)) return addYears(date.from, -1)
+  return undefined
+}
+
+export const getEndDate = (date: Date | Partial<DateRange>): Date | undefined => {
+  if (isValidDate(date)) return addYears(date, 1)
+  else if (isValidRangeTo(date)) return addYears(date.to, 1)
+  return undefined
+}
+
+export const getDefaultMonth = (date: Date | DateRange): Date | undefined => {
+  if (isValid(date)) return date as Date
+  else if (isValidRangeFrom(date)) return date.from
+  return undefined
+}
+
+export const getInitialDate = (mode: Mode, date: Date | DateRange): Date | DateRange => {
+  let initialDate = date
+
+  if (mode === "range") {
+    let from, to
+    if ("from" in date) {
+      from = date.from
+      to = date.to ?? date.from
+    } else {
+      from = to = date
+    }
+
+    initialDate = { from, to }
+  }
+
+  return initialDate
+}
+
+/**
+ * Each getter returns an object with the following shape:
+ *
+ * message ........... read out by screen readers in the picker live region
+ * state.event ....... attached to the onChange / onSelect event when it fires
+ * state.field ....... value(s) for the hidden input field(s)
+ * state.input ....... value for the visible input field
+ * state.value ....... parsed date object(s)
+ * validated ......... boolean indicating dates are valid
+ * view .............. date (month) to show in the picker window
+ */
+
+const initialState = {
+  state: { input: "" },
+  validated: false,
+}
+
+export function getSingleDate(date: Date | DateBase, df: string, now: Date): RDateSingle {
+  if (!date) return initialState
+
+  let parsed: Date
+  let input = ""
+
+  if (typeof date === "string") {
+    input = date.toString() ?? ""
+    parsed = parse(date, df, now)
+  } else if (isValidDate(date)) {
+    input = format(date, df)
+    parsed = date
+  } else {
+    return initialState
+  }
+
+  if (isValidDate(parsed)) {
+    const isoString = getISODateString(parsed)
+
+    return {
+      message: `Selected ${input}`,
+      state: { event: isoString, field: isoString, input, value: parsed },
+      validated: true,
+      view: parsed,
+    }
+  }
+
+  return { state: { input: date.toString() }, validated: false }
+}
+
+export function getMultipleDate(date: Date[] | DateBase, df: string, now: Date): RDateMultiple {
+  if (!date) return initialState
+
+  let parsed: Date[] = []
+  let input = ""
+
+  if (typeof date === "string") {
+    parsed = date
+      .split(",")
+      .map((d) => parse(d.trim(), df, now))
+      .filter((d) => isValid(d))
+    input = date
+  } else if (Array.isArray(date)) {
+    parsed = date.filter((d) => isValid(d))
+    input = parsed.map((d) => format(d, df)).join(", ")
+  }
+
+  if (parsed.length > 0) {
+    const formattedArray = parsed.map((d) => format(d, df))
+    const isoString = parsed.map((d) => getISODateString(d))
+    return {
+      message: `Selected ${formattedArray.join(", ")}`,
+      state: {
+        event: isoString,
+        field: isoString.join(","),
+        input,
+        value: parsed,
+      },
+      validated: true,
+      view: parsed.at(-1),
+    }
+  }
+
+  return { state: { input }, validated: false }
+}
+
+export function getRangeDate(date: DateRange | DateBase, df: string, now: Date): RDateRange {
+  if (!date) return initialState
+
+  const parsed: DateRange = { from: undefined, to: undefined }
+  const formatted: DateRangeStr = {}
+
+  let input = ""
+
+  if (typeof date === "string") {
+    if (date.includes("-")) {
+      const { from, to } = getRangeFromString(date)
+      if (from && to) {
+        parsed.from = parse(from, df, now)
+        parsed.to = parse(to, df, now)
+
+        formatted.from = from
+        formatted.to = to
+      }
+      input = `${from} - ${to}`
+    } else {
+      input = date
+    }
+  } else if (date?.from && date?.to && isValid(date.from) && isValid(date.to)) {
+    parsed.from = date.from
+    parsed.to = date.to
+
+    formatted.from = format(parsed.from, df)
+    formatted.to = format(parsed.to, df)
+
+    input = `${formatted.from} - ${formatted.to}`
+  } else {
+    return initialState
+  }
+
+  if (isValidDate(parsed.from) && isValidDate(parsed.to)) {
+    if (isBefore(parsed.to, parsed.from)) {
+      const { from: pf, to: pt } = parsed
+      parsed.from = pt
+      parsed.to = pf
+    }
+
+    const isoString = {
+      from: getISODateString(parsed.from),
+      to: getISODateString(parsed.to),
+    }
+
+    return {
+      message: `Selected ${formatted.from} to ${formatted.to}`,
+      state: { event: isoString, field: isoString, input, value: parsed },
+      validated: true,
+      view: parsed.to,
+    }
+  }
+
+  return { state: { input }, validated: false }
+}
+
+export const getDateValues = (mode: Mode, selected: DateType, dateFormat: string, now: Date) => {
+  if (isSingle(mode, selected)) return getSingleDate(selected, dateFormat, now)
+  else if (isMultiple(mode, selected)) return getMultipleDate(selected, dateFormat, now)
+  else if (isRange(mode, selected)) return getRangeDate(selected, dateFormat, now)
+}
+
+export const shouldSkipParsing = (value: string): boolean => {
+  return typeof value !== "string" ? true : !!(value.length < 8 || value.split("/").length < 3)
+}
+
+export const shouldClose = (mode: Mode, value: DateType, closeOnSelect?: boolean): boolean => {
+  if (!closeOnSelect || !value) return false
+  else if (isSingle(mode, value)) return true
+  else if (isRange(mode, value) && value?.to?.getTime() !== value?.from?.getTime()) return true
+  else return false
+}
+
+export const isSingle = (m: Mode, d: DateType): d is Date & DateBase => m === "single"
+export const isMultiple = (m: Mode, d: DateType): d is Date[] & DateBase => m === "multiple"
+export const isRange = (m: Mode, d: DateType): d is DateRange & DateBase => m === "range"

package/src/components/DatePicker/index.ts

@@ -0,0 +1,5 @@
+import DatePicker from "./DatePicker"
+
+export default DatePicker
+export { DatePicker }
+export * from "./DatePicker"