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

package/src/samples/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/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 '../samples/abbr/routes';
+import { ACCORDION_ROUTES } from '../samples/accordion/routes';
+import { ALERT_ROUTES } from '../samples/alert/routes';
+import { AVATAR_ROUTES } from '../samples/avatar/routes';
+import { BADGE_ROUTES } from '../samples/badge/routes';
+import { BREADCRUMB_ROUTES } from '../samples/breadcrumb/routes';
+import { BUTTON_GROUP_ROUTES } from '../samples/button-group/routes';
+import { BUTTON_LINK_ROUTES } from '../samples/button-link/routes';
+import { BUTTON_ROUTES } from '../samples/button/routes';
+import { CARD_ROUTES } from '../samples/card/routes';
+import { DETAILS_ROUTES } from '../samples/details/routes';
+import { FORM_ROUTES } from '../samples/form/routes';
+import { HANDOUT_ROUTES } from '../samples/handout/routes';
+import { HEADING_ROUTES } from '../samples/heading/routes';
+import { ICON_ROUTES } from '../samples/icon/routes';
+import { INDENTED_ROUTES } from '../samples/indented-text/routes';
+import { INPUT_CHECKBOX_ROUTES } from '../samples/input-checkbox/routes';
+import { INPUT_COLOR_ROUTES } from '../samples/input-color/routes';
+import { INPUT_DATE_ROUTES } from '../samples/input-date/routes';
+import { INPUT_EMAIL_ROUTES } from '../samples/input-email/routes';
+import { INPUT_FILE_ROUTES } from '../samples/input-file/routes';
+import { INPUT_NUMBER_ROUTES } from '../samples/input-number/routes';
+import { INPUT_PASSWORD_ROUTES } from '../samples/input-password/routes';
+import { INPUT_RADIO_ROUTES } from '../samples/input-radio/routes';
+import { INPUT_RANGE_ROUTES } from '../samples/input-range/routes';
+import { INPUT_TEXT_ROUTES } from '../samples/input-text/routes';
+import { LINK_BUTTON_ROUTES } from '../samples/link-button/routes';
+import { LINK_GROUP_ROUTES } from '../samples/link-group/routes';
+import { LINK_ROUTES } from '../samples/link/routes';
+import { NAV_ROUTES } from '../samples/nav/routes';
+import { PAGINATION_ROUTES } from '../samples/pagination/routes';
+import { POPOVER_ROUTES } from '../samples/popover/routes';
+import { PROGRESS_ROUTES } from '../samples/progress/routes';
+import { SELECT_ROUTES } from '../samples/select/routes';
+import { SKIP_NAV_ROUTES } from '../samples/skip-nav/routes';
+import { SPIN_ROUTES } from '../samples/spin/routes';
+import { SPLIT_BUTTON_ROUTES } from '../samples/split-button/routes';
+import { TABLE_ROUTES } from '../samples/table/routes';
+import { TEXTAREA_ROUTES } from '../samples/textarea/routes';
+import { TOAST_ROUTES } from '../samples/toast/routes';
+import { VERSION_ROUTES } from '../samples/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 '../../node_modules/@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: 'itzbund',
+};
+
+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,89 @@
+dl,
+hr {
+	margin: 0;
+}
+
+.w-4rem {
+	width: 4rem;
+}
+
+.w-8rem {
+	width: 8rem;
+}
+
+.w-12rem {
+	width: 12rem;
+}
+
+.grid-cols-2 {
+	grid-template-columns: auto auto;
+}
+
+.toolbar {
+	grid-template-columns: auto 1fr auto 1fr auto;
+	place-items: center;
+}
+
+.toolbar kol-button[_label="Zurück"] {
+	order: 1;
+}
+
+.toolbar dl {
+	order: 2;
+	display: flex;
+	gap: 0.5em;
+	justify-self: start;
+	place-items: center;
+}
+
+.toolbar dd {
+	margin: 0;
+}
+
+.toolbar kol-select {
+	order: 3;
+}
+
+.toolbar kol-button[_label="Weiter"] {
+	order: 4;
+}
+
+@media only screen and (max-width: 1024px) {
+	.toolbar {
+		display: grid;
+		gap: 1rem;
+		grid-template-columns: 1fr 1fr;
+	}
+
+	.toolbar kol-button[_label="Zurück"] {
+		order: 3;
+	}
+
+	.toolbar dl {
+		order: 1;
+	}
+
+	.toolbar kol-select {
+		order: 2;
+	}
+
+	.toolbar kol-button[_label="Weiter"] {
+		order: 4;
+	}
+}
+
+@media only screen and (max-width: 512px) {
+
+	.toolbar dl,
+	.toolbar kol-select {
+		grid-column: span 2;
+	}
+}
+
+@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 { presetMini } from '@unocss/preset-mini';
+
+// ts-prune-ignore-next
+export default defineConfig({
+	presets: [presetMini()],
+});

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;
+};