@public-ui/sample-react 1.7.1 → 1.7.2

package/dist/main.js.LICENSE.txt

@@ -55,3 +55,12 @@
  *
  * @license MIT
  */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,9 +8,9 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "1.7.1",
-    "@public-ui/react": "1.7.1",
-    "@public-ui/themes": "1.7.1",
+    "@public-ui/components": "1.7.2",
+    "@public-ui/react": "1.7.2",
+    "@public-ui/themes": "1.7.2",
     "@types/node": "20.8.0",
     "@types/react": "18.2.23",
     "@types/react-dom": "18.2.8",
@@ -21,6 +21,7 @@
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "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",
@@ -30,7 +31,8 @@
     "rimraf": "3.0.2",
     "ts-prune": "0.10.3",
     "typescript": "5.2.2",
-    "world_countries_lists": "2.8.2"
+    "world_countries_lists": "2.8.2",
+    "yup": "1.3.1"
   },
   "files": [
     ".eslintignore",

package/src/components/FormWrap.tsx

@@ -13,6 +13,15 @@ export const FormWrap: FC<FormWrapProps> = (props) => (
 			<FocusElement {...props} />
 			<div className="flex gap-4">
 				<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+				<KolButton
+					_label="Bunte Icons"
+					_icons={{
+						left: { icon: 'codicon codicon-heart-filled', style: { color: '#cc006e' } },
+						right: { icon: 'codicon codicon-squirrel', style: { color: '#b41b1b' } },
+					}}
+					_type="submit"
+					_variant="secondary"
+				/>
 				<KolButton _label="Reset" _type="reset" _variant="tertiary" />
 				<KolButton _label="Help" _type="button" _variant="ghost" />
 			</div>

package/src/components/modal/basic.tsx

@@ -6,7 +6,7 @@ export const ModalBasic: FC = () => {
 
 	return (
 		<div>
-			<KolModal _ariaLabel="" _width="80%" ref={modalElement}>
+			<KolModal _ariaLabel="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
 					<div slot="content">
 						<KolButton

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

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { KolTabs } from '@public-ui/react';
+import { DistrictForm } from './DistrictForm';
+import { Summary } from './Summary';
+import { PersonalInformationForm } from './PersonalInformationForm';
+import { Formik, FormikHelpers } from 'formik';
+import * as Yup from 'yup';
+import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';
+import { Iso8601 } from '@public-ui/components';
+import { checkAppointmentAvailability } from './appointmentService';
+
+// export interface FormProps {}
+export interface FormValues {
+	district: string;
+	date: Iso8601;
+	time: Iso8601;
+	salutation: string;
+	name: string;
+	company: string;
+	email: string;
+	phone: string;
+}
+
+enum FormSection {
+	DISTRICT,
+	AVAILABLE_APPOINTMENTS,
+	PERSONAL_INFORMATION,
+	SUMMARY,
+}
+
+const formSectionSequence = [FormSection.DISTRICT, FormSection.AVAILABLE_APPOINTMENTS, FormSection.PERSONAL_INFORMATION, FormSection.SUMMARY] as const;
+
+const initialValues: FormValues = {
+	district: '',
+	date: '' as Iso8601,
+	time: '' as Iso8601,
+	salutation: '',
+	name: '',
+	company: '',
+	email: '',
+	phone: '',
+};
+
+const districtSchema = {
+	district: Yup.string().required('Bitte Stadtteil wählen.'),
+};
+const personalInformationSchema = {
+	salutation: Yup.string().required('Bitte Anrede auswählen.'),
+	name: Yup.string().required('Bitte Name eingeben.'),
+	company: Yup.string().when('salutation', {
+		is: (salutation: string) => salutation === 'Firma',
+		then: (schema) => schema.required('Bitte Firmenname angeben.'),
+	}),
+	email: Yup.string().required('Bitte E-Mail-Adresse eingeben.'),
+};
+const availableAppointmentsSchema = {
+	date: Yup.string().required('Bitte Datum eingeben.'),
+	time: Yup.string().when('date', {
+		is: (date: string) => Boolean(date), // only validate time when date is already set
+		then: (schema) => schema.test('checkTimeAvailability', 'Termin leider nicht mehr verfügbar.', checkAppointmentAvailability),
+	}),
+};
+
+export function AppointmentForm() {
+	const [activeFormSection, setActiveFormSection] = useState(FormSection.DISTRICT);
+	const [selectedTab, setSelectedTab] = useState(activeFormSection);
+
+	const validationSchema = Yup.object().shape({
+		...(activeFormSection === FormSection.DISTRICT ? districtSchema : {}),
+		...(activeFormSection === FormSection.AVAILABLE_APPOINTMENTS ? availableAppointmentsSchema : {}),
+		...(activeFormSection === FormSection.PERSONAL_INFORMATION ? personalInformationSchema : {}),
+	});
+
+	useEffect(() => {
+		setSelectedTab(activeFormSection);
+	}, [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) {
+			await formik.setTouched({});
+			setTimeout(() => setActiveFormSection(nextSection), 1000);
+		}
+	};
+
+	return (
+		<Formik<FormValues> initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+			<KolTabs
+				_tabs={[
+					{
+						_label: '1. Einwohnermeldeamt wählen',
+					},
+					{
+						_label: '2. Freie Termine',
+						_disabled: activeFormSection < FormSection.AVAILABLE_APPOINTMENTS,
+					},
+					{
+						_label: '3. Persönliche Daten',
+						_disabled: activeFormSection < FormSection.PERSONAL_INFORMATION,
+					},
+					{
+						_label: 'Zusammenfassung',
+						_disabled: activeFormSection < FormSection.SUMMARY,
+					},
+				]}
+				_label="Formular-Navigation"
+				_selected={selectedTab}
+				_on={{ onSelect: (_event, selectedTab) => setActiveFormSection(selectedTab) }}
+			>
+				<div>
+					<DistrictForm />
+				</div>
+				<div>
+					<AvailableAppointmentsForm />
+				</div>
+				<div>
+					<PersonalInformationForm />
+				</div>
+				<div>
+					<Summary />
+				</div>
+			</KolTabs>
+		</Formik>
+	);
+}

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

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from 'react';
+import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
+import { FormValues } from './AppointmentForm';
+import { ErrorList } from './ErrorList';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import { fetchAvailableTimes } from './appointmentService';
+import { Option } from '@public-ui/components/src';
+
+export function AvailableAppointmentsForm() {
+	const form = useFormikContext<FormValues>();
+
+	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
+
+	useEffect(() => {
+		let ignoreResponse = false;
+		setAvailableTimes(null);
+
+		if (form.values.date) {
+			fetchAvailableTimes().then(
+				(times) => {
+					if (!ignoreResponse) {
+						setAvailableTimes(times);
+						void form.setFieldValue('time', times[0].value);
+						void form.setFieldTouched('time');
+					}
+				},
+				() => {},
+			); // ignore errors
+		}
+		return () => {
+			ignoreResponse = true;
+		};
+	}, [form.values.date]);
+
+	return (
+		<div className="p-2">
+			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
+
+			{sectionSubmitted && Object.keys(form.errors).length ? (
+				<div className="mt-2">
+					<ErrorList errors={form.errors} />
+				</div>
+			) : null}
+
+			<KolForm
+				_on={{
+					onSubmit: () => {
+						void form.submitForm();
+						setSectionSubmitted(true);
+					},
+				}}
+			>
+				<Field name="date">
+					{({ field }: FieldProps<FormValues['date']>) => (
+						<KolInputDate
+							id="field-date"
+							_label="Datum"
+							_value={field.value}
+							_error={form.errors.date || ''}
+							_touched={form.touched.date}
+							_required
+							_on={{
+								onChange: (event: Event, value: unknown): void => {
+									if (event.target) {
+										void form.setFieldValue('date', value, true);
+									}
+								},
+								onBlur: () => {
+									void form.setFieldTouched('date', true);
+								},
+							}}
+						/>
+					)}
+				</Field>
+
+				{form.values.date && (
+					<div className="grid gap-4 mt-4">
+						{availableTimes ? (
+							<>
+								<Field name="time">
+									{({ field }: FieldProps<FormValues['time']>) => (
+										<KolInputRadio
+											id="field-date"
+											_label="Zeit"
+											_orientation="horizontal"
+											_options={availableTimes}
+											_value={field.value}
+											_error={form.errors.time || ''}
+											_touched={form.touched.time}
+											_required
+											_on={{
+												onChange: (event: Event, value: unknown): void => {
+													if (event.target) {
+														void form.setFieldTouched('time', true);
+														void form.setFieldValue('time', value, true);
+													}
+												},
+											}}
+										/>
+									)}
+								</Field>
+								<p>
+									<em>Aus Testzwecken sind nur die Termine zu jeder halben Stunde verfügbar.</em>
+								</p>
+							</>
+						) : (
+							<KolSpin _show className="block" aria-label="Termine werden geladen." _variant="cycle" />
+						)}
+					</div>
+				)}
+
+				<KolButton _label="Weiter" _type="submit" className="mt-2" _disabled={form.isValidating} />
+				{form.values.date && form.isValidating ? <KolSpin _show aria-label="Termin wird geprüft." /> : ''}
+			</KolForm>
+		</div>
+	);
+}

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

@@ -0,0 +1,80 @@
+import React, { useState } 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';
+
+const LOCATION_OPTIONS = [
+	{
+		value: 'Aplerbeck',
+		label: 'Aplerbeck',
+	},
+	{
+		value: 'Brackel',
+		label: 'Brackel',
+	},
+	{
+		value: 'Dorstfeld',
+		label: 'Dorstfeld',
+	},
+	{
+		value: 'Innenstadt Ost',
+		label: 'Innenstadt Ost',
+	},
+	{
+		value: 'Innenstadt West',
+		label: 'Innenstadt West',
+	},
+];
+
+export function DistrictForm() {
+	const form = useFormikContext<FormValues>();
+	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+
+	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
+				_on={{
+					onSubmit: () => {
+						void form.submitForm();
+						setSectionSubmitted(true);
+					},
+				}}
+			>
+				<Field name="district">
+					{({ field }: FieldProps<FormValues['district']>) => (
+						<KolSelect
+							id="field-district"
+							_label="Stadtteil"
+							_options={[{ label: 'Bitte wählen…', value: '' }, ...LOCATION_OPTIONS]}
+							_value={[field.value]}
+							_error={form.errors.district || ''}
+							_touched={form.touched.district}
+							_required
+							_on={{
+								onChange: (event, values: unknown) => {
+									// Select und Radio setzen den Wert immer initial.
+									if (event.target) {
+										const [value] = values as [FormValues['district']];
+										void form.setFieldTouched('district', true);
+										void form.setFieldValue('district', value, true);
+									}
+								},
+							}}
+						/>
+					)}
+				</Field>
+
+				<KolButton _label="Weiter" _type="submit" className="mt-2" />
+			</KolForm>
+		</div>
+	);
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { KolAlert, KolLink } from '@public-ui/react';
+
+type ErrorListPropType = {
+	errors: Record<string, string>;
+};
+
+export function ErrorList({ errors }: ErrorListPropType) {
+	const handleLinkClick = (event: Event) => {
+		const href = (event.target as HTMLAnchorElement | undefined)?.href;
+		if (href) {
+			const hrefUrl = new URL(href);
+
+			const targetElement = document.querySelector<HTMLElement>(hrefUrl.hash);
+			if (targetElement && typeof targetElement.focus === 'function') {
+				targetElement.focus();
+			}
+		}
+	};
+
+	return (
+		<KolAlert _type="error" _variant="msg">
+			Bitte korrigieren Sie folgende Fehler:
+			<nav aria-label="Fehlerliste">
+				<ul>
+					{Object.entries(errors).map(([field, error]) => (
+						<li key={field}>
+							<KolLink _href={`#field-${field}`} _label={error} _on={{ onClick: handleLinkClick }} />
+						</li>
+					))}
+				</ul>
+			</nav>
+		</KolAlert>
+	);
+}

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

@@ -0,0 +1,157 @@
+import React, { useState } from 'react';
+import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
+import { Field, FieldProps, useFormikContext } from 'formik';
+import { FormValues } from './AppointmentForm';
+
+const SALUTATION_OPTIONS = [
+	{
+		value: 'Firma',
+		label: 'Firma',
+	},
+	{
+		value: 'Frau',
+		label: 'Frau',
+	},
+	{
+		value: 'Herr',
+		label: 'Herr',
+	},
+	{
+		value: 'Hallo',
+		label: 'Hallo',
+	},
+];
+
+export function PersonalInformationForm() {
+	const form = useFormikContext<FormValues>();
+	const [sectionSubmitted, setSectionSubmitted] = useState(false);
+
+	return (
+		<div className="p-2">
+			<KolHeading _level={2} _label="Geben Sie Ihre Kontaktdaten ein"></KolHeading>
+			<ul>{sectionSubmitted && Object.entries(form.errors).map(([field, error]) => <li key={field}>{error}</li>)}</ul>
+			<KolForm
+				_on={{
+					onSubmit: () => {
+						void form.submitForm();
+						setSectionSubmitted(true);
+					},
+				}}
+			>
+				<Field name="salutation">
+					{({ field }: FieldProps<FormValues['salutation']>) => (
+						<KolSelect
+							_label="Anrede"
+							_value={[field.value]}
+							_error={form.errors.salutation || ''}
+							_touched={form.touched.salutation}
+							_options={[{ label: 'Bitte wählen…', value: '' }, ...SALUTATION_OPTIONS]}
+							_required
+							_on={{
+								onChange: (event, values: unknown) => {
+									if (event.target) {
+										const [value] = values as [FormValues['salutation']];
+										void form.setFieldTouched('salutation', true);
+										void form.setFieldValue('salutation', value, true);
+									}
+								},
+							}}
+						/>
+					)}
+				</Field>
+
+				{form.values.salutation === 'Firma' && (
+					<Field name="company">
+						{({ field }: FieldProps<FormValues['company']>) => (
+							<div className="block mt-2">
+								<KolInputText
+									_label="Firma"
+									_value={field.value}
+									_error={form.errors.company || ''}
+									_touched={form.touched.company}
+									_required
+									_on={{
+										onChange: (event, value: unknown) => {
+											if (event.target) {
+												void form.setFieldTouched('company', true);
+												void form.setFieldValue('company', value, true);
+											}
+										},
+									}}
+								/>
+							</div>
+						)}
+					</Field>
+				)}
+
+				<Field name="name">
+					{({ field }: FieldProps<FormValues['name']>) => (
+						<div className="block mt-2">
+							<KolInputText
+								_label="Vor- und Zuname"
+								_value={field.value}
+								_error={form.errors.name || ''}
+								_touched={form.touched.name}
+								_required
+								_on={{
+									onChange: (event, value: unknown) => {
+										if (event.target) {
+											void form.setFieldTouched('name', true);
+											void form.setFieldValue('name', value, true);
+										}
+									},
+								}}
+							/>
+						</div>
+					)}
+				</Field>
+
+				<Field name="email">
+					{({ field }: FieldProps<FormValues['email']>) => (
+						<div className="block mt-2">
+							<KolInputEmail
+								_label="E-Mail"
+								_value={field.value}
+								_error={form.errors.email || ''}
+								_touched={form.touched.email}
+								_required
+								_on={{
+									onChange: (event, value: unknown) => {
+										if (event.target) {
+											void form.setFieldTouched('email', true);
+											void form.setFieldValue('email', value, true);
+										}
+									},
+								}}
+							/>
+						</div>
+					)}
+				</Field>
+
+				<Field name="phone">
+					{({ field }: FieldProps<FormValues['phone']>) => (
+						<div className="block mt-2">
+							<KolInputText
+								_type="tel"
+								_label="Telefonnumer"
+								_value={field.value}
+								_error={form.errors.phone || ''}
+								_touched={form.touched.phone}
+								_on={{
+									onChange: (event, value: unknown) => {
+										if (event.target) {
+											void form.setFieldTouched('phone', true);
+											void form.setFieldValue('phone', value, true);
+										}
+									},
+								}}
+							/>
+						</div>
+					)}
+				</Field>
+
+				<KolButton _label="Weiter" _type="submit" className="mt-2" />
+			</KolForm>
+		</div>
+	);
+}

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useFormikContext } from 'formik';
+import { KolHeading } from '@public-ui/react';
+import { FormValues } from './AppointmentForm';
+
+const ValueFallback = () => <i>Nicht angegeben</i>;
+const ValueWithFallback = ({ value }: { value: string }) => (value ? value : <ValueFallback />);
+
+export function Summary() {
+	const { values } = useFormikContext<FormValues>();
+
+	return (
+		<>
+			<KolHeading _level={2} _label="Zusammenfassung"></KolHeading>
+
+			<dl>
+				<dt>Stadtteil</dt>
+				<dd>
+					<ValueWithFallback value={values.district} />
+				</dd>
+				<dt>Termin</dt>
+				<dd>{values.date && values.time ? `${values.date} ${values.time} Uhr` : <ValueFallback />}</dd>
+
+				{values.salutation === 'Firma' ? (
+					<>
+						<dt>Firma</dt>
+						<dd>
+							<ValueWithFallback value={values.company} />
+						</dd>
+					</>
+				) : (
+					<>
+						<dt>Anrede</dt>
+						<dd>
+							<ValueWithFallback value={values.salutation} />
+						</dd>
+					</>
+				)}
+
+				<dt>Name</dt>
+				<dd>
+					<ValueWithFallback value={values.name} />
+				</dd>
+				<dt>E-Mail</dt>
+				<dd>
+					<ValueWithFallback value={values.email} />
+				</dd>
+				<dt>Telefon</dt>
+				<dd>
+					<ValueWithFallback value={values.phone} />
+				</dd>
+			</dl>
+		</>
+	);
+}

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

@@ -0,0 +1,37 @@
+import { Option } from '@public-ui/components';
+
+const getRandomIntInclusive = (min: number, max: number) => {
+	min = Math.ceil(min);
+	max = Math.floor(max);
+	return Math.floor(Math.random() * (max - min + 1) + min);
+};
+
+const padHours = (hours: number): string => `${hours < 10 ? '0' : ''}${hours}`;
+
+const getRandomTimes = () => {
+	const earliest = 8;
+	const latest = 17;
+	const amount = getRandomIntInclusive(2, 9);
+
+	const times = new Set<number>();
+	while (times.size !== amount) {
+		times.add(getRandomIntInclusive(earliest, latest));
+	}
+	return [...times].sort((timeA, timeB) => timeA - timeB).flatMap((hours) => [`${padHours(hours)}:00`, `${padHours(hours)}:30`]);
+};
+
+const sleep = (timeout: number) => {
+	return new Promise((resolve) => setTimeout(resolve, timeout));
+};
+export const fetchAvailableTimes = async (): Promise<Option<string>[]> => {
+	await sleep(1000);
+	return getRandomTimes().map((time) => ({
+		label: time,
+		value: time,
+	}));
+};
+
+export const checkAppointmentAvailability = async (time?: string): Promise<boolean> => {
+	await sleep(500);
+	return time?.endsWith(':30') ?? false;
+};