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

package/dist/main.js.LICENSE.txt

@@ -35,7 +35,7 @@
  */
 
 /**
- * @remix-run/router v1.10.0
+ * @remix-run/router v1.13.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -46,7 +46,7 @@
  */
 
 /**
- * React Router v6.17.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.8",
+  "version": "2.0.0",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,29 +8,29 @@
     "@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.8",
-    "@public-ui/react": "2.0.0-rc.8",
-    "@public-ui/themes": "2.0.0-rc.8",
-    "@types/node": "20.8.9",
-    "@types/react": "18.2.33",
-    "@types/react-dom": "18.2.14",
-    "@unocss/preset-uno": "0.57.1",
-    "@unocss/webpack": "0.57.1",
+    "@public-ui/components": "2.0.0",
+    "@public-ui/react": "2.0.0",
+    "@public-ui/themes": "2.0.0",
+    "@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": "118.0.1",
+    "chromedriver": "119.0.1",
     "cpy-cli": "5.0.0",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.2.2",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.17.0",
-    "react-router-dom": "6.17.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

@@ -11,6 +11,7 @@ import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
 import { useLocation } from 'react-router';
 import { HideMenusContext } from './shares/HideMenusContext';
+import { useSetCurrentLocation } from './hooks/useSetCurrentLocation';
 
 setStorage(localStorage);
 
@@ -46,7 +47,7 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 							<div className="d-grid gap-4">
 								{THEME_OPTIONS.filter(
 									(theme) =>
-										['bmf', 'default', 'bzst', '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">
@@ -107,6 +108,7 @@ export const App: FC = () => {
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
+	useSetCurrentLocation();
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
 	document.body.setAttribute('class', theme);

package/src/components/FocusInput.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useLayoutEffect, useRef } from 'react';
+import React, { FC, useRef } from 'react';
 import { RefComponent } from './types';
 
 type FokusElementProps = {
@@ -8,13 +8,14 @@ type FokusElementProps = {
 export const FocusElement: FC<FokusElementProps> = (props) => {
 	const ref = useRef(null);
 
-	useLayoutEffect(() => {
-		setTimeout(() => {
-			if (ref.current && window.self === window.top) {
-				(ref.current as unknown as HTMLElement).focus();
-			}
-		}, 500);
-	}, [ref]);
+	/* Focus effect for the moment to ensure test stability */
+	// useLayoutEffect(() => {
+	// 	setTimeout(() => {
+	// 		if (ref.current && window.self === window.top) {
+	// 			(ref.current as unknown as HTMLElement).focus();
+	// 		}
+	// 	}, 500);
+	// }, [ref]);
 
 	return <props.RefComponent ref={ref} {...props} />;
 };

package/src/components/avatar/basic.tsx

@@ -4,7 +4,9 @@ import React, { FC } from 'react';
 export const AvatarBasic: FC = () => (
 	<div className="flex flex-wrap gap-4">
 		<KolAvatar _src="https://www.w3schools.com/howto/img_avatar.png" _label="Elke Mustermann" />
-		<KolAvatar _label="Elke Mustermann" />
+
+		{/* intentional trailing space    👇 - it's supposed to be trimmed */}
+		<KolAvatar _label="Elke Mustermann " />
 		<KolAvatar _label="Marianne" />
 	</div>
 );

package/src/components/badge/basic.tsx

@@ -8,11 +8,11 @@ const PROPS = {
 };
 
 export const BadgeBasic: FC = () => (
-	<div className="d-flex gap-2">
+	<div className="flex gap-2">
 		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
-		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
-		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
-		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
+		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
+		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
+		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
+		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
 	</div>
 );

package/src/components/badge/button.tsx

@@ -15,11 +15,11 @@ const PROPS = {
 };
 
 export const BadgeButton: FC = () => (
-	<div className="d-flex gap-2">
+	<div className="flex gap-2">
 		<KolBadge {...PROPS}></KolBadge>
-		<KolBadge _color="#B22222" {...PROPS}></KolBadge>
-		<KolBadge _color="#4682B4" {...PROPS}></KolBadge>
-		<KolBadge _color="#228B22" {...PROPS}></KolBadge>
-		<KolBadge _color="#8B008B" {...PROPS}></KolBadge>
+		<KolBadge _color="#86ffc6" {...PROPS}></KolBadge>
+		<KolBadge _color="#06539e" {...PROPS}></KolBadge>
+		<KolBadge _color="#ae0000" {...PROPS}></KolBadge>
+		<KolBadge _color="#8b008b" {...PROPS}></KolBadge>
 	</div>
 );

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

@@ -83,7 +83,9 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				},
 				sort: (data) => {
 					return data.sort((first, second) => {
 						if (first.dienstag < second.dienstag) {
@@ -100,27 +102,37 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'mittwoch',
 				label: 'Mittwoch',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => (el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`),
+				render: (el, data) => {
+					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				},
 			},
 		],
 	],
@@ -689,7 +701,9 @@ export const HandoutBasic: FC = () => (
 		<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
 			<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 			<KolHeading _label="" _level={1}>
-				Kolibri-Handout <small>for {getThemeName(getTheme())}</small>
+				<span slot="expert">
+					Kolibri-Handout <small>for {getThemeName(getTheme())}</small>
+				</span>
 			</KolHeading>
 			<KolDetails _label="Abstract" _open>
 				The handout shows a selection of KoliBri components in the style of <strong>{getThemeName(getTheme())}</strong>. Since KoliBri offers self-contained,
@@ -987,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/heading/badged.tsx

@@ -6,22 +6,34 @@ import { FC } from 'react';
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			<span slot="expert">
+				Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+			</span>
 		</KolHeading>
 	</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/basic.tsx

@@ -1,8 +1,6 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { KolLink } from '@public-ui/react';
 
-import { FC } from 'react';
-
 export const LinkBasic: FC = () => (
 	<div className="grid gap-4">
 		<KolLink _href="#" _label="Simple Link" />

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: [
@@ -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" />
+	</>
+);