@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react/javascript/src/components/common/Breadcrumbs.jsx

@@ -1,60 +1,64 @@
-import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Link } from "react-router-dom";
-import { ChevronRight } from "lucide-react";
-const Breadcrumbs = ({ items }) => {
-  return /* @__PURE__ */ jsx("div", {
-    className:
-      "flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap",
-    children: items.map((item, idx) => {
-      const isLast = idx === items.length - 1;
-      return /* @__PURE__ */ jsxs(
-        React.Fragment,
-        {
-          children: [
-            item.path && !isLast
-              ? /* @__PURE__ */ jsx(Link, {
-                  to: item.path,
-                  onClick: item.onClick,
-                  className:
-                    "hover:text-primary transition-colors hidden sm:flex items-center gap-1",
-                  children: item.label,
-                })
-              : item.onClick && !isLast
-                ? /* @__PURE__ */ jsx("button", {
-                    type: "button",
-                    onClick: item.onClick,
-                    className:
-                      "hover:text-primary transition-colors hidden sm:flex items-center gap-1",
-                    children: item.label,
-                  })
-                : /* @__PURE__ */ jsxs("div", {
-                    className: "flex flex-col",
-                    children: [
-                      /* @__PURE__ */ jsx("span", {
-                        className: isLast
-                          ? "text-lg md:text-xl font-bold leading-tight text-base-content tracking-tight truncate max-w-[200px] md:max-w-none"
-                          : "",
-                        children: item.label,
-                      }),
-                      item.subtitle &&
-                        /* @__PURE__ */ jsx("span", {
-                          className:
-                            "text-xs text-base-content/60 font-normal truncate",
-                          children: item.subtitle,
-                        }),
-                    ],
-                  }),
-            !isLast &&
-              /* @__PURE__ */ jsx(ChevronRight, {
-                size: 14,
-                className: "text-base-content/30 shrink-0 hidden sm:block",
-              }),
-          ],
-        },
-        idx,
-      );
-    }),
-  });
+import { Link, useNavigate } from "react-router-dom";
+import { ArrowLeft, ChevronRight } from "lucide-react";
+
+export const Breadcrumbs = ({ items }) => {
+  const navigation = useNavigate();
+  return (
+    <div className="flex items-center gap-1.5 text-sm font-bold text-base-content/50 flex-wrap">
+      <button
+        className="btn btn-primary btn-soft btn-square btn-sm mr-1 hidden md:flex"
+        onClick={() => navigation(-1)}
+      >
+        <ArrowLeft size={18} />
+      </button>
+      {items.map((item, idx) => {
+        const isLast = idx === items.length - 1;
+        return (
+          <React.Fragment key={idx}>
+            {item.path && !isLast ? (
+              <Link
+                to={item.path}
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
+                {item.label}
+              </Link>
+            ) : item.onClick && !isLast ? (
+              <button
+                type="button"
+                onClick={item.onClick}
+                className="hover:text-primary transition-colors hidden sm:flex items-center gap-1"
+              >
+                {item.label}
+              </button>
+            ) : (
+              <div className="flex flex-col">
+                <span
+                  className={
+                    isLast
+                      ? "text-lg md:text-xl font-bold leading-tight text-base-content tracking-tight truncate max-w-[200px] md:max-w-none"
+                      : ""
+                  }
+                >
+                  {item.label}
+                </span>
+                {item.subtitle && (
+                  <span className="text-xs text-base-content/60 font-normal truncate">
+                    {item.subtitle}
+                  </span>
+                )}
+              </div>
+            )}
+            {!isLast && (
+              <ChevronRight
+                size={14}
+                className="text-base-content/30 shrink-0 hidden sm:block"
+              />
+            )}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
 };
-export { Breadcrumbs };

package/templates/layers/react/javascript/src/components/common/Pagination.jsx

@@ -1,81 +1,169 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
-const Pagination = ({ currentPage, totalPages, onPageChange }) => {
+
+export const Pagination = ({ currentPage, totalPages, onPageChange }) => {
   if (totalPages <= 1) return null;
-  const maxVisiblePages = 5;
-  let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
-  const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
-  if (endPage - startPage + 1 < maxVisiblePages) {
-    startPage = Math.max(1, endPage - maxVisiblePages + 1);
+
+  // Desktop pagination: 5 pages with outer bounds & ellipsis
+  const maxDesktopPages = 5;
+  let startDesktopPage = Math.max(
+    1,
+    currentPage - Math.floor(maxDesktopPages / 2),
+  );
+  let endDesktopPage = Math.min(
+    totalPages,
+    startDesktopPage + maxDesktopPages - 1,
+  );
+  if (endDesktopPage - startDesktopPage + 1 < maxDesktopPages) {
+    startDesktopPage = Math.max(1, endDesktopPage - maxDesktopPages + 1);
   }
-  const pages = [];
-  for (let i = startPage; i <= endPage; i++) {
-    pages.push(i);
+  const desktopPages = [];
+  for (let i = startDesktopPage; i <= endDesktopPage; i++) {
+    desktopPages.push(i);
   }
-  return /* @__PURE__ */ jsxs("div", {
-    className:
-      "flex items-center justify-center gap-2 mt-10 p-2 rounded-2xl bg-base-100/50 backdrop-blur-sm border border-base-200/50 w-fit mx-auto shadow-sm",
-    children: [
-      /* @__PURE__ */ jsx("button", {
-        onClick: () => onPageChange(currentPage - 1),
-        disabled: currentPage === 1,
-        className:
-          "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent",
-        "aria-label": "Previous Page",
-        children: /* @__PURE__ */ jsx(ChevronLeft, { className: "w-5 h-5" }),
-      }),
-      startPage > 1 &&
-        /* @__PURE__ */ jsxs(Fragment, {
-          children: [
-            /* @__PURE__ */ jsx("button", {
-              onClick: () => onPageChange(1),
-              className:
-                "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content",
-              children: "1",
-            }),
-            startPage > 2 &&
-              /* @__PURE__ */ jsx("span", {
-                className: "px-1 text-base-content/40",
-                children: "...",
-              }),
-          ],
-        }),
-      pages.map((page) =>
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: () => onPageChange(page),
-            className: `flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-300 font-semibold ${currentPage === page ? "bg-primary text-primary-content shadow-lg shadow-primary/30 scale-105" : "text-base-content/70 hover:bg-base-content/10 hover:text-base-content"}`,
-            children: page,
-          },
-          page,
-        ),
-      ),
-      endPage < totalPages &&
-        /* @__PURE__ */ jsxs(Fragment, {
-          children: [
-            endPage < totalPages - 1 &&
-              /* @__PURE__ */ jsx("span", {
-                className: "px-1 text-base-content/40",
-                children: "...",
-              }),
-            /* @__PURE__ */ jsx("button", {
-              onClick: () => onPageChange(totalPages),
-              className:
-                "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 font-medium text-base-content/70 hover:bg-base-content/10 hover:text-base-content",
-              children: totalPages,
-            }),
-          ],
-        }),
-      /* @__PURE__ */ jsx("button", {
-        onClick: () => onPageChange(currentPage + 1),
-        disabled: currentPage === totalPages,
-        className:
-          "flex items-center justify-center w-10 h-10 rounded-xl transition-all duration-200 text-base-content/70 hover:bg-base-content/10 hover:text-base-content disabled:opacity-30 disabled:hover:bg-transparent",
-        "aria-label": "Next Page",
-        children: /* @__PURE__ */ jsx(ChevronRight, { className: "w-5 h-5" }),
-      }),
-    ],
-  });
+
+  // Small screen pagination: exactly 3 page circles
+  const maxMobilePages = 3;
+  let startMobilePage = Math.max(
+    1,
+    currentPage - Math.floor(maxMobilePages / 2),
+  );
+  let endMobilePage = Math.min(
+    totalPages,
+    startMobilePage + maxMobilePages - 1,
+  );
+  if (endMobilePage - startMobilePage + 1 < maxMobilePages) {
+    startMobilePage = Math.max(1, endMobilePage - maxMobilePages + 1);
+  }
+  const mobilePages = [];
+  for (let i = startMobilePage; i <= endMobilePage; i++) {
+    mobilePages.push(i);
+  }
+
+  const baseBtnClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1.5 sm:px-2 text-xs sm:text-sm font-medium transition-all duration-200 rounded-full bg-base-100 hover:bg-base-200 text-base-content/70 hover:text-base-content focus:z-10 focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm";
+  const activeBtnClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1.5 sm:px-2 text-xs sm:text-sm font-bold transition-all duration-200 rounded-full border border-primary bg-primary text-primary-content z-10 focus:outline-none focus:ring-2 focus:ring-primary/50 shadow-sm shadow-primary/20";
+  const disabledBtnClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1.5 sm:px-2 text-xs sm:text-sm font-medium transition-all duration-200 rounded-full bg-base-100 text-base-content/30 cursor-not-allowed shadow-sm";
+  const ellipsisClass =
+    "relative inline-flex items-center justify-center min-w-8 h-8 sm:min-w-9 sm:h-9 px-1 sm:px-2 text-xs sm:text-sm font-medium text-base-content/40 cursor-default";
+
+  return (
+    <>
+      {/* Mobile / Small Screen: 3 page circles + ellipses + boundary pages */}
+      <div className="flex sm:hidden items-center justify-center gap-1">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className={currentPage === 1 ? disabledBtnClass : baseBtnClass}
+          aria-label="Previous Page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+
+        {startMobilePage > 1 && (
+          <>
+            <button onClick={() => onPageChange(1)} className={baseBtnClass}>
+              1
+            </button>
+            {startMobilePage > 2 && <span className={ellipsisClass}>...</span>}
+          </>
+        )}
+
+        {mobilePages.map((page) => (
+          <button
+            key={`mobile-${page}`}
+            onClick={() => onPageChange(page)}
+            className={currentPage === page ? activeBtnClass : baseBtnClass}
+          >
+            {page}
+          </button>
+        ))}
+
+        {endMobilePage < totalPages && (
+          <>
+            {endMobilePage < totalPages - 1 && (
+              <span className={ellipsisClass}>...</span>
+            )}
+            <button
+              onClick={() => onPageChange(totalPages)}
+              className={baseBtnClass}
+            >
+              {totalPages}
+            </button>
+          </>
+        )}
+
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className={
+            currentPage === totalPages ? disabledBtnClass : baseBtnClass
+          }
+          aria-label="Next Page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+
+      {/* Desktop Screen: 5 page circles + ellipses + boundary pages */}
+      <div className="hidden sm:flex items-center justify-center gap-1.5">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className={currentPage === 1 ? disabledBtnClass : baseBtnClass}
+          aria-label="Previous Page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </button>
+
+        {startDesktopPage > 1 && (
+          <>
+            <button onClick={() => onPageChange(1)} className={baseBtnClass}>
+              1
+            </button>
+            {startDesktopPage > 2 && <span className={ellipsisClass}>...</span>}
+          </>
+        )}
+
+        {desktopPages.map((page) => (
+          <button
+            key={`desktop-${page}`}
+            onClick={() => onPageChange(page)}
+            className={currentPage === page ? activeBtnClass : baseBtnClass}
+          >
+            {page}
+          </button>
+        ))}
+
+        {endDesktopPage < totalPages && (
+          <>
+            {endDesktopPage < totalPages - 1 && (
+              <span className={ellipsisClass}>...</span>
+            )}
+            <button
+              onClick={() => onPageChange(totalPages)}
+              className={baseBtnClass}
+            >
+              {totalPages}
+            </button>
+          </>
+        )}
+
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage === totalPages}
+          className={
+            currentPage === totalPages ? disabledBtnClass : baseBtnClass
+          }
+          aria-label="Next Page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </button>
+      </div>
+    </>
+  );
 };
-export { Pagination };
+
+export default Pagination;

package/templates/layers/react/javascript/src/components/common/SidebarModal.jsx

@@ -0,0 +1,179 @@
+import React, { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { IoClose } from "react-icons/io5";
+import { useUiStore } from "../../store/useUiStore";
+
+export const SidebarModal = ({
+  isOpen,
+  onClose,
+  side = "right",
+  title,
+  description,
+  children,
+  width = "w-full sm:w-[420px]",
+  showCloseButton = true,
+  closeOnBackdrop = true,
+  closeOnEsc = true,
+  className = "",
+  header,
+  footer,
+  bodyClassName = "p-4 space-y-4",
+  hasBackdrop = true,
+}) => {
+  const setModalOpen = useUiStore((state) => state.setModalOpen);
+
+  // Sync with global UI store modal state for scroll locking
+  useEffect(() => {
+    if (isOpen) {
+      setModalOpen(true);
+      return () => {
+        setModalOpen(false);
+      };
+    }
+  }, [isOpen, setModalOpen]);
+
+  // Handle ESC key
+  useEffect(() => {
+    if (!isOpen || !closeOnEsc) return;
+
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, closeOnEsc, onClose]);
+
+  const slideVariants = {
+    hidden: {
+      x: side === "right" ? "100%" : "-100%",
+      opacity: 0.7,
+    },
+    visible: {
+      x: 0,
+      opacity: 1,
+      transition: {
+        type: "spring",
+        damping: 30,
+        stiffness: 300,
+        mass: 0.8,
+      },
+    },
+    exit: {
+      x: side === "right" ? "100%" : "-100%",
+      opacity: 0.5,
+      transition: {
+        type: "tween",
+        duration: 0.22,
+        ease: "easeInOut",
+      },
+    },
+  };
+
+  const backdropVariants = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition: { duration: 0.2 } },
+    exit: { opacity: 0, transition: { duration: 0.18 } },
+  };
+
+  const content = (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 overflow-hidden">
+          {/* Backdrop */}
+          {hasBackdrop && (
+            <motion.div
+              variants={backdropVariants}
+              initial="hidden"
+              animate="visible"
+              exit="exit"
+              className="fixed inset-0 bg-black/40 backdrop-blur-xs transition-opacity"
+              onClick={() => {
+                if (closeOnBackdrop) onClose();
+              }}
+            />
+          )}
+
+          {/* Sliding Panel */}
+          <div
+            className={`fixed inset-y-0 ${
+              side === "right" ? "right-0" : "left-0"
+            } max-w-full flex`}
+          >
+            <motion.div
+              variants={slideVariants}
+              initial="hidden"
+              animate="visible"
+              exit="exit"
+              className={`
+                relative h-full flex flex-col bg-base-100 border-base-300 shadow-2xl overflow-hidden
+                ${side === "right" ? "border-l" : "border-r"}
+                ${width}
+                ${className}
+              `}
+              onClick={(e) => e.stopPropagation()}
+            >
+              {/* Optional Custom Header or Default Header */}
+              {header ? (
+                <div className="shrink-0">{header}</div>
+              ) : title ? (
+                <div className="flex items-center justify-between p-4 border-b border-base-300 bg-base-200/40 shrink-0">
+                  <div className="flex-1 min-w-0 pr-2">
+                    <h2 className="text-base font-bold text-base-content truncate">
+                      {title}
+                    </h2>
+                    {description && (
+                      <p className="text-xs text-base-content/60 truncate mt-0.5">
+                        {description}
+                      </p>
+                    )}
+                  </div>
+                  {showCloseButton && (
+                    <button
+                      type="button"
+                      className="btn btn-circle btn-sm btn-error btn-soft text-error/70 hover:text-error hover:bg-error/20 hover:shadow-sm hover:rotate-180 transition-transform duration-200"
+                      onClick={onClose}
+                      title="Close"
+                    >
+                      <IoClose size={18} />
+                    </button>
+                  )}
+                </div>
+              ) : showCloseButton ? (
+                <button
+                  type="button"
+                  className="btn btn-circle btn-sm btn-error btn-soft text-error/70 hover:text-error hover:bg-error/20 hover:shadow-sm hover:rotate-180 transition-transform duration-200"
+                  onClick={onClose}
+                  title="Close"
+                >
+                  <IoClose size={18} />
+                </button>
+              ) : null}
+
+              {/* Scrollable Body */}
+              <div className={`flex-1 overflow-y-auto ${bodyClassName}`}>
+                {children}
+              </div>
+
+              {/* Optional Footer */}
+              {footer && (
+                <div className="p-4 border-t border-base-300 bg-base-200/30 shrink-0">
+                  {footer}
+                </div>
+              )}
+            </motion.div>
+          </div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+
+  return typeof document !== "undefined"
+    ? createPortal(content, document.body)
+    : null;
+};
+
+export default SidebarModal;