@codaijs/keel 0.2.2 → 0.2.4

package/sails/i18n/README.md

@@ -1,193 +1,193 @@
-# Internationalization (i18n) Sail
-
-Adds multi-language support to your keel application using i18next, react-i18next, and automatic browser language detection.
-
-## Features
-
-- i18next translation framework
-- react-i18next for seamless React integration
-- Automatic browser language detection (via `i18next-browser-languagedetector`)
-- Language switcher dropdown component (dark Keel theme)
-- Translation files for English, German, French, and Spanish
-- Language preference persisted in localStorage
-
-## Installation
-
-```bash
-npx tsx sails/i18n/install.ts
-```
-
-The installer will prompt you to select which languages to include and will configure everything automatically.
-
-## Usage
-
-### Using Translations in Components
-
-```tsx
-import { useTranslation } from "react-i18next";
-
-function MyComponent() {
-  const { t } = useTranslation();
-
-  return (
-    <div>
-      <h1>{t("nav.home")}</h1>
-      <p>{t("common.loading")}</p>
-      <button>{t("common.save")}</button>
-    </div>
-  );
-}
-```
-
-### Using the Language Hook
-
-```tsx
-import { useLanguage } from "@/hooks/useLanguage";
-
-function SettingsPage() {
-  const { currentLanguage, changeLanguage, availableLanguages } = useLanguage();
-
-  return (
-    <select
-      value={currentLanguage}
-      onChange={(e) => changeLanguage(e.target.value)}
-    >
-      {availableLanguages.map((lang) => (
-        <option key={lang.code} value={lang.code}>
-          {lang.label}
-        </option>
-      ))}
-    </select>
-  );
-}
-```
-
-### Translation Keys with Interpolation
-
-```json
-{
-  "greeting": "Hello, {{name}}!"
-}
-```
-
-```tsx
-t("greeting", { name: user.name })
-```
-
-### Pluralization
-
-```json
-{
-  "items_one": "{{count}} item",
-  "items_other": "{{count}} items"
-}
-```
-
-```tsx
-t("items", { count: 5 })  // "5 items"
-t("items", { count: 1 })  // "1 item"
-```
-
-## Adding a New Language
-
-1. Create the locale file:
-
-```bash
-mkdir -p packages/frontend/src/locales/ja
-```
-
-2. Create `packages/frontend/src/locales/ja/common.json` with all translation keys (copy from `en/common.json` as a template).
-
-3. Update `packages/frontend/src/lib/i18n.ts`:
-
-```ts
-import jaCommon from "@/locales/ja/common.json";
-
-const resources = {
-  en: { common: enCommon },
-  de: { common: deCommon },
-  ja: { common: jaCommon },  // Add this
-};
-```
-
-4. Update `packages/frontend/src/hooks/useLanguage.ts`:
-
-```ts
-const availableLanguages: Language[] = [
-  { code: "en", label: "English" },
-  { code: "de", label: "Deutsch" },
-  { code: "ja", label: "Japanese" },  // Add this
-];
-```
-
-## Adding New Translation Namespaces
-
-For larger applications, split translations into namespaces (e.g., per page):
-
-1. Create `packages/frontend/src/locales/en/dashboard.json`
-2. Import in `i18n.ts` and add to resources:
-
-```ts
-import enDashboard from "@/locales/en/dashboard.json";
-
-const resources = {
-  en: { common: enCommon, dashboard: enDashboard },
-  // ...
-};
-```
-
-3. Update the `ns` array in `i18n.init()`:
-
-```ts
-ns: ["common", "dashboard"],
-```
-
-4. Use in components:
-
-```tsx
-const { t } = useTranslation("dashboard");
-return <h1>{t("title")}</h1>;
-```
-
-## Language Detection
-
-The language detector checks in this order:
-
-1. `localStorage` key `i18nextLng`
-2. Browser navigator language
-3. HTML `lang` attribute
-
-The selected language is automatically persisted to `localStorage`.
-
-## Architecture
-
-| File | Purpose |
-|------|---------|
-| `src/lib/i18n.ts` | i18next initialization and configuration |
-| `src/locales/<lang>/common.json` | Translation strings per language |
-| `src/hooks/useLanguage.ts` | Hook for language switching |
-| `src/components/LanguageSwitcher.tsx` | Dropdown UI component |
-
-## Configuration
-
-### Changing the Default Language
-
-Edit `src/lib/i18n.ts`:
-
-```ts
-fallbackLng: "de",  // Change from "en" to desired default
-```
-
-### Disabling Language Detection
-
-Remove the `LanguageDetector` plugin from `i18n.ts`:
-
-```ts
-i18n
-  // .use(LanguageDetector)  // Remove this line
-  .use(initReactI18next)
-  .init({
-    lng: "en",  // Set a fixed language
-    // ...
-  });
-```
+# Internationalization (i18n) Sail
+
+Adds multi-language support to your keel application using i18next, react-i18next, and automatic browser language detection.
+
+## Features
+
+- i18next translation framework
+- react-i18next for seamless React integration
+- Automatic browser language detection (via `i18next-browser-languagedetector`)
+- Language switcher dropdown component (dark Keel theme)
+- Translation files for English, German, French, and Spanish
+- Language preference persisted in localStorage
+
+## Installation
+
+```bash
+npx tsx sails/i18n/install.ts
+```
+
+The installer will prompt you to select which languages to include and will configure everything automatically.
+
+## Usage
+
+### Using Translations in Components
+
+```tsx
+import { useTranslation } from "react-i18next";
+
+function MyComponent() {
+  const { t } = useTranslation();
+
+  return (
+    <div>
+      <h1>{t("nav.home")}</h1>
+      <p>{t("common.loading")}</p>
+      <button>{t("common.save")}</button>
+    </div>
+  );
+}
+```
+
+### Using the Language Hook
+
+```tsx
+import { useLanguage } from "@/hooks/useLanguage";
+
+function SettingsPage() {
+  const { currentLanguage, changeLanguage, availableLanguages } = useLanguage();
+
+  return (
+    <select
+      value={currentLanguage}
+      onChange={(e) => changeLanguage(e.target.value)}
+    >
+      {availableLanguages.map((lang) => (
+        <option key={lang.code} value={lang.code}>
+          {lang.label}
+        </option>
+      ))}
+    </select>
+  );
+}
+```
+
+### Translation Keys with Interpolation
+
+```json
+{
+  "greeting": "Hello, {{name}}!"
+}
+```
+
+```tsx
+t("greeting", { name: user.name })
+```
+
+### Pluralization
+
+```json
+{
+  "items_one": "{{count}} item",
+  "items_other": "{{count}} items"
+}
+```
+
+```tsx
+t("items", { count: 5 })  // "5 items"
+t("items", { count: 1 })  // "1 item"
+```
+
+## Adding a New Language
+
+1. Create the locale file:
+
+```bash
+mkdir -p packages/frontend/src/locales/ja
+```
+
+2. Create `packages/frontend/src/locales/ja/common.json` with all translation keys (copy from `en/common.json` as a template).
+
+3. Update `packages/frontend/src/lib/i18n.ts`:
+
+```ts
+import jaCommon from "@/locales/ja/common.json";
+
+const resources = {
+  en: { common: enCommon },
+  de: { common: deCommon },
+  ja: { common: jaCommon },  // Add this
+};
+```
+
+4. Update `packages/frontend/src/hooks/useLanguage.ts`:
+
+```ts
+const availableLanguages: Language[] = [
+  { code: "en", label: "English" },
+  { code: "de", label: "Deutsch" },
+  { code: "ja", label: "Japanese" },  // Add this
+];
+```
+
+## Adding New Translation Namespaces
+
+For larger applications, split translations into namespaces (e.g., per page):
+
+1. Create `packages/frontend/src/locales/en/dashboard.json`
+2. Import in `i18n.ts` and add to resources:
+
+```ts
+import enDashboard from "@/locales/en/dashboard.json";
+
+const resources = {
+  en: { common: enCommon, dashboard: enDashboard },
+  // ...
+};
+```
+
+3. Update the `ns` array in `i18n.init()`:
+
+```ts
+ns: ["common", "dashboard"],
+```
+
+4. Use in components:
+
+```tsx
+const { t } = useTranslation("dashboard");
+return <h1>{t("title")}</h1>;
+```
+
+## Language Detection
+
+The language detector checks in this order:
+
+1. `localStorage` key `i18nextLng`
+2. Browser navigator language
+3. HTML `lang` attribute
+
+The selected language is automatically persisted to `localStorage`.
+
+## Architecture
+
+| File | Purpose |
+|------|---------|
+| `src/lib/i18n.ts` | i18next initialization and configuration |
+| `src/locales/<lang>/common.json` | Translation strings per language |
+| `src/hooks/useLanguage.ts` | Hook for language switching |
+| `src/components/LanguageSwitcher.tsx` | Dropdown UI component |
+
+## Configuration
+
+### Changing the Default Language
+
+Edit `src/lib/i18n.ts`:
+
+```ts
+fallbackLng: "de",  // Change from "en" to desired default
+```
+
+### Disabling Language Detection
+
+Remove the `LanguageDetector` plugin from `i18n.ts`:
+
+```ts
+i18n
+  // .use(LanguageDetector)  // Remove this line
+  .use(initReactI18next)
+  .init({
+    lng: "en",  // Set a fixed language
+    // ...
+  });
+```

