@public-ui/sample-react 1.7.14 → 1.7.15

package/dist/main.js.LICENSE.txt

@@ -33,7 +33,7 @@
  */
 
 /**
- * @remix-run/router v1.15.1
+ * @remix-run/router v1.15.3
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -44,7 +44,7 @@
  */
 
 /**
- * React Router v6.22.1
+ * React Router v6.22.3
  *
  * Copyright (c) Remix Software Inc.
  *

package/package.json

@@ -1,37 +1,37 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.14",
+  "version": "1.7.15",
   "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-ui/components": "1.7.14",
-    "@public-ui/react": "1.7.14",
-    "@public-ui/themes": "1.7.14",
-    "@types/node": "20.11.19",
-    "@types/react": "18.2.57",
-    "@types/react-dom": "18.2.19",
+    "@public-ui/components": "1.7.15",
+    "@public-ui/react": "1.7.15",
+    "@public-ui/themes": "1.7.15",
+    "@types/node": "20.11.25",
+    "@types/react": "18.2.64",
+    "@types/react-dom": "18.2.21",
     "@unocss/preset-uno": "0.58.5",
     "@unocss/webpack": "0.58.5",
     "ajv": "8.12.0",
-    "chromedriver": "121.0.2",
+    "chromedriver": "122.0.4",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react": "7.34.0",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.22.1",
-    "react-router-dom": "6.22.1",
+    "react-router": "6.22.3",
+    "react-router-dom": "6.22.3",
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
-    "typescript": "5.3.3",
+    "typescript": "5.4.2",
     "world_countries_lists": "2.9.0",
-    "yup": "1.3.3"
+    "yup": "1.4.0"
   },
   "files": [
     ".eslintignore",

package/src/App.tsx

@@ -134,7 +134,7 @@ export const App: FC = () => {
 					{!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>} />
+						<Route path="*" element={<Navigate to={ROUTE_LIST[0]} replace />} />
 						<Route path="back-page" element={<BackPage />} />
 					</Routes>
 				</div>

package/src/components/Sidebar.tsx

@@ -44,7 +44,7 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 	const handlePreviousClick = () => {
 		const currentIndex = getIndexOfSample();
-		const nextIndex = currentIndex === 0 ? routeList.length - 1 : currentIndex - 1;
+		const nextIndex = currentIndex <= 0 ? routeList.length - 1 : currentIndex - 1;
 		location.replace(`#${routeList[nextIndex]}`);
 	};
 

package/src/react.main.tsx

@@ -2,7 +2,7 @@ import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 
-import { register } from '@public-ui/components';
+import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 import type { Generic } from 'adopted-style-sheets';
@@ -15,17 +15,24 @@ void (async () => {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
 		const { [(process.env.THEME_EXPORT as string) ?? 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
 		try {
-			await register([theme], defineCustomElements);
+			await bootstrap([theme], defineCustomElements, {
+				translation: {
+					name: 'de',
+				},
+			});
 		} catch (error) {
 			console.warn('Theme registration failed:', error);
 		}
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
+			await bootstrap([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},
+				translation: {
+					name: 'de',
+				},
 			});
 		} catch (error) {
 			console.warn('Theme registration failed:', error);

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

@@ -77,7 +77,6 @@ export function AppointmentForm() {
 	}, [activeFormSection]);
 
 	const handleSubmit = async (_values: FormValues, formik: FormikHelpers<FormValues>) => {
-		console.log(_values, formik);
 		const currentSectionIndex = formSectionSequence.indexOf(activeFormSection);
 		const nextSection = formSectionSequence[currentSectionIndex + 1];
 		if (nextSection !== undefined) {

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

@@ -1,22 +1,27 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
 import { FormValues } from './AppointmentForm';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { fetchAvailableTimes } from './appointmentService';
 import { Option } from '@public-ui/components/src';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();
 
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
+	const [schouldFocusErrorList, setSchouldFocusErrorList] = useState(true);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
 
 	useEffect(() => {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
-
+		if (schouldFocusErrorList && sectionSubmitted) {
+			focusErrorList(errorList, formikRef);
+			setSchouldFocusErrorList(false);
+		}
 		if (form.values.date) {
 			fetchAvailableTimes().then(
 				(times) => {
@@ -32,17 +37,19 @@ export function AvailableAppointmentsForm() {
 		return () => {
 			ignoreResponse = true;
 		};
-	}, [form.values.date]);
+	}, [form.values.date, sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 const LOCATION_OPTIONS = [
 	{
@@ -31,16 +31,23 @@ export function DistrictForm() {
 	const form = useFormikContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef<HTMLKolFormElement>(null);
+
+	useEffect(() => {
+		focusErrorList(errorList, formikRef);
+	}, [sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Stadtteil aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

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

@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
 import { Field, FieldProps, useFormikContext } from 'formik';
 import { FormValues } from './AppointmentForm';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 const SALUTATION_OPTIONS = [
 	{
@@ -27,16 +27,23 @@ export function PersonalInformationForm() {
 	const form = useFormikContext<FormValues>();
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
+
+	useEffect(() => {
+		focusErrorList(errorList, formikRef);
+	}, [sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						void form.submitForm();
 						setSectionSubmitted(true);
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>

package/src/scenarios/appointment-form/formUtils.ts

@@ -6,3 +6,9 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 		selector: `#field-${fieldName}`,
 	}));
 }
+
+export function focusErrorList(errorList: ErrorListPropType[], formikRef: React.RefObject<HTMLKolFormElement>) {
+	if (errorList.length > 0 && formikRef && formikRef.current) {
+		formikRef.current.focusErrorList().catch(console.warn);
+	}
+}

package/src/scenarios/static-form.tsx

@@ -18,6 +18,8 @@ import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';
 
 export const StaticForm: FC = () => {
+	const { searchParams } = new URL(location.href);
+
 	return (
 		<>
 			<SampleDescription>
@@ -41,6 +43,16 @@ export const StaticForm: FC = () => {
 					</li>
 				</ol>
 			</SampleDescription>
+
+			{searchParams.size > 0 && (
+				<>
+					<h2>Submitted data</h2>
+					<pre>
+						<code>{JSON.stringify(Object.fromEntries(searchParams.entries()), null, 2)}</code>
+					</pre>
+				</>
+			)}
+
 			<form className="grid gap-4" method="get" noValidate>
 				<KolInputCheckbox _name="checkbox" _label="Checkbox" />
 				<KolInputColor _name="color" _label="Color" />
@@ -83,6 +95,9 @@ export const StaticForm: FC = () => {
 					<KolButton _label="Submit" _type="submit" _variant="primary" />
 					<KolButton _label="Reset" _type="reset" />
 				</div>
+
+				{/* Add a random string to allow the form to be always submitted. Without it, if theres no change to the data, the form simply won't submit when requested. */}
+				<input type="hidden" value={crypto.randomUUID()} name="random" />
 			</form>
 		</>
 	);

