@lastbrain/app 2.0.18 → 2.0.21

package/dist/templates/middleware-i18n.example.js

@@ -0,0 +1,72 @@
+/**
+ * Middleware optionnel pour la gestion automatique de la langue
+ *
+ * À placer dans apps/<votre-app>/middleware.ts
+ *
+ * Ce middleware :
+ * - Détecte si l'URL contient /fr ou /en
+ * - Si non, redirige vers la langue par défaut (cookie ou navigateur)
+ * - Sauvegarde la préférence dans un cookie
+ */
+import { NextResponse } from "next/server";
+// Langues supportées
+const locales = ["fr", "en"];
+const defaultLocale = "fr";
+/**
+ * Extrait la langue préférée depuis le header Accept-Language
+ */
+function getPreferredLocale(request) {
+    const acceptLanguage = request.headers.get("accept-language");
+    if (!acceptLanguage)
+        return defaultLocale;
+    // Parse "fr-FR,fr;q=0.9,en;q=0.8" -> ["fr-FR", "fr", "en"]
+    const languages = acceptLanguage.split(",").map((lang) => {
+        const [code] = lang.split(";");
+        return code.trim().split("-")[0];
+    });
+    // Trouver la première langue supportée
+    for (const lang of languages) {
+        if (locales.includes(lang)) {
+            return lang;
+        }
+    }
+    return defaultLocale;
+}
+/**
+ * Vérifie si l'URL contient déjà une langue
+ */
+function hasLocale(pathname) {
+    return locales.some((locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`);
+}
+export function middleware(request) {
+    const { pathname } = request.nextUrl;
+    // Ignorer les fichiers statiques et API
+    if (pathname.startsWith("/_next") ||
+        pathname.startsWith("/api") ||
+        pathname.includes(".")) {
+        return NextResponse.next();
+    }
+    // Si l'URL contient déjà une langue, continuer
+    if (hasLocale(pathname)) {
+        return NextResponse.next();
+    }
+    // Déterminer la langue à utiliser
+    const cookieLocale = request.cookies.get("NEXT_LOCALE")?.value;
+    const locale = cookieLocale && locales.includes(cookieLocale)
+        ? cookieLocale
+        : getPreferredLocale(request);
+    // Rediriger vers l'URL avec la langue
+    const url = request.nextUrl.clone();
+    url.pathname = `/${locale}${pathname}`;
+    const response = NextResponse.redirect(url);
+    // Sauvegarder la préférence dans un cookie
+    response.cookies.set("NEXT_LOCALE", locale, {
+        path: "/",
+        maxAge: 365 * 24 * 60 * 60, // 1 an
+    });
+    return response;
+}
+export const config = {
+    // Matcher pour toutes les routes sauf les fichiers statiques
+    matcher: ["/((?!_next|api|.*\\..*).*)"],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/app",
-  "version": "2.0.18",
+  "version": "2.0.21",
   "description": "Framework modulaire Next.js avec CLI et système de modules",
   "private": false,
   "type": "module",
@@ -38,15 +38,26 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
+    },
+    "./i18n/server": {
+      "types": "./dist/i18n/server.d.ts",
+      "import": "./dist/i18n/server.js",
+      "default": "./dist/i18n/server.js"
+    },
+    "./i18n/server-lang": {
+      "types": "./dist/i18n/server-lang.d.ts",
+      "import": "./dist/i18n/server-lang.js",
+      "default": "./dist/i18n/server-lang.js"
     }
   },
   "dependencies": {
-    "@lastbrain/core": "^2.0.16",
-    "@lastbrain/ui": "^2.0.16",
+    "@lastbrain/core": "^2.0.19",
+    "@lastbrain/ui": "^2.0.19",
     "@supabase/supabase-js": "^2.84.0",
     "chalk": "^5.3.0",
     "commander": "^14.0.2",
     "fs-extra": "^11.2.0",
+    "glob": "^11.0.0",
     "inquirer": "^13.0.1",
     "lucide-react": "^0.554.0",
     "next": "^15.5.7",

package/src/app-shell/not-found.tsx

@@ -1,9 +1,9 @@
 "use client";
+import { useLocalizedRouter } from "@lastbrain/core";
 import { Button } from "@lastbrain/ui";
-import { useRouter } from "next/navigation";
 
 export default function NotFound() {
-  const router = useRouter();
+  const router = useLocalizedRouter();
   return (
     <div className="flex min-h-screen items-center justify-center bg-background">
       <div className="mx-auto max-w-md text-center">

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useLanguage } from "../i18n/LanguageProvider";
+import {
+  Button,
+  Dropdown,
+  DropdownItem,
+  DropdownMenu,
+  DropdownTrigger,
+  Spinner,
+} from "@lastbrain/ui";
+
+interface LanguageSwitcherProps {
+  variant?: "default" | "minimal";
+  className?: string;
+}
+
+export function LanguageSwitcher({
+  variant = "default",
+  className = "",
+}: LanguageSwitcherProps) {
+  const { lang, setLang } = useLanguage();
+  const [flagUrls, setFlagUrls] = useState<Record<"fr" | "en", string>>({
+    fr: "",
+    en: "",
+  });
+  const [loading, setLoading] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  // Marquer l'hydration comme terminée
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  useEffect(() => {
+    let canceled = false;
+    const objectUrls: string[] = [];
+
+    async function loadFlags() {
+      setLoading(true);
+      try {
+        const entries = await Promise.all(
+          (["fr", "en"] as const).map(async (code) => {
+            const apiCode = code === "fr" ? "fr" : "gb";
+            const response = await fetch(`https://flagcdn.com/${apiCode}.svg`);
+            if (!response.ok) throw new Error(`Flag fetch failed: ${code}`);
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            objectUrls.push(url);
+            return [code, url] as const;
+          })
+        );
+
+        if (!canceled) {
+          setFlagUrls(
+            Object.fromEntries(entries) as Record<"fr" | "en", string>
+          );
+        }
+      } catch (_err) {
+        if (!canceled) {
+          setFlagUrls({
+            fr: "https://flagcdn.com/fr.svg",
+            en: "https://flagcdn.com/gb.svg",
+          });
+        }
+      } finally {
+        if (!canceled) setLoading(false);
+      }
+    }
+
+    loadFlags();
+
+    return () => {
+      canceled = true;
+      objectUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, []);
+
+  const renderFlag = (code: "fr" | "en") => (
+    <span className="inline-flex items-center gap-2">
+      {flagUrls[code] ? (
+        <img
+          src={flagUrls[code]}
+          alt={code === "fr" ? "Drapeau français" : "Flag English"}
+          className="h-4 w-6 rounded-sm border border-slate-200 object-cover"
+        />
+      ) : isHydrated ? (
+        <span className="inline-flex h-4 w-6 items-center justify-center rounded-sm bg-slate-200 text-[10px] font-semibold text-slate-600">
+          {code.toUpperCase()}
+        </span>
+      ) : null}
+      {/* <span>{code === "fr" ? "Français" : "English"}</span> */}
+    </span>
+  );
+
+  if (variant === "minimal") {
+    return (
+      <Dropdown size="sm" className="px-0 m-0">
+        <DropdownTrigger className="px-0 m-0">
+          {renderFlag(lang)}
+        </DropdownTrigger>
+        <DropdownMenu>
+          <DropdownItem
+            key="en"
+            onPress={() => setLang("en")}
+            startContent={renderFlag("en")}
+            className={lang === "en" ? "bg-primary/10" : ""}
+          >
+            English {isHydrated && lang === "en" && "✓"}
+          </DropdownItem>
+          <DropdownItem
+            key="fr"
+            onPress={() => setLang("fr")}
+            startContent={renderFlag("fr")}
+            className={lang === "fr" ? "bg-primary/10" : ""}
+          >
+            Français {isHydrated && lang === "fr" && "✓"}
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    );
+  }
+
+  return (
+    <Dropdown size="sm" className="px-0">
+      <DropdownTrigger className="px-0 m-0">
+        <Button
+          variant="light"
+          size="sm"
+          className="px-0 m-0"
+          startContent={renderFlag(lang)}
+          endContent={loading ? <Spinner size="sm" /> : null}
+        >
+          {/* {lang === "fr" ? "Français" : "English"} */}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu>
+        <DropdownItem
+          key="en"
+          onPress={() => setLang("en")}
+          className={lang === "en" ? "bg-primary/10" : ""}
+        >
+          {renderFlag("en")} English {isHydrated && lang === "en" && "✓"}
+        </DropdownItem>
+        <DropdownItem
+          key="fr"
+          onPress={() => setLang("fr")}
+          className={lang === "fr" ? "bg-primary/10" : ""}
+        >
+          {renderFlag("fr")} Français {isHydrated && lang === "fr" && "✓"}
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+}

