generator-kodly-react-app 1.0.6 → 1.0.10

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

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

package/generators/app/templates/package.json

@@ -1,42 +1,62 @@
 {
-  "name": "<%= appNameSlug %>",
+  "name": "app",
   "private": true,
   "type": "module",
   "version": "0.0.1",
   "scripts": {
-    "dev": "vite",
-    "start": "vite",
-    "build": "vite build && tsc",
-    "serve": "vite preview"
+    "generate-routes": "tsr generate",
+    "watch-routes": "tsr watch",
+    "vite": "vite",
+    "vite:dev": "vite --mode dev",
+    "vite:sandbox": "vite --mode sandbox",
+    "dev": "npm-run-all --parallel watch-routes vite:dev",
+    "dev:sandbox": "npm-run-all --parallel watch-routes vite:sandbox",
+    "build": "npm run generate-routes && vite build --mode dev && tsc",
+    "build:sandbox": "npm run generate-routes && vite build --mode sandbox && tsc",
+    "serve": "vite preview",
+    "openapi-ts:dev": "MODE=dev openapi-ts",
+    "openapi-ts:sandbox": "MODE=sandbox openapi-ts"
   },
   "dependencies": {
+    "@hey-api/openapi-ts": "^0.90.2",
+    "@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": "<%= TANSTACK_REACT_QUERY_VERSION %>",
-    "@tanstack/react-router": "<%= TANSTACK_ROUTER_VERSION %>",
-    "@tanstack/router-plugin": "<%= TANSTACK_ROUTER_PLUGIN_VERSION %>",
-    "axios": "<%= AXIOS_VERSION %>",
+    "@tanstack/react-query": "^5.90.16",
+    "@tanstack/react-router": "^1.145.7",
+    "@tanstack/router-plugin": "^1.145.7",
+    "axios": "^1.13.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "dotenv": "<%= DOTENV_VERSION %>",
-    "i18next": "<%= I18NEXT_VERSION %>",
-    "jotai": "<%= JOTAI_VERSION %>",
-    "lucide-react": "^0.554.0",
-    "react": "<%= REACT_VERSION %>",
-    "react-dom": "<%= REACT_DOM_VERSION %>",
-    "react-i18next": "<%= REACT_I18NEXT_VERSION %>",
+    "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",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.5",
+    "zod-empty": "^2.0.2"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "<%= TAILWIND_VERSION %>",
-    "@tailwindcss/vite": "<%= TAILWIND_VERSION %>",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.6",
+    "@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",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "cross-env": "<%= CROSS_ENV_VERSION %>",
-    "tailwindcss": "<%= TAILWIND_VERSION %>",
-    "typescript": "<%= TYPESCRIPT_VERSION %>",
-    "vite": "<%= VITE_VERSION %>"
+    "@vitejs/plugin-react": "^5.1.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "npm-run-all": "^4.1.5",
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   }
 }

package/generators/app/templates/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="10" fill="#000000"/>
+  <path d="M 9 7 L 9 25 M 9 16 L 19 7 M 9 16 L 19 25" stroke="#ffffff" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+</svg>

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

@@ -3,11 +3,11 @@ 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/auth-context';
-import { authTokenAtom, currentUserDetailsAtom, useValidateToken, setLocaleInAxios } from './modules/auth/use-auth-hook';
-import { router } from './router';
-import { getLanguage } from './lib/i18n';
+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' {
   interface Register {
@@ -31,13 +31,13 @@ export default function App() {
   const token = useAtomValue(authTokenAtom);
 
   useEffect(() => {
-    const currentLanguage = getLanguage() as 'en';
-    setLocaleInAxios(currentLanguage);
+    const currentLanguage = getLanguage() as SupportedLanguages;
+    setLocaleInClient(currentLanguage);
   }, []);
 
   useEffect(() => {
     if (token) {
-      mutate();
+      mutate({});
     }
   }, [token, mutate]);
 

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

@@ -0,0 +1,40 @@
+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';
+  });
+
+  useEffect(() => {
+    const handleLanguageChange = (lng: string) => {
+      setCurrentLang(lng as 'en' | 'ja');
+    };
+
+    i18n.on('languageChanged', handleLanguageChange);
+    return () => {
+      i18n.off('languageChanged', handleLanguageChange);
+    };
+  }, [i18n]);
+
+  const handleLanguageChange = (value: string) => {
+    changeLanguage(value as 'en' | 'ja');
+  };
+
+  return (
+    <Select
+      value={currentLang}
+      onValueChange={handleLanguageChange}>
+      <SelectTrigger className='min-w-[120px]'>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value='en'>English</SelectItem>
+        <SelectItem value='ja'>日本語</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}

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

@@ -0,0 +1,37 @@
+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 currentIndex = themes.indexOf(theme);
+    const nextIndex = (currentIndex + 1) % themes.length;
+    setTheme(themes[nextIndex]);
+  };
+
+  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' />;
+      default:
+        return <Monitor className='h-4 w-4' />;
+    }
+  };
+
+  return (
+    <Button
+      variant='outline'
+      size='icon'
+      onClick={cycleTheme}
+      aria-label='Toggle theme'>
+      {getIcon()}
+    </Button>
+  );
+}

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

@@ -1,45 +1,41 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from 'react';
 
-type Theme = "dark" | "light" | "system";
+export type ThemeTypes = 'dark' | 'light' | 'system';
 
 type ThemeProviderProps = {
   children: React.ReactNode;
-  defaultTheme?: Theme;
+  defaultTheme?: ThemeTypes;
   storageKey?: string;
 };
 
 type ThemeProviderState = {
-  theme: Theme;
-  setTheme: (theme: Theme) => void;
+  theme: ThemeTypes;
+  setTheme: (theme: ThemeTypes) => void;
 };
 
 const initialState: ThemeProviderState = {
-  theme: "system",
+  theme: 'system' as ThemeTypes,
   setTheme: () => null,
 };
 
 const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
-export function ThemeProvider({
-  children,
-  defaultTheme = "system",
-  storageKey = "vite-ui-theme",
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
-  );
+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)) {
+      return stored as ThemeTypes;
+    }
+    return 'system';
+  });
 
   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;
     }
@@ -49,14 +45,16 @@ export function ThemeProvider({
 
   const value = {
     theme,
-    setTheme: (theme: Theme) => {
+    setTheme: (theme: ThemeTypes) => {
       localStorage.setItem(storageKey, theme);
       setTheme(theme);
     },
   };
 
   return (
-    <ThemeProviderContext.Provider {...props} value={value}>
+    <ThemeProviderContext.Provider
+      {...props}
+      value={value}>
       {children}
     </ThemeProviderContext.Provider>
   );
@@ -64,10 +62,6 @@ export function ThemeProvider({
 
 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,23 +1,28 @@
-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 * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+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-all disabled:cursor-not-allowed disabled:opacity-50 hover:cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring",
+  "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",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-border bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3",
+        sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
       },
@@ -27,29 +32,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-);
-
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  type,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
+)
 
-  return (
-    <Comp
-      type={type ?? "button"}
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
 }
 
-export { Button, buttonVariants };
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
 
+export { Button, buttonVariants }

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

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }