@public-ui/sample-react 2.1.7 → 2.1.8

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

@@ -5,15 +5,27 @@ import { InputCheckboxCases } from './cases';
 import type { Components } from '@public-ui/components';
 export const InputCheckboxVariants = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxVariant(props, ref) {
 	return (
-		<div className="grid md:grid-cols-2 gap-4">
-			<fieldset>
-				<legend>Checkbox</legend>
-				<InputCheckboxCases {...props} />
-			</fieldset>
-			<fieldset>
-				<legend>Checkbox (hideLabel)</legend>
-				<InputCheckboxCases ref={ref} {...props} _hideLabel />
-			</fieldset>
-		</div>
+		<>
+			<div className="grid md:grid-cols-2 gap-4">
+				<fieldset>
+					<legend>Label align &quot;left&quot; with label</legend>
+					<InputCheckboxCases {...props} _labelAlign="left" />
+				</fieldset>
+				<fieldset>
+					<legend>Label align &quot;left&quot; without Label (hideLabel)</legend>
+					<InputCheckboxCases ref={ref} {...props} _hideLabel _labelAlign="left" />
+				</fieldset>
+			</div>
+			<div className="grid md:grid-cols-2 gap-4">
+				<fieldset>
+					<legend>Label align &quot;right&quot; with label</legend>
+					<InputCheckboxCases {...props} />
+				</fieldset>
+				<fieldset>
+					<legend>Label align &quot;right&quot; without Label (hideLabel)</legend>
+					<InputCheckboxCases ref={ref} {...props} _hideLabel />
+				</fieldset>
+			</div>
+		</>
 	);
 });

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

@@ -14,7 +14,7 @@ export const InputDateReset = () => {
 				</p>
 			</SampleDescription>
 
-			<KolInputDate ref={dateRef} _label="Resettable Input Date" _value="2024-02-10" />
+			<KolInputDate className="w-full" ref={dateRef} _label="Resettable Input Date" _value="2024-02-10" />
 			<KolButton className="mt" _label={'Reset'} _on={{ onClick: () => dateRef.current?.reset() }} />
 		</>
 	);

package/src/components/input-password/show-password.tsx

@@ -16,7 +16,7 @@ export const InputPasswordShowPassword: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolForm>
+			<KolForm className="w-full">
 				<KolInputPassword _placeholder="With 'Show password' button" _label="Password" ref={passwordRef} className="block" _variant="visibility-toggle" />
 				<KolInputPassword
 					_placeholder="With 'Show password' button and disabled"

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

@@ -38,7 +38,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<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' }} />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'success', _description: 'Success message' }} />
-			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _hasCounter _maxLength={10} />
+			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _hasCounter _maxLength={10} _value="Lorem Ipsum" />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="First name (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="First name (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="First name (text, disabled)" />

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

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
 import { InputTextHideErrors } from './hide-errors';
 import { InputTextFormatterDemo } from './text-formatter';
+import { InputTextSmartButton } from './smart-button';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
 		'hide-errors': InputTextHideErrors,
 		'text-formatter': InputTextFormatterDemo,
+		'smart-button': InputTextSmartButton,
 	},
 };

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { ToasterService } from '@public-ui/components';
+import { KolInputText } from '@public-ui/react';
+
+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',
+				});
+			},
+		},
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<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>
+		</>
+	);
+};

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

@@ -3,6 +3,8 @@ import { Formik, Field, type FieldProps } from 'formik';
 import { KolForm, KolHeading, KolInputText } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
+import { NumericFormat, type NumberFormatValues } from 'react-number-format';
+
 const NON_ALPHANUM = /[^a-zA-Z0-9]/g;
 const EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
 
@@ -23,17 +25,26 @@ class IbanFormatter {
 	}
 }
 
-type FormValues = {
+type IbanExampleFormValues = {
 	iban: string;
 };
 
+type CurrencyExampleFormValues = {
+	currency: number;
+};
+
 export function InputTextFormatterDemo() {
 	const handleSubmit = async () => {};
 	const formatter = new IbanFormatter();
-	const initialValues: FormValues = {
+
+	const initialIbanExampleValues: IbanExampleFormValues = {
 		iban: 'DE89370400440532013000',
 	};
 
+	const initialCurrencyExampleValues: CurrencyExampleFormValues = {
+		currency: 1000000,
+	};
+
 	return (
 		<>
 			<SampleDescription>
@@ -42,50 +53,92 @@ export function InputTextFormatterDemo() {
 					vice versa the formatting is removed again (machine format)
 				</p>
 			</SampleDescription>
-			<Formik<FormValues> initialValues={initialValues} onSubmit={handleSubmit}>
-				{(form) => (
-					<>
-						<div className="p-2">
-							<KolHeading _label="Formatted Form Field" _level={2} />
-							<KolForm>
-								<Field name="iban">
-									{({ field }: FieldProps<FormValues['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) ?? '');
+			<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>
 
-															void form.setFieldValue('iban', parsed_value, true);
-														}
-													},
-												}}
-											/>
-										</div>
-									)}
-								</Field>
-							</KolForm>
-						</div>
-						<div className="p-2">
-							<KolHeading _label="Model" _level={2} />
-							<pre>{JSON.stringify(form.values, null, 2)}</pre>
-						</div>
-					</>
-				)}
-			</Formik>
+			<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>
 		</>
 	);
 }

package/src/components/link/image.tsx

