@zap-wunschlachen/wl-shared-components 1.0.53 → 1.0.55

package/.github/workflows/playwright.yml

@@ -4,8 +4,32 @@ on:
   workflow_dispatch:
   push:
     branches: [develop]
+    paths:
+      - "src/**"
+      - "tests/**"
+      - ".storybook/**"
+      - "scripts/**"
+      - "public/**"
+      - "package.json"
+      - "package-lock.json"
+      - "playwright.config.ts"
+      - "tsconfig.json"
+      - "vite.config.ts"
+      - ".github/workflows/playwright.yml"
   pull_request:
     branches: [develop]
+    paths:
+      - "src/**"
+      - "tests/**"
+      - ".storybook/**"
+      - "scripts/**"
+      - "public/**"
+      - "package.json"
+      - "package-lock.json"
+      - "playwright.config.ts"
+      - "tsconfig.json"
+      - "vite.config.ts"
+      - ".github/workflows/playwright.yml"
 
 jobs:
   test:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zap-wunschlachen/wl-shared-components",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -18,7 +18,10 @@
     "test:e2e:headed": "playwright test --headed",
     "test:e2e:ui": "playwright test --ui",
     "test:e2e:report": "playwright show-report",
-    "test:e2e:update-snapshots": "playwright test tests/e2e/visual-regression.spec.ts --update-snapshots"
+    "test:e2e:update-snapshots": "playwright test tests/e2e/visual-regression.spec.ts --update-snapshots",
+    "check-translations:local": "npx tsx scripts/check-translations.ts --diff",
+    "check-translations:staging": "npx tsx scripts/check-translations.ts -- --url=https://staging.wunschlachen.app --diff",
+    "check-translations:live": "npx tsx scripts/check-translations.ts -- --url=https://wunschlachen.app --diff"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
@@ -49,7 +52,8 @@
     "vite": "^5.2.0",
     "vitest": "^3.2.4",
     "vue": "^3.5.11",
