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

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/change-tabindex.tsx

@@ -1,32 +1,32 @@
 /* eslint-disable jsx-a11y/tabindex-no-positive */
 
-import { SampleDescription } from '../components/SampleDescription';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
 	KolCombobox,
 	KolInputCheckbox,
+	KolInputColor,
 	KolInputDate,
 	KolInputEmail,
 	KolInputFile,
-	KolInputColor,
 	KolInputNumber,
 	KolInputPassword,
 	KolInputRadio,
 	KolInputRange,
 	KolInputText,
-	KolLinkButton,
 	KolLink,
+	KolLinkButton,
 	KolSingleSelect,
 	KolSplitButton,
 	KolTextarea,
 } from '@public-ui/react-v19';
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
 import { ERROR_MSG, HINT_MSG } from '../shares/constants';
 import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
-import type { Option, StencilUnknown } from '@public-ui/components';
 
 export const ChangeTabindex: FC = () => {
 	return (

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

package/src/scenarios/focus-elements.tsx

@@ -1,3 +1,4 @@
+import type { FocusableElement } from '@public-ui/components';
 import {
 	KolAccordion,
 	KolAlert,
@@ -23,11 +24,9 @@ import {
 	KolTextarea,
 } from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
-import { useMemo } from 'react';
-import React, { forwardRef, useLayoutEffect, useRef } from 'react';
+import React, { forwardRef, useLayoutEffect, useMemo, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { SampleDescription } from '../components/SampleDescription';
-import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
+import { KolNav, KolTableStateful, KolTabs } from '@public-ui/react-v19';
+import * as React from 'react';
 import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
 import DATA from './databasedata.json';

package/src/scenarios/input-group-with-error.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import type { FC } from 'react';
+import type { SelectOption } from '@public-ui/components';
 import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
-import type { SelectOption } from '@public-ui/components';
 
 export const InputGroupWithError: FC = () => {
 	const phoneError = true;

package/src/scenarios/inputs-get-value.tsx

@@ -5,6 +5,7 @@ import {
 	KolButton,
 	KolButtonLink,
 	KolCard,
+	KolCombobox,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -17,15 +18,14 @@ import {
 	KolInputText,
 	KolSelect,
 	KolSingleSelect,
-	KolCombobox,
 	KolTextarea,
 } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
 
-import type { HTMLStencilElement } from '@stencil/core/internal';
 import type { W3CInputValue } from '@public-ui/components';
+import type { HTMLStencilElement } from '@stencil/core/internal';
 
 const EventTargetContext = createContext<EventTarget | undefined>(undefined);
 const EventLoggerActiveContext = createContext<boolean>(false);

package/src/scenarios/react-hook-form/basic.tsx

@@ -1,24 +1,23 @@
-import type { FC } from 'react';
-import React from 'react';
-import type { SubmitHandler, FieldErrors } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
 import {
-	KolInputTextController,
-	KolInputPasswordController,
+	KolComboboxController,
+	KolInputCheckboxController,
+	KolInputColorController,
+	KolInputDateController,
 	KolInputEmailController,
+	KolInputFileController,
 	KolInputNumberController,
+	KolInputPasswordController,
+	KolInputRadioController,
 	KolInputRangeController,
-	KolInputDateController,
-	KolInputColorController,
-	KolInputFileController,
-	KolTextareaController,
-	KolComboboxController,
+	KolInputTextController,
 	KolSelectController,
 	KolSingleSelectController,
-	KolInputRadioController,
-	KolInputCheckboxController,
+	KolTextareaController,
 } from '@public-ui/react-hook-form-adapter';
-import { KolButton } from '@public-ui/react-v19';
+import { KolButton, KolForm } from '@public-ui/react-v19';
+import React, { type BaseSyntheticEvent, type FC } from 'react';
+import type { FieldErrors, SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
 
 import { SampleDescription } from '../../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../../shares/country';
@@ -122,62 +121,74 @@ export const RHFBasic: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample demonstrates a form using React Hook Form with KoliBri adapters. All inputs are validated, and error messages are shown on submit.</p>
+				<p>
+					This sample demonstrates a form using React Hook Form with KoliBri adapters wrapped in a KolForm. All inputs are validated, and error messages are
+					shown on submit.
+				</p>
 			</SampleDescription>
 
-			<form onSubmit={handleSubmit(onSubmit, onError)} className="grid gap-4 w-full max-w-xl">
-				<KolInputTextController name="firstName" control={control} _label="First Name" rules={{ required: 'First name is required' }} _required />
-				<KolInputTextController name="lastName" control={control} _label="Last Name" rules={{ required: 'Last name is required' }} _required />
-				<KolInputEmailController name="email" control={control} _label="Email" rules={{ required: 'Email is required' }} _required />
-				<KolInputPasswordController name="password" control={control} _label="Password" rules={{ required: 'Password is required' }} _required />
-				<KolInputNumberController name="age" control={control} _label="Age" rules={{ required: 'Age is required', min: 0 }} _required />
-				<KolInputRangeController name="volume" control={control} _label="Volume (0–100)" _min={0} _max={100} />
-				<KolInputDateController name="birthday" control={control} _label="Birthday" rules={{ required: 'Birthday is required' }} />
-				<KolInputColorController name="favoriteColor" control={control} _label="Favorite Color" id="favoriteColor" />
-				<KolInputFileController name="cv" control={control} _label="Upload CV" rules={{ required: 'Please upload your CV' }} _required />
-				<KolTextareaController name="bio" control={control} _label="Bio" rules={{ required: 'Please provide a short bio' }} _required />
-				<KolComboboxController
-					control={control}
-					rules={{ required: 'Please select a country' }}
-					name="country"
-					_label="Country"
-					_suggestions={COUNTRY_SUGGESTIONS}
-					_required
-				/>
-				<KolSelectController
-					control={control}
-					rules={{ required: 'Please select a language' }}
-					name="language"
-					_label="Preferred Language"
-					_options={languageOptions}
-					_required
-				/>
-				<KolSingleSelectController
-					rules={{ required: 'Please select a framework' }}
-					control={control}
-					name="framework"
-					_label="Favorite Framework"
-					_options={frameworkOptions}
-					_required
-				/>
-				<KolInputRadioController
-					control={control}
-					rules={{ required: 'Please select your gender' }}
-					name="gender"
-					_label="Gender"
-					_options={genderOptions}
-					_required
-				/>
-				<KolInputCheckboxController
-					name="termsAccepted"
-					control={control}
-					_label="I accept the terms and conditions"
-					rules={{ required: 'You must accept the terms' }}
-					_required
-				/>
+			<KolForm
+				className="w-full max-w-xl"
+				_on={{
+					onSubmit: (event) => {
+						void handleSubmit(onSubmit, onError)(event as unknown as BaseSyntheticEvent);
+					},
+				}}
+			>
+				<div className="grid gap-4">
+					<KolInputTextController name="firstName" control={control} _label="First Name" rules={{ required: 'First name is required' }} _required />
+					<KolInputTextController name="lastName" control={control} _label="Last Name" rules={{ required: 'Last name is required' }} _required />
+					<KolInputEmailController name="email" control={control} _label="Email" rules={{ required: 'Email is required' }} _required />
+					<KolInputPasswordController name="password" control={control} _label="Password" rules={{ required: 'Password is required' }} _required />
+					<KolInputNumberController name="age" control={control} _label="Age" rules={{ required: 'Age is required', min: 0 }} _required />
+					<KolInputRangeController name="volume" control={control} _label="Volume (0–100)" _min={0} _max={100} />
+					<KolInputDateController name="birthday" control={control} _label="Birthday" rules={{ required: 'Birthday is required' }} />
+					<KolInputColorController name="favoriteColor" control={control} _label="Favorite Color" id="favoriteColor" />
+					<KolInputFileController name="cv" control={control} _label="Upload CV" rules={{ required: 'Please upload your CV' }} _required />
+					<KolTextareaController name="bio" control={control} _label="Bio" rules={{ required: 'Please provide a short bio' }} _required />
+					<KolComboboxController
+						control={control}
+						rules={{ required: 'Please select a country' }}
+						name="country"
+						_label="Country"
+						_suggestions={COUNTRY_SUGGESTIONS}
+						_required
+					/>
+					<KolSelectController
+						control={control}
+						rules={{ required: 'Please select a language' }}
+						name="language"
+						_label="Preferred Language"
+						_options={languageOptions}
+						_required
+					/>
+					<KolSingleSelectController
+						rules={{ required: 'Please select a framework' }}
+						control={control}
+						name="framework"
+						_label="Favorite Framework"
+						_options={frameworkOptions}
+						_required
+					/>
+					<KolInputRadioController
+						control={control}
+						rules={{ required: 'Please select your gender' }}
+						name="gender"
+						_label="Gender"
+						_options={genderOptions}
+						_required
+					/>
+					<KolInputCheckboxController
+						name="termsAccepted"
+						control={control}
+						_label="I accept the terms and conditions"
+						rules={{ required: 'You must accept the terms' }}
+						_required
+					/>
 
-				<KolButton _label="Submit" _type="submit" />
-			</form>
+					<KolButton _label="Submit" _type="submit" />
+				</div>
+			</KolForm>
 		</>
 	);
 };

package/src/scenarios/routes.ts

@@ -1,23 +1,27 @@
 import { Routes } from '../shares/types';
+import { ButtonShortkeyTable } from './button-shortkey-table';
 import { ChangeTabindex } from './change-tabindex';
-import { CustomTooltipWidth } from './custom-tooltip-width';
+import { CustomTooltipCssProperties } from './custom-tooltip-css-properties';
+import { DateInForm } from './date-in-form';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
 import { FocusElements } from './focus-elements';
+import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { InputGroupWithError } from './input-group-with-error';
 import { InputsGetValue } from './inputs-get-value';
 import { PerformanceTest } from './performance-test';
+import { RHFBasic } from './react-hook-form/basic';
 import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
-import { StaticForm } from './static-form';
 import { SampleFormWithValidation } from './sample-form-with-validation';
-import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
+import { StaticForm } from './static-form';
 import { ToolbarItemOrder } from './toolbar-item-order';
 import { TooltipPositioning } from './tooltip-positioning';
-import { RHFBasic } from './react-hook-form/basic';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
+		'button-shortkey-table': ButtonShortkeyTable,
 		'change-tabindex': ChangeTabindex,
-		'custom-tooltip-width': CustomTooltipWidth,
+		'custom-tooltip-css-properties': CustomTooltipCssProperties,
+		'date-in-form': DateInForm,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
 		'input-group-with-error': InputGroupWithError,