xertica-ui 2.1.11 → 2.2.1

package/CHANGELOG.md

@@ -9,20 +9,41 @@ Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+---
+
+## [2.2.1] — 2026-05-21
+
 ### Added
 
+- **i18n — Cobertura completa na página de Template** — `TemplateContent.tsx` e os 4 starter templates (`LoginTemplate`, `FormTemplate`, `DashboardTemplate`, `CrudTemplate`) estão 100% traduzidos (pt-BR, en, es). Anteriormente a maioria dos textos era hard-coded em PT-BR.
+- **i18n — Namespace `templates.*` completo** — novo namespace com 539 chaves cobrindo todos os textos visíveis: seções, alertas, abas, formulários, tabela de dados, configurações, botões (variantes/tamanhos), badges, dialogs, sidebar, componentes avançados (Pagination, Stepper, TreeView, RichTextEditor) e rodapé. Suporte completo para `<Trans>` com interpolação de `<code>` nas descrições técnicas.
+- **i18n — Novos namespaces de starter templates** — 4 novos arquivos de locale por idioma: `loginTemplate`, `formTemplate`, `dashboardTemplate`, `crudTemplate` (total de 12 novos JSONs × 2 mirrors = 24 arquivos).
+- **i18n — Estrutura de locales reorganizada** — os monolitos `locales/<lang>.json` foram divididos em pastas por categoria:
+  - `locales/<lang>/{common,nav,errors,languageSelector,themeToggle}.json` (transversal)
+  - `locales/<lang>/pages/{home,templates,login,resetPassword,verifyEmail,loginTemplate,formTemplate,dashboardTemplate,crudTemplate}.json`
+  - `locales/<lang>/components/{assistant,sidebar,media,projectCard,profileCard,notificationCard,activityCard,stats,team}.json`
+- **i18n — Loader via `import.meta.glob`** — `i18n.ts` (base e templates) substituiu os 57 imports estáticos por 3 chamadas `import.meta.glob('./locales/<lang>/**/*.json', { eager: true })` + função `bundleLang()`. Adicionar um novo arquivo JSON é suficiente — sem tocar no `i18n.ts`.
+- **CLI — Locale em pastas** — `syncLocaleFiles` e `generateI18nFile` em `bin/language-config.ts` atualizados para copiar/gerar a nova estrutura de pastas. Projetos legados com `<lang>.json` flat são migrados automaticamente no próximo `update`.
+- **`templates/vite.config.ts` — aliases de monorepo** — aliases automáticos detectam se o `vite.config.ts` está dentro do monorepo (`../components/index.ts` existe) e apontam `xertica-ui/*` diretamente para o source TypeScript, permitindo HMR sem rebuild da lib. Em projetos gerados pelo CLI, o check retorna `false` e `xertica-ui` resolve do `node_modules` normalmente.
 - **CLI — Language selection on `init`** — `npx xertica-ui init` now prompts for the languages the project should support (multi-select with `pt-BR`, `en`, `es`; all selected by default; minimum 1). The CLI:
-  - Copies **only** the JSON files for the selected languages into `src/locales/` (no orphan locales)
-  - Generates `src/i18n.ts` with imports/resources for exactly those languages
+  - Copies **only** the locale folders for the selected languages into `src/locales/` (no orphan locales)
+  - Generates `src/i18n.ts` with `import.meta.glob` calls for exactly those languages
   - Injects the `availableLanguages` prop into the generated `src/app/App.tsx`
   - Persists the selection in `src/locales/.languages.json` (schema v1)
