@imksh/create 1.0.27 → 1.0.28

package/templates/react-ts/src/components/ui/Header.tsx

@@ -1,230 +0,0 @@
-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/react-ts/src/components/ui/SidebarHeader.tsx

@@ -1,27 +0,0 @@
-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/react-ts/src/components/ui/sidebar.tsx

@@ -1,152 +0,0 @@
-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/react-ts/src/config/api.ts

@@ -1,22 +0,0 @@
-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/react-ts/src/config/appConfig.ts

@@ -1,44 +0,0 @@
-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/react-ts/src/config/navigation.ts

@@ -1,14 +0,0 @@
-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/react-ts/src/hooks/useLenis.ts

@@ -1,28 +0,0 @@
-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/react-ts/src/hooks/usePwaInstall.ts

@@ -1,45 +0,0 @@
-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/react-ts/src/hooks/useWindowSize.ts

@@ -1,25 +0,0 @@
-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;