@imksh/create 1.0.25 → 1.0.26

package/templates/next/src/store/useUiStore.js

@@ -17,12 +17,15 @@ export const useUiStore = create((set, get) => ({
     set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
   },
 
-  theme: localStorage.getItem("theme") || "light",
+  theme: typeof window !== "undefined" ? localStorage.getItem("theme") || "light" : "light",
 
   setTheme: (theme) => {
-    document.documentElement.setAttribute("data-theme", theme);
-
-    localStorage.setItem("theme", theme);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", theme);
+    }
 
     set({ theme });
   },
@@ -30,9 +33,12 @@ export const useUiStore = create((set, get) => ({
   toggleTheme: () => {
     const nextTheme = get().theme === "light" ? "dark" : "light";
 
-    document.documentElement.setAttribute("data-theme", nextTheme);
-
-    localStorage.setItem("theme", nextTheme);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", nextTheme);
+    }
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", nextTheme);
+    }
 
     set({ theme: nextTheme });
   },

package/templates/next-ts/AGENTS.md

@@ -0,0 +1,37 @@
+<!-- BEGIN:nextjs-agent-rules -->
+
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
+
+This block is written and re-added by `next dev` — verify at `node_modules/next/dist/server/lib/generate-agent-files.js`. Removing it from a diff only re-creates the uncommitted change; committing it with your work keeps the tree clean.
+
+<!-- END:nextjs-agent-rules -->
+
+# React Starter Template Rules
+
+When working on this template, adhere to the following tech stack and architectural conventions:
+
+## 1. Next.js 16 (App Router)
+- Always use the **App Router** (`src/app/`). Do NOT create a `pages/` directory.
+- Differentiate clearly between Server Components (default) and Client Components (add `"use client";` at the top). Use Client Components only when interactivity or browser APIs are required.
+- Do not create custom `_document.tsx` or `_app.tsx`. Use `layout.tsx`.
+
+## 2. Tailwind CSS v4
+- We use **Tailwind CSS v4**. Do not create or look for a `tailwind.config.js` or `tailwind.config.ts`.
+- All styling configuration, theme variables, and custom CSS should be handled in `src/index.css` using the new `@theme` syntax.
+- Do not use `@apply` if it can be solved with utility classes.
+
+## 3. FlyonUI
+- **FlyonUI v2** is pre-configured and available.
+- Prioritize using FlyonUI component classes (e.g., `btn`, `input`, `modal`, `card`) instead of building custom variants from scratch.
+- The plugin is initialized in `src/index.css` via `@plugin "flyonui";`.
+
+## 4. Zustand (State Management)
+- Place all global stores in `src/store/`.
+- **CRITICAL**: Be very careful with Server-Side Rendering (SSR) hydration mismatches when using Zustand. Do not initialize store values directly with browser APIs (e.g., `localStorage`). Always wrap browser API access in `typeof window !== "undefined"` checks or use a standard hydration mechanism.
+
+## 5. Components Architecture
+- Reusable, generic UI components (buttons, inputs) go in `src/components/ui/`.
+- Domain-specific or common page components go in `src/components/common/`.
+- Modals, layouts, and skeletons have their respective folders in `src/components/`.

package/templates/next-ts/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

package/templates/next-ts/_gitignore

@@ -1,24 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/templates/next-ts/next-env.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+import "./.next/dev/types/root-params.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

package/templates/next-ts/next.config.mjs

@@ -17,6 +17,7 @@ const nextConfig = {
       },
     ];
   },
+  turbopack: {},
 };
 
 export default withPWA(nextConfig);

package/templates/next-ts/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "next-ts-template",
+  "name": "client",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,28 +9,29 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.3",
     "@ducanh2912/next-pwa": "latest",
+    "@tailwindcss/postcss": "^4.3.3",
     "axios": "^1.6.0",
     "flyonui": "^2.4.1",
     "framer-motion": "^11.0.0",
     "lenis": "^1.1.3",
     "lottie-react": "^2.4.0",
