react-pdf-levelup 2.0.20 → 2.0.25

package/dist/index.js

@@ -325,81 +325,100 @@ var styles5 = import_renderer5.StyleSheet.create({
     width: "100%",
     borderWidth: 1,
     borderColor: "#000",
-    overflow: "hidden",
     marginBottom: 20
   },
   thead: {
-    backgroundColor: "#f0f0f0"
+    backgroundColor: "#ccc"
   },
-  tbody: {},
   tr: {
-    flexDirection: "row",
-    borderBottomWidth: 1,
-    borderColor: "#000"
+    flexDirection: "row"
   },
-  th: {
-    paddingTop: 4,
+  textBold: {
     fontSize: 10,
     fontFamily: "Helvetica",
     fontWeight: "bold",
-    borderRight: 1,
-    borderColor: "#000",
-    textAlign: "center"
+    textAlign: "center",
+    paddingTop: 4
   },
-  td: {
-    paddingTop: 4,
-    paddingLeft: 8,
-    paddingRight: 8,
+  text: {
     fontSize: 10,
     fontFamily: "Helvetica",
-    borderRight: 1,
-    borderColor: "#000"
-    // borderTopWidth: 0,
-  },
-  cellSmall: {
-    width: "25%"
-  },
-  cellMedium: {
-    width: "33.33%"
+    paddingTop: 4,
+    paddingLeft: 8,
+    paddingRight: 8
   },
-  cellLarge: {
-    width: "50%"
+  zebraOdd: {
+    backgroundColor: "#eeeeee"
   }
 });
-var cellSizeMapping = {
-  small: styles5.cellSmall,
-  medium: styles5.cellMedium,
-  large: styles5.cellLarge
-};
-var Table = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.table, style] }, children);
-};
-var Thead = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.thead, style] }, children);
-};
+var Table = ({ children, style }) => /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.table, style] }, children);
+var Thead = ({ children, style }) => /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.thead, style] }, children);
 var Tbody = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tbody, style] }, children);
