@public-ui/sample-react 4.0.0-alpha.5 → 4.0.0-alpha.7

package/src/react.main.tsx

@@ -4,7 +4,7 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
-import { defineCustomElements } from '@public-ui/components/dist/loader';
+import { defineCustomElements } from '@public-ui/components/loader';
 import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
 
 import { App } from './App';

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -1,6 +1,7 @@
-import { Formik } from 'formik';
-import React, { useEffect, useRef, useState } from 'react';
-import * as Yup from 'yup';
+import { zodResolver } from '@hookform/resolvers/zod';
+import React, { useEffect, useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { z } from 'zod';
 
 import { KolLink, KolTabs } from '@public-ui/react-v19';
 
@@ -10,20 +11,46 @@ import { DistrictForm } from './DistrictForm';
 import { PersonalInformationForm } from './PersonalInformationForm';
 import { Summary } from './Summary';
 
-import type { Iso8601 } from '@public-ui/components';
-import type { FormikHelpers, FormikProps } from 'formik';
 import { SampleDescription } from '../../components/SampleDescription';
+
+const validationSchema = z
+	.object({
+		district: z.string().min(1, 'Please select district.'),
+		date: z.string().min(1, 'Please enter date.'),
+		time: z.string(),
+		salutation: z.string().min(1, 'Please select salutation.'),
+		name: z.string().min(1, 'Please enter your first and last name.'),
+		company: z.string(),
+		email: z.string().min(1, 'Please enter your e-mail address.'),
+		phone: z.string(),
+	})
+	.superRefine(async (data, ctx) => {
+		// Conditional validation: company is required when salutation is 'Company'
+		if (data.salutation === 'Company' && !data.company) {
+			ctx.addIssue({
+				code: z.ZodIssueCode.custom,
+				path: ['company'],
+				message: 'Please specify company.',
+			});
+		}
+
+		// Async validation: check time availability when date is set
+		if (data.date && data.time) {
+			const isAvailable = await checkAppointmentAvailability(data.time);
+			if (!isAvailable) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					path: ['time'],
+					message: 'Date unfortunately no longer available.',
+				});
+			}
+		}
+	});
+
+export type FormValues = z.infer<typeof validationSchema>;
 // export interface FormProps {}
