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

package/src/components/combobox/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
+import { ComboboxHtml } from './html';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
+		html: ComboboxHtml,
 	},
 };

package/src/components/handout/basic.tsx

@@ -84,6 +84,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
+				width: '100px',
 			},
 			{
 				key: 'tuesday',
@@ -105,6 +106,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					return 0;
 				},
 				sortDirection: 'DESC',
+				width: '100px',
 			},
 			{
 				key: 'wednesday',
@@ -116,6 +118,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
 				},
+				width: '110px',
 			},
 			{
 				key: 'thursday',
@@ -127,6 +130,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'friday',
@@ -138,6 +142,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'saturday',
@@ -149,6 +154,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'sunday',
@@ -160,6 +166,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 		],
 	],
@@ -470,8 +477,8 @@ export const HandoutBasic: FC = () => {
 					</KolForm>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
-					<div slot="" className="grid gap-2 p-2">
-						<KolTableStateful _label="Table" _minWidth="auto" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
+					<div slot="" className="grid gap-2 p-2 flex">
+						<KolTableStateful _label="Table" _minWidth="800px" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/icon/basic.tsx

@@ -8,11 +8,15 @@ import { SampleDescription } from '../SampleDescription';
 export const IconBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>
+			<p>KolIcon renders codicon icons. This sample shows regular icons and one with a custom style-property, changing the icon color.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-compass-active" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-debug" />
+			<KolIcon className="block" _label="" _icons="codicon codicon-squirrel" />
+
 			<KolIcon
 				className="block w-[1em] h-[1em]"
 				style={{

package/src/components/icon/font-awesome.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { KolIcon, KolInputText } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const IconFontAwesome: FC = () => (
+	<>
+		<SampleDescription>
+			<p>KolIcon renders Font Awesome icons, if you have added this font to your theme. We are showing Font Awesome Free 6.1.1.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolIcon className="block" _label="" _icons="fa-solid fa-house"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-circle-user"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-truck"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-solid fa-city"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-heart"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-regular fa-thumbs-up"></KolIcon>
+			<KolIcon className="block" _label="" _icons="fa-brands fa-github"></KolIcon>
+
+			<KolInputText
+				_label={'With Font Awesome icons'}
+				_icons={{
+					left: {
+						icon: 'fa-solid fa-phone',
+					},
+					right: {
+						icon: 'fa-solid fa-arrow-right',
+					},
+				}}
+			/>
+		</div>
+	</>
+);

package/src/components/icon/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { IconBasic } from './basic';
+import { IconFontAwesome } from './font-awesome';
 
 export const ICON_ROUTES: Routes = {
 	icon: {
 		basic: IconBasic,
+		'font-awesome': IconFontAwesome,
 	},
 };

package/src/components/input-number/number-formatter.tsx

@@ -0,0 +1,215 @@
+import { KolForm, KolInputNumber, KolInputText } from '@public-ui/react-v19';
+import React, { type BaseSyntheticEvent } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';
+
+import { SampleDescription } from '../SampleDescription';
+
+type KolInputTextEvents = {
+	onBlur?: (event: Event) => void;
+	onChange?: (event: Event, value: unknown) => void;
+	onFocus?: (event: Event) => void;
+	onInput?: (event: Event, value: unknown) => void;
+};
+
+class NumberFormatter {
+	public parse(value: unknown): string {
+		if (value === undefined || value === null || value === '') {
+			return '';
+		}
+
+		const stringValue = String(value);
+		return stringValue.replace(/[eE.,]/g, '').replace(/\d[+-]/g, '');
+	}
+}
+
+const disallowedCharactersPattern = /[.,+eE]/;
+
+const preventInvalidKeyDown = (event: KeyboardEvent) => {
+	if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {
+		event.preventDefault();
+	}
+};
+
+type KolNumericFormatControllerProps = {
+	_label: string;
+	_msg?: React.ComponentProps<typeof KolInputText>['_msg'];
+	_touched?: boolean;
+	_on?: React.ComponentProps<typeof KolInputText>['_on'];
+	_required?: boolean;
+	value?: number;
+} & Omit<NumericFormatProps, 'customInput' | 'value' | 'onBlur' | 'onValueChange'>;
+
+function KolNumericFormat({
+	_label,
+	_msg,
+	_touched,
+	_on,
+	_required,
+	value,
+	thousandSeparator = true,
+	suffix = '€',
+	...props
+}: KolNumericFormatControllerProps) {
+	const normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;
+
+	return (
+		<NumericFormat
+			{...(props as any)}
+			value={value}
+			suffix={suffix}
+			thousandSeparator={thousandSeparator}
+			valueIsNumericString={false}
+			customInput={(inputProps: any) => {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+				const inputValue = inputProps.value;
+				return (
+					<KolInputText
+						{...inputProps}
+						_value={inputValue}
+						_label={_label}
+						_msg={_msg}
+						_touched={_touched}
+						_required={_required}
+						_on={{
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onBlur: inputProps.onBlur as ((event: Event) => void) | undefined,
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onChange: inputProps.onChange as ((event: Event, value: unknown) => void) | undefined,
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onFocus: inputProps.onFocus as ((event: Event) => void) | undefined,
+							// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+							onInput: inputProps.onInput as ((event: Event, value: unknown) => void) | undefined,
+						}}
+					/>
+				);
+			}}
+			onValueChange={(numericValue: NumberFormatValues) => {
+				const fakeEvent = new Event('input');
+				normalizedOn?.onInput?.(fakeEvent, numericValue.floatValue);
+			}}
+			onBlur={(event) => {
+				normalizedOn?.onBlur?.(event.nativeEvent);
+			}}
+		/>
+	);
+}
+
+function KolNumericFormatController(props: any) {
+	const { name, control, rules, defaultValue, shouldUnregister, disabled, _label, _required, ...componentProps } = props;
+	return (
+		<Controller
+			name={name}
+			control={control}
+			rules={rules}
+			defaultValue={defaultValue}
+			shouldUnregister={shouldUnregister}
+			disabled={disabled}
+			render={({ field, fieldState }) => {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+				const userHandlers = componentProps._on as KolInputTextEvents | undefined;
+				return (
+					<KolNumericFormat
+						{...(componentProps as any)}
+						_label={_label}
+						_required={_required}
+						value={field.value}
+						_touched={fieldState.isTouched}
+						_msg={
+							fieldState.error
+								? {
+										_type: 'error' as const,
+										_description: fieldState.error.message || String(fieldState.error),
+									}
+								: undefined
+						}
+						_on={{
+							onInput: (event: Event, value: unknown) => {
+								field.onChange(value);
+								userHandlers?.onInput?.(event, value);
+							},
+							onBlur: () => field.onBlur(),
+						}}
+					/>
+				);
+			}}
+		/>
+	);
+}
+
+type CurrencyExampleFormValues = {
+	currency: number;
+};
+
+export function InputNumberNumberFormatter() {
+	const formatter = new NumberFormatter();
+	const [displayValue, setDisplayValue] = React.useState<number | undefined>(undefined);
+	const [value, setValue] = React.useState<number | undefined>(-128);
+	const [touched, setTouched] = React.useState(false);
+
+	const initialCurrencyExampleValues: CurrencyExampleFormValues = {
+		currency: 1000000,
+	};
+
+	const currencyForm = useForm<CurrencyExampleFormValues>({
+		defaultValues: initialCurrencyExampleValues,
+		mode: 'onTouched',
+	});
+
+	const currencyValues = currencyForm.watch();
+
+	const handleCurrencySubmit = (event: Event) => {
+		void currencyForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates formatting number input. The first example shows whole number formatting where decimal separators (. and ,) and scientific
+					notation (e) are automatically removed on input. The second example shows currency formatting with react-number-format in a react-hook-form context.
+				</p>
+			</SampleDescription>
+			<section className="w-full grid gap-4">
+				<div>
+					<KolForm>
+						<KolInputNumber
+							_label="Whole number"
+							_step={1}
+							_value={displayValue ?? value}
+							_on={{
+								onKeyDown: preventInvalidKeyDown,
+								onBlur: () => {
+									setTouched(true);
+								},
+								onInput: (_event: Event, inputValue: unknown) => {
+									const cleaned = formatter.parse(inputValue);
+									const numValue = cleaned === '' ? undefined : Number(cleaned);
+
+									setDisplayValue(numValue);
+									setValue(numValue);
+								},
+							}}
+						/>
+					</KolForm>
+					<pre className="text-base mt-2">{JSON.stringify({ value, touched }, null, 2)}</pre>
+				</div>
+
+				<div>
+					<KolForm _on={{ onSubmit: handleCurrencySubmit }}>
+						<KolNumericFormatController
+							control={currencyForm.control as any}
+							name="currency"
+							decimalScale={2}
+							displayType="input"
+							rules={{ required: 'Please enter a currency amount.' }}
+							_label="Currency"
+							_required
+						/>
+					</KolForm>
+					<pre className="text-base mt-2">{JSON.stringify(currencyValues, null, 2)}</pre>
+				</div>
+			</section>
+		</>
+	);
+}

package/src/components/input-number/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputNumberBasic } from './basic';
+import { InputNumberNumberFormatter } from './number-formatter';
 
 export const INPUT_NUMBER_ROUTES: Routes = {
 	'input-number': {
 		basic: InputNumberBasic,
+		'number-formatter': InputNumberNumberFormatter,
 	},
 };

package/src/components/input-text/partials/cases.tsx

@@ -38,6 +38,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				_accessKey="V"
 				ref={ref}
 			/>
+			<KolInputText {...props} _value="Value" _label="With icon right" _icons="codicon codicon-home" />
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Search" _type="search" />
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'warning', _description: 'Small warning' }} />

