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

package/src/components/input-date/copy-paste.tsx

@@ -0,0 +1,172 @@
+import { KolButton, KolInputDate, KolInputText } from '@public-ui/react-v19';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+/** -----------------------------
+ * Types & helpers
+ * ----------------------------- */
+const pad2 = (n: number): string => String(n).padStart(2, '0');
+
+type Year = `${number}`;
+type Month = `${number}`;
+type Day = `${number}`;
+type IsoDate = `${Year}-${Month}-${Day}`;
+
+const isValidYmd = (y: number, m: number, d: number): boolean => {
+	const dt = new Date(y, m - 1, d);
+	return dt.getFullYear() === y && dt.getMonth() === m - 1 && dt.getDate() === d;
+};
+
+/** Parse ONLY German format DD.MM.YYYY to ISO (internal use) */
+function parseDeToIso(input: string): IsoDate | null {
+	const m = /^\s*(\d{1,2})\.(\d{1,2})\.(\d{4})\s*$/.exec(input);
+	if (!m) return null;
+	const d = +m[1];
+	const mo = +m[2];
+	const y = +m[3];
+	if (!isValidYmd(y, mo, d)) return null;
+	return `${y}-${pad2(mo)}-${pad2(d)}` as IsoDate;
+}
+
+/** -----------------------------
+ * Typed Web Component bridge
+ * ----------------------------- */
+type SetIsoValueMethod = (iso: IsoDate | null) => Promise<void>;
+
+type KolInputDateHost = HTMLKolInputDateElement & {
+	setIsoValue?: SetIsoValueMethod;
+	value?: string;
+	_value?: IsoDate | Date | null;
+};
+
+function isKolHost(n: EventTarget): n is KolInputDateHost {
+	return n instanceof HTMLElement && n.tagName === 'KOL-INPUT-DATE';
+}
+
+async function setKolInputDateValue(host: KolInputDateHost, iso: IsoDate): Promise<void> {
+	if (typeof host.setIsoValue === 'function') {
+		await host.setIsoValue(iso);
+	} else if (typeof host.value !== 'undefined') {
+		host.value = iso;
+	} else if (typeof host._value !== 'undefined') {
+		host._value = iso;
+	} else {
+		host.setAttribute('_value', iso);
+	}
+
+	host.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+	host.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+}
+
+/** -----------------------------
+ * React component
+ * ----------------------------- */
+export const InputDateCopyPaste: React.FC = () => {
+	const [deValue, setDeValue] = useState<string>('31.12.2025');
+	const [status, setStatus] = useState<string>('');
+	const activeKolHostRef = useRef<KolInputDateHost | null>(null);
+
+	const isoFromDe = useMemo(() => parseDeToIso(deValue), [deValue]);
+
+	// Track focus target inside shadow DOM
+	useEffect(() => {
+		const ac = new AbortController();
+		const onFocusIn = (e: Event): void => {
+			const path = (e.composedPath?.() ?? []) as EventTarget[];
+			activeKolHostRef.current = path.find(isKolHost) ?? null;
+		};
+		document.addEventListener('focusin', onFocusIn, { capture: true, signal: ac.signal });
+		return () => ac.abort();
+	}, []);
+
+	// Global paste handler: read German date from clipboard, convert to ISO internally, inject into KolInputDate
+	useEffect(() => {
+		const ac = new AbortController();
+
+		const onPaste = (e: ClipboardEvent): void => {
+			const host = activeKolHostRef.current;
+			if (!host) return;
+
+			const raw = e.clipboardData?.getData('text') ?? '';
+			const iso = parseDeToIso(raw);
+
+			if (!iso) {
+				setStatus('Clipboard: unrecognized date. Use DD.MM.YYYY.');
+				return;
+			}
+
+			e.preventDefault();
+			void setKolInputDateValue(host, iso);
+			setStatus('Pasted.');
+		};
+
+		document.addEventListener('paste', onPaste, { capture: true, signal: ac.signal });
+		return () => ac.abort();
+	}, []);
+
+	const copyToClipboard = useCallback(async (text: string): Promise<void> => {
+		setStatus('');
+		try {
+			await navigator.clipboard.writeText(text);
+			setStatus('Copied.');
+		} catch {
+			setStatus('Copy failed. Your browser may block clipboard access.');
+		}
+	}, []);
+
+	/** -----------------------------
+	 * KolInputText handlers (match signature: (event, value: unknown) => void)
+	 * ----------------------------- */
+	const handleDeInput = useCallback((event: Event, value: unknown) => {
+		if (event?.target) {
+			const next = typeof value === 'string' ? value : String(value ?? '');
+			setDeValue(next);
+		}
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					Type a date in German format (<code>DD.MM.YYYY</code>), click <em>Copy to Clipboard</em>, then paste it into the date field below with <kbd>Ctrl</kbd>
+					+<kbd>V</kbd>. The ISO conversion happens internally.
+				</p>
+			</SampleDescription>
+
+			<div className="grid gap-8" lang="en">
+				<section aria-labelledby="de-title">
+					<h3 id="de-title" className="text-lg font-semibold mb-2">
+						German date (DD.MM.YYYY)
+					</h3>
+
+					<div className="grid gap-3">
+						<KolInputText
+							className="w-full"
+							_label="German date (DD.MM.YYYY)"
+							_placeholder="e.g., 31.12.2025"
+							_value={deValue}
+							_type="text"
+							_on={{
+								onInput: handleDeInput,
+								onChange: handleDeInput,
+							}}
+						/>
+
+						<small className="opacity-80">Click the button to copy the exact German date, then paste it into the date field below.</small>
+
+						<div className="flex items-center gap-2">
+							<KolButton _label="Copy to Clipboard" _on={{ onClick: () => copyToClipboard(deValue) }} />
+							{!isoFromDe && <span className="text-red-600">Invalid date</span>}
+						</div>
+
+						<KolInputDate _type="date" _label="Date (paste here with Ctrl+V)" className="w-full" />
+					</div>
+				</section>
+
+				<p aria-live="polite" role="status" className="mt-2 opacity-80">
+					{status}
+				</p>
+			</div>
+		</>
+	);
+};

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

@@ -1,26 +1,30 @@
+import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-import { KolInputDate } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
 	return (
 		<div className="grid gap-4">
 			<div className="black-background">
-				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />{' '}
+				<KolInputDate {...props} _type="date" _label="Date input (Black background test)" _required />
 			</div>
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate
 				{...props}
 				_step={1}
 				_type="datetime-local"
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Local datetime (with seconds)"
 				_required
 				_touched
 			/>
+			<KolInputDate {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Date" _touched />
+			<KolInputDate {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Date" _touched />
 			<KolInputDate {...props} _type="month" _label="Month" _required />
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
 			<KolInputDate {...props} _type="time" _label="Time (standard)" _required />

package/src/components/input-date/partials/minMax.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
-import { KolInputDate } from '@public-ui/react';
 import type { Components } from '@public-ui/components';
+import { KolInputDate } from '@public-ui/react-v19';
+import React from 'react';
 
-export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {
+export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';
 	const maxDateIso = '2024-09-27';
 
@@ -38,4 +38,4 @@ export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Componen
 			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
 		</div>
 	);
-});
+};

package/src/components/input-date/partials/variants.tsx

@@ -3,10 +3,11 @@ import React, { forwardRef } from 'react';
 import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Date</legend>
 				<InputDateCases {...props} />
@@ -17,8 +18,8 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 			</fieldset>
 			<fieldset>
 				<legend>Date (with min/max)</legend>
-				<InputDateMinMaxCases ref={ref} {...props} />
+				<InputDateMinMaxCases {...props} />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-date/reset.tsx

@@ -1,5 +1,5 @@
+import { KolButton, KolInputDate } from '@public-ui/react-v19';
 import React, { useRef } from 'react';
-import { KolButton, KolInputDate } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const InputDateReset = () => {

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

@@ -1,10 +1,14 @@
 import { Routes } from '../../shares/types';
 import { InputDateBasic } from './basic';
+import { InputDateCopyPaste } from './copy-paste';
 import { InputDateReset } from './reset';
+import { InputDateShowHideMsg } from './show-hide-msg';
 
 export const INPUT_DATE_ROUTES: Routes = {
 	'input-date': {
 		basic: InputDateBasic,
+		'copy-paste': InputDateCopyPaste,
 		reset: InputDateReset,
+		'show-hide-msg': InputDateShowHideMsg,
 	},
 };

package/src/components/input-date/show-hide-msg.tsx

@@ -0,0 +1,59 @@
+import { KolInputCheckbox, KolInputDate } from '@public-ui/react-v19';
+import React, { useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+const msgTypes = ['default', 'error', 'info', 'success', 'warning'] as const;
+
+function onGenerator(setter: (cb: (b: boolean) => boolean) => void) {
+	return {
+		onChange: () => setter((b) => !b),
+	};
+}
+
+export const InputDateShowHideMsg = () => {
+	const [showMsg, setShowMsg] = useState(true);
+	const [isTouched, setIsTouched] = useState(true);
+	const [hideMsg, setHideMsg] = useState(false);
+
+	const onMsg = onGenerator(setShowMsg);
+	const onTouched = onGenerator(setIsTouched);
+	const onHideMsg = onGenerator(setHideMsg);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This example shows how messages work in input fields.</p>
+			</SampleDescription>
+
+			<div className="flex gap-4 flex-col">
+				<div className="flex gap-4 items-center">
+					<KolInputCheckbox _label="Toggle Msg" _on={onMsg} _checked={showMsg} _variant="button" />
+					<KolInputCheckbox _label="Toggle Touched" _on={onTouched} _checked={isTouched} _variant="button" />
+					<KolInputCheckbox _label="Toggle Hide Msg" _on={onHideMsg} _checked={hideMsg} _variant="button" />
+				</div>
+				<pre>
+					Message exists: {showMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'})<br />
+					Non-Error-Message visible: {showMsg && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, hideMsg: {hideMsg ? 'Yes' : 'No'})<br />
+					Error-Message visible: {showMsg && isTouched && !hideMsg ? 'Yes' : 'No'} (showMsg: {showMsg ? 'Yes' : 'No'}, isTouched: {isTouched ? 'Yes' : 'No'},
+					hideMsg: {hideMsg ? 'Yes' : 'No'})
+				</pre>
+				{msgTypes.map((type) => (
+					<KolInputDate
+						key={type}
+						_hideMsg={hideMsg}
+						_label={`Date (_msg, ${type})`}
+						_msg={
+							showMsg
+								? {
+										_description: `${type} message`,
+										_type: type,
+									}
+								: undefined
+						}
+						_touched={isTouched}
+					/>
+				))}
+			</div>
+		</>
+	);
+};

package/src/components/input-email/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputEmailVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputEmailVariants } from './partials/variants';
 
 export const InputEmailBasic: FC = () => (
 	<>
@@ -11,6 +11,6 @@ export const InputEmailBasic: FC = () => (
 			<p>KolInputEmail renders an email input field. The sample shows KolInputEmail in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputEmailVariants} />
+		<FormWrap RefComponent={InputEmailVariants} showButtons={false} />
 	</>
 );

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

@@ -1,10 +1,9 @@
+import type { Components } from '@public-ui/components';
+import { KolInputEmail } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-import { KolInputEmail } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -18,6 +17,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (list)"
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{
@@ -29,6 +29,10 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 					},
 				}}
 			/>
