@coopdigital/react 1.31.0 → 1.32.0

package/dist/validations/date.js

@@ -0,0 +1,79 @@
+import { formatLimit, getDateErrors, getInvalidParts, getMessage, getRangeError, parseDateValue, toISODate, toLimit, trimParts } from "./date-internal.js";
+// src/validations/date.ts
+const DATE_PARTS = [
+	"day",
+	"month",
+	"year"
+];
+const realDate = (subject = "Date") => `${subject} must be a real date`;
+const DATE_ERROR_MESSAGES = {
+	"after-max": (subject = "Date", limits) => `${subject} must be on or before ${limits?.max}`,
+	"before-min": (subject = "Date", limits) => `${subject} must be on or after ${limits?.min}`,
+	"impossible-date": realDate,
+	"invalid-day": realDate,
+	"invalid-month": realDate,
+	"invalid-year": "Year must include 4 numbers",
+	"missing-date": "Enter a date",
+	"missing-day": (subject = "Date") => `${subject} must include a day`,
+	"missing-month": (subject = "Date") => `${subject} must include a month`,
+	"missing-year": (subject = "Date") => `${subject} must include a year`,
+	"unsupported-parts": realDate
+};
+const validateDateParts = (date, { max, messages = {}, min, parts = DATE_PARTS, subject } = {}) => {
+	const minDate = min === void 0 ? void 0 : toLimit(min, "min");
+	const maxDate = max === void 0 ? void 0 : toLimit(max, "max");
+	const values = trimParts(date);
+	const errors = getDateErrors(values, parts);
+	let value = "";
+	if (errors.length === 0) {
+		value = toISODate(values, parts);
+		const rangeError = value ? getRangeError(value, minDate, maxDate) : "unsupported-parts";
+		if (!rangeError) return {
+			valid: true,
+			value
+		};
+		errors.push(rangeError);
+	}
+	const [error] = errors;
+	const limits = {
+		max: maxDate && value ? formatLimit(maxDate, value.length) : void 0,
+		min: minDate && value ? formatLimit(minDate, value.length) : void 0
+	};
+	return {
+		error,
+		invalid: getInvalidParts(errors, parts),
+		message: getMessage(error, subject, messages, limits, DATE_ERROR_MESSAGES),
+		valid: false
+	};
+};
+/** Validate a date.
+*
+* If you are only validating a partial date (eg month-year), provide
+* the `parts` option. */
+const validateDate = (value, options = {}) => {
+	const date = parseDateValue(value, options.parts);
+	if (date) return validateDateParts(date, options);
+	const { messages, parts = DATE_PARTS, subject } = options;
+	return {
+		error: "impossible-date",
+		invalid: parts,
+		message: getMessage("impossible-date", subject, messages, {}, DATE_ERROR_MESSAGES),
+		valid: false
+	};
+};
+/** Validate a date of birth. */
+const validateDob = (value, options = {}) => {
+	const { messages, ...rest } = options;
+	return validateDate(value, {
+		max: /* @__PURE__ */ new Date(),
+		messages: {
+			"after-max": "Date of birth must be today or in the past",
+			"missing-date": "Enter your date of birth",
+			...messages
+		},
+		parts: DATE_PARTS,
+		subject: "Date of birth",
+		...rest
+	});
+};
+export { DATE_ERROR_MESSAGES, DATE_PARTS, validateDate, validateDateParts, validateDob };

package/dist/validations/index.d.ts

@@ -0,0 +1,2 @@
+import { DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DatePart, DateParts, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, validateDate, validateDateParts, validateDob } from "./date.js";
+export { DATE_ERROR_MESSAGES, DATE_PARTS, DateErrorCode, DateErrorMessage, DatePart, DateParts, DateValidation, DateValidationError, DateValidationOptions, DateValidationSuccess, validateDate, validateDateParts, validateDob };

package/dist/validations/index.js

@@ -0,0 +1 @@
+export { DATE_ERROR_MESSAGES, DATE_PARTS, validateDate, validateDateParts, validateDob } from "./date.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -19,6 +19,10 @@
     "./icons": {
       "types": "./dist/components/icons/index.d.ts",
       "default": "./dist/components/icons/index.js"
+    },
+    "./validations": {
+      "types": "./dist/validations/index.d.ts",
+      "default": "./dist/validations/index.js"
     }
   },
   "sideEffects": false,
