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

package/src/components/table/settings-column-options.tsx

@@ -0,0 +1,58 @@
+import { KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+type UserRow = {
+	id: string;
+	name: string;
+	team: string;
+	email: string;
+	status: string;
+};
+
+const DATA: UserRow[] = [
+	{ id: 'U-001', name: 'Andrea Schmidt', team: 'Design', email: 'andrea@example.org', status: 'Active' },
+	{ id: 'U-002', name: 'Boris Klein', team: 'Engineering', email: 'boris@example.org', status: 'Active' },
+	{ id: 'U-003', name: 'Chiara Russo', team: 'Support', email: 'chiara@example.org', status: 'On leave' },
+];
+
+export const TableSettingsColumnOptions: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This example demonstrates how the table settings respect column metadata. Some columns can be hidden, reordered, or resized, while others stay locked
+				based on their <code>hidable</code>, <code>sortable</code>, and <code>resizable</code> flags.
+			</p>
+		</SampleDescription>
+
+		<KolTableStateful
+			_label="Table with column option restrictions"
+			_minWidth="auto"
+			_hasSettingsMenu
+			_headers={{
+				horizontal: [
+					[
+						{ key: 'id', label: 'ID', hidable: false, sortable: false },
+						{ key: 'name', label: 'Name' },
+						{ key: 'team', label: 'Team', sortable: false },
+						{ key: 'email', label: 'E-Mail', resizable: false },
+						{ key: 'status', label: 'Status', hidable: false, resizable: false },
+					],
+				],
+			}}
+			_tableSettings={{
+				columns: [
+					{ hidable: false, key: 'id', label: 'ID', sortable: false, visible: true, width: 15 },
+					{ key: 'name', label: 'Name', visible: true, width: 30 },
+					{ key: 'team', label: 'Team', sortable: false, visible: true, width: 20 },
+					{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: 25 },
+					{ hidable: false, key: 'status', label: 'Status', resizable: false, visible: true, width: 10 },
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '720px' }}
+		/>
+	</>
+);

package/src/components/table/stateful-with-selection.tsx

@@ -40,7 +40,7 @@ export const TableStatefulWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | null) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 

package/src/components/table/stateful-with-single-selection.tsx

@@ -39,7 +39,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: Data[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | KoliBriTableDataType | string | null) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 

package/src/components/table/stateless-with-selection.tsx

@@ -42,9 +42,9 @@ export const TableStatelessWithSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(Array.isArray(selection) ? selection : [selection]);
+		setSelectedKeys(selection);
 	};
 
 	useEffect(() => {

package/src/components/table/stateless-with-settings-menu.tsx

@@ -22,8 +22,25 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 		<SampleDescription>
 			<p>
 				This sample shows <code>KolTableStateless</code> with the settings menu enabled via
-				<code>_hasSettingsMenu</code>.
+				<code>_hasSettingsMenu</code>. Each column demonstrates a different combination of sorting and resizing options.
 			</p>
+			<ul>
+				<li>
+					<strong>ID</strong> keeps a fixed width with <code>resizable: false</code> while still allowing sorting.
+				</li>
+				<li>
+					<strong>Name</strong> represents the default behavior with both sorting and resizing enabled.
+				</li>
+				<li>
+					<strong>Role</strong> disables sorting but keeps <code>resizable: true</code> so users can widen the column if necessary.
+				</li>
+				<li>
+					<strong>E-Mail</strong> allows sorting but locks its width with <code>resizable: false</code> to keep the layout stable.
+				</li>
+				<li>
+					<strong>Active</strong> is neither sortable nor resizable to emphasise the status indicator.
+				</li>
+			</ul>
 		</SampleDescription>
 
 		<KolTableStateless
@@ -34,11 +51,46 @@ export const TableStatelessWithSettingsMenu: FC = () => (
 			_headerCells={{
 				horizontal: [
 					[
-						{ key: 'id', label: 'ID', textAlign: 'center' },
-						{ key: 'name', label: 'Name', textAlign: 'center' },
-						{ key: 'role', label: 'Role', textAlign: 'center' },
-						{ key: 'email', label: 'E-Mail', textAlign: 'center' },
-						{ key: 'active', label: 'Active', textAlign: 'center' },
+						{
+							key: 'id',
+							label: 'ID',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: false,
+						},
+						{
+							key: 'name',
+							label: 'Name',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: true,
+						},
+						{
+							key: 'role',
+							label: 'Role',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: false,
+							resizable: true,
+						},
+						{
+							key: 'email',
+							label: 'E-Mail',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: true,
+							resizable: false,
+						},
+						{
+							key: 'active',
+							label: 'Active',
+							textAlign: 'center',
+							sortDirection: 'NOS',
+							sortable: false,
+							resizable: false,
+						},
 					],
 				],
 			}}

package/src/components/table/stateless-with-single-selection.tsx

@@ -42,9 +42,9 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	const handleSelectionChangeEvent = ({ detail: selection }: { detail: string[] }) => {
 		console.log('Selection change via event', selection);
 	};
-	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[] | SelectionValue) => {
+	const handleSelectionChangeCallback = (_event: Event, selection: SelectionValue[]) => {
 		console.log('Selection change via callback', selection);
-		setSelectedKeys(Array.isArray(selection) ? selection : [selection]);
+		setSelectedKeys(selection);
 	};
 
 	useEffect(() => {

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>
 	);