@public-ui/sample-react 2.0.15 → 2.1.1

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.15",
+  "version": "2.1.1",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.50",
     "@leanup/stack-react": "1.3.50",
     "@leanup/stack-webpack": "1.3.50",
-    "@public-ui/components": "2.0.15",
-    "@public-ui/react": "2.0.15",
-    "@public-ui/themes": "2.0.15",
     "@types/node": "ts5.4",
     "@types/react": "18.3.1",
     "@types/react-dom": "18.3.0",
@@ -31,7 +28,10 @@
     "ts-prune": "0.10.3",
     "typescript": "5.4.5",
     "world_countries_lists": "2.9.0",
-    "yup": "1.4.0"
+    "yup": "1.4.0",
+    "@public-ui/components": "2.1.1",
+    "@public-ui/themes": "2.1.1",
+    "@public-ui/react": "2.1.1"
   },
   "files": [
     ".eslintignore",

package/src/components/SampleDescription.tsx

@@ -1,5 +1,7 @@
 import type { FC, PropsWithChildren } from 'react';
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
+
+import { PUBLIC_DOC_COMPONENT_URL } from '../shares/constants';
 
 import { KolIndentedText, KolLink } from '@public-ui/react';
 
@@ -7,17 +9,18 @@ import { HideMenusContext } from '../shares/HideMenusContext';
 
 export const SampleDescription: FC<PropsWithChildren> = (props) => {
 	const hideMenus = useContext(HideMenusContext);
+	const docRedirect = useMemo(() => {
+		const arr = location.href.split('/');
+		return `${PUBLIC_DOC_COMPONENT_URL}/${arr[arr.length - 2]}`;
+	}, [PUBLIC_DOC_COMPONENT_URL, location.href]);
 
 	return hideMenus ? null : (
-		<div className="flex mb-sm">
+		<div className="flex justify-between mb-sm">
 			<KolIndentedText>{props.children}</KolIndentedText>
-			<KolLink
-				_hideLabel
-				_href={`${location.href}?hideMenus`}
-				_label="Beispiel in neuem Tab öffnen"
-				_target="_blank"
-				className="mla flex-self-center"
-			></KolLink>
+			<div className="flex flex-wrap gap-2">
+				<KolLink _href={docRedirect} _label="Dokumentation" _target="_blank" />
+				<KolLink _href={`${location.href}?hideMenus`} _label="Beispiel" _target="_blank" />
+			</div>
 		</div>
 	);
 };

package/src/components/combobox/basic.tsx

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+import React from 'react';
+import { FormWrap } from '../FormWrap';
+import { ComboboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
+export const ComboboxBasic: FC = () => (
+	<>
+		<SampleDescription>The Combobox merges a text input with a suggestion list, enabling users to type or select their choice.</SampleDescription>
+		<>
+			<FormWrap RefComponent={ComboboxVariants} />
+		</>
+	</>
+);

package/src/components/combobox/partials/cases.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef } from 'react';
+
+import { KolCombobox } from '@public-ui/react';
+
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
+
+import type { Components } from '@public-ui/components';
+import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
+
+export const ComboboxCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function ComboboxCases(props) {
+	return (
+		<div className="grid gap-4">
+			<KolCombobox
+				{...props}
+				_hint={HINT_MSG}
+				_label="Label"
+				_suggestions={COUNTRY_SUGGESTIONS}
+				_value={'Deutschland'}
+				_on={{
+					onBlur: console.log,
+					onChange: console.log,
+					onClick: console.log,
+					onFocus: console.log,
+				}}
+			/>
+			<KolCombobox {...props} _label="Disabled" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} _disabled />
+			<KolCombobox
+				{...props}
+				_suggestions={COUNTRY_SUGGESTIONS}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_touched
+				_label="Label"
+				_placeholder="Placeholder"
+				_required
+			/>
+		</div>
+	);
+});

package/src/components/combobox/partials/variants.tsx

@@ -0,0 +1,19 @@
+import React, { forwardRef } from 'react';
+
+import { ComboboxCases } from './cases';
+
+import type { Components } from '@public-ui/components';
+export const ComboboxVariants = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectVariant(props, ref) {
+	return (
+		<div className="grid md:grid-cols-2 gap-4">
+			<fieldset>
+				<legend>Text</legend>
+				<ComboboxCases {...props} />
+			</fieldset>
+			<fieldset>
+				<legend>Text (hideLabel)</legend>
+				<ComboboxCases ref={ref} {...props} _hideLabel />
+			</fieldset>
+		</div>
+	);
+});

