@public-ui/sample-react 3.0.8-rc.0 → 3.0.8-rc.2

package/public/assets/material-symbols/package.json

@@ -1,41 +1,41 @@
 {
-  "name": "material-symbols",
-  "version": "0.5.5",
-  "description": "Latest variable icon fonts and CSS for Material Symbols.",
-  "main": "index.css",
-  "sass": "index.scss",
-  "types": "index.d.ts",
-  "files": [
-    "index.d.ts",
-    "*.{css,scss,woff2}"
-  ],
-  "scripts": {
-    "build": "sass --no-source-map --no-error-css ."
-  },
-  "devDependencies": {
-    "sass": "1.56.1"
-  },
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/marella/material-symbols.git",
-    "directory": "material-symbols"
-  },
-  "bugs": {
-    "url": "https://github.com/marella/material-symbols/issues"
-  },
-  "homepage": "https://marella.github.io/material-symbols/demo/",
-  "keywords": [
-    "material-symbols",
-    "material-icons",
-    "material-design-icons",
-    "material-design",
-    "material",
-    "symbols",
-    "icons",
-    "font"
-  ],
-  "publishConfig": {
-    "access": "public"
-  }
+	"name": "material-symbols",
+	"version": "0.5.5",
+	"description": "Latest variable icon fonts and CSS for Material Symbols.",
+	"main": "index.css",
+	"sass": "index.scss",
+	"types": "index.d.ts",
+	"files": [
+		"index.d.ts",
+		"*.{css,scss,woff2}"
+	],
+	"scripts": {
+		"build": "sass --no-source-map --no-error-css ."
+	},
+	"devDependencies": {
+		"sass": "1.56.1"
+	},
+	"license": "Apache-2.0",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/marella/material-symbols.git",
+		"directory": "material-symbols"
+	},
+	"bugs": {
+		"url": "https://github.com/marella/material-symbols/issues"
+	},
+	"homepage": "https://marella.github.io/material-symbols/demo/",
+	"keywords": [
+		"material-symbols",
+		"material-icons",
+		"material-design-icons",
+		"material-design",
+		"material",
+		"symbols",
+		"icons",
+		"font"
+	],
+	"publishConfig": {
+		"access": "public"
+	}
 }

package/src/components/accordion/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolAccordion } from '@public-ui/react-v19';
+import { KolAccordion, KolCombobox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
@@ -15,11 +15,15 @@ export const AccordionBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolAccordion _label="Heading Accordion Tab 1">Contents Accordion Tab 1</KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 1 (open)" _open>
+				<KolCombobox _label="Combobox in Accordion" _suggestions="['Herr','Frau','Firma']" />
+			</KolAccordion>
 			<KolAccordion _label="Heading Accordion Tab 2">Contents Accordion Tab 2</KolAccordion>
-			<KolAccordion _label="Heading Accordion Tab 2 (deactivated)" _disabled></KolAccordion>
-			<KolAccordion _label="Heading Accordion Tab 2 (disabled and open)" _disabled _open>
-				Contents Accordion Tab 2
+			<KolAccordion _label="Heading Accordion Tab 3 (deactivated)" _disabled>
+				Contents Accordion Tab 3
+			</KolAccordion>
+			<KolAccordion _label="Heading Accordion Tab 4 (disabled and open)" _disabled _open>
+				Contents Accordion Tab 4
 			</KolAccordion>
 		</div>
 	</>

package/src/components/avatar/basic.tsx

@@ -6,7 +6,10 @@ import { SampleDescription } from '../SampleDescription';
 export const AvatarBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAlert shows a user&apos;s avatar. It can be used with or without an image. If no image is defined, the name&apos;s initials are shown instead.</p>
+			<p>
+				KolAvatar shows a user&apos;s avatar with customizable colors. It can be used with or without an image. If no image is defined, the name&apos;s initials
+				are shown instead with a configurable background color.
+			</p>
 		</SampleDescription>
 
 		<div className="flex flex-wrap gap-4">
@@ -15,6 +18,7 @@ export const AvatarBasic: FC = () => (
 			{/* intentional trailing space    👇 - it's supposed to be trimmed */}
 			<KolAvatar _label="Elke Mustermann " />
 			<KolAvatar _label="Marianne" />
+			<KolAvatar _color="#0000FF" _label="Christian" />
 		</div>
 	</>
 );

package/src/components/button/icons.tsx

@@ -8,7 +8,6 @@ import { SampleDescription } from '../SampleDescription';
 
 export const ButtonIcons: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
-
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
@@ -37,6 +36,7 @@ export const ButtonIcons: FC = () => {
 					}}
 					_label="Label"
 					_on={dummyEventHandler}
+					className="w-10rem"
 				/>
 			</div>
 		</>

package/src/components/card/headlines.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardHeadlines: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows cards with all headline levels as title.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with headline level 0" _level={0}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 1" _level={1}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 2" _level={2}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 3" _level={3}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 4" _level={4}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 5" _level={5}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 6" _level={6}>
+					<div>Card contents.</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { CardBasic } from './basic';
+import { CardHeadlines } from './headlines';
 
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
+		headlines: CardHeadlines,
 	},
 };

package/src/components/combobox/html.tsx

@@ -0,0 +1,16 @@
+import { KolCombobox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ComboboxHtml: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>A HTML only KolCombobox.</p>
+			</SampleDescription>
+
+			<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" />
+		</>
+	);
+};

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/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,
 	},
 };