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

package/src/shares/store.ts

@@ -1,7 +1,7 @@
 import { Option } from '@public-ui/components';
 import PackageJson from '@public-ui/components/package.json';
 
-import { isTheme, Store, ThemeAndUnstyled, THEME_OPTIONS } from './theme';
+import { isTheme, Store, THEME_OPTIONS, ThemeAndUnstyled } from './theme';
 
 const STORE_IDENTIFIER = `public-ui.v${PackageJson.version}`;
 
@@ -44,25 +44,6 @@ 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: ThemeAndUnstyled) => {
 	if (isTheme(theme)) {
 		STORE.theme = theme;

package/src/shares/theme.ts

@@ -1,12 +1,12 @@
 import { SelectOption } from '@public-ui/components';
 
-export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'itzbund', 'unstyled'] as const;
+export const THEMES = ['default', 'ecl-ec', 'ecl-eu', 'unstyled'] as const;
 export type Theme = (typeof THEMES)[number];
 export type ThemeAndUnstyled = Theme | 'unstyled';
 
-const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu', 'itzbund'];
+// const drafts: ThemeAndUnstyled[] = ['ecl-ec', 'ecl-eu'];
 
-export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
+// export const isDraftTheme = (theme: ThemeAndUnstyled) => drafts.includes(theme);
 
 export const isTheme = (value: unknown) => {
 	return THEMES.find((theme) => theme === value) !== undefined;
@@ -27,15 +27,11 @@ export const THEME_OPTIONS: SelectOption<ThemeAndUnstyled>[] = [
 		value: 'default',
 	},
 	{
-		label: 'European Commission (Draft)',
+		label: 'European Commission (in progress)',
 		value: 'ecl-ec',
 	},
 	{
-		label: 'European Union (Draft)',
+		label: 'European Union (in progress)',
 		value: 'ecl-eu',
 	},
-	{
-		label: 'Informationstechnikzentrum Bund (Draft)',
-		value: 'itzbund',
-	},
 ];

package/src/style.scss

@@ -1,4 +1,4 @@
-@import './@shared/mixins';
+@use './@shared/mixins' as *;
 
 :root {
 	--kolibri-root-font-size: 100;
@@ -7,6 +7,7 @@
 
 body {
 	margin: 0;
+
 	font-family: Verdana;
 	font-size: rem(16);
 	line-height: normal;
@@ -23,54 +24,75 @@ hr {
 
 .indented-text {
 	p {
-		font-family: var(--font-family);
-		border-left: rem(-2) solid var(--color-primary-variant);
-		padding: 0 calc(8rem / var(--kolibri-root-font-size, 16));
-		margin-left: rem(-2);
+		margin: 0;
 	}
 }
 
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+
+	white-space: nowrap;
+	clip-path: inset(50%);
+}
+
 .black-background {
 	background-color: black;
 	display: flex;
-	flex-direction: column;
 	padding: rem(8);
+	flex-direction: column;
+}
+
+.w-image {
+	width: 500px;
+}
+
+.drawer-content-vertical {
+	width: rem(400);
+}
+
+/* Remove bullet points from horizontal link lists */
+.list-none {
+	margin: 0;
+	padding: 0;
+	list-style: none;
 }
 
 @media (min-width: 1024px) {
 	.app-container {
 		display: grid;
+		height: 100vh;
 		grid-template-columns: rem(360) calc(100% - rem(360));
-		min-height: 100vh;
-		height: 100%;
 	}
 
 	.app-sidebar {
-		border-right: rem(1) solid gray;
-		position: relative;
+		background-color: white;
+		max-height: calc(100vh - 32px);
+		border-right: 1px solid gray;
 
 		& .scrollable-container-wrapper {
-			position: fixed;
-			top: 0;
-			bottom: 0;
-			left: 0;
-			width: rem(330);
-			margin: rem(16);
-			flex-direction: column;
 			display: flex;
+			max-height: calc(100vh - 32px);
+			flex-direction: column;
 
 			& .scrollable-container {
-				flex: 1 auto;
 				overflow: auto;
+				flex: 1 auto;
 			}
 		}
 	}
+
+	main {
+		max-height: calc(100vh);
+		overflow: auto;
+	}
 }
 
 @media print {
-
 	.no-print,
 	.no-print * {
 		display: none !important;
 	}
-}
+}

package/tsconfig.json

@@ -26,5 +26,6 @@
 		"jsxFactory": "React.createElement",
 		"jsxFragmentFactory": "React.Fragment"
 	},
-	"include": ["src/**/*", "e2e/**/*"]
+	"include": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules", "dist"]
 }

