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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.8-rc.0",
+  "version": "2.1.8",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -11,15 +11,15 @@
     "@leanup/stack": "1.3.54",
     "@leanup/stack-react": "1.3.54",
     "@leanup/stack-webpack": "1.3.54",
-    "@playwright/test": "1.47.1",
+    "@playwright/test": "1.47.2",
     "@types/node": "ts5.6",
     "@types/react": "18.3.4",
     "@types/react-dom": "18.3.0",
     "@unocss/preset-uno": "0.58.9",
     "@unocss/webpack": "0.58.9",
-    "adopted-style-sheets": "1.1.5-rc.3",
+    "adopted-style-sheets": "1.1.5-rc.4",
     "ajv": "8.17.1",
-    "chromedriver": "124.0.4",
+    "chromedriver": "129.0.0",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-react": "7.36.1",
@@ -28,16 +28,17 @@
     "npm-run-all": "4.1.5",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-number-format": "5.4.2",
     "react-router": "6.26.2",
     "react-router-dom": "6.26.2",
-    "rimraf": "5.0.10",
+    "rimraf": "6.0.1",
     "ts-prune": "0.10.3",
     "typescript": "5.6.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.8-rc.0",
-    "@public-ui/react": "2.1.8-rc.0",
-    "@public-ui/themes": "2.1.8-rc.0"
+    "@public-ui/components": "2.1.8",
+    "@public-ui/react": "2.1.8",
+    "@public-ui/themes": "2.1.8"
   },
   "files": [
     ".eslintignore",

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

@@ -2,30 +2,39 @@ import { KolButton, KolLink } from '@public-ui/react';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonAccessKey: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				This sample shows KolButton with{' '}
-				<KolLink _label="access keys" _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey" _target="blank" />. The access keys
-				can be used to trigger the buttons using the keyboard.
-			</p>
-		</SampleDescription>
+export const ButtonAccessKey: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<div className="flex flex-wrap gap-4">
-			<KolButton _label="With S access key" _accessKey="S"></KolButton>
-			<KolButton _label="Very small s" _accessKey="s"></KolButton>
-			<KolButton _label="Access key does not appear in label" _accessKey="x"></KolButton>
-			<KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard"></KolButton>
-			<KolButton
-				_label="with inline icons"
-				_icons={{
-					left: 'codicon codicon-dashboard',
-					right: 'codicon codicon-dashboard',
-				}}
-				_accessKey="s"
-			/>
-		</div>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample shows KolButton with{' '}
+					<KolLink _label="access keys" _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey" _target="blank" />. The access
+					keys can be used to trigger the buttons using the keyboard.
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-wrap gap-4">
+				<KolButton _label="With S access key" _accessKey="S" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Very small s" _accessKey="s" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Access key does not appear in label" _accessKey="x" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="access key without label" _hideLabel _accessKey="s" _icons="codicon codicon-dashboard" _on={dummyEventHandler}></KolButton>
+				<KolButton
+					_label="with inline icons"
+					_icons={{
+						left: 'codicon codicon-dashboard',
+						right: 'codicon codicon-dashboard',
+					}}
+					_accessKey="s"
+				/>
+			</div>
+		</>
+	);
+};

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

@@ -2,16 +2,25 @@ import { KolButton } from '@public-ui/react';
 import React from 'react';
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonAriaDescription: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows KolButton with aria-description</p>
-		</SampleDescription>
+export const ButtonAriaDescription: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<div className="flex flex-wrap gap-4">
-			<KolButton _label="Button Text without area description"></KolButton>
-			<KolButton _label="Button Text" _ariaDescription="Button Area Description"></KolButton>
-		</div>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolButton with aria-description</p>
+			</SampleDescription>
+
+			<div className="flex flex-wrap gap-4">
+				<KolButton _label="Button Text without area description" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Button Text" _ariaDescription="Button Area Description" _on={dummyEventHandler}></KolButton>
+			</div>
+		</>
+	);
+};

package/src/components/button/baselined.tsx

@@ -4,18 +4,27 @@ import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonBaselined: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
-		</SampleDescription>
+export const ButtonBaselined: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<div className="flex">
-			<KolButton _label="Label-Text"></KolButton>
-			<KolButton _label="Label-Text"></KolButton>
-			<KolButton _label="Label-Text"></KolButton>
-			<KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon"></KolButton>
-		</div>
-	</>
-);
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This KolButton sample is used for internal testing purposes: It features multiple buttons with and without icons which are vertically aligned.</p>
+			</SampleDescription>
+
+			<div className="flex">
+				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Label-Text" _on={dummyEventHandler}></KolButton>
+				<KolButton _icons="codicon codicon-reactions" _label="Label-Text with Icon" _on={dummyEventHandler}></KolButton>
+			</div>
+		</>
+	);
+};

