@public-ui/sample-react 1.7.0-rc.10

package/src/components/toast/basic.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { KolButton, KolToast } from '@public-ui/react';
+import { ToasterService } from '@public-ui/components';
+
+const toaster = ToasterService.getInstance(document);
+
+import { FC } from 'react';
+
+const handleButtonClick = () => {
+	void toaster.enqueue({
+		description: `Toasty`,
+		label: `Initial Toast`,
+		type: 'warning',
+	});
+};
+
+export const ToastBasic: FC = () => (
+	<div>
+		<KolButton _label="Show toast" _on={{ onClick: handleButtonClick }}></KolButton>
+	</div>
+);

package/src/components/toast/routes.ts

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

package/src/components/version/basic.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { KolVersion } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const VersionBasic: FC = () => <KolVersion _version="1.1.1" />;

package/src/components/version/context.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { KolVersion } from '@public-ui/react';
+
+import { FC } from 'react';
+
+export const VersionContext: FC = () => (
+	<p>
+		<KolVersion _version="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+		aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+		ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+	</p>
+);

package/src/components/version/routes.ts

@@ -0,0 +1,12 @@
+import { Routes } from '../../shares/types';
+
+import { VersionBasic } from './basic';
+
+import { VersionContext } from './context';
+
+export const VERSION_ROUTES: Routes = {
+	version: {
+		basic: VersionBasic,
+		context: VersionContext,
+	},
+};

package/src/declare.d.ts

@@ -0,0 +1,4 @@
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.png';
+declare module '*.gif';

package/src/hooks/useMobile.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export function useMobile(): boolean {
+	const mediaQuery = matchMedia('(max-width: 1023px)');
+	const [matches, setMatches] = useState<boolean>(mediaQuery.matches);
+
+	const handleChange = () => {
+		setMatches(mediaQuery.matches);
+	};
+
+	useEffect(() => {
+		handleChange(); // handle initial value
+		mediaQuery.addEventListener('change', handleChange);
+
+		return () => {
+			mediaQuery.removeEventListener('change', handleChange);
+		};
+	}, [mediaQuery]);
+
+	return matches;
+}

package/src/main.ts

@@ -0,0 +1,7 @@
+import 'uno.css'; // https://github.com/antfu/unocss
+
+// App style
+import './style.scss';
+
+// App
+import './react.main';

package/src/react.main.tsx

@@ -0,0 +1,56 @@
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { HashRouter as Router } from 'react-router-dom';
+
+import { defineCustomElements } from '@public-ui/components/dist/loader';
+import type { Generic } from '@a11y-ui/core';
+import { register } from '@public-ui/components';
+import { BAMF, BMF, BZSt, DEFAULT, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2 } from '@public-ui/themes';
+import { TH } from '@public-oss/kolibri-themes';
+import { App } from './App';
+
+type Theme = Generic.Theming.RegisterPatch<string, string, string>;
+
+void (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>;
+		try {
+			await register([theme], defineCustomElements);
+		} catch (error) {
+			console.warn('Theme registration failed:', error);
+		}
+	} else {
+		/* Regular mode: Register all known themes. */
+		try {
+			await register([BAMF, BMF, DEFAULT, BZSt, DESYv1, DESYv2, ECL_EC, ECL_EU, ITZBund, MAPZ, ZOLLv2, TH], defineCustomElements, {
+				theme: {
+					detect: 'auto',
+				},
+			});
+		} catch (error) {
+			console.warn('Theme registration failed:', error);
+		}
+	}
+
+	/**
+	 * You should patch the theme after the components and your default theme are registered.
+	 *
+	 * ↓ That is a tiny sample!
+	 */
+	// KoliBriDevHelper.patchTheme('my-theme', {
+	// 	'KOL-BUTTON': 'button{border:2px solid red;}',
+	// });
+
+	const htmlDivElement = document.querySelector('div#app');
+	if (htmlDivElement instanceof HTMLDivElement) {
+		const root = createRoot(htmlDivElement);
+		root.render(
+			<StrictMode>
+				<Router>
+					<App />
+				</Router>
+			</StrictMode>,
+		);
+	}
+})();

package/src/shares/constants.ts

@@ -0,0 +1,2 @@
+export const ERROR_MSG = 'Ich bin eine Fehlermeldung!';
+export const HINT_MSG = 'Ich bin ein Hinweis.';

package/src/shares/react-roots.ts

