@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -0,0 +1,323 @@
+import React, { useEffect, HTMLAttributes, useReducer } from "react"
+import { useIntl } from "@cultureamp/i18n-react-intl"
+import classnames from "classnames"
+import {
+  CalendarRange,
+  CalendarRangeProps,
+  DateRange,
+  DisabledDays,
+  formatDateAsText,
+  isInvalidDate,
+  parseDateFromTextFormatValue,
+} from "~components/Calendar"
+import {
+  DatePickerSupportedLocales,
+  getLocale,
+} from "~components/DatePicker/utils/getLocale"
+import { DateValidationResponse } from "~components/Filter/FilterDatePicker"
+import { useDateInputHandlers } from "~components/Filter/FilterDatePicker/hooks/useDateInputHandlers"
+import { DataAttributes } from "~types/DataAttributes"
+import { OverrideClassName } from "~types/OverrideClassName"
+import {
+  DateRangeInputField,
+  DateRangeInputFieldProps,
+} from "../DateRangeInputField"
+import { filterDatePickerFieldReducer } from "./filterDateRangePickerFieldReducer"
+import { useEndDateValidation } from "./hooks/useEndDateValidation"
+import { useStartDateValidation } from "./hooks/useStartDateValidation"
+import { DateRangeFieldValidationMessage } from "./types"
+import { isValidRange } from "./utils/isValidRange"
+import styles from "./FilterDateRangePickerField.module.scss"
+
+type InputStartDateProps = DateRangeInputFieldProps["inputStartDateProps"]
+type InputEndDateProps = DateRangeInputFieldProps["inputEndDateProps"]
+
+type FilterInputProps<InputProps> = Omit<Partial<InputProps>, "value"> &
+  DataAttributes
+
+export type FilterDateRangePickerFieldProps = {
+  id: string
+  label: string
+  locale: DatePickerSupportedLocales
+  /**
+   * Sets first displayed month to month of provided date if there isn't a date set.
+   */
+  defaultMonth?: CalendarRangeProps["defaultMonth"]
+  /**
+   * The date range passed in from the consumer that renders in the inputs and calendar.
+   */
+  selectedRange: DateRange | undefined
+  /**
+   * Callback when date is updated either by the calendar picker or by typing and blurring.
+   * Date will return as `undefined` if empty, invalid or disabled.
+   */
+  onRangeChange: (range: DateRange | undefined) => void
+  /**
+   * See https://react-day-picker.js.org/api/types/Matcher
+   */
+  disabledDays?: DisabledDays
+  inputStartDateProps?: FilterInputProps<InputStartDateProps>
+  inputEndDateProps?: FilterInputProps<InputEndDateProps>
+  /**
+   * Custom description to provide extra context (input format help text remains).
+   */
+  description?: DateRangeInputFieldProps["description"]
+  validationMessage?: DateRangeFieldValidationMessage
+  /**
+   * Callback when a date is selected. Utilises internal validation if not set.
+   */
+  onValidate?: {
+    dateStart?: (validationResponse: DateValidationResponse) => void
+    dateEnd?: (validationResponse: DateValidationResponse) => void
+  }
+} & OverrideClassName<HTMLAttributes<HTMLDivElement>>
+
+export const FilterDateRangePickerField = ({
+  id,
+  label,
+  locale: propsLocale,
+  defaultMonth,
+  selectedRange,
+  onRangeChange,
+  disabledDays,
+  inputStartDateProps,
+  inputEndDateProps,
+  description,
+  validationMessage,
+  onValidate,
+  classNameOverride,
+  ...restProps
+}: FilterDateRangePickerFieldProps): JSX.Element => {
+  const { formatMessage } = useIntl()
+  const locale = getLocale(propsLocale)
+
+  const translatedDateFrom = formatMessage({
+    id: "filterDateRangePicker.dateFrom",
+    defaultMessage: "Date from",
+    description: "Label for the 'Date from' field",
+  })
+  const translatedDateTo = formatMessage({
+    id: "filterDateRangePicker.dateTo",
+    defaultMessage: "Date to",
+    description: "Label for the 'date to' field",
+  })
+  const inputStartDateLabel =
+    inputStartDateProps?.labelText || translatedDateFrom
+  const inputEndDateLabel = inputEndDateProps?.labelText || translatedDateTo
+
+  const transformDateToInputValue = (date: Date | undefined): string =>
+    date ? formatDateAsText(date, disabledDays, locale) : ""
+
+  const handleDateRangeChange = (dateRange: DateRange | undefined): void => {
+    onRangeChange(dateRange)
+  }
+
+  const dateStartValidation = useStartDateValidation({
+    inputLabel: inputStartDateLabel,
+    disabledDays,
+    validationMessage: validationMessage?.dateStart,
+    onValidate: onValidate?.dateStart,
+  })
+
+  const dateEndValidation = useEndDateValidation({
+    inputLabel: inputEndDateLabel,
+    disabledDays,
+    validationMessage: validationMessage?.dateEnd,
+    onValidate: onValidate?.dateEnd,
+  })
+
+  const validateStartDate = (
+    date: Date | undefined,
+    inputValue: string
+  ): Date | undefined =>
+    dateStartValidation.validateDate({
+      date,
+      inputValue,
+    })
+
+  const validateEndDate = (
+    date: Date | undefined,
+    inputValue: string
+  ): Date | undefined =>
+    dateEndValidation.validateDate({
+      endDate: date,
+      endDateInputValue: inputValue,
+      startDate: selectedRange?.from,
+      startDateFieldLabel: inputStartDateLabel,
+    })
+
+  const [state, dispatch] = useReducer(filterDatePickerFieldReducer, {
+    selectedStartDate: selectedRange?.from,
+    selectedEndDate: selectedRange?.to,
+    inputStartValue: transformDateToInputValue(selectedRange?.from),
+    inputEndValue: transformDateToInputValue(selectedRange?.to),
+    startMonth:
+      selectedRange?.from && !isInvalidDate(selectedRange.from)
+        ? selectedRange.from
+        : defaultMonth || new Date(),
+  })
+
+  const inputStartDateHandlers = useDateInputHandlers({
+    locale,
+    disabledDays,
+    setInputValue: value => {
+      dispatch({
+        type: "update_input_start_field",
+        inputValue: value,
+      })
+    },
+    onDateChange: date => {
+      const newDate = validateStartDate(date, state.inputStartValue)
+
+      // We need to parse the date from the input field due to the
+      // state.selectedEndDate being set to undefined whenever range is invalid
+      const endDate = parseDateFromTextFormatValue(state.inputEndValue, locale)
+      const isRangeValid = isValidRange(newDate, endDate)
+
+      dispatch({
+        type: "update_selected_start_date",
+        date: newDate,
+      })
+
+      // If the range ends up being invalid due to the change in start date
+      // we need to remove the end date as its now deemed invalid.
+      dispatch({
+        type: "update_selected_end_date",
+        date: isRangeValid ? endDate : undefined,
+      })
+
+      handleDateRangeChange({
+        from: newDate,
+        to: isRangeValid ? endDate : undefined,
+      })
+
+      if (newDate && endDate && !isInvalidDate(endDate)) {
+        // Update validation messages
+        dateEndValidation.validateEndDateBeforeStartDate({
+          startDate: newDate,
+          startDateFieldLabel: inputStartDateLabel,
+          endDate,
+          endDateInputValue: state.inputEndValue,
+        })
+      }
+    },
+    ...inputStartDateProps,
+  })
+
+  const inputEndDateHandlers = useDateInputHandlers({
+    locale,
+    disabledDays,
+    setInputValue: value => {
+      dispatch({
+        type: "update_input_end_field",
+        inputValue: value,
+      })
+    },
+    onDateChange: date => {
+      const startDate = state.selectedStartDate
+      const newEndDate = validateEndDate(date, state.inputEndValue)
+      const isRangeValid = isValidRange(startDate, newEndDate)
+
+      dispatch({
+        type: "update_selected_end_date",
+        date: isRangeValid ? newEndDate : undefined,
+      })
+
+      handleDateRangeChange({
+        from: startDate,
+        to: isRangeValid ? newEndDate : undefined,
+      })
+    },
+    ...inputEndDateProps,
+  })
+
+  const handleCalendarSelectRange: CalendarRangeProps["onSelect"] = range => {
+    const inputStartValue = transformDateToInputValue(range?.from)
+    const inputEndValue = transformDateToInputValue(range?.to)
+
+    const newStartDate = validateStartDate(range?.from, inputStartValue)
+    const newEndDate = validateEndDate(range?.to, inputEndValue)
+
+    dispatch({
+      type: "update_selected_start_date",
+      date: newStartDate,
+      inputValue: inputStartValue,
+    })
+
+    dispatch({
+      type: "update_selected_end_date",
+      date: newEndDate,
+      inputValue: inputEndValue,
+    })
+
+    handleDateRangeChange({ from: newStartDate, to: newEndDate })
+  }
+
+  useEffect(() => {
+    const newStartDate = validateStartDate(
+      selectedRange?.from,
+      state.inputStartValue
+    )
+    const newEndDate = validateEndDate(selectedRange?.to, state.inputEndValue)
+
+    if (newStartDate && !isValidRange(newStartDate, newEndDate)) {
+      dispatch({
+        type: "update_selected_end_date",
+        date: undefined,
+      })
+    }
+
+    handleDateRangeChange({ from: newStartDate, to: newEndDate })
+  }, [])
+
+  return (
+    <div
+      className={classnames(
+        styles.filterDateRangePickerField,
+        classNameOverride
+      )}
+      {...restProps}
+    >
+      <DateRangeInputField
+        id={`${id}--input`}
+        legend={label}
+        inputStartDateProps={{
+          labelText: inputStartDateLabel,
+          value: state.inputStartValue,
+          ...inputStartDateProps,
+          // The below props extend the values from inputStartDateProps, therefore must be below the spread
+          ...inputStartDateHandlers,
+        }}
+        inputEndDateProps={{
+          labelText: inputEndDateLabel,
+          value: state.inputEndValue,
+          ...inputEndDateProps,
+          // The below props extend the values from inputEndDateProps, therefore must be below the spread
+          ...inputEndDateHandlers,
+        }}
+        locale={locale}
+        description={description}
+        validationMessage={{
+          dateStart: dateStartValidation.validationMessage,
+          dateEnd: dateEndValidation.validationMessage,
+        }}
+        classNameOverride={styles.dateRangeInputField}
+      />
+      <CalendarRange
+        disabled={disabledDays}
+        locale={locale}
+        selected={{
+          from: state.selectedStartDate,
+          to: state.selectedEndDate,
+        }}
+        onSelect={handleCalendarSelectRange}
+        month={state.startMonth}
+        onMonthChange={(value: Date) =>
+          dispatch({ type: "navigate_months", date: value })
+        }
+      />
+    </div>
+  )
+}
+
+FilterDateRangePickerField.displayName = "FilterDateRangePickerField"

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/filterDateRangePickerFieldReducer.tsx

