@zauru-sdk/components 1.0.11 → 1.0.12

package/dist/index.d.ts

@@ -0,0 +1,19 @@
+export * from "./Alerts";
+export * from "./BlockUI";
+export * from "./Buttons";
+export * from "./Card";
+export * from "./Containers";
+export * from "./Footer";
+export * from "./Labels";
+export * from "./Layouts";
+export * from "./LineSeparator";
+export * from "./Modal";
+export * from "./NavBar";
+export * from "./Skeletons";
+export * from "./Tab";
+export * from "./Table";
+export * from "./TaskList";
+export * from "./Titles";
+export * from "./Tooltip";
+export * from "./WithTooltip";
+export * from "./Wizards";

package/dist/index.js

@@ -1 +1,21 @@
-"use strict";
+export * from "./Alerts";
+export * from "./BlockUI";
+export * from "./Buttons";
+export * from "./Card";
+//export * from "./Chat";
+export * from "./Containers";
+export * from "./Footer";
+export * from "./Labels";
+export * from "./Layouts";
+export * from "./LineSeparator";
+export * from "./Modal";
+export * from "./NavBar";
+export * from "./Skeletons";
+export * from "./Tab";
+export * from "./Table";
+export * from "./TaskList";
+export * from "./Titles";
+export * from "./Tooltip";
+export * from "./WithTooltip";
+export * from "./Wizards";
+//export * from "./Zendesk";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.11",
+  "version": "1.0.12",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,11 +31,13 @@
   "dependencies": {
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
+    "@zauru-sdk/common": "^1.0.10",
     "@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",
+    "jsonwebtoken": "9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -45,5 +47,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "gitHead": "d296471a4450a74c505269079769dabfab983749"
+  "gitHead": "39d7ad9b27500e7873b58d4222859d5cff7056b2"
 }

package/src/Alerts/index.ts

@@ -0,0 +1,3 @@
+export * from "./ErrorBoundaryAlert/ErrorBoundaryAlert";
+export * from "./Alert";
+export * from "./StaticAlert";

package/src/BlockUI/BlockUI.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  active: boolean;
+  loadingText?: string;
+};
+
+export const BlockUI = (props: Props) => {
+  const { children, active, loadingText } = props;
+
+  if (!active) {
+    return <>{children}</>;
+  }
+
+  return (
+    <div>
+      <div className="relative">
+        <div className="absolute bg-gray-100 bg-opacity-20 z-10 h-full w-full flex items-center justify-center">
+          <div className="flex items-center">
+            <span className="text-3xl mr-4">{loadingText}</span>
+            {/* <!-- loading icon --> */}
+            <svg
+              className="animate-spin h-5 w-5 text-gray-600"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+            >
+              <circle
+                className="opacity-25"
+                cx="12"
+                cy="12"
+                r="10"
+                stroke="currentColor"
+                strokeWidth="4"
+              ></circle>
+              <path
+                className="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            {/* <!-- end loading icon --> */}
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/BlockUI/index.tsx

@@ -0,0 +1 @@
+export * from "./BlockUI";

package/src/Buttons/Button.tsx

@@ -0,0 +1,90 @@
+import type { ColorInterface } from "../NavBar/NavBar.types";
+
+type Props = {
+  type?: "reset" | "button" | "submit" | undefined;
+  title?: string;
+  name?: string;
+  onClickSave?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  //Cargando...
+  loading?: boolean;
+  loadingText?: string;
+  selectedColor?: "indigo" | "green" | "red" | "yellow";
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const Button = (props: Props) => {
+  const {
+    type = "submit",
+    loading = false,
+    loadingText = "Guardando...",
+    title = "Guardar",
+    name = "save",
+    onClickSave,
+    selectedColor = "indigo",
+    children,
+    className = "",
+    disabled = false,
+  } = props;
+
+  const COLORS = {
+    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",
+    },
+    indigo: {
+      bg900: "bg-indigo-900",
+      bg700: "bg-indigo-700",
+      bg600: "bg-indigo-600",
+      bg500: "bg-indigo-500",
+      ring600: "ring-indigo-600",
+      ring500: "ring-indigo-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",
+    },
+    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",
+    },
+  };
+
+  const color: ColorInterface = COLORS[selectedColor];
+
+  const inside = children ?? title;
+
+  return (
+    <button
+      type={type}
+      name="action"
+      disabled={loading || disabled}
+      value={name}
+      onClick={onClickSave}
+      className={`ml-2 ${loading || disabled ? " bg-opacity-25 " : ""} ${
+        loading
+          ? " cursor-progress"
+          : `${disabled ? "" : `hover:${color.bg700}`}`
+      } inline-flex justify-center rounded-md border border-transparent ${
+        color.bg600
+      } py-2 px-4 text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:${
+        color.ring500
+      } focus:ring-offset-2 ${className}`}
+    >
+      {loading ? loadingText : inside}
+    </button>
+  );
+};

package/src/Buttons/index.ts

@@ -0,0 +1 @@
+export * from "./Button";

package/src/Card/Card.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  title?: string;
+  className?: string;
+};
+
+export const Card = (props: Props) => {
+  const { children, title, className } = props;
+
+  return (
+    <div
+      className={`p-4 space-y-3 shadow sm:overflow-hidden sm:rounded-md ${className}`}
+    >
+      {title && (
+        <label className="inline text-lg font-medium text-gray-700">
+          {`${title.toUpperCase()}`}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};

package/src/Card/index.ts

@@ -0,0 +1 @@
+export * from "./Card";

package/src/Containers/BodyContainer.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const BodyContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <body className="flex flex-col min-h-screen m-0">{children}</body>
+    </>
+  );
+};

package/src/Containers/ButtonSectionContainer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  whitBg?: boolean;
+};
+
+export const ButtonSectionContainer = (props: Props) => {
+  const { children, className, whitBg = true } = props;
+
+  return (
+    <div
+      className={`${
+        whitBg ? "bg-gray-50" : ""
+      } px-4 py-3 text-right sm:px-6 ${className}`}
+    >
+      {children}
+    </div>
+  );
+};

