@zauru-sdk/components 2.0.202 → 2.0.204

package/src/Form/FileUpload/index.tsx

@@ -1,15 +1,11 @@
 import { DownloadIconSVG, IdeaIconSVG } from "@zauru-sdk/icons";
 import React, { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
-/*
-import imageCompression from "browser-image-compression";
-import type { Options } from "browser-image-compression";
-*/
+//import imageCompression, { Options } from "browser-image-compression";
 
 type Props = {
   id?: string;
   name: string;
-  formName?: string;
   title?: string;
   helpText?: string;
   hint?: string;
@@ -23,6 +19,8 @@ type Props = {
   required?: boolean;
   optimizeImages?: boolean;
   zauruBaseURL?: string;
+  setProcessing?: (processing: boolean) => void;
+  signature?: boolean;
 };
 
 export const FileUploadField = (props: Props) => {
@@ -42,6 +40,8 @@ export const FileUploadField = (props: Props) => {
     required = false,
     optimizeImages = true,
     zauruBaseURL = "https://zauru.herokuapp.com",
+    setProcessing,
+    signature = false,
   } = props;
 
   const {
@@ -55,11 +55,77 @@ export const FileUploadField = (props: Props) => {
 
   const [showTooltip, setShowTooltip] = useState<boolean>(false);
   const [previewSrc, setPreviewSrc] = useState<string | null>(null);
-  const [fileDeleted, setFileDeleted] = useState<boolean>(false);
   const [uploading, setUploading] = useState<boolean>(false);
   const [uploadProgress, setUploadProgress] = useState<number>(0);
+  const [openSignatureModal, setOpenSignatureModal] = useState<boolean>(false);
+  // Estados para la optimización de imagen
+  const [optimizing, setOptimizing] = useState<boolean>(false);
+  const [optimizationProgress, setOptimizationProgress] = useState<number>(0);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // For signature drawing mode
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const isDrawing = useRef(false);
+  const lastX = useRef(0);
+  const lastY = useRef(0);
+
+  const handlePointerDown = (e: React.PointerEvent<HTMLCanvasElement>) => {
+    e.preventDefault();
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const rect = canvas.getBoundingClientRect();
+    lastX.current = e.clientX - rect.left;
+    lastY.current = e.clientY - rect.top;
+    isDrawing.current = true;
+  };
+
+  const handlePointerMove = (e: React.PointerEvent<HTMLCanvasElement>) => {
+    e.preventDefault();
+    if (!isDrawing.current) return;
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const rect = canvas.getBoundingClientRect();
+    const currentX = e.clientX - rect.left;
+    const currentY = e.clientY - rect.top;
+    ctx.beginPath();
+    ctx.moveTo(lastX.current, lastY.current);
+    ctx.lineTo(currentX, currentY);
+    ctx.strokeStyle = "black";
+    ctx.lineWidth = 2;
+    ctx.stroke();
+    lastX.current = currentX;
+    lastY.current = currentY;
+  };
+
+  const handlePointerUp = (e?: React.PointerEvent<HTMLCanvasElement>) => {
+    e?.preventDefault();
+    isDrawing.current = false;
+  };
+
+  const clearCanvas = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+  };
+
+  const handleSignatureConfirm = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.toBlob(async (blob) => {
+      if (blob) {
+        const file = new File([blob], "signature.png", { type: "image/png" });
+        const objectUrl = URL.createObjectURL(file);
+        setPreviewSrc(objectUrl);
+        await processFile(file);
+        setOpenSignatureModal(false);
+      }
+    }, "image/png");
+  };
+
   useEffect(() => {
     return () => {
       if (previewSrc) {
@@ -79,117 +145,126 @@ export const FileUploadField = (props: Props) => {
   const textColor = isReadOnly ? "text-gray-700" : `text-${color}-900`;
   const borderColor = error ? "border-red-500" : `border-${color}-500`;
 
-  /**
-   * Función que se dispara cuando el usuario selecciona un archivo.
-   * Si optimizeImages está activo y se trata de una imagen, la convierte a WebP
-   * usando la librería browser-image-compression.
-   */
-  const handleInputChange = async (
-    event: React.ChangeEvent<HTMLInputElement>
+  const processFile = async (
+    file: File,
+    event?: React.ChangeEvent<HTMLInputElement>
   ) => {
-    if (event.target.files && event.target.files.length > 0) {
-      let file = event.target.files[0];
-
-      // Si se activa la optimización y es imagen, se convierte a WebP
-      if (file && file.type.startsWith("image/") && optimizeImages) {
-        try {
-          /*
-           const options: Options = {
-             fileType: "image/webp", // Especificamos el formato WebP
-             initialQuality: 0.7, // Calidad inicial (puedes ajustar este valor)
-             maxSizeMB: 1, // Tamaño máximo (opcional)
-             maxWidthOrHeight: 1920, // Dimensión máxima (opcional)
-             useWebWorker: true,
-           };
-          // Después de la compresión, renombramos el archivo:
-          const compressedFile = await imageCompression(file, options);
-          const newFile = new File(
-            [compressedFile],
-            file.name.replace(/\.[^.]+$/, ".webp"),
-            {
-              type: file.type,
-            }
-          );
-          file = newFile;
-          */
-          console.log("Archivo convertido:", file.name, file.type);
-          const objectUrl = URL.createObjectURL(file);
-          setPreviewSrc(objectUrl);
-        } catch (error) {
-          console.error("Error al convertir la imagen a WebP:", error);
-          const objectUrl = URL.createObjectURL(file);
-          setPreviewSrc(objectUrl);
-        }
-      } else if (file && file.type.startsWith("image/")) {
+    let processedFile = file;
+
+    /*
+    if (file && file.type.startsWith("image/") && optimizeImages) {
+      try {
+        setOptimizing(true);
+        setOptimizationProgress(0);
+        const options: Options = {
+          fileType: "image/webp",
+          initialQuality: 0.7,
+          maxSizeMB: 1,
+          maxWidthOrHeight: 1920,
+          useWebWorker: true,
+          onProgress: (progress: number) => {
+            setOptimizationProgress(progress);
+          },
+        };
+        const compressedFile = await imageCompression(file, options);
+        setOptimizing(false);
+        processedFile = new File(
+          [compressedFile],
+          file.name.replace(/\.[^.]+$/, ".webp"),
+          { type: "image/webp" }
+        );
+        const objectUrl = URL.createObjectURL(processedFile);
+        setPreviewSrc(objectUrl);
+      } catch (error) {
+        console.error("Error al convertir la imagen a WebP:", error);
+        setOptimizing(false);
         const objectUrl = URL.createObjectURL(file);
         setPreviewSrc(objectUrl);
-      } else {
-        setPreviewSrc(null);
       }
+    } else 
+    */
+
+    if (file && file.type.startsWith("image/")) {
+      const objectUrl = URL.createObjectURL(file);
+      setPreviewSrc(objectUrl);
+    } else {
+      setPreviewSrc(null);
+    }
 
-      // Actualizamos el input para que contenga el archivo convertido
+    if (event && event.target) {
       const dataTransfer = new DataTransfer();
-      dataTransfer.items.add(file);
+      dataTransfer.items.add(processedFile);
       event.target.files = dataTransfer.files;
+    }
 
-      // Importamos dinámicamente DirectUpload solo en el cliente
-      import("@rails/activestorage")
-        .then(({ DirectUpload }) => {
-          const uploadUrl = `${zauruBaseURL}/api/direct_uploads`;
-
-          setUploading(true);
-          setUploadProgress(0);
-
-          const directUpload = new DirectUpload(file, uploadUrl, {
-            directUploadWillStoreFileWithXHR: (xhr: XMLHttpRequest) => {
-              xhr.upload.addEventListener("progress", (event) => {
-                if (event.lengthComputable) {
-                  const progress = Math.round(
-                    (event.loaded / event.total) * 100
-                  );
-                  setUploadProgress(progress);
-                }
-              });
-            },
-          });
-
-          directUpload.create((error, blob) => {
-            setUploading(false);
-            if (error) {
-              console.error("Error al subir el archivo:", error);
-            } else {
-              setValue(name, blob.signed_id);
-              setValue(`${name}_file_type`, blob.content_type);
-
-              // Input hidden para el signed_id
-              const hiddenField = document.createElement("input");
-              hiddenField.setAttribute("type", "hidden");
-              hiddenField.setAttribute("value", blob.signed_id);
-              hiddenField.setAttribute("name", name);
-              // Input hidden para el content_type
-              const typeHiddenField = document.createElement("input");
-              typeHiddenField.setAttribute("type", "hidden");
-              typeHiddenField.setAttribute("value", blob.content_type);
-              typeHiddenField.setAttribute("name", `${name}_file_type`);
-
-              const formElement = document.querySelector("form");
-              if (formElement) {
-                formElement.appendChild(hiddenField);
-                formElement.appendChild(typeHiddenField);
-              }
+    // Proceso de subida mediante DirectUpload
+    import("@rails/activestorage")
+      .then(({ DirectUpload }) => {
+        const uploadUrl = `${zauruBaseURL}/api/direct_uploads`;
+
+        setProcessing && setProcessing(true);
+        setUploading(true);
+        setUploadProgress(0);
 
-              // Removemos el atributo "name" del input file para evitar enviar el archivo
-              if (fileInputRef.current) {
-                fileInputRef.current.removeAttribute("name");
+        const directUpload = new DirectUpload(processedFile, uploadUrl, {
+          directUploadWillStoreFileWithXHR: (xhr: XMLHttpRequest) => {
+            xhr.upload.addEventListener("progress", (event) => {
+              if (event.lengthComputable) {
+                const progress = Math.round((event.loaded / event.total) * 100);
+                setUploadProgress(progress);
               }
+            });
+          },
+        });
+
+        directUpload.create((error, blob) => {
+          setUploading(false);
+          setProcessing && setProcessing(false);
+          if (error) {
+            console.error("Error al subir el archivo:", error);
+          } else {
+            setValue(name, blob.signed_id);
+            setValue(`${name}_file_type`, blob.content_type);
+
+            const hiddenField = document.createElement("input");
+            hiddenField.setAttribute("type", "hidden");
+            hiddenField.setAttribute("value", blob.signed_id);
+            hiddenField.setAttribute("name", name);
+            const typeHiddenField = document.createElement("input");
+            typeHiddenField.setAttribute("type", "hidden");
+            typeHiddenField.setAttribute("value", blob.content_type);
+            typeHiddenField.setAttribute("name", `${name}_file_type`);
+
+            const formElement = document.querySelector("form");
+            if (formElement) {
+              formElement.appendChild(hiddenField);
+              formElement.appendChild(typeHiddenField);
             }
-          });
-        })
-        .catch((err) => console.error("Error al cargar DirectUpload:", err));
-    }
 
+            if (fileInputRef.current) {
+              fileInputRef.current.removeAttribute("name");
+            }
+          }
+        });
+      })
+      .catch((err) => {
+        setProcessing && setProcessing(false);
+        console.error("Error al cargar DirectUpload:", err);
+      });
+  };
+
+  /**
+   * Función que se dispara cuando el usuario selecciona un archivo.
+   * Si optimizeImages está activo y se trata de una imagen, la convierte a WebP
+   * usando la librería browser-image-compression.
+   */
+  const handleInputChange = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (event.target.files && event.target.files.length > 0) {
+      await processFile(event.target.files[0], event);
+    }
     onChange && onChange(event);
-    setFileDeleted(false);
   };
 
   /**
@@ -198,7 +273,6 @@ export const FileUploadField = (props: Props) => {
    */
   const deleteFile = () => {
     setPreviewSrc(null);
-    setFileDeleted(true);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
@@ -255,6 +329,117 @@ export const FileUploadField = (props: Props) => {
    *    - Si defaultValue es string, se muestra el preview (descarga/imagen).
    *    - Si no hay defaultValue (o es File), se muestra "Sin archivo".
    */
+  if (signature) {
+    if (readOnly) {
+      return (
+        <div className={`col-span-6 sm:col-span-3 ${className}`}>
+          {title && (
+            <label
+              htmlFor={name}
+              className="block mb-1 text-sm font-medium text-gray-700"
+            >
+              {title}
+            </label>
+          )}
+          {typeof defaultValue === "string" && defaultValue ? (
+            renderPreview(defaultValue)
+          ) : (
+            <div className="text-sm italic text-gray-400">
+              No hay firma disponible
+            </div>
+          )}
+        </div>
+      );
+    } else {
+      return (
+        <div className={`col-span-6 sm:col-span-3 ${className}`}>
+          {title && (
+            <label
+              htmlFor={name}
+              className={`block mb-1 text-sm font-medium text-${color}-700`}
+            >
+              {title}
+              {required && <span className="text-red-500 ml-1">*</span>}
+            </label>
+          )}
+          {previewSrc ? (
+            <div>
+              {renderPreview(previewSrc)}
+              <button
+                type="button"
+                onClick={() => {
+                  setPreviewSrc(null);
+                }}
+                className="ml-2 text-red-600 underline text-sm"
+              >
+                Eliminar firma
+              </button>
+            </div>
+          ) : (
+            <div>
+              <button
+                type="button"
+                onClick={() => setOpenSignatureModal(true)}
+                className="px-4 py-2 bg-blue-600 text-white rounded"
+              >
+                Firmar
+              </button>
+            </div>
+          )}
+          {openSignatureModal && (
+            <div className="fixed inset-0 z-50 flex flex-col bg-white">
+              <div className="flex-grow flex items-center justify-center">
+                <canvas
+                  ref={canvasRef}
+                  width={400}
+                  height={200}
+                  style={{
+                    border: "1px solid #ccc",
+                    backgroundColor: "transparent",
+                    touchAction: "none",
+                  }}
+                  onPointerDown={handlePointerDown}
+                  onPointerMove={handlePointerMove}
+                  onPointerUp={handlePointerUp}
+                  onPointerLeave={handlePointerUp}
+                ></canvas>
+              </div>
+              <div className="p-4 flex justify-center space-x-4">
+                <button
+                  type="button"
+                  onClick={clearCanvas}
+                  className="text-blue-600 underline text-sm"
+                >
+                  Reset
+                </button>
+                <button
+                  type="button"
+                  onClick={handleSignatureConfirm}
+                  className="text-blue-600 underline text-sm"
+                >
+                  Ok
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setOpenSignatureModal(false)}
+                  className="text-gray-600 underline text-sm"
+                >
+                  Cancelar
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    }
+  }
+
+  /**
+   * 2) Modo editable (readOnly = false):
+   *    - Se muestra siempre el recuadro de vista previa, ya sea con la imagen cargada o con un placeholder.
+   *    - Si se ha seleccionado una imagen o existe defaultValue y no se ha eliminado,
+   *      se muestra la imagen y un botón para eliminar el archivo.
+   */
   if (readOnly) {
     return (
       <div className={`col-span-6 sm:col-span-3 ${className}`}>
@@ -277,12 +462,6 @@ export const FileUploadField = (props: Props) => {
     );
   }
 
-  /**
-   * 2) Modo editable (readOnly = false):
-   *    - Si se ha seleccionado una imagen o existe defaultValue y no se ha eliminado,
-   *      se muestra la vista previa generada junto con un botón para eliminar el archivo.
-   *    - Si se elimina el archivo o no hay ninguno, se muestra el input para cargar uno.
-   */
   return (
     <div className={`col-span-6 sm:col-span-3 ${className}`}>
       {title && (
@@ -295,33 +474,49 @@ export const FileUploadField = (props: Props) => {
         </label>
       )}
 
-      {!fileDeleted &&
-        (previewSrc ? (
-          <div className="mb-2 flex items-center">
-            {renderPreview(previewSrc)}
-            <button
-              type="button"
-              onClick={deleteFile}
-              className="ml-2 text-red-600 underline text-sm"
-            >
-              Eliminar archivo
-            </button>
-          </div>
-        ) : (
-          typeof defaultValue === "string" &&
-          defaultValue && (
-            <div className="mb-2 flex items-center">
-              {renderPreview(defaultValue)}
-              <button
-                type="button"
-                onClick={deleteFile}
-                className="ml-2 text-red-600 underline text-sm"
-              >
-                Eliminar archivo
-              </button>
-            </div>
-          )
-        ))}
+      <div className="mb-2 flex items-center">
+        <div
+          role="button"
+          tabIndex={0}
+          onClick={() => {
+            const srcToOpen =
+              previewSrc || (typeof defaultValue === "string" && defaultValue);
+            if (srcToOpen) window.open(srcToOpen, "_blank");
+          }}
+          onKeyDown={(event) => {
+            const srcToOpen =
+              previewSrc || (typeof defaultValue === "string" && defaultValue);
+            if (event.key === "Enter" && srcToOpen)
+              window.open(srcToOpen, "_blank");
+          }}
+          className="cursor-pointer border border-gray-300 h-48 w-48 flex items-center justify-center"
+        >
+          {previewSrc || (typeof defaultValue === "string" && defaultValue) ? (
+            <img
+              src={
+                previewSrc ??
+                (typeof defaultValue === "string" && defaultValue
+                  ? defaultValue
+                  : undefined)
+              }
+              alt={name}
+              className="h-48 w-48"
+              style={{ objectFit: "contain" }}
+            />
+          ) : (
+            <span className="text-gray-400">No image</span>
+          )}
+        </div>
+        {(previewSrc || (typeof defaultValue === "string" && defaultValue)) && (
+          <button
+            type="button"
+            onClick={deleteFile}
+            className="ml-2 text-red-600 underline text-sm"
+          >
+            Eliminar archivo
+          </button>
+        )}
+      </div>
 
       <div className="flex relative items-center">
         <input
@@ -353,18 +548,38 @@ export const FileUploadField = (props: Props) => {
         )}
       </div>
 
-      {uploading && (
-        <div className="mt-2">
-          <progress
-            value={uploadProgress}
-            max="100"
-            className="w-full"
-          ></progress>
-          <p className="text-sm text-blue-600 mt-1">
-            Subiendo archivo: {uploadProgress}%
-          </p>
-        </div>
-      )}
+      <div className="mt-2 min-h-[60px] flex items-center justify-center border border-dashed border-gray-200 rounded">
+        {optimizing || uploading ? (
+          <>
+            {optimizing && (
+              <div className="w-full">
+                <progress
+                  value={optimizationProgress}
+                  max="100"
+                  className="w-full"
+                ></progress>
+                <p className="text-sm text-blue-600 mt-1 text-center">
+                  Optimizando imagen a webp: {optimizationProgress}%
+                </p>
+              </div>
+            )}
+            {uploading && (
+              <div className="w-full">
+                <progress
+                  value={uploadProgress}
+                  max="100"
+                  className="w-full"
+                ></progress>
+                <p className="text-sm text-blue-600 mt-1 text-center">
+                  Subiendo archivo: {uploadProgress}%
+                </p>
+              </div>
+            )}
+          </>
+        ) : (
+          <span className="text-sm text-gray-500">Información de progreso</span>
+        )}
+      </div>
 
       {error && (
         <p className="mt-2 text-sm text-red-600">

package/src/Form/TimePicker/index.tsx

@@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form";
 type Props = {
   id?: string;
   name: string;
-  formName?: string;
   title?: string;
   hint?: string;
   helpText?: string;

package/src/Form/YesNo/index.tsx

@@ -4,7 +4,6 @@ import { useFormContext } from "react-hook-form";
 type Props = {
   id?: string;
   name: string;
-  formName?: string;
   title?: string;
   defaultValue?: boolean;
   helpText?: string;

package/src/Layouts/errorLayout/index.tsx

@@ -28,21 +28,14 @@ export const ErrorLayout = ({
         <div className="w-full max-w-2xl flex flex-col items-center">
           <p className="text-2xl text-gray-300 mb-8 text-center">
             {isRouteErrorResponse(error)
-              ? `Error en request: ${error.status}: ${error.statusText} - PATH: ${error.data.path} - MESSAGE: ${error.data.message}`
+              ? `Error ${error.status}: ${error.statusText}`
               : error instanceof Error
-              ? `Error: ${error.message} - NAME: ${
-                  error.name
-                } - STACK: ${error.stack?.slice(0, 100)} - CAUSE: ${
-                  error.cause
-                }`
-              : `Ha ocurrido un error inesperado: ${error}`}
+              ? error.message
+              : "Ha ocurrido un error inesperado"}
           </p>
           {from && (
             <p className="text-lg text-gray-400 mb-4 text-center">
-              {isRootLevel
-                ? "(*) Error lanzado desde: "
-                : "Error lanzado desde: "}
-              {from}
+              Error lanzado desde: {from}
             </p>
           )}
           {parentError && (