@@ -0,0 +1,77 @@
+import { isInvalidDate } from "~components/Calendar"
+
+type DateRangeFieldActions =
+  | {
+      type: "update_selected_start_date"
+      date: Date | undefined
+      inputValue?: string
+    }
+  | {
+      type: "update_selected_end_date"
+      date: Date | undefined
+      inputValue?: string
+    }
+  | {
+      type: "navigate_months"
+      date: Date | undefined
+    }
+  | {
+      type: "update_input_start_field"
+      inputValue: string
+    }
+  | {
+      type: "update_input_end_field"
+      inputValue: string
+    }
+
+type FilterDateRangePickerState = {
+  selectedStartDate: Date | undefined
+  selectedEndDate: Date | undefined
+  inputStartValue: string
+  inputEndValue: string
+  startMonth: Date
+}
+
+export const filterDatePickerFieldReducer = (
+  state: FilterDateRangePickerState,
+  action: DateRangeFieldActions
+): FilterDateRangePickerState => {
+  switch (action.type) {
+    case "update_selected_start_date":
+      return {
+        ...state,
+        selectedStartDate: action.date,
+        inputStartValue:
+          action.inputValue === undefined
+            ? state.inputStartValue
+            : action.inputValue,
+        startMonth:
+          action.date && !isInvalidDate(action.date) ? action.date : new Date(),
+      }
+    case "update_selected_end_date":
+      return {
+        ...state,
+        selectedEndDate: action.date,
+        inputEndValue:
+          action.inputValue === undefined
+            ? state.inputEndValue
+            : action.inputValue,
+      }
+    case "navigate_months":
+      return {
+        ...state,
+        startMonth:
+          action.date && !isInvalidDate(action.date) ? action.date : new Date(),
+      }
+    case "update_input_start_field":
+      return {
+        ...state,
+        inputStartValue: action.inputValue,
+      }
+    case "update_input_end_field":
+      return {
+        ...state,
+        inputEndValue: action.inputValue,
+      }
+  }
+}

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.spec.tsx