package/src/Containers/Container.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+type Props = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  rightContent?: React.ReactNode;
+};
+
+export const Container = (props: Props) => {
+  const { title, description, children, className = "", rightContent } = props;
+
+  const titleInfo = (
+    <>
+      {title && (
+        <h3 className="text-3xl font-bold leading-8 text-gray-900">{title}</h3>
+      )}
+      {description && (
+        <p className="mt-1 text-md text-gray-600">{description}</p>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      <div className={`mx-2 ${className}`}>
+        {rightContent && (
+          <div className="flex justify-between items-center">
+            <div>{titleInfo}</div>
+            <div>{rightContent}</div>
+          </div>
+        )}
+        {!rightContent && titleInfo}
+        <div className="mt-5 space-y-5">{children}</div>
+      </div>
+    </>
+  );
+};

package/src/Containers/DoubleContainer.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+type Props = {
+  title?: string;
+  description?: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+export const DoubleContainer = (props: Props) => {
+  const { title, description, className = "", children } = props;
+
+  const getChildren = (index: number) => {
+    if (children && Array.isArray(children) && children[index]) {
+      return children[index];
+    }
+
+    if (children && index === 0) {
+      return children;
+    }
+
+    return <></>;
+  };
+
+  return (
+    <>
+      <div className={`mx-2 ${className}`}>
+        {/* Font sizes https://tailwindcss.com/docs/font-size */}
+        {title && (
+          <h3 className="text-3xl font-bold leading-8 text-gray-900">
+            {title}
+          </h3>
+        )}
+        {description && (
+          <p className="mt-1 text-md text-gray-600">{description}</p>
+        )}
+        <div className="grid xl:grid-cols-3 md:grid-cols-1 gap-4">
+          <div className="xl:col-span-2 md:col-span-1 mt-5">
+            {getChildren(0)}
+          </div>
+          <div className="xl:col-span-1 md:col-span-1 mt-5">
+            {getChildren(1)}
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};

package/src/Containers/MainContainer.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const MainContainer = (props: Props) => {
+  const { children } = props;
+
+  return (
+    <>
+      <div className="md:p-10 p-0 mt-10 ml-2 mr-2 mb-10 md:mt-0 md:ml-0 md:mr-0 md:mb-0">
+        {children}
+      </div>
+    </>
+  );
+};

package/src/Containers/OutletContainer.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const OutletContainer = (props: Props) => {
+  const { children } = props;
+  return (
+    <>
+      <div className="flex-1 overflow-x-auto">{children}</div>
+    </>
+  );
+};

package/src/Containers/SubContainer.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+type Props = {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+  rightContent?: React.ReactNode;
+};
+
+export const SubContainer = (props: Props) => {
+  const { title, description, children, className = "", rightContent } = props;
+
+  const titleInfo = (
+    <>
+      {title && (
+        <h3 className="text-xl font-bold leading-8 text-gray-900">{title}</h3>
+      )}
+      {description && (
+        <p className="mt-1 text-md text-gray-600">{description}</p>
+      )}
+    </>
+  );
+
+  return (
+    <div className={`${className}`}>
+      {rightContent && (
+        <div className="flex justify-between items-center">
+          <div>{titleInfo}</div>
+          <div>{rightContent}</div>
+        </div>
+      )}
+      {!rightContent && titleInfo}
+      <div className="mt-5 space-y-3">{children}</div>
+    </div>
+  );
+};

package/src/Containers/index.ts

@@ -0,0 +1,7 @@
+export * from "./BodyContainer";
+export * from "./ButtonSectionContainer";
+export * from "./Container";
+export * from "./DoubleContainer";
+export * from "./MainContainer";
+export * from "./OutletContainer";
+export * from "./SubContainer";

package/src/Footer/Footer.tsx

@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+//import ConnectionState from "../ConnectionState";
+import { LoadingInputSkeleton } from "src";
+
+type FooterProps = {
+  href: string;
+  showConnection?: boolean;
+  selectedColor:
+    | "purple"
+    | "pink"
+    | "indigo"
+    | "cyan"
+    | "slate"
+    | "green"
+    | "red"
+    | "sky";
+};
+
+const COLORS = {
+  purple: "bg-purple-500",
+  pink: "bg-pink-500",
+  indigo: "bg-indigo-500",
+  cyan: "bg-cyan-500",
+  slate: "bg-slate-500",
+  green: "bg-green-500",
+  red: "bg-red-500",
+  sky: "bg-sky-500",
+};
+
+export const Footer = ({
+  href,
+  selectedColor,
+  showConnection = false,
+}: FooterProps) => {
+  const [client, setIsClient] = useState(false);
+  const color = COLORS[selectedColor];
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  if (!client) {
+    return <LoadingInputSkeleton />;
+  }
+
+  return (
+    <footer className={`inset-x-0 bottom-0 px-2 py-[20px] ${color}`}>
+      <div className="px-4 mx-auto flex flex-wrap items-center justify-center">
+        <p className="text-white text-[1.2rem]">
+          {`Creado en `} <a href={href}>Zauru</a>{" "}
+          {`con ❤️ ${new Date().getFullYear()} v.3.2`}
+        </p>
+        {/* {showConnection && (
+          <div className="ml-5">
+            <ConnectionState />
+          </div>
+        )} */}
+      </div>
+    </footer>
+  );
+};

package/src/Footer/index.tsx

@@ -0,0 +1 @@
+export * from "./Footer";

package/src/Labels/InfoLabel/index.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+type Props = {
+  description: string;
+  title: string;
+  className?: string;
+};
+
+export const InfoLabel = (props: Props) => {
+  const { description, title, className } = props;
+  return (
+    <div className={`block ${className}`}>
+      <label className="inline text-sm font-medium text-gray-700">
+        {`${title.toUpperCase()} `}
+      </label>
+      <label className="inline text-sm font-medium text-gray-500">
+        {description}
+      </label>
+    </div>
+  );
+};

package/src/Labels/index.tsx

@@ -0,0 +1 @@
+export * from "./InfoLabel";

package/src/Layouts/homeLayout/index.tsx

@@ -0,0 +1,34 @@
+type Props = {
+  title?: string;
+  description?: string;
+};
+
+export const HomeLayout = ({ title, description }: Props) => {
+  return (
+    <div
+      className="bg-cover bg-center h-screen"
+      style={{ backgroundImage: 'url("/wallpaper.webp")' }}
+    >
+      <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.</>}
+        </p>
+      </div>
+    </div>
+  );
+};

package/src/Layouts/index.ts

@@ -0,0 +1 @@
+export * from "./homeLayout";

package/src/LineSeparator/LineSeparator.tsx

@@ -0,0 +1,3 @@
+export const LineSeparator = () => {
+  return <hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-400"></hr>;
+};

package/src/LineSeparator/index.tsx

@@ -0,0 +1 @@
+export * from "./LineSeparator";