@public-ui/sample-react 2.0.0-rc.8 → 2.0.0

package/src/components/table/test-data.ts

@@ -63,4 +63,344 @@ export const DATA: Data[] = [
 		order: 14,
 		date: new Date('1995-01-25T12:31:27.983Z'),
 	},
+	{
+		order: 15,
+		date: new Date('1995-04-15T02:00:39.048Z'),
+	},
+	{
+		order: 16,
+		date: new Date('1994-03-15T19:13:04.564Z'),
+	},
+	{
+		order: 17,
+		date: new Date('1999-03-02T16:53:04.418Z'),
+	},
+	{
+		order: 18,
+		date: new Date('1982-08-23T18:37:38.014Z'),
+	},
+	{
+		order: 19,
+		date: new Date('1995-06-19T12:39:56.321Z'),
+	},
+	{
+		order: 20,
+		date: new Date('1994-09-23T15:03:35.746Z'),
+	},
+	{
+		order: 21,
+		date: new Date('1990-04-15T23:38:02.147Z'),
+	},
+	{
+		order: 22,
+		date: new Date('1983-08-01T10:36:44.006Z'),
+	},
+	{
+		order: 23,
+		date: new Date('1986-06-28T21:27:04.588Z'),
+	},
+	{
+		order: 24,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 25,
+		date: new Date('1998-07-14T15:52:29.010Z'),
+	},
+	{
+		order: 26,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 27,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 28,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 29,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 30,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 31,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 32,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 33,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 34,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 35,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 36,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 37,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 38,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 39,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 40,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 41,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 42,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 43,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 44,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 45,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 46,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 47,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 48,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 49,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 50,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 51,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 52,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 53,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 54,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 55,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 56,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 57,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 58,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 59,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 60,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 61,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 62,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 63,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 64,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 65,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 66,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 67,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 68,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 69,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 70,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 71,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 72,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 73,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 74,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 75,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 76,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 77,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 78,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 79,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 80,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 81,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 82,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 83,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 84,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 85,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 86,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 87,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 88,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 89,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 90,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 91,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 92,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 93,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 94,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
+	{
+		order: 95,
+		date: new Date('1986-08-14T19:34:40.904Z'),
+	},
+	{
+		order: 96,
+		date: new Date('1985-02-15T18:56:32.344Z'),
+	},
+	{
+		order: 97,
+		date: new Date('1989-09-06T10:49:30.896Z'),
+	},
+	{
+		order: 98,
+		date: new Date('1994-09-05T14:21:37.211Z'),
+	},
+	{
+		order: 99,
+		date: new Date('1995-12-15T23:12:14.411Z'),
+	},
 ];

package/src/components/table/with-pagination.tsx

@@ -2,17 +2,18 @@ import React, { FC } from 'react';
 
 import { KolTable } from '@public-ui/react';
 import { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
-import { DATA } from './test-data';
+import { Data, DATA } from './test-data';
+import { DATE_FORMATTER } from './formatter';
 
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
 			{ label: 'Order', key: 'order' },
-			{ label: 'Date', key: 'date' },
+			{ label: 'Date', key: 'date', render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },
 		],
 	],
 };
-const PAGINATION: KoliBriTablePaginationProps = { _page: 2, _max: 1 };
+const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 
 export const TableWithPagination: FC = () => (
 	<div>

package/src/components/tabs/basic.tsx

@@ -20,11 +20,26 @@ const tabs = [
 		_label: 'Letzter Tab',
 	},
 ];
+
+const tabsWithoutIcons = tabs.map((tab) => ({
+	...tab,
+	_icons: undefined,
+}));
+
 export const TabsBasic: FC = () => (
-	<KolTabs _tabs={tabs}>
-		<div slot="tab-0">Inhalte von Tab 1</div>
-		<div slot="tab-1">Inhalte von Tab 2</div>
-		<div slot="tab-2">Inhalte von Tab 3</div>
-		<div slot="tab-3">Inhalte von Tab 4</div>
-	</KolTabs>
+	<>
+		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+
+		<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+	</>
 );

package/src/components/toast/basic.tsx