@@ -41,8 +45,10 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "test:behaviour": "./test-utils/run-playwright-tests.sh -g behaviour",
+    "test:behaviour": "./test-utils/run-playwright-tests.sh -g @behaviour",
     "test:behaviour:ui": "npm run test:behaviour -- --ui",
+    "test:recipes": "./test-utils/run-playwright-tests.sh -g @recipe",
+    "test:recipes:ui": "npm run test:recipes -- --ui",
     "test:avt": "./test-utils/run-playwright-tests.sh -g avt --project=chromium",
     "test:avt:ui": "npm run test:avt -- --ui",
     "test:vrt": "ENVIRONMENT=docker ./test-utils/run-playwright-tests.sh -g vrt --workers 4 --timeout 5000 --fully-parallel",
@@ -51,7 +57,7 @@
     "test:e2e:ci": "npx playwright test --shard=$CI_NODE_INDEX/$CI_NODE_TOTAL",
     "test:avt:ci": "npm run test:e2e:ci -- -g avt --project=chromium",
     "test:vrt:ci": "npm run test:e2e:ci -- -g vrt",
-    "test:behaviour:ci": "npm run test:e2e:ci -- -g behaviour",
+    "test:behaviour:ci": "npm run test:e2e:ci -- -g @behaviour",
     "build": "tsx scripts build",
     "build:docs": "tsx scripts build-docs",
     "build:icons": "tsx scripts build-icons",
@@ -71,11 +77,11 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.14.0",
     "@playwright/test": "^1.64.1",
-    "@storybook/addon-a11y": "^10.6.2",
-    "@storybook/addon-docs": "^10.6.2",
-    "@storybook/addon-links": "^10.6.2",
-    "@storybook/addon-onboarding": "^10.6.2",
-    "@storybook/react-vite": "^10.6.2",
+    "@storybook/addon-a11y": "^10.6.4",
+    "@storybook/addon-docs": "^10.6.4",
+    "@storybook/addon-links": "^10.6.4",
+    "@storybook/addon-onboarding": "^10.6.4",
+    "@storybook/react-vite": "^10.6.4",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.3.0",
@@ -84,10 +90,10 @@
     "react": "^19.3.1",
     "react-dom": "^19.3.1",
     "react-element-to-jsx-string": "^18.0.0",
-    "react-hook-form": "^7.90.0",
+    "react-hook-form": "^7.91.0",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.6.2",
+    "storybook": "^10.6.4",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -111,7 +117,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.22.0",
+    "@coopdigital/styles": "^1.23.0",
     "@radix-ui/react-popover": "^1.3.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -120,5 +126,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.2"
   },
-  "gitHead": "6a649143b3381563d36754d873c1410eb307fdc4"
+  "gitHead": "c826b0325c655154524a6627eb705bce9f84abae"
 }

package/src/components/Button/Button.tsx

@@ -34,8 +34,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLElement>
-  /** Specify the component size. */
-  size?: StandardSizes
+  /** Specify the component size. Use `xs` only in compact places, such as the actions in a calendar. */
+  size?: "xs" | StandardSizes
   /** Specify the component variant. */
   variant?: "solid" | "ghost" | "text"
 }

package/src/components/DateInput/DateInput.context.ts

@@ -2,8 +2,9 @@
 import { createContext, type RefObject, useContext } from "react"
 
 import type { StandardSizes } from "@/types"
+import type { DatePart, DateParts } from "@/validations"
 