package/src/config/version.ts

@@ -5,25 +5,23 @@
  */
 
 export const PACKAGE_VERSIONS: Record<string, string> = {
-  "@lastbrain-labs/module-billing-pro": "^2.0.14",
-  "@lastbrain-labs/module-cj-analyzer-pro": "^0.1.6",
-  "@lastbrain-labs/module-core-cart-pro": "^2.0.14",
-  "@lastbrain-labs/module-core-commerce-pro": "^2.0.14",
-  "@lastbrain-labs/module-core-order-pro": "^2.0.14",
-  "@lastbrain-labs/module-core-payment-pro": "^2.0.14",
-  "@lastbrain-labs/module-core-product-pro": "^2.0.14",
-  "@lastbrain-labs/module-recipes-pro": "^2.0.14",
-  "@lastbrain-labs/module-shop-pro": "^0.1.6",
-  "@lastbrain/app": "^2.0.17",
-  "@lastbrain/core": "^2.0.15",
-  "@lastbrain/module-ai": "^2.0.14",
-  "@lastbrain/module-auth": "^2.0.15",
-  "@lastbrain/module-legal": "^2.0.14",
-  "@lastbrain/module-project-board": "^2.0.14",
-  "@lastbrain/module-tasks": "^2.0.14",
-  "@lastbrain/ui": "^2.0.15",
-  "apps/recipe": "^2.0.10",
-  "apps/test-app": "^2.0.10",
-  "apps/test-module": "^2.0.10",
-  "lastbrain": "^2.0.10",
+  "@lastbrain-labs/module-billing-pro": "^2.0.17",
+  "@lastbrain-labs/module-cj-analyzer-pro": "^0.1.9",
+  "@lastbrain-labs/module-core-cart-pro": "^2.0.17",
+  "@lastbrain-labs/module-core-commerce-pro": "^2.0.17",
+  "@lastbrain-labs/module-core-order-pro": "^2.0.17",
+  "@lastbrain-labs/module-core-payment-pro": "^2.0.17",
+  "@lastbrain-labs/module-core-product-pro": "^2.0.17",
+  "@lastbrain-labs/module-recipes-pro": "^2.0.17",
+  "@lastbrain-labs/module-shop-pro": "^0.1.9",
+  "@lastbrain/app": "^2.0.20",
+  "@lastbrain/core": "^2.0.18",
+  "@lastbrain/module-ai": "^2.0.17",
+  "@lastbrain/module-auth": "^2.0.18",
+  "@lastbrain/module-legal": "^2.0.17",
+  "@lastbrain/module-project-board": "^2.0.17",
+  "@lastbrain/module-tasks": "^2.0.17",
+  "@lastbrain/ui": "^2.0.18",
+  "apps/recipe": "^2.0.11",
+  "lastbrain": "^2.0.11",
 };

