generator-kodly-react-app 1.0.13 → 1.0.15

package/generators/app/templates/.env.dev

@@ -1,4 +1,4 @@
 BASE_URL=/
 PORT=3000
 ALLOWED_HOSTS=localhost
-VITE_API_BASE_URL=https://localhost:8081
+VITE_API_BASE_URL=http://localhost:8081

package/generators/app/templates/.env.sandbox

@@ -1,4 +1,4 @@
 BASE_URL=/
 PORT=3000
-ALLOWED_HOSTS=sandbox.beta.kodly.dev
-VITE_API_BASE_URL=${VITE_API_BASE_URL} //injected by env variables - https://sandbox.beta.kodly.dev/proxy/95-2
+ALLOWED_HOSTS=sandbox.app.kodly.dev
+VITE_API_BASE_URL=${VITE_API_BASE_URL} //injected by env variables - https://{port}-{projectSlug}-{userSlug}.sandbox.app.kodly.dev

package/generators/app/templates/I18N_MIGRATION.md

@@ -0,0 +1,133 @@
+# i18n Migration Guide
+
+This document describes the i18n configuration changes that enable **both** flat and namespaced translation usage. Users with the older single-namespace setup can migrate using the instructions below.
+
+## Summary of Changes
+
+The i18n setup now supports two usage patterns interchangeably:
+
+| Pattern | Example | Use case |
+|---------|---------|----------|
+| **Flat (no namespace)** | `useTranslation()` + `t('namespace.section.key')` | Quick access, explicit full path |
+| **Namespaced** | `useTranslation('namespace')` + `t('section.key')` | Modular components, shorter keys |
+
+Previously, only the flat pattern worked because all translations lived under a single `translation` namespace. The namespaced pattern failed because i18next couldn't find the individual namespaces (the top-level keys in your merged translation object).
+
+---
+
+## Patch: `src/lib/i18n.ts`
+
+### Before (old configuration)
+
+```typescript
+if (!i18n.isInitialized) {
+  const lng = getStoredLanguage();
+  i18n.use(initReactI18next).init({
+    resources: {
+      en: { translation: mergeTranslations('en') },
+      ja: { translation: mergeTranslations('ja') },
+    },
+    supportedLngs: supportedLanguages,
+    lng,
+    fallbackLng: defaultLanguage,
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+  setLanguageHooks(lng);
+}
+```
+
+### After (new configuration)
+
+```typescript
+if (!i18n.isInitialized) {
+  const lng = getStoredLanguage();
+  const enResources = mergeTranslations('en');
+  const jaResources = mergeTranslations('ja');
+  i18n.use(initReactI18next).init({
+    resources: {
+      en: {
+        translation: enResources,
+        ...enResources,
+      },
+      ja: {
+        translation: jaResources,
+        ...jaResources,
+      },
+    },
+    defaultNS: 'translation',
+    ns: ['translation', ...Object.keys(enResources)],
+    supportedLngs: supportedLanguages,
+    lng,
+    fallbackLng: defaultLanguage,
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+  setLanguageHooks(lng);
+}
+```
+
+### What changed
+
+1. **Resources structure**: Each language now exposes both:
+   - `translation` – the full merged object for flat keys, e.g. `t('namespace.section.key')`
+   - Individual namespaces – one per top-level key in the merged object, for `useTranslation('namespace')` + `t('section.key')`
+
+2. **`defaultNS: 'translation'`**: Ensures `useTranslation()` without arguments uses the flat namespace.
+
+3. **`ns` array**: Must list `'translation'` plus every top-level key returned by `mergeTranslations()` (e.g. `['translation', ...Object.keys(enResources)]`) so i18next can load and resolve them correctly.
+
+---
+
+## Migration Steps
+
+### 1. Update `src/lib/i18n.ts`
+
+Replace the `if (!i18n.isInitialized)` block with the new configuration above. The rest of the file (imports, `getLanguage`, `changeLanguage`, etc.) stays the same.
+
+### 2. Verify translation key paths (flat usage)
+
+With the default `translation` namespace, keys must include the full path from the root of your merged translations. The format is the namespace (top-level key) followed by the path inside it:
+
+- **Format**: `t('<namespace>.<path.to.key>')`
+- **Example**: If your merged object has a top-level key `auth` with `login.title` inside it, use `t('auth.login.title')`.
+
+If a key used to work as `t('someKey')` and now fails, it likely lives under a namespace in your structure—update it to `t('<namespace>.<someKey>')` (or the full path that matches your locale JSON).
+
+### 3. Optional: Use namespaced pattern in components
+
+You can migrate components to the namespaced pattern for shorter keys:
+
+```tsx
+// Before (flat)
+const { t } = useTranslation();
+return <h1>{t('namespace.section.title')}</h1>;
+
+// After (namespaced) – optional
+const { t } = useTranslation('namespace');
+return <h1>{t('section.title')}</h1>;
+```
+
+Both forms work. Choose what fits your component structure.
+
+---
+
+## Available Namespaces
+
+Namespaces in your project are determined by **the top-level keys of the object returned by `mergeTranslations(lng)`**.
+
+- **`translation`** – Always present. Contains the full merged tree so flat keys like `t('namespace.section.key')` work.
+- **Other namespaces** – One for each top-level key in that merged object (e.g. if your merge yields `{ auth, app, common }`, you get namespaces `auth`, `app`, and `common`). Their contents match whatever structure your locale files and `mergeTranslations` produce.
+
+To see which namespaces you have, inspect the keys of the result of `mergeTranslations('en')` (or your default language) and use that same list in the `ns` option in `i18n.ts`.
+
+---
+
+## No Changes Required
+
+- **`src/locales/index.ts`** – `mergeTranslations` is unchanged
+- **Locale JSON files** – No structure changes
+- **Components using flat keys** – Existing `t('namespace.path.to.key')` calls continue to work
+- **`LanguageSwitcher`** – Uses `i18n` only; no translation keys

