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

package/src/components/input-text/expert-slot.tsx

@@ -1,17 +1,33 @@
+import { KolBadge, KolIcon, KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolInputText } from '@public-ui/react';
 
 export const InputTextExpertSlot = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample show KolInputText with expert slot.</p>
+				<p>This sample shows KolInputText with expert slot. The expert slot allows for complex custom content beyond simple text inputs.</p>
 			</SampleDescription>
 
-			<KolInputText _label="" _type="text">
-				<span slot="expert">I am more than just a input field</span>
-			</KolInputText>
+			<div className="grid gap-4">
+				<KolInputText _label="" _type="text">
+					<span slot="expert">I am more than just a input field</span>
+				</KolInputText>
+
+				<KolInputText _label="" _type="text" _value="Complex example">
+					<div slot="expert" className="flex items-center gap-2">
+						<KolBadge _label="Premium" _color="#1a73e8" />
+						<KolIcon _icons="codicon codicon-verified-filled" _label="" />
+						<span>Verified account with premium features</span>
+					</div>
+				</KolInputText>
+
+				<KolInputText _label="" _type="text" _placeholder="Enter your email">
+					<div slot="expert" style={{ padding: '0.5rem', backgroundColor: '#f0f0f0', borderRadius: '4px' }}>
+						<strong>Note:</strong> This email will be used for account recovery and notifications.
+					</div>
+				</KolInputText>
+			</div>
 		</>
 	);
 };

package/src/components/input-text/hide-label.tsx

@@ -0,0 +1,48 @@
+import { KolAlert, KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextHideLabel: FC = () => (
+	<div className="grid gap-4">
+		<SampleDescription>
+			<p>
+				This story demonstrates the <code>_hideLabel</code> feature for KolInputText. It allows hiding the label visually while keeping it accessible for screen
+				readers.
+			</p>
+		</SampleDescription>
+
+		<section>
+			<KolInputText _hideLabel _label="Search" _placeholder="Search..." _type="search" />
+		</section>
+
+		<section>
+			<KolInputText _hideLabel _label="Email" _placeholder="Enter email" _msg={{ _type: 'error', _description: 'Invalid email format' }} _touched />
+		</section>
+
+		<section>
+			<fieldset className="grid md:grid-cols-2 gap-4">
+				<legend>Street Address</legend>
+				<KolAlert className="col-span-2" _level={0} _type="error">
+					Please complete the address
+				</KolAlert>
+				<KolInputText
+					_hideLabel
+					_hideMsg
+					_label="Street name"
+					_placeholder="Street name"
+					_msg={{ _type: 'error', _description: 'Please complete the address' }}
+					_touched
+				/>
+				<KolInputText
+					_hideLabel
+					_hideMsg
+					_label="House number"
+					_placeholder="Number"
+					_msg={{ _type: 'error', _description: 'Please complete the address' }}
+					_touched
+				/>
+			</fieldset>
+		</section>
+	</div>
+);

package/src/components/input-text/{hide-errors.tsx → hide-msg.tsx}

@@ -1,29 +1,29 @@
-import { KolAlert, KolCard, KolInputText } from '@public-ui/react';
+import { KolAlert, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
-export const InputTextHideErrors: FC = () => (
+export const InputTextHideMsg: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
 			<p>
-				This sample shows the <code>_hideError</code> feature for KolInputText. It allows to hide the error message from an input field and can be used, when
-				the error is already shown somewhere else, e.g. for a group of inputs.
+				This sample shows the <code>_hideMsg</code> feature for KolInputText. It allows to hide the message from an input field and can be used, when the
+				message (e.g. error) is already shown somewhere else, e.g. for a group of inputs.
 			</p>
 		</SampleDescription>
 
-		<KolCard _label="Normal input field with error" _level={0}>
+		<section>
 			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
-		</KolCard>
-		<KolCard _label="Input fields with hidden error" _level={0}>
+		</section>
+		<section>
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Combined input field</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
-				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="First input" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideMsg _label="Second input with error" _touched />
 			</fieldset>
-		</KolCard>
+		</section>
 	</div>
 );

package/src/components/input-text/message-types.tsx

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextMessageTypes: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates all available message types for KolInputText: default, info, error, warning, and success.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Default message" _value="Valid value" _msg={{ _type: 'default', _description: 'This is a default message' }} _touched />
+			<KolInputText _label="Error message" _value="Invalid value" _msg={{ _type: 'error', _description: 'This is an error message' }} _touched />
+			<KolInputText _label="Info message" _value="Some value" _msg={{ _type: 'info', _description: 'This is an informational message' }} _touched />
+			<KolInputText _label="Success message" _value="Valid value" _msg={{ _type: 'success', _description: 'This is a success message' }} _touched />
+			<KolInputText _label="Warning message" _value="Valid value" _msg={{ _type: 'warning', _description: 'This is a warning message' }} _touched />
+		</div>
+	</>
+);

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

@@ -0,0 +1,20 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextPlaceholder: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the placeholder feature of KolInputText.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="First name" _placeholder="Enter your first name" />
+			<KolInputText _label="Email address" _placeholder="user@example.com" />
+			<KolInputText _label="Phone number" _placeholder="+49 123 456789" _type="tel" />
+			<KolInputText _label="Website" _placeholder="https://example.com" _type="url" />
+			<KolInputText _label="Search" _placeholder="Search..." _type="search" />
+		</div>
+	</>
+);

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

