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

package/src/components/table/with-footer.tsx

@@ -1,6 +1,6 @@
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolTableStateful } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const TableWithFooter: FC = () => (

package/src/components/table/with-pagination.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import { KolTableStateful } from '@public-ui/react-v19';
 
-import { DATE_FORMATTER } from './formatter';
 import { SampleDescription } from '../SampleDescription';
+import { DATE_FORMATTER } from './formatter';
 import type { Data } from './test-data';
 import { DATA } from './test-data';
 

package/src/components/tabs/align.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
 import React from 'react';
 
+import type { AlignPropType } from '@public-ui/components';
 import { KolHeading, KolTabs } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
-import type { AlignPropType } from '@public-ui/components';
 
 const tabs = [
 	{

package/src/components/tabs/create-button.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import type { FC } from 'react';
 import { KolTabs } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useState } from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const CreateButton: FC = () => {

package/src/components/tabs/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
-import { TabsBasic } from './basic';
 import { TabsAlign } from './align';
-import { TabsIconsOnly } from './icons-only';
+import { TabsBasic } from './basic';
 import { TabsBehavior } from './behavior';
 import { CreateButton } from './create-button';
+import { TabsIconsOnly } from './icons-only';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {

package/src/components/textarea/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { TextareaVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { TextareaVariants } from './partials/variants';
 
 export const TextareaBasic: FC = () => (
 	<>

package/src/components/textarea/partials/cases.tsx

@@ -1,6 +1,6 @@
-import React, { forwardRef } from 'react';
-import { KolTextarea } from '@public-ui/react-v19';
 import type { Components } from '@public-ui/components';
+import { KolTextarea } from '@public-ui/react-v19';
+import React, { forwardRef } from 'react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
@@ -11,9 +11,10 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
 			</div>
 			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'default', _description: 'Default message' }} _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />

package/src/components/textarea/routes.ts

@@ -1,9 +1,9 @@
 import { Routes } from '../../shares/types';
 import { TextareaAdjustHeight } from './adjust-height';
 import { TextareaBasic } from './basic';
-import { TextareaWithCounter } from './with-counter';
 import { TextareaResize } from './resize';
 import { TextareaRows } from './rows';
+import { TextareaWithCounter } from './with-counter';
 
 export const TEXTAREA_ROUTES: Routes = {
 	textarea: {

package/src/components/toast/basic.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
+import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react-v19';
-import type { AlertTypePropType } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';

package/src/components/toolbar/basic.tsx

@@ -1,11 +1,13 @@
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
-	const TOOLBAR_ITEMS = [
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
 		{
+			type: 'button',
 			_label: 'Back',
 			_hideLabel: true,
 			_icons: {
@@ -15,6 +17,7 @@ export const ToolbarBasic: FC = () => {
 			},
 		},
 		{
+			type: 'button',
 			_label: 'Next',
 			_hideLabel: true,
 			_icons: {
@@ -24,14 +27,17 @@ export const ToolbarBasic: FC = () => {
 			},
 		},
 		{
+			type: 'link',
 			_href: '#/back-page',
 			_label: 'Simple Link 1',
 		},
 		{
+			type: 'link',
 			_href: '#/back-page',
 			_label: 'Simple Link 3',
 		},
 		{
+			type: 'button',
 			_label: 'Bold',
 		},
 	];

package/src/components/toolbar/disabled.tsx

@@ -1,6 +1,6 @@
+import { KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
-import { KolToolbar } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarDisabled: FC = () => {
@@ -15,6 +15,7 @@ export const ToolbarDisabled: FC = () => {
 				class="block w-fit"
 				_items={[
 					{
+						type: 'button',
 						_label: 'Back',
 						_disabled: true,
 						_hideLabel: true,
@@ -25,6 +26,7 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
+						type: 'button',
 						_label: 'Next',
 						_hideLabel: true,
 						_icons: {
@@ -34,15 +36,18 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
+						type: 'link',
 						_href: '#/back-page',
 						_label: 'Simple Link 1',
 					},
 					{
+						type: 'link',
 						_href: '#/back-page',
 						_disabled: true,
 						_label: 'Simple Link 3',
 					},
 					{
+						type: 'button',
 						_label: 'Bold',
 					},
 				]}

package/src/components/tree/basic.tsx

@@ -1,9 +1,9 @@
+import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useContext, useState } from 'react';
-import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
-import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+import { getRandomEmoji } from '../../shares/randomEmoji';
 import { SampleDescription } from '../SampleDescription';
 
 export const TreeBasic: FC = () => {

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, useState, useRef } 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 { FormikHelpers, FormikProps } from 'formik';
-import type { Iso8601 } from '@public-ui/components';
 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>
 	);
 }