@public-ui/sample-react 3.0.6-rc.1 → 3.0.6

package/src/components/nav/links.ts

@@ -128,3 +128,64 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 		_icons: 'codicon codicon-squirrel',
 	},
 ];
+
+export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
+	{
+		_label: 'Homepage',
+		_icons: 'codicon codicon-home',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
+	},
+	{
+		_label: '2 Navigation point',
+		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
+	},
+	{
+		_label: '3 Navigation point',
+		_href: '#/back-page',
+		_icons: 'codicon codicon-home',
+		_children: [
+			{
+				_label: '3.1 Navigation point',
+				_icons: 'codicon codicon-home',
+				_href: '#/back-page',
+			},
+			{
+				_label: '3.2 Navigation point',
+				_target: 'asdasd',
+			},
+			{
+				_label: '3.3 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.3.1 Navigation point',
+						_href: '#/back-page',
+						_active: true,
+					},
+					{ _label: '3.3.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{
+				_label: '3.4 Navigation point',
+				_href: '#/back-page',
+				_children: [
+					{
+						_label: '3.4.1 Navigation point',
+						_href: '#/back-page',
+						_children: [
+							{ _label: '3.4.1.1 Navigation point', _href: '#/back-page' },
+							{ _label: '3.4.1.2 Navigation point (active)', _href: '#/back-page' },
+						],
+					},
+					{ _label: '3.4.2 Navigation point', _href: '#/back-page' },
+				],
+			},
+			{ _label: '3.5 Navigation point', _href: '#/back-page' },
+		],
+	},
+];

package/src/components/table/predefined-settings.tsx

