@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.11

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

@@ -1,118 +1,126 @@
-import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState, useRef, useCallback } 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 { FormValues } from './AppointmentForm';
-import type { FieldProps, FieldInputProps } from 'formik';
 import type { Option } from '@public-ui/components';
-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 React, { useState, useRef } from 'react';
+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>

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

@@ -1,11 +1,16 @@
-import { Field, useFormikContext } from 'formik';
-import React, { useState, useEffect, useRef } from 'react';
+import { KolInputEmailController, KolInputTextController, KolSelectController } from '@public-ui/react-hook-form-adapter';
+import React, { useEffect, useRef, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
 
-import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, 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 SALUTATION_OPTIONS = [
 	{
@@ -26,168 +31,129 @@ const SALUTATION_OPTIONS = [
 	},
 ];
 
-export function PersonalInformationForm() {
-	const form = useFormikContext<FormValues>();
+export function PersonalInformationForm({ fieldsToValidate, onComplete }: Props) {
+	const {
+		clearErrors,
+		control,
+		formState: { errors },
+		getValues,
+		setValue,
+		trigger,
+		watch,
+	} = useFormContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
-	const errorList = createErrorList(form.errors);
-	const formikRef = useRef(null);
+	const errorList = createErrorList<FormValues>(errors, fieldsToValidate);
+	const formRef = useRef<HTMLKolFormElement>(null);
+	const salutation = watch('salutation');
 
 	useEffect(() => {
-		focusErrorList(formikRef);
+		focusErrorList(formRef);
 	}, [sectionSubmitted]);
+
+	const fieldsForValidation = salutation === 'Company' ? fieldsToValidate : fieldsToValidate.filter((field) => field !== 'company');
+
+	const handleSubmit = async () => {
+		setSectionSubmitted(true);
+		touchFields<FormValues>(fieldsForValidation, getValues, setValue);
+		const isValid = await trigger(fieldsForValidation, { shouldFocus: true });
+		if (isValid) {
+			onComplete();
+		} else {
+			focusErrorList(formRef);
+		}
+	};
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Enter your contact details"></KolHeading>
 			<KolForm
-				ref={formikRef}
+				ref={formRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
-						void form.submitForm();
-						setSectionSubmitted(true);
-						focusErrorList(formikRef);
+						void handleSubmit();
 					},
 				}}
 			>
-				<Field name="salutation">
-					{({ field }: FieldProps<FormValues['salutation']>) => (
-						<KolSelect
-							onBlur={() => {
-								void form.setFieldTouched('salutation', true);
-							}}
-							id="field-salutation"
-							_label="Salutation"
-							_value={field.value}
-							_msg={{
-								_type: 'error',
-								_description: form.errors.salutation || '',
-							}}
-							_touched={form.touched.salutation}
-							_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
+				<KolSelectController
+					control={control}
+					name="salutation"
+					id="field-salutation"
+					_label="Salutation"
+					_options={[{ label: 'Please select…', value: '' }, ...SALUTATION_OPTIONS]}
+					_required
+					_on={{
+						onChange: () => {
+							setSectionSubmitted(false);
+							clearErrors(fieldsToValidate);
+						},
+					}}
+				/>
+
+				{salutation === 'Company' && (
+					<div className="block mt-2">
+						<KolInputTextController
+							control={control}
+							name="company"
+							id="field-company"
+							_label="Company"
 							_required
 							_on={{
-								onChange: (event, values: unknown) => {
-									if (event.target) {
-										const [value] = values as [FormValues['salutation']];
-										void form.setFieldValue('salutation', value, true);
-									}
+								onChange: () => {
+									setSectionSubmitted(false);
+									clearErrors(fieldsToValidate);
 								},
 							}}
 						/>
-					)}
-				</Field>
-
-				{form.values.salutation === 'Company' && (
-					<Field name="company">
-						{({ field }: FieldProps<FormValues['company']>) => (
-							<div className="block mt-2">
-								<KolInputText
-									onBlur={() => {
-										void form.setFieldTouched('company', true);
-									}}
-									id="field-company"
-									_label="Company"
-									_value={field.value}
-									_msg={{
-										_type: 'error',
-										_description: form.errors.company || '',
-									}}
-									_touched={form.touched.company}
-									_required
-									_on={{
-										onChange: (event, value: unknown) => {
-											if (event.target) {
-												void form.setFieldValue('company', value, true);
-											}
-										},
-									}}
-								/>
-							</div>
-						)}
-					</Field>
+					</div>
 				)}
 
-				<Field name="name">
-					{({ field }: FieldProps<FormValues['name']>) => (
-						<div className="block mt-2">
-							<KolInputText
-								onBlur={() => {
-									void form.setFieldTouched('name', true);
-								}}
-								id="field-name"
-								_label="First name and surname"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.name || '',
-								}}
-								_touched={form.touched.name}
-								_required
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldValue('name', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputTextController
+						control={control}
+						name="name"
+						id="field-name"
+						_label="First name and surname"
+						_required
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
-				<Field name="email">
-					{({ field }: FieldProps<FormValues['email']>) => (
-						<div className="block mt-2">
-							<KolInputEmail
-								onBlur={() => {
-									void form.setFieldTouched('email', true);
-								}}
-								id="field-email"
-								_label="E-Mail"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.email || '',
-								}}
-								_touched={form.touched.email}
-								_required
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldValue('email', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputEmailController
+						control={control}
+						name="email"
+						id="field-email"
+						_label="E-Mail"
+						_required
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
-				<Field name="phone">
-					{({ field }: FieldProps<FormValues['phone']>) => (
-						<div className="block mt-2">
-							<KolInputText
-								id="field-phone"
-								_type="tel"
-								_label="Telephone number"
-								_value={field.value}
-								_msg={{
-									_type: 'error',
-									_description: form.errors.phone || '',
-								}}
-								_touched={form.touched.phone}
-								_on={{
-									onChange: (event, value: unknown) => {
-										if (event.target) {
-											void form.setFieldTouched('phone', true);
-											void form.setFieldValue('phone', value, true);
-										}
-									},
-								}}
-							/>
-						</div>
-					)}
-				</Field>
+				<div className="block mt-2">
+					<KolInputTextController
+						control={control}
+						name="phone"
+						id="field-phone"
+						_type="tel"
+						_label="Telephone number"
+						_on={{
+							onChange: () => {
+								setSectionSubmitted(false);
+								clearErrors(fieldsToValidate);
+							},
+						}}
+					/>
+				</div>
 
 				<KolButton _label="Next" _type="submit" className="mt-2" />
 			</KolForm>