package/sails/i18n/addon.json

@@ -1,30 +1,30 @@
-{
-  "name": "i18n",
-  "displayName": "Internationalization (i18n)",
-  "description": "Multi-language support with i18next, react-i18next, and automatic language detection",
-  "version": "1.0.0",
-  "compatibility": ">=1.0.0",
-  "requiredEnvVars": [],
-  "dependencies": {
-    "backend": {},
-    "frontend": {
-      "i18next": "^24.0.0",
-      "react-i18next": "^15.0.0",
-      "i18next-browser-languagedetector": "^8.0.0"
-    }
-  },
-  "modifies": {
-    "backend": [],
-    "frontend": ["src/main.tsx", "src/components/layout/Header.tsx"]
-  },
-  "adds": {
-    "backend": [],
-    "frontend": [
-      "src/lib/i18n.ts",
-      "src/locales/en/common.json",
-      "src/locales/de/common.json",
-      "src/hooks/useLanguage.ts",
-      "src/components/LanguageSwitcher.tsx"
-    ]
-  }
-}
+{
+  "name": "i18n",
+  "displayName": "Internationalization (i18n)",
+  "description": "Multi-language support with i18next, react-i18next, and automatic language detection",
+  "version": "1.0.0",
+  "compatibility": ">=1.0.0",
+  "requiredEnvVars": [],
+  "dependencies": {
+    "backend": {},
+    "frontend": {
+      "i18next": "^24.0.0",
+      "react-i18next": "^15.0.0",
+      "i18next-browser-languagedetector": "^8.0.0"
+    }
+  },
+  "modifies": {
+    "backend": [],
+    "frontend": ["src/main.tsx", "src/components/layout/Header.tsx"]
+  },
+  "adds": {
+    "backend": [],
+    "frontend": [
+      "src/lib/i18n.ts",
+      "src/locales/en/common.json",
+      "src/locales/de/common.json",
+      "src/hooks/useLanguage.ts",
+      "src/components/LanguageSwitcher.tsx"
+    ]
+  }
+}