@@ -0,0 +1,25 @@
+import { KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextReadonly: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This story demonstrates the readonly state of KolInputText. Readonly inputs can be focused but not edited.</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolInputText _label="Readonly with placeholder" _placeholder="Placeholder text" _readOnly />
+			<KolInputText _label="Readonly with value" _value="This field is readonly" _readOnly />
+			<KolInputText
+				_label="Readonly with info message"
+				_value="Read-only value"
+				_msg={{ _type: 'info', _description: 'This field cannot be edited' }}
+				_readOnly
+				_touched
+			/>
+			<KolInputText _label="Comparison: Editable" _value="This field is editable" />
+		</div>
+	</>
+);

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

@@ -1,16 +1,32 @@
 import { Routes } from '../../shares/types';
+import { InputTextAccessShortKey } from './access-short-key';
+import { InputTextBackground } from './background-test';
 import { InputTextBasic } from './basic';
-import { InputTextHideErrors } from './hide-errors';
-import { InputTextFormatterDemo } from './text-formatter';
-import { InputTextSmartButton } from './smart-button';
+import { InputTextDisabled } from './disabled';
 import { InputTextExpertSlot } from './expert-slot';
+import { InputTextHideLabel } from './hide-label';
+import { InputTextHideMsg } from './hide-msg';
+import { InputTextMessageTypes } from './message-types';
+import { InputTextPlaceholder } from './placeholder';
+import { InputTextReadonly } from './readonly';
+import { InputTextSelectRange } from './select-range';
+import { InputTextSmartButton } from './smart-button';
+import { InputTextFormatterDemo } from './text-formatter';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		'hide-errors': InputTextHideErrors,
+		'message-types': InputTextMessageTypes,
+		placeholder: InputTextPlaceholder,
+		disabled: InputTextDisabled,
+		readonly: InputTextReadonly,
+		'access-short-key': InputTextAccessShortKey,
+		'hide-label': InputTextHideLabel,
+		'hide-msg': InputTextHideMsg,
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
+		'select-range': InputTextSelectRange,
+		background: InputTextBackground,
 	},
 };

package/src/components/input-text/select-range.tsx

@@ -0,0 +1,36 @@
+import { KolButtonLink, KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputTextSelectRange = () => {
+	const textInput = React.useRef<HTMLKolInputTextElement>(null);
+
+	function setSelectioStart() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionStart(8);
+	}
+
+	function setSelectionRange() {
+		textInput.current?.focus();
+		textInput.current?.setSelectionRange(2, 5);
+	}
+
+	function setRangeText() {
+		textInput.current?.focus();
+		textInput.current?.setRangeText('INSERTED', 5, 9, 'select');
+	}
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how to change the selection in a KolInputText.</p>
+			</SampleDescription>
+			<div className="grid gap-4">
+				<KolInputText _value="Very long value" _label="Text Input Label" ref={textInput} />
+				<KolButtonLink _label="Set Start" onClick={setSelectioStart} />
+				<KolButtonLink _label="Set Range" onClick={setSelectionRange} />
+				<KolButtonLink _label="Set Range Text" onClick={setRangeText} />
+			</div>
+		</>
+	);
+};