package/src/components/combobox/routes.ts

@@ -0,0 +1,8 @@
+import { Routes } from '../../shares/types';
+import { ComboboxBasic } from './basic';
+
+export const COMBOBOX_ROUTES: Routes = {
+	combobox: {
+		basic: ComboboxBasic,
+	},
+};

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

@@ -11,6 +11,13 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _label="Nicht ausgewählt" _value={false} _required />
 			<KolInputCheckbox {...props} _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
 			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Ausgewählt" _tooltipAlign="right" _value={true} />
+			<KolInputCheckbox
+				{...props}
+				_checked
+				_icons={{ unchecked: 'codicon codicon-close' }}
+				_label={'Mit sehr langem Label und Umbrüchen '.repeat(5)}
+				_value={true}
+			/>
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />

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

@@ -24,6 +24,10 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 					},
 				}}
 			/>
+			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
 			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
 			<KolInputNumber {...props} _readOnly _label="Zahleneingabe (Readonly)" />
 			<KolInputNumber {...props} _disabled _label="Zahleneingabe (Disabled)" />

package/src/components/input-password/show-password.tsx

@@ -44,6 +44,25 @@ export const InputPasswordShowPassword: FC = () => {
 					}}
 					className="block"
 				/>
+				<KolInputPassword
+					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
+					_label="Passwort"
+					ref={passwordRef}
+					_smartButton={{
+						_icons: {
+							left: {
+								icon: 'codicon codicon-eye',
+							},
+						},
+						_hideLabel: true,
+						_label: `Passwort ${isPasswordVisible ? 'ausblenden' : 'einblenden'}`,
+						_on: {
+							onClick: handleTogglePasswordClick,
+						},
+					}}
+					className="block"
+					_disabled
+				/>
 			</KolForm>
 		</>
 	);

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

@@ -11,7 +11,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test überschrift' }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -37,6 +37,8 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
 			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
 			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'warning', _description: 'Kleine Warnung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'success', _description: 'Erfolgsmeldung' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _label="Mit Counter" _hasCounter _maxLength={10} />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />

package/src/components/select/partials/cases.tsx

@@ -1,17 +1,11 @@
 import React, { forwardRef } from 'react';
-import countries from 'world_countries_lists/data/countries/de/countries.json';
 
 import { KolSelect } from '@public-ui/react';
 
 import { ERROR_MSG } from '../../../shares/constants';
 
 import type { Components, SelectOption } from '@public-ui/components';
-type Country = {
-	id: number;
-	alpha2: string;
-	alpha3: string;
-	name: string;
-};
+import { COUNTRY_OPTIONS } from '../../../shares/country';
 
 const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	{
@@ -33,13 +27,6 @@ const SALUTATION_OPTIONS: SelectOption<string>[] = [
 	},
 ];
 
