@public-ui/sample-react 2.0.0-rc.9 → 2.0.1

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

@@ -5,12 +5,8 @@ import { KolButton, KolInputText, KolTable } from '@public-ui/react';
 import { getRoot } from '../../shares/react-roots';
 import { KoliBriTableHeaders } from '@public-ui/components';
 import { DATA, Data } from './test-data';
-
-const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
-	day: '2-digit',
-	month: '2-digit',
-	year: 'numeric',
-});
+import { DATE_FORMATTER } from './formatter';
+import { SampleDescription } from '../SampleDescription';
 
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
@@ -20,7 +16,10 @@ const HEADERS: KoliBriTableHeaders = {
 				label: 'Datum (string)',
 				key: 'date',
 				textAlign: 'center',
-				render: (_el, _cell, tupel) => `<strong>${DATE_FORMATTER.format((tupel as Data).date)}</strong>`,
+				render: (el, tupel) => {
+					// https://reactjs.org/docs/portals.html
+					getRoot(el).render(<strong>{DATE_FORMATTER.format(tupel.label as unknown as Date)}</strong>);
+				},
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
 						if (data0.date < data1.date) return -1;
@@ -32,6 +31,8 @@ const HEADERS: KoliBriTableHeaders = {
 				label: 'Aktion (react)',
 				key: 'order',
 				render: (el) => {
+					el.setAttribute('role', 'presentation');
+
 					// https://reactjs.org/docs/portals.html
 					getRoot(el).render(
 						<>
@@ -45,4 +46,11 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableRenderCell: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableRenderCell: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample simulates the usage of React render functions for the table column contents.</p>
+		</SampleDescription>
+		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+	</>
+);

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

@@ -14,6 +14,15 @@ export const ToastBasic: FC = () => {
 		});
 	};
 
+	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 }) => {
@@ -54,7 +63,8 @@ export const ToastBasic: FC = () => {
 
 	return (
 		<div>
-			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>
+			<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 />

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

@@ -3,9 +3,9 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import type { Generic } from '@a11y-ui/core';
+import type { Generic } from 'adopted-style-sheets';
 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',
 				},
@@ -35,12 +35,18 @@ void (async () => {
 
 	/**
 	 * You should patch the theme after the components and your default theme are registered.
-	 *
+	 **
 	 * ↓ That is a tiny sample!
 	 */
-	// KoliBriDevHelper.patchTheme('my-theme', {
-	// 	'KOL-BUTTON': 'button{border:2px solid red;}',
-	// });
+	// KoliBriDevHelper.patchTheme(
+	// 	'default',
+	// 	{
+	// 		'KOL-BUTTON': 'button{border:2px solid red;}',
+	// 	},
+	// 	{
+	// 		append: true,
+	// 	},
+	// );
 
 	const htmlDivElement = document.querySelector('div#app');
 	if (htmlDivElement instanceof HTMLDivElement) {

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

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

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>
+);