@zauru-sdk/components 1.0.99 → 1.0.101

package/src/Form/TextField/index.tsx

@@ -1,11 +1,10 @@
 import { IdeaIconSVG } from "@zauru-sdk/icons";
-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;
@@ -19,15 +18,15 @@ type Props = {
   onKeyDown?: (event: React.KeyboardEvent) => void;
   disabled?: boolean;
   readOnly?: boolean;
-  error?: string;
   min?: string | number;
   integer?: boolean;
   stopChangeEvents?: boolean;
   style?: React.CSSProperties;
   className?: string;
+  required?: boolean;
 };
 
-export const TextFieldWithoutValidation = (props: Props) => {
+export const TextField = (props: Props) => {
   const {
     id,
     name,
@@ -42,15 +41,26 @@ export const TextFieldWithoutValidation = (props: Props) => {
     integer = false,
     stopChangeEvents,
     style,
-    error,
     title,
     helpText,
     className,
     hint,
+    required,
   } = props;
 
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
   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", {
+        valueAsNumber: props.type === "number",
+        required,
+      })
+    : undefined; // Solo usar register si está disponible
 
   const color = error ? "red" : "gray";
 
@@ -68,15 +78,19 @@ export const TextFieldWithoutValidation = (props: Props) => {
       <input
         type={type}
         id={id ?? name}
-        name={name}
         value={defaultValue}
         readOnly={true}
         hidden={true}
+        {...(register ?? {})}
+        name={name}
       />
     );
   }
 
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (register) {
+      register.onChange(event);
+    }
     if (stopChangeEvents) {
       event.stopPropagation();
       event.preventDefault();
@@ -114,7 +128,6 @@ export const TextFieldWithoutValidation = (props: Props) => {
   const inputComponent = (
     <input
       type={type}
-      name={name}
       readOnly={readOnly}
       disabled={disabled}
       id={id ?? name}
@@ -124,7 +137,6 @@ export const TextFieldWithoutValidation = (props: Props) => {
         e.currentTarget.blur();
       }}
       step={type === "number" ? 0.01 : undefined} //para aceptar decimales
-      onChange={handleInputChange}
       onKeyDown={(event: React.KeyboardEvent) => {
         handleKeyDown(event);
         onKeyDown && onKeyDown(event);
@@ -132,6 +144,9 @@ export const TextFieldWithoutValidation = (props: Props) => {
       min={min}
       style={style}
       className={`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}
     />
   );
 
@@ -147,6 +162,7 @@ export const TextFieldWithoutValidation = (props: Props) => {
           className={`block mb-1 text-sm font-medium text-${color}-700 dark:text-${color}-500`}
         >
           {title}
+          {required && <span className="text-red-500">*</span>}
         </label>
       )}
       <div className="flex relative items-center">
@@ -170,7 +186,7 @@ export const TextFieldWithoutValidation = (props: Props) => {
       </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()}
         </p>
       )}
       {!error && hint && (
@@ -183,12 +199,3 @@ export const TextFieldWithoutValidation = (props: Props) => {
     </div>
   );
 };
-
-export const TextField = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-
-  props = { ...props, error };
-
-  return <TextFieldWithoutValidation {...props} />;
-};

package/src/Form/TimePicker/index.tsx

@@ -1,6 +1,6 @@
 import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
-import { useAppSelector } from "@zauru-sdk/redux";
 import React, { useEffect, useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
@@ -12,11 +12,11 @@ type Props = {
   defaultValue?: string;
   onChange?: (value: string) => void;
   tabIndex?: number;
-  error?: string;
   disabled?: boolean;
+  required?: boolean;
 };
 
-export const FormTimePickerWithoutValidation = (props: Props) => {
+export const FormTimePicker = (props: Props) => {
   const {
     id,
     name,
@@ -26,12 +26,20 @@ export const FormTimePickerWithoutValidation = (props: Props) => {
     helpText,
     onChange,
     tabIndex,
-    error,
     disabled = false,
+    required = false,
   } = props;
 
   const [value, setValue] = useState<string>(defaultValue);
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
+  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";
 
@@ -49,6 +57,14 @@ export const FormTimePickerWithoutValidation = (props: Props) => {
     onChange && onChange("");
   };
 
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+    onChange && onChange(e.target.value);
+    if (register) {
+      register.onChange(e);
+    }
+  };
+
   return (
     <>
       {title && (
@@ -57,6 +73,7 @@ export const FormTimePickerWithoutValidation = (props: Props) => {
           className={`block text-sm font-medium ${textColor}`}
         >
           {title}
+          {required && <span className="text-red-500">*</span>}
         </label>
       )}
       <div className="flex relative items-center">
@@ -65,16 +82,14 @@ export const FormTimePickerWithoutValidation = (props: Props) => {
         </div>
         <input
           id={id}
-          name={name}
           tabIndex={tabIndex}
           type="time"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-            setValue(e.target.value);
-            onChange && onChange(e.target.value);
-          }}
           value={value}
           pattern="\d{2}:\d{2}"
           className={`${bgColor} ${borderColor} ${textColor} text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5`}
+          {...(register ?? {})}
+          name={name}
+          onChange={handleOnChange}
         />
         {value && (
           <button
@@ -104,7 +119,7 @@ export const FormTimePickerWithoutValidation = (props: Props) => {
       </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()}
         </p>
       )}
       {!error && hint && (
@@ -117,11 +132,3 @@ export const FormTimePickerWithoutValidation = (props: Props) => {
     </>
   );
 };
-
-export const FormTimePicker = (props: Props) => {
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
-  props = { ...props, error };
-
-  return <FormTimePickerWithoutValidation {...props} />;
-};

package/src/Form/YesNo/index.tsx

@@ -1,5 +1,5 @@
-import { useAppSelector } from "@zauru-sdk/redux";
 import { useState } from "react";
+import { useFormContext } from "react-hook-form";
 
 type Props = {
   id?: string;
@@ -10,6 +10,7 @@ type Props = {
   helpText?: string;
   onChange?: (value: boolean) => void;
   disabled?: boolean;
+  required?: boolean;
 };
 
 export const YesNo = (props: Props) => {
@@ -21,17 +22,27 @@ export const YesNo = (props: Props) => {
     helpText,
     onChange,
     disabled,
+    required,
   } = props;
 
-  const { formValidations } = useAppSelector((state) => state.formValidation);
-  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+  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 [value, setValue] = useState(defaultValue);
 
   const color = error ? "red" : "gray";
 
-  const handleOnChange = () => {
+  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (disabled) return; // No hacer nada si está deshabilitado
+    if (register) {
+      register.onChange(e);
+    }
     const newValue = !value;
     setValue(newValue);
     onChange && onChange(newValue);
@@ -47,22 +58,24 @@ export const YesNo = (props: Props) => {
         <input
           type="checkbox"
           id={id ?? name}
-          name={name}
           checked={value}
           value={value.toString()}
           className="sr-only peer"
-          onChange={handleOnChange}
           disabled={disabled}
+          {...(register ?? {})}
+          name={name}
+          onChange={handleOnChange}
         />
         {value.toString() === "false" && (
           <input type="hidden" name={name} value="false" />
         )}
         <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
         <span className="ml-3 text-sm font-medium text-gray-900">{title}</span>
+        {required && <span className="text-red-500">*</span>}
       </label>
       {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 && helpText && (

package/src/Form/index.ts

@@ -5,10 +5,9 @@ export * from "./DynamicBaculoForm/index.js";
 export * from "./FieldContainer/index.js";
 export * from "./FileUpload/index.js";
 export * from "./FormButtons/index.js";
-export * from "./FormLayout/index.js";
 export * from "./SelectField/index.js";
 export * from "./TextArea/index.js";
 export * from "./TextField/index.js";
 export * from "./TimePicker/index.js";
 export * from "./YesNo/index.js";
-export * from "./RadioButtonGroup/index.js";
+export * from "./ReactZodForm/index.js";

package/src/Layouts/homeLayout/index.tsx

@@ -1,34 +1,127 @@
+import { Form } from "@remix-run/react";
+
 type Props = {
   title?: string;
   description?: string;
+  loading?: boolean;
+  color?: "green" | "blue" | "red" | "purple" | "yellow";
 };
 
-export const HomeLayout = ({ title, description }: Props) => {
+export const HomeLayout = ({
+  title,
+  description,
+  loading,
+  color = "green",
+}: Props) => {
+  const getColorClasses = (shade: number) => {
+    switch (color) {
+      case "blue":
+        return `bg-blue-${shade}`;
+      case "red":
+        return `bg-red-${shade}`;
+      case "purple":
+        return `bg-purple-${shade}`;
+      case "yellow":
+        return `bg-yellow-${shade}`;
+      default:
+        return `bg-green-${shade}`;
+    }
+  };
+
+  const getGradientClasses = () => {
+    switch (color) {
+      case "blue":
+        return "from-blue-100 to-blue-200";
+      case "red":
+        return "from-red-100 to-red-200";
+      case "purple":
+        return "from-purple-100 to-purple-200";
+      case "yellow":
+        return "from-yellow-100 to-yellow-200";
+      default:
+        return "from-green-100 to-green-200";
+    }
+  };
+
+  const getButtonClasses = () => {
+    switch (color) {
+      case "blue":
+        return "bg-blue-600 hover:bg-blue-700 focus:ring-blue-500";
+      case "red":
+        return "bg-red-600 hover:bg-red-700 focus:ring-red-500";
+      case "purple":
+        return "bg-purple-600 hover:bg-purple-700 focus:ring-purple-500";
+      case "yellow":
+        return "bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500";
+      default:
+        return "bg-green-600 hover:bg-green-700 focus:ring-green-500";
+    }
+  };
+
   return (
     <div
-      className="bg-cover bg-center h-screen"
-      style={{ backgroundImage: 'url("/wallpaper.webp")' }}
+      className={`min-h-screen bg-gradient-to-br ${getGradientClasses()} flex flex-col justify-center py-12 sm:px-6 lg:px-8 relative overflow-hidden`}
     >
-      <div className="flex flex-col h-screen justify-center items-center">
-        <h1
-          className="text-6xl md:text-7xl lg:text-8xl text-white font-bold mb-6 text-center"
-          style={{
-            textShadow: "0.5px 0.5px 1px #000000",
-            WebkitTextStroke: "2px #000000",
-          }}
-        >
-          {title ?? <>Bienvenido, inicie sesión para continuar.</>}
-        </h1>
-        <p
-          className="text-xl md:text-2xl lg:text-3xl text-white text-center max-w-md mb-12"
-          style={{
-            textShadow: "0.5px 0.5px 1px #000000",
-            WebkitTextStroke: "1px #000000",
-          }}
-        >
-          {description ?? <>Web app, realizada en Zauru.</>}
+      <div
+        className={`absolute top-0 left-0 w-64 h-64 ${getColorClasses(
+          500
+        )} rounded-full -translate-x-1/2 -translate-y-1/2 opacity-50`}
+      ></div>
+      <div
+        className={`absolute bottom-0 right-0 w-96 h-96 ${getColorClasses(
+          600
+        )} rounded-full translate-x-1/3 translate-y-1/3 opacity-40`}
+      ></div>
+      <div
+        className={`absolute top-1/2 left-1/4 w-48 h-48 ${getColorClasses(
+          400
+        )} rounded-full opacity-30`}
+      ></div>
+
+      <div
+        className={`absolute top-1/3 right-1/4 w-32 h-32 ${getColorClasses(
+          500
+        )} rounded-full opacity-25`}
+      ></div>
+      <div
+        className={`absolute bottom-1/4 left-1/3 w-40 h-40 ${getColorClasses(
+          400
+        )} rounded-full opacity-20`}
+      ></div>
+      <div
+        className={`absolute top-3/4 right-1/2 w-24 h-24 ${getColorClasses(
+          600
+        )} rounded-full opacity-15`}
+      ></div>
+
+      <div className="sm:mx-auto sm:w-full sm:max-w-md relative z-10">
+        <img className="mx-auto h-12 w-auto" src="/logo.png" alt="Zauru Logo" />
+        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          {title ?? "Bienvenido"}
+        </h2>
+        <p className="mt-2 text-center text-sm text-gray-600">
+          {description ?? "Inicie sesión para acceder a su cuenta"}
         </p>
       </div>
+
+      {loading ? (
+        <></>
+      ) : (
+        <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md relative z-10">
+          <div className="bg-white bg-opacity-90 py-8 px-4 shadow-lg sm:rounded-lg sm:px-10">
+            <Form className="space-y-6" method="post" action="/login">
+              <div>
+                <button
+                  type="submit"
+                  className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white ${getButtonClasses()} transition duration-150 ease-in-out`}
+                >
+                  Inicie sesión con Zauru
+                </button>
+              </div>
+            </Form>
+          </div>
+        </div>
+      )}
     </div>
   );
 };

package/src/Modal/Modal.tsx

@@ -5,7 +5,7 @@ export type ModalOption = "OK" | "CANCEL" | null;
 
 type ModalParams = {
   title: string;
-  description: React.ReactNode | (() => React.ReactNode);
+  description: React.ReactNode;
   okButtonText?: string;
   showOptions?: boolean;
 };
@@ -64,9 +64,6 @@ export const createModal = ({
     document.body.appendChild(modalOverlay);
     document.body.appendChild(modalWrapper);
 
-    const content =
-      typeof description === "function" ? description() : description;
-
     const ModalContent = () => (
       <div className="relative w-auto my-6 mx-auto max-w-3xl">
         <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
@@ -78,7 +75,7 @@ export const createModal = ({
               </span>
             </button>
           </div>
-          <div className="relative p-6 flex-auto">{content}</div>
+          <div className="relative p-6 flex-auto">{description}</div>
           {showOptions && (
             <div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
               <button

package/src/NavBar/NavBar.tsx

@@ -10,6 +10,7 @@ import type {
   ColorInterface,
   DropDownLinkButtonType,
   EntityProps,
+  NavBarItemsSchema,
   NavBarProps,
   NavItemProps,
 } from "./NavBar.types.js";
@@ -88,7 +89,7 @@ const NavItem = ({
       <div
         className={`${
           specialColor ? specialColor.bg700 : color.bg700
-        } container text-white w-56 sm:w-auto h-10 text-sm py-1 uppercase rounded shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `}
+        } container text-white w-full sm:w-auto h-10 text-sm py-1 uppercase shadow hover:shadow-lg outline-none rounded-full focus:outline-none my-auto sm:my-0 sm:mr-1 mb-1 ease-linear transition-all duration-150 `}
       >
         <Link
           className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75"
@@ -114,36 +115,36 @@ export const NavBar = ({
   const color: ColorInterface = COLORS[selectedColor];
   const [NavBarOpen, setNavBarOpen] = useState(false);
 
+  const renderNavItems = (items: NavBarItemsSchema[]) => (
+    <div className="flex flex-col lg:flex-row w-full">
+      {items.map((item, index) => {
+        const specialColor: ColorInterface | undefined = item.color
+          ? COLORS[item.color]
+          : undefined;
+        return (
+          <NavItem
+            key={index}
+            name={item.name}
+            link={item.link}
+            icon={item.icon}
+            specialColor={specialColor}
+            color={color}
+            childrens={item.childrens?.map((x) => {
+              return { ...x } as any;
+            })}
+          />
+        );
+      })}
+    </div>
+  );
+
   const options = (
     <>
-      <ul>
-        {loggedIn && (
-          <div className="flex flex-col sm:flex-row ">
-            {items
-              .filter((item) => item.loggedIn)
-              .map((item, index) => {
-                const specialColor: ColorInterface | undefined = item.color
-                  ? COLORS[item.color]
-                  : undefined;
-                return (
-                  <NavItem
-                    key={index}
-                    name={item.name}
-                    link={item.link}
-                    icon={item.icon}
-                    specialColor={specialColor}
-                    color={color}
-                    childrens={item.childrens?.map((x) => {
-                      return { ...x } as any;
-                    })}
-                  />
-                );
-              })}
-          </div>
-        )}
+      <ul className="w-full lg:flex lg:items-center">
+        {renderNavItems(items.filter((item) => item.loggedIn === loggedIn))}
       </ul>
-      <ul className="sm:flex sm:flex-col ml-auto lg:flex-row">
-        {loggedIn ? (
+      <ul className="sm:flex sm:flex-col lg:flex-row ml-auto">
+        {loggedIn && (
           <OptionsDropDownButton
             color={color}
             options={[
@@ -156,20 +157,6 @@ export const NavBar = ({
               />,
             ]}
           />
-        ) : (
-          items
-            .filter((item) => !item.loggedIn)
-            .map((item, index) => {
-              return (
-                <NavItem
-                  key={index}
-                  name={item.name}
-                  link={item.link}
-                  icon={item.icon}
-                  color={color}
-                />
-              );
-            })
         )}
       </ul>
     </>
@@ -207,16 +194,18 @@ export const NavBar = ({
         </div>
         {/* Menú para dispositivos móviles */}
         <div
-          className={`lg:hidden absolute top-0 left-0 z-50 w-64 h-full ${
+          className={`lg:hidden fixed top-0 left-0 z-50 w-64 h-full ${
             color.bg700
           } shadow-lg transform ${
             NavBarOpen ? "translate-x-0" : "-translate-x-full"
-          } transition-transform duration-300 ease-in-out`}
+          } transition-transform duration-300 ease-in-out overflow-y-auto`}
         >
-          {options}
+          <div className="p-4">{options}</div>
         </div>
         {/* Menú para escritorio */}
-        <div className="hidden lg:flex w-full lg:w-auto">{options}</div>
+        <div className="hidden lg:flex lg:items-center w-full lg:w-auto">
+          {options}
+        </div>
       </div>
     </nav>
   );

package/src/Table/ZauruTable.tsx

@@ -16,10 +16,17 @@ const customStyles: TableStyles = {
     style: {
       color: "#202124",
       fontSize: "14px",
-      justifyContent: "left", // Alinea el texto a la izquierda
-      whiteSpace: "normal", // Permite el ajuste de texto
-      wordBreak: "break-word", // Asegura que las palabras se rompan correctamente para evitar desbordamientos
-      maxWidth: "150px", // Establece un ancho máximo para las celdas del encabezado
+      justifyContent: "left",
+      whiteSpace: "normal",
+      wordBreak: "break-word",
+      maxWidth: "250px",
+      padding: "4px", // Add some padding
+    },
+  },
+  cells: {
+    style: {
+      whiteSpace: "normal", // Allow wrapping for cell content
+      wordBreak: "break-word",
     },
   },
   rows: {

package/src/WithTooltip/WithTooltip.tsx

@@ -9,13 +9,14 @@ export const WithTooltip = (props: Props) => {
   const { children, text } = props;
 
   return (
-    <>
-      <span className="group relative">
-        {children}
-        <span className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 whitespace-nowrap rounded bg-black px-2 py-1 text-white opacity-0 transition z-50 before:absolute before:left-1/2 before:top-full before:-translate-x-1/2 before:border-4 before:border-transparent before:border-t-black before:content-[''] group-hover:opacity-100 before:z-50">
+    <div className="group relative inline-block">
+      {children}
+      <div className="pointer-events-none absolute left-1/2 -translate-x-1/2 bottom-full mb-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <div className="relative bg-black text-white text-sm rounded py-1 px-2 text-wrap w-40">
           {text}
-        </span>
-      </span>
-    </>
+          <div className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-black"></div>
+        </div>
+      </div>
+    </div>
   );
 };