@@ -0,0 +1,10 @@
+import { createRoot, Root } from 'react-dom/client';
+
+const REACT18_ROOTS = new WeakMap<Element | DocumentFragment, Root>();
+
+export const getRoot = (el: Element | DocumentFragment): Root => {
+	if (REACT18_ROOTS.has(el) === false) {
+		REACT18_ROOTS.set(el, createRoot(el));
+	}
+	return REACT18_ROOTS.get(el) as Root;
+};

package/src/shares/routes.ts

@@ -0,0 +1,87 @@
+import { ABBR_ROUTES } from '../components/abbr/routes';
+import { ACCORDION_ROUTES } from '../components/accordion/routes';
+import { ALERT_ROUTES } from '../components/alert/routes';
+import { AVATAR_ROUTES } from '../components/avatar/routes';
+import { BADGE_ROUTES } from '../components/badge/routes';
+import { BREADCRUMB_ROUTES } from '../components/breadcrumb/routes';
+import { BUTTON_GROUP_ROUTES } from '../components/button-group/routes';
+import { BUTTON_LINK_ROUTES } from '../components/button-link/routes';
+import { BUTTON_ROUTES } from '../components/button/routes';
+import { CARD_ROUTES } from '../components/card/routes';
+import { DETAILS_ROUTES } from '../components/details/routes';
+import { FORM_ROUTES } from '../components/form/routes';
+import { HANDOUT_ROUTES } from '../components/handout/routes';
+import { HEADING_ROUTES } from '../components/heading/routes';
+import { ICON_ROUTES } from '../components/icon/routes';
+import { INDENTED_ROUTES } from '../components/indented-text/routes';
+import { INPUT_CHECKBOX_ROUTES } from '../components/input-checkbox/routes';
+import { INPUT_COLOR_ROUTES } from '../components/input-color/routes';
+import { INPUT_DATE_ROUTES } from '../components/input-date/routes';
+import { INPUT_EMAIL_ROUTES } from '../components/input-email/routes';
+import { INPUT_FILE_ROUTES } from '../components/input-file/routes';
+import { INPUT_NUMBER_ROUTES } from '../components/input-number/routes';
+import { INPUT_PASSWORD_ROUTES } from '../components/input-password/routes';
+import { INPUT_RADIO_ROUTES } from '../components/input-radio/routes';
+import { INPUT_RANGE_ROUTES } from '../components/input-range/routes';
+import { INPUT_TEXT_ROUTES } from '../components/input-text/routes';
+import { LINK_BUTTON_ROUTES } from '../components/link-button/routes';
+import { LINK_GROUP_ROUTES } from '../components/link-group/routes';
+import { LINK_ROUTES } from '../components/link/routes';
+import { NAV_ROUTES } from '../components/nav/routes';
+import { PAGINATION_ROUTES } from '../components/pagination/routes';
+import { POPOVER_ROUTES } from '../components/popover/routes';
+import { PROGRESS_ROUTES } from '../components/progress/routes';
+import { SELECT_ROUTES } from '../components/select/routes';
+import { SKIP_NAV_ROUTES } from '../components/skip-nav/routes';
+import { SPIN_ROUTES } from '../components/spin/routes';
+import { SPLIT_BUTTON_ROUTES } from '../components/split-button/routes';
+import { TABLE_ROUTES } from '../components/table/routes';
+import { TEXTAREA_ROUTES } from '../components/textarea/routes';
+import { TOAST_ROUTES } from '../components/toast/routes';
+import { VERSION_ROUTES } from '../components/version/routes';
+import { Routes } from './types';
+
+export const ROUTES: Routes = {
+	...HANDOUT_ROUTES,
+	...ABBR_ROUTES,
+	...ACCORDION_ROUTES,
+	...ALERT_ROUTES,
+	...AVATAR_ROUTES,
+	...BADGE_ROUTES,
+	...BREADCRUMB_ROUTES,
+	...BUTTON_ROUTES,
+	...BUTTON_LINK_ROUTES,
+	...BUTTON_GROUP_ROUTES,
+	...CARD_ROUTES,
+	...DETAILS_ROUTES,
+	...FORM_ROUTES,
+	...HEADING_ROUTES,
+	...ICON_ROUTES,
+	...INDENTED_ROUTES,
+	...INPUT_CHECKBOX_ROUTES,
+	...INPUT_COLOR_ROUTES,
+	...INPUT_DATE_ROUTES,
+	...INPUT_EMAIL_ROUTES,
+	...INPUT_FILE_ROUTES,
+	...INPUT_NUMBER_ROUTES,
+	...INPUT_PASSWORD_ROUTES,
+	...INPUT_RADIO_ROUTES,
+	...INPUT_RANGE_ROUTES,
+	...INPUT_TEXT_ROUTES,
+	...LINK_ROUTES,
+	...LINK_BUTTON_ROUTES,
+	...LINK_GROUP_ROUTES,
+	...NAV_ROUTES,
+	...PAGINATION_ROUTES,
+	...POPOVER_ROUTES,
+	...PROGRESS_ROUTES,
+	...SELECT_ROUTES,
+	...SELECT_ROUTES,
+	...SKIP_NAV_ROUTES,
+	...SPIN_ROUTES,
+	...SPLIT_BUTTON_ROUTES,
+	...TABLE_ROUTES,
+	...TEXTAREA_ROUTES,
+	...TOAST_ROUTES,
+	...VERSION_ROUTES,
+};