@@ -12,7 +12,6 @@ export const LinkImage: FC = () => (
 
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _label="I am a link that is rendered as text" />
-			<br />
 			<KolLink _href="#/back-page" _label="">
 				<img alt="Presentation of the KoliBri theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			</KolLink>

package/src/components/link/target.tsx

@@ -13,7 +13,7 @@ export const LinkTarget: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<div className="d-flex gap-4">
+		<div className="text-base d-flex gap-4">
 			<ul>
 				<li>
 					<KolLink _href="#/back-page" _label="Link without target" />

package/src/components/modal/basic.tsx

@@ -17,7 +17,7 @@ export const ModalBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<div>
+			<div className="flex">
 				<KolModal _label="Primary modal" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 					<KolCard _label="I am a modal.">
 						<KolButton

package/src/components/nav/basic.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 
-import { KolInputCheckbox, KolNav } from '@public-ui/react';
+import { KolHeading, KolInputCheckbox, KolNav } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS } from './links';
+import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavBasic: FC = () => {
@@ -17,16 +17,27 @@ export const NavBasic: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<KolInputCheckbox
-				_label="Show icons when expanded"
-				_checked={hasIconsWhenExpanded}
-				_on={{
-					onChange: (_event, value: unknown) => {
-						setHasIconsWhenExpanded(value as boolean);
-					},
-				}}
-			></KolInputCheckbox>
-			<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+			<section className="grid gap-8">
+				<section>
+					<KolInputCheckbox
+						_label="Show icons when expanded"
+						_checked={hasIconsWhenExpanded}
+						_on={{
+							onChange: (_event, value: unknown) => {
+								setHasIconsWhenExpanded(value as boolean);
+							},
+						}}
+					></KolInputCheckbox>
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Navigation without submenu" />
+					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+				</section>
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Navigation with submenu" />
+					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+				</section>
+			</section>
 		</>
 	);
 };

package/src/components/nav/horizontal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { KolNav } from '@public-ui/react';
+import { KolHeading, KolNav } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
-import { LINKS } from './links';
+import { LINKS, LINKS_WITHOUT_SUBMENU } from './links';
 
 import type { FC } from 'react';
 export const NavHorizontal: FC = () => (
@@ -10,6 +10,15 @@ export const NavHorizontal: FC = () => (
 			<p>This sample shows KolNav with horizontal alignment.</p>
 		</SampleDescription>
 
-		<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+		<section className="grid gap-8">
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Navigation without submenu" />
+				<KolNav _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
+			</section>
+			<section className="grid gap-4">
+				<KolHeading _level={2} _label="Navigation with submenu" />
+				<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+			</section>
+		</section>
 	</>
 );

package/src/components/nav/links.ts

@@ -92,3 +92,39 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 		],
 	},
 ];
+
+export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#/back-page',
+		_icons: 'codicon codicon-home',
+	},
+	{
+		_label: '4 Navigation point with children and onClick',
+		_on: {
+			onClick: () => console.log('4.1 Nested link clicked'),
+		},
+	},
+	{
+		_label: '5 No own page, only category',
+		_active: true,
+	},
+	{
+		_label: '6 No own page, with icon',
+		_icons: 'codicon codicon-squirrel',
+	},
+];

package/src/components/table/column-alignment.tsx

@@ -14,74 +14,76 @@ export const TableColumnAlignment: FC = () => (
 			<p>This sample shows KolTable with columns headers and data in different text alignments.</p>
 		</SampleDescription>
 
-		<KolHeading _label="Simple table" _level={3}></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with different text align properties"
-			_headers={{
-				horizontal: [
-					[
-						{ label: 'left', key: 'left', textAlign: 'left' },
-						{ label: 'center', key: 'center', textAlign: 'center' },
-						{ label: 'right', key: 'right', textAlign: 'right' },
+		<section className="w-full flex flex-col">
+			<KolHeading _label="Simple table" _level={3}></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with different text align properties"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'left', key: 'left', textAlign: 'left' },
+							{ label: 'center', key: 'center', textAlign: 'center' },
+							{ label: 'right', key: 'right', textAlign: 'right' },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
 
-		<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with sortable columns"
-			_headers={{
-				horizontal: [
-					[
-						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
-						{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+			<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with sortable columns"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+							{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
 
-		<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with some but not all columns sortable"
-			_headers={{
-				horizontal: [
-					[
-						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
-						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
-						{ label: 'right', key: 'right', textAlign: 'right' },
+			<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with some but not all columns sortable"
+				_headers={{
+					horizontal: [
+						[
+							{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+							{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+							{ label: 'right', key: 'right', textAlign: 'right' },
+						],
 					],
-				],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
 
-		<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
-		<KolTable
-			_label="Table for demonstration purposes with vertical heading"
-			_headers={{
-				horizontal: [
-					[
-						{ label: '', asTd: true },
-						{ label: 'left', key: 'left', textAlign: 'left' },
-						{ label: 'center', key: 'center', textAlign: 'center' },
-						{ label: 'right', key: 'right', textAlign: 'right' },
+			<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
+			<KolTable
+				_label="Table for demonstration purposes with vertical heading"
+				_headers={{
+					horizontal: [
+						[
+							{ label: '', asTd: true },
+							{ label: 'left', key: 'left', textAlign: 'left' },
+							{ label: 'center', key: 'center', textAlign: 'center' },
+							{ label: 'right', key: 'right', textAlign: 'right' },
+						],
 					],
-				],
-				vertical: [[{ label: 'Vertical' }]],
-			}}
-			_data={DATA}
-			className="block"
-			style={{ maxWidth: '600px' }}
-		/>
+					vertical: [[{ label: 'Vertical' }]],
+				}}
+				_data={DATA}
+				className="block"
+				style={{ maxWidth: '600px' }}
+			/>
+		</section>
 	</>
 );