warqadui 0.0.8 → 0.0.11

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

@@ -1,121 +0,0 @@
-import { forwardRef, useState } from "react";
-import { useWarqadConfig } from "../../providers/WarqadProvider";
-import {
-  Controller,
-  type FieldValues,
-  type Path,
-  type UseFormReturn,
-} from "react-hook-form";
-
-export interface TextareaProps<T extends FieldValues> extends Omit<
-  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-  "name" | "form"
-> {
-  label: string;
-  error?: string;
-  containerClassName?: string;
-  name?: Path<T>;
-  form?: UseFormReturn<T>;
-}
-
-export const Textarea = forwardRef(
-  <T extends FieldValues>(
-    {
-      label,
-      error,
-      containerClassName = "",
-      name,
-      form,
-      onFocus,
-      onBlur,
-      className = "",
-      ...props
-    }: TextareaProps<T>,
-    ref: React.ForwardedRef<HTMLTextAreaElement>,
-  ) => {
-    const [isFocused, setIsFocused] = 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;
-    }
-
-    const renderInput = (
-      inputProps: any,
-      ref: React.Ref<HTMLTextAreaElement> | undefined,
-    ) => (
-      <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">
-          <textarea
-            ref={ref}
-            onFocus={(e) => {
-              setIsFocused(true);
-              onFocus?.(e);
-            }}
-            onBlur={(e) => {
-              setIsFocused(false);
-              onBlur?.(e);
-            }}
-            className={`block w-full px-3 py-3 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 min-h-[100px] resize-none text-sm ${className}`}
-            style={{
-              borderColor: isFocused ? primaryColor : undefined,
-              boxShadow: isFocused
-                ? `${primaryColor}33 0px 0px 0px 2px`
-                : undefined,
-            }}
-            {...props}
-            {...inputProps}
-          />
-        </div>
-        {message && (
-          <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
-        )}
-      </div>
-    );
-
-    if (form && name) {
-      return (
-        <Controller
-          control={form.control}
-          name={name}
-          render={({ field: { onChange, value, ref: fieldRef, onBlur } }) =>
-            renderInput(
-              {
-                value: value || "", // Ensure controlled input doesn't warn about uncontrolled
-                onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-                  onChange(e);
-                  props.onChange?.(e);
-                },
-                onBlur: () => {
-                  onBlur();
-                  // props.onBlur?.(undefined as any);
-                },
-              },
-              fieldRef,
-            )
-          }
-        />
-      );
-    }
-
-    return renderInput({}, ref);
-  },
-) as <T extends FieldValues>(
-  props: TextareaProps<T> & { ref?: React.ForwardedRef<HTMLTextAreaElement> },
-) => React.ReactElement;

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