-    "lucide-react": "^0.292.0",
+    "lucide-react": "^0.470.0",
+    "next": "^16.3.0",
+    "postcss": "^8.5.26",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
-    "tailwindcss": "^4.3.2",
-    "@tailwindcss/postcss": "^4.3.2",
+    "tailwindcss": "^4.3.3",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.3"
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "eslint": "^10.8.1",
+    "eslint-config-next": "^16.3.0",
+    "typescript": "^5"
   }
 }

package/templates/next-ts/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/templates/next-ts/src/app/error.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import React, { useEffect } from "react";
+import { FiAlertTriangle } from "react-icons/fi";
+import Link from "next/link";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center bg-base-100 text-base-content p-6 text-center">
+      <div className="bg-error/10 text-error p-6 rounded-full mb-6">
+        <FiAlertTriangle className="w-12 h-12" />
+      </div>
+      <h1 className="text-3xl font-bold mb-3">Something went wrong!</h1>
+      <p className="text-slate-500 mb-8 max-w-md">
+        An unexpected error occurred. We have been notified and are looking into it.
+      </p>
+      <div className="flex gap-4">
+        <button
+          onClick={() => reset()}
+          className="btn btn-primary rounded-xl"
+        >
+          Try again
+        </button>
+        <Link href="/" className="btn btn-outline rounded-xl">
+          Go Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/next-ts/src/app/layout.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Toaster } from "react-hot-toast";
 import Scroll from "../components/common/Scroll";
 import SEO from "../components/common/SEO";
-import "../index.css"; // Assuming index.css contains Tailwind
+import "../index.css";
 import appConfig from "../config/appConfig";
 
 export const metadata = {
@@ -32,6 +32,7 @@ export default function RootLayout({
         <div className="min-h-screen bg-base-100 text-base-content font-sans">
           <Toaster position="top-right" />
           <Scroll />
+          
           {children}
         </div>
       </body>

package/templates/next-ts/src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import NotFoundComponent from "../components/common/NotFound";
+
+export default function NotFound() {
+  return <NotFoundComponent />;
+}

package/templates/next-ts/src/app/page.tsx

@@ -2,7 +2,7 @@
 import React from "react";
 import Link from "next/link";
 import { motion } from "framer-motion";
-import { FiZap, FiLayers, FiCpu, FiShield, FiArrowRight } from "react-icons/fi";
+import { FiZap, FiLayers, FiCpu, FiShield } from "react-icons/fi";
 import appConfig from "../config/appConfig";
 import toast from "react-hot-toast";
 import { useState } from "react";

package/templates/next-ts/src/components/layout/ProtectedRoute.tsx

@@ -14,16 +14,16 @@ const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children, role }) => {
   const router = useRouter();
 
   useEffect(() => {
-    if (!loading) {
+    if (!isCheckingAuth) {
       if (!user) {
         router.replace("/login");
       } else if (role && user.role !== role) {
         router.replace("/");
       }
     }
-  }, [user, loading, role, router]);
+  }, [user, isCheckingAuth, role, router]);
 
-  if (loading || !user || (role && user.role !== role)) return <Loading />;
+  if (isCheckingAuth || !user || (role && user.role !== role)) return <Loading />;
 
   return <>{children}</>;
 };

package/templates/next-ts/src/components/ui/Button.tsx

@@ -0,0 +1,63 @@
+import React, { ButtonHTMLAttributes } from "react";
+import { FiLoader } from "react-icons/fi";
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary" | "accent" | "info" | "success" | "warning" | "error" | "ghost" | "outline";
+  size?: "xs" | "sm" | "md" | "lg";
+  isLoading?: boolean;
+  fullWidth?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  fullWidth = false,
+  className = "",
+  disabled,
+  ...props
+}) => {
+  // FlyonUI standard button classes
+  const baseClasses = "btn transition-all duration-200";
+  
+  const variantClasses = {
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    accent: "btn-accent",
+    info: "btn-info",
+    success: "btn-success",
+    warning: "btn-warning",
+    error: "btn-error",
+    ghost: "btn-ghost",
+    outline: "btn-outline",
+  };
+
+  const sizeClasses = {
+    xs: "btn-xs",
+    sm: "btn-sm",
+    md: "",
+    lg: "btn-lg",
+  };
+
+  const classes = [
+    baseClasses,
+    variantClasses[variant],
+    sizeClasses[size],
+    fullWidth ? "w-full" : "",
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <button
+      className={classes}
+      disabled={isLoading || disabled}
+      {...props}
+    >
+      {isLoading ? <FiLoader className="animate-spin mr-2" /> : null}
+      {children}
+    </button>
+  );
+};
+
+export default Button;

