@public-ui/sample-react 2.0.0-rc.11 → 2.0.0-rc.13

package/dist/main.js.LICENSE.txt

@@ -35,7 +35,7 @@
  */
 
 /**
- * @remix-run/router v1.11.0
+ * @remix-run/router v1.13.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@
  */
 
 /**
- * React Router v6.18.0
+ * React Router v6.20.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.13",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,14 +8,14 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.0-rc.11",
-    "@public-ui/react": "2.0.0-rc.11",
-    "@public-ui/themes": "2.0.0-rc.11",
-    "@types/node": "20.8.10",
-    "@types/react": "18.2.36",
-    "@types/react-dom": "18.2.14",
-    "@unocss/preset-uno": "0.57.2",
-    "@unocss/webpack": "0.57.2",
+    "@public-ui/components": "2.0.0-rc.13",
+    "@public-ui/react": "2.0.0-rc.13",
+    "@public-ui/themes": "2.0.0-rc.13",
+    "@types/node": "20.10.3",
+    "@types/react": "18.2.41",
+    "@types/react-dom": "18.2.17",
+    "@unocss/preset-uno": "0.58.0",
+    "@unocss/webpack": "0.58.0",
     "ajv": "8.12.0",
     "chromedriver": "119.0.1",
     "cpy-cli": "5.0.0",
@@ -26,11 +26,11 @@
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.18.0",
-    "react-router-dom": "6.18.0",
+    "react-router": "6.20.1",
+    "react-router-dom": "6.20.1",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
-    "typescript": "5.2.2",
+    "typescript": "5.3.2",
     "world_countries_lists": "2.8.2",
     "yup": "1.3.2"
   },

package/src/App.tsx

@@ -47,9 +47,7 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 							<div className="d-grid gap-4">
 								{THEME_OPTIONS.filter(
 									(theme) =>
-										['bmf', 'default', 'bzst', 'bzst-v2', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf(
-											(theme as Option<Theme>).value,
-										) >= 0,
+										['bmf', 'default', 'bzst-v1', 'ecl-ec', 'ecl-eu', 'itzbund', 'mapz', 'zoll-v2', 'zoll-v3'].indexOf((theme as Option<Theme>).value) >= 0,
 								).map((theme) => (
 									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
 										<div className="mt-4">

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

@@ -19,5 +19,8 @@ export const ButtonLinkBasic: FC = () => (
 			<KolButtonLink style={{ display: 'block' }} _label="Simple Link" />
 			Daher gehe ich über die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
 		</p>
+		<p>
+			<KolButtonLink _label="Disabled ButtonLink" _disabled />
+		</p>
 	</div>
 );

package/src/components/button-link/image.tsx

@@ -8,7 +8,7 @@ export const ButtonLinkImage: FC = () => (
 		<KolButtonLink _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolButtonLink _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 		</KolButtonLink>
 	</div>
 );

package/src/components/card/flex.tsx

@@ -8,7 +8,7 @@ export const CardFlex: FC = () => (
 		<KolCard _label="Titel">
 			<div>Inhalt</div>
 		</KolCard>
-		<KolCard _label="Titel">
+		<KolCard _label="Titel" _hasCloser>
 			<div>
 				Inhalt
 				<br />

package/src/components/card/selection.tsx

@@ -21,7 +21,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
+						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -41,7 +41,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
+						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>
@@ -61,7 +61,7 @@ export const CardSelection: FC = () => (
 				</div>
 				<div>
 					<div>
-						<img alt="Darstellung des KoliBri-Theming" src="/abgrenzung.jpg" width="100%" />
+						<img alt="Darstellung des KoliBri-Theming" src="abgrenzung.jpg" width="100%" />
 					</div>
 				</div>
 				<div>

package/src/components/handout/basic.tsx

@@ -1001,7 +1001,7 @@ export const HandoutBasic: FC = () => (
 			</KolCard>
 		</div>
 		<KolVersion _label="5.0.2-test.2"></KolVersion>
-		{/* <KolImage _src="/abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
+		{/* <KolImage _src="abgrenzung.jpg" _alt="KoliBri Darstellung"></KolImage> */}
 		{/* <KolIndentedText></KolIndentedText> */}
 		{/* <KolQuote></KolQuote> */}
 	</div>

package/src/components/image/basic.tsx

@@ -2,4 +2,4 @@ import { FC } from 'react';
 import { KolImage } from '@public-ui/react';
 import React from 'react';
 