-export interface FormValues {
-	district: string;
-	date: Iso8601;
-	time: Iso8601;
-	salutation: string;
-	name: string;
-	company: string;
-	email: string;
-	phone: string;
-}
+
+export type FormFieldName = keyof FormValues & string;
 
 enum FormSection {
 	DISTRICT,
@@ -34,10 +61,17 @@ enum FormSection {
 
 const formSectionSequence = [FormSection.DISTRICT, FormSection.AVAILABLE_APPOINTMENTS, FormSection.PERSONAL_INFORMATION, FormSection.SUMMARY] as const;
 
+const sectionFields: Record<FormSection, FormFieldName[]> = {
+	[FormSection.DISTRICT]: ['district'],
+	[FormSection.AVAILABLE_APPOINTMENTS]: ['date', 'time'],
+	[FormSection.PERSONAL_INFORMATION]: ['salutation', 'company', 'name', 'email', 'phone'],
+	[FormSection.SUMMARY]: [],
+};
+
 const initialValues: FormValues = {
 	district: '',
-	date: '' as Iso8601,
-	time: '' as Iso8601,
+	date: '',
+	time: '',
 	salutation: '',
 	name: '',
 	company: '',
@@ -45,103 +79,87 @@ const initialValues: FormValues = {
 	phone: '',
 };
 
-const districtSchema = {
-	district: Yup.string().required('Please select district.'),
-};
-const personalInformationSchema = {
-	salutation: Yup.string().required('Please select salutation.'),
-	name: Yup.string().required('Please enter your first and last name.'),
-	company: Yup.string().when('salutation', {
-		is: (salutation: string) => salutation === 'Company',
-		then: (schema) => schema.required('Please specify company.'),
-	}),
-	email: Yup.string().required('Please enter your e-mail address.'),
-};
-const availableAppointmentsSchema = {
-	date: Yup.string().required('Please enter date.'),
-	time: Yup.string().when('date', {
-		is: (date: string) => Boolean(date), // only validate time when date is already set
-		then: (schema) => schema.test('checkTimeAvailability', 'Date unfortunately no longer available.', checkAppointmentAvailability),
-	}),
-};
-
 export function AppointmentForm() {
 	const [activeFormSection, setActiveFormSection] = useState(FormSection.DISTRICT);
 	const [selectedTab, setSelectedTab] = useState(activeFormSection);
-	const formikRef = useRef<FormikProps<FormValues>>(null);
 
-	const validationSchema = Yup.object().shape({
-		...(activeFormSection === FormSection.DISTRICT ? districtSchema : {}),
-		...(activeFormSection === FormSection.AVAILABLE_APPOINTMENTS ? availableAppointmentsSchema : {}),
-		...(activeFormSection === FormSection.PERSONAL_INFORMATION ? personalInformationSchema : {}),
+	const formMethods = useForm<FormValues>({
+		defaultValues: initialValues,
+		mode: 'onTouched',
+		reValidateMode: 'onChange',
+		resolver: zodResolver(validationSchema),
+		shouldFocusError: false,
 	});
 
 	useEffect(() => {
 		setSelectedTab(activeFormSection);
 	}, [activeFormSection]);
 
-	const handleSubmit = async (_values: FormValues, formik: FormikHelpers<FormValues>) => {
-		const currentSectionIndex = formSectionSequence.indexOf(activeFormSection);
-		const nextSection = formSectionSequence[currentSectionIndex + 1];
-		if (nextSection !== undefined) {
-			await formik.setTouched({});
-			setActiveFormSection(nextSection);
-		}
+	const goToSection = (section: FormSection) => {
+		setActiveFormSection(section);
+		formMethods.clearErrors();
+	};
+
+	const getNextSection = (section: FormSection) => {
+		const currentSectionIndex = formSectionSequence.indexOf(section);
+		return formSectionSequence[currentSectionIndex + 1];
 	};
 
 	return (
-		<>
+		<FormProvider {...formMethods}>
 			<SampleDescription>
 				<p>
-					The Appointment Form is a full form example featuring a large variety of KoliBri form components,{' '}
-					<KolLink _label="Formik" _href="https://formik.org/" _target="blank" /> and{' '}
-					<KolLink _label="Yup" _href="https://github.com/jquense/yup" _target="blank" />.
+					The Appointment Form is a full form example featuring a large variety of KoliBri form components, React Hook Form and{' '}
+					<KolLink _label="Zod" _href="https://github.com/colinhacks/zod" _target="blank" />.
 				</p>
 			</SampleDescription>
 
-			<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-				<KolTabs
-					className="w-full"
-					_tabs={[
-						{
-							_label: '1. Choose registration office',
-						},
-						{
-							_label: '2. Available dates',
-							_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
-						},
-						{
-							_label: '3. Personal data',
-							_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
-						},
-						{
-							_label: 'Summary',
-							_disabled: activeFormSection < FormSection.SUMMARY,
-						},
-					]}
-					_label="Form navigation"
-					_selected={selectedTab}
-					_on={{
-						onSelect: (_event, selectedTab) => {
-							setActiveFormSection(selectedTab);
-							formikRef.current?.setErrors({});
-						},
-					}}
-				>
-					<div>
-						<DistrictForm />
-					</div>
-					<div>
-						<AvailableAppointmentsForm />
-					</div>
-					<div>
-						<PersonalInformationForm />
-					</div>
-					<div>
-						<Summary />
-					</div>
-				</KolTabs>
-			</Formik>
-		</>
+			<KolTabs
+				className="w-full"
+				_tabs={[
+					{
+						_label: '1. Choose registration office',
+					},
+					{
+						_label: '2. Available dates',
+						_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
+					},
+					{
+						_label: '3. Personal data',
+						_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
+					},
+					{
+						_label: 'Summary',
+						_disabled: activeFormSection < FormSection.SUMMARY,
+					},
+				]}
+				_label="Form navigation"
+				_selected={selectedTab}
+				_on={{
+					onSelect: (_event, selectedTab) => {
+						goToSection(selectedTab);
+					},
+				}}
+			>
+				<div>
+					<DistrictForm fieldsToValidate={sectionFields[FormSection.DISTRICT]} onComplete={() => goToSection(getNextSection(FormSection.DISTRICT))} />
+				</div>
+				<div>
+					<AvailableAppointmentsForm
+						fieldsToValidate={sectionFields[FormSection.AVAILABLE_APPOINTMENTS]}
+						onComplete={() => goToSection(getNextSection(FormSection.AVAILABLE_APPOINTMENTS))}
+					/>
+				</div>
+				<div>
+					<PersonalInformationForm
+						fieldsToValidate={sectionFields[FormSection.PERSONAL_INFORMATION]}
+						onComplete={() => goToSection(getNextSection(FormSection.PERSONAL_INFORMATION))}
+					/>
+				</div>
+				<div>
+					<Summary />
+				</div>
+			</KolTabs>
+		</FormProvider>
 	);
 }

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,118 +1,126 @@
-import { Field, useFormikContext } from 'formik';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { KolInputDateController, KolInputRadioController } from '@public-ui/react-hook-form-adapter';
+import React, { useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react-v19';
+import { KolButton, KolForm, KolHeading, KolSpin } from '@public-ui/react-v19';
 
 import { fetchAvailableTimes } from './appointmentService';
 
 import type { Option } from '@public-ui/components';
-import type { FieldInputProps, FieldProps } from 'formik';
-import type { FormValues } from './AppointmentForm';
-import { createErrorList, focusErrorList } from './formUtils';
+import type { FormFieldName, FormValues } from './AppointmentForm';
+import { createErrorList, focusErrorList, touchFields } from './formUtils';
 
-export function AvailableAppointmentsForm() {
-	const form = useFormikContext<FormValues>();
+type Props = {
+	fieldsToValidate: FormFieldName[];
+	onComplete: () => void;
+};
+
+export function AvailableAppointmentsForm({ fieldsToValidate, onComplete }: Props) {
+	const {
+		clearErrors,
+		control,
+		formState: { errors, isValidating },
+		getValues,
+		setValue,
+		trigger,
+		watch,
+	} = useFormContext<FormValues>();
 
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
-	const [schouldFocusErrorList, setSchouldFocusErrorList] = useState(true);
-	const errorList = createErrorList(form.errors);
-	const formikRef = useRef(null);
+	const [shouldFocusErrorList, setShouldFocusErrorList] = useState(true);
+	const errorList = createErrorList<FormValues>(errors, fieldsToValidate);
+	const formRef = useRef<HTMLKolFormElement>(null);
+
+	const date = watch('date');
 
 	useEffect(() => {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
-		if (schouldFocusErrorList && sectionSubmitted) {
-			focusErrorList(formikRef);
-			setSchouldFocusErrorList(false);
+		if (shouldFocusErrorList && sectionSubmitted) {
+			focusErrorList(formRef);
+			setShouldFocusErrorList(false);
 		}
 
-		if (form.values.date) {
+		if (date) {
 			fetchAvailableTimes().then(
 				(times) => {
 					if (!ignoreResponse) {
 						setAvailableTimes(times);
-						void form.setFieldValue('time', times[0].value);
-						void form.setFieldTouched('time');
+						const [firstTime] = times;
+						const firstTimeValue = (firstTime as { value?: unknown } | undefined)?.value;
+						if (typeof firstTimeValue === 'string') {
+							setValue('time', firstTimeValue as FormValues['time'], { shouldValidate: true, shouldTouch: true });
+							clearErrors('time');
+						}
 					}
 				},
 				() => {},
-			); // ignore errors
+			);
 		}
 		return () => {
 			ignoreResponse = true;
 		};
-	}, [form.values.date, sectionSubmitted]);
-
-	const renderField = useCallback(
-		(name: string, node: (field: FieldInputProps<FormValues['date' | 'time']>) => void) => (
-			<Field name={name}>{({ field }: FieldProps<FormValues['date' | 'time']>) => node(field)}</Field>
-		),
-		[],
-	);
+	}, [clearErrors, date, sectionSubmitted, setValue, shouldFocusErrorList]);
 
-	const handleField = useCallback(
-		(name: string) => ({
-			onChange: (event: Event, value: unknown): void => {
-				if (event.target) {
-					void form.setFieldValue(name, value, true);
-				}
-			},
-			onBlur: () => {
-				void form.setFieldTouched(name, true);
-			},
-		}),
-		[form.setFieldValue, form.setFieldTouched],
-	);
+	const handleSubmit = async () => {
+		setSectionSubmitted(true);
+		touchFields<FormValues>(fieldsToValidate, getValues, setValue);
+		const isValid = await trigger(fieldsToValidate, { shouldFocus: true });
+		if (isValid) {
+			setShouldFocusErrorList(true);
+			onComplete();
+		} else {
+			focusErrorList(formRef);
+		}
+	};
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Select an appointment"></KolHeading>
 			<KolForm
-				ref={formikRef}
+				ref={formRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						setSectionSubmitted(true);
-						void form.submitForm();
-						focusErrorList(formikRef);
+						void handleSubmit();
 					},
 				}}
 			>
-				{renderField('date', (field) => (
-					<KolInputDate
-						id="field-date"
-						_label="Date"
-						_value={field.value}
-						_msg={{
-							_type: 'error',
-							_description: form.errors.date || '',
-						}}
-						_touched={form.touched.date}
-						_required
-						_on={handleField('date')}
-					/>
-				))}
+				<KolInputDateController
+					control={control}
+					name="date"
+					id="field-date"
+					_label="Date"
+					_required
+					_on={{
+						onChange: () => {
+							setSectionSubmitted(false);
+							setShouldFocusErrorList(true);
+							clearErrors('date');
+						},
+					}}
+				/>
 
-				{form.values.date && (
+				{date && (
 					<div className="grid gap-4 mt-4">
 						{availableTimes ? (
 							<>
-								{renderField('time', (field) => (
-									<KolInputRadio
-										id="field-time"
-										_label="Time"
-										_orientation="horizontal"
-										_options={availableTimes}
-										_value={field.value}
-										_msg={{
-											_type: 'error',
-											_description: form.errors.time || '',
-										}}
-										_touched={form.touched.time}
-										_required
-										_on={handleField('time')}
-									/>
-								))}
+								<KolInputRadioController
+									control={control}
+									name="time"
+									id="field-time"
+									_label="Time"
+									_orientation="horizontal"
+									_options={availableTimes}
+									_required
+									_on={{
+										onChange: () => {
+											setSectionSubmitted(false);
+											setShouldFocusErrorList(true);
+											clearErrors('time');
+										},
+									}}
+								/>
 								<p>
 									<em>For test purposes, only the dates for every half hour are available.</em>
 								</p>
@@ -124,7 +132,7 @@ export function AvailableAppointmentsForm() {
 				)}
 
 				<KolButton _label="Weiter" _type="submit" className="mt-2" />
-				{form.values.date && form.isValidating ? <KolSpin _show aria-label="Date being checked." /> : ''}
+				{date && isValidating ? <KolSpin _show aria-label="Date being checked." /> : ''}
 			</KolForm>
 		</div>
 	);

package/src/scenarios/appointment-form/DistrictForm.tsx

@@ -1,11 +1,16 @@
-import { Field, useFormikContext } from 'formik';
+import { KolSelectController } from '@public-ui/react-hook-form-adapter';
 import React, { useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react-v19';
+import { KolButton, KolForm, KolHeading } from '@public-ui/react-v19';
 
-import type { FieldProps } from 'formik';
-import type { FormValues } from './AppointmentForm';
-import { createErrorList, focusErrorList } from './formUtils';
+import type { FormFieldName, FormValues } from './AppointmentForm';
+import { createErrorList, focusErrorList, touchFields } from './formUtils';
+
+type Props = {
+	fieldsToValidate: FormFieldName[];
+	onComplete: () => void;
+};
 
 const LOCATION_OPTIONS = [
 	{
@@ -30,61 +35,56 @@ const LOCATION_OPTIONS = [
 	},
 ];
 
-export function DistrictForm() {
-	const form = useFormikContext<FormValues>();
-	const errorList = createErrorList(form.errors);
+export function DistrictForm({ fieldsToValidate, onComplete }: Props) {
+	const {
+		clearErrors,
+		control,
+		formState: { errors },
+		getValues,
+		setValue,
+		trigger,
+	} = useFormContext<FormValues>();
+	const errorList = createErrorList<FormValues>(errors, fieldsToValidate);
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
-	const formikRef = useRef<HTMLKolFormElement>(null);
+	const formRef = useRef<HTMLKolFormElement>(null);
+
+	const handleSubmit = async () => {
+		setSectionSubmitted(true);
+		touchFields<FormValues>(fieldsToValidate, getValues, setValue);
+		const isValid = await trigger(fieldsToValidate, { shouldFocus: true });
+		if (isValid) {
+			setSectionSubmitted(false);
+			onComplete();
+		} else {
+			focusErrorList(formRef);
+		}
+	};
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Select a district"></KolHeading>
 			<KolForm
-				ref={formikRef}
+				ref={formRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						setSectionSubmitted(true);
-						form
-							.validateForm()
-							.then((res) => {
-								if (res && Object.keys(res).length > 0) throw Error();
-								void form.submitForm();
-							})
-							.catch(() => {
-								focusErrorList(formikRef);
-							});
+						void handleSubmit();
 					},
 				}}
 			>
-				<Field name="district">
-					{({ field }: FieldProps<FormValues['district']>) => (
-						<KolSelect
-							id="field-district"
-							_label="District"
-							_options={[{ label: 'Please select…', value: '' }, ...LOCATION_OPTIONS]}
-							_value={field.value}
-							_msg={{
-								_type: 'error',
-								_description: form.errors.district || '',
-							}}
-							_touched={form.touched.district}
-							_required
-							onBlur={() => {
-								void form.setFieldTouched('district', true);
-							}}
-							_on={{
-								onChange: (event, values: unknown) => {
-									setSectionSubmitted(false);
-									// Select und Radio setzen den Wert immer initial.
-									if (event.target) {
-										const [value] = values as [FormValues['district']];
-										void form.setFieldValue('district', value, true);
-									}
-								},
-							}}
-						/>
-					)}
-				</Field>
+				<KolSelectController
+					control={control}
+					name="district"
+					id="field-district"
+					_label="District"
+					_options={[{ label: 'Please select…', value: '' }, ...LOCATION_OPTIONS]}
+					_required
+					_on={{
+						onChange: () => {
+							setSectionSubmitted(false);
+							clearErrors(fieldsToValidate);
+						},
+					}}
+				/>
 
 				<KolButton _label="Next" _type="submit" className="mt-2" />
 			</KolForm>