@zauru-sdk/components 1.0.12 → 1.0.14

package/src/Form/TimePicker/index.tsx

@@ -0,0 +1,127 @@
+import { ClockIconSVG, CloseSvgIcon, IdeaIconSVG } from "@zauru-sdk/icons";
+import { useAppSelector } from "@zauru-sdk/redux";
+import React, { useEffect, useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  hint?: string;
+  helpText?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  tabIndex?: number;
+  error?: string;
+  disabled?: boolean;
+};
+
+export const FormTimePickerWithoutValidation = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = "",
+    hint,
+    helpText,
+    onChange,
+    tabIndex,
+    error,
+    disabled = false,
+  } = props;
+
+  const [value, setValue] = useState<string>(defaultValue);
+  const [showTooltip, setShowTooltip] = useState<boolean>(false);
+
+  const color = error ? "red" : "gray";
+
+  const isReadOnly = disabled;
+  const bgColor = isReadOnly ? "bg-gray-200" : `bg-${color}-50`;
+  const textColor = isReadOnly ? "text-gray-500" : `text-${color}-500`;
+  const borderColor = isReadOnly ? "border-gray-300" : `border-${color}-200`;
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  const clearValue = () => {
+    setValue("");
+    onChange && onChange("");
+  };
+
+  return (
+    <>
+      {title && (
+        <label
+          htmlFor={error ? `${name}-error` : `${name}-success`}
+          className={`block text-sm font-medium ${textColor}`}
+        >
+          {title}
+        </label>
+      )}
+      <div className="flex relative items-center">
+        <div className="absolute left-0 flex items-center pl-3 pointer-events-none">
+          <ClockIconSVG />
+        </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`}
+        />
+        {value && (
+          <button
+            type="button"
+            onClick={clearValue}
+            className="absolute right-0 mr-10"
+          >
+            <CloseSvgIcon />
+          </button>
+        )}
+        {helpText && (
+          <div className="flex items-center relative ml-3">
+            <div
+              className="relative cursor-pointer"
+              onMouseEnter={() => setShowTooltip(true)}
+              onMouseLeave={() => setShowTooltip(false)}
+            >
+              <IdeaIconSVG />
+              {showTooltip && (
+                <div className="absolute -left-48 top-0 mt-8 p-2 bg-white border rounded shadow text-black">
+                  {helpText}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && hint && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {hint}
+        </p>
+      )}
+    </>
+  );
+};
+
+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

@@ -0,0 +1,79 @@
+import { useAppSelector } from "@zauru-sdk/redux";
+import { useState } from "react";
+
+type Props = {
+  id?: string;
+  name: string;
+  formName?: string;
+  title?: string;
+  defaultValue?: boolean;
+  helpText?: string;
+  onChange?: (value: boolean) => void;
+  disabled?: boolean;
+};
+
+const YesNo = (props: Props) => {
+  const {
+    id,
+    name,
+    title,
+    defaultValue = false,
+    helpText,
+    onChange,
+    disabled,
+  } = props;
+
+  const { formValidations } = useAppSelector((state) => state.formValidation);
+  const error = formValidations[props.formName ?? "-1"]?.[props.name ?? "-1"];
+
+  const [value, setValue] = useState(defaultValue);
+
+  const color = error ? "red" : "gray";
+
+  const handleOnChange = () => {
+    if (disabled) return; // No hacer nada si está deshabilitado
+    const newValue = !value;
+    setValue(newValue);
+    onChange && onChange(newValue);
+  };
+
+  return (
+    <>
+      <label
+        className={`relative inline-flex items-center cursor-pointer ${
+          disabled ? "opacity-50" : ""
+        }`}
+      >
+        <input
+          type="checkbox"
+          id={id ?? name}
+          name={name}
+          checked={value}
+          value={value.toString()}
+          className="sr-only peer"
+          onChange={handleOnChange}
+          disabled={disabled}
+        />
+        {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>
+      </label>
+      {error && (
+        <p className={`mt-2 text-sm text-${color}-600 dark:text-${color}-500`}>
+          <span className="font-medium">Oops!</span> {error}
+        </p>
+      )}
+      {!error && helpText && (
+        <p
+          className={`mt-2 italic text-sm text-${color}-500 dark:text-${color}-400`}
+        >
+          {helpText}
+        </p>
+      )}
+    </>
+  );
+};
+
+export default YesNo;

package/src/Form/index.ts

@@ -0,0 +1,13 @@
+export * from "./Checkbox";
+export * from "./Checklist";
+export * from "./DatePicker";
+export * from "./DynamicBaculoForm";
+export * from "./FieldContainer";
+export * from "./FileUpload";
+export * from "./FormButtons";
+export * from "./FormLayout";
+export * from "./SelectField";
+export * from "./TextArea";
+export * from "./TextField";
+export * from "./TimePicker";
+export * from "./YesNo";

package/src/NavBar/NavBar.tsx

@@ -4,7 +4,7 @@ import {
   LogoutDropDownSvgIcon,
   MenuAlt4Svg,
   OpcionButtonSvgIcon,
-} from "../Icons/Icons";
+} from "@zauru-sdk/icons";
 import { COLORS } from "./NavBar.utils";
 import type {
   ColorInterface,
@@ -202,7 +202,7 @@ export const NavBar = ({
             type="button"
             onClick={() => setNavBarOpen(!NavBarOpen)}
           >
-            <MenuAlt4Svg NavBarOpen={NavBarOpen} setNavBarOpen={undefined} />
+            <MenuAlt4Svg open={NavBarOpen} />
           </button>
         </div>
         {/* Menú para dispositivos móviles */}

package/src/Table/ZauruTable.tsx

@@ -6,7 +6,7 @@ import type {
   TableStyles,
 } from "react-data-table-component";
 import DataTable, { createTheme } from "react-data-table-component";
-import { SearchSVG } from "../Icons/Icons";
+import { SearchSVG } from "@zauru-sdk/icons";
 import { ExpandableRowsComponent } from "react-data-table-component/dist/DataTable/types";
 
 const customStyles: TableStyles = {

package/src/Zendesk/Chat.tsx

@@ -0,0 +1,85 @@
+import { useEffect } from "react";
+
+const canUseDOM = (): boolean => {
+  if (
+    typeof window === "undefined" ||
+    !window.document ||
+    !window.document.createElement
+  ) {
+    return false;
+  }
+  return true;
+};
+
+export const logoutFromZendesk = () => {
+  if (canUseDOM() && (window as any).zE) {
+    (window as any).zE("messenger", "logoutUser");
+  } else {
+    console.warn("Zendesk is not initialized yet");
+  }
+};
+
+export const ZendeskAPI = (...args: any[]) => {
+  if (canUseDOM() && (window as any).zE) {
+    (window as any).zE.apply(null, args);
+  } else {
+    console.warn("Zendesk is not initialized yet");
+  }
+};
+
+interface ZendeskProps {
+  defer?: boolean;
+  onLoaded?: () => void;
+  token: string;
+  configuration: {
+    zendeskChatKey: string;
+  };
+  [key: string]: any; // Para propiedades adicionales que se pasen y se asignen a window.zESettings
+}
+
+const Zendesk: React.FC<ZendeskProps> = (props: ZendeskProps) => {
+  const { defer, configuration, token, ...other } = props;
+
+  useEffect(() => {
+    const insertScript = () => {
+      const zendeskScript = document.createElement("script");
+      if (defer) {
+        zendeskScript.defer = true;
+      } else {
+        zendeskScript.async = true;
+      }
+      zendeskScript.id = "ze-snippet";
+      zendeskScript.src = `https://static.zdassets.com/ekr/snippet.js?key=${configuration.zendeskChatKey}`;
+      zendeskScript.addEventListener("load", () => {
+        if (props.onLoaded) {
+          props.onLoaded();
+        }
+
+        (window as any).zE("messenger", "loginUser", function (callback: any) {
+          callback(token);
+        });
+      });
+      document.body.appendChild(zendeskScript);
+
+      return zendeskScript; // Devolvemos la referencia del script
+    };
+
+    let script: HTMLScriptElement | undefined; // Guardamos la referencia del script aquí
+
+    if (canUseDOM() && !(window as any).zE) {
+      script = insertScript();
+      (window as any).zESettings = other;
+    }
+
+    return () => {
+      if (script) {
+        // Si el script existe, lo eliminamos del DOM
+        script.remove();
+      }
+    };
+  }, [props, defer, other, configuration, token]);
+
+  return null;
+};
+
+export default Zendesk;

