npm - @public-ui/sample-react - Versions diffs - 1.7.0-rc.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (145) hide show

package/.eslintignore +1 -0
package/.eslintrc.js +27 -0
package/.gitignore +41 -0
package/.prettierignore +4 -0
package/package.json +66 -0
package/prettier.config.js +6 -0
package/public/index.html +28 -0
package/src/App.tsx +259 -0
package/src/declare.d.ts +4 -0
package/src/main.ts +7 -0
package/src/react.main.tsx +56 -0
package/src/routes-test.ts +79 -0
package/src/samples/abbr/basic.html +6 -0
package/src/samples/abbr/basic.tsx +39 -0
package/src/samples/abbr/routes.ts +9 -0
package/src/samples/accordion/basic.tsx +18 -0
package/src/samples/accordion/header.tsx +17 -0
package/src/samples/accordion/headlines.tsx +27 -0
package/src/samples/accordion/list.tsx +32 -0
package/src/samples/accordion/routes.ts +17 -0
package/src/samples/alert/basic.tsx +37 -0
package/src/samples/alert/card-msg.tsx +11 -0
package/src/samples/alert/html.tsx +29 -0
package/src/samples/alert/routes.ts +15 -0
package/src/samples/avatar/basic.tsx +10 -0
package/src/samples/avatar/routes.ts +8 -0
package/src/samples/badge/basic.tsx +18 -0
package/src/samples/badge/button.tsx +25 -0
package/src/samples/badge/routes.ts +12 -0
package/src/samples/breadcrumb/basic.tsx +53 -0
package/src/samples/breadcrumb/routes.ts +9 -0
package/src/samples/button/basic.tsx +29 -0
package/src/samples/button/hide-label.tsx +31 -0
package/src/samples/button/icons.tsx +27 -0
package/src/samples/button/routes.ts +18 -0
package/src/samples/button/width.tsx +30 -0
package/src/samples/button-group/basic.tsx +13 -0
package/src/samples/button-group/routes.ts +9 -0
package/src/samples/button-link/basic.tsx +23 -0
package/src/samples/button-link/icons.tsx +37 -0
package/src/samples/button-link/image.tsx +14 -0
package/src/samples/button-link/routes.ts +18 -0
package/src/samples/button-link/target.tsx +16 -0
package/src/samples/card/basic.tsx +12 -0
package/src/samples/card/confirm.tsx +19 -0
package/src/samples/card/flex.tsx +44 -0
package/src/samples/card/routes.ts +18 -0
package/src/samples/card/selection.tsx +70 -0
package/src/samples/details/basic.tsx +19 -0
package/src/samples/details/routes.ts +9 -0
package/src/samples/form/routes.ts +5 -0
package/src/samples/handout/basic.tsx +1013 -0
package/src/samples/handout/routes.ts +9 -0
package/src/samples/heading/badged.tsx +27 -0
package/src/samples/heading/basic.tsx +15 -0
package/src/samples/heading/paragraph.tsx +45 -0
package/src/samples/heading/routes.ts +15 -0
package/src/samples/icon/basic.tsx +17 -0
package/src/samples/icon/routes.ts +9 -0
package/src/samples/indented-text/basic.tsx +24 -0
package/src/samples/indented-text/routes.ts +9 -0
package/src/samples/input-checkbox/basic.tsx +37 -0
package/src/samples/input-checkbox/routes.ts +9 -0
package/src/samples/input-color/basic.tsx +29 -0
package/src/samples/input-color/routes.ts +9 -0
package/src/samples/input-date/basic.tsx +20 -0
package/src/samples/input-date/routes.ts +9 -0
package/src/samples/input-email/basic.tsx +30 -0
package/src/samples/input-email/routes.ts +9 -0
package/src/samples/input-file/basic.tsx +25 -0
package/src/samples/input-file/routes.ts +9 -0
package/src/samples/input-number/basic.tsx +30 -0
package/src/samples/input-number/routes.ts +9 -0
package/src/samples/input-password/basic.tsx +41 -0
package/src/samples/input-password/routes.ts +9 -0
package/src/samples/input-radio/basic.tsx +46 -0
package/src/samples/input-radio/horizontal.tsx +42 -0
package/src/samples/input-radio/routes.ts +14 -0
package/src/samples/input-radio/select.tsx +18 -0
package/src/samples/input-range/basic.tsx +29 -0
package/src/samples/input-range/routes.ts +9 -0
package/src/samples/input-text/basic.tsx +72 -0
package/src/samples/input-text/blur.tsx +16 -0
package/src/samples/input-text/focus.tsx +24 -0
package/src/samples/input-text/hidden-label.tsx +66 -0
package/src/samples/input-text/routes.ts +16 -0
package/src/samples/link/basic.tsx +23 -0
package/src/samples/link/icons.tsx +37 -0
package/src/samples/link/image.tsx +20 -0
package/src/samples/link/routes.ts +18 -0
package/src/samples/link/target.tsx +15 -0
package/src/samples/link-button/basic.tsx +22 -0
package/src/samples/link-button/routes.ts +9 -0
package/src/samples/link-group/routes.ts +5 -0
package/src/samples/nav/active.tsx +88 -0
package/src/samples/nav/aria-current.tsx +22 -0
package/src/samples/nav/basic.tsx +62 -0
package/src/samples/nav/horizontal.tsx +59 -0
package/src/samples/nav/routes.ts +18 -0
package/src/samples/pagination/basic.tsx +12 -0
package/src/samples/pagination/routes.ts +9 -0
package/src/samples/popover/basic.tsx +36 -0
package/src/samples/popover/routes.ts +8 -0
package/src/samples/progress/basic.tsx +11 -0
package/src/samples/progress/routes.ts +9 -0
package/src/samples/select/basic.tsx +51 -0
package/src/samples/select/routes.ts +9 -0
package/src/samples/skip-nav/basic.tsx +33 -0
package/src/samples/skip-nav/routes.ts +9 -0
package/src/samples/spin/basic.tsx +6 -0
package/src/samples/spin/custom.css +52 -0
package/src/samples/spin/custom.tsx +11 -0
package/src/samples/spin/cycle.tsx +6 -0
package/src/samples/spin/routes.ts +13 -0
package/src/samples/split-button/basic.tsx +46 -0
package/src/samples/split-button/routes.ts +8 -0
package/src/samples/table/badge-size.tsx +51 -0
package/src/samples/table/render-cell.tsx +48 -0
package/src/samples/table/routes.ts +15 -0
package/src/samples/table/sort-date.tsx +33 -0
package/src/samples/table/test-data.ts +66 -0
package/src/samples/textarea/adjust-height.tsx +22 -0
package/src/samples/textarea/basic.tsx +11 -0
package/src/samples/textarea/disabled.tsx +10 -0
package/src/samples/textarea/placeholder.tsx +10 -0
package/src/samples/textarea/readonly.tsx +10 -0
package/src/samples/textarea/resize.tsx +13 -0
package/src/samples/textarea/routes.ts +27 -0
package/src/samples/textarea/rows.tsx +10 -0
package/src/samples/toast/basic.tsx +21 -0
package/src/samples/toast/routes.ts +8 -0
package/src/samples/version/basic.tsx +6 -0
package/src/samples/version/context.tsx +12 -0
package/src/samples/version/routes.ts +12 -0
package/src/shares/constants.ts +2 -0
package/src/shares/react-roots.ts +10 -0
package/src/shares/routes.ts +87 -0
package/src/shares/store.ts +85 -0
package/src/shares/theme.ts +103 -0
package/src/shares/types.ts +4 -0
package/src/style.scss +89 -0
package/test-build.sh +2 -0
package/tsconfig.json +32 -0
package/unocss.config.ts +7 -0
package/webpack.config.js +14 -0