+			<KolInputEmail {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="E-Mail" _touched />
+			<KolInputEmail {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="E-Mail" _touched />
+			<KolInputEmail {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="E-Mail" _touched />
+			<KolInputEmail {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="E-Mail" _touched />
 			<KolInputEmail {...props} _disabled _value="test@mail.de" _label="E-Mail (Disabled)" />
 			<KolInputEmail {...props} _readOnly _value="test@mail.de" _label="E-Mail (Readonly)" />
 			<KolInputEmail {...props} _value="test@mail.de" _label="With access key" _accessKey="c" />

package/src/components/input-email/partials/variants.tsx

@@ -3,9 +3,10 @@ import React, { forwardRef } from 'react';
 import { InputEmailCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { SampleColumns } from '../../SampleColumns';
 export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>Email</legend>
 				<InputEmailCases {...props} />
@@ -14,6 +15,6 @@ export const InputEmailVariants = forwardRef<HTMLKolInputEmailElement, Component
 				<legend>Email (hideLabel)</legend>
 				<InputEmailCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

package/src/components/input-file/basic.tsx

@@ -2,8 +2,8 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { FormWrap } from '../FormWrap';
-import { InputFileVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { InputFileVariants } from './partials/variants';
 
 export const InputFileBasic: FC = () => (
 	<>
@@ -11,6 +11,6 @@ export const InputFileBasic: FC = () => (
 			<p>KolInputFile renders a file input field. The sample shows KolInputFile in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputFileVariants} />
+		<FormWrap RefComponent={InputFileVariants} showButtons={false} />
 	</>
 );

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

@@ -1,10 +1,9 @@
+import type { Components } from '@public-ui/components';
+import { KolInputFile } from '@public-ui/react-v19';
 import React, { forwardRef } from 'react';
 
-import { KolInputFile } from '@public-ui/react';
-
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components } from '@public-ui/components';
 export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileCases(props, ref) {
 	return (
 		<div className="grid gap-4">
@@ -23,6 +22,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			<KolInputFile
 				{...props}
 				_required
+				_hint={HINT_MSG}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Upload file (Black background test)"
 				_icons={{
@@ -32,6 +32,10 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				}}
 				_touched
 			/>
+			<KolInputFile {...props} _msg={{ _type: 'info', _description: 'Just a hint' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'warning', _description: 'Small warning' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'success', _description: 'Success message' }} _label="Upload file" _touched />
+			<KolInputFile {...props} _msg={{ _type: 'default', _description: 'Default message' }} _label="Upload file" _touched />
 			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Upload file (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Upload file (Disabled)" />
 			<KolInputFile {...props} _label="With access key" _accessKey="c" />

package/src/components/input-file/partials/variants.tsx

@@ -1,11 +1,12 @@
 import React, { forwardRef } from 'react';
 
+import { SampleColumns } from '../../SampleColumns';
 import { InputFileCases } from './cases';
 
 import type { Components } from '@public-ui/components';
 export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.KolInputFile>(function InputFileVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
+		<SampleColumns>
 			<fieldset>
 				<legend>File</legend>
 				<InputFileCases {...props} />
@@ -14,6 +15,6 @@ export const InputFileVariants = forwardRef<HTMLKolInputFileElement, Components.
 				<legend>File (hideLabel)</legend>
 				<InputFileCases ref={ref} {...props} _hideLabel />
 			</fieldset>
-		</div>
+		</SampleColumns>
 	);
 });

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

@@ -14,6 +14,6 @@ export const InputNumberBasic: FC = () => (
 				emphasize validation rules, supporting examples without form validation, and refrains from additional validation through native HTML element validation.
 			</p>
 		</SampleDescription>
-		<FormWrap RefComponent={InputNumberVariants} />
+		<FormWrap RefComponent={InputNumberVariants} showButtons={false} />
 	</>
 );