Merge branch 'feature/implementiere-prop-validatoren-fur-entwicklungsmodus' into 8gmzx2-feature/implementiere-prop-validatoren-fur-entwicklungsmodus

deleonio · web-flow · commit 75add689fca4 · 2025-07-21T13:22:34.000+02:00
Signed-off-by: Martin &lt;6279703+deleonio@users.noreply.github.com&gt;
diff --git a/packages/components/src/functional-components/Collapsible/Collapsible.tsx b/packages/components/src/functional-components/Collapsible/Collapsible.tsx
@@ -1,9 +1,9 @@
-import { h } from '@stencil/core';
 import type { FunctionalComponent as FC } from '@stencil/core';
+import { h } from '@stencil/core';
 import type { JSXBase } from '@stencil/core/internal';
 import clsx from 'clsx';
 import { KolButtonWcTag } from '../../core/component-names';
-import type { HeadingLevel, IconsPropType } from '../../schema';
+import type { EventValueOrEventCallback, HeadingLevel, IconsPropType, StencilUnknown } from '../../schema';
 import KolHeadingFc from '../Heading';
 
 type ClassType =
@@ -12,12 +12,13 @@ type ClassType =
 			[className: string]: boolean;
 	  };
 
-export type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id'> & {
+export type CollapsibleProps = Omit<JSXBase.HTMLAttributes<HTMLElement>, 'id' | 'onClick'> & {
 	id: string;
 	open?: boolean;
 	disabled?: boolean;
 	level?: HeadingLevel;
 	label: string;
+	onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown>;
 
 	HeadingProps?: {
 		ref?: ((elm?: HTMLElement | undefined) => void) | undefined;
diff --git a/packages/components/src/functional-components/inputs/_types/index.ts b/packages/components/src/functional-components/inputs/_types/index.ts
@@ -1,4 +1,9 @@
-export type DefaultInputProps<T> = Omit<T, 'title' | 'autoCapitalize' | 'autoCorrect' | 'spellcheck'> & {
+export type DefaultInputProps<T> = Omit<
+	{
+		[K in keyof T as K extends `aria${string}` ? never : K]: T[K]; // `aria${string}` is defined in the Stencil HTML types and colliding with our props, hence we remove it.
+	},
+	'title' | 'autoCapitalize' | 'autoCorrect' | 'spellcheck'
+> & {
 	id: string;
 	ariaDescribedBy?: string[];
 	hideLabel?: boolean;
diff --git a/packages/components/src/global/script.ts b/packages/components/src/global/script.ts
@@ -3,27 +3,29 @@ import { getThemeDetails, setThemeStyle } from 'adopted-style-sheets';
 import { Log } from '../schema';
 import { setMode } from '@stencil/core';
 
-setMode((elm) => {
-	try {
-		if (elm.shadowRoot instanceof ShadowRoot) {
-			setThemeStyle(elm, getThemeDetails(elm));
+export default () => {
+	setMode((elm) => {
+		try {
+			if (elm.shadowRoot instanceof ShadowRoot) {
+				setThemeStyle(elm, getThemeDetails(elm));
+			}
+		} catch (error) {
+			/**
+			 * Try is needed for SSR.
+			 * - no HTMLElement is available
+			 * - no ShadowRoot is available
+			 */
 		}
-	} catch (error) {
-		/**
-		 * Try is needed for SSR.
-		 * - no HTMLElement is available
-		 * - no ShadowRoot is available
-		 */
-	}
-	return 'default';
-});
-
-import('./devtools')
-	.then((devTools) => {
-		if (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {
-			devTools.initialize();
-		}
-	})
-	.catch((error) => {
-		Log.error(error);
+		return 'default';
 	});
+
+	import('./devtools')
+		.then((devTools) => {
+			if (typeof devTools === 'object' && devTools !== null && typeof devTools.initialize === 'function') {
+				devTools.initialize();
+			}
+		})
+		.catch((error) => {
+			Log.error(error);
+		});
+};
diff --git a/packages/components/src/schema/utils/dev.utils.ts b/packages/components/src/schema/utils/dev.utils.ts
@@ -15,9 +15,9 @@ export const setDocument = (value: Document): void => {
 	DOCUMENT = value;
 };
 
-import { runtimeMode } from './reuse';
+import { processEnv } from './reuse';
 
-const DEV_MODE: boolean = runtimeMode !== 'production';
+const DEV_MODE: boolean = processEnv !== 'production';
 let EXPERIMENTAL_MODE: boolean = false;
 let COLOR_CONTRAST_ANALYSIS: boolean = false;
 
diff --git a/packages/components/src/styles/_global.scss b/packages/components/src/styles/_global.scss
@@ -1,5 +1,6 @@
 @use '../components/a11y' as *;
 @use '../components/preset' as *;
+@use '../components/@shared/mixins' as *;
 
 @layer kol-global {
 	:host {
diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
@@ -1,4 +1,4 @@
-import { Log, getDocument, runtimeMode, setColorContrastAnalysis, setExperimentalMode } from '../schema';
+import { Log, getDocument, processEnv, setColorContrastAnalysis, setExperimentalMode } from '../schema';
 
 import { getWindow } from '../schema';
 import { Env } from '@stencil/core';
diff --git a/packages/tools/kolibri-cli/package.json b/packages/tools/kolibri-cli/package.json
@@ -30,8 +30,8 @@
 		"restart": "pnpm reset && pnpm start",
 		"unused": "knip",
 		"watch": "nodemon --ignore package.json src/index.ts migrate --ignore-uncommitted-changes --test-tasks test",
-               "test": "pnpm test:unit",
-               "test:unit": "TS_NODE_PROJECT=tsconfig.test.json mocha --require ts-node/register test/**/*.ts"
+		"test": "pnpm test:unit",
+		"test:unit": "TS_NODE_PROJECT=tsconfig.test.json mocha --require ts-node/register test/**/*.ts"
 	},
 	"type": "commonjs",
 	"dependencies": {
diff --git a/packages/tools/kolibri-cli/src/index.ts b/packages/tools/kolibri-cli/src/index.ts
@@ -31,4 +31,4 @@ generateScss(program);
 info(program);
 migrate(program);
 
-program.parse();
+void program.parseAsync();
diff --git a/packages/tools/kolibri-cli/src/info/index.ts b/packages/tools/kolibri-cli/src/info/index.ts
@@ -8,6 +8,19 @@ import { PackageJson } from '../types';
 // Function to get the binary version
 const getBinaryVersion = (command: string): string => {
 	try {
+		// For yarn, use a temporary directory to prevent package.json modification
+		// Yarn with Corepack automatically adds packageManager field when executed
+		if (command === 'yarn') {
+			const originalCwd = process.cwd();
+			const tmpDir = os.tmpdir();
+			process.chdir(tmpDir);
+			try {
+				return execSync(`${command} --version`, { encoding: 'utf8' }).trim();
+			} finally {
+				process.chdir(originalCwd);
+			}
+		}
+
 		return execSync(`${command} --version`, { encoding: 'utf8' }).trim();
 	} catch {
 		return 'N/A';
diff --git a/packages/tools/kolibri-cli/src/migrate/index.ts b/packages/tools/kolibri-cli/src/migrate/index.ts
@@ -23,6 +23,7 @@ import {
 	MODIFIED_FILES,
 	POST_MESSAGES,
 	setRemoveMode,
+	hasKoliBriTags,
 } from './shares/reuse';
 import { REMOVE_MODE, RemoveMode } from './types';
 
@@ -91,6 +92,13 @@ Target version of @public-ui/*: ${options.overwriteTargetVersion}
 Source folder to migrate: ${baseDir}
 `);
 
+				if (!fs.existsSync(baseDir)) {
+					throw logAndCreateError(`The specified source folder "${baseDir}" does not exist or is inaccessible. Please check the path and try again.`);
+				}
+				if (!hasKoliBriTags(baseDir)) {
+					console.log(chalk.yellow(`No KoliBri components (web or React) found under "${baseDir}". Check the path or your task configuration.`));
+				}
+
 				if (!options.ignoreGreaterVersion && semver.lt(options.overwriteTargetVersion, options.overwriteCurrentVersion)) {
 					throw logAndCreateError(
 						'Your current version of @public-ui/components is greater than the version of @public-ui/kolibri-cli. Please update @public-ui/kolibri-cli or force the migration with --ignore-greater-version.',
@@ -203,6 +211,10 @@ Modified files: ${MODIFIED_FILES.size}`);
 						console.log(`- ${file}`);
 					});
 
+					if (MODIFIED_FILES.size === 0) {
+						console.log(chalk.yellow(`No files were modified. Verify the folder "${baseDir}" or check your .kolibri.config.json tasks.`));
+					}
+
 					if (MODIFIED_FILES.size > 0 && options.format) {
 						console.log(`
 We try to format the modified files with prettier...`);
diff --git a/packages/tools/kolibri-cli/src/migrate/shares/reuse.ts b/packages/tools/kolibri-cli/src/migrate/shares/reuse.ts
@@ -2,7 +2,7 @@ import chalk from 'chalk';
 import fs from 'fs';
 import path from 'path';
 
-import { FileExtension, PackageJson } from '../../types';
+import { FileExtension, PackageJson, MARKUP_EXTENSIONS, WEB_TAG_REGEX, REACT_TAG_REGEX } from '../../types';
 import { RemoveMode } from '../types';
 
 /**
@@ -61,6 +61,45 @@ export function filterFilesByExt(dir: string, ext: FileExtension | FileExtension
 	return files;
 }
 
+/**
+ * Checks if the specified directory contains any files with KoliBri tags.
+ * Files are streamed in chunks to avoid loading entire files into memory.
+ * @param {string} dir The directory to search in
+ * @returns {boolean} True if at least one file contains KoliBri component tags (web or React)
+ */
+export function hasKoliBriTags(dir: string): boolean {
+	const regexes = [WEB_TAG_REGEX, REACT_TAG_REGEX];
+	const files = filterFilesByExt(dir, MARKUP_EXTENSIONS);
+
+	for (const file of files) {
+		let fd: number | undefined;
+		try {
+			fd = fs.openSync(file, 'r');
+			const buffer = Buffer.alloc(65536);
+			let bytesRead: number;
+			let content = '';
+			while ((bytesRead = fs.readSync(fd, buffer, 0, buffer.length, null)) > 0) {
+				content += buffer.toString('utf8', 0, bytesRead);
+				if (regexes.some((regex) => regex.test(content))) {
+					fs.closeSync(fd);
+					return true;
+				}
+				if (content.length > 1024) {
+					content = content.slice(-1024);
+				}
+			}
+		} catch (err) {
+			console.error(`Error reading file ${file}, skipping file due to read error:`, err);
+		} finally {
+			if (fd !== undefined) {
+				fs.closeSync(fd);
+			}
+		}
+	}
+
+	return false;
+}
+
 /**
  * This function is used to get the version of the package.json as string.
  * @param {string} offsetPath The offset path to the package.json
diff --git a/packages/tools/kolibri-cli/src/types.ts b/packages/tools/kolibri-cli/src/types.ts
@@ -5,6 +5,9 @@ export const COMPONENT_FILE_EXTENSIONS: FileExtension[] = ['jsx', 'tsx', 'vue'];
 export const CUSTOM_ELEMENT_FILE_EXTENSIONS: FileExtension[] = ['html', 'xhtml', 'jsx', 'tsx', 'vue'];
 export const MARKUP_EXTENSIONS: FileExtension[] = COMPONENT_FILE_EXTENSIONS.concat(CUSTOM_ELEMENT_FILE_EXTENSIONS);
 
+export const WEB_TAG_REGEX = /\b<kol-[a-z-]+/i;
+export const REACT_TAG_REGEX = /\b<Kol[A-Z][A-Za-z]*/;
+
 export type PackageJson = {
 	name: string;
 	version: string;
diff --git a/packages/tools/kolibri-cli/test/cli-interface.spec.ts b/packages/tools/kolibri-cli/test/cli-interface.spec.ts
diff --git a/packages/tools/visual-tests/src/index.js b/packages/tools/visual-tests/src/index.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Log, getDocument, runtimeMode, setColorContrastAnalysis, setExperimentalMode } from '../schema';`
	`1`	`+import { Log, getDocument, processEnv, setColorContrastAnalysis, setExperimentalMode } from '../schema';`
`2`	`2`
`3`	`3`	`import { getWindow } from '../schema';`
`4`	`4`	`import { Env } from '@stencil/core';`