@zauru-sdk/components 1.0.54 → 1.0.60

package/src/Modal/Modal.tsx

@@ -1,104 +1,104 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-
-export type ModalOption = "OK" | "CANCEL" | null;
-
-type ModalParams = {
-  title: string;
-  description: React.ReactNode;
-  okButtonText?: string;
-  showOptions?: boolean;
-};
-
-export const createModal = ({
-  title,
-  description,
-  okButtonText,
-  showOptions = true,
-}: ModalParams): Promise<ModalOption> => {
-  return new Promise((resolve) => {
-    const handleClose = () => {
-      resolve(null);
-      removeModal();
-    };
-
-    const handleOk = () => {
-      resolve("OK");
-      removeModal();
-    };
-
-    const handleCancel = () => {
-      resolve("CANCEL");
-      removeModal();
-    };
-
-    const removeModal = () => {
-      document.body.removeChild(modalWrapper);
-      document.body.removeChild(modalOverlay);
-    };
-
-    const modalWrapper = document.createElement("div");
-    modalWrapper.classList.add(
-      "justify-center",
-      "items-center",
-      "flex",
-      "overflow-x-hidden",
-      "overflow-y-auto",
-      "fixed",
-      "inset-0",
-      "z-50",
-      "outline-none",
-      "focus:outline-none"
-    );
-
-    // Crear capa de fondo detrás del modal
-    const modalOverlay = document.createElement("div");
-    modalOverlay.classList.add(
-      "fixed",
-      "inset-0",
-      "bg-black",
-      "opacity-50",
-      "z-40"
-    );
-
-    document.body.appendChild(modalOverlay);
-    document.body.appendChild(modalWrapper);
-
-    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">
-          <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
-            <h3 className="text-3xl font-semibold">{title}</h3>
-            <button className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none">
-              <span className="close-button" onClick={handleClose}>
-                &times;
-              </span>
-            </button>
-          </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
-                className="cancel-button text-red-700 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                type="button"
-                onClick={handleCancel}
-              >
-                Cancelar
-              </button>
-              <button
-                className="ok-button bg-emerald-700 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
-                type="button"
-                onClick={handleOk}
-              >
-                {okButtonText ?? "Aceptar"}
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-    );
-
-    const root = createRoot(modalWrapper);
-    root.render(<ModalContent />);
-  });
-};
+import React from "react";
+import { createRoot } from "react-dom/client";
+
+export type ModalOption = "OK" | "CANCEL" | null;
+
+type ModalParams = {
+  title: string;
+  description: React.ReactNode;
+  okButtonText?: string;
+  showOptions?: boolean;
+};
+
+export const createModal = ({
+  title,
+  description,
+  okButtonText,
+  showOptions = true,
+}: ModalParams): Promise<ModalOption> => {
+  return new Promise((resolve) => {
+    const handleClose = () => {
+      resolve(null);
+      removeModal();
+    };
+
+    const handleOk = () => {
+      resolve("OK");
+      removeModal();
+    };
+
+    const handleCancel = () => {
+      resolve("CANCEL");
+      removeModal();
+    };
+
+    const removeModal = () => {
+      document.body.removeChild(modalWrapper);
+      document.body.removeChild(modalOverlay);
+    };
+
+    const modalWrapper = document.createElement("div");
+    modalWrapper.classList.add(
+      "justify-center",
+      "items-center",
+      "flex",
+      "overflow-x-hidden",
+      "overflow-y-auto",
+      "fixed",
+      "inset-0",
+      "z-50",
+      "outline-none",
+      "focus:outline-none"
+    );
+
+    // Crear capa de fondo detrás del modal
+    const modalOverlay = document.createElement("div");
+    modalOverlay.classList.add(
+      "fixed",
+      "inset-0",
+      "bg-black",
+      "opacity-50",
+      "z-40"
+    );
+
+    document.body.appendChild(modalOverlay);
+    document.body.appendChild(modalWrapper);
+
+    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">
+          <div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
+            <h3 className="text-3xl font-semibold">{title}</h3>
+            <button className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none">
+              <span className="close-button" onClick={handleClose}>
+                &times;
+              </span>
+            </button>
+          </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
+                className="cancel-button text-red-700 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                onClick={handleCancel}
+              >
+                Cancelar
+              </button>
+              <button
+                className="ok-button bg-emerald-700 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                onClick={handleOk}
+              >
+                {okButtonText ?? "Aceptar"}
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+
+    const root = createRoot(modalWrapper);
+    root.render(<ModalContent />);
+  });
+};

package/src/Modal/index.tsx

@@ -1 +1 @@
-export * from "./Modal.js";
+export * from "./Modal.js";

package/src/NavBar/NavBar.tsx