@@ -5,39 +5,73 @@ import { getRoot } from '../../shares/react-roots';
 
 const toaster = ToasterService.getInstance(document);
 
-const handleButtonClickSimple = () => {
-	void toaster.enqueue({
-		description: 'Toasty',
-		label: `Initial Toast`,
-		type: 'warning',
-	});
-};
+export const ToastBasic: FC = () => {
+	const handleButtonClickSimple = () => {
+		void toaster.enqueue({
+			description: 'Toasty',
+			label: `Initial Toast`,
+			type: 'warning',
+		});
+	};
 
-const handleButtonClickComplex = () => {
-	void toaster.enqueue({
-		render: (element: HTMLElement, { close }) => {
-			getRoot(element).render(
-				<>
-					<KolButton
-						_label={'Hello World from Toast!'}
-						_on={{
-							onClick: () => {
-								console.log('Toast Button clicked!');
-								close();
-							},
-						}}
-					/>
-				</>,
-			);
-		},
-		label: `Initial Toast`,
-		type: 'warning',
-	});
-};
+	const handleButtonClickVariantMessage = () => {
+		void toaster.enqueue({
+			description: 'Toasty',
+			label: `Toast with variant 'msg'`,
+			type: 'warning',
+			alertVariant: 'msg',
+		});
+	};
+
+	const handleButtonClickComplex = () => {
+		void toaster.enqueue({
+			render: (element: HTMLElement, { close }) => {
+				getRoot(element).render(
+					<>
+						<KolButton
+							_label={'Hello World from Toast!'}
+							_on={{
+								onClick: () => {
+									console.log('Toast Button clicked!');
+									close();
+								},
+							}}
+						/>
+					</>,
+				);
+			},
+			label: `Initial Toast`,
+			type: 'warning',
+		});
+	};
+
+	const handleButtonClickOpenAndClose = async () => {
+		const close = await toaster.enqueue({
+			description: 'I will disappear in two seconds...',
+			label: `Good Bye`,
+			type: 'warning',
+		});
 
-export const ToastBasic: FC = () => (
-	<div>
-		<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
-		<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-	</div>
-);
+		if (close) {
+			setTimeout(close, 2000);
+		}
+	};
+
+	const closeAll = () => {
+		toaster.closeAll();
+	};
+
+	return (
+		<div>
+			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>{' '}
+			<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>{' '}
+			<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
+			<br />
+			<br />
+			<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+			<br />
+			<br />
+			<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+		</div>
+	);
+};

package/src/hooks/useSetCurrentLocation.ts

@@ -0,0 +1,7 @@
+import { setCurrentLocation } from '@public-ui/components';
+import { useLocation } from 'react-router';
+
+export const useSetCurrentLocation = () => {
+	const routerLocation = useLocation();
+	setCurrentLocation('#' + routerLocation.pathname);
+};

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import type { Generic } from '@a11y-ui/core';
 import { register } from '@public-ui/components';
