@public-ui/sample-react 2.0.2 → 2.0.3

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.14.0
+ * @remix-run/router v1.14.1
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.21.0
+ * React Router v6.21.1
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,33 +1,32 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "2.0.2",
-    "@public-ui/react": "2.0.2",
-    "@public-ui/themes": "2.0.2",
-    "@types/node": "20.10.5",
-    "@types/react": "18.2.45",
+    "@public-ui/components": "2.0.3",
+    "@public-ui/react": "2.0.3",
+    "@public-ui/themes": "2.0.3",
+    "@types/node": "20.10.6",
+    "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
-    "@unocss/preset-uno": "0.58.0",
-    "@unocss/webpack": "0.58.0",
+    "@unocss/preset-uno": "0.58.3",
+    "@unocss/webpack": "0.58.3",
     "ajv": "8.12.0",
-    "chromedriver": "120.0.0",
+    "chromedriver": "120.0.1",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "formik": "2.4.5",
-    "nightwatch-axe-verbose": "2.2.2",
+    "nightwatch-axe-verbose": "2.2.3",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.0",
-    "react-router-dom": "6.21.0",
+    "react-router": "6.21.1",
+    "react-router-dom": "6.21.1",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.3.3",

package/src/App.tsx

@@ -3,9 +3,9 @@ import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
 import { Option } from '@public-ui/components';
-import { KolAlert } from '@public-ui/react';
+import { KolAlert, KolBadge } from '@public-ui/react';
 import { ROUTES } from './shares/routes';
-import { Theme, THEME_OPTIONS } from './shares/theme';
+import { isDraftTheme, Theme, THEME_OPTIONS } from './shares/theme';
 import PackageJson from '@public-ui/components/package.json';
 import { getTheme, getThemeName, setStorage, setTheme } from './shares/store';
 import { Sidebar } from './components/Sidebar';
@@ -45,20 +45,19 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						path={`${path}/all`}
 						element={
 							<div className="d-grid gap-4">
-								{THEME_OPTIONS.filter(
-									(theme) =>
-										['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">
-											<strong>{theme.label}</strong>
+								{THEME_OPTIONS.filter((theme) => ['bmf', 'default', 'ecl-ec', 'ecl-eu', 'itzbund'].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">
+												<strong>{theme.label}</strong>
+											</div>
+											<div className="my-2">
+												<ThisRoute />
+											</div>
+											<hr aria-hidden="true" />
 										</div>
-										<div className="my-2">
-											<ThisRoute />
-										</div>
-										<hr aria-hidden="true" />
-									</div>
-								))}
+									),
+								)}
 							</div>
 						}
 					/>,
@@ -104,7 +103,7 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme = searchParams.get('theme') ?? getTheme();
+	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
 	setTheme(theme as Theme); // set for `getTheme` usages within the application
@@ -134,6 +133,7 @@ export const App: FC = () => {
 				)}
 
 				<div className="p-4" id="route-container">
