@public-ui/visual-tests 4.3.0-rc.1 → 4.3.0-rc.3

package/app/public/assets/kolicons/style.css

@@ -0,0 +1,49 @@
+  @font-face {
+    font-family: "kolicons";
+    src: url('kolicons.eot?t=1783496448056'); /* IE9*/
+    src: url('kolicons.eot?t=1783496448056#iefix') format('embedded-opentype'), /* IE6-IE8 */
+    url("kolicons.woff2?t=1783496448056") format("woff2"),
+    url("kolicons.woff?t=1783496448056") format("woff"),
+    url('kolicons.ttf?t=1783496448056') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+    url('kolicons.svg?t=1783496448056#kolicons') format('svg'); /* iOS 4.1- */
+  }
+
+@layer kol-component {
+  [class^="kolicon-"], [class*=" kolicon-"] {
+    font-family: 'kolicons';
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1em;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  .kolicon-alert-error::before { content: "\ea01"; }
+.kolicon-alert-info::before { content: "\ea02"; }
+.kolicon-alert-success::before { content: "\ea03"; }
+.kolicon-alert-warning::before { content: "\ea04"; }
+.kolicon-check::before { content: "\ea05"; }
+.kolicon-chevron-double-left::before { content: "\ea06"; }
+.kolicon-chevron-double-right::before { content: "\ea07"; }
+.kolicon-chevron-down::before { content: "\ea08"; }
+.kolicon-chevron-left::before { content: "\ea09"; }
+.kolicon-chevron-right::before { content: "\ea0a"; }
+.kolicon-chevron-up::before { content: "\ea0b"; }
+.kolicon-cogwheel::before { content: "\ea0c"; }
+.kolicon-cross::before { content: "\ea0d"; }
+.kolicon-eye-closed::before { content: "\ea0e"; }
+.kolicon-eye::before { content: "\ea0f"; }
+.kolicon-house::before { content: "\ea10"; }
+.kolicon-kolibri::before { content: "\ea11"; }
+.kolicon-link-external::before { content: "\ea12"; }
+.kolicon-link::before { content: "\ea13"; }
+.kolicon-minus::before { content: "\ea14"; }
+.kolicon-plus::before { content: "\ea15"; }
+.kolicon-settings::before { content: "\ea16"; }
+.kolicon-sort-asc::before { content: "\ea17"; }
+.kolicon-sort-desc::before { content: "\ea18"; }
+.kolicon-sort-neutral::before { content: "\ea19"; }
+.kolicon-up::before { content: "\ea1a"; }
+.kolicon-version::before { content: "\ea1b"; }
+
+}

package/app/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

package/app/src/@shared/_mixins.scss

@@ -0,0 +1,3 @@
+@function rem($size) {
+	@return calc(#{$size}rem / var(--kolibri-root-font-size, 16));
+}

package/app/src/empty-theme.ts

@@ -0,0 +1,3 @@
+/* Fallback stub for the "@kolibri-vt/theme" alias when no THEME_MODULE is provided (e.g. local
+   debugging via `pnpm serve`). During visual testing the alias resolves to the real theme module. */
+export {};

package/app/src/env.d.ts

@@ -0,0 +1,3 @@
+/* The theme under test is provided at build time through the "@kolibri-vt/theme" Vite alias
+   (see vite.config.ts). It resolves to the THEME_MODULE path, so there is no static type for it. */
+declare module '@kolibri-vt/theme';

package/app/src/main.ts

@@ -0,0 +1,17 @@
+import 'uno.css'; // https://github.com/antfu/unocss
+// App style
+import './style.scss';
+
+/* Optional theme CSS (e.g. font-face declarations). The CLI copies the theme's inject-assets.css
+   into the served build root, so we load it via a normal stylesheet link with a relative URL.
+   A dynamic import of the absolute filesystem path only resolves in the Vite dev server – in the
+   statically served production build it fails and aborts the entry module (blank page). */
+if (process.env.THEME_CSS) {
+	const themeCssLink = document.createElement('link');
+	themeCssLink.rel = 'stylesheet';
+	themeCssLink.href = 'inject-assets.css';
+	document.head.appendChild(themeCssLink);
+}
+
+// App
+import './react.main';

package/app/src/react.main.tsx

@@ -0,0 +1,133 @@
+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 { bootstrap, getDefaultThemeName, KoliBriDevHelper } from '@public-ui/components';
+import { defineCustomElements } from '@public-ui/components/loader';
+import { App, setCustomThemes } from '@public-ui/sample-react';
+
+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');
+
+const tagNameTransformer = (tagName: string) => `${tagName}-sample`;
+if (ENABLE_TAG_NAME_TRANSFORMER) {
+	setTagNameTransformer(tagNameTransformer);
+}
+
+/* Visual regression testing host: the theme is always injected via the THEME_MODULE that the
+   theme package provides (see the `kolibri-visual-test` invocation in each theme's `test` script).
+   This app intentionally never imports a theme package itself – that is what breaks the former
+   circular dependency between the themes, the visual-tests runner and the sample app. */
+const getThemes = async (): Promise<Theme[]> => {
+	if (!process.env.THEME_MODULE) {
+		throw new Error('Environment variable THEME_MODULE not specified. The visual-tests app must be started via "kolibri-visual-test".');
+	}
+	/* The theme under test is bundled at build time through the "@kolibri-vt/theme" alias (see
+	   vite.config.ts), which resolves to the THEME_MODULE path. The theme module depends on
+	   @public-ui/components, so it must be bundled – a runtime import of the absolute filesystem path
+	   would only resolve in the Vite dev server, not in the statically served production build. */
+	const themeModule = (await import('@kolibri-vt/theme')) as Record<string, Theme>;
+	return [themeModule[(process.env.THEME_EXPORT as string) || 'default']];
+};
+
+void (async () => {
+	try {
+		await bootstrap(
+			await getThemes(),
+			() => {
+				// @see https://github.com/ionic-team/stencil/issues/2847
+				defineCustomElements(window, {
+					transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+				} as any);
+			},
+			{
+				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+				reflectInputValues: true,
+				// Feature flags declared by a theme (KoliBri.createTheme's third argument) are stored per
+				// theme. Each component resolves the flag for its active theme (nearest data-theme ancestor
+				// / fixed default), so different themes can differ on the same page. Pass `features` here
+				// only to force a global app-level override that wins over every theme:
+				// features: { inputNumberButtons: 'show' },
+				/* The theme is injected via THEME_MODULE, so auto-detection must stay disabled. */
+				theme: undefined,
+				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,
+			},
+		);
+
+		/**
+		 * 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);
+	}
+
+	/* Derive the theme key from the actually registered default theme name so it matches the
+	   inject-variants JSON file exactly and the variant samples render the injected theme. */
+	const defaultThemeName = getDefaultThemeName();
+	const customThemes = defaultThemeName ? [{ key: defaultThemeName, name: defaultThemeName }] : undefined;
+	setCustomThemes(customThemes);
+
+	const htmlDivElement = document.querySelector('div#app');
+	if (htmlDivElement instanceof HTMLDivElement) {
+		const root = createRoot(htmlDivElement);
+		root.render(
+			<StrictMode>
+				<Router>
+					<App customThemes={customThemes} />
+				</Router>
+			</StrictMode>,
+		);
+	}
+})();

package/app/src/style.scss

@@ -0,0 +1,117 @@
+@use './@shared/mixins' as *;
+
+:root {
+	--kolibri-root-font-size: 100;
+	font-size: 625%;
+}
+
+body {
+	margin: 0;
+
+	font-family: Verdana;
+	font-size: rem(16);
+	line-height: normal;
+}
+
+dl,
+hr {
+	margin: 0;
+}
+
+.grid-cols-2 {
+	grid-template-columns: auto auto;
+}
+
+.indented-text {
+	p {
+		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;
+	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;
+}
+
+.header-alert {
+	margin-bottom: rem(16);
+}
+
+@media (min-width: 1024px) {
+	.app-container {
+		display: grid;
+		height: 100vh;
+		grid-template-columns: rem(360) calc(100% - rem(360));
+	}
+
+	.app-sidebar {
+		background-color: white;
+		max-height: calc(100vh - 32px);
+		border-right: 1px solid gray;
+
+		& .scrollable-container-wrapper {
+			display: flex;
+			max-height: calc(100vh - 32px);
+			flex-direction: column;
+
+			& .scrollable-container {
+				overflow: auto;
+				flex: 1 auto;
+			}
+		}
+	}
+
+	main {
+		max-height: calc(100vh);
+		overflow: auto;
+	}
+}
+
+@media print {
+	.no-print,
+	.no-print * {
+		display: none !important;
+	}
+}
+
+.expert-slot-required-label::after {
+	content: ' *' / '';
+}
+
+.loading-overlay {
+	background-color: rgb(250, 250, 250, 0.4);
+	backdrop-filter: blur(5px);
+	display: flex;
+	position: absolute;
+	inset: 0;
+	z-index: 100;
+	align-items: center;
+	justify-content: center;
+}

package/app/tsconfig.json

@@ -0,0 +1,31 @@
+{
+	"compilerOptions": {
+		"experimentalDecorators": true,
+		"pretty": true,
+		"target": "ESNext",
+		"module": "ESNext",
+		"preserveConstEnums": true,
+		"sourceMap": true,
+		"preserveSymlinks": true,
+		"moduleResolution": "bundler",
+		"lib": ["es2017", "dom"],
+		"typeRoots": ["node_modules/@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": ["**/*.ts", "**/*.tsx"],
+	"exclude": ["node_modules", "dist"]
+}

package/app/unocss.config.ts

@@ -0,0 +1,318 @@
+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))`;
+}
+
+function convertRem(value: number): string {
+	return pxValueToRem(value * 16);
+}
+
+function convertDynamicClassValueToRem(value: string) {
+	return pxValueToRem((Number.parseFloat(value) * 16) / 4);
+}
+
+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$/,
+			() => ({
+				'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
+			}),
+		],
+	],
+	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: {
+				DEFAULT: convertRem(0.25),
+				none: '0',
+				sm: convertRem(0.125),
+				md: convertRem(0.375),
+				lg: convertRem(0.5),
+				xl: convertRem(0.75),
+				'2xl': convertRem(1),
+				'3xl': convertRem(1.5),
+				full: '9999px',
+			},
+			containers: {
+				xs: `(min-width: ${convertRem(20)})`,
+				sm: `(min-width: ${convertRem(24)})`,
+				md: `(min-width: ${convertRem(28)})`,
+				lg: `(min-width: ${convertRem(32)})`,
+				xl: `(min-width: ${convertRem(36)})`,
+				'2xl': `(min-width: ${convertRem(42)})`,
+				'3xl': `(min-width: ${convertRem(48)})`,
+				'4xl': `(min-width: ${convertRem(56)})`,
+				'5xl': `(min-width: ${convertRem(64)})`,
+				'6xl': `(min-width: ${convertRem(72)})`,
+				'7xl': `(min-width: ${convertRem(80)})`,
+				prose: '(min-width: 65ch)',
+			},
+			spacing: {
+				DEFAULT: convertRem(1),
+				none: '0',
+				xs: convertRem(0.75),
+				sm: convertRem(0.875),
+				lg: convertRem(1.125),
+				xl: convertRem(1.25),
+				'2xl': convertRem(1.5),
+				'3xl': convertRem(1.875),
+				'4xl': convertRem(2.25),
+				'5xl': convertRem(3),
+				'6xl': convertRem(3.75),
+				'7xl': convertRem(4.5),
+				'8xl': convertRem(6),
+				'9xl': convertRem(8),
+			},
+			textIndent: {
+				DEFAULT: convertRem(1.5),
+				xs: convertRem(0.5),
+				sm: convertRem(1),
+				md: convertRem(1.5),
+				lg: convertRem(2),
+				xl: convertRem(2.5),
+				'2xl': convertRem(3),
+				'3xl': convertRem(4),
+			},
+			textStrokeWidth: {
+				DEFAULT: convertRem(1.5),
+				none: '0',
+				sm: 'thin',
+				md: 'medium',
+				lg: 'thick',
+			},
+		};
+	},
+	presets: [presetMini()],
+});