package/src/components/input-text/text-formatter.tsx

@@ -1,9 +1,24 @@
-import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
-import { Field, Formik, type FieldProps } from 'formik';
-import * as React from 'react';
+import { KolForm, KolInputText } from '@public-ui/react-v19';
+import React, { useMemo, useRef, type BaseSyntheticEvent } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+
 import { SampleDescription } from '../SampleDescription';
 
-import { NumericFormat, type NumberFormatValues } from 'react-number-format';
+type InputTextElementSelection = {
+	setSelectionStart?: (position: number) => Promise<void>;
+	selectionStart?: () => Promise<number | null>;
+};
+
+type KolInputTextEvents = {
+	onBlur?: (event: Event) => void;
+	onChange?: (event: Event, value: unknown) => void;
+	onFocus?: (event: Event) => void;
+	onInput?: (event: Event, value: unknown) => void;
+};
+type KolInputTextProps = Omit<React.ComponentProps<typeof KolInputText>, '_on' | '_value'> & {
+	_on?: KolInputTextEvents;
+	_value?: string;
+};
 
 const NON_ALPHANUM = /[^a-zA-Z0-9]/g;
 const EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
@@ -20,10 +35,12 @@ class IbanFormatter {
 	public parse(value: string): string {
 		return this.electronicFormat(value);
 	}
+
 	public format(value: string, ref?: HTMLKolInputTextElement | null, selectionStart?: number | null): string {
-		if (ref && selectionStart) {
+		const setSelectionStart = (ref as InputTextElementSelection | null)?.setSelectionStart;
+		if (selectionStart && setSelectionStart) {
 			if (selectionStart % 5 === 0) selectionStart++;
-			ref?.setSelectionStart(selectionStart);
+			void setSelectionStart(selectionStart);
 		}
 		return this.printFormat(value);
 	}
@@ -33,23 +50,104 @@ type IbanExampleFormValues = {
 	iban: string;
 };
 
-type CurrencyExampleFormValues = {
-	currency: number;
-};
+function FormattedKolInputText({
+	formatter,
+	selectionStartRef,
+	_on,
+	_value,
+	...props
+}: KolInputTextProps & {
+	formatter: IbanFormatter;
+	selectionStartRef: React.MutableRefObject<number | null>;
+}) {
+	const inputRef = useRef<HTMLKolInputTextElement | null>(null);
+	const normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;
+	const sanitizedSelectionRef = selectionStartRef as React.MutableRefObject<number | null>;
+
+	const element = inputRef.current;
+	const selectionStart = sanitizedSelectionRef.current;
+	const sanitizedFormatter: IbanFormatter = formatter;
+
+	return (
+		<KolInputText
+			{...props}
+			ref={inputRef}
+			_value={sanitizedFormatter.format(_value ?? '', element, selectionStart)}
+			_on={{
+				...normalizedOn,
+				onInput: (event: Event, value: unknown) => {
+					const selectionStartGetter = (inputRef.current as InputTextElementSelection | null)?.selectionStart;
+					selectionStartGetter?.().then((start) => {
+						sanitizedSelectionRef.current = start ?? null;
+					});
+					const parsedValue = sanitizedFormatter.parse(typeof value === 'string' ? value : '');
+					normalizedOn?.onInput?.(event, parsedValue);
+				},
+			}}
+		/>
+	);
+}
+
+function KolFormattedIbanController(props: any) {
+	const { name, control, rules, defaultValue, shouldUnregister, disabled, formatter, selectionStartRef, ...componentProps } = props;
+	return (
+		<Controller
+			name={name}
+			control={control}
+			rules={rules}
+			defaultValue={defaultValue}
+			shouldUnregister={shouldUnregister}
+			disabled={disabled}
+			render={({ field, fieldState }) => {
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+				const userHandlers = componentProps._on as KolInputTextEvents | undefined;
+				return (
+					<FormattedKolInputText
+						{...(componentProps as any)}
+						formatter={formatter}
+						selectionStartRef={selectionStartRef}
+						_value={field.value}
+						_touched={fieldState.isTouched}
+						_msg={
+							fieldState.error
+								? {
+										_type: 'error' as const,
+										_description: fieldState.error.message || String(fieldState.error),
+									}
+								: undefined
+						}
+						_on={{
+							onInput: (event: Event, value: unknown) => {
+								field.onChange(value);
+								userHandlers?.onInput?.(event, value);
+							},
+							onBlur: () => field.onBlur(),
+						}}
+					/>
+				);
+			}}
+		/>
+	);
+}
 
 export function InputTextFormatterDemo() {
-	const handleSubmit = async () => {};
-	const formatter = new IbanFormatter();
+	const formatter = useMemo(() => new IbanFormatter(), []);
 
-	const textInput1 = React.useRef<HTMLKolInputTextElement>(null);
-	let textInput1SelectionStart: number | null | undefined;
+	const textInput1SelectionStart = useRef<number | null>(null);
 
 	const initialIbanExampleValues: IbanExampleFormValues = {
 		iban: 'DE89370400440532013000',
 	};
 
-	const initialCurrencyExampleValues: CurrencyExampleFormValues = {
-		currency: 1000000,
+	const ibanForm = useForm<IbanExampleFormValues>({
+		defaultValues: initialIbanExampleValues,
+		mode: 'onTouched',
+	});
+
+	const ibanValues = ibanForm.watch();
+
+	const handleIbanSubmit = (event: Event) => {
+		void ibanForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);
 	};
 
 	return (
@@ -60,93 +158,22 @@ export function InputTextFormatterDemo() {
 					vice versa the formatting is removed again (machine format)
 				</p>
 			</SampleDescription>
-			<section className="w-full flex flex-col">
-				<Formik<IbanExampleFormValues> initialValues={initialIbanExampleValues} onSubmit={handleSubmit}>
-					{(form) => (
-						<>
-							<div className="p-2">
-								<KolHeading _label="Formatted Form Field" _level={2} />
-								<KolForm>
-									<Field name="iban">
-										{({ field }: FieldProps<IbanExampleFormValues['iban']>) => (
-											<div className="block mt-2">
-												<KolInputText
-													ref={textInput1}
-													onBlur={() => {
-														void form.setFieldTouched('iban', true);
-													}}
-													id="field-iban"
-													_label="IBAN"
-													_value={formatter.format(field.value ?? '', textInput1.current, textInput1SelectionStart)}
-													_msg={{
-														_type: 'error',
-														_description: form.errors.iban || '',
-													}}
-													_touched={form.touched.iban}
-													_required
-													_on={{
-														onInput: (event, value: unknown) => {
-															if (event.target) {
-																textInput1.current?.selectionStart().then((start) => {
-																	textInput1SelectionStart = start;
-																});
-																const parsed_value = formatter.parse((value as string) ?? '');
-																void form.setFieldValue('iban', parsed_value, true);
-															}
-														},
-													}}
-												/>
-											</div>
-										)}
-									</Field>
-								</KolForm>
-							</div>
-							<div className="p-2">
-								<KolHeading _label="Model" _level={2} />
-								<pre className="text-base">{JSON.stringify(form.values, null, 2)}</pre>
-							</div>
-						</>
-					)}
-				</Formik>
-			</section>
-
-			<section className="w-full flex flex-col">
-				<Formik<CurrencyExampleFormValues> initialValues={initialCurrencyExampleValues} onSubmit={handleSubmit}>
-					{(form) => (
-						<>
-							<div className="p-2">
-								<KolHeading _label="Formatted Form Field (with react-number-format)" _level={2} />
-								<KolForm>
-									<Field name="currency">
-										{({ field }: FieldProps<CurrencyExampleFormValues['currency']>) => (
-											<div className="block mt-2">
-												<NumericFormat
-													customInput={({ type, value, onBlur, onChange, onFocus }: any) => {
-														return <KolInputText _label="Currency" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;
-													}}
-													displayType="input"
-													value={typeof field.value === 'number' ? field.value.toFixed(2) : undefined}
-													onBlur={() => {
-														void form.setFieldTouched('currency', true);
-													}}
-													onValueChange={(value: NumberFormatValues) => {
-														void form.setFieldValue('currency', value.floatValue, true);
-													}}
-													suffix={'€'}
-													thousandSeparator={true}
-												/>
-											</div>
-										)}
-									</Field>
-								</KolForm>
-							</div>
-							<div className="p-2">
-								<KolHeading _label="Model" _level={2} />
-								<pre className="text-base">{JSON.stringify(form.values, null, 2)}</pre>
-							</div>
-						</>
-					)}
-				</Formik>
+			<section className="w-full">
+				<div>
+					<KolForm _on={{ onSubmit: handleIbanSubmit }}>
+						<KolFormattedIbanController
+							control={ibanForm.control as any}
+							name="iban"
+							id="field-iban"
+							formatter={formatter}
+							selectionStartRef={textInput1SelectionStart}
+							rules={{ required: 'Please enter an IBAN.' }}
+							_label="IBAN"
+							_required
+						/>
+					</KolForm>
+					<pre className="text-base mt-2">{JSON.stringify(ibanValues, null, 2)}</pre>
+				</div>
 			</section>
 		</>
 	);