generator-kodly-react-app 1.0.6 → 1.0.10

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

@@ -0,0 +1,184 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};
+

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

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

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

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <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
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

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

@@ -1,5 +1,8 @@
 @import "tailwindcss";
 
+@plugin "tailwindcss-animate";
+@import "tw-animate-css";
+
 @custom-variant dark (&:is(.dark *));
 
 body {
@@ -11,39 +14,73 @@ body {
 
 :root {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(59.56% 0.038 257.87);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
+  --foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(78.54% 0.124 238.13);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
   --radius: 0.625rem;
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
 }
 
 .dark {
-  --background: oklch(0.141 0.005 285.823);
-  --foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.141 0.005 285.823);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.274 0.006 286.033);
-  --input: oklch(0.274 0.006 286.033);
-  --ring: oklch(0.442 0.017 285.786);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
 }
 
 @theme inline {
@@ -66,6 +103,26 @@ body {
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
 @layer base {

package/generators/app/templates/src/lib/api/client.ts

@@ -1,8 +1,7 @@
-import axios from 'axios';
-import { handleBackendError } from '../utils/error-handler';
-
-const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8181';
+import axios, { AxiosResponse } from 'axios';
+import { handleBackendError } from '@/lib/utils/error-handler';
 
+const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
 export const client = axios.create({
   baseURL: apiBaseUrl,
   headers: {
@@ -12,7 +11,7 @@ export const client = axios.create({
 
 // Add response interceptor to handle non-2xx responses and network errors
 client.interceptors.response.use(
-  (response: any) => response,
+  (response: AxiosResponse) => response,
   (error: unknown) => {
     // Handle all errors: non-2xx responses and network errors
     if (error && typeof error === 'object' && 'response' in error) {

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

@@ -1,46 +1,61 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import en from "../locales/en.json";
+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';
 
-const getStoredLanguage = (): "en" => {
+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]());
+};
+
+const getStoredLanguage = (): SupportedLanguages => {
   try {
-    const stored = localStorage.getItem("app-language");
+    const stored = localStorage.getItem(localStorageKey);
     if (!stored) {
-      localStorage.setItem("app-language", "en");
-      return "en";
+      localStorage.setItem(localStorageKey, defaultLanguage);
+      return defaultLanguage;
     }
-    return "en";
+    return stored as SupportedLanguages;
   } catch {
-    return "en";
+    return defaultLanguage;
   }
 };
 
 if (!i18n.isInitialized) {
+  const lng = getStoredLanguage();
   i18n.use(initReactI18next).init({
     resources: {
-      en: { translation: en },
+      en: { translation: mergeTranslations('en') },
+      ja: { translation: mergeTranslations('ja') },
     },
-    supportedLngs: ["en"],
-    lng: getStoredLanguage(),
-    fallbackLng: "en",
+    supportedLngs: supportedLanguages,
+    lng,
+    fallbackLng: defaultLanguage,
     interpolation: {
       escapeValue: false,
     },
   });
+  setLanguageHooks(lng);
 }
 
 export const getLanguage = () => {
   return i18n.language;
 };
 
-export const changeLanguage = (language: "en") => {
+export const changeLanguage = (language: SupportedLanguages) => {
   try {
-    localStorage.setItem("app-language", language);
+    localStorage.setItem(localStorageKey, language);
   } catch {
     // Fallback if localStorage is not available
   }
   i18n.changeLanguage(language);
+  setLanguageHooks(language);
 };
 
 export default i18n;
-

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

@@ -0,0 +1,14 @@
+/**
+ * Centralized route constants for default navigation
+ */
+
+/**
+ * Default route for authenticated users
+ */
+export const DEFAULT_LOGGED_IN_ROUTE = '/app';
+
+/**
+ * Default route for non-authenticated users (landing page)
+ */
+export const DEFAULT_NON_LOGGED_IN_ROUTE = '/';
+

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

@@ -4,7 +4,7 @@ import { AxiosError } from 'axios';
 interface BackendErrorResponse {
   message?: string;
   status?: boolean;
-  data?: any;
+  data?: unknown;
 }
 
 /**
@@ -41,7 +41,12 @@ export const handleBackendError = (error: unknown): void => {
       // If the response doesn't match the expected format,
       // try to extract a message from the response data
       if (errorData && typeof errorData === 'object') {
-        const message = (errorData as any).message || (errorData as any).error || response.statusText || 'An error occurred';
+        const errorObj = errorData as Record<string, unknown>;
+        const message =
+          (typeof errorObj.message === 'string' ? errorObj.message : null) ||
+          (typeof errorObj.error === 'string' ? errorObj.error : null) ||
+          response.statusText ||
+          'An error occurred';
         toast.error(message);
         return;
       }

package/generators/app/templates/src/lib/utils/init-form-schema.ts

@@ -0,0 +1,12 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { init } from 'zod-empty';
+import * as z from 'zod';
+
+z.config(z.locales.ja());
+
+export function initFormSchema<T extends {}>(zodObject: any, defaultValues?: T) {
+  return {
+    defaultValues: defaultValues || (init(zodObject) as T),
+    resolver: zodResolver(zodObject) as any,
+  };
+}

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

@@ -1,7 +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/en/common.json

@@ -0,0 +1,5 @@
+{
+  "notFound": {
+    "message": "Page not found"
+  }
+}

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

@@ -0,0 +1,5 @@
+{
+  "light": "Light",
+  "dark": "Dark",
+  "system": "System"
+}

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

@@ -0,0 +1,31 @@
+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') {
+    return {
+      auth: { ...enAuth },
+      app: { ...enApp },
+      landing: { ...enLanding },
+      common: { ...enCommon },
+      theme: { ...enTheme },
+    };
+  } else {
+    return {
+      auth: { ...jaAuth },
+      app: { ...jaApp },
+      landing: { ...jaLanding },
+      common: { ...jaCommon },
+      theme: { ...jaTheme },
+    };
+  }
+};

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

@@ -0,0 +1,5 @@
+{
+  "notFound": {
+    "message": "ページが見つかりません"
+  }
+}

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

@@ -0,0 +1,6 @@
+{
+  "light": "ライト",
+  "dark": "ダーク",
+  "system": "システム"
+}
+

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

@@ -1,23 +1,27 @@
-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(
-    <I18nextProvider i18n={i18n}>
-      <ThemeProvider defaultTheme="light" storageKey="vite-ui-theme">
-        <QueryClientProvider client={queryClient}>
-          <App />
-        </QueryClientProvider>
-      </ThemeProvider>
-    </I18nextProvider>
+    <React.StrictMode>
+      <I18nextProvider i18n={i18n}>
+        <ThemeProvider
+          defaultTheme='light'
+          storageKey='vite-ui-theme'>
+          <QueryClientProvider client={queryClient}>
+            <App />
+          </QueryClientProvider>
+        </ThemeProvider>
+      </I18nextProvider>
+    </React.StrictMode>
   );
 }
-