@imksh/create 1.0.26 → 1.0.28

package/templates/react/src/components/layout/SidebarLayout.jsx

@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-import { Outlet, useLocation } from "react-router-dom";
-import SidebarHeader from "../ui/SidebarHeader";
-import Sidebar from "../ui/sidebar";
-import { useUiStore } from "../../store/useUiStore";
-import appConfig from "../../config/appConfig";
-
-const SidebarLayout = () => {
-  const { headerTitle, headerActions, setHeaderTitle, setHeaderActions } =
-    useUiStore();
-  const { pathname } = useLocation();
-
-  // Reset header title and actions whenever the route shifts
-  useEffect(() => {
-    setHeaderTitle(appConfig.app.name);
-    setHeaderActions(null);
-  }, [pathname, setHeaderTitle, setHeaderActions]);
-
-  return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar />
-
-      <div className="flex flex-1 flex-col overflow-hidden">
-        <SidebarHeader title={headerTitle} actions={headerActions} />
-
-        <main
-          className="flex-1 h-full overflow-y-auto px-2 py-6 md:p-6 max-w-7xl"
-          data-lenis-prevent
-        >
-          <Outlet />
-        </main>
-      </div>
-    </div>
-  );
-};
-
-export default SidebarLayout;

package/templates/react/src/components/modals/ConfirmModal.jsx

@@ -1,135 +0,0 @@
-import { useEffect } from "react";
-import { createPortal } from "react-dom";
-import {
-  FaTriangleExclamation,
-  FaCircleInfo,
-  FaCircleCheck,
-  FaCircleXmark,
-} from "react-icons/fa6";
-
-const variants = {
-  warning: {
-    icon: FaTriangleExclamation,
-    iconBg: "bg-warning/15",
-    iconColor: "text-warning",
-    button: "btn-warning",
-  },
-  error: {
-    icon: FaCircleXmark,
-    iconBg: "bg-error/15",
-    iconColor: "text-error",
-    button: "btn-error",
-  },
-  success: {
-    icon: FaCircleCheck,
-    iconBg: "bg-success/15",
-    iconColor: "text-success",
-    button: "btn-success",
-  },
-  info: {
-    icon: FaCircleInfo,
-    iconBg: "bg-info/15",
-    iconColor: "text-info",
-    button: "btn-info",
-  },
-};
-
-const ConfirmModal = ({
-  open,
-  variant = "warning",
-  title = "Confirm Action",
-  message = "Are you sure you want to continue?",
-  confirmText = "Confirm",
-  cancelText = "Cancel",
-  loading = false,
-  closeOnBackdrop = true,
-  closeOnEsc = true,
-  onConfirm,
-  onCancel,
-}) => {
-  useEffect(() => {
-    if (!open || !closeOnEsc) return;
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onCancel?.();
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [open, closeOnEsc, onCancel]);
-
-  if (!open) return null;
-
-  const style = variants[variant] || variants.warning;
-  const Icon = style.icon;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-      {/* Backdrop */}
-
-      <div
-        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
-        onClick={closeOnBackdrop ? onCancel : undefined}
-      />
-
-      {/* Modal */}
-
-      <div className="relative w-full max-w-md mx-4 rounded-2xl bg-base-100 shadow-2xl animate-in fade-in zoom-in duration-200">
-        <div className="p-6">
-
-          <div className="flex gap-4">
-
-            <div
-              className={`w-14 h-14 rounded-full flex items-center justify-center shrink-0 ${style.iconBg}`}
-            >
-              <Icon className={`text-2xl ${style.iconColor}`} />
-            </div>
-
-            <div className="flex-1">
-
-              <h2 className="text-xl font-bold">
-                {title}
-              </h2>
-
-              <p className="mt-2 text-sm text-base-content/70 leading-relaxed">
-                {message}
-              </p>
-
-            </div>
-
-          </div>
-
-          <div className="mt-8 flex justify-end gap-3">
-
-            <button
-              className="btn btn-ghost"
-              disabled={loading}
-              onClick={onCancel}
-            >
-              {cancelText}
-            </button>
-
-            <button
-              className={`btn ${style.button}`}
-              disabled={loading}
-              onClick={onConfirm}
-            >
-              {loading && (
-                <span className="loading loading-spinner loading-xs" />
-              )}
-
-              {confirmText}
-            </button>
-
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body,
-  );
-};
-
-export default ConfirmModal;

package/templates/react/src/components/modals/Modal.jsx

