Prefer string | ReactElement to avoid null, boolean etc

Author: colinrotherham

src/components/form-elements/date-input/DateInputContext.ts

@@ -1,11 +1,11 @@
 'use client';
 
-import { createContext, type ChangeEvent } from 'react';
+import { createContext, type ChangeEvent, type ReactElement } from 'react';
 
 export type IDateInputContext = {
   id: string;
   name: string;
-  error: React.ReactNode | undefined;
+  error: string | ReactElement | undefined;
   value?: { day?: string; month?: string; year?: string };
   defaultValue?: { day?: string; month?: string; year?: string };
   handleChange: (inputType: 'day' | 'month' | 'year', event: ChangeEvent<HTMLInputElement>) => void;

src/components/form-elements/date-input/components/DateInputField.tsx

@@ -1,7 +1,13 @@
 'use client';
 
 import classNames from 'classnames';
-import { forwardRef, useContext, type ChangeEvent, type ComponentPropsWithoutRef } from 'react';
+import {
+  forwardRef,
+  useContext,
+  type ChangeEvent,
+  type ComponentPropsWithoutRef,
+  type ReactElement,
+} from 'react';
 
 import { DateInputContext, type IDateInputContext } from '../DateInputContext.js';
 
@@ -11,7 +17,7 @@ import { type FormElementProps } from '#util/types/FormTypes.js';
 export interface IndividualDateInputProps
   extends ComponentPropsWithoutRef<'input'>,
     Pick<FormElementProps, 'label' | 'labelProps'> {
-  error?: string | false;
+  error?: string | ReactElement | false;
   inputType: 'day' | 'month' | 'year';
 }
 

src/util/types/FormTypes.ts

@@ -1,3 +1,5 @@
+import { type ReactElement } from 'react';
+
 import { type ErrorMessageProps } from '#components/form-elements/error-message/index.js';
 import { type FieldsetProps } from '#components/form-elements/fieldset/index.js';
 import { type HintTextProps } from '#components/form-elements/hint-text/index.js';
@@ -7,13 +9,13 @@ import { type ComponentPropsWithDataAttributes } from '#util/types/NHSUKTypes.js
 
 export interface FormElementProps {
   'fieldsetProps'?: FieldsetProps;
-  'legend'?: string;
+  'legend'?: string | ReactElement;
   'legendProps'?: LegendProps;
-  'label'?: string;
+  'label'?: string | ReactElement;
   'labelProps'?: LabelProps;
-  'error'?: React.ReactNode;
+  'error'?: string | ReactElement;
   'errorProps'?: ErrorMessageProps;
-  'hint'?: React.ReactNode;
+  'hint'?: string | ReactElement;
   'hintProps'?: HintTextProps;
   'formGroupProps'?: ComponentPropsWithDataAttributes<'div'>;
   'id'?: string;