-};
-var Tr = ({ children, style }) => {
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tr, style] }, children);
-};
-var Th = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
-  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
-  const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = {
-    width: width || spanWidth || sizeStyle?.width,
+  const rows = import_react5.default.Children.toArray(children);
+  const count = rows.length;
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, rows.map(
+    (row, idx) => import_react5.default.cloneElement(row, {
+      isLastRow: idx === count - 1,
+      isOdd: idx % 2 === 1
+    })
+  ));
+};
+var Tr = ({
+  children,
+  style,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const elements = import_react5.default.Children.toArray(children);
+  const count = elements.length;
+  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.tr, style] }, elements.map((child, idx) => {
+    const isLast = idx === count - 1;
+    const width = `${(100 / count).toFixed(2)}%`;
+    return import_react5.default.cloneElement(child, { width, isLast, isLastRow, isOdd });
+  }));
+};
+var Th = ({
+  children,
+  style,
+  width,
+  height,
+  colSpan,
+  isLast = false,
+  isLastRow = false
+}) => {
+  const baseWidth = typeof width === "string" && colSpan ? `${(parseFloat(width) * colSpan).toFixed(2)}%` : width;
+  const borders = {
+    borderRightWidth: isLast ? 0 : 1,
+    borderBottomWidth: isLastRow ? 0 : 1,
+    borderColor: "#000",
     ...height !== void 0 && { height }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
+  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.textBold, { width: baseWidth }, borders, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
 };
-var Td = ({ children, style, cellSize = "medium", width, height, colSpan }) => {
-  const spanWidth = colSpan ? `${100 / 3 * colSpan}%` : void 0;
-  const sizeStyle = cellSizeMapping[cellSize];
-  const customStyle = {
-    width: width || spanWidth || sizeStyle?.width,
+var Td = ({
+  children,
+  style,
+  width,
+  height,
+  colSpan,
+  isLast = false,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const baseWidth = typeof width === "string" && colSpan ? `${(parseFloat(width) * colSpan).toFixed(2)}%` : width;
+  const borders = {
+    borderRightWidth: isLast ? 0 : 1,
+    borderBottomWidth: isLastRow ? 0 : 1,
+    borderColor: "#000",
     ...height !== void 0 && { height }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
+  return /* @__PURE__ */ import_react5.default.createElement(import_renderer5.View, { style: [
+    styles5.text,
+    isOdd && styles5.zebraOdd,
+    { width: baseWidth },
+    borders,
+    style
+  ] }, /* @__PURE__ */ import_react5.default.createElement(import_renderer5.Text, null, children));
 };
 
 // src/components/core/Grid.tsx
@@ -509,153 +528,195 @@ var Footer = ({ children, style, fixed = false }) => {
 // src/components/core/QR.tsx
 var import_react8 = __toESM(require("react"));
 var import_renderer8 = require("@react-pdf/renderer");
-var import_react9 = require("react");
-
-// src/components/core/QRGenerator.tsx
-var import_qrcode = __toESM(require("qrcode"));
-var generateQRAsBase64 = async ({
-  value,
-  size = 150,
-  colorDark = "#282828",
-  colorLight = "#ffffff",
-  margin = 0,
-  errorCorrectionLevel = "M"
-}) => {
+var import_qr_code_styling = __toESM(require("qr-code-styling"));
+if (typeof window === "undefined" && typeof process !== "undefined") {
   try {
-    const options = {
-      errorCorrectionLevel,
-      type: "image/png",
-      quality: 0.92,
-      margin,
-      color: {
-        dark: colorDark,
-        light: colorLight
-      },
-      width: size
-    };
-    const qrDataUrl = import_qrcode.default.toDataURL(value, options);
-    return qrDataUrl;
+    import("jsdom").then((jsdom) => {
+      const { JSDOM } = jsdom;
+      import("canvas").then((canvas) => {
+        const { Canvas, Image: CanvasImage } = canvas;
+        const { window: domWindow } = new JSDOM("<!DOCTYPE html><html><body></body></html>");
+        global.window = domWindow;
+        global.document = domWindow.document;
+        global.HTMLElement = domWindow.HTMLElement;
+        global.HTMLCanvasElement = Canvas;
+        global.CanvasRenderingContext2D = Canvas;
+        global.Image = CanvasImage;
+      }).catch((err) => {
+        console.error("Error loading canvas:", err);
+      });
+    }).catch((err) => {
+      console.error("Error loading jsdom:", err);
+    });
   } catch (error) {
-    console.error("Error generando QR:", error);
-    return "";
-  }
-};
-var addLogoToQR = async (qrDataUrl, logoUrl, logoWidth, logoHeight) => {
-  return new Promise((resolve) => {
-    if (!qrDataUrl || !logoUrl) {
-      resolve(qrDataUrl);
-      return;
-    }
-    try {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
-        resolve(qrDataUrl);
-        return;
-      }
-      const qrImage = new Image();
-      qrImage.crossOrigin = "anonymous";
-      qrImage.onload = () => {
-        canvas.width = qrImage.width;
-        canvas.height = qrImage.height;
-        ctx.drawImage(qrImage, 0, 0, canvas.width, canvas.height);
-        const logoImage = new Image();
-        logoImage.crossOrigin = "anonymous";
-        logoImage.onload = () => {
-          const x = (canvas.width - logoWidth) / 2;
-          const y = (canvas.height - logoHeight) / 2;
-          ctx.fillStyle = "#FFFFFF";
-          ctx.fillRect(x - 5, y - 5, logoWidth + 10, logoHeight + 10);
-          ctx.drawImage(logoImage, x, y, logoWidth, logoHeight);
-          const finalQrDataUrl = canvas.toDataURL("image/png");
-          resolve(finalQrDataUrl);
-        };
-        logoImage.onerror = () => {
-          console.error("Error cargando el logo");
-          resolve(qrDataUrl);
-        };
-        logoImage.src = logoUrl;
-      };
-      qrImage.onerror = () => {
-        console.error("Error cargando el QR");
-        resolve("");
-      };
-      qrImage.src = qrDataUrl;
-    } catch (error) {
-      console.error("Error procesando el QR con logo:", error);
-      resolve(qrDataUrl);
-    }
-  });
-};
-
-// src/components/core/QR.tsx
-var styles8 = import_renderer8.StyleSheet.create({
-  qrContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    margin: 10
+    console.error("Error setting up Node.js environment:", error);
   }
-});
-var errorLevelMap = {
-  0: "L",
-  1: "M",
-  2: "Q",
-  3: "H"
-};
+}
 var QR = ({
-  value,
-  size = 150,
-  style,
-  colorDark = "#000000",
-  colorLight = "#ffffff",
-  margin = 0,
-  logo = "",
+  url,
+  size = 200,
+  colorData = "#000000",
+  colorDataBG = "#ffffff",
+  logo,
   logoWidth = 30,
-  logoHeight = 30,
-  errorCorrectionLevel = "M"
+  logoHeight,
+  margin = 0,
+  errorCorrectionLevel = "H",
+  style,
+  dotType = "square",
+  cornerSquareType = "square",
+  cornerDotType = "square",
+  cornerSquareColor,
+  cornerDotColor,
+  logoBG = colorDataBG,
+  logoText,
+  moveText = 0,
+  textColor = colorData,
+  fontSize = 12,
+  fontFamily = "Helvetica",
+  textBackgroundColor = colorDataBG,
+  textPadding = 1,
+  textBold = true
 }) => {
-  const [qrDataUrl, setQrDataUrl] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
-    const generateQR = async () => {
+  const [qrDataURL, setQrDataURL] = (0, import_react8.useState)(null);
+  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
+  const actualLogoHeight = logoHeight || actualLogoWidth;
+  (0, import_react8.useEffect)(() => {
+    if (typeof window === "undefined") {
+      return;
+    }
+    const generateQRCode = async () => {
       try {
-        const baseQrDataUrl = await generateQRAsBase64({
-          value,
-          size,
-          colorDark,
-          colorLight,
-          margin,
-          errorCorrectionLevel: typeof errorCorrectionLevel === "number" ? errorLevelMap[errorCorrectionLevel] || "M" : errorCorrectionLevel
+        const qrCode = new import_qr_code_styling.default({
+          width: size,
+          height: size,
+          type: "canvas",
+          data: url,
+          dotsOptions: {
+            color: colorData,
+            type: dotType
+          },
+          cornersSquareOptions: {
+            color: cornerSquareColor || colorData,
+            type: cornerSquareType
+          },
+          cornersDotOptions: {
+            color: cornerDotColor || colorData,
+            type: cornerDotType
+          },
+          backgroundOptions: {
+            color: colorDataBG
+          },
+          qrOptions: {
+            errorCorrectionLevel
+          },
+          margin
         });
-        if (logo && logoWidth && logoHeight) {
-          const qrWithLogo = await addLogoToQR(baseQrDataUrl, logo, logoWidth, logoHeight);
-          setQrDataUrl(qrWithLogo);
-        } else {
-          setQrDataUrl(baseQrDataUrl);
-        }
+        const container = document.createElement("div");
+        container.style.position = "absolute";
+        container.style.top = "-9999px";
+        container.style.left = "-9999px";
+        document.body.appendChild(container);
+        qrCode.append(container);
+        setTimeout(() => {
+          try {
+            const qrCanvas = container.querySelector("canvas");
+            if (qrCanvas) {
+              const canvas = document.createElement("canvas");
+              canvas.width = size;
+              canvas.height = size;
+              const ctx = canvas.getContext("2d");
+              if (ctx) {
+                ctx.drawImage(qrCanvas, 0, 0);
+                const dataURL = canvas.toDataURL("image/png");
+                setQrDataURL(dataURL);
+              }
+            }
+            document.body.removeChild(container);
+          } catch (error) {
+            console.error("Error capturando QR:", error);
+          }
+        }, 100);
       } catch (error) {
         console.error("Error generando QR:", error);
-        const fallbackUrl2 = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
-          value
-        )}&size=${size}x${size}&color=${encodeURIComponent(colorDark.replace("#", ""))}&bgcolor=${encodeURIComponent(
-          colorLight.replace("#", "")
-        )}`;
-        setQrDataUrl(fallbackUrl2);
       }
     };
-    generateQR();
-  }, [value, size, colorDark, colorLight, margin, logo, logoWidth, logoHeight, errorCorrectionLevel]);
-  const fallbackUrl = `https://api.qrserver.com/v1/create-qr-code/?data=${encodeURIComponent(
-    value
-  )}&size=${size}x${size}`;
-  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataUrl || fallbackUrl, style: { width: size, height: size } }));
+    generateQRCode();
+  }, [
+    url,
+    size,
+    colorData,
+    colorDataBG,
+    margin,
+    errorCorrectionLevel,
+    dotType,
+    cornerSquareType,
+    cornerDotType,
+    cornerSquareColor,
+    cornerDotColor,
+    logoBG
+  ]);
+  if (!qrDataURL) return null;
+  const centerPosition = size / 2;
+  const logoContainerSize = Math.max(actualLogoWidth, actualLogoHeight) + 10;
+  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: { width: size, height: size, position: "relative", ...style } }, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL, style: { width: size, height: size } }), logo && /* @__PURE__ */ import_react8.default.createElement(
+    import_renderer8.View,
+    {
+      style: {
+        position: "absolute",
+        width: logoContainerSize,
+        height: logoContainerSize,
+        backgroundColor: logoBG,
+        left: centerPosition - logoContainerSize / 2,
+        top: centerPosition - logoContainerSize / 2,
+        borderRadius: 100,
+        border: `5px solid ${colorData}`,
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_renderer8.Image,
+      {
+        src: logo,
+        style: {
+          objectFit: "contain",
+          width: actualLogoWidth,
+          height: actualLogoHeight
+        }
+      }
+    )
+  ), !logo && logoText && /* @__PURE__ */ import_react8.default.createElement(
+    import_renderer8.View,
+    {
+      style: {
+        position: "absolute",
+        backgroundColor: textBackgroundColor,
+        padding: textPadding,
+        borderRadius: 4,
+        left: moveText + centerPosition - 20,
+        top: centerPosition - 10
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      import_renderer8.Text,
+      {
+        style: {
+          color: textColor,
+          fontSize,
+          fontFamily,
+          fontWeight: textBold ? "bold" : "normal"
+        }
+      },
+      logoText
+    )
+  ));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_renderer9 = require("@react-pdf/renderer");
-var styles9 = import_renderer9.StyleSheet.create({
+var styles8 = import_renderer9.StyleSheet.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -715,9 +776,9 @@ var toRoman = (num) => {
   return romanNumerals[3][Math.floor(num / 1e3)] + romanNumerals[2][Math.floor(num % 1e3 / 100)] + romanNumerals[1][Math.floor(num % 100 / 10)] + romanNumerals[0][num % 10];
 };
 var UL = ({ children, style, type = "disc" }) => {
-  const childrenWithBullets = import_react10.default.Children.map(children, (child, index) => {
-    if (import_react10.default.isValidElement(child)) {
-      return import_react10.default.cloneElement(child, {
+  const childrenWithBullets = import_react9.default.Children.map(children, (child, index) => {
+    if (import_react9.default.isValidElement(child)) {
+      return import_react9.default.cloneElement(child, {
         bulletType: type,
         isOrdered: false,
         index: index + 1
@@ -725,12 +786,12 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: [styles8.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
-  const childrenWithNumbers = import_react10.default.Children.map(children, (child, index) => {
-    if (import_react10.default.isValidElement(child)) {
-      return import_react10.default.cloneElement(child, {
+  const childrenWithNumbers = import_react9.default.Children.map(children, (child, index) => {
+    if (import_react9.default.isValidElement(child)) {
+      return import_react9.default.cloneElement(child, {
         bulletType: type,
         isOrdered: true,
         index: index + 1,
@@ -739,7 +800,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: [styles8.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -749,7 +810,7 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  return /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: [styles9.li, style] }, /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ import_react10.default.createElement(import_renderer9.View, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react10.default.createElement(import_renderer9.Text, null, children) : children));
+  return /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: [styles8.li, style] }, /* @__PURE__ */ import_react9.default.createElement(import_renderer9.Text, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ import_react9.default.createElement(import_renderer9.View, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ import_react9.default.createElement(import_renderer9.Text, null, children) : children));
 };
 
 // src/components/core/index.tsx
@@ -784,13 +845,13 @@ var decodeBase64Pdf_default = decodeBase64Pdf;
 
 // src/functions/generatePDF.ts
 var import_renderer10 = require("@react-pdf/renderer");
-var import_react11 = require("react");
+var import_react10 = require("react");
 var generatePDF = async ({ template: Template, data }) => {
   try {
     if (!Template) {
       throw new Error("Template not provided");
     }
-    const MyDocument = (0, import_react11.createElement)(Template, { data });
+    const MyDocument = (0, import_react10.createElement)(Template, { data });
     const stream = await (0, import_renderer10.renderToStream)(MyDocument);
     const base64String = await new Promise((resolve, reject) => {
       const chunks = [];