package/src/Zendesk/index.ts

@@ -0,0 +1,2 @@
+export * from "./Chat";
+export * from "./zendesk.config";

package/src/Zendesk/zendesk.config.ts

@@ -0,0 +1,40 @@
+import jwt from "jsonwebtoken";
+
+export function zendeskJwt(
+  current_user: {
+    selected_entity_id: number;
+    id: number;
+    email: string;
+    name: string;
+  },
+  configuration: {
+    zendeskJWTSecret: string;
+    zendeskJWTKey: string;
+  }
+) {
+  // get the INFO
+  const jwtSecret = configuration.zendeskJWTSecret;
+  const jwtKey = configuration.zendeskJWTKey;
+  const expiresIn = Math.floor(Date.now() / 1000) + 60 * 60 * 24; // Expires in 1 day
+
+  // create the payload
+  const payload = {
+    external_id:
+      "z" +
+      current_user.selected_entity_id.toString() +
+      "-" +
+      current_user.id.toString(),
+    email: current_user.email,
+    name: current_user.name,
+    organization_id: current_user.selected_entity_id.toString(),
+    scope: "user",
+    exp: expiresIn,
+  };
+
+  const jwtHeader: jwt.JwtHeader = { kid: jwtKey, typ: "JWT", alg: "HS256" };
+
+  return jwt.sign(payload, jwtSecret, {
+    algorithm: "HS256",
+    header: jwtHeader,
+  });
+}