-const COUNTRY_OPTIONS: SelectOption<string>[] = [
-	...(countries as Country[]).map((country) => ({
-		label: country.name,
-		value: country.alpha2,
-	})),
-];
-
 export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect>(function SelectCases(props, ref) {
 	return (
 		<div className="grid gap-4">

package/src/components/table/routes.ts

@@ -8,6 +8,7 @@ import { TableRenderCell } from './render-cell';
 import { TableSortData } from './sort-data';
 import { TableStateless } from './stateless';
 import { TableWithFooter } from './with-footer';
+import { TableStatelessWithSelection } from './stateless-with-selection';
 import { TableWithPagination } from './with-pagination';
 
 export const TABLE_ROUTES: Routes = {
@@ -20,6 +21,7 @@ export const TABLE_ROUTES: Routes = {
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'with-footer': TableWithFooter,
+		'stateless-with-selection': TableStatelessWithSelection,
 		'with-pagination': TableWithPagination,
 		stateless: TableStateless,
 	},

package/src/components/table/stateless-with-selection.tsx

@@ -0,0 +1,60 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { KolTableStateless } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { KoliBriTableSelection } from '@public-ui/components';
+
+const DATA = [
+	{ id: '1001', name: 'Foo Bar' },
+	{ id: '1002', name: 'Foo Baz' },
+];
+type Data = (typeof DATA)[0];
+
+export const TableStatelessWithSelection: FC = () => {
+	const selection: KoliBriTableSelection = {
+		label: (row: Data) => `Selection for ${row.name}`,
+		selectedKeys: ['1002'],
+		keyPropertyName: 'id',
+	};
+
+	const kolTableStatelessRef = useRef<HTMLKolTableStatelessElement>();
+
+	const handleSelectionChangeEvent = ({ detail: selection }) => {
+		console.log('Selection change via event', selection);
+	};
+	const handleSelectionChangeCallback = (_event, selection) => {
+		console.log('Selection change via callback', selection);
+	};
+
+	useEffect(() => {
+		kolTableStatelessRef.current?.addEventListener('kol-selection-change', handleSelectionChangeEvent);
+
+		return () => {
+			kolTableStatelessRef.current?.removeEventListener('kol-selection-change', handleSelectionChangeEvent);
+		};
+	}, [kolTableStatelessRef]);
+
+	return (
+		<>
+			<SampleDescription>KolTableStateless with selection</SampleDescription>
+
+			<KolTableStateless
+				_label="Table with selection checkboxes"
+				_headerCells={{
+					horizontal: [
+						[
+							{ key: 'id', label: '#ID', textAlign: 'left' },
+							{ key: 'name', label: 'Name', textAlign: 'left' },
+						],
+					],
+				}}
+				_data={DATA}
+				_selection={selection}
+				_on={{ onSelectionChange: handleSelectionChangeCallback }}
+				className="block"
+				style={{ maxWidth: '600px' }}
+				ref={kolTableStatelessRef}
+			/>
+		</>
+	);
+};

package/src/components/textarea/partials/cases.tsx

@@ -10,6 +10,9 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 		<div className="grid gap-4">
 			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
+			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />
+			<KolTextarea {...props} ref={ref} _label="Text (disabled & value)" _rows={3} _placeholder="Placeholder" _value="Lorem ipsum" _disabled />
 		</div>
 	);
 });

package/src/components/toolbar/basic.tsx

@@ -0,0 +1,48 @@
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+import { KolBadge, KolToolbar } from '@public-ui/react';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const ToolbarBasic: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	return (
+		<>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+			<KolToolbar
+				class="block w-fit"
+				_label="Toolbar"
+				_items={[
+					{
+						_label: 'Back',
+						_hideLabel: true,
+						_icons: {
+							left: {
+								icon: 'codicon codicon-arrow-left',
+							},
+						},
+					},
+					{
+						_label: 'Next',
+						_hideLabel: true,
+						_icons: {
+							right: {
+								icon: 'codicon codicon-arrow-right',
+							},
+						},
+					},
+					{
+						_href: '#',
+						_label: 'Simple Link 1',
+					},
+					{
+						_href: '#',
+						_label: 'Simple Link 3',
+					},
+					{
+						_label: 'Bold',
+					},
+				]}
+			/>
+		</>
+	);
+};

package/src/components/toolbar/disabled.tsx

@@ -0,0 +1,50 @@
+import type { FC } from 'react';
+import React, { useContext } from 'react';
+import { KolBadge, KolToolbar } from '@public-ui/react';
+import { HideMenusContext } from '../../shares/HideMenusContext';
+
+export const ToolbarDisabled: FC = () => {
+	const hideMenus = useContext(HideMenusContext);
+	return (
+		<>
+			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
+			<KolToolbar
+				_label="Toolbar"
+				class="block w-fit"
+				_items={[
+					{
+						_label: 'Back',
+						_disabled: true,
+						_hideLabel: true,
+						_icons: {
+							left: {
+								icon: 'codicon codicon-arrow-left',
+							},
+						},
+					},
+					{
+						_label: 'Next',
+						_hideLabel: true,
+						_icons: {
+							right: {
+								icon: 'codicon codicon-arrow-right',
+							},
+						},
+					},
+					{
+						_href: '#',
+						_label: 'Simple Link 1',
+					},
+					{
+						_href: '#',
+						_disabled: true,
+						_label: 'Simple Link 3',
+					},
+					{
+						_label: 'Bold',
+					},
+				]}
+			/>
+		</>
+	);
+};