package/templates/next-ts/src/components/ui/Input.tsx

@@ -0,0 +1,79 @@
+import React, { InputHTMLAttributes, ReactNode } from "react";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  leftIcon?: ReactNode;
+  rightIcon?: ReactNode;
+  fullWidth?: boolean;
+}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      label,
+      error,
+      helperText,
+      leftIcon,
+      rightIcon,
+      fullWidth = true,
+      className = "",
+      id,
+      ...props
+    },
+    ref
+  ) => {
+    const inputId = id || (label ? label.toLowerCase().replace(/\s+/g, "-") : undefined);
+
+    const inputClasses = [
+      "input input-bordered",
+      error ? "input-error" : "",
+      leftIcon ? "pl-10" : "",
+      rightIcon ? "pr-10" : "",
+      fullWidth ? "w-full" : "",
+      className,
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return (
+      <div className={`form-control ${fullWidth ? "w-full" : ""}`}>
+        {label && (
+          <label htmlFor={inputId} className="label">
+            <span className="label-text font-medium">{label}</span>
+          </label>
+        )}
+        <div className="relative flex items-center">
+          {leftIcon && (
+            <div className="absolute left-3 text-base-content/50 pointer-events-none">
+              {leftIcon}
+            </div>
+          )}
+          <input
+            id={inputId}
+            ref={ref}
+            className={inputClasses}
+            {...props}
+          />
+          {rightIcon && (
+            <div className="absolute right-3 text-base-content/50 pointer-events-none">
+              {rightIcon}
+            </div>
+          )}
+        </div>
+        {(error || helperText) && (
+          <label className="label">
+            <span className={`label-text-alt ${error ? "text-error" : "text-base-content/70"}`}>
+              {error || helperText}
+            </span>
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+
+export default Input;

package/templates/next-ts/src/index.css

@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
 @import "tailwindcss";
+@source "./";
 @plugin "flyonui";
 
 

package/templates/next-ts/src/store/useUiStore.ts

@@ -37,12 +37,15 @@ export const useUiStore = create<UiState>((set, get) => ({
     set((state) => ({ isMobileMenuOpened: !state.isMobileMenuOpened }));
   },
 
-  theme: localStorage.getItem("theme") || "light",
+  theme: typeof window !== "undefined" ? localStorage.getItem("theme") || "light" : "light",
 
   setTheme: (theme) => {
-    document.documentElement.setAttribute("data-theme", theme);
-
-    localStorage.setItem("theme", theme);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", theme);
+    }
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", theme);
+    }
 
     set({ theme });
   },
@@ -50,9 +53,12 @@ export const useUiStore = create<UiState>((set, get) => ({
   toggleTheme: () => {
     const nextTheme = get().theme === "light" ? "dark" : "light";
 
-    document.documentElement.setAttribute("data-theme", nextTheme);
-
-    localStorage.setItem("theme", nextTheme);
+    if (typeof document !== "undefined") {
+      document.documentElement.setAttribute("data-theme", nextTheme);
+    }
+    if (typeof window !== "undefined") {
+      localStorage.setItem("theme", nextTheme);
+    }
 
     set({ theme: nextTheme });
   },

package/templates/next-ts/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package/templates/production-fullstack/client/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/production-fullstack/client/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "client",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.7.1",
+    "@tailwindcss/vite": "^4.3.2",
+    "@tanstack/react-query": "^5.101.4",
+    "axios": "^1.6.0",
+    "dayjs": "^1.11.21",
+    "flyonui": "^2.4.1",
+    "framer-motion": "^11.0.0",
+    "lenis": "^1.1.3",
+    "lottie-react": "^2.4.0",
+    "lucide-react": "^0.292.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.84.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.11.0",
+    "react-router-dom": "^6.18.0",
+    "socket.io-client": "^4.8.3",
+    "tailwindcss": "^4.3.2",
+    "zod": "^4.4.3",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  }
+}

package/templates/production-fullstack/client/public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200