@zauru-sdk/components 1.0.11

package/src/Icons/StylesConstants.tsx

@@ -0,0 +1,66 @@
+// ============================| Background colors |============================
+
+export const styleGreenBackground = "bg-green-600";
+
+export const styleActiveGreenBackground = "active:bg-green-800";
+
+export const styleRedBackground = "bg-red-600";
+
+export const styleActiveRedBackground = "active:bg-red-800";
+
+export const styleInactiveButtonBackground = "bg-zinc-300";
+
+export const styleActiveInactiveButtonBackground = "active:bg-zinc-200";
+
+export const styleStandardBackgroundColor = "bg-slate-900";
+
+export const styleStandardActiveBackgroundColor = "active:bg-slate-800";
+
+// ==============================| Icons Colors |=================================
+
+export const buttonIconTableColor = "text-slate-700";
+
+export const greenColorIcon = "text-emerald-600";
+
+export const redColorIcon = "text-red-600";
+
+export const applicationDropDownIconColor = "text-slate-900";
+
+export const inputIconColor = "text-zinc-400";
+
+// ==============================| Table Utils Colors |============================
+
+// CSS Color Nams, RGB, Hexadecimal
+export const lastRowSelectedBackground = "lightgreen";
+
+// ==============================| Dropdown Hover |=================================
+
+export const greenDropdownHover = "hover:bg-red-100";
+
+export const redDropdownHover = "hover:bg-green-100";
+
+export const standardDropdownHover = "hover:bg-gray-100";
+
+// ===============================| Border Colors | =================================
+
+export const standarBorderColor = "border-slate-500";
+
+export const alertBorderColor = "border-red-500";
+
+// ===============================| Section Background Color | =================================
+
+export const sectionNormalBackgroundColor = "bg-neutral-100";
+
+export const inProgressProcessAlertBackgroundColor = "bg-yellow-900";
+
+// ===============================| Progress Bar Styles | =================================
+
+export const progressBarLightBackground = "bg-slate-200";
+
+export const progressBarBackground = "bg-slate-600";
+
+export const progressBarTextColor = "text-slate-800";
+
+export const progressBarLightTextColor = "text-slate-300";
+
+export const progressBarSpinnerFillColor = "fill-slate-800";

package/src/NavBar/NavBar.tsx

@@ -0,0 +1,223 @@
+import React, { useState } from "react";
+import {
+  DropDownArrowSvgIcon,
+  LogoutDropDownSvgIcon,
+  MenuAlt4Svg,
+  OpcionButtonSvgIcon,
+} from "../Icons/Icons";
+import { COLORS } from "./NavBar.utils";
+import type {
+  ColorInterface,
+  DropDownLinkButtonType,
+  EntityProps,
+  NavBarProps,
+  NavItemProps,
+} from "./NavBar.types";
+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 NavBarOpen={NavBarOpen} setNavBarOpen={undefined} />
+          </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>
+  );
+};

package/src/NavBar/NavBar.types.ts

@@ -0,0 +1,64 @@
+export type NavBarItemsSchema = {
+  name: string;
+  link: string;
+  loggedIn: boolean;
+  icon?: any;
+  color?: "green";
+  childrens?: Exclude<NavBarItemsSchema, "loggedIn">[];
+};
+
+export type NavBarProps = {
+  title: string;
+  loggedIn: boolean;
+  items: Array<NavBarItemsSchema>;
+  selectedColor:
+    | "pink"
+    | "purple"
+    | "slate"
+    | "green"
+    | "yellow"
+    | "red"
+    | "sky";
+  LinkComponent?: any;
+};
+
+export type NavBarStateProps = {
+  NavBarOpen: boolean;
+  setNavBarOpen?: any;
+};
+
+export type ColorInterface = {
+  bg900: string;
+  bg700: string;
+  bg600: string;
+  bg500: string;
+  ring600: string;
+  ring500: string;
+};
+
+export type NavItemProps = {
+  name: string;
+  link: string;
+  icon?: any;
+  color: ColorInterface;
+  specialColor?: ColorInterface;
+  childrens?: Exclude<NavItemProps, "index" | "color">[];
+};
+
+export type EntityNameType = {
+  entityName: string;
+};
+
+export type EntityProps = {
+  name?: string;
+  color: ColorInterface;
+  options: any[];
+};
+
+export type DropDownLinkButtonType = {
+  text: string;
+  path: string;
+  icon?: any;
+  buttonHover?: string;
+  LinkComponent?: any;
+};

package/src/NavBar/NavBar.utils.ts

@@ -0,0 +1,58 @@
+export const COLORS = {
+  sky: {
+    bg900: "bg-sky-900",
+    bg700: "bg-sky-700",
+    bg600: "bg-sky-600",
+    bg500: "bg-sky-500",
+    ring600: "ring-sky-600",
+    ring500: "ring-sky-500",
+  },
+  purple: {
+    bg900: "bg-purple-900",
+    bg700: "bg-purple-700",
+    bg600: "bg-purple-600",
+    bg500: "bg-purple-500",
+    ring600: "ring-purple-600",
+    ring500: "ring-purple-500",
+  },
+  pink: {
+    bg900: "bg-pink-900",
+    bg700: "bg-pink-700",
+    bg600: "bg-pink-600",
+    bg500: "bg-pink-500",
+    ring600: "ring-pink-600",
+    ring500: "ring-pink-500",
+  },
+  slate: {
+    bg900: "bg-slate-900",
+    bg700: "bg-slate-700",
+    bg600: "bg-slate-600",
+    bg500: "bg-slate-500",
+    ring600: "ring-slate-600",
+    ring500: "ring-slate-500",
+  },
+  green: {
+    bg900: "bg-green-900",
+    bg700: "bg-green-700",
+    bg600: "bg-green-600",
+    bg500: "bg-green-500",
+    ring600: "ring-green-600",
+    ring500: "ring-green-500",
+  },
+  yellow: {
+    bg900: "bg-yellow-900",
+    bg700: "bg-yellow-700",
+    bg600: "bg-yellow-600",
+    bg500: "bg-yellow-500",
+    ring600: "ring-yellow-600",
+    ring500: "ring-yellow-500",
+  },
+  red: {
+    bg900: "bg-red-900",
+    bg700: "bg-red-700",
+    bg600: "bg-red-600",
+    bg500: "bg-red-500",
+    ring600: "ring-red-600",
+    ring500: "ring-red-500",
+  },
+};

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationDir": "./dist",
+    "paths": {
+      "~/*": ["./app/*"]
+    }
+  }
+}