@public-ui/sample-react 4.0.0-alpha.0 → 4.0.0-alpha.10

package/src/components/toast/configurator.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+import type { AlertTypePropType } from '@public-ui/components';
+import { ToasterService } from '@public-ui/components';
+import { KolButton, KolInputRadio } from '@public-ui/react-v19';
+
+import { SampleDescription } from '../SampleDescription';
+
+import type { FC } from 'react';
+
+const toastTypes = ['default', 'info', 'success', 'warning', 'error'] as const;
+const toastTypeOptions = toastTypes.map((type) => ({
+	label: type,
+	value: type,
+}));
+
+const isAlertType = (value: unknown): value is AlertTypePropType => {
+	return typeof value === 'string' && toastTypes.includes(value as AlertTypePropType);
+};
+
+export const ToastConfigurator: FC = () => {
+	const [searchParams] = useSearchParams();
+	const queryType = searchParams.get('type');
+	const defaultType = isAlertType(queryType) ? queryType : undefined;
+	const [selectedType, setSelectedType] = useState<AlertTypePropType>(() => defaultType ?? 'default');
+	const toaster = useMemo<ToasterService>(() => ToasterService.getInstance(document), []);
+
+	useEffect(() => {
+		toastTypes.forEach((type) => {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Toast with type '${type}'`,
+				type,
+			});
+		});
+
+		return () => {
+			toaster.closeAll();
+		};
+	}, [toaster]);
+
+	useEffect(() => {
+		if (defaultType) {
+			setSelectedType(defaultType);
+		}
+	}, [defaultType]);
+
+	const handleTypeChange = (_: Event, value: unknown) => {
+		if (isAlertType(value)) {
+			setSelectedType(value);
+		}
+	};
+
+	const handleConfiguredToast = () => {
+		void toaster.enqueue({
+			description: 'Toasty',
+			label: `Toast with type '${selectedType}'`,
+			type: selectedType,
+		});
+	};
+
+	const closeAll = () => {
+		toaster.closeAll();
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card
+					variant.
+				</p>
+			</SampleDescription>
+			<section className="grid gap-4">
+				<KolInputRadio _orientation="horizontal" _label="Toast type" _value={selectedType} _options={toastTypeOptions} _on={{ onChange: handleTypeChange }} />
+				<div className="flex flex-wrap gap-2">
+					<KolButton _label={`Open ${selectedType} toast`} _on={{ onClick: handleConfiguredToast }}></KolButton>
+					<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+				</div>
+			</section>
+		</>
+	);
+};

package/src/components/toast/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ToastBasic } from './basic';
+import { ToastConfigurator } from './configurator';
 
 export const TOAST_ROUTES: Routes = {
 	toast: {
 		basic: ToastBasic,
+		configurator: ToastConfigurator,
 	},
 };

package/src/components/toolbar/basic.tsx

@@ -1,11 +1,46 @@
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
-import { HideMenusContext } from '../../shares/HideMenusContext';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarBasic: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
+	const TOOLBAR_ITEMS: ToolbarItemsPropType = [
+		{
+			type: 'button',
+			_label: 'Back',
+			_hideLabel: true,
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+			},
+		},
+		{
+			type: 'button',
+			_label: 'Next',
+			_hideLabel: true,
+			_icons: {
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+		{
+			type: 'link',
+			_href: '#/back-page',
+			_label: 'Simple Link 1',
+		},
+		{
+			type: 'link',
+			_href: '#/back-page',
+			_label: 'Simple Link 3',
+		},
+		{
+			type: 'button',
+			_label: 'Bold',
+		},
+	];
 	return (
 		<>
 			<SampleDescription>
@@ -14,43 +49,14 @@ export const ToolbarBasic: FC = () => {
 					features button and link elements.
 				</p>
 			</SampleDescription>
-			{!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: '#/back-page',
-						_label: 'Simple Link 1',
-					},
-					{
-						_href: '#/back-page',
-						_label: 'Simple Link 3',
-					},
-					{
-						_label: 'Bold',
-					},
-				]}
-			/>
+			<div className="flex flex-col gap-4">
+				<KolHeading _label="Orientation horizontal" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} />
+
+				<KolHeading _label="Orientation vertical" _level={2} />
+				<KolToolbar class="block w-fit" _label="Toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
+			</div>
 		</>
 	);
 };

package/src/components/toolbar/disabled.tsx

@@ -1,23 +1,21 @@
+import { KolToolbar } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useContext } from 'react';
-import { KolBadge, KolToolbar } from '@public-ui/react';
-import { HideMenusContext } from '../../shares/HideMenusContext';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const ToolbarDisabled: FC = () => {
-	const hideMenus = useContext(HideMenusContext);
 	return (
 		<>
 			<SampleDescription>
 				<p>This sample shows KolToolbars with some of the elements disabled.</p>
 			</SampleDescription>
-			{!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={[
 					{
+						type: 'button',
 						_label: 'Back',
 						_disabled: true,
 						_hideLabel: true,
@@ -28,6 +26,7 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
+						type: 'button',
 						_label: 'Next',
 						_hideLabel: true,
 						_icons: {
@@ -37,15 +36,18 @@ export const ToolbarDisabled: FC = () => {
 						},
 					},
 					{
+						type: 'link',
 						_href: '#/back-page',
 						_label: 'Simple Link 1',
 					},
 					{
+						type: 'link',
 						_href: '#/back-page',
 						_disabled: true,
 						_label: 'Simple Link 3',
 					},
 					{
+						type: 'button',
 						_label: 'Bold',
 					},
 				]}

package/src/components/tree/basic.tsx

@@ -1,9 +1,9 @@
+import { KolButton, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React, { useContext, useState } from 'react';
-import { KolBadge, KolButton, KolTree, KolTreeItem } from '@public-ui/react';
-import { getRandomEmoji } from '../../shares/randomEmoji';
 import { useParams } from 'react-router';
 import { HideMenusContext } from '../../shares/HideMenusContext';
+import { getRandomEmoji } from '../../shares/randomEmoji';
 import { SampleDescription } from '../SampleDescription';
 
 export const TreeBasic: FC = () => {
@@ -29,11 +29,11 @@ export const TreeBasic: FC = () => {
 			<SampleDescription>
 				<p>KolTree renders a keyboard accessible nested navigation. Branches of the tree can be collapsed or expanded.</p>
 			</SampleDescription>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 
 			<KolTree _label="Sitemap" class="block w-fit">
 				<KolTreeItem _label={homeLabel} {...getItemProps('home')}></KolTreeItem>
 				<KolTreeItem _label="2 About (open initially)" {...getItemProps('about')} _open>
+					<KolTreeItem _label="2.0 Legal" {...getItemProps('legal')}></KolTreeItem>
 					<KolTreeItem _label="2.1 Team" {...getItemProps('team')}>
 						<KolTreeItem _label="2.1.1. Values" {...getItemProps('values')}></KolTreeItem>
 						<KolTreeItem _label="2.1.2. Members" {...getItemProps('members')}>
@@ -65,7 +65,7 @@ export const TreeBasic: FC = () => {
 
 			<p>Current tree item: {subPage ?? 'none'}</p>
 
-			<div className="flex flex-row gap-2">
+			<div className="flex flex-wrap gap-2">
 				<KolButton _label="Change label for '1 Home'" _on={{ onClick: updateHomeLabel }}></KolButton>
 				<KolButton _label="Toggle '2.1.2.2 Pets'" _on={{ onClick: () => setShowPets(!showPets) }}></KolButton>
 				<KolButton _label="Toggle '2.2.1 Europe' (two levels at once)" _on={{ onClick: () => setShowEurope(!showEurope) }}></KolButton>

package/src/components/version/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolVersion } from '@public-ui/react';
+import { KolVersion } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/version/context.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolVersion } from '@public-ui/react';
+import { KolVersion } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/main.ts

@@ -1,5 +1,16 @@
 import 'uno.css'; // https://github.com/antfu/unocss
 // App style
 import './style.scss';
+
+/* Optional theme CSS (e.g. font-face declarations) */
+if (process.env.THEME_CSS) {
+	if (process.env.PLATFORM === 'win32') {
+		/* Add leading slash, required for ESBuild on Windows.
+			 Note: process.env.THEME_CSS must be used literally in the import(). Moving it to a constant breaks the import. */
+		process.env.THEME_CSS = `/${process.env.THEME_CSS}`;
+	}
+	import(/* @vite-ignore */ process.env.THEME_CSS);
+}
+
 // App
 import './react.main';

package/src/react.main.tsx

@@ -1,11 +1,11 @@
+import { setTagNameTransformer } from '@public-ui/react-v19';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
-import { setTagNameTransformer } from '@public-ui/react';
 
-import { bootstrap, isInitialized } from '@public-ui/components';
-import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
+import { defineCustomElements } from '@public-ui/components/loader';
+import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -13,6 +13,12 @@ import type { Generic } from 'adopted-style-sheets';
 
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
+const ENABLE_I18N_OVERWRITING =
+	process.env.ENABLE_I18N_OVERWRITING === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableI18nOverwriting');
+
+const ENABLE_THEME_PATCHING =
+	process.env.ENABLE_THEME_PATCHING === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableThemePatching');
+
 const ENABLE_TAG_NAME_TRANSFORMER =
 	process.env.ENABLE_TAG_NAME_TRANSFORMER === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableTagNameTransformer');
 
@@ -24,19 +30,21 @@ if (ENABLE_TAG_NAME_TRANSFORMER) {
 const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* 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>;
+		if (process.env.PLATFORM === 'win32') {
+			/* Add leading slash, required for ESBuild on Windows.
+			   Note: process.env.THEME_MODULE must be used literally in the import(). Moving it to a constant breaks the import. */
+			process.env.THEME_MODULE = `/${process.env.THEME_MODULE}`;
+		}
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(/* @vite-ignore */ process.env.THEME_MODULE)) as Record<string, Theme>;
 		return [theme];
 	}
 
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
 };
 
 void (async () => {
 	try {
-		console.info('bootstap is initialized: ', isInitialized());
-		console.info('start kolibri bootstrap');
-
 		await bootstrap(
 			await getThemes(),
 			() => {
@@ -47,6 +55,8 @@ void (async () => {
 				} as any);
 			},
 			{
+				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+				reflectInputValues: true,
 				theme: process.env.THEME_MODULE
 					? undefined
 					: {
@@ -55,12 +65,51 @@ void (async () => {
 				translation: {
 					name: 'en',
 				},
+				/**
+				 * You can add your own translations here.
+				 */
+				translations: ENABLE_I18N_OVERWRITING
+					? new Set([
+							(t) =>
+								t('en', {
+									// https://github.com/public-ui/kolibri/blob/develop/packages/components/src/locales/en.ts
+									'kol-error': 'Tiny error!',
+								}),
+							(t) =>
+								t('de', {
+									// https://github.com/public-ui/kolibri/blob/develop/packages/components/src/locales/de.ts
+									'kol-error': 'Kleiner Fehler!',
+								}),
+						])
+					: undefined,
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
-				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 			},
 		);
 
-		console.info('bootstap is initialized: ', isInitialized());
+		/**
+		 * You should patch the theme after the components and your default theme are registered.
+		 */
+		if (ENABLE_THEME_PATCHING) {
+			KoliBriDevHelper.patchTheme(
+				'default',
+				{
+					'KOL-BUTTON': `
+						button {
+							border: 1px solid red;
+						}`,
+					'KOL-SPIN': `
+						.bg-spin-2 {
+							background-color: red;
+						}
+						.bg-spin-3 {
+							background-color: gold;
+						}`,
+				},
+				{
+					append: true,
+				},
+			);
+		}
 	} catch (error) {
 		console.warn('Theme registration failed:', error);
 	}