generator-kodly-react-app 1.0.14 → 1.0.16

package/generators/app/templates/src/components/ui/input-group.tsx

@@ -1,12 +1,12 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Textarea } from "@/components/ui/textarea"
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
 
 function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
   return (
@@ -29,11 +29,11 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
 
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupAddonVariants = cva(
@@ -54,8 +54,8 @@ const inputGroupAddonVariants = cva(
     defaultVariants: {
       align: "inline-start",
     },
-  }
-)
+  },
+);
 
 function InputGroupAddon({
   className,
@@ -70,13 +70,13 @@ function InputGroupAddon({
       className={cn(inputGroupAddonVariants({ align }), className)}
       onClick={(e) => {
         if ((e.target as HTMLElement).closest("button")) {
-          return
+          return;
         }
-        e.currentTarget.parentElement?.querySelector("input")?.focus()
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
       }}
       {...props}
     />
-  )
+  );
 }
 
 const inputGroupButtonVariants = cva(
@@ -94,8 +94,8 @@ const inputGroupButtonVariants = cva(
     defaultVariants: {
       size: "xs",
     },
-  }
-)
+  },
+);
 
 function InputGroupButton({
   className,
@@ -113,7 +113,7 @@ function InputGroupButton({
       className={cn(inputGroupButtonVariants({ size }), className)}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
@@ -121,11 +121,11 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
     <span
       className={cn(
         "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupInput({
@@ -137,11 +137,11 @@ function InputGroupInput({
       data-slot="input-group-control"
       className={cn(
         "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function InputGroupTextarea({
@@ -153,11 +153,11 @@ function InputGroupTextarea({
       data-slot="input-group-control"
       className={cn(
         "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
-        className
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -167,4 +167,4 @@ export {
   InputGroupText,
   InputGroupInput,
   InputGroupTextarea,
-}
+};

package/generators/app/templates/src/components/ui/input.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 Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -9,14 +9,14 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
         type={type}
         className={cn(
           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

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

@@ -1,12 +1,12 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -18,7 +18,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };

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

@@ -181,4 +181,3 @@ export {
   SelectTrigger,
   SelectValue,
 };
-

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

@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 >(
   (
     { className, orientation = "horizontal", decorative = true, ...props },
-    ref
+    ref,
   ) => (
     <SeparatorPrimitive.Root
       ref={ref}
@@ -20,12 +20,12 @@ const Separator = React.forwardRef<
       className={cn(
         "shrink-0 bg-border",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
+        className,
       )}
       {...props}
     />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+  ),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };

package/generators/app/templates/src/components/ui/textarea.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 Textarea = React.forwardRef<
   HTMLTextAreaElement,
@@ -10,13 +10,13 @@ const Textarea = React.forwardRef<
     <textarea
       className={cn(
         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        className
+        className,
       )}
       ref={ref}
       {...props}
     />
-  )
-})
-Textarea.displayName = "Textarea"
+  );
+});
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };

package/generators/app/templates/src/index.css

@@ -7,7 +7,18 @@
 
 body {
   @apply m-0;
-  font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -133,4 +144,3 @@ body {
     @apply bg-background text-foreground;
   }
 }
-

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

@@ -1,17 +1,19 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import { mergeTranslations } from '@/locales';
-import * as z from 'zod';
-import { setLocaleInClient } from '@/modules/auth/hooks/use-auth-hook';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import { mergeTranslations } from "@/locales";
+import * as z from "zod";
+import { setLocaleInClient } from "@/modules/auth/hooks/use-auth-hook";
 
-export type SupportedLanguages = 'en' | 'ja';
-const supportedLanguages: SupportedLanguages[] = ['en', 'ja'];
-const defaultLanguage: SupportedLanguages = 'en';
-const localStorageKey = 'app-language';
+export type SupportedLanguages = "en" | "ja";
+const supportedLanguages: SupportedLanguages[] = ["en", "ja"];
+const defaultLanguage: SupportedLanguages = "en";
+const localStorageKey = "app-language";
 
 const setLanguageHooks = (language: SupportedLanguages) => {
   setLocaleInClient(language);
-  z.config((z.locales[language] ?? z.locales[defaultLanguage] ?? z.locales['en'])());
+  z.config(
+    (z.locales[language] ?? z.locales[defaultLanguage] ?? z.locales["en"])(),
+  );
 };
 
 const getStoredLanguage = (): SupportedLanguages => {
@@ -29,8 +31,8 @@ const getStoredLanguage = (): SupportedLanguages => {
 
 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: {
@@ -42,8 +44,8 @@ if (!i18n.isInitialized) {
         ...jaResources,
       },
     },
-    defaultNS: 'translation',
-    ns: ['translation', 'auth', 'app', 'landing', 'common', 'theme'],
+    defaultNS: "translation",
+    ns: ["translation", "auth", "app", "landing", "common", "theme"],
     supportedLngs: supportedLanguages,
     lng,
     fallbackLng: defaultLanguage,

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

@@ -5,10 +5,9 @@
 /**
  * Default route for authenticated users
  */
-export const DEFAULT_LOGGED_IN_ROUTE = '/app';
+export const DEFAULT_LOGGED_IN_ROUTE = "/app";
 
 /**
  * Default route for non-authenticated users (landing page)
  */
-export const DEFAULT_NON_LOGGED_IN_ROUTE = '/';
-
+export const DEFAULT_NON_LOGGED_IN_ROUTE = "/";

package/generators/app/templates/src/lib/utils/error-handler.ts

@@ -1,5 +1,5 @@
-import { toast } from 'sonner';
-import { AxiosError } from 'axios';
+import { toast } from "sonner";
+import { AxiosError } from "axios";
 
 interface BackendErrorResponse {
   message?: string;
@@ -22,7 +22,7 @@ interface BackendErrorResponse {
  */
 export const handleBackendError = (error: unknown): void => {
   // Check if it's an AxiosError
-  if (error instanceof Error && 'isAxiosError' in error) {
+  if (error instanceof Error && "isAxiosError" in error) {
     const axiosError = error as AxiosError<BackendErrorResponse>;
     const response = axiosError.response;
 
@@ -31,46 +31,53 @@ export const handleBackendError = (error: unknown): void => {
       const errorData = response.data;
 
       // Check if the response matches the expected format
-      if (errorData && typeof errorData === 'object' && 'message' in errorData && 'status' in errorData) {
+      if (
+        errorData &&
+        typeof errorData === "object" &&
+        "message" in errorData &&
+        "status" in errorData
+      ) {
         // Use the message from the backend response
-        const errorMessage = errorData.message || 'An error occurred';
+        const errorMessage = errorData.message || "An error occurred";
         toast.error(errorMessage);
         return;
       }
 
       // If the response doesn't match the expected format,
       // try to extract a message from the response data
-      if (errorData && typeof errorData === 'object') {
+      if (errorData && typeof errorData === "object") {
         const errorObj = errorData as Record<string, unknown>;
         const message =
-          (typeof errorObj.message === 'string' ? errorObj.message : null) ||
-          (typeof errorObj.error === 'string' ? errorObj.error : null) ||
+          (typeof errorObj.message === "string" ? errorObj.message : null) ||
+          (typeof errorObj.error === "string" ? errorObj.error : null) ||
           response.statusText ||
-          'An error occurred';
+          "An error occurred";
         toast.error(message);
         return;
       }
     }
 
     // Handle network errors (no response) - connection refused, timeout, etc.
-    if (axiosError.code === 'ERR_NETWORK' || !response) {
-      const networkErrorMessage = axiosError.message || 'Network error. Please check your connection and try again.';
+    if (axiosError.code === "ERR_NETWORK" || !response) {
+      const networkErrorMessage =
+        axiosError.message ||
+        "Network error. Please check your connection and try again.";
       toast.error(networkErrorMessage);
       return;
     }
 
     // Fallback for other AxiosError cases
-    const errorMessage = axiosError.message || 'An error occurred';
+    const errorMessage = axiosError.message || "An error occurred";
     toast.error(errorMessage);
     return;
   }
 
   // If it's not an axios error, show a generic message
   if (error instanceof Error) {
-    toast.error(error.message || 'An error occurred');
+    toast.error(error.message || "An error occurred");
     return;
   }
 
   // Final fallback
-  toast.error('An unexpected error occurred');
+  toast.error("An unexpected error occurred");
 };

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

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

package/generators/app/templates/src/locales/index.ts

@@ -1,17 +1,17 @@
-import { SupportedLanguages } from '@/lib/i18n';
-import enAuth from '@/modules/auth/locales/auth-en.json';
-import enApp from '@/modules/app/locales/app-en.json';
-import enLanding from '@/modules/landing/locales/landing-en.json';
-import enCommon from '@/locales/en/common.json';
-import enTheme from '@/locales/en/theme.json';
-import jaAuth from '@/modules/auth/locales/auth-ja.json';
-import jaApp from '@/modules/app/locales/app-ja.json';
-import jaLanding from '@/modules/landing/locales/landing-ja.json';
-import jaCommon from '@/locales/ja/common.json';
-import jaTheme from '@/locales/ja/theme.json';
+import { SupportedLanguages } from "@/lib/i18n";
+import enAuth from "@/modules/auth/locales/auth-en.json";
+import enApp from "@/modules/app/locales/app-en.json";
+import enLanding from "@/modules/landing/locales/landing-en.json";
+import enCommon from "@/locales/en/common.json";
+import enTheme from "@/locales/en/theme.json";
+import jaAuth from "@/modules/auth/locales/auth-ja.json";
+import jaApp from "@/modules/app/locales/app-ja.json";
+import jaLanding from "@/modules/landing/locales/landing-ja.json";
+import jaCommon from "@/locales/ja/common.json";
+import jaTheme from "@/locales/ja/theme.json";
 
 export const mergeTranslations = (lang: SupportedLanguages) => {
-  if (lang === 'en') {
+  if (lang === "en") {
     return {
       auth: { ...enAuth },
       app: { ...enApp },

package/generators/app/templates/src/locales/ja/theme.json

@@ -3,4 +3,3 @@
   "dark": "ダーク",
   "system": "システム"
 }
-

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

@@ -1,27 +1,25 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '@/lib/i18n';
-import { ThemeProvider } from '@/components/theme/theme-provider';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import App from '@/app';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { I18nextProvider } from "react-i18next";
+import i18n from "@/lib/i18n";
+import { ThemeProvider } from "@/components/theme/theme-provider";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import App from "@/app";
 
 const queryClient = new QueryClient();
 
-const rootElement = document.getElementById('app');
+const rootElement = document.getElementById("app");
 if (rootElement && !rootElement.innerHTML) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
       <I18nextProvider i18n={i18n}>
-        <ThemeProvider
-          defaultTheme='light'
-          storageKey='vite-ui-theme'>
+        <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
           <QueryClientProvider client={queryClient}>
             <App />
           </QueryClientProvider>
         </ThemeProvider>
       </I18nextProvider>
-    </React.StrictMode>
+    </React.StrictMode>,
   );
 }

package/generators/app/templates/src/modules/app/layouts/app-layout.tsx

@@ -1,8 +1,7 @@
-import { LanguageSwitcher } from '@/components/layout/language-switcher';
-import { ThemeSwitcher } from '@/components/layout/theme-switcher';
-import { Button } from '@/components/ui/button';
-import { useLogout } from '@/modules/auth/hooks/use-auth-hook';
-import { useTranslation } from 'react-i18next';
+import { PageLayout } from "@/components/layout/page-layout";
+import { Button } from "@/components/ui/button";
+import { useLogout } from "@/modules/auth/hooks/use-auth-hook";
+import { useTranslation } from "react-i18next";
 
 export function AppLayout({ children }: { children: React.ReactNode }) {
   const { t } = useTranslation();
@@ -13,25 +12,15 @@ export function AppLayout({ children }: { children: React.ReactNode }) {
   };
 
   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'>
-          <div className='flex items-center gap-4'>
-            <h1 className='text-xl font-semibold'>{t('app.title')}</h1>
-          </div>
-          <div className='flex items-center gap-4'>
-            <ThemeSwitcher />
-            <LanguageSwitcher />
-            <Button
-              onClick={handleLogout}
-              disabled={isPending}
-              variant='outline'>
-              {t('app.welcome.logout')}
-            </Button>
-          </div>
-        </div>
-      </header>
-      <main className='container mx-auto p-8'>{children}</main>
-    </div>
+    <PageLayout
+      mainClassName="container mx-auto p-8"
+      actions={
+        <Button onClick={handleLogout} disabled={isPending} variant="outline">
+          {t("app.welcome.logout")}
+        </Button>
+      }
+    >
+      {children}
+    </PageLayout>
   );
 }

package/generators/app/templates/src/modules/app/locales/app-en.json

@@ -6,4 +6,3 @@
     "logout": "Logout"
   }
 }
-

package/generators/app/templates/src/modules/app/locales/app-ja.json

@@ -6,4 +6,3 @@
     "logout": "ログアウト"
   }
 }
-