generator-kodly-react-app 1.0.15 → 1.0.16

package/generators/app/index.js

@@ -24,6 +24,7 @@ export default class ReactAppGenerator extends BaseGenerator {
       'vite.config.js',
       'tsconfig.json',
       'tsconfig.app.json',
+      'tsr.config.json',
       'tailwind.config.js',
       'postcss.config.js',
       'index.html',
@@ -70,6 +71,8 @@ export default class ReactAppGenerator extends BaseGenerator {
   _writeAuthFiles() {
     const authFiles = [
       'src/modules/auth/components/signup-form.tsx',
+      'src/modules/auth/components/auth-form.tsx',
+      'src/modules/auth/components/login-link.tsx',
       'src/modules/auth/components/forgot-password-form.tsx',
       'src/modules/auth/components/reset-password-form.tsx',
       'src/modules/auth/components/login-form.tsx',
@@ -86,6 +89,7 @@ export default class ReactAppGenerator extends BaseGenerator {
   _writeComponentFiles() {
     const componentFiles = [
       'src/components/layout/language-switcher.tsx',
+      'src/components/layout/page-layout.tsx',
       'src/components/layout/theme-switcher.tsx',
       'src/components/theme/theme-provider.tsx',
       'src/components/ui/button.tsx',

package/generators/app/templates/I18N_MIGRATION.md

@@ -6,10 +6,10 @@ This document describes the i18n configuration changes that enable **both** flat
 
 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 |
+| 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).
 
@@ -24,8 +24,8 @@ if (!i18n.isInitialized) {
   const lng = getStoredLanguage();
   i18n.use(initReactI18next).init({
     resources: {
-      en: { translation: mergeTranslations('en') },
-      ja: { translation: mergeTranslations('ja') },
+      en: { translation: mergeTranslations("en") },
+      ja: { translation: mergeTranslations("ja") },
     },
     supportedLngs: supportedLanguages,
     lng,
@@ -43,8 +43,8 @@ if (!i18n.isInitialized) {
 ```typescript
 if (!i18n.isInitialized) {
   const lng = getStoredLanguage();
-  const enResources = mergeTranslations('en');
-  const jaResources = mergeTranslations('ja');
+  const enResources = mergeTranslations("en");
+  const jaResources = mergeTranslations("ja");
   i18n.use(initReactI18next).init({
     resources: {
       en: {
@@ -56,8 +56,8 @@ if (!i18n.isInitialized) {
         ...jaResources,
       },
     },
-    defaultNS: 'translation',
-    ns: ['translation', ...Object.keys(enResources)],
+    defaultNS: "translation",
+    ns: ["translation", ...Object.keys(enResources)],
     supportedLngs: supportedLanguages,
     lng,
     fallbackLng: defaultLanguage,
@@ -103,11 +103,11 @@ You can migrate components to the namespaced pattern for shorter keys:
 ```tsx
 // Before (flat)
 const { t } = useTranslation();
-return <h1>{t('namespace.section.title')}</h1>;
+return <h1>{t("namespace.section.title")}</h1>;
 
 // After (namespaced) – optional
-const { t } = useTranslation('namespace');
-return <h1>{t('section.title')}</h1>;
+const { t } = useTranslation("namespace");
+return <h1>{t("section.title")}</h1>;
 ```
 
 Both forms work. Choose what fits your component structure.

package/generators/app/templates/STRUCTURE.md

@@ -279,10 +279,10 @@ routes/
 
 ```tsx
 // src/routes/{module}/route.tsx (Parent route)
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { ModuleLayout } from '@/modules/{module}/layouts/{module}-layout';
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { ModuleLayout } from "@/modules/{module}/layouts/{module}-layout";
 
-export const Route = createFileRoute('/{module}')({
+export const Route = createFileRoute("/{module}")({
   beforeLoad: ({ context }) => {
     // Guards, redirects, etc.
   },
@@ -300,10 +300,10 @@ function RouteComponent() {
 
 ```tsx
 // src/routes/{module}/{page}.tsx (Child route)
-import { createFileRoute } from '@tanstack/react-router';
-import { PageComponent } from '@/modules/{module}/components/{page}-component';
+import { createFileRoute } from "@tanstack/react-router";
+import { PageComponent } from "@/modules/{module}/components/{page}-component";
 
-export const Route = createFileRoute('/{module}/{page}')({
+export const Route = createFileRoute("/{module}/{page}")({
   component: RouteComponent,
 });
 
@@ -363,7 +363,7 @@ Translations are merged in `src/locales/index.ts`:
 
 ```typescript
 export const mergeTranslations = (lang: SupportedLanguages) => {
-  if (lang === 'en') {
+  if (lang === "en") {
     return {
       auth: { ...enAuth },
       app: { ...enApp },
@@ -379,15 +379,15 @@ export const mergeTranslations = (lang: SupportedLanguages) => {
 ### Using Translations in Components
 
 ```tsx
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 function MyComponent() {
   const { t } = useTranslation();
 
   return (
     <div>
-      <h1>{t('auth.login.title')}</h1>
-      <p>{t('common.welcome')}</p>
+      <h1>{t("auth.login.title")}</h1>
+      <p>{t("common.welcome")}</p>
     </div>
   );
 }
@@ -447,11 +447,11 @@ src/modules/dashboard/
 Add module translations to `src/locales/index.ts`:
 
 ```typescript
-import enDashboard from '@/modules/dashboard/locales/dashboard-en.json';
-import jaDashboard from '@/modules/dashboard/locales/dashboard-ja.json';
+import enDashboard from "@/modules/dashboard/locales/dashboard-en.json";
+import jaDashboard from "@/modules/dashboard/locales/dashboard-ja.json";
 
 export const mergeTranslations = (lang: SupportedLanguages) => {
-  if (lang === 'en') {
+  if (lang === "en") {
     return {
       // ... existing modules
       dashboard: { ...enDashboard },
@@ -472,7 +472,7 @@ export const mergeTranslations = (lang: SupportedLanguages) => {
 ```tsx
 export function DashboardLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='dashboard-container'>
+    <div className="dashboard-container">
       {/* Dashboard-specific layout */}
       {children}
     </div>
@@ -485,10 +485,10 @@ export function DashboardLayout({ children }: { children: React.ReactNode }) {
 **`src/routes/dashboard/route.tsx`**:
 
 ```tsx
-import { createFileRoute, Outlet } from '@tanstack/react-router';
-import { DashboardLayout } from '@/modules/dashboard/layouts/dashboard-layout';
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import { DashboardLayout } from "@/modules/dashboard/layouts/dashboard-layout";
 
-export const Route = createFileRoute('/dashboard')({
+export const Route = createFileRoute("/dashboard")({
   component: RouteComponent,
 });
 
@@ -504,10 +504,10 @@ function RouteComponent() {
 **`src/routes/dashboard/index.tsx`**:
 
 ```tsx
-import { createFileRoute } from '@tanstack/react-router';
-import { DashboardPage } from '@/modules/dashboard/components/dashboard-page';
+import { createFileRoute } from "@tanstack/react-router";
+import { DashboardPage } from "@/modules/dashboard/components/dashboard-page";
 
-export const Route = createFileRoute('/dashboard/')({
+export const Route = createFileRoute("/dashboard/")({
   component: RouteComponent,
 });
 
@@ -564,7 +564,7 @@ _writeDashboardFiles() {
 
 ```tsx
 // src/modules/{module}/components/{component-name}.tsx
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 export function ComponentName() {
   const { t } = useTranslation();
@@ -577,7 +577,7 @@ export function ComponentName() {
 
 ```tsx
 // src/modules/{module}/hooks/use-{hook-name}.ts
-import { useAtom } from 'jotai';
+import { useAtom } from "jotai";
 
 export function useHookName() {
   // Hook logic
@@ -593,7 +593,7 @@ export function useHookName() {
 // src/modules/{module}/layouts/{module}-layout.tsx
 export function ModuleLayout({ children }: { children: React.ReactNode }) {
   return (
-    <div className='module-container'>
+    <div className="module-container">
       {/* Layout structure */}
       {children}
     </div>
@@ -605,10 +605,10 @@ export function ModuleLayout({ children }: { children: React.ReactNode }) {
 
 ```tsx
 // src/routes/{module}/{page}.tsx
-import { createFileRoute } from '@tanstack/react-router';
-import { ComponentName } from '@/modules/{module}/components/component-name';
+import { createFileRoute } from "@tanstack/react-router";
+import { ComponentName } from "@/modules/{module}/components/component-name";
 
-export const Route = createFileRoute('/{module}/{page}')({
+export const Route = createFileRoute("/{module}/{page}")({
   component: RouteComponent,
 });
 

package/generators/app/templates/index.html

@@ -4,23 +4,15 @@
     <meta charset="UTF-8" />
     <meta
       name="viewport"
-      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta
-      name="theme-color"
-      content="#000000" />
-    <meta
-      name="description"
-      content="<%= appNameTitleCase %>" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="/favicon.svg" />
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <meta name="description" content="<%= appNameTitleCase %>" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title><%= appNameTitleCase %></title>
   </head>
   <body>
     <div id="app"></div>
-    <script
-      type="module"
-      src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package/generators/app/templates/openapi-ts.config.ts

@@ -1,29 +1,29 @@
-import { defineConfig } from '@hey-api/openapi-ts';
-import { loadEnv } from 'vite';
+import { defineConfig } from "@hey-api/openapi-ts";
+import { loadEnv } from "vite";
 
 // Get the mode from environment variable (set by pnpm scripts)
-const mode = process.env.MODE || 'development';
+const mode = process.env.MODE || "development";
 
 // Load environment variables from .env files
-const env = loadEnv(mode, process.cwd(), '');
+const env = loadEnv(mode, process.cwd(), "");
 
 export default defineConfig({
   input: `${env.VITE_API_BASE_URL}/v3/api-docs`,
-  output: 'src/sdk',
+  output: "src/sdk",
   plugins: [
     {
-      name: '@hey-api/client-axios',
-      runtimeConfigPath: '@/openapi-client-config.ts',
+      name: "@hey-api/client-axios",
+      runtimeConfigPath: "@/openapi-client-config.ts",
     },
-    '@tanstack/react-query',
-    'zod',
+    "@tanstack/react-query",
+    "zod",
     {
-      name: '@hey-api/sdk',
+      name: "@hey-api/sdk",
       validator: true,
     },
     {
-      name: '@hey-api/schemas',
-      type: 'json',
+      name: "@hey-api/schemas",
+      type: "json",
     },
   ],
 });

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

@@ -3,4 +3,3 @@ export default {
     "@tailwindcss/postcss": {},
   },
 };
-

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

@@ -1,15 +1,20 @@
-import { RouterProvider } from '@tanstack/react-router';
-import { useAtomValue } from 'jotai';
-import { Loader2 } from 'lucide-react';
-import { useEffect } from 'react';
-import { Toaster } from 'sonner';
-import '@/index.css';
-import { AuthProvider } from '@/modules/auth/contexts/auth-context';
-import { authTokenAtom, currentUserDetailsAtom, useValidateToken, setLocaleInClient } from '@/modules/auth/hooks/use-auth-hook';
-import { router } from '@/router';
-import { getLanguage, SupportedLanguages } from '@/lib/i18n';
+import { RouterProvider } from "@tanstack/react-router";
+import { useAtomValue } from "jotai";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { Toaster } from "sonner";
+import "@/index.css";
+import { AuthProvider } from "@/modules/auth/contexts/auth-context";
+import {
+  authTokenAtom,
+  currentUserDetailsAtom,
+  useValidateToken,
+  setLocaleInClient,
+} from "@/modules/auth/hooks/use-auth-hook";
+import { router } from "@/router";
+import { getLanguage, SupportedLanguages } from "@/lib/i18n";
 
-declare module '@tanstack/react-router' {
+declare module "@tanstack/react-router" {
   interface Register {
     router: typeof router;
   }
@@ -18,12 +23,7 @@ declare module '@tanstack/react-router' {
 function InnerApp() {
   const token = useAtomValue(authTokenAtom);
   const data = useAtomValue(currentUserDetailsAtom);
-  return (
-    <RouterProvider
-      router={router}
-      context={{ token, data }}
-    />
-  );
+  return <RouterProvider router={router} context={{ token, data }} />;
 }
 
 export default function App() {
@@ -44,14 +44,14 @@ export default function App() {
   if (!token || (!isPending && (isError || isSuccess))) {
     return (
       <AuthProvider>
-        <Toaster position='top-right' />
+        <Toaster position="top-right" />
         <InnerApp />
       </AuthProvider>
     );
   }
   return (
-    <div className='flex h-screen w-screen items-center justify-center'>
-      <Loader2 className='h-6 w-6 animate-spin' />
+    <div className="flex h-screen w-screen items-center justify-center">
+      <Loader2 className="h-6 w-6 animate-spin" />
     </div>
   );
 }

package/generators/app/templates/src/components/layout/language-switcher.tsx

@@ -1,39 +1,43 @@
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { getLanguage, changeLanguage } from '@/lib/i18n';
-import { useTranslation } from 'react-i18next';
-import { useEffect, useState } from 'react';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { getLanguage, changeLanguage } from "@/lib/i18n";
+import { useTranslation } from "react-i18next";
+import { useEffect, useState } from "react";
 
 export function LanguageSwitcher() {
   const { i18n } = useTranslation();
-  const [currentLang, setCurrentLang] = useState<'en' | 'ja'>(() => {
-    return (getLanguage() as 'en' | 'ja') || 'en';
+  const [currentLang, setCurrentLang] = useState<"en" | "ja">(() => {
+    return (getLanguage() as "en" | "ja") || "en";
   });
 
   useEffect(() => {
     const handleLanguageChange = (lng: string) => {
-      setCurrentLang(lng as 'en' | 'ja');
+      setCurrentLang(lng as "en" | "ja");
     };
 
-    i18n.on('languageChanged', handleLanguageChange);
+    i18n.on("languageChanged", handleLanguageChange);
     return () => {
-      i18n.off('languageChanged', handleLanguageChange);
+      i18n.off("languageChanged", handleLanguageChange);
     };
   }, [i18n]);
 
   const handleLanguageChange = (value: string) => {
-    changeLanguage(value as 'en' | 'ja');
+    changeLanguage(value as "en" | "ja");
   };
 
   return (
-    <Select
-      value={currentLang}
-      onValueChange={handleLanguageChange}>
-      <SelectTrigger className='min-w-[120px]'>
+    <Select value={currentLang} onValueChange={handleLanguageChange}>
+      <SelectTrigger className="min-w-[120px]">
         <SelectValue />
       </SelectTrigger>
       <SelectContent>
-        <SelectItem value='en'>English</SelectItem>
-        <SelectItem value='ja'>日本語</SelectItem>
+        <SelectItem value="en">English</SelectItem>
+        <SelectItem value="ja">日本語</SelectItem>
       </SelectContent>
     </Select>
   );

package/generators/app/templates/src/components/layout/page-layout.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { LanguageSwitcher } from "./language-switcher";
+import { ThemeSwitcher } from "./theme-switcher";
+
+export function PageLayout({
+  children,
+  actions,
+  mainClassName,
+}: {
+  children: ReactNode;
+  actions?: ReactNode;
+  mainClassName?: string;
+}) {
+  const { t } = useTranslation();
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b">
+        <div className="container mx-auto flex h-16 items-center justify-between px-4">
+          <h1 className="text-xl font-semibold">{t("app.title")}</h1>
+          <div className="flex items-center gap-4">
+            <ThemeSwitcher />
+            <LanguageSwitcher />
+            {actions}
+          </div>
+        </div>
+      </header>
+      <main className={mainClassName}>{children}</main>
+    </div>
+  );
+}

package/generators/app/templates/src/components/layout/theme-switcher.tsx

@@ -1,12 +1,12 @@
-import { Button } from '@/components/ui/button';
-import { ThemeTypes, useTheme } from '@/components/theme/theme-provider';
-import { Moon, Sun, Monitor } from 'lucide-react';
+import { Button } from "@/components/ui/button";
+import { ThemeTypes, useTheme } from "@/components/theme/theme-provider";
+import { Moon, Sun, Monitor } from "lucide-react";
 
 export function ThemeSwitcher() {
   const { theme, setTheme } = useTheme();
 
   const cycleTheme = () => {
-    const themes: ThemeTypes[] = ['light', 'dark', 'system'];
+    const themes: ThemeTypes[] = ["light", "dark", "system"];
     const currentIndex = themes.indexOf(theme);
     const nextIndex = (currentIndex + 1) % themes.length;
     setTheme(themes[nextIndex]);
@@ -14,23 +14,24 @@ export function ThemeSwitcher() {
 
   const getIcon = () => {
     switch (theme) {
-      case 'light':
-        return <Sun className='h-4 w-4' />;
-      case 'dark':
-        return <Moon className='h-4 w-4' />;
-      case 'system':
-        return <Monitor className='h-4 w-4' />;
+      case "light":
+        return <Sun className="h-4 w-4" />;
+      case "dark":
+        return <Moon className="h-4 w-4" />;
+      case "system":
+        return <Monitor className="h-4 w-4" />;
       default:
-        return <Monitor className='h-4 w-4' />;
+        return <Monitor className="h-4 w-4" />;
     }
   };
 
   return (
     <Button
-      variant='outline'
-      size='icon'
+      variant="outline"
+      size="icon"
       onClick={cycleTheme}
-      aria-label='Toggle theme'>
+      aria-label="Toggle theme"
+    >
       {getIcon()}
     </Button>
   );

package/generators/app/templates/src/components/theme/theme-provider.tsx

@@ -1,6 +1,6 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useState } from "react";
 
-export type ThemeTypes = 'dark' | 'light' | 'system';
+export type ThemeTypes = "dark" | "light" | "system";
 
 type ThemeProviderProps = {
   children: React.ReactNode;
@@ -14,28 +14,36 @@ type ThemeProviderState = {
 };
 
 const initialState: ThemeProviderState = {
-  theme: 'system' as ThemeTypes,
+  theme: "system" as ThemeTypes,
   setTheme: () => null,
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
-export function ThemeProvider({ children, defaultTheme = 'system', storageKey = 'vite-ui-theme', ...props }: ThemeProviderProps) {
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
   const [theme, setTheme] = useState<ThemeTypes>(() => {
     const stored = localStorage.getItem(storageKey);
-    if (stored && ['dark', 'light', 'system'].includes(stored)) {
+    if (stored && ["dark", "light", "system"].includes(stored)) {
       return stored as ThemeTypes;
     }
-    return 'system';
+    return defaultTheme;
   });
 
   useEffect(() => {
     const root = window.document.documentElement;
 
-    root.classList.remove('light', 'dark');
+    root.classList.remove("light", "dark");
 
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
       root.classList.add(systemTheme);
       return;
     }
@@ -52,9 +60,7 @@ export function ThemeProvider({ children, defaultTheme = 'system', storageKey =
   };
 
   return (
-    <ThemeProviderContext.Provider
-      {...props}
-      value={value}>
+    <ThemeProviderContext.Provider {...props} value={value}>
       {children}
     </ThemeProviderContext.Provider>
   );
@@ -62,6 +68,7 @@ export function ThemeProvider({ children, defaultTheme = 'system', storageKey =
 
 export const useTheme = () => {
   const context = useContext(ThemeProviderContext);
-  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider');
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
   return context;
 };

package/generators/app/templates/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -31,27 +31,28 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Button.displayName = "Button"
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };