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

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>

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

@@ -1,11 +1,16 @@
-import { Field, useFormikContext } from 'formik';
+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>

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

@@ -1,5 +1,5 @@
-import { useFormikContext } from 'formik';
 import React from 'react';
+import { useFormContext, useWatch } from 'react-hook-form';
 
 import { KolHeading } from '@public-ui/react-v19';
 
@@ -9,7 +9,8 @@ const ValueFallback = () => <i>Nicht angegeben</i>;
 const ValueWithFallback = ({ value }: { value: string }) => (value ? value : <ValueFallback />);
 
 export function Summary() {
-	const { values } = useFormikContext<FormValues>();
+	const { control } = useFormContext<FormValues>();
+	const values = useWatch({ control });
 
 	return (
 		<>
@@ -18,38 +19,38 @@ export function Summary() {
 			<dl>
 				<dt>District</dt>
 				<dd>
-					<ValueWithFallback value={values.district} />
+					<ValueWithFallback value={values?.district ?? ''} />
 				</dd>
 				<dt>Appointment</dt>
-				<dd>{values.date && values.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
+				<dd>{values?.date && values?.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
 
-				{values.salutation === 'Company' ? (
+				{values?.salutation === 'Company' ? (
 					<>
 						<dt>Company</dt>
 						<dd>
-							<ValueWithFallback value={values.company} />
+							<ValueWithFallback value={values?.company ?? ''} />
 						</dd>
 					</>
 				) : (
 					<>
 						<dt>Salutation</dt>
 						<dd>
-							<ValueWithFallback value={values.salutation} />
+							<ValueWithFallback value={values?.salutation ?? ''} />
 						</dd>
 					</>
 				)}
 
 				<dt>Name</dt>
 				<dd>
-					<ValueWithFallback value={values.name} />
+					<ValueWithFallback value={values?.name ?? ''} />
 				</dd>
 				<dt>E-Mail</dt>
 				<dd>
-					<ValueWithFallback value={values.email} />
+					<ValueWithFallback value={values?.email ?? ''} />
 				</dd>
 				<dt>Phone number</dt>
 				<dd>
-					<ValueWithFallback value={values.phone} />
+					<ValueWithFallback value={values?.phone ?? ''} />
 				</dd>
 			</dl>
 		</>

package/src/scenarios/appointment-form/formUtils.ts

@@ -1,12 +1,31 @@
 import type { ErrorListPropType } from '@public-ui/components';
+import type { FieldErrors, Path, UseFormGetValues, UseFormSetValue } from 'react-hook-form';
 
-export function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
-	return Object.keys(formikErrors).map((fieldName) => ({
-		message: formikErrors[fieldName],
-		selector: `#field-${fieldName}`,
-	}));
+export function createErrorList<TFieldValues extends Record<string, unknown>>(
+	errors: FieldErrors<TFieldValues>,
+	fields?: Array<Path<TFieldValues>>,
+): ErrorListPropType[] {
+	const entries: Array<[Path<TFieldValues>, FieldErrors<TFieldValues>[Path<TFieldValues>]]> | Array<[string, FieldErrors<TFieldValues>[string]]> =
+		fields?.map((field) => [field, errors[field]]) ?? (Object.entries(errors) as Array<[string, FieldErrors<TFieldValues>[string]]>);
+
+	return entries
+		.map(([fieldName, error]) => ({
+			message: typeof error === 'object' && error ? String('message' in error ? error.message : '') : '',
+			selector: `#field-${String(fieldName)}`,
+		}))
+		.filter(({ message }) => Boolean(message));
+}
+
+export function focusErrorList(formRef: React.RefObject<HTMLKolFormElement | null>) {
+	formRef.current?.focusErrorList().catch(console.warn);
 }
 
-export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement | null>) {
-	formikRef.current?.focusErrorList().catch(console.warn);
+export function touchFields<TFieldValues extends Record<string, unknown>>(
+	fields: Array<Path<TFieldValues>>,
+	getValues: UseFormGetValues<TFieldValues>,
+	setValue: UseFormSetValue<TFieldValues>,
+): void {
+	fields.forEach((name) => {
+		setValue(name, getValues(name), { shouldTouch: true });
+	});
 }

package/src/scenarios/sample-form-with-validation.tsx

@@ -1,29 +1,25 @@
 import { zodResolver } from '@hookform/resolvers/zod';
+import {
+	KolComboboxController,
+	KolInputCheckboxController,
+	KolInputColorController,
+	KolInputDateController,
+	KolInputEmailController,
+	KolInputNumberController,
+	KolInputPasswordController,
+	KolInputRadioController,
+	KolInputRangeController,
+	KolInputTextController,
+	KolSelectController,
+	KolSingleSelectController,
+	KolTextareaController,
+} from '@public-ui/react-hook-form-adapter';
+import { KolAlert, KolButton, KolHeading, KolLink } from '@public-ui/react-v19';
 import React from 'react';
 import type { FieldError } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
-import {
-	KolAlert,
-	KolButton,
-	KolCombobox,
-	KolHeading,
-	KolInputCheckbox,
-	KolInputColor,
-	KolInputDate,
-	KolInputEmail,
-	KolInputNumber,
-	KolInputPassword,
-	KolInputRadio,
-	KolInputRange,
-	KolInputText,
-	KolLink,
-	KolSelect,
-	KolSingleSelect,
-	KolTextarea,
-} from '@public-ui/react-v19';
-
 import { SampleDescription } from '../components/SampleDescription';
 import { useToasterService } from '../hooks/useToasterService';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
@@ -59,11 +55,9 @@ export const SampleFormWithValidation: React.FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
 	const {
 		handleSubmit,
-		formState: { errors, touchedFields },
+		formState: { errors },
 		reset,
-		setValue,
-		trigger,
-		watch,
+		control,
 	} = useForm({
 		mode: 'onBlur',
 		reValidateMode: 'onChange',
@@ -74,35 +68,6 @@ export const SampleFormWithValidation: React.FC = () => {
 		},
 	});
 
-	const err = (key: keyof z.infer<typeof formSchema>) => {
-		const fieldError = errors[key];
-
-		if (!fieldError || typeof fieldError !== 'object' || !('message' in fieldError)) {
-			return undefined;
-		}
-
-		return {
-			_description: fieldError.message as string,
-			_type: 'error' as const,
-		};
-	};
-
-	const isTouched = (key: keyof z.infer<typeof formSchema>) => {
-		return !!touchedFields[key];
-	};
-
-	const bind = <K extends keyof z.infer<typeof formSchema>>(key: K) => ({
-		id: `field-${key as string}`,
-		_name: key,
-		_value: watch(key) as z.infer<typeof formSchema>[K],
-		_touched: isTouched(key),
-		_msg: err(key),
-		_on: {
-			onInput: (_: Event, v: unknown) => setValue(key, v as any, { shouldTouch: true, shouldValidate: true }),
-			onBlur: () => trigger(key),
-		},
-	});
-
 	const onReset = () => {
 		reset(undefined, {
 			keepErrors: false,
@@ -147,40 +112,43 @@ export const SampleFormWithValidation: React.FC = () => {
 			)}
 
 			<form onSubmit={handleSubmit(dummyClickEventHandler)} noValidate className="grid gap-4 mt-6">
-				<KolInputDate _label="Date" {...bind('date')} />
-				<KolInputText _label="Text (≥ 10 chars)" {...bind('text')} />
-				<KolInputEmail _label="Email" {...bind('email')} />
-				<KolInputPassword _label="Password" {...bind('password')} />
-				<KolInputRange _label="Range (≥ 30)" _min={0} _max={100} {...bind('range')} />
-				<KolInputNumber _label="Number (1 – 10)" {...bind('number')} />
-				<KolInputCheckbox _label="Accept terms" {...bind('checkbox')} />
-				<KolInputRadio
+				<KolInputDateController control={control as any} name="date" _label="Date" />
+				<KolInputTextController control={control as any} name="text" _label="Text (≥ 10 chars)" />
+				<KolInputEmailController control={control as any} name="email" _label="Email" />
+				<KolInputPasswordController control={control as any} name="password" _label="Password" />
+				<KolInputRangeController control={control as any} name="range" _label="Range (≥ 30)" _min={0} _max={100} />
+				<KolInputNumberController control={control as any} name="number" _label="Number (1 – 10)" />
+				<KolInputCheckboxController control={control as any} name="checkbox" _label="Accept terms" />
+				<KolInputRadioController
+					control={control as any}
+					name="radio"
 					_label="Gender"
 					_options={[
 						{ label: 'Female', value: 'f' },
 						{ label: 'Male', value: 'm' },
 					]}
-					{...bind('radio')}
 				/>
-				<KolInputColor _label="Favorite Color" {...bind('color')} />
-				<KolSelect
+				<KolInputColorController control={control as any} name="color" _label="Favorite Color" />
+				<KolSelectController
+					control={control as any}
+					name="select"
 					_label="Select"
 					_options={[
 						{ label: 'Option A', value: 'A' },
 						{ label: 'Option B', value: 'B' },
 					]}
-					{...bind('select')}
 				/>
-				<KolSingleSelect
+				<KolSingleSelectController
+					control={control as any}
+					name="singleSelect"
 					_label="Single Select"
 					_options={[
 						{ label: 'Option A', value: 'A' },
 						{ label: 'Option B', value: 'B' },
 					]}
-					{...bind('singleSelect')}
 				/>
-				<KolCombobox _label="Country" _suggestions={COUNTRY_SUGGESTIONS} {...bind('combobox')} />
-				<KolTextarea _label="Message" _rows={4} {...bind('textarea')} />
+				<KolComboboxController control={control as any} name="combobox" _label="Country" _suggestions={COUNTRY_SUGGESTIONS} />
+				<KolTextareaController control={control as any} name="textarea" _label="Message" _rows={4} />
 
 				<div className="flex gap-4 mt-4">
 					<KolButton _label="Submit" _type="submit" _variant="primary" />