-- **CLI — `update` → Languages** — new option in the `update` command lets users add or remove languages later. Shows a diff (`+ es`, `- en`) before confirming. Regenerates `App.tsx`, `i18n.ts`, copies new locale JSONs, and prunes removed ones.
+- **CLI — `update` → Languages** — new option in the `update` command lets users add or remove languages later. Shows a diff (`+ es`, `- en`) before confirming. Regenerates `App.tsx`, `i18n.ts`, copies new locale folders, and prunes removed ones.
 - **CLI — Monolingual auto-detection** — when only one language is selected, the generated `App.tsx` includes a banner comment documenting that the `LanguageSelector` will auto-hide.
 - **`bin/language-config.ts`** — new module encapsulating the supported-language registry (`SUPPORTED_LANGUAGES`), code generators (`generateI18nFile`, `generateAppTsx`), and persistence helpers (`readLanguagesConfig`, `writeLanguagesConfig`, `syncLocaleFiles`).
 
+### Fixed
+
+- **Dark mode toggle no CLI** — `XerticaProvider` no `templates/src/app/App.tsx` era gerado com `disableDarkMode` hard-coded, tornando o `ThemeToggle` um no-op. Removido de `App.tsx`, do template literal do CLI em `bin/language-config.ts` e do exemplo em `templates/CLAUDE.md`.
+
 ### Changed
 
 - **CLI — `update` → Project files (`app` branch)** — instead of blindly overwriting `App.tsx` and `i18n.ts` with the static template (which would erase the user's language selection), the update flow now reads the persisted selection from `src/locales/.languages.json` and regenerates these files honoring it. Projects scaffolded before this feature shipped get their selection inferred from the locale files present and the inferred config is written back.
+- **`DashboardTemplate`** — `StatsCard` deixou de chamar `useTranslation()` internamente; o sufixo de tendência (`lastMonth`) é resolvido no pai e passado como prop, reduzindo o número de subscribers i18n de 5 para 1.
+- **`TemplateContent` — dialog inputs controlados** — os `Input` do dialog "Editar Perfil" foram convertidos de `defaultValue` (uncontrolled) para `value`/`onChange` com lazy `useState`, garantindo que o valor reflita o idioma ativo no momento da montagem sem sobrescrever edições do usuário.
+- **`TemplateContent` — `treeData` movido para dentro do componente** — os labels dos nós do TreeView (`Components`, `UI`, `Button`…) agora reagem ao switch de idioma em tempo real, pois `treeData` é construído após `const { t } = useTranslation()`.
 
 ---
 

package/README.md

@@ -2,7 +2,7 @@
 
 > **Enterprise-grade React design system** built on Tailwind CSS v4, Radix UI, and Lucide Icons — with a robust AI-first documentation layer for precise LLM-driven composition and autonomous agent interaction.
 
-[![npm version](https://img.shields.io/badge/npm-2.1.11-blue)](https://www.npmjs.com/package/xertica-ui)
+[![npm version](https://img.shields.io/badge/npm-2.2.1-blue)](https://www.npmjs.com/package/xertica-ui)
 [![license](https://img.shields.io/badge/license-proprietary-red)](./LICENSE)
 
 ---

package/bin/cli.ts

@@ -426,8 +426,10 @@ program
         const localesDir = path.join(targetDir, 'src', 'locales');
         if (await fs.pathExists(localesDir)) {
           const entries = await fs.readdir(localesDir);
-          currentCodes = SUPPORTED_LANGUAGES.filter(l =>
-            entries.includes(`${l.jsonFile}.json`)
+          // Accept both the new folder layout (locales/<code>/) and the legacy
+          // flat layout (locales/<code>.json) when inferring the current set.
+          currentCodes = SUPPORTED_LANGUAGES.filter(
+            l => entries.includes(l.jsonFile) || entries.includes(`${l.jsonFile}.json`)
           ).map(l => l.code);
         }
         if (currentCodes.length === 0) currentCodes = DEFAULT_SELECTION;
@@ -657,8 +659,9 @@ program
           const localesDir = path.join(targetDir, 'src', 'locales');
           if (await fs.pathExists(localesDir)) {
             const entries = await fs.readdir(localesDir);
-            selectedCodes = SUPPORTED_LANGUAGES.filter(l =>
-              entries.includes(`${l.jsonFile}.json`)
+            // Accept both the new folder layout and the legacy flat layout
+            selectedCodes = SUPPORTED_LANGUAGES.filter(
+              l => entries.includes(l.jsonFile) || entries.includes(`${l.jsonFile}.json`)
             ).map(l => l.code);
           }
           if (selectedCodes.length === 0) selectedCodes = DEFAULT_SELECTION;

package/bin/language-config.ts

@@ -84,10 +84,19 @@ export async function writeLanguagesConfig(
 // ── File-system helpers ──────────────────────────────────────────────────────
 
 /**
- * Copy only the locale JSON files matching the selected codes into the project,
+ * Copy only the locale folders matching the selected codes into the project,
  * leaving previously-copied locales for unselected languages in place ONLY if
  * `pruneOthers` is false. When `true` (typical for re-selection on update),
- * the unselected JSON files are deleted from the project.
+ * the unselected language folders are deleted from the project.
+ *
+ * Each language is shipped as a folder of split JSON files:
+ *
+ *   templates/src/locales/<lang>/{common,nav,errors,languageSelector,themeToggle}.json
+ *   templates/src/locales/<lang>/pages/<page>.json
+ *   templates/src/locales/<lang>/components/<component>.json
+ *
+ * Also migrates legacy projects that still have flat `<lang>.json` files
+ * (deletes them so they don't shadow the new folder).
  */
 export async function syncLocaleFiles(
   templatesDir: string,
@@ -104,22 +113,36 @@ export async function syncLocaleFiles(
   const copied: string[] = [];
   const removed: string[] = [];
 
-  // Copy selected language JSONs from the library templates
+  // Copy selected language folders from the library templates
   for (const lang of selectedLangs) {
-    const src = path.join(templatesDir, 'src', 'locales', `${lang.jsonFile}.json`);
-    const dest = path.join(targetLocalesDir, `${lang.jsonFile}.json`);
+    const src = path.join(templatesDir, 'src', 'locales', lang.jsonFile);
+    const dest = path.join(targetLocalesDir, lang.jsonFile);
     if (await fs.pathExists(src)) {
+      // Clear the target folder first so removed keys don't linger
+      await fs.remove(dest);
       await fs.copy(src, dest, { overwrite: true });
-      copied.push(`${lang.jsonFile}.json`);
+      copied.push(`${lang.jsonFile}/`);
+    }
+
+    // Migrate legacy flat file if it exists alongside the new folder
+    const legacyFlat = path.join(targetLocalesDir, `${lang.jsonFile}.json`);
+    if (await fs.pathExists(legacyFlat)) {
+      await fs.remove(legacyFlat);
     }
   }
 
-  // Remove unselected language JSONs from the project (when pruning)
+  // Remove unselected language folders from the project (when pruning)
   if (options.pruneOthers) {
     for (const lang of unselectedLangs) {
-      const dest = path.join(targetLocalesDir, `${lang.jsonFile}.json`);
+      const dest = path.join(targetLocalesDir, lang.jsonFile);
       if (await fs.pathExists(dest)) {
         await fs.remove(dest);
+        removed.push(`${lang.jsonFile}/`);
+      }
+      // Also prune any legacy flat file
+      const legacyFlat = path.join(targetLocalesDir, `${lang.jsonFile}.json`);
+      if (await fs.pathExists(legacyFlat)) {
+        await fs.remove(legacyFlat);
         removed.push(`${lang.jsonFile}.json`);
       }
     }
@@ -131,9 +154,13 @@ export async function syncLocaleFiles(
 // ── Code generators ──────────────────────────────────────────────────────────
 
 /**
- * Generate the contents of `src/i18n.ts` with imports and `resources` for
- * exactly the selected languages — no orphan imports for locales the user
- * didn't pick.
+ * Generate the contents of `src/i18n.ts` for a freshly-scaffolded project.
+ *
+ * Each selected language is pulled via Vite's `import.meta.glob` (one glob per
+ * language) — resolved statically at build time so JSON gets inlined and
+ * tree-shaken. No per-chunk imports to maintain; adding a new
+ * `locales/<lang>/pages/foo.json` is picked up automatically on the next
+ * Vite build.
  */
 export function generateI18nFile(selectedCodes: string[]): string {
   const selectedLangs = SUPPORTED_LANGUAGES.filter(l => selectedCodes.includes(l.code));
@@ -141,16 +168,21 @@ export function generateI18nFile(selectedCodes: string[]): string {
     throw new Error('generateI18nFile: must include at least one language');
   }
 
-  const importLines = selectedLangs
-    .map(l => `import ${toJsIdent(l.code)} from './locales/${l.jsonFile}.json';`)
+  const fallback = selectedLangs[0].code;
+
+  const bundleLines = selectedLangs
+    .map(
+      lang =>
+        `const ${toJsIdent(lang.code)} = bundleLang(\n` +
+        `  import.meta.glob('./locales/${lang.jsonFile}/**/*.json', { eager: true, import: 'default' })\n` +
+        `);`
+    )
     .join('\n');
 
   const resourceEntries = selectedLangs
     .map(l => `    '${l.code}': { translation: ${toJsIdent(l.code)} },`)
     .join('\n');
 
-  const fallback = selectedLangs[0].code;
-
   return `// ─────────────────────────────────────────────────────────────────────────────
 // i18n.ts — i18next configuration (generated by xertica-ui CLI)
 //
@@ -158,14 +190,43 @@ export function generateI18nFile(selectedCodes: string[]): string {
 // component is rendered. The side-effect initializes i18next synchronously so
 // that \`useTranslation()\` is ready on first render.
 //
+// Locale layout (split for maintainability — merged at boot into a single
+// \`translation\` namespace so all existing \`t('home.welcome')\`-style calls
+// keep working without changes):
+//
+//   locales/<lang>/{common,nav,errors,languageSelector,themeToggle}.json
+//   locales/<lang>/pages/{home,templates,login,resetPassword,verifyEmail}.json
+//   locales/<lang>/components/{assistant,sidebar,media,projectCard,
+//                              profileCard,notificationCard,activityCard,
+//                              stats,team}.json
+//
 // To add or remove a language, run:  npx xertica-ui update  →  Languages
-// The CLI will regenerate this file and copy/remove locale JSONs accordingly.
+// The CLI will regenerate this file and copy/remove locale folders accordingly.
 // ─────────────────────────────────────────────────────────────────────────────
 
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 
-${importLines}
+/**
+ * Merge a Vite glob result into a single { key: contents } bundle. The key is
+ * derived from the file basename — folders (pages/components) are discarded
+ * because the legacy flat JSON layout used a single namespace.
+ */
+function bundleLang(chunks: Record<string, unknown>): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [filePath, value] of Object.entries(chunks)) {
+    const base = filePath.split('/').pop();
+    if (!base) continue;
+    const key = base.replace(/\\.json$/, '');
+    out[key] = value;
+  }
+  return out;
+}
+
+// One \`import.meta.glob\` call per language — Vite requires literal patterns,
+// so we can't loop. \`eager: true\` inlines the JSON; \`import: 'default'\`
+// returns the JSON value directly instead of \`{ default: ... }\`.
+${bundleLines}
 
 const STORAGE_KEY = 'xertica_language';
 const DEFAULT_FALLBACK = '${fallback}';
@@ -272,8 +333,7 @@ export default function App() {
       <QueryClientProvider client={queryClient}>
         <XerticaProvider
           apiKey={geminiApiKey}
-          googleMapsApiKey={googleMapsApiKey}
-          disableDarkMode${availableLanguagesProp}
+          googleMapsApiKey={googleMapsApiKey}${availableLanguagesProp}
         >
           <Router>
             {/* AuthProvider must be inside Router (needs useNavigate) */}