package/src/components/input-text/smart-button.tsx

@@ -1,23 +1,32 @@
+import { ToasterService } from '@public-ui/components';
+import { KolInputText } from '@public-ui/react-v19';
 import * as React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { ToasterService } from '@public-ui/components';
-import { KolInputText } from '@public-ui/react';
+
+const smartButtonProps = {
+	_icons: 'codicon codicon-info',
+	_hideLabel: true,
+};
+
+const icons = {
+	left: {
+		icon: 'codicon codicon-search',
+	},
+	right: {
+		icon: 'codicon codicon-check',
+	},
+};
 
 export const InputTextSmartButton = () => {
 	const toaster = ToasterService.getInstance(document);
 
-	const smartButton = {
-		_icons: 'codicon codicon-info',
-		_hideLabel: true,
-		_label: 'Alert',
-		_on: {
-			onClick: () => {
-				void toaster.enqueue({
-					description: 'Smart-Button clicked',
-					label: `Toaster`,
-					type: 'default',
-				});
-			},
+	const handleClick = {
+		onClick: () => {
+			void toaster.enqueue({
+				description: 'Smart-Button clicked',
+				label: `Toaster`,
+				type: 'default',
+			});
 		},
 	};
 
@@ -27,7 +36,28 @@ export const InputTextSmartButton = () => {
 				<p>This sample shows the smart button feature for KolInputText. It allows the usage of a button inside the bnput.</p>
 			</SampleDescription>
 
-			<KolInputText _label="With Smart Button" _type="text" _smartButton={smartButton}></KolInputText>
+			<div className="grid gap-4">
+				<KolInputText
+					_label="Input with button and icons"
+					_type="text"
+					_smartButton={{
+						...smartButtonProps,
+						_label: 'Open Toast',
+						_on: handleClick,
+					}}
+					_icons={icons}
+				></KolInputText>
+				<KolInputText
+					_label="Disabled input with button and icons"
+					_disabled
+					_type="text"
+					_smartButton={{
+						...smartButtonProps,
+						_label: 'Disabled Button',
+					}}
+					_icons={icons}
+				></KolInputText>
+			</div>
 		</>
 	);
 };

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

@@ -1,9 +1,24 @@
-import * as React from 'react';
-import { Formik, Field, type FieldProps } from 'formik';
-import { KolForm, KolHeading, KolInputText } from '@public-ui/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,7 +35,13 @@ class IbanFormatter {
 	public parse(value: string): string {
 		return this.electronicFormat(value);
 	}
-	public format(value: string): string {
+
+	public format(value: string, ref?: HTMLKolInputTextElement | null, selectionStart?: number | null): string {
+		const setSelectionStart = (ref as InputTextElementSelection | null)?.setSelectionStart;
+		if (selectionStart && setSelectionStart) {
+			if (selectionStart % 5 === 0) selectionStart++;
+			void setSelectionStart(selectionStart);
+		}
 		return this.printFormat(value);
 	}
 }
@@ -29,20 +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 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 (
@@ -53,91 +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
-													onBlur={() => {
-														void form.setFieldTouched('iban', true);
-													}}
-													id="field-iban"
-													_label="IBAN"
-													_value={formatter.format(field.value ?? '')}
-													_msg={{
-														_type: 'error',
-														_description: form.errors.iban || '',
-													}}
-													_touched={form.touched.iban}
-													_required
-													_on={{
-														onInput: (event, value: unknown) => {
-															if (event.target) {
-																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, ...other }: any) => {
-														console.log('OTHER: ', other);
-														return <KolInputText _label="Currency" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;
-													}}
-													displayType="input"
-													value={typeof field.value === 'number' ? 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>
 		</>
 	);

package/src/components/kolibri/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolHeading, KolKolibri } from '@public-ui/react';
+import { KolHeading, KolKolibri } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 

package/src/components/link/access-key.tsx

@@ -1,15 +1,13 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolLink } from '@public-ui/react';
+import { KolLink } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkAccessKey: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
-			</p>
+			<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">

package/src/components/link/aria-description.tsx

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