-export const ImageBasic: FC = () => <KolImage className="w-80%" _src="/abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;
+export const ImageBasic: FC = () => <KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;

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

@@ -48,6 +48,8 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 				_value={true}
 				_hint="Hint text"
 			/>
+			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
+			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
 			<KolInputCheckbox
 				{...props}
 				_error={ERROR_MSG}

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

@@ -10,7 +10,6 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 		<div className="grid gap-4">
 			<KolInputRadio
 				{...props}
-				_error={ERROR_MSG}
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
 				_label="Anrede"
 			/>

package/src/components/link/image.tsx

@@ -8,12 +8,12 @@ export const LinkImage: FC = () => (
 		<KolLink _href="#" _label="Ich bin ein Link, der als Text gerendert wird" />
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			<KolKolibri style={{ width: '300px' }}></KolKolibri>
 		</KolLink>
 		<br />
 		<KolLink _href="#" _label="">
-			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="/abgrenzung.jpg" width="300" />
+			<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 		</KolLink>
 	</div>
 );

package/src/components/table/formatter.ts

@@ -0,0 +1,5 @@
+export const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
+	day: '2-digit',
+	month: '2-digit',
+	year: 'numeric',
+});

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: [
@@ -22,7 +18,7 @@ const HEADERS: KoliBriTableHeaders = {
 				textAlign: 'center',
 				render: (el, tupel) => {
 					// https://reactjs.org/docs/portals.html
-					getRoot(el).render(<strong>{DATE_FORMATTER.format((tupel as Data).date)}</strong>);
+					getRoot(el).render(<strong>{DATE_FORMATTER.format(tupel.label as unknown as Date)}</strong>);
 				},
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
@@ -35,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(
 						<>
@@ -48,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

@@ -1,66 +1,406 @@
 export type Data = {
 	order: number;
-	date: String;
+	date: Date;
 };
 export const DATA: Data[] = [
 	{
 		order: 0,
-		date: new Date('1981-05-26T21:33:43.612Z').toString(),
+		date: new Date('1981-05-26T21:33:43.612Z'),
 	},
 	{
 		order: 1,
-		date: new Date('1971-04-25T19:44:17.014Z').toString(),
+		date: new Date('1971-04-25T19:44:17.014Z'),
 	},
 	{
 		order: 2,
-		date: new Date('1986-07-10T11:39:29.539Z').toString(),
+		date: new Date('1986-07-10T11:39:29.539Z'),
 	},
 	{
 		order: 3,
-		date: new Date('1976-02-02T10:00:36.346Z').toString(),
+		date: new Date('1976-02-02T10:00:36.346Z'),
 	},
 	{
 		order: 4,
-		date: new Date('1998-07-07T12:50:36.016Z').toString(),
+		date: new Date('1998-07-07T12:50:36.016Z'),
 	},
 	{
 		order: 5,
-		date: new Date('1994-09-05T05:10:44.078Z').toString(),
+		date: new Date('1994-09-05T05:10:44.078Z'),
 	},
 	{
 		order: 6,
-		date: new Date('1986-05-23T13:05:01.874Z').toString(),
+		date: new Date('1986-05-23T13:05:01.874Z'),
 	},
 	{
 		order: 7,
-		date: new Date('1975-06-29T21:51:29.359Z').toString(),
+		date: new Date('1975-06-29T21:51:29.359Z'),
 	},
 	{
 		order: 8,
-		date: new Date('1974-05-15T23:47:02.499Z').toString(),
+		date: new Date('1974-05-15T23:47:02.499Z'),
 	},
 	{
 		order: 9,
-		date: new Date('1990-05-27T10:13:19.641Z').toString(),
+		date: new Date('1990-05-27T10:13:19.641Z'),
 	},
 	{
 		order: 10,
-		date: new Date('1993-10-20T03:54:08.739Z').toString(),
+		date: new Date('1993-10-20T03:54:08.739Z'),
 	},
 	{
 		order: 11,
-		date: new Date('2000-02-25T11:55:43.705Z').toString(),
+		date: new Date('2000-02-25T11:55:43.705Z'),
 	},
 	{
 		order: 12,
-		date: new Date('1988-08-27T09:59:12.251Z').toString(),
+		date: new Date('1988-08-27T09:59:12.251Z'),
 	},
 	{
 		order: 13,
-		date: new Date('1980-10-24T10:41:24.897Z').toString(),
+		date: new Date('1980-10-24T10:41:24.897Z'),
 	},
 	{
 		order: 14,
-		date: new Date('1995-01-25T12:31:27.983Z').toString(),
+		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>