Fix errors, warnings and noise in sample app (#7220)

packages/components/src/functional-components/Alert/Alert.tsx

@@ -1,8 +1,8 @@
-import { h, type FunctionalComponent as FC } from '@stencil/core';
+import { type FunctionalComponent as FC, h } from '@stencil/core';
 import type { JSXBase } from '@stencil/core/internal';
 import clsx from 'clsx';
 
-import { Log, type InternalAlertProps } from '../../schema';
+import { type InternalAlertProps } from '../../schema';
 import { translate } from '../../i18n';
 import { KolButtonWcTag } from '../../core/component-names';
 
@@ -22,11 +22,11 @@ const KolAlertFc: FC<KolAlertFcProps> = (props, children) => {
 		/**
 		 * - https://developer.mozilla.org/de/docs/Web/API/Navigator/vibrate
 		 * - https://googlechrome.github.io/samples/vibration/
+		 * - Ongoing discussion: https://github.com/public-ui/kolibri/issues/7191
+		 * @todo Move side-effect out of render-function to avoid multiple incarnations.
 		 */
-		try {
-			Log.debug(['Navigator should vibrate ...', navigator.vibrate([100, 75, 100, 75, 100])]);
-		} catch (e) {
-			Log.debug('Navigator does not support vibration.');
+		if (navigator.userActivation?.hasBeenActive) {
+			navigator?.vibrate?.([100, 75, 100, 75, 100]);
 		}
 
 		setTimeout(() => {

packages/samples/react/public/index.html

@@ -6,7 +6,6 @@
 		<meta name="description" content="Webapp demonstrating KolBri-components with React." />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<link rel="shortcut icon" type="image/x-icon" href="assets/kolibri.ico" />
-		<link rel="stylesheet" href="assets/bundes/style.css" />
 		<link rel="stylesheet" href="assets/codicons/codicon.css" />
 		<link rel="stylesheet" href="assets/fontawesome-free/css/all.min.css" />
 		<link rel="stylesheet" href="assets/icofont/icofont.min.css" />

packages/samples/react/src/App.tsx

@@ -91,8 +91,6 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 const ROUTE_LIST = getRouteList(ROUTES);
 const ROUTE_TREE = getRouteTree(ROUTES);
 
-console.log('ROUTE_LIST', ROUTE_LIST);
-
 const componentList: Map<string, Option<string>> = new Map();
 ROUTE_LIST.forEach((route) => {
 	const routeSplit = route.split('/');

packages/samples/react/src/components/input-date/partials/minMax.tsx

@@ -1,8 +1,8 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { KolInputDate } from '@public-ui/react';
 import type { Components } from '@public-ui/components';
 
-export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {
+export const InputDateMinMaxCases = (props: Components.KolInputDate) => {
 	const minDateIso = '2024-09-26';
 	const maxDateIso = '2024-09-27';
 
@@ -38,4 +38,4 @@ export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Componen
 			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
 		</div>
 	);
-});
+};

packages/samples/react/src/components/input-date/partials/variants.tsx

@@ -17,7 +17,7 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 			</fieldset>
 			<fieldset>
 				<legend>Date (with min/max)</legend>
-				<InputDateMinMaxCases ref={ref} {...props} />
+				<InputDateMinMaxCases {...props} />
 			</fieldset>
 		</div>
 	);

packages/samples/react/src/components/input-text/partials/cases.tsx

@@ -49,7 +49,6 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText {...props} _value="Value" _disabled _label="First name (text, disabled)" />
 			<KolInputText {...props} _value="Value" _label="With access key" _accessKey="c" />
 			<KolInputText {...props} _value="Value" _label="With short key" _shortKey="s" />
-			<KolInputText {...props} _value="Value" _label="With both key" _shortKey="d" _accessKey="e" />
 		</div>
 	);
 });

packages/samples/react/src/components/input-text/text-formatter.tsx

@@ -111,8 +111,7 @@ export function InputTextFormatterDemo() {
 										{({ field }: FieldProps<CurrencyExampleFormValues['currency']>) => (
 											<div className="block mt-2">
 												<NumericFormat
-													customInput={({ type, value, onBlur, onChange, onFocus, ...other }: any) => {
-														console.log('OTHER: ', other);
+													customInput={({ type, value, onBlur, onChange, onFocus }: any) => {
 														return <KolInputText _label="Currency" _type={type} _value={value} _on={{ onBlur, onChange, onFocus }} />;
 													}}
 													displayType="input"

packages/samples/react/src/components/link/access-key.tsx

@@ -7,9 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 export const LinkAccessKey: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
-			</p>
+			<p>This sample shows KolLink with access key. The access keys can be used to trigger the buttons using the keyboard.</p>
 		</SampleDescription>
 
 		<div className="grid gap-4">

packages/samples/react/src/components/nav/basic.tsx

@@ -31,11 +31,17 @@ export const NavBasic: FC = () => {
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation without submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav
+						class="block w-fit"
+						_label="Navigation without submenu"
+						_links={LINKS_WITHOUT_SUBMENU}
+						_hasCompactButton
+						_hasIconsWhenExpanded={hasIconsWhenExpanded}
+					/>
 				</section>
 				<section className="grid gap-4">
 					<KolHeading _level={2} _label="Navigation with submenu" />
-					<KolNav class="block w-fit" _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
+					<KolNav class="block w-fit" _label="Navigation with submenu" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded={hasIconsWhenExpanded} />
 				</section>
 			</section>
 		</>

packages/samples/react/src/components/nav/horizontal.tsx

@@ -13,11 +13,11 @@ export const NavHorizontal: FC = () => (
 		<section className="grid gap-8">
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Navigation without submenu" />
-				<KolNav _label="Main navigation" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
+				<KolNav _label="Navigation without submenu" _links={LINKS_WITHOUT_SUBMENU} _orientation="horizontal" />
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Navigation with submenu" />
-				<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+				<KolNav _label="Navigation with submenu" _links={LINKS} _orientation="horizontal" />
 			</section>
 		</section>
 	</>

packages/samples/react/src/components/single-select/partials/cases.tsx

@@ -1,13 +1,14 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { KolSingleSelect } from '@public-ui/react';
 
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
-import type { Components, Option, StencilUnknown } from '@public-ui/components';
+import type { Option, StencilUnknown } from '@public-ui/components';
 import { COUNTRY_OPTIONS } from '../../../shares/country';
+import type { Components } from '@public-ui/components';
 
-export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectCases(props) {
+export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid gap-4">
 			<KolSingleSelect
@@ -38,4 +39,4 @@ export const SingleSelectCases = forwardRef<HTMLKolSingleSelectElement, Componen
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
 		</div>
 	);
-});
+};

packages/samples/react/src/components/single-select/partials/variants.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 
 import { SingleSelectCases } from './cases';
-
 import type { Components } from '@public-ui/components';
-export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Components.KolSingleSelect>(function SingleSelectVariant(props, ref) {
+
+export const SingleSelectVariants = (props: Components.KolSingleSelect) => {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
 			<fieldset>
@@ -12,8 +12,8 @@ export const SingleSelectVariants = forwardRef<HTMLKolSingleSelectElement, Compo
 			</fieldset>
 			<fieldset>
 				<legend>Text (hideLabel)</legend>
-				<SingleSelectCases ref={ref} {...props} _hideLabel />
+				<SingleSelectCases {...props} _hideLabel />
 			</fieldset>
 		</div>
 	);
-});
+};

packages/samples/react/src/components/table/pagination-position.tsx

@@ -30,7 +30,7 @@ export const PaginationPosition: FC = () => (
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Table with pagination at the bottom."></KolHeading>
 				<KolTableStateful
-					_label="Tabellenbeschreibung"
+					_label="Sample table with pagination at the bottom"
 					_data={DATA}
 					_headers={HEADERS}
 					_pagination={PAGINATION}
@@ -39,11 +39,23 @@ export const PaginationPosition: FC = () => (
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Table with pagination at the top."></KolHeading>
-				<KolTableStateful _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="top"></KolTableStateful>
+				<KolTableStateful
+					_label="Sample table with pagination at the top"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="top"
+				></KolTableStateful>
 			</section>
 			<section className="grid gap-4">
 				<KolHeading _level={2} _label="Table with pagination at both top and bottom."></KolHeading>
-				<KolTableStateful _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION} _paginationPosition="both"></KolTableStateful>
+				<KolTableStateful
+					_label="Sample table with pagination at both top and bottom"
+					_data={DATA}
+					_headers={HEADERS}
+					_pagination={PAGINATION}
+					_paginationPosition="both"
+				></KolTableStateful>
 			</section>
 		</section>
 	</div>

packages/samples/react/src/react.main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 import { setTagNameTransformer } from '@public-ui/react';
 
-import { bootstrap, isInitialized, KoliBriDevHelper } from '@public-ui/components';
+import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
@@ -40,9 +40,6 @@ const getThemes = async () => {
 
 void (async () => {
 	try {
-		console.info('bootstap is initialized: ', isInitialized());
-		console.info('start kolibri bootstrap');
-
 		await bootstrap(
 			await getThemes(),
 			() => {
@@ -107,8 +104,6 @@ void (async () => {
 				},
 			);
 		}
-
-		console.info('bootstap is initialized: ', isInitialized());
 	} catch (error) {
 		console.warn('Theme registration failed:', error);
 	}
@@ -133,7 +128,7 @@ void (async () => {
 		const root = createRoot(htmlDivElement);
 		root.render(
 			<StrictMode>
-				<Router>
+				<Router future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
 					<App />
 				</Router>
 			</StrictMode>,