generator-kodly-react-app 1.0.15 → 1.0.17

package/generators/app/templates/scripts/check-duplicates.mjs

@@ -0,0 +1,28 @@
+import { createRequire } from "node:module";
+import { spawnSync } from "node:child_process";
+import path from "node:path";
+import { generatedFiles } from "./generated-files.mjs";
+
+const require = createRequire(import.meta.url);
+const binary = path.join(
+  path.dirname(require.resolve("jscpd/package.json")),
+  "run-jscpd.js",
+);
+const result = spawnSync(
+  process.execPath,
+  [
+    binary,
+    "src",
+    "--min-tokens",
+    "50",
+    "--threshold",
+    "0.5",
+    "--reporters",
+    "consoleFull",
+    "--ignore",
+    generatedFiles().join(","),
+  ],
+  { stdio: "inherit" },
+);
+if (result.error) console.error(result.error.message);
+process.exitCode = result.status ?? 1;

package/generators/app/templates/scripts/generated-files.mjs

@@ -0,0 +1,21 @@
+import fs from "node:fs";
+import path from "node:path";
+
+// Keep this policy in source: handwritten SDK wrappers must still be checked.
+/** @returns {string[]} */
+export function generatedFiles(directory = "src") {
+  if (!fs.existsSync(directory)) return [];
+  return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+    const file = path.join(directory, entry.name);
+    if (entry.isSymbolicLink()) return [];
+    if (entry.isDirectory()) return generatedFiles(file);
+    const generated =
+      /\.gen\.[cm]?[jt]sx?$/.test(file) || /\/client\/index\.ts$/.test(file);
+    return generated &&
+      /^\/\/ This file is auto-generated by @hey-api\/openapi-ts\r?\n/.test(
+        fs.readFileSync(file, "utf8"),
+      )
+      ? [file.replaceAll(path.sep, "/")]
+      : [];
+  });
+}

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-30">
         <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,36 +1,37 @@
-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]);
+    setTheme(themes[nextIndex] ?? "system");
   };
 
   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 };

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

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -10,12 +10,12 @@ const Card = React.forwardRef<
     ref={ref}
     className={cn(
       "rounded-xl border bg-card text-card-foreground shadow",
-      className
+      className,
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLDivElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLDivElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+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"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};