package/src/index.ts

@@ -2,9 +2,11 @@ export * from "./Alerts";
 export * from "./BlockUI";
 export * from "./Buttons";
 export * from "./Card";
-//export * from "./Chat";
+export * from "./ConnectionState";
+export * from "./Chat";
 export * from "./Containers";
 export * from "./Footer";
+export * from "./Form";
 export * from "./Labels";
 export * from "./Layouts";
 export * from "./LineSeparator";
@@ -18,4 +20,4 @@ export * from "./Titles";
 export * from "./Tooltip";
 export * from "./WithTooltip";
 export * from "./Wizards";
-//export * from "./Zendesk";
+export * from "./Zendesk";

package/dist/Alerts/Alert.d.ts

@@ -1,9 +0,0 @@
-type AlertType = "success" | "error" | "info" | "warning";
-export type AlertProps = {
-    type: AlertType;
-    title: string;
-    description: string;
-    onClose?: () => void;
-};
-export declare const showAlert: (alertProps: AlertProps) => void;
-export {};

package/dist/Alerts/Alert.js

@@ -1,97 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
-import { createRoot } from "react-dom/client";
-import { ExitSvg } from "../Icons/Icons";
-import { AnimatePresence, motion } from "framer-motion";
-const Alert = ({ type, title, description, onClose }) => {
-    const [, setLifetime] = useState(4000);
-    const [progress, setProgress] = useState(0);
-    const intervalRef = useRef(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 (_jsxs(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);
-        }, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("h3", { className: "font-semibold", children: title }), _jsx("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();
-                        }, children: _jsx(ExitSvg, {}) })] }), _jsx("div", { className: "mt-2", children: _jsx("p", { className: "text-sm overflow-wrap break-words", children: description }) }), _jsx("div", { className: "relative h-1 mt-4 bg-gray-200 rounded", children: _jsx("div", { className: `absolute left-0 top-0 h-full ${getColor()} rounded`, style: { width: `${progress * 100}%` } }) })] }));
-};
-let activeAlerts = [];
-export const showAlert = (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(_jsx(AnimatePresence, { children: _jsx(Alert, { ...alertProps, onClose: asyncOnClose }) }));
-};
-const updateAlertOffsets = () => {
-    activeAlerts.forEach((alertContainer, index) => {
-        alertContainer.style.setProperty("--alert-offset", `${index * 100}px`);
-    });
-};

package/dist/Icons/Icons.d.ts

@@ -1,47 +0,0 @@
-import type { NavBarStateProps } from "../NavBar/NavBar.types";
-export declare const applicationDropDownIconColor = "text-slate-500";
-export declare const MenuAlt4Svg: (props: NavBarStateProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ExitSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const EyeSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const PencilSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const TrashSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const PdfDownloadSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const SearchSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const PlusSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const SpinnerSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const PlusSvgIcon: () => void;
-export declare const WhitePencilSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const ButtonTrashSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const PrinterButtonIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const CloseSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ChangeSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ReturnButtonSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const SpreadsheetSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ArrowToRigth: () => import("react/jsx-runtime").JSX.Element;
-export declare const DropDownArrowSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const OpcionButtonSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const NewButtonSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ReportButtonIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const NewNavbarButtonIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const UserDropdownIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ReportDropDownIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const ChangeDropDownSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const LogoutDropDownSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const NewDropdownSvgIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const BigChecklistIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingBarSpinnerSvg: () => import("react/jsx-runtime").JSX.Element;
-export declare const IdeaIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const CalendarIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const ClockIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const FinishLabRemisionSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const SendMessageIcon: () => import("react/jsx-runtime").JSX.Element;
-export declare const CheckIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const PrintIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const DownloadIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const LoadingIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const AttachmentIconSVG: () => import("react/jsx-runtime").JSX.Element;
-export declare const CustomIconFromImage: ({ imageName, height, width, }: {
-    imageName: string;
-    width?: number | undefined;
-    height?: number | undefined;
-}) => import("react/jsx-runtime").JSX.Element;