@@ -0,0 +1,68 @@
+import React from "react"
+import { renderHook, act } from "@testing-library/react-hooks"
+import { LabelledMessage } from "~components/LabelledMessage"
+import { useEndDateValidation } from "./useEndDateValidation"
+
+describe("useEndDateValidation()", () => {
+  describe("validateDate()", () => {
+    it("returns a validation message and no date", () => {
+      const { result } = renderHook(() =>
+        useEndDateValidation({
+          inputLabel: "End date",
+        })
+      )
+      const { validateDate } = result.current
+
+      act(() => {
+        const newDate = validateDate({
+          endDate: new Date("potato"),
+          endDateInputValue: "potato",
+          startDate: undefined,
+          startDateFieldLabel: "Start date",
+        })
+        expect(newDate).toEqual(undefined)
+      })
+
+      expect(result.current.validationMessage).toStrictEqual({
+        status: "error",
+        message: (
+          <LabelledMessage
+            label="End date"
+            message="potato is an invalid date"
+          />
+        ),
+      })
+    })
+  })
+
+  describe("validateEndDateBeforeStartDate()", () => {
+    it("returns a validation message and date", () => {
+      const { result } = renderHook(() =>
+        useEndDateValidation({
+          inputLabel: "End date",
+        })
+      )
+      const { validateEndDateBeforeStartDate } = result.current
+
+      act(() => {
+        const newDate = validateEndDateBeforeStartDate({
+          endDate: new Date("2023-04-03"),
+          endDateInputValue: "3 Apr 2023",
+          startDate: new Date("2023-05-01"),
+          startDateFieldLabel: "Start date",
+        })
+        expect(newDate).toEqual(new Date("2023-04-03"))
+      })
+
+      expect(result.current.validationMessage).toStrictEqual({
+        status: "error",
+        message: (
+          <LabelledMessage
+            label="End date"
+            message='Cannot be earlier than the selection in "Start date"'
+          />
+        ),
+      })
+    })
+  })
+})

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useEndDateValidation.ts

