warqadui 0.0.8 → 0.0.11

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

@@ -1,479 +0,0 @@
-import React, { useState, useEffect, useRef, forwardRef } from "react";
-import { Search, Loader2, ChevronDown, Check, X } from "lucide-react";
-import useApi from "../../hooks/Fetches/useApis";
-import { useWarqadConfig } from "../../providers/WarqadProvider";
-import { Controller } from "react-hook-form";
-
-export interface SearchApiProps extends Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "onChange" | "value"
-> {
-  label?: string;
-  apiUrl: string;
-  placeholder?: string;
-  value?: any;
-  onChange?: (value: any) => void;
-  queryKey?: string;
-  labelKey?: string;
-  valueKey?: string;
-  error?: string;
-  containerClassName?: string;
-  name?: any;
-  form?: any;
-  obj?: any;
-  filter?: any[];
-  v?: number;
-}
-
-interface SearchApiContentProps extends SearchApiProps {
-  currentValue: any;
-  onChangeHandler: (value: any) => void;
-  fieldInternalProps?: {
-    ref?: React.Ref<any>;
-    onBlur?: () => void;
-  };
-}
-
-const SearchApiContent = ({
-  label,
-  apiUrl,
-  placeholder = "Search...",
-  currentValue,
-  onChangeHandler,
-  queryKey = "search",
-  labelKey = "name",
-  valueKey = "_id",
-  error,
-  containerClassName = "",
-  className = "",
-  disabled,
-  name,
-  obj,
-  form,
-  filter = [],
-  required,
-  v = 2,
-  fieldInternalProps,
-  ...props
-}: SearchApiContentProps) => {
-  const [searchTerm, setSearchTerm] = useState("");
-  const { theme } = useWarqadConfig();
-  const primaryColor = theme?.primaryColor;
-  const [options, setOptions] = useState<any[]>([]);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const [selectedObject, setSelectedObject] = useState<any>(undefined);
-  const [hasAttemptedHydration, setHasAttemptedHydration] = useState(false);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const prevApiUrlRef = useRef(apiUrl);
-
-  const setInputRef = (element: HTMLInputElement | null) => {
-    (inputRef as any).current = element;
-    if (fieldInternalProps?.ref) {
-      if (typeof fieldInternalProps.ref === "function") {
-        fieldInternalProps.ref(element);
-      } else {
-        (fieldInternalProps.ref as any).current = element;
-      }
-    }
-  };
-
-  const { get, isLoading, error: errorMessage } = useApi();
-
-  const fetchOptions = async (query: string) => {
-    try {
-      const params: Record<string, any> = {};
-      if (query) params[queryKey] = query;
-
-      const response = await get({
-        url: apiUrl,
-        params,
-        v: v as any,
-      });
-
-      if (Array.isArray(response)) {
-        setOptions(response);
-      } else if (response?.data && Array.isArray(response.data)) {
-        setOptions(response.data);
-      } else if (response?.items && Array.isArray(response.items)) {
-        setOptions(response.items);
-      } else {
-        setOptions([]);
-      }
-    } catch (err: any) {
-      console.error("Failed to fetch options:", err);
-      if (form && name) {
-        form.setError(name, {
-          type: "manual",
-          message: err.message || "Failed to fetch options",
-        });
-      }
-      setOptions([]);
-    }
-  };
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (isOpen) {
-        fetchOptions(searchTerm);
-      }
-    }, 300);
-    return () => clearTimeout(timer);
-  }, [searchTerm, apiUrl, isOpen]);
-
-  useEffect(() => {
-    if (isOpen && options.length === 0) {
-      fetchOptions("");
-    }
-  }, [isOpen]);
-
-  useEffect(() => {
-    if (currentValue && !selectedObject) {
-      setHasAttemptedHydration(false);
-      fetchOptions(currentValue).finally(() => {
-        setHasAttemptedHydration(true);
-      });
-    } else if (!currentValue) {
-      setHasAttemptedHydration(true);
-      if (selectedObject) setSelectedObject(undefined);
-    }
-  }, [currentValue, selectedObject]);
-
-  const getOptionValue = (option: any) => {
-    if (
-      valueKey === "_id" &&
-      option._id === undefined &&
-      option.id !== undefined
-    ) {
-      return option.id;
-    }
-    return option[valueKey];
-  };
-
-  useEffect(() => {
-    if (currentValue && !selectedObject && options.length > 0) {
-      const found = options.find((o) => getOptionValue(o) === currentValue);
-      if (found) {
-        setSelectedObject(found);
-        if (form && obj) {
-          form.setValue(obj, found);
-        }
-      }
-    }
-  }, [currentValue, options, selectedObject, form, obj]);
-
-  useEffect(() => {
-    if (prevApiUrlRef.current !== apiUrl) {
-      prevApiUrlRef.current = apiUrl;
-      setSearchTerm("");
-      setOptions([]);
-      setSelectedObject(undefined);
-
-      if (form) {
-        if (name) {
-          form.setValue(name, undefined, {
-            shouldValidate: true,
-            shouldDirty: true,
-          });
-        }
-        if (obj) {
-          form.setValue(obj, undefined, {
-            shouldValidate: true,
-            shouldDirty: true,
-          });
-        }
-      } else {
-        onChangeHandler(undefined);
-      }
-      fetchOptions("");
-    }
-  }, [apiUrl, form, name, obj, onChangeHandler]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
-        setIsOpen(false);
-        setIsFocused(false);
-        setSearchTerm("");
-        fieldInternalProps?.onBlur?.();
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [fieldInternalProps]);
-
-  const getDisplayValue = () => {
-    if (selectedObject) return selectedObject[labelKey];
-    if (options.length > 0 && currentValue) {
-      const found = options.find((o) => getOptionValue(o) === currentValue);
-      if (found) return found[labelKey];
-    }
-    if (isLoading || (currentValue && !hasAttemptedHydration))
-      return "Loading...";
-    return currentValue || "";
-  };
-
-  const handleSelect = (option: any) => {
-    const value = getOptionValue(option);
-    setSelectedObject(option);
-    onChangeHandler(value);
-    if (form) {
-      if (obj) form.setValue(obj, option);
-      if (name) form.clearErrors(name);
-    }
-    setIsOpen(false);
-    setSearchTerm("");
-    setActiveIndex(-1);
-    fieldInternalProps?.onBlur?.();
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isOpen) {
-      if (e.key === "ArrowDown" || e.key === "Enter") setIsOpen(true);
-      return;
-    }
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault();
-        setActiveIndex((prev) => (prev < options.length - 1 ? prev + 1 : prev));
-        break;
-      case "ArrowUp":
-        e.preventDefault();
-        setActiveIndex((prev) => (prev > 0 ? prev - 1 : prev));
-        break;
-      case "Enter":
-        e.preventDefault();
-        if (activeIndex >= 0 && activeIndex < options.length)
-          handleSelect(options[activeIndex]);
-        break;
-      case "Escape":
-        setIsOpen(false);
-        break;
-    }
-  };
-
-  const clearSelection = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    if (form) {
-      if (name)
-        form.setValue(name, undefined, {
-          shouldValidate: true,
-          shouldDirty: true,
-        });
-      if (obj)
-        form.setValue(obj, undefined, {
-          shouldValidate: true,
-          shouldDirty: true,
-        });
-    } else {
-      onChangeHandler(undefined);
-    }
-    setSearchTerm("");
-  };
-
-  const filteredOptions = options.filter(
-    (option) => !filter.includes(getOptionValue(option)),
-  );
-
-  useEffect(() => {
-    if (form && name && !form.watch(name)) {
-      form.setValue(name, undefined);
-      if (obj) form.setValue(obj, undefined);
-    }
-  }, [form, name, obj]);
-
-  let message = error;
-  if (form && name) {
-    const {
-      formState: { errors },
-    } = form;
-    const nameParts = name.split(".");
-    let currentError = errors;
-    for (const part of nameParts) {
-      currentError = currentError?.[part];
-    }
-    message = currentError?.message || message;
-  }
-
-  return (
-    <div ref={containerRef} className={`space-y-2 group ${containerClassName}`}>
-      {label && (
-        <label
-          className={`block text-xs font-medium transition-colors duration-200`}
-          style={{ color: isFocused || isOpen ? primaryColor : undefined }}
-        >
-          {label}
-          {required && <span className="text-red-500 ml-1">*</span>}
-        </label>
-      )}
-
-      <div className="relative">
-        <div
-          className={`flex items-center w-full h-8 rounded-lg border bg-gray-50 dark:bg-zinc-900/50 text-gray-900 dark:text-white transition-all duration-200 cursor-text ${
-            isFocused || isOpen
-              ? "ring-2 bg-white dark:bg-zinc-900"
-              : "border-gray-200 dark:border-zinc-800"
-          } ${className}`}
-          style={{
-            borderColor: isFocused || isOpen ? primaryColor : undefined,
-            boxShadow:
-              isFocused || isOpen
-                ? `${primaryColor}33 0px 0px 0px 2px`
-                : undefined,
-          }}
-          onClick={() => {
-            if (disabled) return;
-            inputRef.current?.focus();
-            setIsOpen(true);
-          }}
-        >
-          <div className="pl-3 text-gray-400">
-            <Search className="h-4 w-4" />
-          </div>
-          <div className="flex-1 relative">
-            {!isOpen && currentValue && (
-              <div className="absolute inset-0 flex items-center px-3 truncate select-none">
-                {getDisplayValue()}
-              </div>
-            )}
-            <input
-              ref={setInputRef}
-              type="text"
-              className={`block w-full bg-transparent border-none focus:ring-0 h-8 py-0 pr-8 placeholder-gray-400 focus:outline-none text-sm ${
-                !isOpen && currentValue ? "opacity-0" : "opacity-100"
-              }`}
-              placeholder={!currentValue ? placeholder : ""}
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              onFocus={() => {
-                setIsFocused(true);
-                setIsOpen(true);
-              }}
-              onKeyDown={handleKeyDown}
-              disabled={disabled}
-              {...props}
-            />
-          </div>
-          <div className="pr-3 flex items-center gap-1">
-            {isLoading ? (
-              <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-            ) : (
-              <>
-                {currentValue && !disabled && (
-                  <button
-                    onClick={clearSelection}
-                    type="button"
-                    className="p-0.5 hover:bg-gray-200 dark:hover:bg-zinc-700 rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-                  >
-                    <X className="h-3 w-3" />
-                  </button>
-                )}
-                <ChevronDown
-                  className={`h-4 w-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`}
-                />
-              </>
-            )}
-          </div>
-        </div>
-
-        {isOpen && (
-          <div className="absolute z-50 w-full mt-1 bg-white dark:bg-zinc-900 rounded-xl border border-gray-200 dark:border-zinc-800 shadow-lg max-h-60 overflow-y-auto overflow-x-hidden">
-            {isLoading && options.length === 0 ? (
-              <div className="p-4 text-center text-sm text-gray-500">
-                <Loader2 className="h-5 w-5 animate-spin mx-auto mb-2" />
-                Loading options...
-              </div>
-            ) : filteredOptions.length > 0 ? (
-              <div className="py-1">
-                {filteredOptions.map((option, index) => {
-                  const optValue = getOptionValue(option);
-                  const isSelected = currentValue === optValue;
-                  const isHighlighted = index === activeIndex;
-                  return (
-                    <button
-                      key={optValue || index}
-                      type="button"
-                      className={`w-full text-left px-3 py-2 text-sm flex items-center justify-between transition-colors ${
-                        isSelected
-                          ? "font-medium"
-                          : isHighlighted
-                            ? "bg-gray-100 dark:bg-zinc-800 text-gray-900 dark:text-gray-100"
-                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-800"
-                      }`}
-                      style={{
-                        backgroundColor: isSelected
-                          ? `${primaryColor}1A`
-                          : undefined,
-                        color: isSelected ? primaryColor : undefined,
-                      }}
-                      onClick={() => handleSelect(option)}
-                      onMouseEnter={() => setActiveIndex(index)}
-                    >
-                      <span className="truncate">{option[labelKey]}</span>
-                      {isSelected && (
-                        <Check
-                          className="h-4 w-4"
-                          style={{ color: primaryColor }}
-                        />
-                      )}
-                    </button>
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="p-4 text-center text-sm text-gray-500">
-                {errorMessage ||
-                  (searchTerm
-                    ? `No results for "${searchTerm}"`
-                    : "No options available")}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-      {message && (
-        <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
-      )}
-    </div>
-  );
-};
-
-export const SearchApi = forwardRef<HTMLDivElement, SearchApiProps>(
-  (props, _) => {
-    const { form, name, onChange, value } = props;
-
-    if (form && name) {
-      return (
-        <Controller
-          name={name}
-          control={form.control}
-          render={({
-            field: { onChange: formOnChange, value: formValue, ref, onBlur },
-          }) => (
-            <SearchApiContent
-              {...props}
-              currentValue={formValue}
-              onChangeHandler={formOnChange}
-              fieldInternalProps={{ ref, onBlur }}
-            />
-          )}
-        />
-      );
-    }
-
-    return (
-      <SearchApiContent
-        {...props}
-        currentValue={value}
-        onChangeHandler={onChange || (() => {})}
-      />
-    );
-  },
-);
-
-SearchApi.displayName = "SearchApi";

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

@@ -1,131 +0,0 @@
-import { forwardRef, useState } from "react";
-import { ChevronDown } from "lucide-react";
-import { useWarqadConfig } from "../../providers/WarqadProvider";
-
-export interface Option {
-  value: string | number | boolean;
-  label: string;
-  disabled?: boolean;
-}
-
-export interface SelectProps extends Omit<
-  React.SelectHTMLAttributes<HTMLSelectElement>,
-  "onChange"
-> {
-  label: string;
-  options: Option[];
-  icon?: React.ReactNode;
-  error?: string;
-  containerClassName?: string;
-  name?: any;
-  form?: any;
-  onChange?: (value: string | number | boolean) => void;
-}
-
-export const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      label,
-      options,
-      icon,
-      error,
-      containerClassName = "",
-      name,
-      form,
-      onChange,
-      onFocus,
-      onBlur,
-      className = "",
-      ...props
-    },
-    ref,
-  ) => {
-    const [isFocused, setIsFocused] = useState(false);
-    const { theme } = useWarqadConfig();
-    const primaryColor = theme?.primaryColor;
-
-    let message = error;
-    if (form) {
-      const {
-        formState: { errors },
-      } = form;
-      const nameI = name.split(".");
-      const names: string = nameI.length > 1 ? nameI[1] : nameI[0];
-      message = errors?.[names ? names : name]?.message;
-    }
-
-    return (
-      <div className={`space-y-2 group ${containerClassName}`}>
-        <label
-          htmlFor={props.id}
-          className={`block 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>
-          )}
-          <select
-            ref={ref}
-            onFocus={(e) => {
-              setIsFocused(true);
-              onFocus?.(e);
-            }}
-            {...(form ? form.register(name as any) : {})}
-            onBlur={(e) => {
-              setIsFocused(false);
-              onBlur?.(e);
-            }}
-            onChange={(e) => {
-              onChange?.(e.target.value);
-              if (form) {
-                form.setValue(name, e.target.value);
-              }
-            }}
-            className={`block w-full ${
-              icon ? "pl-10" : "pl-3"
-            } pr-10 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 appearance-none text-sm ${className}`}
-            style={{
-              borderColor: isFocused ? primaryColor : undefined,
-              boxShadow: isFocused
-                ? `${primaryColor}33 0px 0px 0px 2px`
-                : undefined,
-            }}
-            {...props}
-          >
-            <option value="" disabled>
-              Select {label}
-            </option>
-            {options.map((option) => (
-              <option
-                key={String(option.value)}
-                value={String(option.value)}
-                disabled={option.disabled}
-              >
-                {option.label}
-              </option>
-            ))}
-          </select>
-          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-            <ChevronDown className="h-4 w-4 text-gray-400" />
-          </div>
-        </div>
-        {message && (
-          <p className="text-sm text-red-600 dark:text-red-400">{message}</p>
-        )}
-      </div>
-    );
-  },
-);
-
-Select.displayName = "Select";