@@ -1,11 +0,0 @@
-export const LoadingBox = () => {
-  return (
-    <div>
-      <div className="flex items-center justify-center h-full">
-        <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-primary">
-          aaa
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,34 +0,0 @@
-import React from "react";
-import { cn } from "../utils/cn";
-
-interface PageHeaderProps {
-  title: string;
-  description?: string;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-export const PageHeader = ({
-  title,
-  description,
-  children,
-  className,
-}: PageHeaderProps) => {
-  return (
-    <div className={cn("space-y-2 mb-8", className)}>
-      <div className="flex items-center justify-between">
-        <h1 className="text-3xl font-bold text-gray-900 dark:text-white tracking-tight">
-          {title}
-        </h1>
-        {children}
-      </div>
-      {description && (
-        <p className="text-gray-500 dark:text-gray-400 max-w-2xl leading-relaxed">
-          {description}
-        </p>
-      )}
-    </div>
-  );
-};
-
-export default PageHeader;

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

@@ -1,35 +0,0 @@
-import React from "react";
-import { Sun, Moon } from "lucide-react";
-import { cn } from "../utils/cn";
-import { useTheme } from "../hooks/ThemeContext";
-
-export const ThemeToggle: React.FC<{ className?: string }> = ({
-  className,
-}) => {
-  const { isDarkMode, toggleTheme } = useTheme();
-
-  return (
-    <button
-      onClick={toggleTheme}
-      className={cn(
-        "p-2 rounded-lg transition-all duration-200",
-        "text-slate-500 hover:text-blue-600 hover:bg-slate-100",
-        "dark:text-yellow-400 dark:hover:text-yellow-300 dark:hover:bg-slate-800",
-        className,
-      )}
-      aria-label="Toggle dark mode"
-    >
-      {isDarkMode ? (
-        <Sun
-          size={20}
-          className="stroke-2 transition-transform duration-300 rotate-0 scale-100"
-        />
-      ) : (
-        <Moon
-          size={20}
-          className="stroke-2 transition-transform duration-300 rotate-0 scale-100"
-        />
-      )}
-    </button>
-  );
-};

package/packages/ui/src/components/modal/Modal.tsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { X } from "lucide-react";
-import { motion, AnimatePresence } from "framer-motion";
-import { ClassicSpin } from "../spins";
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  children: React.ReactNode;
-  isLoading?: boolean;
-  width?: number;
-}
-
-export const Modal: React.FC<ModalProps> = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  isLoading = false,
-  width = 500,
-}) => {
-  return (
-    <AnimatePresence>
-      {isOpen && (
-        <div className="fixed inset-0 z-[1000] flex items-center justify-center p-4 sm:p-6">
-          {/* Backdrop */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            onClick={isLoading ? undefined : onClose}
-            className="fixed inset-0 bg-black/40 backdrop-blur-sm transition-all"
-          />
-
-          {/* Modal Content */}
-          <motion.div
-            initial={{ opacity: 0, scale: 0.95, y: 10 }}
-            animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: 10 }}
-            transition={{ type: "spring", duration: 0.3 }}
-            style={{ maxWidth: width }}
-            className="w-full bg-white dark:bg-zinc-900 rounded-[2rem] shadow-2xl border border-gray-200 dark:border-white/5 overflow-hidden relative z-10 flex flex-col max-h-[90vh]"
-          >
-            {/* Header */}
-            <div className="px-8 py-5 border-b border-gray-100 dark:border-white/5 flex items-center justify-between bg-white/50 dark:bg-zinc-900/50 backdrop-blur-xl sticky top-0 z-20">
-              <h3 className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
-                {title}
-              </h3>
-              <button
-                onClick={onClose}
-                disabled={isLoading}
-                className="p-2 -mr-2 rounded-full text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-white/5 transition-all disabled:opacity-50"
-              >
-                <X size={20} />
-              </button>
-            </div>
-
-            {/* Glowing Top accent */}
-            <div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-blue-500 via-indigo-600 to-purple-500 opacity-60" />
-
-            {/* Body */}
-            <div className="p-8 overflow-y-auto relative flex-1">
-              {/* Loading Overlay */}
-              {isLoading && <ClassicSpin />}
-              <div
-                className={
-                  isLoading
-                    ? "opacity-20 blur-sm transition-all"
-                    : "transition-all"
-                }
-              >
-                {children}
-              </div>
-            </div>
-          </motion.div>
-        </div>
-      )}
-    </AnimatePresence>
-  );
-};

package/packages/ui/src/components/spins/ClassicSpin.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { Loader2 } from "lucide-react";
-
-export const ClassicSpin = ({ msg = "Please wait..." }: { msg?: string }) => {
-  return (
-    <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-white/30 dark:bg-zinc-900/30 backdrop-blur-[0.5px] transition-all duration-200">
-      <div className="flex flex-col items-center justify-center p-6 bg-white dark:bg-zinc-800 rounded-2xl shadow-2xl border border-gray-100 dark:border-zinc-700 animate-in zoom-in-95 duration-200">
-        <div className="relative">
-          <div className="absolute inset-0 bg-indigo-500 blur-lg opacity-20 animate-pulse"></div>
-          <Loader2 className="h-8 w-8 animate-spin text-indigo-600 dark:text-indigo-400 relative z-10" />
-        </div>
-        <p className="mt-3 text-sm font-medium text-gray-900 dark:text-white">
-          {msg}
-        </p>
-      </div>
-    </div>
-  );
-};

package/packages/ui/src/components/spins/LoadingSpin.tsx

@@ -1,45 +0,0 @@
-import React from "react";
-import { cn } from "../../utils/cn";
-
-export interface LoadingSpinProps {
-  className?: string;
-  size?: "sm" | "md" | "lg";
-  color?: string;
-}
-
-export const LoadingSpin = ({
-  className,
-  size = "md",
-  color = "text-current",
-}: LoadingSpinProps) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-6 w-6",
-    lg: "h-10 w-10",
-  };
-
-  return (
-    <svg
-      className={cn("animate-spin", sizeClasses[size], color, className)}
-      fill="none"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        className="opacity-25"
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="4"
-      />
-      <path
-        className="opacity-75"
-        fill="currentColor"
-        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-      />
-    </svg>
-  );
-};
-
-export default LoadingSpin;