@@ -0,0 +1,71 @@
+import {
+  useDateValidation,
+  UseDateValidationArgs,
+  ValidationMessage,
+} from "~components/Filter/FilterDatePicker"
+import {
+  validateEndDateBeforeStartDate,
+  ValidateEndDateBeforeStartDateArgs,
+} from "../utils/validateEndDateBeforeStartDate"
+
+export type UseEndDateValidationArgs = UseDateValidationArgs
+
+export type UseEndDateValidationValue = {
+  validationMessage: ValidationMessage | undefined
+  validateDate: (args: {
+    endDate: Date | undefined
+    endDateInputValue: string
+    startDate: Date | undefined
+    startDateFieldLabel: React.ReactNode
+  }) => Date | undefined
+  validateEndDateBeforeStartDate: (
+    args: ValidateEndDateBeforeStartDateArgs
+  ) => Date | undefined
+}
+
+export const useEndDateValidation = (
+  args: UseEndDateValidationArgs
+): UseEndDateValidationValue => {
+  const { validationMessage, validateDate, updateValidation } =
+    useDateValidation(args)
+
+  const handleValidateEndDateBeforeStartDate: UseEndDateValidationValue["validateEndDateBeforeStartDate"] =
+    handlerArgs => {
+      const { validationResponse, newDate } =
+        validateEndDateBeforeStartDate(handlerArgs)
+      updateValidation(validationResponse)
+      return newDate
+    }
+
+  const validateEndDate: UseEndDateValidationValue["validateDate"] = ({
+    endDate,
+    endDateInputValue,
+    startDate,
+    startDateFieldLabel,
+  }) => {
+    const { validationResponse, newDate } = validateDate({
+      date: endDate,
+      inputValue: endDateInputValue,
+    })
+
+    if (validationResponse.isValidDate) {
+      if (newDate && startDate) {
+        return handleValidateEndDateBeforeStartDate({
+          startDate,
+          startDateFieldLabel,
+          endDate: newDate,
+          endDateInputValue,
+        })
+      }
+    }
+
+    updateValidation(validationResponse)
+    return newDate
+  }
+
+  return {
+    validationMessage,
+    validateDate: validateEndDate,
+    validateEndDateBeforeStartDate: handleValidateEndDateBeforeStartDate,
+  }
+}

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.spec.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+import { renderHook, act } from "@testing-library/react-hooks"
+import { LabelledMessage } from "~components/LabelledMessage"
+import { useStartDateValidation } from "./useStartDateValidation"
+
+describe("useStartDateValidation()", () => {
+  describe("validateDate()", () => {
+    it("returns a validation message and no date", () => {
+      const { result } = renderHook(() =>
+        useStartDateValidation({
+          inputLabel: "Start date",
+        })
+      )
+      const { validateDate } = result.current
+
+      act(() => {
+        const newDate = validateDate({
+          date: new Date("potato"),
+          inputValue: "potato",
+        })
+        expect(newDate).toBeUndefined()
+      })
+
+      expect(result.current.validationMessage).toStrictEqual({
+        status: "error",
+        message: (
+          <LabelledMessage
+            label="Start date"
+            message="potato is an invalid date"
+          />
+        ),
+      })
+    })
+  })
+})

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/hooks/useStartDateValidation.ts