package/.eslintignore ADDED Viewed

	@@ -0,0 +1 @@
1	+ /assets/

package/.eslintrc.js ADDED Viewed

@@ -0,0 +1,27 @@
+const config = require('@leanup/stack/.eslintrc');
+config.overrides = config.overrides || [];
+config.overrides.push({
+	extends: ['plugin:react/recommended', 'plugin:jsx-a11y/recommended'],
+	files: ['**/*.tsx'],
+	parserOptions: {
+		ecmaFeatures: {
+			jsx: true,
+		},
+	},
+	rules: {
+		'react/no-unused-state': 'error',
+	},
+});
+config.plugins = config.plugins || [];
+config.plugins.push('react');
+config.plugins.push('jsx-a11y');
+config.settings = {
+	react: {
+		version: 'detect',
+	},
+};
+module.exports = config;

package/.gitignore ADDED Viewed

@@ -0,0 +1,41 @@
+# Next
+.next
+# GraphQL
+src/__generated__
+# IDE's
+.idea
+.project
+*.sublime-*
+*.code-*
+# Node.js
+node_modules
+npm-debug.log
+# Build and test tools
+*.zip
+dist/*
+# Cache
+.sass-cache
+.cache
+# Operating system
+.DS_Store
+Thumbs.db
+# Other
+/.husky
+/.reports
+.env
+.eslintcache
+*~
+*.log
+*.tgz
+/public/assets/

package/.prettierignore ADDED Viewed

@@ -0,0 +1,4 @@
+**/assets/**
+*.feature
+*.sass
+*.scss

package/package.json ADDED Viewed

@@ -0,0 +1,66 @@
+{
+	"name": "@public-ui/sample-react",
+	"version": "1.7.0-rc.5",
+	"description": "This app contains samples for the KoliBri/Public UI",
+	"license": "EUPL-1.2",
+	"scripts": {
+		"clean": "git clean -f -d -X",
+		"clean:locks": "rimraf package-lock.json pnpm-lock.yaml && npm run clean",
+		"build": "rimraf dist && cross-env NODE_ENV=production webpack",
+		"format": "prettier --check src",
+		"lint": "eslint \"{src,tests}/**/*.{html,js,json,jsx,ts,tsx,gql,graphql}\"",
+		"serve": "cross-env NODE_ENV=development webpack serve --devtool=source-map",
+		"start": "npm run serve",
+		"unused": "ts-prune -e src",
+		"postinstall": "npm-run-all postinstall:*",
+		"postinstall:components-assets": "cpy \"node_modules/@public-ui/components/assets/**/*\" public/assets --dot",
+		"postinstall:themes-assets": "cpy \"node_modules/@public-ui/themes/assets/**/*\" public/assets --dot"
+	},
+	"bin": {
+		"kolibri-sample-react-test-build": "test-build.sh"
+	},
+	"dependencies": {
+		"@leanup/stack": "1.3.47",
+		"@leanup/stack-react": "1.3.44",
+		"@leanup/stack-webpack": "1.3.47",
+		"@public-oss/kolibri-themes": "0.0.3",
+		"@public-ui/components": "1.7.0-rc.5",
+		"@public-ui/react": "1.7.0-rc.5",
+		"@public-ui/themes": "1.7.0-rc.5",
+		"@types/react": "18.2.21",
+		"@types/react-dom": "18.2.7",
+		"@unocss/preset-mini": "0.55.7",
+		"@unocss/webpack": "0.55.7",
+		"ajv": "8.12.0",
+		"chromedriver": "116.0.0",
+		"cpy-cli": "5.0.0",
+		"eslint-plugin-jsx-a11y": "6.7.1",
+		"eslint-plugin-react": "7.33.2",
+		"nightwatch-axe-verbose": "2.2.2",
+		"npm-run-all": "4.1.5",
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
+		"react-router": "6.15.0",
+		"react-router-dom": "6.15.0",
+		"rimraf": "3.0.2",
+		"ts-prune": "0.10.3",
+		"typescript": "5.2.2",
+		"world_countries_lists": "2.8.2"
+	},
+	"files": [
+		".eslintignore",
+		".eslintrc.js",
+		".gitignore",
+		".prettierignore",
+		"prettier.config.js",
+		"public/index.html",
+		"src",
+		"test-build.sh",
+		"tsconfig.json",
+		"unocss.config.ts",
+		"webpack.config.js"
+	],
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	}
+}

