@zauru-sdk/components 1.0.99 → 1.0.100

package/src/Form/SelectField/index.tsx

@@ -1,25 +1,21 @@
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
 import { SelectFieldOption } from "@zauru-sdk/types";
-import { useEffect, useState } from "react";
-import type { SingleValue, InputActionMeta } from "react-select";
-import Select, { components } from "react-select";
+import React, { useEffect, useState, useRef, KeyboardEvent } from "react";
 import { LoadingInputSkeleton } from "../../Skeletons/index.js";
+import { useFormContext, Controller } from "react-hook-form";
 
 type Props = {
   id?: string;
-  formName?: string;
   name?: string;
   title?: string;
-  defaultValue?: SingleValue<SelectFieldOption>;
-  defaultValueMulti?: SingleValue<SelectFieldOption>[];
+  defaultValue?: SelectFieldOption;
+  defaultValueMulti?: SelectFieldOption[];
   helpText?: string;
   options: Array<SelectFieldOption>;
-  onChange?: (value: SingleValue<SelectFieldOption>) => void;
-  onChangeMulti?: (value: Array<SingleValue<SelectFieldOption>>) => void;
-  onInputChange?: (newValue: string, actionMeta: InputActionMeta) => void;
+  onChange?: (value: SelectFieldOption | null) => void;
+  onChangeMulti?: (value: SelectFieldOption[]) => void;
+  onInputChange?: (newValue: string) => void;
   isClearable?: boolean;
-  error?: string | undefined;
   disabled?: boolean;
   menuIsOpen?: boolean;
   readOnly?: boolean;
@@ -27,13 +23,10 @@ type Props = {
   loading?: boolean;
   hint?: string;
   className?: string;
+  required?: boolean;
 };
 
-const Input = (props: any) => (
-  <components.Input {...props} readOnly={props.selectProps.isReadOnly} />
-);
-
-export const SelectFieldWithoutValidation = (props: Props) => {
+export const SelectField = (props: Props) => {
   const {
     id,
     name,
@@ -46,46 +39,164 @@ export const SelectFieldWithoutValidation = (props: Props) => {
     onChange,
     onChangeMulti,
     isClearable = false,
-    error = false,
     disabled = false,
     readOnly = false,
     isMulti = false,
     loading = false,
     className = "",
     onInputChange,
+    required,
   } = props;
 
-  const [value, setValue] = useState<SingleValue<SelectFieldOption>>(
+  const [value, setValue] = useState<SelectFieldOption | null>(
     defaultValue || null
   );
   const [valueMulti, setValueMulti] =
-    useState<SingleValue<SelectFieldOption>[]>(defaultValueMulti);
-  const [inputValue, setInputValue] = useState("");
+    useState<SelectFieldOption[]>(defaultValueMulti);
+  const [inputValue, setInputValue] = useState(defaultValue?.label || "");
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
-  const [isClient, setIsClient] = useState(typeof window !== "undefined");
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [filteredOptions, setFilteredOptions] = useState(options);
+  const [highlightedIndex, setHighlightedIndex] = useState<number>(-1);
+  const selectRef = useRef<HTMLDivElement>(null);
+  const optionsRef = useRef<HTMLUListElement>(null);
+  const [isTabPressed, setIsTabPressed] = useState<boolean>(false);
+  const [isEnterPressed, setIsEnterPressed] = useState<boolean>(false);
+  const [isSearching, setIsSearching] = useState<boolean>(false);
+  const {
+    control,
+    formState: { errors },
+    setValue: setFormValue,
+  } = useFormContext() || { formState: {} };
+  const error = errors ? errors[props.name ?? "-1"] : undefined;
 
-  const menuIsOpen = readOnly ? false : props?.menuIsOpen;
   const color = error ? "red" : "gray";
-  let documentRef = null;
-
   const isReadOnly = disabled || readOnly;
   const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
   const textColor = isReadOnly ? "text-gray-500" : `text-${color}-900`;
   const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-500`;
 
-  if (typeof window !== "undefined") {
-    documentRef = document;
-  }
-
   useEffect(() => {
-    setValue(defaultValue || null);
-  }, [defaultValue]);
+    setFilteredOptions(options);
+  }, [options]);
 
   useEffect(() => {
-    setIsClient(true);
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        selectRef.current &&
+        !selectRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    if (defaultValue) {
+      setValue(defaultValue);
+      setInputValue(defaultValue.label);
+      setFormValue(name || "", defaultValue);
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
   }, []);
 
-  if (!isClient || loading || !documentRef) {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    onInputChange && onInputChange(newValue);
+    setIsSearching(true);
+    setFilteredOptions(
+      options.filter((option) =>
+        option.label.toLowerCase().includes(newValue.toLowerCase())
+      )
+    );
+  };
+
+  const handleOptionClick = (option: SelectFieldOption) => {
+    if (isMulti) {
+      const newValue = valueMulti.some((v) => v.value === option.value)
+        ? valueMulti.filter((v) => v.value !== option.value)
+        : [...valueMulti, option];
+      setValueMulti(newValue);
+      onChangeMulti && onChangeMulti(newValue);
+      setFormValue(name || "", newValue);
+    } else {
+      setValue(option);
+      setInputValue(option.label);
+      onChange && onChange(option);
+      setFormValue(name || "", option);
+    }
+    setIsOpen(false);
+  };
+
+  const handleClear = () => {
+    if (isMulti) {
+      setValueMulti([]);
+      onChangeMulti && onChangeMulti([]);
+      setFormValue(name || "", []);
+    } else {
+      setValue(null);
+      onChange && onChange(null);
+      setFormValue(name || "", null);
+    }
+    setInputValue("");
+  };
+
+  const handleBlur = () => {
+    setTimeout(() => {
+      if (
+        isTabPressed &&
+        filteredOptions.length > 0 &&
+        !isEnterPressed &&
+        isSearching
+      ) {
+        handleOptionClick(filteredOptions[0]);
+      }
+      setIsTabPressed(false);
+      setIsEnterPressed(false);
+      setIsSearching(false);
+      setIsOpen(false);
+    }, 200);
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Tab") {
+      setIsTabPressed(true);
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setHighlightedIndex((prevIndex) =>
+        prevIndex < filteredOptions.length - 1 ? prevIndex + 1 : 0
+      );
+      scrollToHighlightedOption();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setHighlightedIndex((prevIndex) =>
+        prevIndex > 0 ? prevIndex - 1 : filteredOptions.length - 1
+      );
+      scrollToHighlightedOption();
+    } else if (e.key === "Enter" && highlightedIndex !== -1) {
+      e.preventDefault();
+      setIsEnterPressed(true);
+      handleOptionClick(filteredOptions[highlightedIndex]);
+    }
+  };
+
+  const scrollToHighlightedOption = () => {
+    if (optionsRef.current && optionsRef.current.children[highlightedIndex]) {
+      const highlightedOption = optionsRef.current.children[
+        highlightedIndex
+      ] as HTMLElement;
+      highlightedOption.scrollIntoView({
+        block: "center",
+        inline: "center",
+        behavior: "smooth",
+      });
+    }
+  };
+
+  if (loading) {
     return (
       <>
         {title && (
@@ -108,78 +219,8 @@ export const SelectFieldWithoutValidation = (props: Props) => {
     );
   }
 
-  const handleOnChange = (
-    selection: SingleValue<SelectFieldOption> | unknown
-  ) => {
-    // Verificar si el valor de selección es un objeto con propiedades 'value' y 'label'
-    if (
-      typeof selection === "object" &&
-      selection !== null &&
-      "value" in selection &&
-      "label" in selection
-    ) {
-      setValue(selection as SingleValue<SelectFieldOption>);
-      onChange && onChange(selection as SingleValue<SelectFieldOption>);
-    } else {
-      setValue(null);
-      onChange && onChange(null);
-    }
-  };
-
-  const handleOnChangeMulti = (
-    selection: SingleValue<SelectFieldOption>[] | unknown
-  ) => {
-    if (Array.isArray(selection)) {
-      setValueMulti(selection as SingleValue<SelectFieldOption>[]);
-      onChangeMulti &&
-        onChangeMulti(selection as SingleValue<SelectFieldOption>[]);
-    } else {
-      setValueMulti([]);
-      onChangeMulti && onChangeMulti([]);
-    }
-  };
-
-  const selectComponent = (
-    <>
-      <Select
-        className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
-        id={isMulti ? undefined : id}
-        instanceId={isMulti ? undefined : id}
-        isDisabled={disabled}
-        name={isMulti ? undefined : name}
-        options={options}
-        onChange={isMulti ? handleOnChangeMulti : handleOnChange}
-        defaultValue={isMulti ? valueMulti : value}
-        onInputChange={(newValue: string, actionMeta: InputActionMeta) => {
-          setInputValue(newValue);
-          onInputChange && onInputChange(newValue, actionMeta);
-        }}
-        inputValue={inputValue}
-        onMenuOpen={() => {}}
-        onMenuClose={() => {}}
-        menuPortalTarget={documentRef?.body}
-        styles={{ menuPortal: (base) => ({ ...base, zIndex: 9999 }) }}
-        isClearable={isClearable}
-        isSearchable={true}
-        components={{ Input }}
-        menuIsOpen={menuIsOpen}
-        //windowThreshold={50}
-        isMulti={isMulti}
-      />
-      {isMulti && (
-        <input
-          hidden
-          readOnly
-          name={name}
-          value={valueMulti.map((x) => x?.value).join(",")}
-          id={id}
-        />
-      )}
-    </>
-  );
-
   return (
-    <div className={`col-span-6 sm:col-span-3 ${className}`}>
+    <div className={`col-span-6 sm:col-span-3 ${className}`} ref={selectRef}>
       {title && (
         <label
           htmlFor={error ? `${name}-error` : `${name}-success`}
@@ -190,30 +231,114 @@ export const SelectFieldWithoutValidation = (props: Props) => {
           }`}
         >
           {title}
+          {required && <span className="text-red-500">*</span>}
         </label>
       )}
-      <div className="flex relative items-center">
-        {selectComponent}
-        {helpText && (
-          <div className="flex items-center relative ml-3">
-            <div
-              className="relative cursor-pointer"
-              onMouseEnter={() => setShowTooltip(true)}
-              onMouseLeave={() => setShowTooltip(false)}
-            >
-              <IdeaIconSVG />
-              {showTooltip && (
-                <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
-                  {helpText}
-                </div>
-              )}
-            </div>
-          </div>
+      <div className="relative">
+        <Controller
+          name={name || ""}
+          control={control}
+          rules={{ required }}
+          defaultValue={defaultValue || (isMulti ? [] : null)}
+          render={({ field }) => (
+            <input
+              {...field}
+              type="text"
+              id={id}
+              value={inputValue}
+              onFocus={() => setIsOpen(true)}
+              onBlur={handleBlur}
+              onKeyDown={handleKeyDown}
+              readOnly={isReadOnly}
+              disabled={disabled}
+              className={`block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+              placeholder={
+                isMulti ? "Select options..." : "Select an option..."
+              }
+              onChange={(e) => {
+                field.onChange(e);
+                handleInputChange(e);
+              }}
+            />
+          )}
+        />
+        {isClearable && (value || valueMulti.length > 0) && (
+          <button
+            type="button"
+            onClick={handleClear}
+            className="absolute inset-y-0 right-0 pr-3 flex items-center"
+          >
+            ×
+          </button>
+        )}
+        {isOpen && !isReadOnly && (
+          <ul
+            ref={optionsRef}
+            className="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
+          >
+            {filteredOptions.map((option, index) => (
+              <li
+                key={`${option.value}-${index}`}
+                className={`cursor-pointer select-none relative py-2 pl-3 pr-9 ${
+                  (
+                    isMulti
+                      ? valueMulti.some((v) => v.value === option.value)
+                      : value?.value === option.value
+                  )
+                    ? "text-white bg-indigo-600"
+                    : index === highlightedIndex
+                    ? "text-black bg-sky-200"
+                    : "text-gray-900"
+                }`}
+                onClick={() => handleOptionClick(option)}
+                onMouseEnter={() => setHighlightedIndex(index)}
+                onMouseLeave={() => setHighlightedIndex(-1)}
+              >
+                {option.label}
+              </li>
+            ))}
+          </ul>
         )}
       </div>
+      {isMulti && (
+        <div className="mt-2 flex flex-wrap gap-2">
+          {valueMulti.map((option, index) => (
+            <span
+              key={`${option.value}-${index}`}
+              className="bg-blue-100 text-blue-800 text-xs font-semibold mr-2 px-2.5 py-0.5 rounded"
+            >
+              {option.label}
+              <button
+                type="button"
+                onClick={() => handleOptionClick(option)}
+                className="ml-1 text-blue-600 hover:text-blue-800"
+              >
+                ×
+              </button>
+            </span>
+          ))}
+        </div>
+      )}
+      {helpText && (
+        <div className="flex items-center relative mt-1">
+          <div
+            className="relative cursor-pointer"
+            onMouseEnter={() => setShowTooltip(true)}
+            onMouseLeave={() => setShowTooltip(false)}
+          >
+            <IdeaIconSVG />
+            {showTooltip && (
+              <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black z-50">
+                {helpText}
+              </div>
+            )}
+          </div>
+        </div>
+      )}
       {error && (
         <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
+          <span className="font-medium">Oops!</span>{" "}
+          {error?.message?.toString() || "Error desconocido"}
         </p>
       )}
       {!error && hint && (
@@ -226,12 +351,3 @@ export const SelectFieldWithoutValidation = (props: Props) => {
     </div>
   );
 };
-
-export const SelectField = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <SelectFieldWithoutValidation {...props} />;
-};

package/src/Form/TextArea/index.tsx

@@ -1,10 +1,9 @@
-import { useAppSelector } from "@zauru-sdk/redux";
 import React, { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
   name: string;
-  formName?: string;
   title?: string;
   defaultValue?: string | number;
   hidden?: boolean;
@@ -14,14 +13,14 @@ type Props = {
   onKeyDown?: (event: React.KeyboardEvent) => void;
   disabled?: boolean;
   readOnly?: boolean;
-  error?: string | undefined;
   rows?: number;
   cols?: number;
   stopChangeEvents?: boolean;
   className?: string;
+  required?: boolean;
 };
 
-export const TextAreaWithoutValidation = (props: Props) => {
+export const TextArea = (props: Props) => {
   const {
     id,
     name,
@@ -32,15 +31,23 @@ export const TextAreaWithoutValidation = (props: Props) => {
     onChange,
     onKeyDown,
     disabled = false,
-    error = false,
     readOnly = false,
     rows,
     cols,
     stopChangeEvents,
     className = "",
+    required,
   } = props;
 
   const [value, setValue] = useState(defaultValue);
+  const {
+    register: tempRegister,
+    formState: { errors },
+  } = useFormContext() || { formState: {} }; // Obtener el contexto solo si existe
+  const error = errors ? errors[props.name ?? "-1"] : undefined;
+  const register = tempRegister
+    ? tempRegister(props.name ?? "-1", { required })
+    : undefined; // Solo usar register si está disponible
 
   const color = error ? "red" : "gray";
   const isReadOnly = disabled || readOnly;
@@ -56,15 +63,19 @@ export const TextAreaWithoutValidation = (props: Props) => {
     return (
       <textarea
         id={id ?? name}
-        name={name}
         value={defaultValue}
         readOnly={true}
         hidden={true}
+        {...(register ?? {})}
+        name={name}
       />
     );
   }
 
   const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (register) {
+      register.onChange(event);
+    }
     if (stopChangeEvents) {
       event.stopPropagation();
       event.preventDefault();
@@ -81,10 +92,10 @@ export const TextAreaWithoutValidation = (props: Props) => {
           className={`block text-sm font-medium text-${color}-700 dark:text-${color}-500`}
         >
           {title}
+          {required && <span className="text-red-500">*</span>}
         </label>
       )}
       <textarea
-        name={name}
         readOnly={readOnly}
         disabled={disabled}
         id={id ?? name}
@@ -92,15 +103,17 @@ export const TextAreaWithoutValidation = (props: Props) => {
         value={value}
         rows={rows}
         cols={cols}
-        onChange={handleInputChange}
         onKeyDown={(event: React.KeyboardEvent) => {
           onKeyDown && onKeyDown(event);
         }}
         className={`mt-1 block w-full rounded-md ${bgColor} ${borderColor} ${textColor} shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm`}
+        {...(register ?? {})}
+        name={name}
+        onChange={handleInputChange}
       />
       {error && (
         <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
-          <span className="font-medium">Oops!</span> {error}
+          <span className="font-medium">Oops!</span> {error.message?.toString()}
         </p>
       )}
       {!error && hint && (
@@ -113,13 +126,3 @@ export const TextAreaWithoutValidation = (props: Props) => {
     </div>
   );
 };
-
-//<reference> https://tailwindui.com/components/application-ui/forms/form-layouts
-export const TextArea = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <TextAreaWithoutValidation {...props} />;
-};