@imksh/create 1.0.0

package/templates/mern-ts/client/src/components/ui/Header.tsx

@@ -0,0 +1,230 @@
+import React, { useEffect, useRef } from "react";
+import { Link, useNavigate, useLocation } from "react-router-dom";
+import { FiMenu, FiBookOpen } from "react-icons/fi";
+import { Moon, Sun, X, Globe } from "lucide-react";
+import { useUiStore } from "../../store/useUiStore";
+import appConfig from "../../config/appConfig";
+import { useAuthStore } from "../../store/useAuthStore";
+import { getInitials } from "../../utils/getInitials";
+import { motion, AnimatePresence } from "framer-motion";
+import { navigation } from "../../config/navigation";
+
+const Header = () => {
+  const { 
+    theme, 
+    toggleTheme, 
+    isMobileMenuOpened: isMobileMenuOpen, 
+    setMobileMenuOpened: setIsMobilemenuOpen 
+  } = useUiStore();
+  const { user } = useAuthStore();
+  const navigate = useNavigate();
+  const location = useLocation().pathname;
+  const headerRef = useRef(null);
+
+  // Close mobile menu on scroll
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsMobilemenuOpen(false);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [setIsMobilemenuOpen]);
+
+  // Close mobile menu on click outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (headerRef.current && !headerRef.current.contains(event.target)) {
+        setIsMobilemenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [setIsMobilemenuOpen]);
+
+  return (
+    <header ref={headerRef} className="sticky top-0 z-40 p-4">
+      <div className="max-w-7xl mx-auto relative">
+        {/* Main Navbar Bar */}
+        <div className="bg-primary text-primary-content rounded-full shadow-lg px-5 py-2.5 flex items-center justify-between relative">
+          {/* Left */}
+          <div className="flex items-center gap-3">
+            <Link to="/" className="flex items-center gap-2">
+              {appConfig.app.logo ? (
+                <img src={appConfig.logo} alt="logo" className="h-10 w-10" />
+              ) : (
+                <div className="flex items-center">
+                  <div className="w-8 h-8 rounded-full bg-base-100/25 flex items-center justify-center text-primary-content shadow-inner">
+                    <FiBookOpen size={16} />
+                  </div>
+                </div>
+              )}
+
+              <span className="font-bold text-lg hidden sm:block">
+                {appConfig.app.name}
+              </span>
+            </Link>
+          </div>
+
+          {/* Center: Dynamic Navigation */}
+          <nav className="hidden lg:flex items-center gap-6 text-sm font-medium absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+            {navigation.map((item) => (
+              <Link 
+                key={item.path}
+                to={item.path} 
+                className={`hover:text-primary transition-colors ${
+                  location === item.path ? "text-white font-bold" : "text-white/80"
+                }`}
+              >
+                {item.title}
+              </Link>
+            ))}
+          </nav>
+
+          {/* Right */}
+          <div className="flex items-center gap-2">
+            {/* Desktop Theme Switcher */}
+            <button
+              onClick={toggleTheme}
+              className="hidden md:flex btn btn-outline btn-soft border-none btn-circle btn-xs"
+              title="Toggle Theme"
+            >
+              {theme === "dark" ? (
+                <Sun size={16} className="text-primary-content" />
+              ) : (
+                <Moon size={16} className="text-primary-content" />
+              )}
+            </button>
+
+            {/* Desktop Auth */}
+            {user ? (
+              <button
+                onClick={() => navigate("/profile")}
+                className="hidden md:flex btn btn-sm btn-circle overflow-hidden shadow-none hover:ring-1 hover:ring-offset-2 hover:ring-base-300 cursor-pointer btn-primary"
+              >
+                <img
+                  src={`https://placehold.co/600x400?text=${getInitials(user?.name) || "KS"}`}
+                  alt="avatar"
+                  className="w-full h-full object-cover object-center"
+                />
+              </button>
+            ) : (
+              <button
+                onClick={() => navigate("/login")}
+                className="hidden md:flex btn btn-primary btn-sm rounded-full px-4"
+              >
+                Login
+              </button>
+            )}
+
+            {/* Mobile Dropdown Menu Button */}
+            <button
+              onClick={() => setIsMobilemenuOpen(!isMobileMenuOpen)}
+              className="lg:hidden btn btn-outline btn-soft border-none btn-circle btn-xs text-primary-content transition-transform duration-200"
+              title="Toggle Menu"
+            >
+              {isMobileMenuOpen ? <X size={18} /> : <FiMenu size={18} />}
+            </button>
+          </div>
+        </div>
+
+        {/* Mobile Dropdown Menu style from user's request */}
+        <AnimatePresence>
+          {isMobileMenuOpen && (
+            <motion.div
+              initial={{ opacity: 0, y: -40 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -40 }}
+              transition={{ duration: 0.3 }}
+              className="lg:hidden mt-3 bg-primary backdrop-blur-lg rounded-2xl shadow-xl border border-white/20 overflow-hidden text-primary-content absolute w-full"
+            >
+              <div className="p-4 space-y-2">
+                {/* Dynamic Navigation Links */}
+                {navigation.map((item) => (
+                  <Link
+                    key={item.path}
+                    to={item.path}
+                    onClick={() => setIsMobilemenuOpen(false)}
+                    className={`block px-4 py-3 rounded-xl hover:bg-white/10 transition-colors font-semibold ${
+                      location === item.path ? "bg-white/15 text-white" : "text-white/80"
+                    }`}
+                  >
+                    {item.title}
+                  </Link>
+                ))}
+
+                {/* Theme Toggle */}
+                <button
+                  onClick={toggleTheme}
+                  className="w-full px-4 py-3 rounded-xl hover:bg-white/10 transition-colors flex items-center gap-3 font-semibold text-white/90"
+                >
+                  <span className="p-2 rounded-lg bg-white/10">
+                    {theme === "dark" ? <Sun size={16} /> : <Moon size={16} />}
+                  </span>
+                  <span>{theme === "dark" ? "Light Mode" : "Dark Mode"}</span>
+                </button>
+
+                {/* Language (Mock Selector matching user design layout) */}
+                <button className="w-full px-4 py-3 rounded-xl hover:bg-white/10 transition-colors flex items-center gap-3 font-semibold text-white/90">
+                  <span className="p-2 rounded-lg bg-white/10">
+                    <Globe size={16} />
+                  </span>
+                  <span>English</span>
+                </button>
+
+                {/* Auth Buttons */}
+                {!user ? (
+                  <div className="pt-4 mt-4 border-t border-white/10 space-y-2">
+                    <button
+                      onClick={() => {
+                        navigate("/login");
+                        setIsMobilemenuOpen(false);
+                      }}
+                      className="w-full px-4 py-3 bg-white/10 border border-white/20 text-white font-semibold rounded-xl hover:bg-white/20 transition-all"
+                    >
+                      Login
+                    </button>
+
+                    <button
+                      onClick={() => {
+                        navigate("/login");
+                        setIsMobilemenuOpen(false);
+                      }}
+                      className="w-full px-4 py-3 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all"
+                    >
+                      Register
+                    </button>
+                  </div>
+                ) : (
+                  <div className="pt-4 mt-4 border-t border-white/10 space-y-2">
+                    <div className="flex items-center gap-3 bg-white/10 p-3 rounded-xl border border-white/15">
+                      <img
+                        src={`https://placehold.co/100x100?text=${getInitials(user.name)}`}
+                        className="w-10 h-10 rounded-full border border-white/20 shrink-0"
+                        alt="avatar"
+                      />
+                      <div className="text-left">
+                        <div className="font-bold text-sm text-white">{user.name}</div>
+                        <div className="text-xs text-white/70 truncate max-w-[180px]">{user.email}</div>
+                      </div>
+                    </div>
+                    <button
+                      onClick={() => {
+                        setIsMobilemenuOpen(false);
+                        navigate("/profile");
+                      }}
+                      className="w-full px-4 py-3 bg-white text-primary font-semibold rounded-xl hover:bg-white/90 transition-all"
+                    >
+                      Profile
+                    </button>
+                  </div>
+                )}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

package/templates/mern-ts/client/src/components/ui/SidebarHeader.tsx

@@ -0,0 +1,27 @@
+import { FiMenu } from "react-icons/fi";
+import { useUiStore } from "../../store/useUiStore";
+
+const SidebarHeader = ({ title = "Dashboard", actions = null }) => {
+  const { toggleSidebar } = useUiStore();
+
+  return (
+    <header className="sticky top-0 z-30 h-16 bg-base-200 backdrop-blur border-b border-base-300 flex items-center justify-between px-4 lg:px-6">
+      <div className="flex items-center gap-3">
+        <button
+          onClick={toggleSidebar}
+          className="btn btn-square border-none bg-base-200 shadow-none text-base-content lg:hidden"
+        >
+          <FiMenu size={22} />
+        </button>
+
+        <h1 className="text-xl font-bold">{title}</h1>
+      </div>
+
+      <div className="flex items-center gap-2">
+        {actions}
+      </div>
+    </header>
+  );
+};
+
+export default SidebarHeader;

package/templates/mern-ts/client/src/components/ui/sidebar.tsx

@@ -0,0 +1,152 @@
+import { NavLink } from "react-router-dom";
+import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
+import { navigation } from "../../config/navigation";
+import { ChevronLeft, ChevronRight, Moon, Sun } from "lucide-react";
+import appConfig from "../../config/appConfig";
+import { motion, AnimatePresence } from "framer-motion";
+import useWindowSize from "../../hooks/useWindowSize";
+
+const Sidebar = () => {
+  const { open, close, collapsed, toggleCollapsed } = useUiStore();
+  const { theme, toggleTheme } = useUiStore();
+  const { width } = useWindowSize();
+  const isMobile = width < 1024; // lg breakpoint
+
+  const showSidebar = !isMobile || open;
+
+  return (
+    <>
+      {/* Overlay with AnimatePresence */}
+      <AnimatePresence>
+        {isMobile && open && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="fixed inset-0 bg-base-100/40 z-40 lg:hidden"
+            onClick={close}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* Sidebar with AnimatePresence */}
+      <AnimatePresence>
+        {showSidebar && (
+          <motion.aside
+            initial={isMobile ? { x: "-100%" } : false}
+            animate={{ x: 0 }}
+            exit={isMobile ? { x: "-100%" } : undefined}
+            transition={{ type: "tween", duration: 0.25, ease: "easeInOut" }}
+            className={`
+              fixed lg:static top-0 left-0 z-50
+              h-screen bg-base-200 border-r border-base-300
+              flex flex-col overflow-hidden
+              transition-[width] duration-300
+              ${collapsed ? "w-20" : "w-[75%] md:w-[16%] md:max-w-60"}
+            `}
+          >
+            {/* Header */}
+            <div className="h-16 border-b border-base-300 flex items-center justify-between px-5">
+              <div className="flex items-center gap-3">
+                {appConfig.app.img ? (
+                  <img
+                    src={appConfig.app.img}
+                    alt=""
+                    className="w-8 h-8 rounded-lg"
+                  />
+                ) : (
+                  <div className="flex items-center">
+                    <div className="bg-primary w-8 h-8 rounded-lg flex items-center justify-center text-primary-content font-bold">
+                      {appConfig.app.name.charAt(0)}
+                    </div>
+                  </div>
+                )}
+                <h1
+                  className={`text-xl font-black text-primary whitespace-nowrap overflow-hidden ${collapsed ? "hidden" : ""}`}
+                >
+                  {appConfig.app.name}
+                </h1>
+              </div>
+
+              <button
+                className={`btn btn-sm btn-circle btn-ghost md:hidden ${collapsed ? "hidden" : ""}`}
+                onClick={close}
+              >
+                <IoClose size={20} />
+              </button>
+            </div>
+
+            {/* Navigation */}
+            <nav className="flex-1 overflow-y-auto p-2.5 space-y-1" data-lenis-prevent>
+              {navigation.map((item) => {
+                const Icon = item.icon;
+
+                return (
+                  <NavLink
+                    key={item.path}
+                    to={item.path}
+                    onClick={isMobile ? close : undefined}
+                    className={({ isActive }) =>
+                      `flex items-center gap-3 rounded-box px-4 py-3 transition-all h-12 
+                      ${
+                        isActive
+                          ? "bg-primary text-primary-content"
+                          : "hover:bg-base-300"
+                      } ${collapsed ? "justify-center px-0" : ""}`
+                    }
+                    title={collapsed ? item.title : ""}
+                  >
+                    <Icon
+                      size={18}
+                      className={`shrink-0 ${collapsed && "mr-auto"}`}
+                    />
+
+                    {!collapsed && (
+                      <span className="font-medium transition-all duration-300">
+                        {item.title}
+                      </span>
+                    )}
+                  </NavLink>
+                );
+              })}
+            </nav>
+
+            {/* Footer with Collapse Button */}
+            <button
+              onClick={toggleTheme}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 md:px-4 text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 justify-between rounded-none ${collapsed ? "justify-center" : ""}`}
+              title="Toggle Theme"
+            >
+              {!collapsed && <span>{theme === "dark" ? "Dark" : "Light"}</span>}
+              <span className="btn btn-xs btn-ghost btn-circle ">
+                {theme === "dark" ? (
+                  <Sun size={16} className="shrink-0 " />
+                ) : (
+                  <Moon size={16} className="shrink-0" />
+                )}
+              </span>
+            </button>
+            <div className="p-3 border-t border-base-300/50 shrink-0 flex flex-col gap-2">
+              <button
+                onClick={toggleCollapsed}
+                className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 text-base-content/60 hover:text-base-content hover:bg-base-300/60 ${collapsed ? "justify-center" : ""}`}
+                title={collapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+              >
+                {collapsed ? (
+                  <ChevronRight size={18} className="shrink-0 mr-auto" />
+                ) : (
+                  <ChevronLeft size={18} className="shrink-0" />
+                )}
+                {!collapsed && <span className="truncate">Collapse</span>}
+              </button>
+            </div>
+          </motion.aside>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};
+
+export default Sidebar;

package/templates/mern-ts/client/src/config/api.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL || "http://localhost:5001/api",
+  withCredentials: true, // send httpOnly cookies on every request
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("token");
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);

package/templates/mern-ts/client/src/config/appConfig.ts

@@ -0,0 +1,44 @@
+const appConfig = {
+  app: {
+    name: "React App",
+    logo: "./logo.png",
+    shortName: "React",
+    description: "A React application built with @imksh/create",
+    version: "1.0.0",
+    author: "Karan Sharma",
+  },
+
+  api: {
+    baseURL: import.meta.env.VITE_API_URL,
+    timeout: 30000,
+  },
+
+  routes: {
+    home: "/",
+    login: "/login",
+    profile: "/profile",
+  },
+
+  pagination: {
+    pageSize: 10,
+  },
+
+  github: {
+    repository: "",
+  },
+
+  social: {
+    website: "",
+    linkedin: "",
+    github: "",
+    twitter: "",
+  },
+
+  features: {
+    darkMode: true,
+    notifications: true,
+    sidebar: true,
+  },
+};
+
+export default appConfig;

package/templates/mern-ts/client/src/config/navigation.ts

@@ -0,0 +1,14 @@
+import { FaHome, FaUser, FaCog, FaBook } from "react-icons/fa";
+
+export const navigation = [
+  {
+    title: "Home",
+    path: "/",
+    icon: FaHome,
+  },
+  {
+    title: "Profile",
+    path: "/profile",
+    icon: FaUser,
+  },
+];

package/templates/mern-ts/client/src/hooks/useLenis.ts

@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import Lenis from "lenis";
+
+const useLenis = () => {
+  useEffect(() => {
+    const lenis = new Lenis({
+      duration: 1.1, // reduce
+      easing: (t) => 1 - Math.pow(1 - t, 3),
+      smooth: true,
+      smoothTouch: false,
+    });
+
+    let rafId;
+    const raf = (time) => {
+      lenis.raf(time);
+      rafId = requestAnimationFrame(raf);
+    };
+
+    rafId = requestAnimationFrame(raf);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      lenis.destroy();
+    };
+  }, []);
+};
+
+export default useLenis;

package/templates/mern-ts/client/src/hooks/usePwaInstall.ts

@@ -0,0 +1,45 @@
+import { useState, useEffect } from "react";
+
+const usePwaInstall = () => {
+  const [canInstall, setCanInstall] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(false);
+  const [deferredPrompt, setDeferredPrompt] = useState(null);
+
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (e) => {
+      e.preventDefault();
+      setDeferredPrompt(e);
+      setCanInstall(true);
+    };
+
+    const handleAppInstalled = () => {
+      setIsInstalled(true);
+      setCanInstall(false);
+    };
+
+    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+    window.addEventListener("appinstalled", handleAppInstalled);
+
+    if (window.matchMedia("(display-mode: standalone)").matches) {
+      setIsInstalled(true);
+    }
+
+    return () => {
+      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+      window.removeEventListener("appinstalled", handleAppInstalled);
+    };
+  }, []);
+
+  const promptInstall = async () => {
+    if (!deferredPrompt) return null;
+    deferredPrompt.prompt();
+    const choiceResult = await deferredPrompt.userChoice;
+    setDeferredPrompt(null);
+    setCanInstall(false);
+    return choiceResult;
+  };
+
+  return { canInstall, isInstalled, promptInstall };
+};
+
+export default usePwaInstall;

package/templates/mern-ts/client/src/hooks/useWindowSize.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+const useWindowSize = () => {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+
+  useEffect(() => {
+    const handleResize = () => {
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return size;
+};
+
+export default useWindowSize;