@@ -1,223 +1,223 @@
-import React, { useState } from "react";
-import {
-  DropDownArrowSvgIcon,
-  LogoutDropDownSvgIcon,
-  MenuAlt4Svg,
-  OpcionButtonSvgIcon,
-} from "@zauru-sdk/icons";
-import { COLORS } from "./NavBar.utils.js";
-import type {
-  ColorInterface,
-  DropDownLinkButtonType,
-  EntityProps,
-  NavBarProps,
-  NavItemProps,
-} from "./NavBar.types.js";
-import { Link } from "@remix-run/react";
-
-const DropDownLinkButton = ({
-  text,
-  path,
-  icon,
-  buttonHover,
-}: DropDownLinkButtonType) => (
-  <Link
-    className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${
-      buttonHover ?? ""
-    } dark:hover:bg-gray-700 dark:hover:text-white`}
-    to={path}
-    prefetch="none"
-  >
-    <div className="mx-auto pt-2">
-      {icon}
-      <span>{text}</span>
-    </div>
-  </Link>
-);
-
-const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
-  const [showOptionsMenu, setShowOptionsMenu] = useState(true);
-
-  return (
-    <div className="nav-item ml-auto">
-      <div className="flex justify-center">
-        <div className="relative inline-block">
-          <button
-            onClick={() => setShowOptionsMenu(!showOptionsMenu)}
-            className={`relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
-          >
-            {name ?? <OpcionButtonSvgIcon />}
-            <DropDownArrowSvgIcon />
-          </button>
-          <div
-            className="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800"
-            hidden={showOptionsMenu}
-            onMouseLeave={() => setShowOptionsMenu(true)}
-          >
-            {options.map((option) => option)}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const NavItem = ({
-  name,
-  link,
-  icon,
-  color,
-  specialColor,
-  childrens = [],
-}: NavItemProps) => (
-  <li className="nav-item">
-    {childrens.length > 0 ? (
-      <OptionsDropDownButton
-        name={name}
-        color={color}
-        options={childrens.map((x, index) => (
-          <DropDownLinkButton
-            key={index}
-            text={x.name}
-            path={x.link}
-            buttonHover="hover:bg-red-100"
-          />
-        ))}
-      />
-    ) : (
-      <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 `}
-      >
-        <Link
-          className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75"
-          to={link}
-          prefetch="none"
-        >
-          <div className="mx-auto pt-2">
-            {icon}
-            <span>{name}</span>
-          </div>
-        </Link>
-      </div>
-    )}
-  </li>
-);
-
-export const NavBar = ({
-  title,
-  loggedIn,
-  items,
-  selectedColor,
-}: NavBarProps) => {
-  const color: ColorInterface = COLORS[selectedColor];
-  const [NavBarOpen, setNavBarOpen] = useState(false);
-
-  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>
-      <ul className="sm:flex sm:flex-col ml-auto lg:flex-row">
-        {loggedIn ? (
-          <OptionsDropDownButton
-            color={color}
-            options={[
-              <DropDownLinkButton
-                key={0}
-                text="Cerrar Sesión"
-                path="/logout"
-                icon={<LogoutDropDownSvgIcon />}
-                buttonHover="hover:bg-red-100"
-              />,
-            ]}
-          />
-        ) : (
-          items
-            .filter((item) => !item.loggedIn)
-            .map((item, index) => {
-              return (
-                <NavItem
-                  key={index}
-                  name={item.name}
-                  link={item.link}
-                  icon={item.icon}
-                  color={color}
-                />
-              );
-            })
-        )}
-      </ul>
-    </>
-  );
-
-  return (
-    <nav className={`py-3 ${color.bg600}`}>
-      <div className="flex items-center justify-between ml-5 mr-5">
-        <div className="flex justify-between w-full lg:w-auto">
-          <Link
-            className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
-            to={"/home"}
-            prefetch="none"
-            children={
-              <>
-                <div className="inline-block mr-2 mb-2 align-middle">
-                  <img
-                    className="w-auto h-7"
-                    src="/logo.png"
-                    alt="logo-zauru"
-                  />
-                </div>
-                {title}
-              </>
-            }
-          />
-          <button
-            className={`rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`}
-            aria-label="Toggle mobile menu"
-            type="button"
-            onClick={() => setNavBarOpen(!NavBarOpen)}
-          >
-            <MenuAlt4Svg open={NavBarOpen} />
-          </button>
-        </div>
-        {/* Menú para dispositivos móviles */}
-        <div
-          className={`lg:hidden absolute 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`}
-        >
-          {options}
-        </div>
-        {/* Menú para escritorio */}
-        <div className="hidden lg:flex w-full lg:w-auto">{options}</div>
-      </div>
-    </nav>
-  );
-};
+import React, { useState } from "react";
+import {
+  DropDownArrowSvgIcon,
+  LogoutDropDownSvgIcon,
+  MenuAlt4Svg,
+  OpcionButtonSvgIcon,
+} from "@zauru-sdk/icons";
+import { COLORS } from "./NavBar.utils.js";
+import type {
+  ColorInterface,
+  DropDownLinkButtonType,
+  EntityProps,
+  NavBarProps,
+  NavItemProps,
+} from "./NavBar.types.js";
+import { Link } from "@remix-run/react";
+
+const DropDownLinkButton = ({
+  text,
+  path,
+  icon,
+  buttonHover,
+}: DropDownLinkButtonType) => (
+  <Link
+    className={`block px-4 py-3 text-sm text-gray-600 capitalize transition-colors duration-200 transform dark:text-gray-300 ${
+      buttonHover ?? ""
+    } dark:hover:bg-gray-700 dark:hover:text-white`}
+    to={path}
+    prefetch="none"
+  >
+    <div className="mx-auto pt-2">
+      {icon}
+      <span>{text}</span>
+    </div>
+  </Link>
+);
+
+const OptionsDropDownButton = ({ color, options, name }: EntityProps) => {
+  const [showOptionsMenu, setShowOptionsMenu] = useState(true);
+
+  return (
+    <div className="nav-item ml-auto">
+      <div className="flex justify-center">
+        <div className="relative inline-block">
+          <button
+            onClick={() => setShowOptionsMenu(!showOptionsMenu)}
+            className={`relative flex items-center p-2 text-xs text-white ${color.bg700} active:${color.bg900} border border-transparent rounded-full uppercase focus:ring-opacity-40 focus:outline-none`}
+          >
+            {name ?? <OpcionButtonSvgIcon />}
+            <DropDownArrowSvgIcon />
+          </button>
+          <div
+            className="absolute right-0 z-20 w-56 py-2 mt-2 overflow-hidden bg-white rounded-md shadow-xl dark:bg-gray-800"
+            hidden={showOptionsMenu}
+            onMouseLeave={() => setShowOptionsMenu(true)}
+          >
+            {options.map((option) => option)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const NavItem = ({
+  name,
+  link,
+  icon,
+  color,
+  specialColor,
+  childrens = [],
+}: NavItemProps) => (
+  <li className="nav-item">
+    {childrens.length > 0 ? (
+      <OptionsDropDownButton
+        name={name}
+        color={color}
+        options={childrens.map((x, index) => (
+          <DropDownLinkButton
+            key={index}
+            text={x.name}
+            path={x.link}
+            buttonHover="hover:bg-red-100"
+          />
+        ))}
+      />
+    ) : (
+      <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 `}
+      >
+        <Link
+          className="px-3 flex items-center text-xs leading-snug text-white uppercase hover:opacity-75"
+          to={link}
+          prefetch="none"
+        >
+          <div className="mx-auto pt-2">
+            {icon}
+            <span>{name}</span>
+          </div>
+        </Link>
+      </div>
+    )}
+  </li>
+);
+
+export const NavBar = ({
+  title,
+  loggedIn,
+  items,
+  selectedColor,
+}: NavBarProps) => {
+  const color: ColorInterface = COLORS[selectedColor];
+  const [NavBarOpen, setNavBarOpen] = useState(false);
+
+  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>
+      <ul className="sm:flex sm:flex-col ml-auto lg:flex-row">
+        {loggedIn ? (
+          <OptionsDropDownButton
+            color={color}
+            options={[
+              <DropDownLinkButton
+                key={0}
+                text="Cerrar Sesión"
+                path="/logout"
+                icon={<LogoutDropDownSvgIcon />}
+                buttonHover="hover:bg-red-100"
+              />,
+            ]}
+          />
+        ) : (
+          items
+            .filter((item) => !item.loggedIn)
+            .map((item, index) => {
+              return (
+                <NavItem
+                  key={index}
+                  name={item.name}
+                  link={item.link}
+                  icon={item.icon}
+                  color={color}
+                />
+              );
+            })
+        )}
+      </ul>
+    </>
+  );
+
+  return (
+    <nav className={`py-3 ${color.bg600}`}>
+      <div className="flex items-center justify-between ml-5 mr-5">
+        <div className="flex justify-between w-full lg:w-auto">
+          <Link
+            className="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white"
+            to={"/home"}
+            prefetch="none"
+            children={
+              <>
+                <div className="inline-block mr-2 mb-2 align-middle">
+                  <img
+                    className="w-auto h-7"
+                    src="/logo.png"
+                    alt="logo-zauru"
+                  />
+                </div>
+                {title}
+              </>
+            }
+          />
+          <button
+            className={`rounded lg:hidden focus:outline-none focus:ring focus:${color.ring600} focus:ring-opacity-50`}
+            aria-label="Toggle mobile menu"
+            type="button"
+            onClick={() => setNavBarOpen(!NavBarOpen)}
+          >
+            <MenuAlt4Svg open={NavBarOpen} />
+          </button>
+        </div>
+        {/* Menú para dispositivos móviles */}
+        <div
+          className={`lg:hidden absolute 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`}
+        >
+          {options}
+        </div>
+        {/* Menú para escritorio */}
+        <div className="hidden lg:flex w-full lg:w-auto">{options}</div>
+      </div>
+    </nav>
+  );
+};