@@ -1,94 +0,0 @@
-import { useEffect } from "react";
-import { createPortal } from "react-dom";
-import { IoClose } from "react-icons/io5";
-
-const sizes = {
-  sm: "max-w-sm",
-  md: "max-w-md",
-  lg: "max-w-lg",
-  xl: "max-w-2xl",
-  "2xl": "max-w-4xl",
-  full: "max-w-7xl",
-};
-
-const Modal = ({
-  open,
-  onClose,
-  title,
-  children,
-  size = "md",
-  closeOnBackdrop = true,
-  closeOnEsc = true,
-  showCloseButton = true,
-  footer,
-}) => {
-  useEffect(() => {
-    if (!open || !closeOnEsc) return;
-
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        onClose?.();
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-
-    return () =>
-      document.removeEventListener("keydown", handleKeyDown);
-  }, [open, closeOnEsc, onClose]);
-
-  if (!open) return null;
-
-  return createPortal(
-    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
-      {/* Backdrop */}
-      <div
-        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
-        onClick={closeOnBackdrop ? onClose : undefined}
-      />
-
-      {/* Modal */}
-      <div
-        className={`
-          relative
-          w-full
-          ${sizes[size]}
-          rounded-2xl
-          bg-base-100
-          shadow-2xl
-          border border-base-300
-          animate-in zoom-in-95 fade-in duration-200
-        `}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between border-b border-base-300 px-6 py-4">
-          <h2 className="text-lg font-bold">{title}</h2>
-
-          {showCloseButton && (
-            <button
-              className="btn btn-circle btn-sm btn-ghost"
-              onClick={onClose}
-            >
-              <IoClose size={20} />
-            </button>
-          )}
-        </div>
-
-        {/* Body */}
-        <div className="max-h-[70vh] overflow-y-auto p-6">
-          {children}
-        </div>
-
-        {/* Footer */}
-        {footer && (
-          <div className="border-t border-base-300 px-6 py-4">
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body,
-  );
-};
-
-export default Modal;

package/templates/react/src/components/skeletons/common/CardSkeleton.jsx

@@ -1,23 +0,0 @@
-import Skeleton from "./Skeleton";
-
-const CardSkeleton = () => {
-  return (
-    <div className="card bg-base-100 shadow border border-base-300">
-      <div className="card-body space-y-4">
-
-        <Skeleton className="h-40 w-full rounded-xl" />
-
-        <Skeleton className="h-6 w-2/3" />
-
-        <Skeleton className="h-4 w-full" />
-
-        <Skeleton className="h-4 w-5/6" />
-
-        <Skeleton className="h-10 w-28" />
-
-      </div>
-    </div>
-  );
-};
-
-export default CardSkeleton;

package/templates/react/src/components/skeletons/common/DashboardSkeleton.jsx

@@ -1,19 +0,0 @@
-import CardSkeleton from "./CardSkeleton";
-
-const DashboardSkeleton = () => {
-  return (
-    <div className="space-y-8">
-
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
-        {[...Array(4)].map((_, i) => (
-          <CardSkeleton key={i} />
-        ))}
-      </div>
-
-      <CardSkeleton />
-
-    </div>
-  );
-};
-
-export default DashboardSkeleton;

package/templates/react/src/components/skeletons/common/ListSkeleton.jsx

@@ -1,24 +0,0 @@
-import Skeleton from "./Skeleton";
-
-const ListSkeleton = ({ items = 6 }) => {
-  return (
-    <div className="space-y-4">
-      {Array.from({ length: items }).map((_, i) => (
-        <div
-          key={i}
-          className="flex items-center gap-4"
-        >
-          <Skeleton className="w-12 h-12 rounded-full" />
-
-          <div className="flex-1 space-y-2">
-            <Skeleton className="h-5 w-1/3" />
-
-            <Skeleton className="h-4 w-2/3" />
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default ListSkeleton;

package/templates/react/src/components/skeletons/common/PageSkeleton.jsx

@@ -1,26 +0,0 @@
-import Skeleton from "./Skeleton";
-
-const PageSkeleton = () => {
-  return (
-    <div className="space-y-8">
-
-      <Skeleton className="h-10 w-56" />
-
-      <Skeleton className="h-64 w-full rounded-2xl" />
-
-      <div className="grid md:grid-cols-3 gap-6">
-
-        {[1, 2, 3].map((i) => (
-          <Skeleton
-            key={i}
-            className="h-40 rounded-xl"
-          />
-        ))}
-
-      </div>
-
-    </div>
-  );
-};
-
-export default PageSkeleton;

package/templates/react/src/components/skeletons/common/ProfileSkeleton.jsx

@@ -1,23 +0,0 @@
-import Skeleton from "./Skeleton";
-
-const ProfileSkeleton = () => {
-  return (
-    <div className="flex gap-6 items-center">
-
-      <Skeleton className="w-24 h-24 rounded-full" />
-
-      <div className="flex-1 space-y-3">
-
-        <Skeleton className="h-6 w-48" />
-
-        <Skeleton className="h-4 w-64" />
-
-        <Skeleton className="h-10 w-32" />
-
-      </div>
-
-    </div>
-  );
-};
-
-export default ProfileSkeleton;

package/templates/react/src/components/skeletons/common/Skeleton.jsx

@@ -1,18 +0,0 @@
-const Skeleton = ({
-  className = "",
-  rounded = "rounded-lg",
-  animate = true,
-}) => {
-  return (
-    <div
-      className={`
-        bg-base-300
-        ${rounded}
-        ${animate ? "animate-pulse" : ""}
-        ${className}
-      `}
-    />
-  );
-};
-
-export default Skeleton;

package/templates/react/src/components/skeletons/common/TableSkeleton.jsx

@@ -1,33 +0,0 @@
-import Skeleton from "./Skeleton";
-
-const TableSkeleton = ({ rows = 6, columns = 5 }) => {
-  return (
-    <div className="overflow-x-auto border border-base-300 rounded-xl">
-      <table className="table">
-        <thead>
-          <tr>
-            {Array.from({ length: columns }).map((_, i) => (
-              <th key={i}>
-                <Skeleton className="h-4 w-20" />
-              </th>
-            ))}
-          </tr>
-        </thead>
-
-        <tbody>
-          {Array.from({ length: rows }).map((_, row) => (
-            <tr key={row}>
-              {Array.from({ length: columns }).map((_, col) => (
-                <td key={col}>
-                  <Skeleton className="h-4 w-full" />
-                </td>
-              ))}
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default TableSkeleton;

package/templates/react/src/components/ui/Header.jsx

@@ -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;