@@ -0,0 +1,36 @@
+import {
+  useDateValidation,
+  UseDateValidationArgs,
+  ValidationMessage,
+} from "~components/Filter/FilterDatePicker"
+
+export type UseStartDateValidationArgs = UseDateValidationArgs
+
+export type UseStartDateValidationValue = {
+  validationMessage: ValidationMessage | undefined
+  validateDate: (args: {
+    date: Date | undefined
+    inputValue: string
+  }) => Date | undefined
+}
+
+export const useStartDateValidation = (
+  args: UseStartDateValidationArgs
+): UseStartDateValidationValue => {
+  const { validationMessage, validateDate, updateValidation } =
+    useDateValidation(args)
+
+  const validateStartDate: UseStartDateValidationValue["validateDate"] = ({
+    date,
+    inputValue,
+  }) => {
+    const { validationResponse, newDate } = validateDate({ date, inputValue })
+    updateValidation(validationResponse)
+    return newDate
+  }
+
+  return {
+    validationMessage,
+    validateDate: validateStartDate,
+  }
+}

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/index.ts

@@ -0,0 +1 @@
+export * from "./FilterDateRangePickerField"

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/types.ts

@@ -0,0 +1,6 @@
+import { ValidationMessage } from "~components/Filter/FilterDatePicker"
+
+export type DateRangeFieldValidationMessage = {
+  dateStart?: ValidationMessage
+  dateEnd?: ValidationMessage
+}

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.spec.ts

@@ -0,0 +1,51 @@
+import { isValidRange } from "./isValidRange"
+
+describe("isValidRange()", () => {
+  it("returns true when the start date is before the end date", () => {
+    const startDate = new Date("2022-05-15")
+    const endDate = new Date("2022-05-20")
+    const result = isValidRange(startDate, endDate)
+
+    expect(result).toEqual(true)
+  })
+
+  it("returns false when the start date is after the end date", () => {
+    const startDate = new Date("2022-05-25")
+    const endDate = new Date("2022-05-20")
+    const result = isValidRange(startDate, endDate)
+
+    expect(result).toEqual(false)
+  })
+
+  it("returns false when the start date is undefined", () => {
+    const startDate = undefined
+    const endDate = new Date("2022-05-20")
+    const result = isValidRange(startDate, endDate)
+
+    expect(result).toEqual(false)
+  })
+
+  it("returns false when the end date is undefined", () => {
+    const startDate = new Date("2022-05-20")
+    const endDate = undefined
+    const result = isValidRange(startDate, endDate)
+
+    expect(result).toEqual(false)
+  })
+
+  it("returns false when both the end and start dates are undefined", () => {
+    const startDate = undefined
+    const endDate = undefined
+    const result = isValidRange(startDate, endDate)
+
+    expect(result).toEqual(false)
+  })
+
+  it("returns true when both the end and start dates are equal", () => {
+    const startDate = new Date("2022-05-20")
+    const endDate = new Date("2022-05-20")
+    const result = isValidRange(startDate, endDate)
+
+    expect(result).toEqual(true)
+  })
+})

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/utils/isValidRange.ts

@@ -0,0 +1,7 @@
+export const isValidRange = (
+  startDate: Date | undefined,
+  endDate: Date | undefined
+): boolean => {
+  if (startDate && endDate) return startDate <= endDate
+  return false
+}