+					{!hideMenus && isDraftTheme(theme) && <KolBadge className="mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}
 						<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />

package/src/components/SampleDescription.tsx

@@ -6,7 +6,7 @@ export const SampleDescription: FC<PropsWithChildren> = (props) => {
 	const hideMenus = useContext(HideMenusContext);
 
 	return hideMenus ? null : (
-		<div className="flex">
+		<div className="flex mb-sm">
 			<KolIndentedText>{props.children}</KolIndentedText>
 			<KolLink
 				_hideLabel

package/src/components/alert/html.tsx

@@ -6,9 +6,8 @@ import { FC } from 'react';
 export const AlertHtml: FC = () => (
 	<div>
 		<KolAlert _label="Ausgabe von HTML-Code im Alert" _type="info">
-			{' '}
 			<h2 className="mt-2 mb-3">Hier wird eine H2-Überschrift ausgegeben</h2>
-			<div style={{ display: 'grid', gridAutoFlow: 'column', gap: '1rem' }}>
+			<div className="grid gap-4 sm:grid-cols-2">
 				<div>
 					<h4>Text in einer linken Spalte</h4>
 					<p>

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

@@ -2,7 +2,7 @@ import { KolButton } from '@public-ui/react';
 import React, { FC } from 'react';
 
 export const ButtonAccessKey: FC = () => (
-	<div className="flex gap-4">
+	<div className="flex flex-wrap gap-4">
 		<KolButton _label="Mit S access key" _accessKey="S"></KolButton>
 		<KolButton _label="Sehr kleines s" _accessKey="s"></KolButton>
 		<KolButton _label="Access key kommt nicht in label vor" _accessKey="x"></KolButton>

package/src/components/button/width.tsx

@@ -12,14 +12,14 @@ const ARGS = {
 
 export const ButtonWidth: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<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-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
 			<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>

package/src/components/card/selection.tsx

@@ -11,8 +11,8 @@ const STYLE = {
 };
 
 export const CardSelection: FC = () => (
-	<div className="flex gap-2">
-		<KolCard _label="DEBTI-25437/17-1">
+	<div className="flex flex-wrap gap-2">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -32,7 +32,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte
@@ -52,7 +52,7 @@ export const CardSelection: FC = () => (
 				</div>
 			</div>
 		</KolCard>
-		<KolCard _label="DEBTI-25437/17-1">
+		<KolCard _label="DEBTI-25437/17-1" className="lg:w-[calc(33.33%-16px)] md:w-[calc(50%-16px)] sm:w-full">
 			<div>
 				<div>
 					TeCorp Endplatte

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

@@ -15,8 +15,8 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Woche" _required />
 			<KolInputDate {...props} _type="time" _label="Zeit (Standard)" _required />
 			<KolInputDate {...props} _step={1} _type="time" _label="Zeit (mit Sekunden)" _required />
-			<KolInputDate {...props} _readOnly _label="Zahleneingabe (Readonly)" _required />
-			<KolInputDate {...props} _disabled _label="Zahleneingabe (Disabled)" _required />
+			<KolInputDate {...props} _readOnly _label="Datumseingabe (Readonly)" _required />
+			<KolInputDate {...props} _disabled _label="Datumseingabe (Disabled)" _required />
 		</div>
 	);
 });

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

@@ -11,7 +11,7 @@ const ARGS = {
 
 export const LinkButtonBasic: FC = () => (
 	<div className="grid gap-14">
-		<div className="flex flex-warp gap-14">
+		<div className="flex flex-wrap gap-14">
 			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
 			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>

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

@@ -14,12 +14,12 @@ export const SplitButtonBasic: FC = () => {
 	};
 
 	return (
-		<div className="grid gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" className="w-200px" _on={{ onClick: handleButtonClick }}>
-				Drowndown-Inhalt
+		<div className="flex gap-4">
+			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
+				Dropdown-Inhalt
 			</KolSplitButton>
-			<KolSplitButton _label="ohne label" _hide-label _icons="codicon codicon-git-pull-request" className="w-200px">
-				Drowndown-Inhalt
+			<KolSplitButton _label="Schalter ohne sichtbares Label" _hideLabel _icons="codicon codicon-git-pull-request">
+				Dropdown-Inhalt
 			</KolSplitButton>
 		</div>
 	);

package/src/components/table/badge-size.tsx

@@ -15,11 +15,12 @@ const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'order', key: 'order', textAlign: 'center' },
+			{ label: 'order', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'date',
 				key: 'date',
 				textAlign: 'center',
+				width: '20em',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				sort: (data: Data[]) =>
 					data.sort((data0, data1) => {
@@ -48,4 +49,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;

package/src/components/table/column-alignment.tsx

@@ -0,0 +1,84 @@
+import React, { FC } from 'react';
+
+import { KolTable, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+const DATA = [{ left: 'Left Example', center: 'Center Example', right: 'Right Example' }];
+type Data = (typeof DATA)[0];
+const genericNonSorter = (data: Data[]): Data[] => data;
+
+export const TableColumnAlignment: FC = () => (
+	<>
+		<SampleDescription>Table with columns headers and data in different text alignments.</SampleDescription>
+
+		<KolHeading _label="Simple table" _level={3}></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with different text align properties"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left' },
+						{ label: 'center', key: 'center', textAlign: 'center' },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table with sortable columns" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with sortable columns"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+						{ label: 'right', key: 'right', textAlign: 'right', sort: genericNonSorter },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table some sortable columns" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with some but not all columns sortable"
+			_headers={{
+				horizontal: [
+					[
+						{ label: 'left', key: 'left', textAlign: 'left', sort: genericNonSorter },
+						{ label: 'center', key: 'center', textAlign: 'center', sort: genericNonSorter },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+
+		<KolHeading _label="Table with vertical heading" _level={3} className="block mt-6"></KolHeading>
+		<KolTable
+			_label="Table for demonstration purposes with vertical heading"
+			_headers={{
+				horizontal: [
+					[
+						{ label: '', asTd: true },
+						{ label: 'left', key: 'left', textAlign: 'left' },
+						{ label: 'center', key: 'center', textAlign: 'center' },
+						{ label: 'right', key: 'right', textAlign: 'right' },
+					],
+				],
+				vertical: [[{ label: 'Vertical' }]],
+			}}
+			_data={DATA}
+			className="block"
+			style={{ maxWidth: '600px' }}
+		/>
+	</>
+);

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

@@ -11,10 +11,11 @@ import { SampleDescription } from '../SampleDescription';
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: '#', key: 'order', textAlign: 'center' },
+			{ label: '#', key: 'order', textAlign: 'center', width: '10em' },
 			{
 				label: 'Datum (string)',
 				key: 'date',
+				width: '20em',
 				textAlign: 'center',
 				render: (el, tupel) => {
 					// https://reactjs.org/docs/portals.html
@@ -51,6 +52,6 @@ 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" />
+		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
 	</>
 );

package/src/components/table/routes.ts

@@ -1,17 +1,17 @@
 import { Routes } from '../../shares/types';
 
 import { TableBadgeSize } from './badge-size';
-
+import { TableColumnAlignment } from './column-alignment';
 import { TableRenderCell } from './render-cell';
-
-import { TableSortTable } from './sort-date';
+import { TableSortData } from './sort-data';
 import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
 	table: {
 		'badge-size': TableBadgeSize,
+		'column-alignment': TableColumnAlignment,
 		'render-cell': TableRenderCell,
-		'sort-data': TableSortTable,
+		'sort-data': TableSortData,
 		'with-pagination': TableWithPagination,
 	},
 };

package/src/components/table/{sort-date.tsx → sort-data.tsx}

@@ -30,4 +30,4 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortTable: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortData: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;

package/src/react.main.tsx

@@ -5,8 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import type { Generic } from 'adopted-style-sheets';
 import { register } from '@public-ui/components';
-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 { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 import { App } from './App';
 
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
@@ -23,7 +22,7 @@ void (async () => {
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BAMF, BMF, DEFAULT, BZStv1, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, ZOLLv3, TH], defineCustomElements, {
+			await register([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { ErrorList } from './ErrorList';
+import { ErrorListPropType } from '@public-ui/components';
 
 const LOCATION_OPTIONS = [
 	{
@@ -29,23 +29,23 @@ const LOCATION_OPTIONS = [
 
 export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
-	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+	const errorList = createErrorList(form.errors);
+
+	function createErrorList(formikErrors: Record<string, string>): ErrorListPropType[] {
+		return Object.keys(formikErrors).map((fieldName) => ({
+			message: formikErrors[fieldName],
+			selector: `#field-${fieldName}`,
+		}));
+	}
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
-
-			{sectionSubmitted && Object.keys(form.errors).length ? (
-				<div className="mt-2">
-					<ErrorList errors={form.errors} />
-				</div>
-			) : null}
-
 			<KolForm
+				_errorList={errorList}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
-						setSectionSubmitted(true);
 					},
 				}}
 			>

package/src/shares/theme.ts

@@ -1,21 +1,15 @@
 import { SelectOption } from '@public-ui/components';
 
-export type Theme = 'bmf' | 'bzst-v1' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'mapz' | 'th' | 'unstyled' | 'zoll-v2' | 'zoll-v3';
+export type Theme = 'bmf' | 'default' | 'ecl-ec' | 'ecl-eu' | 'itzbund' | 'unstyled';
+
+const drafts: Theme[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+
+export const isDraftTheme = (theme: Theme) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
 	return (
 		typeof value === 'string' &&
-		(value === 'unstyled' ||
-			value === 'bmf' ||
-			value === 'bzst-v1' ||
-			value === 'default' ||
-			value === 'ecl-ec' ||
-			value === 'ecl-eu' ||
-			value === 'itzbund' ||
-			value === 'mapz' ||
-			value === 'th' ||
-			value === 'zoll-v2' ||
-			value === 'zoll-v3')
+		(value === 'bmf' || value === 'default' || value === 'ecl-ec' || value === 'ecl-eu' || value === 'itzbund' || value === 'unstyled')
 	);
 };
 
@@ -26,47 +20,27 @@ export type Store = {
 
 export const THEME_OPTIONS: SelectOption<Theme>[] = [
 	{
-		label: 'Unstyled',
+		label: 'Unstyled (Uncolored)',
 		value: 'unstyled',
 	},
 	{
-		label: 'Bundesministerium der Finanzen',
+		label: 'Bundesministerium der Finanzen (Tested)',
 		value: 'bmf',
 	},
 	{
-		label: 'Bundeszentralamt für Steuern (v1)',
-		value: 'bzst-v1',
-	},
-	{
-		label: 'Default',
+		label: 'Default (Tested)',
 		value: 'default',
 	},
 	{
-		label: 'European Commission (ECL)',
+		label: 'European Commission (Draft)',
 		value: 'ecl-ec',
 	},
 	{
-		label: 'European Union (ECL)',
+		label: 'European Union (Draft)',
 		value: 'ecl-eu',
 	},
 	{
-		label: 'Informationstechnikzentrum Bund',
+		label: 'Informationstechnikzentrum Bund (Draft)',
 		value: 'itzbund',
 	},
-	{
-		label: '.',
-		value: 'mapz',
-	},
-	{
-		label: 'Freistaat Thüringen',
-		value: 'th',
-	},
-	{
-		label: '..',
-		value: 'zoll-v2',
-	},
-	{
-		label: '...',
-		value: 'zoll-v3',
-	},
 ];