-    "wait-on": "^8.0.4"
+    "wait-on": "^8.0.4",
+    "tsx": "^4.21.0"
   },
   "dependencies": {
     "@heroicons/vue": "^2.1.5",

package/scripts/check-translations.ts

@@ -0,0 +1,388 @@
+import { promises as fs } from "fs";
+import { join } from "path";
+
+// Parse command line args for --url=<server_url>
+function getServerUrl(): string | undefined {
+  const urlArg = process.argv.find((arg) => arg.startsWith("--url="));
+  return urlArg?.split("=")[1];
+}
+
+// Parse command line args for --local=<path>
+function getLocalPath(): string | undefined {
+  const localArg = process.argv.find((arg) => arg.startsWith("--local="));
+  return localArg?.split("=")[1];
+}
+
+// Parse command line args for --diff[=<path>]
+function getDiffDir(): string | undefined {
+  const diffArg = process.argv.find(
+    (arg) => arg === "--diff" || arg.startsWith("--diff="),
+  );
+  if (!diffArg) {
+    return undefined;
+  }
+  if (diffArg === "--diff") {
+    return "";
+  }
+  return diffArg.slice("--diff=".length);
+}
+
+async function scanFilesForKeys(dir: string): Promise<Set<string>> {
+  const usedKeys = new Set<string>();
+  const keyRegex = /(?<![a-zA-Z])\$?t\(['"]([^'"]+)['"]\)/g;
+
+  async function processDir(currentDir: string) {
+    const entries = await fs.readdir(currentDir, { withFileTypes: true });
+    for (const entry of entries) {
+      const fullPath = join(currentDir, entry.name);
+      if (entry.isDirectory() && !entry.name.startsWith(".")) {
+        await processDir(fullPath);
+      } else if (
+        entry.isFile() &&
+        (entry.name.endsWith(".vue") || entry.name.endsWith(".ts"))
+      ) {
+        const content = await fs.readFile(fullPath, "utf-8");
+        let match;
+        while ((match = keyRegex.exec(content)) !== null) {
+          usedKeys.add(match[1]);
+        }
+      }
+    }
+  }
+
+  await processDir(dir);
+  return usedKeys;
+}
+
+function flattenObject(
+  obj: Record<string, unknown>,
+  prefix = "",
+): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(obj)) {
+    const newKey = prefix ? `${prefix}.${key}` : key;
+
+    if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+      Object.assign(result, flattenObject(value as Record<string, unknown>, newKey));
+    } else {
+      result[newKey] = String(value);
+    }
+  }
+
+  return result;
+}
+
+async function loadTranslationsFromFiles(
+  localesDir: string,
+): Promise<Record<string, Record<string, string>>> {
+  const byLang: Record<string, Record<string, string>> = {};
+
+  console.log(`[i18n] Loading translations from ${localesDir}...`);
+
+  try {
+    const files = await fs.readdir(localesDir);
+    for (const file of files) {
+      if (file.endsWith(".json")) {
+        const language = file.replace(".json", "");
+        const content = await fs.readFile(join(localesDir, file), "utf-8");
+        const parsed = JSON.parse(content);
+        byLang[language] = flattenObject(parsed);
+      }
+    }
+
+    const totalEntries = Object.values(byLang).reduce(
+      (sum, lang) => sum + Object.keys(lang).length,
+      0,
+    );
+    console.log(
+      `[i18n] Loaded ${totalEntries} entries for ${Object.keys(byLang).length} locale(s)`,
+    );
+  } catch (error) {
+    console.error(`[i18n] Could not read translations from ${localesDir}: ${error}`);
+    process.exit(1);
+  }
+
+  return byLang;
+}
+
+async function fetchTranslationsFromDirectus(
+  serverUrl: string,
+): Promise<Record<string, Record<string, string>>> {
+  const byLang: Record<string, Record<string, string>> = {};
+  const url = `${serverUrl}/translations?fields=id,language,key,value&limit=-1&sort=key`;
+
+  console.log(`[i18n] Fetching translations from ${serverUrl}...`);
+
+  try {
+    const res = await fetch(url, {
+      headers: { "Content-Type": "application/json" },
+    });
+
+    if (!res.ok) {
+      throw new Error(`Server returned ${res.status} ${res.statusText}`);
+    }
+
+    const data = await res.json();
+    const entries = data.data || [];
+
+    if (!entries || entries.length === 0) {
+      console.error("[i18n] No translation entries found on server");
+      process.exit(1);
+    }
+
+    entries.forEach(
+      (entry: { language: string; key: string; value: string }) => {
+        const { language, key, value } = entry;
+        if (!byLang[language]) {
+          byLang[language] = {};
+        }
+        byLang[language][key] = value;
+      },
+    );
+
+    console.log(
+      `[i18n] Loaded ${entries.length} entries for ${Object.keys(byLang).length} locale(s)`,
+    );
+  } catch (error) {
+    console.error(`[i18n] Failed to fetch translations: ${error}`);
+    process.exit(1);
+  }
+
+  return byLang;
+}
+
+const DEFAULT_LOCALES_PATH = "src/i18n/locales";
+
+async function checkTranslations() {
+  // Show help
+  if (process.argv.includes("--help") || process.argv.includes("-h")) {
+    console.log(`
+Usage: npx tsx scripts/check-translations.ts [options]
+
+Options:
+  --url=<server_url>    Fetch translations from Directus server
+                        Example: --url=https://api.example.com
+  --local=<path>        Load translations from local JSON files (default: ${DEFAULT_LOCALES_PATH})
+                        Example: --local=./i18n/locales
+  --diff[=<path>]       Write per-locale Directus import JSON for missing keys
+                        Example: --diff=./missing-translations
+
+If --url is not provided, translations are loaded from local files.
+
+Examples:
+  npx tsx scripts/check-translations.ts --url=https://api.example.com
+  npx tsx scripts/check-translations.ts --local=./custom/path
+  npx tsx scripts/check-translations.ts --diff=./missing-translations
+  npx tsx scripts/check-translations.ts --diff
+  npx tsx scripts/check-translations.ts
+`);
+    process.exit(0);
+  }
+
+  const serverUrl = getServerUrl();
+  const localPath = getLocalPath() ?? join(process.cwd(), DEFAULT_LOCALES_PATH);
+  const diffDirArg = getDiffDir();
+  const diffDir =
+    diffDirArg === undefined
+      ? undefined
+      : diffDirArg === ""
+        ? process.cwd()
+        : diffDirArg;
+
+  const srcDir = join(process.cwd(), "src/components");
+
+  console.log("[i18n] Scanning code for translation keys...");
+
+  let usedKeys: Set<string>;
+  try {
+    usedKeys = await scanFilesForKeys(srcDir);
+  } catch {
+    console.error("[i18n] Could not scan for translation keys in code");
+    process.exit(1);
+  }
+
+  if (usedKeys.size === 0) {
+    console.log("[i18n] No translation keys found in code");
+    return;
+  }
+
+  console.log(`[i18n] Found ${usedKeys.size} unique translation keys in code`);
+
+  const byLang = serverUrl
+    ? await fetchTranslationsFromDirectus(serverUrl)
+    : await loadTranslationsFromFiles(localPath);
+
+  if (Object.keys(byLang).length === 0) {
+    console.error("[i18n] No translations found");
+    process.exit(1);
+  }
+
+  let hasMissingKeys = false;
+  const diffEntriesByLocale = new Map<
+    string,
+    Array<{ language: string; key: string; value: string }>
+  >();
+  const diffIndexByLocale = new Map<string, Set<string>>();
+  const source = serverUrl ? "Directus" : "local files";
+
+  // Check each locale for keys used in code but missing from translations
+  for (const [language, translations] of Object.entries(byLang)) {
+    const translationKeys = new Set(Object.keys(translations));
+
+    const missingInTranslations = [...usedKeys]
+      .filter((key) => !translationKeys.has(key))
+      .sort();
+
+    if (missingInTranslations.length > 0) {
+      hasMissingKeys = true;
+      console.warn(
+        `\n[i18n] ⚠️  ${language}: ${missingInTranslations.length} key(s) used in code but missing in ${source}:`,
+      );
+      missingInTranslations.forEach((key) => console.warn(`  - ${key}`));
+      if (diffDir) {
+        missingInTranslations.forEach((key) => {
+          const localeIndex =
+            diffIndexByLocale.get(language) ?? new Set<string>();
+          if (!diffIndexByLocale.has(language)) {
+            diffIndexByLocale.set(language, localeIndex);
+          }
+          if (localeIndex.has(key)) {
+            return;
+          }
+          localeIndex.add(key);
+
+          const localeEntries =
+            diffEntriesByLocale.get(language) ??
+            ([] as Array<{ language: string; key: string; value: string }>);
+          if (!diffEntriesByLocale.has(language)) {
+            diffEntriesByLocale.set(language, localeEntries);
+          }
+          localeEntries.push({
+            language,
+            key,
+            value: "",
+          });
+        });
+      }
+    } else {
+      console.log(
+        `[i18n] ✅ ${language}: All keys used in code exist in ${source}`,
+      );
+    }
+  }
+
+  // Check cross-locale consistency (pairwise, both directions)
+  const locales = Object.keys(byLang);
+  if (locales.length > 1) {
+    for (let i = 0; i < locales.length; i++) {
+      const localeA = locales[i];
+      const keysA = new Set(Object.keys(byLang[localeA]));
+
+      for (let j = i + 1; j < locales.length; j++) {
+        const localeB = locales[j];
+        const keysB = new Set(Object.keys(byLang[localeB]));
+
+        const missingFromA = [...keysB].filter((key) => !keysA.has(key)).sort();
+        if (missingFromA.length > 0) {
+          hasMissingKeys = true;
+          console.warn(
+            `\n[i18n] ⚠️  ${localeA} is missing ${missingFromA.length} key(s) present in ${localeB}:`,
+          );
+          missingFromA.forEach((key) => console.warn(`  - ${key}`));
+          if (diffDir) {
+            missingFromA.forEach((key) => {
+              const localeIndex =
+                diffIndexByLocale.get(localeA) ?? new Set<string>();
+              if (!diffIndexByLocale.has(localeA)) {
+                diffIndexByLocale.set(localeA, localeIndex);
+              }
+              if (localeIndex.has(key)) {
+                return;
+              }
+              localeIndex.add(key);
+
+              const localeEntries =
+                diffEntriesByLocale.get(localeA) ??
+                ([] as Array<{ language: string; key: string; value: string }>);
+              if (!diffEntriesByLocale.has(localeA)) {
+                diffEntriesByLocale.set(localeA, localeEntries);
+              }
+              localeEntries.push({
+                language: localeA,
+                key,
+                value: byLang[localeB][key],
+              });
+            });
+          }
+        }
+
+        const missingFromB = [...keysA].filter((key) => !keysB.has(key)).sort();
+        if (missingFromB.length > 0) {
+          hasMissingKeys = true;
+          console.warn(
+            `\n[i18n] ⚠️  ${localeB} is missing ${missingFromB.length} key(s) present in ${localeA}:`,
+          );
+          missingFromB.forEach((key) => console.warn(`  - ${key}`));
+          if (diffDir) {
+            missingFromB.forEach((key) => {
+              const localeIndex =
+                diffIndexByLocale.get(localeB) ?? new Set<string>();
+              if (!diffIndexByLocale.has(localeB)) {
+                diffIndexByLocale.set(localeB, localeIndex);
+              }
+              if (localeIndex.has(key)) {
+                return;
+              }
+              localeIndex.add(key);
+
+              const localeEntries =
+                diffEntriesByLocale.get(localeB) ??
+                ([] as Array<{ language: string; key: string; value: string }>);
+              if (!diffEntriesByLocale.has(localeB)) {
+                diffEntriesByLocale.set(localeB, localeEntries);
+              }
+              localeEntries.push({
+                language: localeB,
+                key,
+                value: byLang[localeA][key],
+              });
+            });
+          }
+        }
+      }
+    }
+  }
+
+  if (diffDir) {
+    try {
+      await fs.mkdir(diffDir, { recursive: true });
+      let totalEntries = 0;
+      for (const [locale, entries] of diffEntriesByLocale.entries()) {
+        const filePath = join(diffDir, `${locale}-missing.json`);
+        totalEntries += entries.length;
+        await fs.writeFile(filePath, JSON.stringify(entries, null, 2), "utf-8");
+        console.log(`[i18n] Wrote ${entries.length} entry(ies) to ${filePath}`);
+      }
+      if (diffEntriesByLocale.size === 0) {
+        console.log(`[i18n] No missing keys to write in ${diffDir}`);
+      } else {
+        console.log(
+          `[i18n] Wrote ${totalEntries} total entry(ies) across ${diffEntriesByLocale.size} locale file(s)`,
+        );
+      }
+    } catch (error) {
+      console.error(`[i18n] Failed to write diff JSON to ${diffDir}: ${error}`);
+      process.exit(1);
+    }
+  }
+
+  if (hasMissingKeys) {
+    console.log("\n[i18n] ❌ Translation check failed - missing keys found");
+    process.exit(1);
+  } else {
+    console.log(`\n[i18n] ✅ All translation keys are present in ${source}`);
+  }
+}
+
+checkTranslations();

package/src/components/Accordion/Accordion.css

@@ -4,7 +4,6 @@
   flex-direction: column;
   gap: 24px;
   align-items: flex-start;
-  max-width: 1120px;
   padding: 0 16px;
   width: 100%;
 }

package/src/components/DateInput/DateInput.vue

@@ -329,14 +329,14 @@ function onNativeDateChange(e: Event) {
   }
 }
 
-// Computed property to expose isValid
-const isValid = computed(() => inputState.value === 'success');
+// Computed property to expose validity status
+const isDateValid = computed(() => inputState.value === 'success');
 
 defineExpose({
   focus: () => inputRef.value?.focus?.(),
   blur: () => inputRef.value?.blur?.(),
   select: () => inputRef.value?.select?.(),
-  isValid
+  isValid: isDateValid
 })
 </script>