warqadui 0.0.8 → 0.0.10

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

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

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