package/src/i18n/LanguageProvider.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+// Cette implémentation a été déplacée dans @lastbrain/core pour éviter les dépendances cycliques
+// Réexport pour la compatibilité backward
+export { LanguageProvider, type Language } from "@lastbrain/core";
+export { useLanguage } from "@lastbrain/core";
+export { LanguageContext } from "@lastbrain/core";

package/src/i18n/README_LANG_HELPERS.md

@@ -0,0 +1,187 @@
+# Helpers pour URLs avec [lang]
+
+Ce document explique comment utiliser les différents helpers pour générer des URLs avec le paramètre `[lang]` automatiquement.
+
+## 1. Hook `useLink()` - Pour les composants React
+
+**Utilisation:** À l'intérieur d'un composant client.
+
+```typescript
+"use client";
+import { useLink } from "@lastbrain/app";
+
+export function MyComponent() {
+  const link = useLink();
+
+  return (
+    <>
+      <a href={link("/recipes")}>Recettes</a>
+      <img src={link("/api/storage/avatar.jpg")} />
+      <a href={link("/settings")}>Paramètres</a>
+    </>
+  );
+}
+```
+
+**Comportement:**
+
+- `/recipes` → `/fr/recipes` (si lang="fr")
+- `/api/storage/...` → `/api/storage/...` (API routes non modifiées)
+- `https://example.com` → `https://example.com` (URLs absolues inchangées)
+- `/` → `/fr/` (racine avec lang)
+
+---
+
+## 2. Helper `langHref()` - Pour les transformations pures
+
+**Utilisation:** Pour transformer une URL avec une langue connue (sans hook).
+
+```typescript
+import { langHref } from "@lastbrain/app";
+
+const frHref = langHref("/recipes", "fr"); // "/fr/recipes"
+const enHref = langHref("/recipes", "en"); // "/en/recipes"
+```
+
+**Cas d'usage typical:**
+
+- Transformation de données avant rendu React
+- Utilisation dans les mappages de tableaux
+- Dans les `DropdownMenu` items
+
+---
+
+## 3. Helper `transformLangHref()` - Pour un seul élément
+
+**Utilisation:** Transformer un objet avec un champ `href`.
+
+```typescript
+import { transformLangHref } from "@lastbrain/app";
+import { useLanguage } from "@lastbrain/app";
+
+export function MyComponent() {
+  const { lang } = useLanguage();
+
+  const menuItem = {
+    label: "Paramètres",
+    href: "/settings",
+    icon: "Settings"
+  };
+
+  const transformed = transformLangHref(menuItem, lang);
+  // Résultat: { label: "Paramètres", href: "/fr/settings", icon: "Settings" }
+
+  return <a href={transformed.href}>{transformed.label}</a>;
+}
+```
+
+---
+
+## 4. Helper `transformLangHrefs()` - Pour un tableau d'éléments
+
+**Utilisation:** Transformer un tableau d'objets avec des `href`.
+
+```typescript
+import { transformLangHrefs, useLanguage } from "@lastbrain/app";
+
+export function Menu() {
+  const { lang } = useLanguage();
+
+  const accountMenu = [
+    { title: "Mon profil", path: "/profile" },
+    { title: "Paramètres", path: "/settings" },
+    { title: "Se déconnecter", path: "/logout" }
+  ];
+
+  const transformed = transformLangHrefs(
+    accountMenu.map(item => ({ ...item, href: item.path })),
+    lang
+  );
+
+  return transformed.map(item => (
+    <a key={item.title} href={item.href}>{item.title}</a>
+  ));
+}
+```
+
+---
+
+## Exemple complet: `AccountButton.tsx`
+
+```typescript
+"use client";
+
+import { useLanguage, langHref } from "@lastbrain/app";
+import { DropdownMenu } from "@lastbrain/ui";
+
+export function AccountButton({ accountMenu = [], user }) {
+  const { lang } = useLanguage();
+
+  return (
+    <DropdownMenu
+      items={[
+        {
+          key: "hello",
+          label: `Bonjour ${user?.email}`,
+          isReadOnly: true,
+        },
+        // Transformer les hrefs avec langHref
+        ...accountMenu.map((item) => ({
+          key: item.path,
+          label: item.title,
+          href: item.path.includes("logout")
+            ? undefined
+            : langHref(item.path, lang),  // ← ici
+        })),
+      ]}
+    >
+      {/* Rendu des items */}
+    </DropdownMenu>
+  );
+}
+```
+
+---
+
+## Tableau comparatif
+
+| Helper                 | Type          | Contexte                      | Retour                       |
+| ---------------------- | ------------- | ----------------------------- | ---------------------------- |
+| `useLink()`            | Hook          | Composant client              | Fonction `(href) => string`  |
+| `langHref()`           | Fonction pure | N'importe où                  | `string`                     |
+| `transformLangHref()`  | Fonction pure | Transformation d'objet unique | Objet avec `href` modifié    |
+| `transformLangHrefs()` | Fonction pure | Transformation de tableau     | Tableau avec `href` modifiés |
+
+---
+
+## Cas d'usage courants
+
+### Dropdown items
+
+```typescript
+const items = accountMenu.map((item) => ({
+  ...item,
+  href: langHref(item.path, lang),
+}));
+```
+
+### Navigation menus
+
+```typescript
+const link = useLink();
+<a href={link("/recipes")}>Recettes</a>
+```
+
+### API calls (no lang prefix)
+
+```typescript
+const link = useLink();
+fetch(link("/api/users")); // → "/api/users"
+```
+
+### Redirection après authentification
+
+```typescript
+const router = useLocalizedRouter();
+router.push(useLink()("/dashboard"));
+```