package/packages/ui/src/components/spins/OverlaySpin.tsx

@@ -1,10 +0,0 @@
-export const OverlaySpin = ({ msg = "Processing..." }: { msg?: string }) => (
-  <div className="absolute inset-0 bg-white/50 dark:bg-black/50 backdrop-blur-[1px] z-50 flex items-center justify-center rounded-xl transition-all duration-300">
-    <div className="flex flex-col items-center gap-2 bg-white dark:bg-zinc-800 p-4 rounded-xl shadow-xl border border-gray-100 dark:border-zinc-700">
-      <div className="w-6 h-6 border-2 border-blue-600 border-t-transparent rounded-full animate-spin"></div>
-      <span className="text-xs font-medium text-gray-500 animate-pulse">
-        {msg}
-      </span>
-    </div>
-  </div>
-);

package/packages/ui/src/components/spins/index.tsx

@@ -1,13 +0,0 @@
-import { ClassicSpin } from "./ClassicSpin";
-import { OverlaySpin } from "./OverlaySpin";
-import { LoadingSpin } from "./LoadingSpin";
-
-export { ClassicSpin, OverlaySpin, LoadingSpin };
-
-const Spins = {
-  ClassicSpin,
-  OverlaySpin,
-  LoadingSpin,
-};
-
-export default Spins;

package/packages/ui/src/components/tables/DataTable.tsx

