warqadui 0.0.4 → 0.0.6

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

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

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