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

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/button-shortkey-table.tsx

@@ -0,0 +1,127 @@
+import type { KoliBriTableHeaders } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+import { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+import { getRoot } from '../shares/react-roots';
+
+const RowActions: FC<{ label: string }> = ({ label }) => {
+	const toaster = ToasterService.getInstance(document);
+	const editButtonRef = useRef<HTMLKolButtonElement | null>(null);
+	const deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);
+
+	const handleEditClick = () => {
+		toaster.enqueue({
+			label: 'Edit clicked',
+			description: `The button "edit" has been clicked for ${label}`,
+			type: 'info',
+		});
+	};
+
+	const handleDeleteClick = () => {
+		toaster.enqueue({
+			label: 'Delete clicked',
+			description: `The button "delete" has been clicked for ${label}`,
+			type: 'warning',
+		});
+	};
+
+	const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+		switch (event.code) {
+			case 'KeyE':
+				void editButtonRef.current?.kolFocus();
+				handleEditClick();
+				return;
+			case 'KeyD':
+				void deleteButtonRef.current?.kolFocus();
+				handleDeleteClick();
+				return;
+		}
+	};
+
+	return (
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div
+			style={{
+				display: 'flex',
+				gap: 'calc(10rem / var(--kolibri-root-font-size, 16))',
+			}}
+			onKeyUp={handleKeyUp}
+		>
+			<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />
+			<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />
+		</div>
+	);
+};
+
+export const ButtonShortkeyTable: FC = () => {
+	type Data = {
+		label: string;
+	};
+	const DATA: Data[] = [
+		{
+			label: 'Row 1',
+		},
+		{
+			label: 'Row 2',
+		},
+		{
+			label: 'Row 3',
+		},
+		{
+			label: 'Row 4',
+		},
+	];
+
+	const HEADERS: KoliBriTableHeaders = {
+		horizontal: [
+			[
+				{
+					label: 'Label',
+					key: 'label',
+					textAlign: 'left',
+				},
+				{
+					label: 'Actions',
+					key: 'actions',
+					textAlign: 'left',
+
+					render: (el, cell) => {
+						getRoot(createReactRenderElement(el)).render(<RowActions label={(cell.data as Data).label} />);
+					},
+				},
+			],
+		],
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard
+					indicators and are also functionally implemented.
+				</p>
+				<p>
+					<strong>How to use:</strong> Move focus within one of the &quot;Actions&quot; cells and press &quot;e&quot; to edit or &quot;d&quot; to delete the
+					corresponding row.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Interactive Table with Button Shortkeys" />
+					<KolTableStateful
+						_label={`Interactive table with shortkey buttons in each row`}
+						_data={DATA}
+						_headers={HEADERS}
+						_minWidth="400px"
+						_pagination={{
+							_page: 1,
+						}}
+					/>
+				</section>
+			</div>
+		</>
+	);
+};

package/src/scenarios/custom-tooltip-css-properties.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolButton } from '@public-ui/react-v19';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+export const CustomTooltipCssProperties: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how tooltip animation duration and width can be customized via
+					<code>--kolibri-tooltip-animation-duration</code> and <code>--kol-tooltip-width</code>.
+				</p>
+			</SampleDescription>
+
+			<div className="flex justify-center items-center gap-4">
+				<KolButton
+					_label="Custom duration"
+					_hideLabel
+					style={{ '--kolibri-tooltip-animation-duration': '2500ms' }}
+					_icons="codicon codicon-clock"
+					_on={dummyEventHandler}
+				></KolButton>
+				<KolButton
+					_label="Custom width"
+					_hideLabel
+					style={{ '--kol-tooltip-width': '400px' }}
+					_icons="codicon codicon-arrow-both"
+					_on={dummyEventHandler}
+				></KolButton>
+			</div>
+		</>
+	);
+};

package/src/scenarios/date-in-form.tsx

@@ -0,0 +1,24 @@
+import { KolButton, KolForm, KolInputDate } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const DateInForm: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolForm with KolInputDate inside to make sure enter on the date icon does not submit the form.</p>
+		</SampleDescription>
+
+		<KolForm
+			_on={{
+				onSubmit: () => {
+					console.error('submitted');
+					alert('submitted');
+				},
+			}}
+		>
+			<KolInputDate _label="date" _name="datum" />
+			<KolButton _label="Submit" _type="submit" />
+		</KolForm>
+	</>
+);