@@ -15,6 +15,7 @@ export const PredefinedSettings: FC = () => {
 			<KolTableStateful
 				_label="Table for demonstration purposes with predefined settings"
 				_minWidth="auto"
+				_hasSettingsMenu
 				_headers={{
 					horizontal: [
 						[

package/src/components/table/routes.ts

@@ -13,6 +13,7 @@ import { TableStatefulWithSelection } from './stateful-with-selection';
 import { TableStatefulWithSingleSelection } from './stateful-with-single-selection';
 import { TableStateless } from './stateless';
 import { TableStatelessWithSelection } from './stateless-with-selection';
+import { TableStatelessWithSettingsMenu } from './stateless-with-settings-menu';
 import { TableStatelessWithSingleSelection } from './stateless-with-single-selection';
 import { TableWithFooter } from './with-footer';
 import { TableWithPagination } from './with-pagination';
@@ -30,6 +31,7 @@ export const TABLE_ROUTES: Routes = {
 		'render-cell': TableRenderCell,
 		'sort-data': TableSortData,
 		'stateful-with-selection': TableStatefulWithSelection,
+		'stateless-with-settings-menu': TableStatelessWithSettingsMenu,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,
 		stateless: TableStateless,
 		'stateless-with-selection': TableStatelessWithSelection,

package/src/components/table/sort-data.tsx

@@ -19,6 +19,7 @@ const HEADERS_HORIZONTAL: KoliBriTableHeaders = {
 			{ label: 'order', key: 'order', textAlign: 'center' },
 			{
 				label: 'date',
+				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				compareFn: (data0, data1) => {
@@ -37,6 +38,7 @@ const HEADERS_VERTICAL: KoliBriTableHeaders = {
 			{ label: 'order', key: 'order', textAlign: 'center' },
 			{
 				label: 'date',
+				key: 'date',
 				textAlign: 'center',
 				render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as Data).date),
 				compareFn: (data0, data1) => {

package/src/components/table/stateless-with-settings-menu.tsx

@@ -0,0 +1,52 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolTableStateless } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+type Data = {
+	id: string;
+	name: string;
+	role: string;
+	email: string;
+	active: string;
+};
+const DATA: Data[] = [
+	{ id: 'U1001', name: 'Alice Johnson', role: 'Admin', email: 'alice@example.org', active: 'Yes' },
+	{ id: 'U1002', name: 'Bob Smith', role: 'Editor', email: 'bob@example.org', active: 'No' },
+	{ id: 'U1003', name: 'Carol Lee', role: 'Viewer', email: 'carol@example.org', active: 'Yes' },
+	{ id: 'U1004', name: 'David Kim', role: 'Editor', email: 'david@example.org', active: 'Yes' },
+];
+
+export const TableStatelessWithSettingsMenu: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows <code>KolTableStateless</code> with the settings menu enabled via
+				<code>_hasSettingsMenu</code>.
+			</p>
+		</SampleDescription>
+
+		<KolTableStateless
+			_label="Users (stateless with settings menu)"
+			_minWidth="auto"
+			className="w-full"
+			_hasSettingsMenu={true}
+			_headerCells={{
+				horizontal: [
+					[
+						{ key: 'id', label: 'ID', textAlign: 'center' },
+						{ key: 'name', label: 'Name', textAlign: 'center' },
+						{ key: 'role', label: 'Role', textAlign: 'center' },
+						{ key: 'email', label: 'E-Mail', textAlign: 'center' },
+						{ key: 'active', label: 'Active', textAlign: 'center' },
+					],
+				],
+			}}
+			_data={DATA}
+			_on={{
+				onSort: (_e, payload) => console.log('sort', payload),
+				onSelectionChange: (_e, value) => console.log('selection', value),
+			}}
+		/>
+	</>
+);

package/src/scenarios/react-hook-form/basic.tsx

@@ -0,0 +1,183 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { SubmitHandler, FieldErrors } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import {
+	KolInputTextController,
+	KolInputPasswordController,
+	KolInputEmailController,
+	KolInputNumberController,
+	KolInputRangeController,
+	KolInputDateController,
+	KolInputColorController,
+	KolInputFileController,
+	KolTextareaController,
+	KolComboboxController,
+	KolSelectController,
+	KolSingleSelectController,
+	KolInputRadioController,
+	KolInputCheckboxController,
+} from '@public-ui/react-hook-form-adapter';
+import { KolButton } from '@public-ui/react-v19';
+
+import { SampleDescription } from '../../components/SampleDescription';
+import { COUNTRY_SUGGESTIONS } from '../../shares/country';
+
+interface FormData {
+	firstName: string;
+	lastName: string;
+	email: string;
+	password: string;
+	age: number;
+	volume: number;
+	birthday: string;
+	favoriteColor: string;
+	cv: FileList | null;
+	bio: string;
+	country: string;
+	language: string;
+	framework: string;
+	gender: string;
+	termsAccepted: boolean;
+}
+
+const defaultValues: FormData = {
+	firstName: '',
+	lastName: '',
+	email: '',
+	password: '',
+	age: 18,
+	volume: 50,
+	birthday: '',
+	favoriteColor: '#000000',
+	cv: null,
+	bio: '',
+	country: '',
+	language: 'de',
+	framework: '',
+	gender: '',
+	termsAccepted: false,
+};
+
+const languageOptions = [
+	{ label: 'English', value: 'en' },
+	{ label: 'German', value: 'de' },
+	{ label: 'French', value: 'fr' },
+];
+
+const frameworkOptions = [
+	{ label: 'React', value: 'react' },
+	{ label: 'Vue', value: 'vue' },
+	{ label: 'Stencil', value: 'stencil' },
+];
+
+const genderOptions = [
+	{ label: 'Male', value: 'male' },
+	{ label: 'Female', value: 'female' },
+	{ label: 'Other', value: 'other' },
+];
+
+const allFields: Array<keyof FormData> = [
+	'firstName',
+	'lastName',
+	'email',
+	'password',
+	'age',
+	'volume',
+	'birthday',
+	'favoriteColor',
+	'cv',
+	'bio',
+	'country',
+	'language',
+	'framework',
+	'gender',
+	'termsAccepted',
+];
+
+export const RHFBasic: FC = () => {
+	const { control, handleSubmit, setValue, getValues, trigger } = useForm<FormData>({
+		defaultValues,
+		mode: 'onTouched',
+		shouldFocusError: true,
+	});
+
+	const touchAndValidateAll = () => {
+		allFields.forEach((name) => {
+			setValue(name, getValues(name), { shouldTouch: true, shouldValidate: true });
+		});
+	};
+
+	const onSubmit: SubmitHandler<FormData> = (data) => {
+		alert(JSON.stringify(data, null, 2));
+	};
+
+	const onError = (errors: FieldErrors<FormData>) => {
+		touchAndValidateAll();
+		void trigger(undefined, { shouldFocus: true });
+
+		console.warn('Validation errors:', errors);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample demonstrates a form using React Hook Form with KoliBri adapters. All inputs are validated, and error messages are shown on submit.</p>
+			</SampleDescription>
+
+			<form onSubmit={handleSubmit(onSubmit, onError)} className="grid gap-4 w-full max-w-xl">
+				<KolInputTextController name="firstName" control={control} _label="First Name" rules={{ required: 'First name is required' }} _required />
+				<KolInputTextController name="lastName" control={control} _label="Last Name" rules={{ required: 'Last name is required' }} _required />
+				<KolInputEmailController name="email" control={control} _label="Email" rules={{ required: 'Email is required' }} _required />
+				<KolInputPasswordController name="password" control={control} _label="Password" rules={{ required: 'Password is required' }} _required />
+				<KolInputNumberController name="age" control={control} _label="Age" rules={{ required: 'Age is required', min: 0 }} _required />
+				<KolInputRangeController name="volume" control={control} _label="Volume (0–100)" _min={0} _max={100} />
+				<KolInputDateController name="birthday" control={control} _label="Birthday" rules={{ required: 'Birthday is required' }} />
+				<KolInputColorController name="favoriteColor" control={control} _label="Favorite Color" id="favoriteColor" />
+				<KolInputFileController name="cv" control={control} _label="Upload CV" rules={{ required: 'Please upload your CV' }} _required />
+				<KolTextareaController name="bio" control={control} _label="Bio" rules={{ required: 'Please provide a short bio' }} _required />
+				<KolComboboxController
+					control={control}
+					rules={{ required: 'Please select a country' }}
+					name="country"
+					_label="Country"
+					_suggestions={COUNTRY_SUGGESTIONS}
+					_required
+				/>
+				<KolSelectController
+					control={control}
+					rules={{ required: 'Please select a language' }}
+					name="language"
+					_label="Preferred Language"
+					_options={languageOptions}
+					_required
+				/>
+				<KolSingleSelectController
+					rules={{ required: 'Please select a framework' }}
+					control={control}
+					name="framework"
+					_label="Favorite Framework"
+					_options={frameworkOptions}
+					_required
+				/>
+				<KolInputRadioController
+					control={control}
+					rules={{ required: 'Please select your gender' }}
+					name="gender"
+					_label="Gender"
+					_options={genderOptions}
+					_required
+				/>
+				<KolInputCheckboxController
+					name="termsAccepted"
+					control={control}
+					_label="I accept the terms and conditions"
+					rules={{ required: 'You must accept the terms' }}
+					_required
+				/>
+
+				<KolButton _label="Submit" _type="submit" />
+			</form>
+		</>
+	);
+};

package/src/scenarios/routes.ts

@@ -11,6 +11,7 @@ import { StaticForm } from './static-form';
 import { SampleFormWithValidation } from './sample-form-with-validation';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
 import { TooltipPositioning } from './tooltip-positioning';
+import { RHFBasic } from './react-hook-form/basic';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
@@ -20,11 +21,12 @@ export const SCENARIO_ROUTES: Routes = {
 		'focus-elements': FocusElements,
 		'input-group-with-error': InputGroupWithError,
 		'inputs-get-value': InputsGetValue,
-		'performance-test': PerformanceTest,
+		'react-hook-form-adapter': RHFBasic,
 		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
 		'static-form': StaticForm,
 		'sample-form-with-validation': SampleFormWithValidation,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 		'tooltip-positioning': TooltipPositioning,
+		'performance-test': PerformanceTest,
 	},
 };

package/dist/assets/InputStateWrapper-7LSQHzG0-t3PirBly.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InputStateWrapper-7LSQHzG0-t3PirBly.js","sources":["../../../../components/dist/esm/InputStateWrapper-7LSQHzG0.js"],"sourcesContent":["/*!\n * KoliBri - The accessible HTML-Standard\n */\nimport { _ as __rest } from './Heading-BX2W3g7O.js';\nimport { h } from './index-DOWoBMgb.js';\nimport { I as InputFc } from './Input-45FxkhGc.js';\nimport { g as getRenderStates } from './FormFieldStateWrapper-DiolLYSq.js';\n\nconst SuggestionsFc = (_a) => {\n    var { id, suggestions } = _a, other = __rest(_a, [\"id\", \"suggestions\"]);\n    if (!suggestions) {\n        return null;\n    }\n    return (h(\"datalist\", Object.assign({ id: `${id}-list` }, other), suggestions.map((option) => (h(\"option\", { value: option })))));\n};\n\nfunction getInputProps(state, other, customSuggestions) {\n    var _a;\n    const renderStates = getRenderStates(state);\n    const ariaDescribedBy = [...renderStates.ariaDescribedBy, ...((_a = other.ariaDescribedBy) !== null && _a !== void 0 ? _a : [])];\n    const props = {\n        id: state._id,\n        hideLabel: state._hideLabel,\n        label: state._label,\n        disabled: state._disabled,\n        name: state._name,\n    };\n    if ('_accessKey' in state)\n        props.accessKey = state._accessKey;\n    if ('_type' in state)\n        props.type = state._type;\n    if ('_value' in state)\n        props.value = state._value;\n    if ('_required' in state)\n        props.required = state._required;\n    if ('_maxLength' in state && '_maxLengthBehavior' in state && state._maxLengthBehavior === 'hard')\n        props.maxlength = state._maxLength;\n    if ('_placeholder' in state)\n        props.placeholder = state._placeholder;\n    if ('_autoComplete' in state)\n        props.autoComplete = state._autoComplete;\n    if ('_spellCheck' in state)\n        props.spellcheck = state._spellCheck;\n    if ('_pattern' in state)\n        props.pattern = state._pattern;\n    if ('_readOnly' in state)\n        props.readonly = state._readOnly;\n    if ('_min' in state)\n        props.min = state._min;\n    if ('_max' in state)\n        props.max = state._max;\n    if ('_step' in state)\n        props.step = state._step;\n    if ('_multiple' in state)\n        props.multiple = state._multiple;\n    if ('_checked' in state)\n        props.checked = state._checked;\n    if ('_indeterminate' in state)\n        props.indeterminate = state._indeterminate;\n    if ('_touched' in state)\n        props.touched = state._touched;\n    if ('_msg' in state)\n        props.msg = state._msg;\n    if ('_suggestions' in state && !customSuggestions) {\n        const hasSuggestions = Array.isArray(state._suggestions) && state._suggestions.length > 0;\n        if (hasSuggestions) {\n            props.suggestions = (h(SuggestionsFc, { id: state._id, suggestions: state._suggestions }));\n        }\n    }\n    return Object.assign(Object.assign(Object.assign({}, props), other), { ariaDescribedBy });\n}\nconst InputStateWrapper = (_a) => {\n    var { state, customSuggestions } = _a, other = __rest(_a, [\"state\", \"customSuggestions\"]);\n    return h(InputFc, Object.assign({}, getInputProps(state, other, customSuggestions)));\n};\n\nexport { InputStateWrapper as I, SuggestionsFc as S };\n//# sourceMappingURL=InputStateWrapper-7LSQHzG0.js.map\n\n//# sourceMappingURL=InputStateWrapper-7LSQHzG0.js.map"],"names":["SuggestionsFc","_a","id","suggestions","other","__rest","h","option","getInputProps","state","customSuggestions","ariaDescribedBy","getRenderStates","props","InputStateWrapper","InputFc"],"mappings":"6MAAA;AAAA;AAAA,GAQK,MAACA,EAAiBC,GAAO,CAC1B,GAAI,CAAE,GAAAC,EAAI,YAAAC,CAAW,EAAKF,EAAIG,EAAQC,EAAOJ,EAAI,CAAC,KAAM,aAAa,CAAC,EACtE,OAAKE,EAGGG,EAAE,WAAY,OAAO,OAAO,CAAE,GAAI,GAAGJ,CAAE,SAAWE,CAAK,EAAGD,EAAY,IAAKI,GAAYD,EAAE,SAAU,CAAE,MAAOC,EAAQ,CAAE,CAAC,EAFpH,IAGf,EAEA,SAASC,EAAcC,EAAOL,EAAOM,EAAmB,CACpD,IAAIT,EAEJ,MAAMU,EAAkB,CAAC,GADJC,EAAgBH,CAAK,EACD,gBAAiB,IAAKR,EAAKG,EAAM,mBAAqB,MAAQH,IAAO,OAASA,EAAK,CAAA,CAAG,EACzHY,EAAQ,CACV,GAAIJ,EAAM,IACV,UAAWA,EAAM,WACjB,MAAOA,EAAM,OACb,SAAUA,EAAM,UAChB,KAAMA,EAAM,KACpB,EACI,MAAI,eAAgBA,IAChBI,EAAM,UAAYJ,EAAM,YACxB,UAAWA,IACXI,EAAM,KAAOJ,EAAM,OACnB,WAAYA,IACZI,EAAM,MAAQJ,EAAM,QACpB,cAAeA,IACfI,EAAM,SAAWJ,EAAM,WACvB,eAAgBA,GAAS,uBAAwBA,GAASA,EAAM,qBAAuB,SACvFI,EAAM,UAAYJ,EAAM,YACxB,iBAAkBA,IAClBI,EAAM,YAAcJ,EAAM,cAC1B,kBAAmBA,IACnBI,EAAM,aAAeJ,EAAM,eAC3B,gBAAiBA,IACjBI,EAAM,WAAaJ,EAAM,aACzB,aAAcA,IACdI,EAAM,QAAUJ,EAAM,UACtB,cAAeA,IACfI,EAAM,SAAWJ,EAAM,WACvB,SAAUA,IACVI,EAAM,IAAMJ,EAAM,MAClB,SAAUA,IACVI,EAAM,IAAMJ,EAAM,MAClB,UAAWA,IACXI,EAAM,KAAOJ,EAAM,OACnB,cAAeA,IACfI,EAAM,SAAWJ,EAAM,WACvB,aAAcA,IACdI,EAAM,QAAUJ,EAAM,UACtB,mBAAoBA,IACpBI,EAAM,cAAgBJ,EAAM,gBAC5B,aAAcA,IACdI,EAAM,QAAUJ,EAAM,UACtB,SAAUA,IACVI,EAAM,IAAMJ,EAAM,MAClB,iBAAkBA,GAAS,CAACC,GACL,MAAM,QAAQD,EAAM,YAAY,GAAKA,EAAM,aAAa,OAAS,IAEpFI,EAAM,YAAeP,EAAEN,EAAe,CAAE,GAAIS,EAAM,IAAK,YAAaA,EAAM,YAAY,CAAE,GAGzF,OAAO,OAAO,OAAO,OAAO,OAAO,OAAO,CAAA,EAAII,CAAK,EAAGT,CAAK,EAAG,CAAE,gBAAAO,CAAe,CAAE,CAC5F,CACK,MAACG,EAAqBb,GAAO,CAC9B,GAAI,CAAE,MAAAQ,EAAO,kBAAAC,CAAiB,EAAKT,EAAIG,EAAQC,EAAOJ,EAAI,CAAC,QAAS,mBAAmB,CAAC,EACxF,OAAOK,EAAES,EAAS,OAAO,OAAO,CAAA,EAAIP,EAAcC,EAAOL,EAAOM,CAAiB,CAAC,CAAC,CACvF"}

package/dist/assets/has-closer-BBMh8HY3-CATV6KYG.js

@@ -1,4 +0,0 @@
-import{m as s}from"./index-Ci3EIMY6.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const r=(a,o)=>{s(a,"_hasCloser",o)};export{r as v};
-//# sourceMappingURL=has-closer-BBMh8HY3-CATV6KYG.js.map

package/dist/assets/image-source-RWPv7frZ-ncCOd3un.js

@@ -1,4 +0,0 @@
-import{n as o}from"./index-Ci3EIMY6.js";/*!
- * KoliBri - The accessible HTML-Standard
- */const e=(a,r,t)=>{o(a,"_src",r,t)};export{e as v};
-//# sourceMappingURL=image-source-RWPv7frZ-ncCOd3un.js.map