@zauru-sdk/components 1.0.13 → 1.0.14

package/dist/index.js

@@ -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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zauru-sdk/components",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "description": "Componentes reutilizables en las WebApps de Zauru.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -15,6 +15,7 @@
   "author": "Oscar Cuéllar",
   "license": "MIT",
   "devDependencies": {
+    "@types/jsonwebtoken": "^9.0.2",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "eslint": "^8.38.0",
@@ -32,13 +33,12 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@remix-run/react": "^2.8.1",
     "@zauru-sdk/common": "^1.0.13",
-    "@zauru-sdk/graphql": "^1.0.9",
+    "@zauru-sdk/hooks": "^1.0.13",
     "@zauru-sdk/icons": "^1.0.13",
-    "@zauru-sdk/services": "^1.0.13",
     "@zauru-sdk/types": "^1.0.13",
     "@zauru-sdk/utils": "^1.0.13",
     "framer-motion": "^11.0.8",
-    "jsonwebtoken": "9.0.2",
+    "jsonwebtoken": "^9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
@@ -48,5 +48,5 @@
   "engines": {
     "node": ">=18.0.0"
   },
-  "gitHead": "9bca61fddd7c538e7f95a489d59436b5557c61cc"
+  "gitHead": "47cb7f76fbc0d2b66e4caf7294ed1cc067a19f0f"
 }

package/src/Chat/ChatLayout.tsx