package/generators/app/templates/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "version": "0.0.1",
-  "packageManager": "pnpm@10.28.0",
+  "packageManager": "pnpm@10.28.2",
   "scripts": {
     "generate-routes": "tsr generate",
     "watch-routes": "tsr watch",
@@ -19,40 +19,40 @@
     "openapi-ts:sandbox": "MODE=sandbox openapi-ts"
   },
   "dependencies": {
-    "@hey-api/openapi-ts": "^0.90.2",
+    "@hey-api/openapi-ts": "^0.92.3",
     "@hookform/resolvers": "^5.2.2",
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
-    "@tanstack/react-query": "^5.90.16",
-    "@tanstack/react-router": "^1.145.7",
-    "@tanstack/router-plugin": "^1.145.7",
-    "axios": "^1.13.2",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-router": "^1.158.1",
+    "@tanstack/router-plugin": "^1.158.1",
+    "axios": "^1.13.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "dotenv": "^17.2.3",
-    "i18next": "^25.7.3",
-    "jotai": "^2.16.1",
-    "lucide-react": "^0.562.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-hook-form": "^7.70.0",
-    "react-i18next": "^16.5.1",
+    "dotenv": "^17.2.4",
+    "i18next": "^25.8.4",
+    "jotai": "^2.17.1",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-hook-form": "^7.71.1",
+    "react-i18next": "^16.5.4",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.4.0",
-    "zod": "^4.3.5"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/router-cli": "^1.145.7",
-    "@types/node": "^25.0.3",
-    "@types/react": "^19.2.7",
+    "@tanstack/router-cli": "^1.158.1",
+    "@types/node": "^25.2.1",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
+    "@vitejs/plugin-react": "^5.1.3",
     "babel-plugin-react-compiler": "^1.0.0",
     "npm-run-all": "^4.1.5",
     "tailwindcss": "^4.1.18",

package/generators/app/templates/src/lib/i18n.ts

@@ -29,11 +29,21 @@ const getStoredLanguage = (): SupportedLanguages => {
 
 if (!i18n.isInitialized) {
   const lng = getStoredLanguage();
+  const enResources = mergeTranslations('en');
+  const jaResources = mergeTranslations('ja');
   i18n.use(initReactI18next).init({
     resources: {
-      en: { translation: mergeTranslations('en') },
-      ja: { translation: mergeTranslations('ja') },
+      en: {
+        translation: enResources,
+        ...enResources,
+      },
+      ja: {
+        translation: jaResources,
+        ...jaResources,
+      },
     },
+    defaultNS: 'translation',
+    ns: ['translation', 'auth', 'app', 'landing', 'common', 'theme'],
     supportedLngs: supportedLanguages,
     lng,
     fallbackLng: defaultLanguage,

package/generators/app/templates/src/modules/landing/components/auth-hero.tsx

@@ -5,18 +5,18 @@ import { Route as LoginRoute } from '@/routes/auth/login';
 import { Route as SignupRoute } from '@/routes/auth/signup';
 
 export function AuthHero() {
-  const { t } = useTranslation();
+  const { t } = useTranslation('landing');
 
   return (
     <>
-      <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold mb-6'>{t('landing.hero.title')}</h1>
-      <p className='text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto'>{t('landing.hero.description')}</p>
+      <h1 className='text-4xl md:text-5xl lg:text-6xl font-bold mb-6'>{t('hero.title')}</h1>
+      <p className='text-xl md:text-2xl text-muted-foreground mb-12 max-w-2xl mx-auto'>{t('hero.description')}</p>
       <div className='flex flex-col sm:flex-row gap-4 justify-center items-center'>
         <Link to={LoginRoute.to}>
           <Button
             size='lg'
             className='w-full sm:w-auto min-w-[150px]'>
-            {t('landing.hero.loginButton')}
+            {t('hero.loginButton')}
           </Button>
         </Link>
         <Link to={SignupRoute.to}>
@@ -24,7 +24,7 @@ export function AuthHero() {
             size='lg'
             variant='outline'
             className='w-full sm:w-auto min-w-[150px]'>
-            {t('landing.hero.signupButton')}
+            {t('hero.signupButton')}
           </Button>
         </Link>
       </div>

package/generators/app/templates/src/routes/$.tsx

@@ -11,7 +11,7 @@ function NotFound() {
     <div className="flex h-screen w-screen items-center justify-center">
       <div className="text-center">
         <h1 className="text-4xl font-bold mb-4">404</h1>
-        <p className="text-muted-foreground">{t("notFound.message")}</p>
+        <p className="text-muted-foreground">{t("common.notFound.message")}</p>
       </div>
     </div>
   );

package/generators/app/templates/vite.config.js

@@ -32,6 +32,7 @@ export default defineConfig(({ mode }) => {
       },
     },
     server: {
+      host: true,
       port: parseInt(env.PORT || '3000', 10),
       allowedHosts: [env.ALLOWED_HOSTS || 'localhost'],
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "generator-kodly-react-app",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A Yeoman generator for creating React.js applications with Vite, TanStack Router, authentication, and i18n",
   "main": "index.js",
   "type": "module",