package/dist/12.js

@@ -1,2 +0,0 @@
-/*! For license information please see 12.js.LICENSE.txt */
-"use strict";(self.webpackChunk_public_ui_sample_react=self.webpackChunk_public_ui_sample_react||[]).push([[12],{6040:(t,e,i)=>{i.r(e),i.d(e,{initialize:()=>a});var l=i(3304),r=i(5496);function n(t,e){try{Object.defineProperty((0,l.g)(),t,{get:function(){return e}})}catch(e){l.L.debug(`KoliBri property ${t} is already bind.`)}}const o=(t,e)=>l.L.debug(`${t} ${e?"":"not "}activated`),a=()=>{if((0,l.i)(),(0,l.e)()){(0,l.r)(),n("a11yColorContrast",r.q),n("querySelector",r.k),n("querySelectorAll",r.t),n("querySelectorColors",r.u),n("utils",(function(){return r.n})),n("parseJson",r.p),n("stringifyJson",r.v);const t=(0,l.a)().body,e=(0,l.a)().createElement("svg");if(e.setAttribute("aria-label","KoliBri-DevTools"),e.setAttribute("xmlns","http://www.w3.org/2000/svg"),e.setAttribute("role","toolbar"),e.setAttribute("style","position: fixed;color: black;font-size: 200%;bottom: 0.25rem;right: 0.25rem;"),e.innerHTML='<svg\n  xmlns="http://www.w3.org/2000/svg"\n  width="50"\n  height="50"\n  viewBox="0 0 600 600"\n>\n  <path d="M353 322L213 304V434L353 322Z" fill="#047" />\n  <path d="M209 564V304L149 434L209 564Z" fill="#047" />\n  <path d="M357 316L417 250L361 210L275 244L357 316Z" fill="#047" />\n  <path d="M353 318L35 36L213 300L353 318Z" fill="#047" />\n  <path d="M329 218L237 92L250 222L272 241L329 218Z" fill="#047" />\n  <path d="M391 286L565 272L421 252L391 286Z" fill="#047" />\n</svg>',(0,l.a)().body.appendChild(e),o("Development mode",(0,l.e)()),o("Experimental mode",(0,l.d)()),o("Color contrast analysis",(0,l.f)()),(0,l.f)()){const e=setTimeout((()=>{clearTimeout(e),setInterval((()=>{r.n.queryHtmlElementColors((0,l.a)().createElement("div"),(0,r.q)(t),!1,!1)}),1e4)}),2500)}}}}}]);

package/dist/5496.js.LICENSE.txt

@@ -1,3 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */