npm - generator-kodly-react-app - Versions diffs - 1.0.7 → 1.0.11 - Mend

generator-kodly-react-app 1.0.7 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/generators/app/templates/gitignore.template CHANGED Viewed

@@ -1,10 +1,86 @@
+# Dependencies
 node_modules
-.DS_Store
+.pnp
+.pnp.js
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+# Build outputs
 dist
 dist-ssr
 dist-electron
-*.local
+build
+out
+.next
+.nuxt
+.output
+# Environment variables
 .env
 .env.local
+.env.development.local
+.env.test.local
+.env.production.local
 .env.*.local
+*.local
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+# OS files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+Desktop.ini
+# IDE and editors
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+*.swp
+*.swo
+*~
+.project
+.classpath
+.settings/
+*.sublime-project
+*.sublime-workspace
+# Testing
+coverage
+*.lcov
+.nyc_output
+.jest
+.cache
+# TypeScript
+*.tsbuildinfo
+.tsbuildinfo
+# Temporary files
+*.tmp
+*.temp
+.cache
+.parcel-cache
+.turbo
+# Package manager
+.pnpm-store
+# Misc
+*.pem
+.vite
+.swc

package/generators/app/templates/index.html CHANGED Viewed

@@ -4,15 +4,23 @@
     <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 %> Application" />
+      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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,47 +1,61 @@
 {
-  "name": "<%= appNameSlug %>",
+  "name": "app",
   "private": true,
   "type": "module",
   "version": "0.0.1",
   "scripts": {
     "generate-routes": "tsr generate",
     "watch-routes": "tsr watch",
-    "vite:dev": "vite",
+    "vite": "vite",
+    "vite:dev": "vite --mode dev",
+    "vite:sandbox": "vite --mode sandbox",
     "dev": "npm-run-all --parallel watch-routes vite:dev",
-    "start": "dev",
-    "build": "npm run generate-routes && vite build && tsc",
-    "serve": "vite preview"
+    "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.555.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"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "<%= TAILWIND_VERSION %>",
-    "@tailwindcss/vite": "<%= TAILWIND_VERSION %>",
-    "@tanstack/router-cli": "^1.139.14",
-    "@types/node": "^24.10.1",
+    "@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 %>",
+    "@vitejs/plugin-react": "^5.1.2",
+    "babel-plugin-react-compiler": "^1.0.0",
     "npm-run-all": "^4.1.5",
-    "tailwindcss": "<%= TAILWIND_VERSION %>",
-    "typescript": "<%= TYPESCRIPT_VERSION %>",
-    "vite": "<%= VITE_VERSION %>"
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1"
   }
 }

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

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 }