package/src/shares/store.ts

@@ -0,0 +1,85 @@
+import { isTheme, Store, Theme } from './theme';
+import PackageJson from '@public-ui/components/package.json';
+import { THEME_OPTIONS } from './theme';
+import { Option } from '@public-ui/components';
+
+const STORE_IDENTIFIER = `public-ui.v${PackageJson.version}`;
+
+class StaticStorage {
+	private readonly store: Map<string, string> = new Map();
+
+	public setItem(key: string, value: string) {
+		this.store.set(key, value);
+	}
+
+	public getItem(key: string) {
+		return this.store.get(key) || null;
+	}
+}
+
+const STORE: Store = {
+	darkMode: false,
+	theme: 'default',
+};
+
+let STORAGE: Storage;
+export function setStorage(storage: Storage) {
+	STORAGE = storage;
+	const RESTORE = STORAGE.getItem(STORE_IDENTIFIER);
+	try {
+		const store = JSON.parse(RESTORE as string) as Store;
+		if (typeof store === 'object' && store !== null) {
+			STORE.darkMode = store.darkMode === true;
+			if (isTheme(store.theme)) {
+				STORE.theme = store.theme;
+			}
+		}
+	} catch (e) {
+		/* empty */
+	}
+}
+setStorage(new StaticStorage() as unknown as Storage);
+
+const setStore = () => {
+	STORAGE.setItem(STORE_IDENTIFIER, JSON.stringify(STORE));
+};
+
+const switchDarkMode = (mode: boolean) => {
+	const html = document.querySelector('html');
+	if (html) {
+		html.dataset.theme = mode ? 'dark' : 'light';
+	}
+};
+
+// ts-prune-ignore-next
+export const setDarkMode = (value: boolean) => {
+	STORE.darkMode = value === true;
+	switchDarkMode(STORE.darkMode);
+	setStore();
+};
+
+// ts-prune-ignore-next
+export const getDarkMode = (): boolean => {
+	return STORE.darkMode === true;
+};
+
+export const setTheme = (theme: Theme) => {
+	if (isTheme(theme)) {
+		STORE.theme = theme;
+		setStore();
+	} else {
+		throw new Error(`The theme identifier "${theme}" is not valid or an available option.`);
+	}
+};
+
+export const getTheme = (): Theme => {
+	return `${STORE.theme}`;
+};
+
+export const getThemeName = (theme: Theme): string => {
+	if (isTheme(theme)) {
+		return THEME_OPTIONS.find((option) => (option as Option<Theme>).value === theme)?.label;
+	} else {
+		throw new Error(`The theme identifier "${theme}" is not valid or an available option.`);
+	}
+};

package/src/shares/theme.ts

