@imksh/create 1.0.30 → 1.0.32

package/templates/layers/react/typescript/src/components/common/SidebarModal.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, ReactNode } 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 type SidebarModalSide = "left" | "right";
+
+export interface SidebarModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  side?: SidebarModalSide;
+  title?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+  width?: string;
+  showCloseButton?: boolean;
+  closeOnBackdrop?: boolean;
+  closeOnEsc?: boolean;
+  className?: string;
+  header?: ReactNode;
+  footer?: ReactNode;
+  bodyClassName?: string;
+  hasBackdrop?: boolean;
+}
+
+export const SidebarModal: React.FC<SidebarModalProps> = ({
+  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: KeyboardEvent) => {
+      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;

package/templates/layers/react/typescript/src/components/common/StatsCard.tsx

@@ -0,0 +1,231 @@
+import React, { ReactNode } from "react";
+
+export type StatsCardColor =
+  | "blue"
+  | "emerald"
+  | "amber"
+  | "purple"
+  | "primary"
+  | "secondary"
+  | "success"
+  | "warning"
+  | "info"
+  | "error";
+
+export interface StatsCardTrend {
+  value: string | number;
+  isPositive?: boolean;
+  label?: string;
+}
+
+export interface StatsCardBadge {
+  label: string | number;
+  variant?:
+    | "info"
+    | "success"
+    | "warning"
+    | "error"
+    | "neutral"
+    | "ghost"
+    | "secondary"
+    | "primary";
+}
+
+export interface StatsCardProps {
+  /** Main title or label of the stat card */
+  title: ReactNode;
+  /** Primary metric value (e.g. number, count, currency) */
+  value: ReactNode;
+  /** Secondary value displayed beside the main value (e.g. "75%", "Queue", "USD") */
+  subValue?: ReactNode;
+  /** Trend indicator with direction and value */
+  trend?: StatsCardTrend | ReactNode;
+  /** Badge displayed in the bottom footer row */
+  badge?: StatsCardBadge | ReactNode;
+  /** Descriptive subtext displayed in the footer row */
+  description?: ReactNode;
+  /** Icon displayed in the top-right corner */
+  icon?: ReactNode;
+  /** Color theme for icon container and active selection border */
+  color?: StatsCardColor;
+  /** Active selection state with highlighting ring */
+  active?: boolean;
+  /** Displays a loading spinner in place of value */
+  loading?: boolean;
+  /** Click handler for interactive selection / drill-down */
+  onClick?: () => void;
+  /** Custom additional container classes */
+  className?: string;
+  /** @deprecated use `subValue` instead */
+  percentage?: number | string;
+}
+
+const COLOR_STYLES: Record<
+  StatsCardColor,
+  {
+    icon: string;
+    activeBorder: string;
+  }
+> = {
+  blue: {
+    icon: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+    activeBorder:
+      "border-blue-500/50 shadow-sm ring-1 ring-blue-500/20 bg-gradient-to-br from-base-100 to-blue-500/[0.03]",
+  },
+  emerald: {
+    icon: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+    activeBorder:
+      "border-emerald-500/50 shadow-sm ring-1 ring-emerald-500/20 bg-gradient-to-br from-base-100 to-emerald-500/[0.03]",
+  },
+  amber: {
+    icon: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+    activeBorder:
+      "border-amber-500/50 shadow-sm ring-1 ring-amber-500/20 bg-gradient-to-br from-base-100 to-amber-500/[0.03]",
+  },
+  purple: {
+    icon: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+    activeBorder:
+      "border-purple-500/50 shadow-sm ring-1 ring-purple-500/20 bg-gradient-to-br from-base-100 to-purple-500/[0.03]",
+  },
+  primary: {
+    icon: "bg-primary/10 text-primary",
+    activeBorder:
+      "border-primary/50 shadow-sm ring-1 ring-primary/20 bg-gradient-to-br from-base-100 to-primary/[0.03]",
+  },
+  secondary: {
+    icon: "bg-secondary/10 text-secondary",
+    activeBorder:
+      "border-secondary/50 shadow-sm ring-1 ring-secondary/20 bg-gradient-to-br from-base-100 to-secondary/[0.03]",
+  },
+  success: {
+    icon: "bg-success/10 text-success",
+    activeBorder:
+      "border-success/50 shadow-sm ring-1 ring-success/20 bg-gradient-to-br from-base-100 to-success/[0.03]",
+  },
+  warning: {
+    icon: "bg-warning/10 text-warning",
+    activeBorder:
+      "border-warning/50 shadow-sm ring-1 ring-warning/20 bg-gradient-to-br from-base-100 to-warning/[0.03]",
+  },
+  info: {
+    icon: "bg-info/10 text-info",
+    activeBorder:
+      "border-info/50 shadow-sm ring-1 ring-info/20 bg-gradient-to-br from-base-100 to-info/[0.03]",
+  },
+  error: {
+    icon: "bg-error/10 text-error",
+    activeBorder:
+      "border-error/50 shadow-sm ring-1 ring-error/20 bg-gradient-to-br from-base-100 to-error/[0.03]",
+  },
+};
+
+export const StatsCard: React.FC<StatsCardProps> = ({
+  title,
+  value,
+  subValue,
+  trend,
+  icon,
+  color = "primary",
+  percentage,
+  badge,
+  description,
+  active = false,
+  loading = false,
+  onClick,
+  className = "",
+}) => {
+  const styles = COLOR_STYLES[color] || COLOR_STYLES.primary;
+
+  // Support both new `subValue` prop and deprecated `percentage` prop
+  const displaySubValue =
+    subValue !== undefined
+      ? subValue
+      : percentage !== undefined && percentage !== null
+        ? typeof percentage === "number"
+          ? `${percentage}%`
+          : percentage
+        : null;
+
+  const renderBadge = () => {
+    if (!badge) return null;
+    if (React.isValidElement(badge)) return badge;
+    const b = badge as StatsCardBadge;
+    return (
+      <span className={`badge badge-xs font-medium ${b.variant ? `badge-${b.variant}` : "badge-ghost"}`}>
+        {b.label}
+      </span>
+    );
+  };
+
+  const renderTrend = () => {
+    if (!trend) return null;
+    if (React.isValidElement(trend)) return trend;
+    const t = trend as StatsCardTrend;
+    const isPos = t.isPositive ?? true;
+    return (
+      <span
+        className={`inline-flex items-center gap-0.5 text-xs font-semibold ${
+          isPos ? "text-success" : "text-error"
+        }`}
+      >
+        <span>{isPos ? "↑" : "↓"}</span>
+        <span>{t.value}</span>
+        {t.label && <span className="opacity-70 font-normal ml-0.5">{t.label}</span>}
+      </span>
+    );
+  };
+
+  return (
+    <div
+      onClick={onClick}
+      className={`card bg-base-100 border transition-all duration-200 p-4 rounded-2xl ${
+        onClick ? "cursor-pointer hover:shadow-sm active:scale-[0.99]" : ""
+      } ${
+        active
+          ? styles.activeBorder
+          : "border-base-200 hover:border-base-300"
+      } ${className}`}
+    >
+      {/* Top row: Title and Icon */}
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-semibold uppercase tracking-wider text-base-content/60 truncate">
+          {title}
+        </span>
+        {icon && (
+          <div
+            className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${styles.icon}`}
+          >
+            {icon}
+          </div>
+        )}
+      </div>
+
+      {/* Middle row: Value and optional SubValue/Trend */}
+      <div className="mt-2 flex items-baseline gap-2 flex-wrap">
+        <span className="text-2xl md:text-3xl font-bold tracking-tight text-base-content">
+          {loading ? (
+            <span className="loading loading-spinner loading-sm"></span>
+          ) : (
+            value
+          )}
+        </span>
+        {displaySubValue !== null && !loading && (
+          <span className="text-xs font-semibold opacity-80">
+            {displaySubValue}
+          </span>
+        )}
+        {!loading && renderTrend()}
+      </div>
+
+      {/* Bottom row: Badge and description */}
+      {(badge || description) && (
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-base-content/60 min-w-0">
+          {renderBadge()}
+          {description && <span className="truncate">{description}</span>}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StatsCard;