package/src/i18n/TranslationsScript.tsx

@@ -0,0 +1,17 @@
+/**
+ * Composant pour sérialiser les traductions dans le HTML
+ * Cela permet au client d'accéder aux traductions sans les repasser en props
+ */
+export function TranslationsScript({
+  translations,
+}: {
+  translations: Record<string, string>;
+}) {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `window.__TRANSLATIONS__ = ${JSON.stringify(translations)};`,
+      }}
+    />
+  );
+}

package/src/i18n/cookies.ts

@@ -0,0 +1,24 @@
+/**
+ * Gestion des cookies pour la langue
+ */
+
+export function setCookie(name: string, value: string, days: number) {
+  if (typeof document === "undefined") return;
+
+  const expires = new Date();
+  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+  document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
+}
+
+export function getCookie(name: string): string | null {
+  if (typeof document === "undefined") return null;
+
+  const nameEQ = `${name}=`;
+  const ca = document.cookie.split(";");
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === " ") c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}

package/src/i18n/langHrefHelper.ts

@@ -0,0 +1,51 @@
+/**
+ * Fichier utilitaire pour transformer des listes/objets avec hrefs
+ * Utile pour les données statiques qui n'ont pas accès au hook useLanguage
+ */
+
+import { langHref } from "./useLink";
+import type { Language } from "./types";
+
+/**
+ * Transforme un tableau d'éléments avec des hrefs
+ * @param items - Tableau d'éléments contenant un champ href
+ * @param lang - Code de langue
+ * @returns Le tableau avec les hrefs transformés
+ *
+ * @example
+ * ```typescript
+ * const menu = transformLangHrefs([
+ *   { label: "Accueil", href: "/" },
+ *   { label: "Recettes", href: "/recipes" }
+ * ], "fr");
+ * // Résultat: [
+ * //   { label: "Accueil", href: "/fr" },
+ * //   { label: "Recettes", href: "/fr/recipes" }
+ * // ]
+ * ```
+ */
+export function transformLangHrefs<T extends { href?: string }>(
+  items: T[],
+  lang: Language
+): T[] {
+  return items.map((item) => ({
+    ...item,
+    href: item.href ? langHref(item.href, lang) : undefined,
+  }));
+}
+
+/**
+ * Transforme un seul élément avec un href
+ * @param item - Élément contenant un champ href
+ * @param lang - Code de langue
+ * @returns L'élément avec le href transformé
+ */
+export function transformLangHref<T extends { href?: string }>(
+  item: T,
+  lang: Language
+): T {
+  return {
+    ...item,
+    href: item.href ? langHref(item.href, lang) : undefined,
+  };
+}