-import { BAMF, BMF, BZSt, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
+import { BAMF, BMF, BZStv1, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3 } from '@public-ui/themes';
 import { TH } from '@public-oss/kolibri-themes';
 import { App } from './App';
 
@@ -23,7 +23,7 @@ void (async () => {
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BAMF, BMF, DEFAULT, BZSt, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
+			await register([BAMF, BMF, DEFAULT, BZStv1, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},

package/src/scenarios/appointment-form/ErrorList.tsx

@@ -19,7 +19,7 @@ export function ErrorList({ errors }: ErrorListPropType) {
 	};
 
 	return (
-		<KolAlert _type="error" _variant="msg">
+		<KolAlert _type="error">
 			Bitte korrigieren Sie folgende Fehler:
 			<nav aria-label="Fehlerliste">
 				<ul>

package/src/scenarios/complex-form/component.tsx

@@ -19,8 +19,8 @@ type Zeiten = {
 export const TerminComponent: FC = () => (
 	<>
 		<div className="grid sm:grid-cols-1 gap-2 my-3">
-			<KolHeading>Terminreservierung</KolHeading>
-			<KolHeading _level={2}>Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten</KolHeading>
+			<KolHeading _label="Terminreservierung" />
+			<KolHeading _label="Termine für Einwohnermelde- (incl. Pass- und Ausweisangelegenheiten) und Kraftfahrzeugangelegenheiten" _level={2} />
 			<div style={{ fontFamily: 'Arial' }}>
 				<p className="py-2">Derzeit kann generell nur mit vorheriger Terminvereinbarung bei den Bürgerdiensten vorgesprochen werden.</p>
 				<p className="py-2">
@@ -40,48 +40,48 @@ export const TerminComponent: FC = () => (
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<KolTable
-				_caption="Öffnungszeiten"
+				_label="Öffnungszeiten"
 				_data={
 					[
 						{
 							stadtteil: 'Brackel',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Dorstfeld',
-							montag: '09:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '09:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '09:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '09:00 - 12:00<br/>14:00 - 18:00',
+							montag: '09:00 - 12:00, 14:00 - 16:00',
+							dienstag: '09:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '09:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '09:00 - 12:00, 14:00 - 18:00',
 							freitag: '09:00 - 12:00',
 						},
 						{
 							stadtteil: 'Aplerbeck',
-							montag: '08:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '08:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '08:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '08:00 - 12:00<br/>14:00 - 18:00',
+							montag: '08:00 - 12:00, 14:00 - 16:00',
+							dienstag: '08:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '08:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '08:00 - 12:00, 14:00 - 18:00',
 							freitag: '08:00 - 12:00',
 						},
 						{
 							stadtteil: 'Innenstadt Ost',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 						},
 						{
 							stadtteil: 'Innenstadt West',
-							montag: '07:00 - 12:00<br/>14:00 - 16:00',
-							dienstag: '07:00 - 12:00<br/>14:00 - 15:00',
-							mittwoch: '07:00 - 12:00<br/>14:00 - 15:00',
-							donnerstag: '07:00 - 12:00<br/>14:00 - 18:00',
-							freitag: '07:00 - 12:00<br/>13:00 - 16:00',
+							montag: '07:00 - 12:00, 14:00 - 16:00',
+							dienstag: '07:00 - 12:00, 14:00 - 15:00',
+							mittwoch: '07:00 - 12:00, 14:00 - 15:00',
+							donnerstag: '07:00 - 12:00, 14:00 - 18:00',
+							freitag: '07:00 - 12:00, 13:00 - 16:00',
 							/*render: (el, data) => {
 						el.innerHTML = `<kol-badge _color="#ff0000" _label="NIX"></kol-badge>`;
 					  },*/
@@ -141,22 +141,22 @@ export const TerminComponent: FC = () => (
 				]}
 			>
 				<div>
-					<KolHeading _level={2}>Wählen Sie einen Stadtteil aus</KolHeading>
+					<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus" />
 					<TerminLocationComponent onSubmitted={() => {}} />
 				</div>
 				<div>
-					<KolHeading _level={2}>Wählen Sie einen Termin aus</KolHeading>
+					<KolHeading _level={2} _label="Wählen Sie einen Termin aus" />
 					<TerminScheduleComponent onSubmitted={() => {}} />
 				</div>
 				<div>
-					<KolHeading _level={2}>Geben Sie Ihre Kontaktdaten ein</KolHeading>
+					<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein" />
 					<TerminKopfdatenComponent onSubmitted={() => {}} />
 				</div>
 			</KolTabs>
 		</div>
 		<div className="grid sm:grid-cols-1 gap-2">
 			<div className="border-top"></div>
-			<KolHeading _level={3}>Fortschritt</KolHeading>
+			<KolHeading _level={3} _label="Fortschritt" />
 			<KolProgress _value={0} _max={100} _unit="Prozent des Formulars"></KolProgress>
 		</div>
 	</>

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

@@ -0,0 +1,6 @@
+import React, { FC } from 'react';
+import { KolButton } from '@public-ui/react';
+
+export const CustomTooltipWidth: FC = () => (
+	<KolButton _label="Tooltip mit fixer Breite" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="codicon codicon-reactions"></KolButton>
+);