package/prettier.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+module.exports = {
+	...require('@leanup/stack/prettier.config'),
+	printWidth: 160,
+	singleQuote: true,
+	useTabs: true,
+};

package/public/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="de" dir="ltr">
+	<head>
+		<title>Code-Samples | KoliBri – Public UI</title>
+		<meta charset="UTF-8" />
+		<meta name="description" content="Webanwendung mit der KoliBri-Komponentenbibliothek." />
+		<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" />
+		<link rel="stylesheet" href="assets/kreon/style.css" />
+		<link rel="stylesheet" href="assets/noto-sans/noto-sans.css" />
+		<link rel="stylesheet" href="assets/material-icons/iconfont/material-icons.css" />
+		<link rel="stylesheet" href="assets/material-symbols/index.css" />
+		<link rel="stylesheet" href="assets/roboto/roboto.css" />
+		<link rel="stylesheet" href="assets/tabler-icons/tabler-icons.css" />
+		<link rel="stylesheet" href="main.css" />
+		<meta name="robots" content="noindex" />
+		<meta name="kolibri" content="dev-mode=true" />
+	</head>
+	<body class="itzbund" data-theme="itzbund">
+		<div id="app"></div>
+		<script async src="main.js"></script>
+		<noscript>Diese Webseite erfordert, dass Sie JavaScript aktivieren.</noscript>
+	</body>
+</html>

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,259 @@
+import React, { useMemo } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import { Route as MyRoute, Routes as MyRoutes } from './shares/types';
+import { Option } from '@public-ui/components';
+import { KolAlert, KolButton, KolSelect, KolVersion } from '@public-ui/react';
+import { FC, useState } from 'react';
+import { ROUTES } from './shares/routes';
+import { THEME_OPTIONS, Theme } from './shares/theme';
+import PackageJson from '../package.json';
+import { getTheme, setTheme, setStorage, getThemeName } from './shares/store';
+const THEME_REGEX = /theme=([^&]+)/;
+setStorage(localStorage);
+const getThemeFromLocation = () => {
+	if (THEME_REGEX.test(window.location.hash)) {
+		const match = window.location.hash.match(THEME_REGEX);
+		if (Array.isArray(match) && match.length > 0) {
+			return match[0].replace(THEME_REGEX, '$1').toLowerCase();
+		}
+	}
+	return getTheme();
+};
+const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
+	let list: string[] = [];
+	for (const key in routes) {
+		if (routes[key]) {
+			const ThisRoute: MyRoute = routes[key];
+			const path = `${offset}${key}`;
+			if (typeof ThisRoute === 'function') {
+				list.push(path);
+			} else if (typeof ThisRoute === 'object' && ThisRoute !== null) {
+				list = list.concat(getRouteList(ThisRoute, `${path}/`));
+			}
+		}
+	}
+	return list;
+};
+const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
+	const tree: ReturnType<typeof Route>[] = [];
+	for (const key in routes) {
+		if (routes[key]) {
+			const ThisRoute: MyRoute = routes[key];
+			const path = `/${key}`;
+			if (typeof ThisRoute === 'function') {
+				tree.push(<Route key={path} path={path} element={<ThisRoute />} />);
+				tree.push(
+					<Route
+						key={`${path}/all`}
+						path={`${path}/all`}
+						element={
+							<div className="d-grid gap-4">
+								{THEME_OPTIONS.filter((theme) => ['bmf', 'zoll-v2'].indexOf((theme as Option<Theme>).value) >= 0).map((theme) => (
+									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
+										<strong>{theme.label}</strong>
+										<ThisRoute />
+										<hr aria-hidden="true" />
+									</div>
+								))}
+							</div>
+						}
+					/>,
+				);
+			} else if (typeof ThisRoute === 'object' && ThisRoute !== null) {
+				const keys = Object.keys(ThisRoute);
+				if (keys.length > 0) {
+					tree.push(
+						<Route
+							key={path}
+							path={`${path}/*`}
+							element={
+								<Routes>
+									<Route path="/" element={<Navigate to={keys[0]} />} />
+									{getRouteTree(ThisRoute)}
+								</Routes>
+							}
+						/>,
+					);
+				}
+			}
+		}
+	}
+	return tree;
+};
+const ROUTE_LIST = getRouteList(ROUTES);
+const ROUTE_TREE = getRouteTree(ROUTES);
+const clearHash = (str: string) => str.replace(/\?.*/g, '').replace(/^#/g, '');
+const getIndexOfRoute = (str: string) => {
+	return ROUTE_LIST.indexOf(clearHash(str));
+};
+type CustomRoute = { label: string; value: string };
+const componentList: CustomRoute[] = [];
+ROUTE_LIST.forEach((route) => {
+	const routeSplit = route.split('/');
+	if (routeSplit.pop() === 'basic') componentList.push({ label: routeSplit[1], value: route });
+});
+function getComponentFromSample(url: string): string {
+	const routeSplit = url.split('/');
+	routeSplit[2] = 'basic';
+	return routeSplit.join('/');
+}
+export const App: FC = () => {
+	const [theme] = useState(getThemeFromLocation());
+	const [sample, setSample] = useState(clearHash(window.location.hash));
+	const [active, setActive] = useState(false);
+	const [firstComponentChangeEvent, setFirstComponentChangeEvent] = useState(true);
+	const currentComponent = useMemo(() => {
+		return getComponentFromSample(sample);
+	}, [sample]);
+	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;
+	document.body.setAttribute('class', theme);
+	document.body.dataset.theme = theme;
+	const catchRef = () => {
+		setTimeout(() => {
+			setActive(true);
+		}, 500);
+	};
+	const componentSelectOn = {
+		onChange: (_e: Event, v: unknown) => {
+			/**
+			 * Drop first event as a temporary bugfix for the following issue:
+			 * When navigated to a component example which is not "basic" it would navigate away from it on the first event, because the select only stores the basic routes.
+			 * e.g. accordion/header would become accordion/basic.
+			 * This problem will become obsolete when the select gets replaced with a proper navigation (https://github.com/public-ui/kolibri/issues/5064)
+			 */
+			if (firstComponentChangeEvent) {
+				setFirstComponentChangeEvent(false);
+				return;
+			}
+			const path = (v as string[])[0];
+			setSample(path);
+			window.location.href = `#${path}?theme=${theme}`;
+		},
+	};
+	const on = {
+		onChange: (_event: Event, value: unknown) => {
+			if (active) {
+				value = Array.isArray(value) ? value[0] : value;
+				setTheme(value as Theme);
+				window.location.href =
+					window.location.href
+						.replace(THEME_REGEX, '')
+						.replace(/(\?|&{1,})$/g, '')
+						.replace(/&{2,}/g, '&') + `?theme=${value as string}`;
+				window.location.reload();
+			}
+		},
+	};
+	const next = {
+		onClick: () => {
+			let idx = getIndexOfRoute(window.location.hash);
+			if (idx >= ROUTE_LIST.length - 1) {
+				idx = 0;
+			} else {
+				idx += 1;
+			}
+			setSample(clearHash(ROUTE_LIST[idx]));
+			window.location.href = `#${ROUTE_LIST[idx]}?theme=${theme}`;
+		},
+	};
+	const prev = {
+		onClick: () => {
+			let idx = getIndexOfRoute(window.location.hash);
+			if (idx <= 0) {
+				idx = ROUTE_LIST.length - 1;
+			} else {
+				idx -= 1;
+			}
+			setSample(clearHash(ROUTE_LIST[idx]));
+			window.location.href = `#${ROUTE_LIST[idx]}?theme=${theme}`;
+		},
+	};
+	return (
+		<div className="grid gap-4" data-theme={theme} ref={catchRef}>
+			<div className="no-print grid gap-4 toolbar">
+				<dl>
+					<dt>Beispiel:</dt>
+					<dd>
+						<strong>
+							{/* <KolLink _href={`${window.location.href}?theme=${theme}`} _label={sample} _target="codesandbox" /> */}
+							{sample.replace(/\//g, ' ')}
+						</strong>{' '}
+						({getIndexOfRoute(window.location.hash) + 1}/{ROUTE_LIST.length})
+					</dd>
+					<dd>
+						<KolVersion _version={PackageJson.version}></KolVersion>
+					</dd>
+				</dl>
+				{active && (
+					<>
+						<KolButton
+							_ariaLabel="Weiter zum nächsten Komponenten-Beispiel"
+							_icon="codicon codicon-arrow-right"
+							_hideLabel
+							_label="Weiter"
+							_on={next}
+							_tooltipAlign="left"
+						/>
+						<KolButton
+							_ariaLabel="Weiter zum nächsten Komponenten-Beispiel"
+							_icon="codicon codicon-arrow-left"
+							_hideLabel
+							_label="Zurück"
+							_on={prev}
+							_tooltipAlign="right"
+							_variant="ghost"
+						/>
+					</>
+				)}
+				<KolSelect
+					className="col-span-2 sm:col-auto"
+					_disabled={!active}
+					_hideLabel
+					_label="Komponente wechseln"
+					_id="theme-toggle"
+					_list={componentList}
+					_on={componentSelectOn}
+					_value={[currentComponent]}
+				></KolSelect>
+				<KolSelect
+					_label="Theme wechseln"
+					className="col-span-2 sm:col-auto"
+					_hideLabel
+					_disabled={!active}
+					_id="theme-toggle"
+					_list={THEME_OPTIONS}
+					_on={on}
+					_value={[theme]}
+				></KolSelect>
+			</div>
+			<hr aria-hidden="true" />
+			<div className="p-4">
+				<Routes>
+					{getRouteTree(ROUTES)}
+					<Route path="*" element={<KolAlert _type="info">This code example has not been migrated yet - it&#39;s coming soon!</KolAlert>} />
+				</Routes>
+			</div>
+		</div>
+	);
+};

package/src/declare.d.ts ADDED Viewed

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

package/src/main.ts ADDED Viewed

@@ -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 ADDED Viewed

@@ -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/routes-test.ts ADDED Viewed

@@ -0,0 +1,79 @@
+export const routes = [
+	'/handout/basic',
+	'/abbr/basic',
+	'/accordion/basic',
+	'/accordion/header',
+	'/accordion/headlines',
+	'/accordion/list',
+	'/alert/basic',
+	'/alert/card-msg',
+	'/alert/html',
+	'/avatar/basic',
+	'/badge/basic',
+	'/badge/button',
+	'/breadcrumb/basic',
+	'/button/basic',
+	'/button/hide-label',
+	'/button/icons',
+	'/button/width',
+	'/button-link/basic',
+	'/button-link/icons',
+	'/button-link/image',
+	'/button-link/target',
+	'/button-group/basic',
+	'/card/basic',
+	'/card/confirm',
+	'/card/flex',
+	'/card/selection',
+	'/details/basic',
+	'/heading/badge',
+	'/heading/basic',
+	'/heading/paragraph',
+	'/icon/basic',
+	'/indented-text/basic',
+	'/input-checkbox/basic',
+	'/input-color/basic',
+	'/input-date/basic',
+	'/input-email/basic',
+	'/input-file/basic',
+	'/input-number/basic',
+	'/input-password/basic',
+	'/input-radio/basic',
+	'/input-radio/horizontal',
+	'/input-radio/select',
+	'/input-range/basic',
+	'/input-text/basic',
+	'/input-text/hidden-label',
+	'/input-text/blur',
+	'/input-text/focus',
+	'/link/basic',
+	'/link/icons',
+	'/link/image',
+	'/link/target',
+	'/link-button/basic',
+	'/nav/basic',
+	'/nav/active',
+	'/nav/aria-current',
+	'/nav/horizontal',
+	'/pagination/basic',
+	'/popover/basic',
+	'/progress/basic',
+	'/select/basic',
+	'/skip-nav/basic',
+	'/spin/basic',
+	'/spin/cycle',
+	'/spin/custom',
+	'/split-button/basic',
+	'/table/badge-size',
+	'/table/render-cell',
+	'/table/sort-data',
+	'/textarea/basic',
+	'/textarea/adjust-height',
+	'/textarea/disabled',
+	'/textarea/placeholder',
+	'/textarea/readonly',
+	'/textarea/resize',
+	'/textarea/rows',
+	'/version/basic',
+	'/version/context',
+];

package/src/samples/abbr/basic.html ADDED Viewed

@@ -0,0 +1,6 @@
+Ich bin <kol-abbr _title="Abkürzung">z.B.</kol-abbr> eine Abkürzung.<br />
+Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="right">z.B.</kol-abbr> eine Abkürzung (rechts).<br />
+Ich bin
+<kol-abbr _title="Abkürzung" _tooltip-align="bottom">z.B.</kol-abbr> eine Abkürzung (unten).<br />
+Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="left">z.B.</kol-abbr> eine Abkürzung (links).<br />
+Ich bin <kol-abbr _title="Abkürzung" _tooltip-align="top">z.B.</kol-abbr> eine Abkürzung (oben).

package/src/samples/abbr/basic.tsx ADDED Viewed

@@ -0,0 +1,39 @@
+import React from 'react';
+import { FC } from 'react';
+import { KolAbbr } from '@public-ui/react';
+export const AbbrBasic: FC = () => (
+	<>
+		<p>
+			Ich bin <KolAbbr _title="Abkürzung">z.B.</KolAbbr> eine Abkürzung.
+		</p>
+		<p>
+			Ich bin{' '}
+			<KolAbbr _title="Abkürzung" _tooltipAlign="right">
+				z.B.
+			</KolAbbr>{' '}
+			eine Abkürzung (rechts).
+		</p>
+		<p>
+			Ich bin{' '}
+			<KolAbbr _title="Abkürzung" _tooltipAlign="bottom">
+				z.B.
+			</KolAbbr>{' '}
+			eine Abkürzung (unten).
+		</p>
+		<p>
+			Ich bin{' '}
+			<KolAbbr _title="Abkürzung" _tooltipAlign="left">
+				z.B.
+			</KolAbbr>{' '}
+			eine Abkürzung (links).
+		</p>
+		<p>
+			Ich bin{' '}
+			<KolAbbr _title="Abkürzung" _tooltipAlign="top">
+				z.B.
+			</KolAbbr>{' '}
+			eine Abkürzung (oben).
+		</p>
+	</>
+);

package/src/samples/abbr/routes.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { Routes } from '../../shares/types';
+import { AbbrBasic } from './basic';
+export const ABBR_ROUTES: Routes = {
+	abbr: {
+		basic: AbbrBasic,
+	},
+};

package/src/samples/accordion/basic.tsx ADDED Viewed

@@ -0,0 +1,18 @@
+import React from 'react';
+import { KolAccordion } from '@public-ui/react';
+import { FC } from 'react';
+export const AccordionBasic: FC = () => (
+	<div className="grid gap-4">
+		<KolAccordion _heading="Überschrift Accordion Tab 1" _level={1}>
+			<div slot="content">Inhalt Accordion Tab 1</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Accordion Tab 2" _level={1} _open>
+			<div slot="content">Inhalt Accordion Tab 2</div>
+		</KolAccordion>
+		<KolAccordion _heading="Überschrift Accordion Tab 3" _level={1}>
+			<div slot="content">Inhalt Accordion Tab 3</div>
+		</KolAccordion>
+	</div>
+);

package/src/samples/accordion/header.tsx ADDED Viewed

@@ -0,0 +1,17 @@
+import React from 'react';
+import { KolAccordion } from '@public-ui/react';
+import { FC } from 'react';
+export const AccordionHeader: FC = () => (
+	<div className="grid gap-4">
+		<KolAccordion _heading="Accordion mit Header" _level={1} _open>
+			<div slot="header">Hier kann noch was in den Header</div>
+			<div slot="content">
+				Dieser Inhalt wird direkt beim Laden der Seite angezeigt.
+				<br />
+				Mit Klick auf die Überschrift wird der Inhalt versteckt.
+			</div>
+		</KolAccordion>
+	</div>
+);