@@ -0,0 +1,103 @@
+import { SelectOption } from '@public-ui/components';
+
+export type Theme =
+	| 'bamf'
+	| 'bmf'
+	| 'by'
+	| 'bzst'
+	| 'default'
+	| 'desy-v1'
+	| 'desy-v2'
+	| 'ecl-ec'
+	| 'ecl-eu'
+	| 'itzbund'
+	| 'mapz'
+	| 'th'
+	| 'unstyled'
+	| 'zoll-v2';
+
+export const isTheme = (value: unknown) => {
+	return (
+		typeof value === 'string' &&
+		(value === 'unstyled' ||
+			value === 'bamf' ||
+			value === 'bmf' ||
+			value === 'by' ||
+			value === 'bzst' ||
+			value === 'default' ||
+			value === 'desy-v1' ||
+			value === 'desy-v2' ||
+			value === 'ecl-ec' ||
+			value === 'ecl-eu' ||
+			value === 'itzbund' ||
+			value === 'mapz' ||
+			value === 'th' ||
+			value === 'zoll-v2')
+	);
+};
+
+export type Store = {
+	darkMode: boolean;
+	theme: Theme;
+};
+
+export const THEME_OPTIONS: SelectOption<Theme>[] = [
+	{
+		label: 'Unstyled',
+		value: 'unstyled',
+	},
+	// {
+	// 	disabled: true,
+	// 	label: 'Bundesamt für Migration und Flüchtlinge',
+	// 	value: 'bamf',
+	// },
+	{
+		label: 'Bundesministerium der Finanzen',
+		value: 'bmf',
+	},
+	// {
+	// 	label: 'Freistaat Bayern (StMWi)',
+	// 	value: 'by',
+	// },
+	{
+		label: 'Bundesamt für Zoll und Steuern',
+		value: 'bzst',
+	},
+	{
+		label: 'Default',
+		value: 'default',
+	},
+	// {
+	// 	disabled: true,
+	// 	label: 'DESY-Styleguide (v1)',
+	// 	value: 'desy-v1',
+	// },
+	{
+		label: 'DESY-Styleguide (v2)',
+		value: 'desy-v2',
+	},
+	{
+		label: 'European Commission (ECL)',
+		value: 'ecl-ec',
+	},
+	{
+		label: 'European Union (ECL)',
+		value: 'ecl-eu',
+	},
+	{
+		label: 'Informationstechnikzentrum Bund',
+		value: 'itzbund',
+	},
+	{
+		label: 'MAPZoll-Styleguide',
+		value: 'mapz',
+	},
+	{
+		label: 'Freistaat Thüringen',
+		value: 'th',
+	},
+	{
+		label: 'Design System Zoll (v2)',
+		value: 'zoll-v2',
+	},
+];

package/src/shares/types.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+
+export type Route = FC | Routes;
+export type Routes = { [key: string]: Route };

package/src/style.scss

@@ -0,0 +1,43 @@
+dl,
+hr {
+	margin: 0;
+}
+
+.w-4rem {
+	width: 4rem;
+}
+
+.w-8rem {
+	width: 8rem;
+}
+
+.w-12rem {
+	width: 12rem;
+}
+
+.grid-cols-2 {
+	grid-template-columns: auto auto;
+}
+
+.app-sidebar {
+	font-family: sans-serif;
+}
+
+@media (min-width: 1024px) {
+	.app-container {
+		display: grid;
+		grid-template-columns: 360px auto;
+		height: 100%;
+	}
+
+	.app-sidebar {
+		border-right: 1px solid gray;
+	}
+}
+
+@media print {
+	.no-print,
+	.no-print * {
+		display: none !important;
+	}
+}

package/test-build.sh

@@ -0,0 +1,2 @@
+cd "$(dirname "$0")"
+npm run build -- --output-path=$1

package/tsconfig.json

@@ -0,0 +1,32 @@
+{
+	"compilerOptions": {
+		"experimentalDecorators": true,
+		"pretty": true,
+		"target": "ESNext",
+		"module": "ESNext",
+		"preserveConstEnums": true,
+		"sourceMap": true,
+		"preserveSymlinks": true,
+		"moduleResolution": "node",
+		"lib": ["es2017", "dom"],
+		"types": ["@public-ui/components", "mocha", "node", "react", "react-dom"],
+		"typeRoots": ["node_modules/@types", "src/types"],
+		"noUnusedLocals": true,
+		"resolveJsonModule": true,
+		"noEmit": true,
+		"skipLibCheck": true,
+		"noUnusedParameters": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true,
+		"forceConsistentCasingInFileNames": true,
+		"importHelpers": true,
+		"removeComments": true,
+		"strict": true,
+		"allowSyntheticDefaultImports": true,
+		"jsx": "react",
+		"jsxFactory": "React.createElement",
+		"jsxFragmentFactory": "React.Fragment"
+	},
+	"include": ["src/**/*", "tests/**/*", "node_modules/@leanup/**/*", "decs.d.ts"],
+	"exclude": ["node_modules/@leanup/**/template/**/*"]
+}

package/unocss.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from '@unocss/webpack';
+import { presetUno } from '@unocss/preset-uno';
+
+// ts-prune-ignore-next
+export default defineConfig({
+	presets: [presetUno()],
+});

package/webpack.config.js

@@ -0,0 +1,14 @@
+const webpack = require('webpack');
+
+module.exports = (...args) => {
+	const config = require('@leanup/stack-react/webpack.config')(...args);
+	const UnoCSS = require('@unocss/webpack').default;
+	config.plugins.push(UnoCSS());
+	config.plugins.push(
+		new webpack.EnvironmentPlugin({
+			THEME_MODULE: '',
+			THEME_EXPORT: '',
+		}),
+	);
+	return config;
+};