@@ -1,261 +0,0 @@
-import { useState, useMemo, useEffect } from "react";
-import {
-  useReactTable,
-  getCoreRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  getFilteredRowModel,
-  flexRender,
-  type ColumnDef,
-  type SortingState,
-  type ColumnFiltersState,
-  type VisibilityState,
-} from "@tanstack/react-table";
-import { ChevronDown, Search } from "lucide-react";
-import Fields from "../Fields";
-import { useWarqadConfig } from "../../providers/WarqadProvider";
-
-interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[];
-  data: TData[];
-  isLoading?: boolean;
-  pageRows?: number;
-  searchPlaceholder?: string;
-  className?: string;
-  onChange?: (state: {
-    pagination: {
-      pageIndex: number;
-      pageSize: number;
-      pageCount: number;
-    };
-    sorting: SortingState;
-    columnFilters: ColumnFiltersState;
-    globalFilter: string;
-    selectedRows: TData[];
-    filteredData: TData[];
-  }) => void;
-}
-
-export function DataTable<TData, TValue>({
-  columns,
-  data,
-  isLoading = false,
-  pageRows,
-  searchPlaceholder = "Search all columns...",
-  className = "",
-  onChange,
-}: DataTableProps<TData, TValue>) {
-  const { theme } = useWarqadConfig();
-  const primaryColor = theme?.primaryColor;
-  const [sorting, setSorting] = useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
-  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
-  const [rowSelection, setRowSelection] = useState({});
-  const [globalFilter, setGlobalFilter] = useState("");
-
-  const table = useReactTable({
-    data,
-    columns,
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
-    getCoreRowModel: getCoreRowModel(),
-    getPaginationRowModel: pageRows ? getPaginationRowModel() : undefined,
-    getSortedRowModel: getSortedRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    onColumnVisibilityChange: setColumnVisibility,
-    onRowSelectionChange: setRowSelection,
-    onGlobalFilterChange: setGlobalFilter,
-    globalFilterFn: "includesString",
-    state: {
-      sorting,
-      columnFilters,
-      columnVisibility,
-      rowSelection,
-      globalFilter,
-      ...(pageRows ? { pagination: { pageSize: pageRows, pageIndex: 0 } } : {}),
-    },
-    manualPagination: false,
-  });
-
-  // Unified effect to handle all state changes
-  useEffect(() => {
-    if (onChange) {
-      onChange({
-        pagination: {
-          pageIndex: table.getState().pagination.pageIndex,
-          pageSize: table.getState().pagination.pageSize,
-          pageCount: table.getPageCount(),
-        },
-        sorting,
-        columnFilters,
-        globalFilter,
-        selectedRows: table
-          .getSelectedRowModel()
-          .rows.map((row) => row.original),
-        filteredData: table
-          .getFilteredRowModel()
-          .rows.map((row) => row.original),
-      });
-    }
-  }, [
-    sorting,
-    columnFilters,
-    globalFilter,
-    rowSelection,
-    table,
-    onChange,
-    table.getState().pagination.pageIndex,
-    table.getState().pagination.pageSize,
-  ]);
-
-  return (
-    <div className={`space-y-4 w-full ${className}`}>
-      {/* Search and Column Visibility Header */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex-1 max-w-sm">
-          <Fields.Input
-            label="Search"
-            placeholder={searchPlaceholder}
-            value={globalFilter}
-            onChange={(e: any) => setGlobalFilter(e.target.value)}
-            icon={<Search size={16} />}
-            className="!h-9"
-          />
-        </div>
-
-        <div className="flex items-center gap-2">
-          <div className="relative group">
-            <button className="flex items-center gap-2 px-3 h-9 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors">
-              Columns
-              <ChevronDown size={14} className="text-gray-400" />
-            </button>
-
-            <div className="absolute right-0 top-full mt-2 w-48 py-1 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-50">
-              {table
-                .getAllColumns()
-                .filter((column: any) => column.getCanHide())
-                .map((column: any) => (
-                  <label
-                    key={column.id}
-                    className="flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-800 cursor-pointer capitalize"
-                  >
-                    <input
-                      type="checkbox"
-                      checked={column.getIsVisible()}
-                      onChange={(e: any) =>
-                        column.toggleVisibility(!!e.target.checked)
-                      }
-                      className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
-                      style={{ accentColor: primaryColor }}
-                    />
-                    {column.id}
-                  </label>
-                ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Table Container */}
-      <div className="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 overflow-hidden relative">
-        <div className="overflow-x-auto">
-          <table className="w-full text-left border-collapse">
-            <thead className="bg-gray-50/50 dark:bg-zinc-900/50 border-b border-gray-200 dark:border-zinc-800">
-              {table.getHeaderGroups().map((headerGroup: any) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header: any) => (
-                    <th
-                      key={header.id}
-                      className="px-4 py-3 text-[13px] font-semibold text-gray-900 dark:text-zinc-100 text-left"
-                    >
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext(),
-                          )}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody className="divide-y divide-gray-200 dark:divide-zinc-800">
-              {isLoading ? (
-                Array.from({ length: pageRows || 5 }).map((_, i) => (
-                  <tr
-                    key={`skeleton-${i}`}
-                    className="border-b border-gray-100 dark:border-zinc-800/50"
-                  >
-                    {columns.map((_, j) => (
-                      <td key={`skeleton-cell-${j}`} className="px-4 py-4">
-                        <div className="h-4 bg-gray-100 dark:bg-zinc-800 rounded animate-pulse w-full"></div>
-                      </td>
-                    ))}
-                  </tr>
-                ))
-              ) : table.getRowModel().rows?.length ? (
-                table.getRowModel().rows.map((row: any) => (
-                  <tr
-                    key={row.id}
-                    className="hover:bg-gray-50/50 dark:hover:bg-zinc-900/50 transition-colors"
-                    data-state={row.getIsSelected() && "selected"}
-                  >
-                    {row.getVisibleCells().map((cell: any) => (
-                      <td
-                        key={cell.id}
-                        className="px-4 py-3 text-sm text-gray-700 dark:text-gray-200"
-                      >
-                        {flexRender(
-                          cell.column.columnDef.cell,
-                          cell.getContext(),
-                        )}
-                      </td>
-                    ))}
-                  </tr>
-                ))
-              ) : (
-                <tr>
-                  <td
-                    colSpan={columns.length}
-                    className="h-32 text-center text-sm text-gray-500"
-                  >
-                    No results found.
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      {/* Footer / Pagination */}
-      <div className="flex items-center justify-between px-2">
-        <div className="flex-1 text-xs text-gray-500">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-
-        {pageRows && table.getPageCount() > 1 && (
-          <div className="flex items-center gap-2">
-            <button
-              onClick={() => table.previousPage()}
-              disabled={!table.getCanPreviousPage()}
-              className="p-1 px-3 rounded-md border border-gray-200 dark:border-zinc-800 text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"
-            >
-              Previous
-            </button>
-            <button
-              onClick={() => table.nextPage()}
-              disabled={!table.getCanNextPage()}
-              className="p-1 px-3 rounded-md border border-gray-200 dark:border-zinc-800 text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-zinc-800 transition-colors"
-            >
-              Next
-            </button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export default DataTable;

package/packages/ui/src/components/tables/index.ts

@@ -1 +0,0 @@
-export * from "./DataTable";