package/src/components/button/icons.tsx

@@ -4,32 +4,39 @@ import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonIcons: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows KolButton with icons in all alignments.</p>
-		</SampleDescription>
+export const ButtonIcons: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-		<KolButton
-			_icons={{
-				bottom: 'codicon codicon-arrow-down',
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				top: {
-					style: {
-						'font-size': '200%',
-						transform: 'rotate(45deg)',
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolButton with icons in all alignments.</p>
+			</SampleDescription>
+
+			<KolButton
+				_icons={{
+					bottom: 'codicon codicon-arrow-down',
+					left: {
+						icon: 'codicon codicon-arrow-left',
+					},
+					top: {
+						style: {
+							'font-size': '200%',
+							transform: 'rotate(45deg)',
+						},
+						icon: 'codicon codicon-arrow-up',
 					},
-					icon: 'codicon codicon-arrow-up',
-				},
-				right: 'codicon codicon-arrow-right',
-			}}
-			_label="Label"
-			_on={{
-				onClick: (_event, _value) => alert('Klick!'),
-			}}
-		/>
-	</>
-);
+					right: 'codicon codicon-arrow-right',
+				}}
+				_label="Label"
+				_on={dummyEventHandler}
+			/>
+		</>
+	);
+};

package/src/components/button/partials/cases.tsx

@@ -2,16 +2,23 @@ import React from 'react';
 
 import { KolButton } from '@public-ui/react';
 import type { Components } from '@public-ui/components';
+import { useToasterService } from '../../../hooks/useToasterService';
 
 export const ButtonCases = function ButtonCases(props: Partial<Components.KolButton>) {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
 	return (
 		<div className="flex flex-wrap gap-4">
-			<KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary"></KolButton>
-			<KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary"></KolButton>
-			<KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal"></KolButton>
-			<KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary"></KolButton>
-			<KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger"></KolButton>
-			<KolButton {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+			<KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+			<KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+			<KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler}></KolButton>
+			<KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+			<KolButton {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
 		</div>
 	);
 };

package/src/components/button/width.tsx

@@ -4,35 +4,40 @@ import { KolButton } from '@public-ui/react';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
+import { useToasterService } from '../../hooks/useToasterService';
 
-const ARGS = {
-	className: 'w-8rem',
-	_on: {
-		onClick: () => alert('Click!'),
-	},
-};
+export const ButtonWidth: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-export const ButtonWidth: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows KolButton with adjusted widths.</p>
-		</SampleDescription>
+	const ARGS = {
+		className: 'w-8rem',
+		_on: {
+			onClick: dummyClickEventHandler,
+		},
+	};
 
-		<div className="grid gap-14">
-			<div className="flex flex-wrap gap-4">
-				<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
-				<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-				<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
-				<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
-				<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-			</div>
-			<div className="flex flex-wrap gap-4">
-				<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
-				<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows KolButton with adjusted widths.</p>
+			</SampleDescription>
+
+			<div className="grid gap-14">
+				<div className="flex flex-wrap gap-4">
+					<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
+					<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
+					<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
+					<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
+					<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+				</div>
+				<div className="flex flex-wrap gap-4">
+					<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
+					<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
+					<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
+					<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
+					<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
+				</div>
 			</div>
-		</div>
-	</>
-);
+		</>
+	);
+};

package/src/components/button-group/basic.tsx

@@ -4,22 +4,31 @@ import { KolBadge, KolButton, KolButtonGroup } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
 
-export const ButtonGroupBasic: FC = () => (
-	<>
-		<SampleDescription>
-			<p>KolButtonGroup shows multiple KolButton-elements visually grouped together.</p>
+export const ButtonGroupBasic: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
 
-			<p>
-				<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
-			</p>
-		</SampleDescription>
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
 
-		<KolButtonGroup>
-			<KolButton _label="Active" _variant="primary"></KolButton>
-			<KolButton _label="Not active" _disabled></KolButton>
-			<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger"></KolButton>
-			<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
-		</KolButtonGroup>
-	</>
-);
+	return (
+		<>
+			<SampleDescription>
+				<p>KolButtonGroup shows multiple KolButton-elements visually grouped together.</p>
+
+				<p>
+					<KolBadge _label="The component is deprecated and won't be available anymore in KoliBri version 3." _color="#db5461" />
+				</p>
+			</SampleDescription>
+
+			<KolButtonGroup>
+				<KolButton _label="Active" _variant="primary" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Not active" _disabled></KolButton>
+				<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger" _on={dummyEventHandler}></KolButton>
+				<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost" _on={dummyEventHandler}></KolButton>
+			</KolButtonGroup>
+		</>
+	);
+};