package/sails/i18n/files/frontend/components/LanguageSwitcher.tsx

@@ -1,108 +1,108 @@
-import { useState, useRef, useEffect } from "react";
-import { useLanguage } from "@/hooks/useLanguage.js";
-
-export default function LanguageSwitcher() {
-  const { currentLanguage, changeLanguage, availableLanguages } = useLanguage();
-  const [isOpen, setIsOpen] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const currentLabel =
-    availableLanguages.find((l) => l.code === currentLanguage)?.label ??
-    currentLanguage.toUpperCase();
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-      }
-    }
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-
-  return (
-    <div ref={containerRef} className="relative">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1.5 rounded-lg border border-keel-gray-800 px-2.5 py-1.5 text-sm font-medium text-keel-gray-400 transition-colors hover:border-keel-gray-400 hover:text-white"
-        aria-label="Switch language"
-      >
-        <svg
-          className="h-4 w-4"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>{currentLanguage.toUpperCase()}</span>
-        <svg
-          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke="currentColor"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 9l-7 7-7-7"
-          />
-        </svg>
-      </button>
-
-      {isOpen && (
-        <div className="absolute right-0 z-20 mt-1.5 w-40 rounded-lg border border-keel-gray-800 bg-keel-gray-900 py-1 shadow-lg">
-          {availableLanguages.map((lang) => (
-            <button
-              key={lang.code}
-              onClick={() => {
-                changeLanguage(lang.code);
-                setIsOpen(false);
-              }}
-              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-keel-gray-800 ${
-                currentLanguage === lang.code
-                  ? "font-medium text-keel-blue"
-                  : "text-keel-gray-100"
-              }`}
-            >
-              <span className="w-6 text-center text-xs uppercase text-keel-gray-400">
-                {lang.code}
-              </span>
-              <span>{lang.label}</span>
-              {currentLanguage === lang.code && (
-                <svg
-                  className="ml-auto h-4 w-4 text-keel-blue"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 13l4 4L19 7"
-                  />
-                </svg>
-              )}
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
+import { useState, useRef, useEffect } from "react";
+import { useLanguage } from "@/hooks/useLanguage.js";
+
+export default function LanguageSwitcher() {
+  const { currentLanguage, changeLanguage, availableLanguages } = useLanguage();
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const currentLabel =
+    availableLanguages.find((l) => l.code === currentLanguage)?.label ??
+    currentLanguage.toUpperCase();
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-1.5 rounded-lg border border-keel-gray-800 px-2.5 py-1.5 text-sm font-medium text-keel-gray-400 transition-colors hover:border-keel-gray-400 hover:text-white"
+        aria-label="Switch language"
+      >
+        <svg
+          className="h-4 w-4"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span>{currentLanguage.toUpperCase()}</span>
+        <svg
+          className={`h-3 w-3 transition-transform ${isOpen ? "rotate-180" : ""}`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div className="absolute right-0 z-20 mt-1.5 w-40 rounded-lg border border-keel-gray-800 bg-keel-gray-900 py-1 shadow-lg">
+          {availableLanguages.map((lang) => (
+            <button
+              key={lang.code}
+              onClick={() => {
+                changeLanguage(lang.code);
+                setIsOpen(false);
+              }}
+              className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-keel-gray-800 ${
+                currentLanguage === lang.code
+                  ? "font-medium text-keel-blue"
+                  : "text-keel-gray-100"
+              }`}
+            >
+              <span className="w-6 text-center text-xs uppercase text-keel-gray-400">
+                {lang.code}
+              </span>
+              <span>{lang.label}</span>
+              {currentLanguage === lang.code && (
+                <svg
+                  className="ml-auto h-4 w-4 text-keel-blue"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M5 13l4 4L19 7"
+                  />
+                </svg>
+              )}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}