-import type { DateInputMode, DatePart, DateParts } from "./dateinput-utils"
+import type { DateInputMode } from "./dateinput-utils"
 
 export interface DateInputContextValue {
   changePart: (part: DatePart, value: string) => void

package/src/components/DateInput/DateInput.tsx

@@ -5,20 +5,17 @@ import clsx from "clsx"
 import mergeRefs from "merge-refs"
 import { useRef, useState } from "react"
 
+import type { DatePart, DateParts } from "@/validations"
+
 import { Field } from "@/components/Field"
 import { TextInput, type TextInputProps } from "@/components/TextInput"
 import { useFormReset } from "@/hooks/useFormReset"
 import { useId } from "@/hooks/useId"
 import { StandardSizes } from "@/types"
 import { forEachSlot } from "@/utils"
+import { formatDateValue, toDateParts, toDateValue } from "@/validations/date-internal"
 
-import { formatDateValue, toDateParts, toDateValue } from "./dateinput-internal"
-import {
-  type DateInputMode,
-  type DatePart,
-  type DateParts,
-  getAutoComplete,
-} from "./dateinput-utils"
+import { type DateInputMode, getAutoComplete } from "./dateinput-utils"
 import { DateInputContext, useDateInput } from "./DateInput.context"
 
 export interface DateInputChangeEvent {

package/src/components/DateInput/dateinput-utils.ts

@@ -1,189 +1,7 @@
-// Validation for dates entered as separate day, month and year parts.
-// The DateInput entry exports this to server code too, so it must not import
-// React or use "use client".
-
-import {
-  formatLimit,
-  getDateErrors,
-  getInvalidParts,
-  getMessage,
-  getRangeError,
-  type Limits,
-  parseDateValue,
-  toISODate,
-  toLimit,
-  trimParts,
-} from "./dateinput-internal"
-
-export type DatePart = "day" | "month" | "year"
-
-export interface DateParts {
-  day?: string
-  month?: string
-  year?: string
-}
+import type { DatePart } from "@/validations"
 
 export type DateInputMode = "dob" | undefined
 
-export type DateErrorCode =
-  | "missing-date"
-  | "missing-day"
-  | "missing-month"
-  | "missing-year"
-  | "invalid-day"
-  | "invalid-month"
-  | "invalid-year"
-  | "impossible-date"
-  | "unsupported-parts"
-  | "before-min"
-  | "after-max"
-
-/** A message, or a function that builds one from the label. */
-export type DateErrorMessage = string | ((label?: string) => string)
-
-export interface DateValidationOptions {
-  /** The name of the date, as it would start a sentence, such as "Date
-   * of birth".
-   *
-   * Default: `Date`. */
-  label?: string
-  /** The latest date allowed, as a `Date` or an ISO date such as `2026-12-31`.
-   *
-   * Only the parts used are compared, such as the month and year. */
-  max?: Date | string
-  /** Messages to use instead of the defaults. */
-  messages?: Partial<Record<DateErrorCode, DateErrorMessage>>
-  /** The earliest date allowed, as a `Date` or an ISO date such as `2020-01-01`.
-   *
-   * Only the parts used are compared, such as the month and year. */
-  min?: Date | string
-  /** The parts used, in the order they are entered.
-   *
-   * Default: `day`, `month`, `year`. */
-  parts?: DatePart[]
-}
-
-export interface DateValidationSuccess {
-  /** Whether the date is valid. */
-  valid: true
-  /** The date as an ISO 8601 string, such as 1990-08-21. */
-  value: string
-}
-
-export interface DateValidationError {
-  /** The code for the first problem, in the order the parts are entered. */
-  error: DateErrorCode
-  /** The parts with an error. Every part is invalid when the date is
-   * empty, impossible, has no ISO format or is outside `min` and `max`. */
-  invalid: DatePart[]
-  /** The message for the error. */
-  message: string
-  /** Whether the date is valid. */
-  valid: false
-}
-
-export type DateValidation = DateValidationSuccess | DateValidationError
-
-export const DATE_PARTS: DatePart[] = ["day", "month", "year"]
-
-const realDate = (label = "Date") => `${label} must be a real date`
-
-export const DATE_ERROR_MESSAGES: Record<
-  DateErrorCode,
-  string | ((label?: string, limits?: Limits) => string)
-> = {
-  "after-max": (label = "Date", limits) => `${label} must be on or before ${limits?.max}`,
-  "before-min": (label = "Date", limits) => `${label} must be on or after ${limits?.min}`,
-  "impossible-date": realDate,
-  "invalid-day": realDate,
-  "invalid-month": realDate,
-  "invalid-year": "Year must include 4 numbers",
-  "missing-date": "Enter a date",
-  "missing-day": (label = "Date") => `${label} must include a day`,
-  "missing-month": (label = "Date") => `${label} must include a month`,
-  "missing-year": (label = "Date") => `${label} must include a year`,
-  "unsupported-parts": realDate,
-}
-
-// Check parts and return if they make a complete, possible date with an
-// ISO format, between min and max. A valid date has its ISO value. An
-// invalid date has the code and message for the first problem, and the
-// parts with an error.
-export const validateDateParts = (
-  date: DateParts,
-  { label, max, messages = {}, min, parts = DATE_PARTS }: DateValidationOptions = {}
-): DateValidation => {
-  const minDate = min === undefined ? undefined : toLimit(min, "min")
-  const maxDate = max === undefined ? undefined : toLimit(max, "max")
-  const values = trimParts(date)
-  const errors = getDateErrors(values, parts)
-  let value = ""
-
-  if (errors.length === 0) {
-    value = toISODate(values, parts)
-    const rangeError = value ? getRangeError(value, minDate, maxDate) : "unsupported-parts"
-
-    if (!rangeError) return { valid: true, value }
-    errors.push(rangeError)
-  }
-
-  const [error] = errors
-  const limits = {
-    max: maxDate && value ? formatLimit(maxDate, value.length) : undefined,
-    min: minDate && value ? formatLimit(minDate, value.length) : undefined,
-  }
-
-  return {
-    error,
-    invalid: getInvalidParts(errors, parts),
-    message: getMessage(error, label, messages, limits, DATE_ERROR_MESSAGES),
-    valid: false,
-  }
-}
-
-/** Check a value, such as the DateInput value or the value a form
- * submits, the same way as `validateDateParts`. Use the same `parts` as
- * the DateInput. */
-export const validateDate = (
-  value: string,
-  options: DateValidationOptions = {}
-): DateValidation => {
-  const date = parseDateValue(value, options.parts)
-  if (date) return validateDateParts(date, options)
-
-  // A dash typed in a part leaves it unclear which part is wrong, so the
-  // whole date is
-  const { label, messages, parts = DATE_PARTS } = options
-
-  return {
-    error: "impossible-date",
-    invalid: parts,
-    message: getMessage("impossible-date", label, messages, {}, DATE_ERROR_MESSAGES),
-    valid: false,
-  }
-}
-
-/** As this is a more specific function for a birth of date validation, we can make some assumptions.
- * Such as, date needs to be today or in the past and error message should reflect date of birth.
- * Check a value, such as the DateInput value or the value a form
- * submits, the same way as `validateDateParts`. Use the same `parts` as
- * the DateInput. */
-
-export const validateDob = (value: string, options: DateValidationOptions = {}): DateValidation => {
-  const { messages, ...rest } = options
-  return validateDate(value, {
-    label: "Date of birth",
-    max: new Date(),
-    messages: {
-      "after-max": "Date of birth must be today or in the past",
-      "missing-date": "Enter your date of birth",
-      ...messages,
-    },
-    parts: DATE_PARTS,
-    ...rest,
-  })
-}
-
 export const getAutoComplete = (mode: DateInputMode, part: DatePart): string | undefined => {
   if (!mode) return undefined
   if (mode === "dob") {

package/src/index.ts

@@ -33,3 +33,4 @@ export * from "./components/Textarea/Textarea"
 export * from "./components/TextInput/TextInput"
 export * from "./components/ValidationSummary/ValidationSummary"
 export * from "./components/Wrapper"
+export * from "./validations"

package/src/{components/DateInput/dateinput-internal.ts → validations/date-internal.ts}

@@ -1,6 +1,3 @@
-// Not exported from the DateInput entry. No React or "use client", as
-// dateinput-utils imports it.
-
 import { format, formatISO, isExists, isValid, parseISO } from "date-fns"
 
 import type {
@@ -9,7 +6,7 @@ import type {
   DatePart,
   DateParts,
   DateValidationOptions,
-} from "./dateinput-utils"
+} from "./date"
 
 type DefaultMessages = typeof DATE_ERROR_MESSAGES
 
@@ -32,14 +29,13 @@ export const WHOLE_DATE_ERRORS = new Set<DateErrorCode>([
 
 const valueParts = (parts: DatePart[]) => VALUE_ORDER.filter((part) => parts.includes(part))
 
-// Parts as typed to a value, such as 2026-2-30. Empty if every part is empty
 export const formatDateValue = (date: DateParts, parts: DatePart[] = VALUE_ORDER): string => {
   const values = valueParts(parts).map((part) => date[part] ?? "")
 
   return values.every((value) => value === "") ? "" : values.join("-")
 }
 
-// A piece per part. A leading -- is the ISO form of a date without a year
+// A leading -- is the ISO form of a date without a year
 const splitValue = (value: string, used: DatePart[]) => {
   const pieces = value.split("-")
   const iso = !used.includes("year") && value.startsWith("--") && pieces.length === used.length + 2
@@ -47,8 +43,8 @@ const splitValue = (value: string, used: DatePart[]) => {
   return iso ? pieces.slice(2) : pieces
 }
 
-// A value or ISO date to parts. Undefined when a dash typed in a part leaves
-// it unclear which part is which
+// A value or ISO date to parts
+// Undefined if a part has a dash
 export const parseDateValue = (
   value: string,
   parts: DatePart[] = VALUE_ORDER
@@ -66,7 +62,7 @@ export const parseDateValue = (
 export const toDateValue = (input: DateParts | string = "", parts?: DatePart[]): string =>
   typeof input === "string" ? input : formatDateValue(input, parts)
 
-// A value, ISO date or parts to parts. Empty when a value cannot be split
+// A value, ISO date or parts to parts
 export const toDateParts = (input: DateParts | string = "", parts?: DatePart[]): DateParts =>
   typeof input === "string" ? (parseDateValue(input, parts) ?? {}) : input
 
@@ -88,9 +84,7 @@ export const trimParts = (date: DateParts): Required<DateParts> => ({
   year: date.year?.trim() ?? "",
 })
 
-// An error code for each problem, in the order the parts are entered. A
-// date with every part empty only returns missing-date. impossible-date
-// is only checked once every part is valid.
+// An error code for each problem, in the order the parts are entered
 export const getDateErrors = (values: Required<DateParts>, parts: DatePart[]): DateErrorCode[] => {
   if (parts.every((part) => values[part] === "")) return ["missing-date"]
 
@@ -117,8 +111,7 @@ export const getInvalidParts = (errors: DateErrorCode[], parts: DatePart[]): Dat
 // Remove extra leading zeros, such as in "008", then pad to 2 digits
 export const pad = (value: string): string => String(Number(value)).padStart(2, "0")
 
-// The ISO 8601 string for a valid date, using the parts given. Empty
-// when the parts have no ISO format, such as day and year.
+// The ISO 8601 string for a valid date, using the parts given
 export const toISODate = ({ day, month, year }: Required<DateParts>, parts: DatePart[]): string => {
   const has = (part: DatePart) => parts.includes(part)
 
@@ -130,8 +123,8 @@ export const toISODate = ({ day, month, year }: Required<DateParts>, parts: Date
   return ""
 }
 
-// Read a min or max limit. Throws for an invalid limit, as that is a
-// mistake in the code. An ISO date string is read in local time.
+// Read a min or max limit
+// An ISO date string is read in local time
 export const toLimit = (limit: Date | string, name: "max" | "min"): Date => {
   const date = typeof limit === "string" ? parseISO(limit) : limit
   if (!isValid(date)) {
@@ -141,13 +134,12 @@ export const toLimit = (limit: Date | string, name: "max" | "min"): Date => {
   return date
 }
 
-// Write a limit out for a message, to the same detail as the value, such as
+// Write a limit for a message, to the same detail as the value
 // "1 January 2020", "January 2020" or "2020"
 export const formatLimit = (limit: Date, length: number): string =>
   format(limit, length === 4 ? "yyyy" : length === 7 ? "MMMM yyyy" : "d MMMM yyyy")
 
-// Compare the value with min and max, to the same detail as the value. A
-// day and month value has no year, so it is not compared.
+// Compare the value with min and max, to the same detail as the value
 export const getRangeError = (value: string, min?: Date, max?: Date): DateErrorCode | undefined => {
   if (value.startsWith("--")) return undefined
 
@@ -159,18 +151,17 @@ export const getRangeError = (value: string, min?: Date, max?: Date): DateErrorC
   return undefined
 }
 
-// A custom message, or the default. Only the defaults use the limits. The
-// defaults are passed in, as they are public and live in dateinput-utils
+// A custom message, or the default
 export const getMessage = (
   code: DateErrorCode,
-  label: string | undefined,
+  subject: string | undefined,
   messages: DateValidationOptions["messages"] = {},
   limits: Limits,
   defaults: DefaultMessages
 ): string => {
   const custom = messages[code]
-  if (custom !== undefined) return typeof custom === "function" ? custom(label) : custom
+  if (custom !== undefined) return typeof custom === "function" ? custom(subject) : custom
 
   const fallback = defaults[code]
-  return typeof fallback === "function" ? fallback(label, limits) : fallback
+  return typeof fallback === "function" ? fallback(subject, limits) : fallback
 }