feat: add multi-language support for 20 locales

Add complete i18n infrastructure with 21 supported languages: English, Simplified Chinese, Traditional Chinese, Japanese, Korean, Spanish, French, Italian, Brazilian Portuguese, German, Dutch, Swedish, Russian, Polish, Ukrainian, Arabic (RTL), Turkish, Hindi, Vietnamese, Indonesian, and Thai. - I18nProvider context with three-tier locale detection (user preference > navigator.languages > instance default > English) - ~1500 translation keys per locale with TypeScript-enforced completeness - Dynamic code-splitting: only the active locale is loaded at runtime - Language selectors in footer, login page, settings, and mobile sidebar - Arabic RTL support with CSS logical properties across all components - Tool names, descriptions, and categories translated via i18n helpers - Public API endpoint GET /api/v1/config/locale for instance default - Multi-script font stack (CJK, Arabic, Devanagari, Thai, Cyrillic) - format() and plural() helpers for interpolation and pluralization - API error translation mapping (translateApiError) - 36 Playwright e2e tests verifying all 21 locales load correctly - 25 unit tests for format, plural, locale detection, and completeness - Updated translations.md docs and CLAUDE.md conventions
2026-08-03 07:46:42 +02:00 · 2026-05-15 17:02:49 +08:00
parent 3a82936d93
commit d38621d7b9
141 changed files with 43160 additions and 936 deletions
@@ -0,0 +1,86 @@
+import { en, loadTranslations, SUPPORTED_LOCALES } from "@snapotter/shared";
+import { describe, expect, it } from "vitest";
+
+describe("SUPPORTED_LOCALES", () => {
+  it("has 21 locales including English", () => {
+    expect(SUPPORTED_LOCALES).toHaveLength(21);
+  });
+
+  it("includes English as first entry", () => {
+    expect(SUPPORTED_LOCALES[0].code).toBe("en");
+    expect(SUPPORTED_LOCALES[0].dir).toBe("ltr");
+  });
+
+  it("has Arabic as RTL", () => {
+    const ar = SUPPORTED_LOCALES.find((l) => l.code === "ar");
+    expect(ar).toBeDefined();
+    expect(ar?.dir).toBe("rtl");
+  });
+
+  it("all locales have required fields", () => {
+    for (const locale of SUPPORTED_LOCALES) {
+      expect(locale.code).toBeTruthy();
+      expect(locale.name).toBeTruthy();
+      expect(locale.nativeName).toBeTruthy();
+      expect(["ltr", "rtl"]).toContain(locale.dir);
+    }
+  });
+});
+
+describe("loadTranslations", () => {
+  it("returns English translations for 'en'", async () => {
+    const t = await loadTranslations("en");
+    expect(t.common.upload).toBe("Upload from computer");
+  });
+
+  it("returns English fallback for unsupported locale", async () => {
+    const t = await loadTranslations("xx-XX");
+    expect(t.common.upload).toBe("Upload from computer");
+  });
+});
+
+describe("en translation completeness", () => {
+  it("has all required top-level sections", () => {
+    const sections = Object.keys(en);
+    const required = [
+      "common",
+      "categories",
+      "tools",
+      "toolSettings",
+      "toolPage",
+      "homePage",
+      "fullscreenGrid",
+      "editor",
+      "settings",
+      "auth",
+      "changePassword",
+      "automate",
+      "nav",
+      "files",
+      "dropzone",
+      "reviewPanel",
+      "features",
+      "help",
+      "errors",
+      "analytics",
+      "sidebar",
+      "toolCard",
+      "appLayout",
+    ];
+    for (const key of required) {
+      expect(sections, `missing section: ${key}`).toContain(key);
+    }
+  });
+
+  it("has 25 rotating phrases", () => {
+    expect(en.auth.rotatingPhrases).toHaveLength(25);
+  });
+
+  it("has 30 progress messages", () => {
+    expect(en.features.progressMessages).toHaveLength(30);
+  });
+
+  it("has 8 categories", () => {
+    expect(Object.keys(en.categories)).toHaveLength(8);
+  });
+});