@zauru-sdk/components 1.0.11

package/dist/NavBar/NavBar.types.d.ts

@@ -0,0 +1,50 @@
+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/dist/NavBar/NavBar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/NavBar/NavBar.utils.d.ts

@@ -0,0 +1,58 @@
+export declare const COLORS: {
+    sky: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+    purple: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+    pink: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+    slate: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+    green: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+    yellow: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+    red: {
+        bg900: string;
+        bg700: string;
+        bg600: string;
+        bg500: string;
+        ring600: string;
+        ring500: string;
+    };
+};

package/dist/NavBar/NavBar.utils.js

@@ -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/dist/index.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@zauru-sdk/components",
+  "version": "1.0.11",
+  "description": "Componentes reutilizables en las WebApps de Zauru.",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Oscar Cuéllar",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "eslint": "^8.38.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "react-data-table-component": "^7.4.7",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.2.1",
+    "@remix-run/react": "^2.8.1",
+    "@zauru-sdk/graphql": "^1.0.9",
+    "@zauru-sdk/services": "^1.0.10",
+    "@zauru-sdk/types": "^1.0.10",
+    "@zauru-sdk/utils": "^1.0.10",
+    "framer-motion": "^11.0.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-select": "^5.8.0",
+    "styled-components": "^5.3.5"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "gitHead": "d296471a4450a74c505269079769dabfab983749"
+}

package/src/Alerts/Alert.tsx