@@ -0,0 +1,133 @@
+import React, { useRef, useState } from "react";
+import { TextField } from "../Form";
+import { Form } from "@remix-run/react";
+import { FormDocumentType } from "@zauru-sdk/types";
+import { LoadingInputSkeleton } from "src";
+import {
+  AttachmentIconSVG,
+  SendMessageIcon,
+  SpinnerSvg,
+} from "@zauru-sdk/icons";
+
+interface ChatLayoutProps {
+  children?: React.ReactNode;
+  sendingMessage?: boolean;
+  formConfig?: {
+    document_type: FormDocumentType;
+    form_id: number;
+    document_id: number;
+    id_number?: string;
+    reference?: string;
+    attachmentFieldId: number;
+    messageFieldId: number;
+  };
+}
+
+const ChatLayout: React.FC<ChatLayoutProps> = ({
+  children,
+  sendingMessage = false,
+  formConfig = undefined,
+}) => {
+  const refAttachment = useRef<HTMLInputElement>(null);
+  const [formValues, setFormValues] = useState<{ image: any }>({ image: null });
+
+  const handleAttachmentClick = () => {
+    if (refAttachment.current) {
+      refAttachment.current.click();
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-col-reverse overflow-y-auto p-4 bg-gray-100 border border-gray-200 rounded-lg grow max-h-[65vh]">
+        {children}
+      </div>
+      <Form id="formRef" encType="multipart/form-data" method="post">
+        {formConfig ? (
+          <>
+            <TextField
+              hidden
+              name="reference"
+              defaultValue={formConfig.reference ?? ""}
+            />
+            <TextField
+              hidden
+              name="form_id"
+              defaultValue={formConfig.form_id}
+            />
+            <TextField
+              hidden
+              name="document_id"
+              defaultValue={formConfig.document_id}
+            />
+            <TextField
+              hidden
+              name="document_type"
+              defaultValue={formConfig.document_type}
+            />
+            <TextField
+              hidden
+              name="id_number"
+              defaultValue={formConfig?.id_number ?? ""}
+            />
+          </>
+        ) : (
+          <></>
+        )}
+        <div className="mt-4 flex">
+          {sendingMessage ? (
+            <LoadingInputSkeleton />
+          ) : (
+            <input
+              name={`message${
+                formConfig?.messageFieldId
+                  ? `_${formConfig?.messageFieldId}`
+                  : ""
+              }`}
+              type="text"
+              placeholder="Escribe un mensaje..."
+              className="form-input px-4 py-2 border border-gray-300 rounded-l-lg grow"
+            />
+          )}
+          <button
+            onClick={handleAttachmentClick}
+            className={`${
+              formValues?.image ? "bg-blue-500" : ""
+            } hover:bg-blue-700 text-white font-bold py-2 px-4`}
+            type="button"
+          >
+            <AttachmentIconSVG />
+          </button>
+          <button
+            className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-r-lg"
+            type="submit"
+            name="action"
+            value="sendMessage"
+          >
+            {sendingMessage ? <SpinnerSvg /> : <SendMessageIcon />}
+          </button>
+        </div>
+        <input
+          ref={refAttachment}
+          hidden
+          name={`attachment${
+            formConfig?.attachmentFieldId
+              ? `_${formConfig?.attachmentFieldId}`
+              : ""
+          }`}
+          type="file"
+          accept=".jpg, .png, .jpeg, .png"
+          onChange={(e) => {
+            if (e.target.value && e.target.value !== "") {
+              setFormValues({ ...formValues, image: e.target.value });
+            } else {
+              setFormValues({ ...formValues, image: null });
+            }
+          }}
+        />
+      </Form>
+    </div>
+  );
+};
+
+export default ChatLayout;

package/src/Chat/ChatMessageHistory.tsx

@@ -0,0 +1,142 @@
+import { CheckIconSVG, PencilSvg } from "@zauru-sdk/icons";
+import { useState, useEffect, useRef } from "react";
+
+type Props = {
+  author: string;
+  content: string;
+  date?: string;
+  onLike?: (like: boolean) => void;
+  onUpdateComment?: (text: string, itsNew?: boolean) => void;
+  id: string;
+  commentOwner?: boolean;
+  imageLink?: string;
+};
+
+export const ChatMessageHistory = (props: Props) => {
+  const {
+    author,
+    content,
+    onLike,
+    onUpdateComment,
+    id,
+    commentOwner = false,
+    date,
+    imageLink,
+  } = props;
+
+  const initials = author ? author[0].toUpperCase() : "A";
+  const [isUpdating, setIsUpdating] = useState(false);
+  const [updatedContent, setUpdatedContent] = useState(content);
+  const textAreaRef = useRef<HTMLTextAreaElement | null>(null);
+  const [shouldPulse, setShouldPulse] = useState(false);
+
+  useEffect(() => {
+    if (isUpdating && textAreaRef.current) {
+      textAreaRef.current.style.height = "auto";
+      textAreaRef.current.style.height = `${textAreaRef.current.scrollHeight}px`;
+      textAreaRef.current.focus();
+    }
+  }, [isUpdating]);
+
+  // Efecto secundario que se ejecuta cada vez que 'isUpdating' cambia
+  useEffect(() => {
+    // Activar la animación
+    setShouldPulse(true);
+
+    // Establecer un temporizador para eliminar la clase después de que la animación se haya completado
+    const timer = setTimeout(() => {
+      setShouldPulse(false);
+    }, 15000); // Tiempo total de la animación
+
+    // Limpiar el temporizador si el componente se desmonta o si 'isUpdating' cambia de nuevo antes de que la animación se complete
+    return () => clearTimeout(timer);
+  }, [isUpdating]);
+
+  const handleUpdate = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (e.target.value.length <= 254) {
+      setUpdatedContent(e.target.value);
+    }
+  };
+
+  const handleUpdateClick = () => {
+    if (isUpdating) {
+      if (textAreaRef.current) {
+        textAreaRef.current.blur();
+      }
+      //onUpdateComment && onUpdateComment(updatedContent, itsNew);
+    }
+    setIsUpdating(!isUpdating);
+  };
+
+  return (
+    <div className="p-1 rounded-xl flex items-center space-x-4 relative">
+      {commentOwner && (
+        <div className="absolute top-2 right-2">
+          <button
+            onClick={handleUpdateClick}
+            className={`${shouldPulse ? "animate-custom-pulse" : ""}`}
+          >
+            {isUpdating ? <CheckIconSVG /> : <PencilSvg />}
+          </button>
+        </div>
+      )}
+      <div
+        className={`w-[0%] lg:w-[8%] h-16 bg-purple-300 rounded-full flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
+      >
+        {initials}
+      </div>
+      <div className="flex flex-col justify-between h-full w-[92%]">
+        <div>
+          <div className="flex flex-row space-x-2">
+            <div className="text-xl font-medium text-black">{author}</div>
+            <div className="text-xl font-medium text-gray-500">
+              {date && <> - {date}</>}
+            </div>
+          </div>
+          {isUpdating ? (
+            <textarea
+              ref={textAreaRef}
+              className="bg-gray-100 rounded p-2 w-full resize-none"
+              value={updatedContent}
+              onChange={handleUpdate}
+              maxLength={254}
+              placeholder="Deja tus buenos deseos..."
+            />
+          ) : (
+            <p className="text-gray-500">{updatedContent}</p>
+          )}
+        </div>
+        <div className="flex justify-end items-center">
+          <button onClick={() => {}}>
+            <></>
+          </button>
+        </div>
+      </div>
+      {imageLink && (
+        <div
+          className={`w-[25%] flex items-center justify-center overflow-hidden text-white text-xl font-bold`}
+        >
+          <div
+            onClick={() => {
+              return window.open(imageLink, "_blank");
+            }}
+          >
+            <img
+              src={imageLink}
+              alt={"IMG_CHAT"}
+              className={`h-48 w-48 inline mr-1 pb-1`}
+              style={{
+                stroke: "currentColor",
+                strokeWidth: 2,
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                fill: "none",
+                backgroundColor: "transparent",
+              }}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/Chat/index.ts

@@ -0,0 +1,2 @@
+export * from "./ChatLayout";
+export * from "./ChatMessageHistory";

package/src/ConnectionState/ConnectionState.tsx

@@ -0,0 +1,29 @@
+import { useIsOnline } from "@zauru-sdk/hooks";
+
+const ConnectionState = () => {
+  const isOnline = useIsOnline();
+
+  // Definir estilos
+  const styles = {
+    container: {
+      padding: "10px",
+      borderRadius: "5px",
+      backgroundColor: isOnline ? "#d4edda" : "#f8d7da",
+      color: isOnline ? "#155724" : "#721c24",
+      fontWeight: "bold",
+    },
+    text: {
+      fontSize: "16px",
+      margin: 0,
+    },
+  };
+
+  // Renderizar el estado de conexión
+  return (
+    <div style={styles.container}>
+      <p style={styles.text}>{isOnline ? "ONLINE ✅🌐" : "OFFLINE ❌🌐"}</p>
+    </div>
+  );
+};
+
+export default ConnectionState;

package/src/ConnectionState/index.tsx

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

package/src/DynamicTable/BasicPrintDynamicTable.tsx

@@ -0,0 +1,73 @@
+import { isNumeric } from "@zauru-sdk/common";
+import { GenericDynamicTableColumn } from "@zauru-sdk/types";
+
+//TABLA PARA LA IMPRESION:
+export const BasicTableHTML = (props: {
+  data: { [key: string]: string }[];
+  headers: GenericDynamicTableColumn[];
+  footer: { [key: string]: string };
+}) => {
+  const { data, footer, headers } = props;
+  return (
+    <table style={{ borderCollapse: "collapse", width: "100%" }}>
+      <thead>
+        <tr>
+          {headers?.map((titulo, index) => (
+            <th
+              key={index}
+              style={{
+                border: "1px solid black",
+                padding: "10px",
+                textAlign: "center",
+                whiteSpace: "normal",
+              }}
+            >
+              {titulo.label}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data?.map((fila, index) => (
+          <tr key={index}>
+            {headers?.map((titulo, index) => (
+              <td
+                key={index}
+                style={{
+                  border: "1px solid black",
+                  padding: "1px",
+                  textAlign: "center",
+                  whiteSpace: "normal",
+                  fontSize: isNumeric((fila as any)[titulo.name])
+                    ? "2em"
+                    : "1em",
+                }}
+              >
+                {(fila as any)[titulo.name]}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+      <tfoot>
+        <tr>
+          {headers?.map((titulo, index) => (
+            <td
+              key={index}
+              style={{
+                padding: "10px",
+                textAlign: "center",
+                whiteSpace: "normal",
+                fontSize: isNumeric((footer as any)[titulo.name])
+                  ? "2em"
+                  : "1em",
+              }}
+            >
+              {(footer as any)[titulo.name]}
+            </td>
+          ))}
+        </tr>
+      </tfoot>
+    </table>
+  );
+};