@public-ui/sample-react 2.1.8-rc.0 → 2.1.8

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>
@@ -43,14 +54,14 @@ export function InputTextFormatterDemo() {
 				</p>
 			</SampleDescription>
 			<section className="w-full flex flex-col">
-				<Formik<FormValues> initialValues={initialValues} onSubmit={handleSubmit}>
+				<Formik<IbanExampleFormValues> initialValues={initialIbanExampleValues} onSubmit={handleSubmit}>
 					{(form) => (
 						<>
 							<div className="p-2">
 								<KolHeading _label="Formatted Form Field" _level={2} />
 								<KolForm>
 									<Field name="iban">
-										{({ field }: FieldProps<FormValues['iban']>) => (
+										{({ field }: FieldProps<IbanExampleFormValues['iban']>) => (
 											<div className="block mt-2">
 												<KolInputText
 													onBlur={() => {
@@ -88,6 +99,46 @@ export function InputTextFormatterDemo() {
 					)}
 				</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>
 		</>
 	);
 }

package/src/components/table/interactive-child-elements.tsx

@@ -1,9 +1,20 @@
-import type { ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
+import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react';
 import type { FC } from 'react';
 import React from 'react';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
+
+function KolButtonWrapper({ _on, ...other }: ButtonProps) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton {...other} _on={dummyEventHandler} />;
+}
 
 const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
 	const capitalizedVariant = variant.charAt(0).toUpperCase() + variant.slice(1);
@@ -18,7 +29,7 @@ const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeader
 				_icons: { right: 'codicon codicon-squirrel' },
 			};
 			getRoot(createReactRenderElement(element)).render(
-				cell.label === 'button' ? <KolButton {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
+				cell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
 			);
 		},
 	};

package/src/components/table/render-cell.tsx

@@ -7,7 +7,8 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 import { DATE_FORMATTER } from './formatter';
 
-import type { KoliBriTableHeaders } from '@public-ui/components';
+import type { IconsPropType, KoliBriTableHeaders } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 type Data = {
 	order: number;
@@ -32,6 +33,16 @@ const DATA: Data[] = [
 	},
 ];
 
+function KolButtonWrapper({ label, icons }: { label: string; icons: IconsPropType }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _icons={icons} _on={dummyEventHandler} />;
+}
+
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -89,7 +100,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButton _label="Save" _icons={{ left: 'codicon codicon-save' }} />
+							<KolButtonWrapper label="Save" icons={{ left: 'codicon codicon-save' }} />
 						</div>,
 					);
 				},

package/src/components/table/stateful-with-selection.tsx

@@ -5,6 +5,7 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -12,6 +13,16 @@ const DATA = [
 ];
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatefulWithSelection: FC = () => {
 	const [selectedValue, setSelectedValue] = useState<Data[] | null>();
 
@@ -46,7 +57,7 @@ export const TableStatefulWithSelection: FC = () => {
 	}, [kolTableStatefulRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
 	};
 
 	return (

package/src/components/table/stateful-with-single-selection.tsx

@@ -5,6 +5,7 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -13,6 +14,16 @@ const DATA = [
 
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatefulWithSingleSelection: FC = () => {
 	const [selectedValue, setSelectedValue] = useState<Data | null>();
 
@@ -48,7 +59,7 @@ export const TableStatefulWithSingleSelection: FC = () => {
 	}, [kolTableStatefulRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
 	};
 
 	return (

package/src/components/table/stateless-with-selection.tsx

@@ -5,6 +5,7 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -12,6 +13,16 @@ const DATA = [
 ];
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatelessWithSelection: FC = () => {
 	const [selectedKeys, setSelectedKeys] = useState(['AAA1002']);
 
@@ -42,7 +53,7 @@ export const TableStatelessWithSelection: FC = () => {
 	}, [kolTableStatelessRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
 	};
 
 	return (

package/src/components/table/stateless-with-single-selection.tsx

@@ -5,6 +5,7 @@ import { SampleDescription } from '../SampleDescription';
 import type { KoliBriTableSelection } from '@public-ui/components';
 import { getRoot } from '../../shares/react-roots';
 import type { KoliBriTableCell } from '@public-ui/components';
+import { useToasterService } from '../../hooks/useToasterService';
 
 const DATA = [
 	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
@@ -12,6 +13,16 @@ const DATA = [
 ];
 type Data = (typeof DATA)[0];
 
+function KolButtonWrapper({ label }: { label: string }) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return <KolButton _label={label} _on={dummyEventHandler} />;
+}
+
 export const TableStatelessWithSingleSelection: FC = () => {
 	const [selectedKeys, setSelectedKeys] = useState(['1002']);
 
@@ -43,7 +54,7 @@ export const TableStatelessWithSingleSelection: FC = () => {
 	}, [kolTableStatelessRef]);
 
 	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		getRoot(createReactRenderElement(element)).render(<KolButton _label={`Click ${cell.data?.id}`}></KolButton>);
+		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${cell.data?.id}`} />);
 	};
 
 	return (

package/src/hooks/useToasterService.ts

@@ -0,0 +1,21 @@
+import { ToasterService } from '@public-ui/components';
+
+export function useToasterService() {
+	const toaster = ToasterService.getInstance(document);
+
+	const message = () => {
+		void toaster.enqueue({
+			description: 'Hello',
+			label: `Hello`,
+			type: 'info',
+		});
+	};
+
+	const dummyClickEventHandler = () => {
+		message();
+	};
+
+	return {
+		dummyClickEventHandler,
+	};
+}

package/src/scenarios/custom-tooltip-width.tsx

@@ -3,16 +3,31 @@ import React from 'react';
 
 import { KolButton } from '@public-ui/react';
 import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
 
-export const CustomTooltipWidth: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
-				parent elements.
-			</p>
-		</SampleDescription>
+export const CustomTooltipWidth: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<KolButton _label="Tooltip with fixed width" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how a tooltip&apos;s width can be adjusted by defining the CSS custom property <code>--kol-tooltip-width</code> on one of the
+					parent elements.
+				</p>
+			</SampleDescription>
+
+			<KolButton
+				_label="Tooltip with fixed width"
+				_hideLabel
+				style={{ '--kol-tooltip-width': '400px' }}
+				_icons="codicon codicon-reactions"
+				_on={dummyEventHandler}
+			></KolButton>
+		</>
+	);
+};