@@ -0,0 +1,149 @@
+import React, { useState, useRef, useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import { ExitSvg } from "../Icons/Icons";
+import { AnimatePresence, motion } from "framer-motion";
+
+type AlertType = "success" | "error" | "info" | "warning";
+
+export type AlertProps = {
+  type: AlertType;
+  title: string;
+  description: string;
+  onClose?: () => void;
+};
+
+const Alert: React.FC<AlertProps> = ({ type, title, description, onClose }) => {
+  const [, setLifetime] = useState(4000);
+  const [progress, setProgress] = useState(0);
+  const intervalRef = useRef<any>(null);
+
+  const getColor = () => {
+    switch (type) {
+      case "success":
+        return "bg-green-100 text-green-800";
+      case "error":
+        return "bg-red-100 text-red-800";
+      case "info":
+        return "bg-blue-100 text-blue-800";
+      case "warning":
+        return "bg-yellow-100 text-yellow-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  };
+
+  useEffect(() => {
+    const startTimer = () => {
+      intervalRef.current = setInterval(() => {
+        setLifetime((lifetime) => {
+          if (lifetime <= 0) {
+            onClose && onClose();
+            clearInterval(intervalRef.current);
+            return 0;
+          } else {
+            setProgress((4000 - lifetime) / 4000);
+            return lifetime - 50;
+          }
+        });
+      }, 50);
+    };
+
+    const pauseTimer = () => {
+      clearInterval(intervalRef.current);
+    };
+
+    startTimer();
+    return () => {
+      pauseTimer();
+    };
+  }, [onClose]);
+
+  return (
+    <motion.div
+      initial={{ y: -50, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      exit={{ y: -50, opacity: 0 }}
+      className={`fixed top-0 right-0 w-80 mt-10 mr-10 rounded-md shadow-lg ${getColor()} p-4 transition-transform duration-300`}
+      style={{
+        zIndex: 1000,
+        transform: `translateY(calc(var(--alert-offset, 0)))`,
+      }}
+      onMouseEnter={() => clearInterval(intervalRef.current)}
+      onMouseLeave={() => {
+        intervalRef.current = setInterval(() => {
+          setLifetime((lifetime) => {
+            if (lifetime <= 0) {
+              onClose && onClose();
+              clearInterval(intervalRef.current);
+              return 0;
+            } else {
+              setProgress((4000 - lifetime) / 4000);
+              return lifetime - 50;
+            }
+          });
+        }, 50);
+      }}
+    >
+      <div className="flex items-center justify-between">
+        <h3 className="font-semibold">{title}</h3>
+        <button
+          className="text-gray-400 hover:text-gray-500 focus:outline-none focus:text-gray-500 transition duration-150 ease-in-out"
+          onClick={() => {
+            setLifetime(0);
+            onClose && onClose();
+          }}
+        >
+          <ExitSvg />
+        </button>
+      </div>
+      <div className="mt-2">
+        <p className="text-sm overflow-wrap break-words">{description}</p>
+      </div>
+      <div className="relative h-1 mt-4 bg-gray-200 rounded">
+        <div
+          className={`absolute left-0 top-0 h-full ${getColor()} rounded`}
+          style={{ width: `${progress * 100}%` }}
+        ></div>
+      </div>
+    </motion.div>
+  );
+};
+
+let activeAlerts: HTMLElement[] = [];
+
+export const showAlert = (alertProps: AlertProps) => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+
+  const onClose = () => {
+    root.unmount();
+    container.remove();
+    activeAlerts = activeAlerts.filter((alert) => alert !== container);
+    updateAlertOffsets();
+  };
+
+  const asyncOnClose = () => {
+    setTimeout(() => {
+      onClose();
+    }, 0);
+  };
+
+  activeAlerts.push(container);
+  updateAlertOffsets();
+
+  const root = createRoot(container);
+  root.render(
+    <AnimatePresence>
+      <Alert {...alertProps} onClose={asyncOnClose} />
+    </AnimatePresence>
+  );
+};
+
+const updateAlertOffsets = () => {
+  activeAlerts.forEach((alertContainer, index) => {
+    alertContainer.style.setProperty("--alert-offset", `${index * 100}px`);
+  });
+};

package/src/Alerts/ErrorBoundaryAlert/ErrorBoundaryAlert.tsx

@@ -0,0 +1,66 @@
+//<reference> https://tailwindtemplates.io/templates?category=alert
+import React from "react";
+
+type Props = { title: string; description: string };
+
+export const ErrorBoundaryAlert = (props: Props) => {
+  const { title, description } = props;
+  return (
+    <div className="rounded-full top-20 mx-auto p-3">
+      <div className="p-4 text-red-900 bg-red-100 border border-red-200 rounded-md">
+        <div className="flex justify-between flex-wrap">
+          <div className="w-0 flex-1 flex">
+            <div className="mr-3 pt-1">
+              <svg
+                width="26"
+                height="26"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+              >
+                <path d="M13.6086 3.247l8.1916 15.8c.0999.2.1998.5.1998.8 0 1-.7992 1.8-1.7982 1.8H3.7188c-.2997 0-.4995-.1-.7992-.2-.7992-.5-1.1988-1.5-.6993-2.4 5.3067-10.1184 8.0706-15.385 8.2915-15.8.3314-.6222.8681-.8886 1.4817-.897.6135-.008 1.273.2807 1.6151.897zM12 18.95c.718 0 1.3-.582 1.3-1.3 0-.718-.582-1.3-1.3-1.3-.718 0-1.3.582-1.3 1.3 0 .718.582 1.3 1.3 1.3zm-.8895-10.203v5.4c0 .5.4.9.9.9s.9-.4.9-.9v-5.3c0-.5-.4-.9-.9-.9s-.9.4-.9.8z"></path>
+              </svg>
+            </div>
+            <div>
+              <h4 className="text-md leading-6 font-medium">
+                {title?.toString()}
+              </h4>
+              <p className="text-sm">{description?.toString()}</p>
+              {/* ============== BOTONES ============= */}
+              {/* <div className="flex mt-3">
+                <button
+                  type="button"
+                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm"
+                >
+                  Primary button
+                </button>
+                <button
+                  type="button"
+                  className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ml-2 bg-red-200 text-base font-medium hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-400 sm:w-auto sm:text-sm"
+                >
+                  Secondary button
+                </button>
+              </div> */}
+            </div>
+          </div>
+          <div>
+            <button
+              type="button"
+              className="rounded-md focus:outline-none focus:ring-2 focus:ring-red-500"
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+              >
+                <path d="M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/Alerts/StaticAlert.tsx

@@ -0,0 +1,121 @@
+//<reference> https://tailwindtemplates.io/templates?category=StaticAlert
+import React from "react";
+
+type Props = {
+  className?: string;
+  title: string;
+  description: any;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+  type?: "success" | "info";
+  loading?: boolean;
+};
+
+const getConfig = (type: string) => {
+  switch (type) {
+    case "info":
+      return {
+        containerClassName:
+          "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",
+        buttonClassName:
+          "rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+        path: (
+          <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
+        ),
+      };
+    case "success":
+      return {
+        containerClassName:
+          "text-green-900 bg-green-100 border border-green-200 rounded-md",
+        buttonClassName:
+          "rounded-md focus:outline-none focus:ring-2 focus:ring-green-500",
+        path: (
+          <path d="M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z"></path>
+        ),
+      };
+    default:
+      return {
+        containerClassName:
+          "text-blue-900 bg-blue-100 border border-blue-200 rounded-md",
+        buttonClassName:
+          "rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500",
+        path: (
+          <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
+        ),
+      };
+  }
+};
+
+export const StaticAlert = (props: Props) => {
+  const {
+    className,
+    title,
+    description,
+    onClose,
+    type = "info",
+    loading = false,
+  } = props;
+
+  const config = getConfig(type);
+
+  return (
+    <div
+      className={`${className} ${config.containerClassName} ${
+        loading ? " hidden" : ""
+      }`}
+    >
+      <div className="flex justify-between flex-wrap">
+        <div className="w-0 flex-1 flex">
+          <div className="mr-3 pt-1">
+            <svg
+              width="26"
+              height="26"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+            >
+              {config.path}
+            </svg>
+          </div>
+          <div>
+            <h4 className="text-md leading-6 font-medium">{title}</h4>
+            <div className="text-sm">{description}</div>
+            {/* <div className="flex mt-3">
+              <button
+                type="button"
+                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-${color}-700 text-base font-medium text-white hover:bg-${color}-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${color}-500 sm:w-auto sm:text-sm"
+              >
+                Primary button
+              </button>
+              <button
+                type="button"
+                className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ml-2 bg-${color}-200 text-base font-medium hover:bg-${color}-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-${color}-400 sm:w-auto sm:text-sm"
+              >
+                Secondary button
+              </button>
+            </div> */}
+          </div>
+        </div>
+        {onClose && (
+          <div>
+            <button
+              type="button"
+              className={`${config.buttonClassName}`}
+              onClick={onClose}
+            >
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+              >
+                <path d="M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z"></path>
+              </svg>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};