warqadui 0.0.5 → 0.0.6

package/packages/ui/src/components/DashboardLayout.tsx

@@ -0,0 +1,442 @@
+import React, { useState, useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { Menu, ChevronDown, ChevronRight } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { cn } from "../utils/cn";
+
+// --- Types ---
+export interface NavItem {
+  label: string;
+  icon?: React.ReactNode;
+  path?: string;
+  subItems?: (NavItem | false | null | undefined)[];
+  hidden?: boolean;
+  disabled?: boolean;
+}
+
+export type NavItems = (NavItem | false | null | undefined)[];
+
+interface DashboardLayoutProps {
+  children: React.ReactNode;
+  navItems: NavItems;
+  title?: string;
+  logo?: React.ReactNode;
+  userProfile?: React.ReactNode;
+  fontFamily?: string;
+}
+
+// --- Hooks ---
+const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia(query).matches;
+    }
+    return false;
+  });
+
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+
+  return matches;
+};
+
+const isPathActive = (navPath?: string, currentPath?: string) => {
+  if (!navPath || !currentPath) return false;
+  return (
+    currentPath === navPath ||
+    (navPath !== "/" && currentPath.startsWith(`${navPath}/`))
+  );
+};
+
+// --- Components ---
+
+// 1. Sidebar Item
+const SidebarItem = ({
+  item,
+  isActive,
+  isChildActive,
+  onClick,
+  isExpanded,
+  onToggleExpand,
+  isSidebarCollapsed,
+}: {
+  item: NavItem;
+  isActive: boolean;
+  isChildActive?: boolean;
+  onClick: () => void;
+  isExpanded: boolean;
+  onToggleExpand: () => void;
+  isSidebarCollapsed: boolean;
+}) => {
+  const hasSubItems = item.subItems && item.subItems.length > 0;
+
+  // Decide if the parent item itself should be highlighted
+  const shouldHighlight =
+    isActive || (hasSubItems && isExpanded) || isChildActive;
+
+  return (
+    <div className="mb-1 group relative ">
+      <button
+        type="button"
+        onClick={
+          item.disabled ? undefined : hasSubItems ? onToggleExpand : onClick
+        }
+        disabled={item.disabled}
+        title={isSidebarCollapsed ? item.label : undefined}
+        className={cn(
+          "w-full flex items-center py-2.5 rounded-xl text-sm font-medium transition-all duration-200",
+          isSidebarCollapsed ? "justify-center px-2" : "justify-between px-3",
+          shouldHighlight && !item.disabled
+            ? "bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400"
+            : "text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+          item.disabled && "opacity-50 cursor-not-allowed grayscale-[0.5]",
+        )}
+      >
+        <div
+          className={cn(
+            "flex items-center gap-3 overflow-hidden",
+            isSidebarCollapsed ? "justify-center w-full" : "",
+          )}
+        >
+          {item.icon && (
+            <span
+              className={cn(
+                "flex-shrink-0 transition-colors [&_svg]:w-4 [&_svg]:h-4",
+                shouldHighlight && !item.disabled
+                  ? "text-blue-600 dark:text-blue-400"
+                  : "text-gray-400 group-hover:text-blue-500 dark:text-gray-500 dark:group-hover:text-blue-400",
+                item.disabled && "group-hover:text-gray-400",
+              )}
+            >
+              {item.icon}
+            </span>
+          )}
+
+          <AnimatePresence>
+            {!isSidebarCollapsed && (
+              <motion.span
+                initial={{ opacity: 0, width: 0 }}
+                animate={{ opacity: 1, width: "auto" }}
+                exit={{ opacity: 0, width: 0 }}
+                transition={{ duration: 0.2 }}
+                className="truncate"
+              >
+                {item.label}
+              </motion.span>
+            )}
+          </AnimatePresence>
+        </div>
+
+        {!isSidebarCollapsed && hasSubItems && (
+          <span
+            className={cn(
+              "flex-shrink-0 ml-2 transition-transform duration-200",
+              shouldHighlight ? "text-blue-500" : "text-gray-400",
+            )}
+          >
+            {isExpanded ? (
+              <ChevronDown size={16} />
+            ) : (
+              <ChevronRight size={16} />
+            )}
+          </span>
+        )}
+      </button>
+
+      {/* Submenu */}
+      <AnimatePresence initial={false}>
+        {!isSidebarCollapsed && hasSubItems && isExpanded && !item.disabled && (
+          <motion.div
+            initial={{ height: 0, opacity: 0 }}
+            animate={{ height: "auto", opacity: 1 }}
+            exit={{ height: 0, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            className="overflow-hidden"
+          >
+            <div className="relative ml-6 mt-1 space-y-1">
+              {/* Vertical Line for tree structure */}
+              <div className="absolute left-0 top-0 bottom-0 w-px bg-gray-200 dark:bg-gray-800" />
+
+              {item
+                .subItems!.filter((sub): sub is NavItem => !!sub && !sub.hidden)
+                .map((subItem, index) => (
+                  <SubItem
+                    key={index}
+                    item={subItem}
+                    parentDisabled={item.disabled}
+                  />
+                ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};
+
+// 2. Sub Item Helper
+const SubItem = ({
+  item,
+  parentDisabled,
+}: {
+  item: NavItem;
+  parentDisabled?: boolean;
+}) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const isActive = isPathActive(item.path, location.pathname);
+  const isDisabled = item.disabled || parentDisabled;
+
+  return (
+    <button
+      onClick={() => !isDisabled && item.path && navigate(item.path)}
+      disabled={isDisabled}
+      className={cn(
+        "relative w-full flex items-center px-3 py-2 pl-6 rounded-lg text-sm transition-colors duration-200",
+        isActive && !isDisabled
+          ? "bg-blue-100/50 text-blue-700 font-medium dark:bg-blue-900/30 dark:text-blue-400"
+          : "text-gray-500 hover:bg-gray-50 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200",
+        isDisabled && "opacity-50 cursor-not-allowed grayscale-[0.5]",
+      )}
+    >
+      <span className="truncate">{item.label}</span>
+      {isActive && !isDisabled && (
+        <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-blue-500 rounded-r-full" />
+      )}
+    </button>
+  );
+};
+
+// --- Main Layout Component ---
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({
+  children,
+  navItems,
+  title = "Dashboard",
+  logo,
+  userProfile,
+  fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"', // Humanist System Stack
+}) => {
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [expandedMenus, setExpandedMenus] = useState<Record<string, boolean>>(
+    () => {
+      const initialState: Record<string, boolean> = {};
+      navItems.forEach((item) => {
+        if (
+          item &&
+          !item.hidden &&
+          !item.disabled &&
+          item.subItems?.some(
+            (sub) =>
+              sub && !sub.hidden && isPathActive(sub.path, location.pathname),
+          )
+        ) {
+          initialState[item.label] = true;
+        }
+      });
+      return initialState;
+    },
+  );
+
+  const prevPathRef = useRef(location.pathname);
+
+  useEffect(() => {
+    if (prevPathRef.current !== location.pathname) {
+      const activeItem = navItems.find(
+        (item): item is NavItem =>
+          !!item &&
+          !item.hidden &&
+          !item.disabled &&
+          item.subItems?.some(
+            (sub) =>
+              sub && !sub.hidden && isPathActive(sub.path, location.pathname),
+          ) === true,
+      );
+      if (activeItem) {
+        setExpandedMenus((prev) => ({ ...prev, [activeItem.label]: true }));
+      }
+      prevPathRef.current = location.pathname;
+    }
+  }, [location.pathname, navItems]);
+
+  const isCollapsed = isDesktop && !isSidebarOpen;
+
+  // Auto-close sidebar on mobile route change
+  useEffect(() => {
+    if (!isDesktop) {
+      setIsSidebarOpen(false);
+    } else {
+      setIsSidebarOpen(true);
+    }
+  }, [isDesktop]);
+
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+
+  // Accordion behavior: Close others when opening a new one
+  const toggleMenu = (label: string) => {
+    if (isCollapsed) {
+      setIsSidebarOpen(true);
+      setTimeout(() => {
+        setExpandedMenus((prev) => {
+          const isCurrentlyOpen = !!prev[label];
+          return isCurrentlyOpen ? {} : { [label]: true };
+        });
+      }, 50);
+      return;
+    }
+    setExpandedMenus((prev) => {
+      const isCurrentlyOpen = !!prev[label];
+      return isCurrentlyOpen ? {} : { [label]: true };
+    });
+  };
+
+  const sidebarVariants = {
+    desktopOpen: {
+      width: "16rem",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 },
+    },
+    desktopClosed: {
+      width: "5rem", // Mini Sidebar Width
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 },
+    },
+    mobileOpen: {
+      x: 0,
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 },
+    },
+    mobileClosed: {
+      x: "-100%",
+      transition: { duration: 0.3, type: "spring", bounce: 0, damping: 20 },
+    },
+  };
+
+  return (
+    <div
+      className="min-h-screen bg-gray-50 dark:bg-[#0B0F1A] text-slate-900 dark:text-slate-100 flex transition-colors duration-500 font-sans overflow-hidden"
+      style={{ fontFamily }}
+    >
+      {/* Mobile Overlay */}
+      <AnimatePresence>
+        {!isDesktop && isSidebarOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 0.5 }}
+            exit={{ opacity: 0 }}
+            onClick={() => setIsSidebarOpen(false)}
+            className="fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm"
+          />
+        )}
+      </AnimatePresence>
+      {/* Sidebar */}
+      <motion.aside
+        className="fixed lg:relative inset-y-0 left-0 z-50 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col h-screen"
+        initial={isDesktop ? "desktopOpen" : "mobileClosed"}
+        animate={
+          isDesktop
+            ? isSidebarOpen
+              ? "desktopOpen"
+              : "desktopClosed"
+            : isSidebarOpen
+              ? "mobileOpen"
+              : "mobileClosed"
+        }
+        variants={sidebarVariants as any}
+      >
+        <div
+          className={cn(
+            "h-16 flex items-center border-b border-gray-100 dark:border-gray-800 flex-shrink-0 overflow-hidden transition-all duration-300",
+            isCollapsed ? "justify-center px-0" : "px-6",
+          )}
+        >
+          <div className="flex items-center gap-2 text-blue-600 dark:text-blue-400">
+            {isCollapsed ? (
+              logo
+            ) : (
+              <>
+                {logo}
+                <span className="font-bold text-lg tracking-tight text-gray-900 dark:text-white">
+                  {title}
+                </span>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="flex-1 p-4 overflow-y-auto overflow-x-hidden scrollbar-hide">
+          <nav className="space-y-1">
+            {navItems
+              .filter((item): item is NavItem => !!item && !item.hidden)
+              .map((item) => {
+                const isActive = isPathActive(item.path, location.pathname);
+
+                const isChildActive = item.subItems?.some(
+                  (sub) =>
+                    sub &&
+                    !sub.hidden &&
+                    isPathActive(sub.path, location.pathname),
+                );
+
+                const isExpanded = expandedMenus[item.label];
+
+                return (
+                  <SidebarItem
+                    key={item.label}
+                    item={item}
+                    isActive={isActive}
+                    isChildActive={!!isChildActive}
+                    isExpanded={!!isExpanded}
+                    isSidebarCollapsed={!!isCollapsed}
+                    onClick={() => {
+                      if (item.path) navigate(item.path);
+                      if (isCollapsed && !item.path) {
+                        setIsSidebarOpen(true);
+                      }
+                    }}
+                    onToggleExpand={() => toggleMenu(item.label)}
+                  />
+                );
+              })}
+          </nav>
+        </div>
+      </motion.aside>
+
+      {/* Main Content Wrapper */}
+      <div className="flex-1 flex flex-col min-w-0 h-screen overflow-hidden">
+        {/* Header */}
+        <header className="sticky top-0 z-30 h-16 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800 px-4 sm:px-6 flex items-center justify-between flex-shrink-0">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={toggleSidebar}
+              className="p-2 -ml-2 rounded-lg text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-800 transition-colors"
+            >
+              <Menu size={20} />
+            </button>
+          </div>
+
+          {/* Right Actions */}
+          <div className="flex items-center gap-2">
+            {userProfile && (
+              <>
+                <div className="w-px h-6 mx-2 bg-gray-200 dark:bg-gray-800" />
+                {userProfile}
+              </>
+            )}
+          </div>
+        </header>
+
+        {/* Body */}
+        <main className="flex-1 p-2 md:p-4 overflow-y-auto">
+          <div className="max-w-7xl mx-auto">{children}</div>
+        </main>
+      </div>
+    </div>
+  );
+};

package/packages/ui/src/components/Fields/Input.tsx

@@ -0,0 +1,191 @@
+import { forwardRef, useEffect, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { useWarqadConfig } from "../../providers/WarqadProvider";
+import {
+  Controller,
+  type FieldValues,
+  type Path,
+  type UseFormReturn,
+} from "react-hook-form";
+
+export interface InputProps<T extends FieldValues> extends Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "name" | "form"
+> {
+  label: string;
+  icon?: React.ReactNode;
+  error?: string;
+  containerClassName?: string;
+  name?: Path<T>;
+  form?: UseFormReturn<T>;
+  type?: "text" | "number" | "email" | "password";
+}
+
+export const Input = forwardRef(
+  <T extends FieldValues>(
+    {
+      label,
+      icon,
+      error,
+      containerClassName = "",
+      name,
+      form,
+      onFocus,
+      onBlur,
+      className = "",
+      type,
+      ...props
+    }: InputProps<T>,
+    ref: React.ForwardedRef<HTMLInputElement>,
+  ) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [showPassword, setShowPassword] = useState(false);
+    const { theme } = useWarqadConfig();
+    const primaryColor = theme?.primaryColor;
+
+    let message = error;
+    if (form && name) {
+      const {
+        formState: { errors },
+      } = form;
+      const errorObj = name
+        .split(".")
+        .reduce((acc: any, current: string) => acc?.[current], errors);
+      message = (errorObj as any)?.message;
+    }
+
+    useEffect(() => {
+      if (form && name) {
+        form.clearErrors("root");
+      }
+    }, [form?.watch(name as any)]);
+
+    const renderInput = (
+      inputProps: any,
+      localType: string = type || "text",
+    ) => (
+      <div className={`space-y-2 group ${containerClassName}`}>
+        <label
+          htmlFor={props.id}
+          className={`block capitalize text-xs font-medium transition-colors duration-200`}
+          style={{ color: isFocused ? primaryColor : undefined }}
+        >
+          {label}
+          {props.required && <span className="text-red-500 ml-1">*</span>}
+        </label>
+        <div className="relative">
+          {icon && (
+            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <div
+                className={`transition-colors duration-200`}
+                style={{ color: isFocused ? primaryColor : "#9ca3af" }}
+              >
+                {icon}
+              </div>
+            </div>
+          )}
+          <input
+            ref={ref}
+            onFocus={(e) => {
+              setIsFocused(true);
+              onFocus?.(e);
+            }}
+            onBlur={(e) => {
+              setIsFocused(false);
+              onBlur?.(e);
+            }}
+            className={`block w-full ${
+              icon ? "pl-10" : "pl-3"
+            } pr-3 h-8 py-0 rounded-lg border-gray-200 dark:border-zinc-800 bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white placeholder-gray-400 focus:bg-white dark:focus:bg-zinc-900 outline-none transition-all duration-200 border text-sm ${className}`}
+            style={{
+              borderColor: isFocused ? primaryColor : undefined,
+              boxShadow: isFocused
+                ? `${primaryColor}33 0px 0px 0px 2px`
+                : undefined,
+            }}
+            {...props}
+            {...inputProps}
+            type={
+              localType === "password"
+                ? showPassword
+                  ? "text"
+                  : "password"
+                : localType
+            }
+          />
+          {type === "password" && (
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors focus:outline-none cursor-pointer"
+              tabIndex={-1}
+            >
+              {showPassword ? (
+                <EyeOff className="h-5 w-5" />
+              ) : (
+                <Eye className="h-5 w-5" />
+              )}
+            </button>
+          )}
+        </div>
+        {message && (
+          <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
+        )}
+      </div>
+    );
+
+    if (form && name && type === "number") {
+      return (
+        <Controller
+          control={form.control}
+          name={name}
+          render={({ field: { onChange, value, ref: fieldRef, onBlur } }) =>
+            renderInput(
+              {
+                ref: fieldRef,
+                onBlur: () => {
+                  onBlur();
+                },
+                value: value
+                  ? String(value)
+                      .split(".")
+                      .map((part, index) =>
+                        index === 0
+                          ? part.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                          : part,
+                      )
+                      .join(".")
+                  : "",
+                onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
+                  const rawValue = e.target.value.replace(/,/g, "");
+                  if (!/^\d*\.?\d*$/.test(rawValue)) return;
+
+                  if (rawValue === "") {
+                    onChange("");
+                  } else {
+                    const numValue = Number(rawValue);
+                    if (!isNaN(numValue) && String(numValue) === rawValue) {
+                      onChange(numValue);
+                    } else {
+                      onChange(rawValue);
+                    }
+                  }
+                  props.onChange?.(e);
+                },
+              },
+              "text",
+            )
+          }
+        />
+      );
+    }
+
+    return renderInput(
+      form && name
+        ? form.register(name, type === "number" ? { valueAsNumber: true } : {})
+        : {},
+    );
+  },
+) as <T extends FieldValues>(
+  props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },
+) => React.ReactElement;