package/unocss.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from '@unocss/webpack';
-import { presetUno } from '@unocss/preset-uno';
+import { presetMini } from '@unocss/preset-mini';
+import { defineConfig } from '@unocss/vite';
 
 function pxValueToRem(size: number): string {
 	return `calc(${size}rem / var(--kolibri-root-font-size, 16))`;
@@ -10,153 +10,251 @@ function convertRem(value: number): string {
 }
 
 function convertDynamicClassValueToRem(value: string) {
-	return pxValueToRem(Number.parseFloat(value) * 16 / 4);
+	return pxValueToRem((Number.parseFloat(value) * 16) / 4);
 }
 
-// ts-prune-ignore-next
 export default defineConfig({
 	rules: [
-		[/^p-(\d+)$/, ([, d]) => ({ 
-			padding: convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^px-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d),
-			'padding-right': convertDynamicClassValueToRem(d)  
-		})],
-		[/^py-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d),
-			'padding-bottom': convertDynamicClassValueToRem(d)  
-		})],
-
-		[/^ps-(\d+)$/, ([, d]) => ({ 
-			'padding-inline-start': convertDynamicClassValueToRem(d) 
-		})],
-		[/^pe-(\d+)$/, ([, d]) => ({ 
-			'padding-inline-end': convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^pt-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d) 
-		})],
-		[/^pl-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d) 
-		})],
-		[/^pr-(\d+)$/, ([, d]) => ({ 
-			'padding-right': convertDynamicClassValueToRem(d) 
-		})],
-		[/^pb-(\d+)$/, ([, d]) => ({ 
-			'padding-bottom': convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^p-t-(\d+)$/, ([, d]) => ({ 
-			'padding-top': convertDynamicClassValueToRem(d) 
-		})],
-		[/^p-l-(\d+)$/, ([, d]) => ({ 
-			'padding-left': convertDynamicClassValueToRem(d) 
-		})],
-		[/^p-r-(\d+)$/, ([, d]) => ({ 
-			'padding-right': convertDynamicClassValueToRem(d) 
-		})],
-		[/^p-b-(\d+)$/, ([, d]) => ({ 
-			'padding-bottom': convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^m-(\d+)$/, ([, d]) => ({ 
-			margin: convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^mx-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d),
-			'margin-right': convertDynamicClassValueToRem(d)  
-		})],
-		[/^my-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d),
-			'margin-bottom': convertDynamicClassValueToRem(d)  
-		})],
-
-		[/^ms-(\d+)$/, ([, d]) => ({ 
-			'margin-inline-start': convertDynamicClassValueToRem(d) 
-		})],
-		[/^me-(\d+)$/, ([, d]) => ({ 
-			'margin-inline-end': convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^mt$/, ([, d]) => ({ 
-			'margin-top': pxValueToRem(16) 
-		})],
-		[/^ml$/, ([, d]) => ({ 
-			'margin-left': pxValueToRem(16) 
-		})],
-		[/^mr$/, ([, d]) => ({ 
-			'margin-right': pxValueToRem(16) 
-		})],
-		[/^mb$/, ([, d]) => ({ 
-			'margin-bottom': pxValueToRem(16) 
-		})],
-
-		[/^mt-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d) 
-		})],
-		[/^ml-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d) 
-		})],
-		[/^mr-(\d+)$/, ([, d]) => ({ 
-			'margin-right': convertDynamicClassValueToRem(d) 
-		})],
-		[/^mb-(\d+)$/, ([, d]) => ({ 
-			'margin-bottom': convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^m-t-(\d+)$/, ([, d]) => ({ 
-			'margin-top': convertDynamicClassValueToRem(d) 
-		})],
-		[/^m-l-(\d+)$/, ([, d]) => ({ 
-			'margin-left': convertDynamicClassValueToRem(d) 
-		})],
-		[/^m-r-(\d+)$/, ([, d]) => ({ 
-			'margin-right': convertDynamicClassValueToRem(d) 
-		})],
-		[/^m-b-(\d+)$/, ([, d]) => ({ 
-			'margin-bottom': convertDynamicClassValueToRem(d) 
-		})],
-
-		[/^mb-sm$/, ([, d]) => ({ 
-			'margin-bottom': pxValueToRem(14) 
-		})],
+		[
+			/^p-(\d+)$/,
+			([, d]) => ({
+				padding: convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^px-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^py-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^ps-(\d+)$/,
+			([, d]) => ({
+				'padding-inline-start': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pe-(\d+)$/,
+			([, d]) => ({
+				'padding-inline-end': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^pt-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pl-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pr-(\d+)$/,
+			([, d]) => ({
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^pb-(\d+)$/,
+			([, d]) => ({
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^p-t-(\d+)$/,
+			([, d]) => ({
+				'padding-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-l-(\d+)$/,
+			([, d]) => ({
+				'padding-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-r-(\d+)$/,
+			([, d]) => ({
+				'padding-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^p-b-(\d+)$/,
+			([, d]) => ({
+				'padding-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^m-(\d+)$/,
+			([, d]) => ({
+				margin: convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mx-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^my-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^ms-(\d+)$/,
+			([, d]) => ({
+				'margin-inline-start': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^me-(\d+)$/,
+			([, d]) => ({
+				'margin-inline-end': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mt$/,
+			() => ({
+				'margin-top': pxValueToRem(16),
+			}),
+		],
+		[
+			/^ml$/,
+			() => ({
+				'margin-left': pxValueToRem(16),
+			}),
+		],
+		[
+			/^mr$/,
+			() => ({
+				'margin-right': pxValueToRem(16),
+			}),
+		],
+		[
+			/^mb$/,
+			() => ({
+				'margin-bottom': pxValueToRem(16),
+			}),
+		],
+
+		[
+			/^mt-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^ml-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^mr-(\d+)$/,
+			([, d]) => ({
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^mb-(\d+)$/,
+			([, d]) => ({
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^m-t-(\d+)$/,
+			([, d]) => ({
+				'margin-top': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-l-(\d+)$/,
+			([, d]) => ({
+				'margin-left': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-r-(\d+)$/,
+			([, d]) => ({
+				'margin-right': convertDynamicClassValueToRem(d),
+			}),
+		],
+		[
+			/^m-b-(\d+)$/,
+			([, d]) => ({
+				'margin-bottom': convertDynamicClassValueToRem(d),
+			}),
+		],
+
+		[
+			/^mb-sm$/,
+			() => ({
+				'margin-bottom': pxValueToRem(14),
+			}),
+		],
 
 		[/^gap-(\d+)$/, ([, d]) => ({ gap: convertDynamicClassValueToRem(d) })],
 		[/^gap-x-(\d+)$/, ([, d]) => ({ 'column-gap': convertDynamicClassValueToRem(d) })],
 		[/^gap-y-(\d+)$/, ([, d]) => ({ 'row-gap': convertDynamicClassValueToRem(d) })],
-	
-		[/^w-(\d+)rem$/, ([, d]) => ({ 
-			width: pxValueToRem(Number.parseInt(d) * 16) 
-		})],
-
-		[/^w-sm$/, () => ({ 
-			width: pxValueToRem(24 * 16) // 24rem
-		})],
+
+		[
+			/^w-(\d+)rem$/,
+			([, d]) => ({
+				width: pxValueToRem(Number.parseInt(d) * 16),
+			}),
+		],
+
+		[
+			/^w-sm$/,
+			() => ({
+				width: pxValueToRem(24 * 16), // 24rem
+			}),
+		],
 	],
-	extendTheme: (theme: any) => { 
+	extendTheme: (theme: any) => {
 		return {
 			...theme,
 			fontSize: {
-				xs: [ convertRem(0.75), '1' ],
-				sm: [ convertRem(0.875), '1.25' ],
-				base: [ convertRem(1), '1.5' ],
-				lg: [ convertRem(1.125), '1.75' ],
-				xl: [ convertRem(1.25), '1.75' ],
-				'2xl': [ convertRem(1.5), '2' ],
-				'3xl': [ convertRem(1.875), '2.25' ],
-				'4xl': [ convertRem(2.25), '2.5' ],
-				'5xl': [ convertRem(3), '1' ],
-				'6xl': [ convertRem(3.75), '1' ],
-				'7xl': [ convertRem(4.5), '1' ],
-				'8xl': [ convertRem(6), '1' ],
-				'9xl': [ convertRem(8), '1' ],
-				'kol-test': ['625%', '1']
-			  },
-			  borderRadius: {
+				xs: [convertRem(0.75), '1'],
+				sm: [convertRem(0.875), '1.25'],
+				base: [convertRem(1), '1.5'],
+				lg: [convertRem(1.125), '1.75'],
+				xl: [convertRem(1.25), '1.75'],
+				'2xl': [convertRem(1.5), '2'],
+				'3xl': [convertRem(1.875), '2.25'],
+				'4xl': [convertRem(2.25), '2.5'],
+				'5xl': [convertRem(3), '1'],
+				'6xl': [convertRem(3.75), '1'],
+				'7xl': [convertRem(4.5), '1'],
+				'8xl': [convertRem(6), '1'],
+				'9xl': [convertRem(8), '1'],
+				'kol-test': ['625%', '1'],
+			},
+			borderRadius: {
 				DEFAULT: convertRem(0.25),
 				none: '0',
 				sm: convertRem(0.125),
@@ -165,9 +263,9 @@ export default defineConfig({
 				xl: convertRem(0.75),
 				'2xl': convertRem(1),
 				'3xl': convertRem(1.5),
-				full: '9999px'
-			  },
-			  containers: {
+				full: '9999px',
+			},
+			containers: {
 				xs: `(min-width: ${convertRem(20)})`,
 				sm: `(min-width: ${convertRem(24)})`,
 				md: `(min-width: ${convertRem(28)})`,
@@ -179,9 +277,9 @@ export default defineConfig({
 				'5xl': `(min-width: ${convertRem(64)})`,
 				'6xl': `(min-width: ${convertRem(72)})`,
 				'7xl': `(min-width: ${convertRem(80)})`,
-				prose: '(min-width: 65ch)'
-			  },
-			  spacing: {
+				prose: '(min-width: 65ch)',
+			},
+			spacing: {
 				DEFAULT: convertRem(1),
 				none: '0',
 				xs: convertRem(0.75),
@@ -195,9 +293,9 @@ export default defineConfig({
 				'6xl': convertRem(3.75),
 				'7xl': convertRem(4.5),
 				'8xl': convertRem(6),
-				'9xl': convertRem(8)
-			  },
-			  textIndent: {
+				'9xl': convertRem(8),
+			},
+			textIndent: {
 				DEFAULT: convertRem(1.5),
 				xs: convertRem(0.5),
 				sm: convertRem(1),
@@ -205,16 +303,16 @@ export default defineConfig({
 				lg: convertRem(2),
 				xl: convertRem(2.5),
 				'2xl': convertRem(3),
-				'3xl': convertRem(4)
-			  },
-			  textStrokeWidth: {
+				'3xl': convertRem(4),
+			},
+			textStrokeWidth: {
 				DEFAULT: convertRem(1.5),
 				none: '0',
 				sm: 'thin',
 				md: 'medium',
-				lg: 'thick'
-			  },
-		}
+				lg: 'thick',
+			},
+		};
 	},
-	presets: [presetUno()],
+	presets: [presetMini()],
 });

package/vite.config.ts

@@ -0,0 +1,42 @@
+import UnoCSS from '@unocss/vite';
+import react from '@vitejs/plugin-react-swc';
+import { execSync } from 'node:child_process';
+import path from 'path';
+import process from 'process';
+import { defineConfig } from 'vite';
+
+function getGitCommitHash(): string | null {
+	try {
+		return execSync('git rev-parse --short HEAD 2>/dev/null').toString().trim();
+	} catch {
+		return null;
+	}
+}
+
+export default defineConfig({
+	plugins: [react(), UnoCSS()],
+	define: {
+		'process.env.THEME_MODULE': JSON.stringify(process.env.THEME_MODULE || ''),
+		'process.env.THEME_EXPORT': JSON.stringify(process.env.THEME_EXPORT || ''),
+		'process.env.THEME_CSS': JSON.stringify(process.env.THEME_CSS || ''),
+		'process.env.ENABLE_I18N_OVERWRITING': JSON.stringify(process.env.ENABLE_I18N_OVERWRITING || ''),
+		'process.env.ENABLE_TAG_NAME_TRANSFORMER': JSON.stringify(process.env.ENABLE_TAG_NAME_TRANSFORMER || ''),
+		'process.env.ENABLE_THEME_PATCHING': JSON.stringify(process.env.ENABLE_THEME_PATCHING || ''),
+		'process.env.BUILD_DATE': JSON.stringify(new Date().toISOString()),
+		'process.env.COMMIT_HASH': JSON.stringify(getGitCommitHash()),
+		'process.env.PLATFORM': JSON.stringify(process.platform),
+	},
+	build: {
+		sourcemap: true,
+	},
+	server: {
+		port: parseInt(process.env.KOLIBRI_VISUAL_TEST_PORT || '9191', 10),
+		fs: {
+			allow: [
+				path.resolve(__dirname),
+				...(process.env.THEME_MODULE ? [path.resolve(process.env.THEME_MODULE)] : []),
+				...(process.env.THEME_CSS ? [path.resolve(process.env.THEME_CSS, '..')] : []),
+			],
+		},
+	},
+});