package/src/i18n/server-helpers.ts

@@ -0,0 +1,48 @@
+import { type Language, loadTranslations } from "./server-lang";
+
+/**
+ * Helper pour créer une fonction de traduction côté serveur
+ *
+ * @example
+ * ```tsx
+ * export default async function MyPage({ params }) {
+ *   const t = await createServerTranslator(params);
+ *   return <h1>{t("module-auth.welcome")}</h1>;
+ * }
+ * ```
+ */
+export async function createServerTranslator(
+  params: Promise<{ lang?: string }> | { lang?: string }
+): Promise<(key: string) => string> {
+  // Si params est une Promise, l'attendre
+  const resolvedParams = params instanceof Promise ? await params : params;
+  const lang = (resolvedParams.lang as Language) || "fr";
+  const translations = await loadTranslations(lang);
+
+  return (key: string): string => {
+    return translations[key] || key;
+  };
+}
+
+/**
+ * Hook pour utiliser les traductions côté serveur avec namespace
+ *
+ * @example
+ * ```tsx
+ * export default async function MyPage({ params }) {
+ *   const t = await createNamespacedTranslator(params, "module-auth");
+ *   return <h1>{t("welcome")}</h1>; // Cherche "module-auth.welcome"
+ * }
+ * ```
+ */
+export async function createNamespacedTranslator(
+  params: Promise<{ lang?: string }> | { lang?: string },
+  namespace: string
+): Promise<(key: string) => string> {
+  const t = await createServerTranslator(params);
+
+  return (key: string): string => {
+    const fullKey = `${namespace}.${key}`;
+    return t(fullKey);
+  };
+}