package/src/components/toolbar/routes.ts

@@ -0,0 +1,10 @@
+import { Routes } from '../../shares/types';
+import { ToolbarBasic } from './basic';
+import { ToolbarDisabled } from './disabled';
+
+export const TOOLBAR_ROUTES: Routes = {
+	toolbar: {
+		basic: ToolbarBasic,
+		disabled: ToolbarDisabled,
+	},
+};

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -29,7 +29,7 @@ const getThemes = async () => {
 	}
 
 	/* List of regular sample app themes */
-	return [BMF, BStW, DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
+	return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
 };
 
 void (async () => {

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

@@ -80,12 +80,11 @@ 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) {
 			await formik.setTouched({});
-			setTimeout(() => setActiveFormSection(nextSection), 1000);
+			setActiveFormSection(nextSection);
 		}
 	};
 

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

@@ -1,12 +1,12 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
 
 import { fetchAvailableTimes } from './appointmentService';
 
 import type { FormValues } from './AppointmentForm';
-import type { FieldProps } from 'formik';
+import type { FieldProps, FieldInputProps } from 'formik';
 import type { Option } from '@public-ui/components';
 import { createErrorList, focusErrorList } from './formUtils';
 
@@ -23,7 +23,7 @@ export function AvailableAppointmentsForm() {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
 		if (schouldFocusErrorList && sectionSubmitted) {
-			focusErrorList(errorList, formikRef);
+			focusErrorList(formikRef);
 			setSchouldFocusErrorList(false);
 		}
 
@@ -44,6 +44,26 @@ export function AvailableAppointmentsForm() {
 		};
 	}, [form.values.date, sectionSubmitted]);
 
+	const renderField = useCallback(
+		(name: string, node: (field: FieldInputProps<FormValues['date' | 'time']>) => void) => (
+			<Field name={name}>{({ field }: FieldProps<FormValues['date' | 'time']>) => node(field)}</Field>
+		),
+		[],
+	);
+
+	const handleField = useCallback(
+		(name: string) => ({
+			onChange: (event: Event, value: unknown): void => {
+				if (event.target) {
+					void form.setFieldValue(name, value, true);
+				}
+			},
+			onBlur: () => {
+				void form.setFieldTouched(name, true);
+			},
+		}),
+		[form.setFieldValue, form.setFieldTouched],
+	);
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
@@ -54,59 +74,45 @@ export function AvailableAppointmentsForm() {
 					onSubmit: () => {
 						setSectionSubmitted(true);
 						void form.submitForm();
-						focusErrorList(errorList, formikRef);
+						focusErrorList(formikRef);
 					},
 				}}
 			>
-				<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>
+				{renderField('date', (field) => (
+					<KolInputDate
+						id="field-date"
+						_label="Datum"
+						_value={field.value}
+						_msg={{
+							_type: 'error',
+							_description: form.errors.date || '',
+						}}
+						_touched={form.touched.date}
+						_required
+						_on={handleField('date')}
+					/>
+				))}
 
 				{form.values.date && (
 					<div className="grid gap-4 mt-4">
 						{availableTimes ? (
 							<>
-								<Field name="time">
-									{({ field }: FieldProps<FormValues['time']>) => (
-										<KolInputRadio
-											id="field-time"
-											_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>
+								{renderField('time', (field) => (
+									<KolInputRadio
+										id="field-time"
+										_label="Zeit"
+										_orientation="horizontal"
+										_options={availableTimes}
+										_value={field.value}
+										_msg={{
+											_type: 'error',
+											_description: form.errors.time || '',
+										}}
+										_touched={form.touched.time}
+										_required
+										_on={handleField('time')}
+									/>
+								))}
 								<p>
 									<em>Aus Testzwecken sind nur die Termine zu jeder halben Stunde verfügbar.</em>
 								</p>
@@ -117,7 +123,7 @@ export function AvailableAppointmentsForm() {
 					</div>
 				)}
 
-				<KolButton _label="Weiter" _type="submit" className="mt-2" _disabled={form.isValidating} />
+				<KolButton _label="Weiter" _type="submit" className="mt-2" />
 				{form.values.date && form.isValidating ? <KolSpin _show aria-label="Termin wird geprüft." /> : ''}
 			</KolForm>
 		</div>