react-pdf-levelup 2.0.20 → 2.0.25

package/dist/index.mjs

@@ -71,7 +71,7 @@ var LayoutPDF_default = LayoutPDF;
 
 // src/components/core/Img.tsx
 import React2 from "react";
-import { Image as Image2, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
+import { Image, StyleSheet as StyleSheet2 } from "@react-pdf/renderer";
 var styles2 = StyleSheet2.create({
   image: {
     width: "100%",
@@ -80,7 +80,7 @@ var styles2 = StyleSheet2.create({
   }
 });
 var Img = ({ src, style }) => {
-  return /* @__PURE__ */ React2.createElement(Image2, { src, style: [styles2.image, style] });
+  return /* @__PURE__ */ React2.createElement(Image, { src, style: [styles2.image, style] });
 };
 var Img_default = Img;
 
@@ -237,81 +237,100 @@ var styles5 = StyleSheet5.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__ */ React5.createElement(View2, { style: [styles5.table, style] }, children);
-};
-var Thead = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.thead, style] }, children);
-};
+var Table = ({ children, style }) => /* @__PURE__ */ React5.createElement(View2, { style: [styles5.table, style] }, children);
+var Thead = ({ children, style }) => /* @__PURE__ */ React5.createElement(View2, { style: [styles5.thead, style] }, children);
 var Tbody = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tbody, style] }, children);
-};
-var Tr = ({ children, style }) => {
-  return /* @__PURE__ */ React5.createElement(View2, { 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 = React5.Children.toArray(children);
+  const count = rows.length;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, rows.map(
+    (row, idx) => React5.cloneElement(row, {
+      isLastRow: idx === count - 1,
+      isOdd: idx % 2 === 1
+    })
+  ));
+};
+var Tr = ({
+  children,
+  style,
+  isLastRow = false,
+  isOdd = false
+}) => {
+  const elements = React5.Children.toArray(children);
+  const count = elements.length;
+  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.tr, style] }, elements.map((child, idx) => {
+    const isLast = idx === count - 1;
+    const width = `${(100 / count).toFixed(2)}%`;
+    return React5.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__ */ React5.createElement(View2, { style: [styles5.th, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
+  return /* @__PURE__ */ React5.createElement(View2, { style: [styles5.textBold, { width: baseWidth }, borders, style] }, /* @__PURE__ */ React5.createElement(Text3, 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__ */ React5.createElement(View2, { style: [styles5.td, customStyle, style] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
+  return /* @__PURE__ */ React5.createElement(View2, { style: [
+    styles5.text,
+    isOdd && styles5.zebraOdd,
+    { width: baseWidth },
+    borders,
+    style
+  ] }, /* @__PURE__ */ React5.createElement(Text3, null, children));
 };
 
 // src/components/core/Grid.tsx
@@ -419,155 +438,197 @@ var Footer = ({ children, style, fixed = false }) => {
 };
 
 // src/components/core/QR.tsx
-import React8 from "react";
-import { Image as Image3, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
-import { useEffect, useState } from "react";
-
-// src/components/core/QRGenerator.tsx
-import QRCode from "qrcode";
-var generateQRAsBase64 = async ({
-  value,
-  size = 150,
-  colorDark = "#282828",
-  colorLight = "#ffffff",
-  margin = 0,
-  errorCorrectionLevel = "M"
-}) => {
+import React8, { useEffect, useState } from "react";
+import { Image as Image2, View as View5, Text as Text5 } from "@react-pdf/renderer";
+import QRCodeStyling from "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 = QRCode.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 = StyleSheet8.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] = useState("");
+  const [qrDataURL, setQrDataURL] = useState(null);
+  const actualLogoWidth = logoWidth || Math.floor(size * 0.2);
+  const actualLogoHeight = logoHeight || actualLogoWidth;
   useEffect(() => {
-    const generateQR = async () => {
+    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 QRCodeStyling({
+          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__ */ React8.createElement(View5, { style: [styles8.qrContainer, style] }, /* @__PURE__ */ React8.createElement(Image3, { 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__ */ React8.createElement(View5, { style: { width: size, height: size, position: "relative", ...style } }, /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL, style: { width: size, height: size } }), logo && /* @__PURE__ */ React8.createElement(
+    View5,
+    {
+      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__ */ React8.createElement(
+      Image2,
+      {
+        src: logo,
+        style: {
+          objectFit: "contain",
+          width: actualLogoWidth,
+          height: actualLogoHeight
+        }
+      }
+    )
+  ), !logo && logoText && /* @__PURE__ */ React8.createElement(
+    View5,
+    {
+      style: {
+        position: "absolute",
+        backgroundColor: textBackgroundColor,
+        padding: textPadding,
+        borderRadius: 4,
+        left: moveText + centerPosition - 20,
+        top: centerPosition - 10
+      }
+    },
+    /* @__PURE__ */ React8.createElement(
+      Text5,
+      {
+        style: {
+          color: textColor,
+          fontSize,
+          fontFamily,
+          fontWeight: textBold ? "bold" : "normal"
+        }
+      },
+      logoText
+    )
+  ));
 };
 var QR_default = QR;
 
 // src/components/core/Lista.tsx
 import React9 from "react";
-import { View as View6, Text as Text5, StyleSheet as StyleSheet9 } from "@react-pdf/renderer";
-var styles9 = StyleSheet9.create({
+import { View as View6, Text as Text6, StyleSheet as StyleSheet8 } from "@react-pdf/renderer";
+var styles8 = StyleSheet8.create({
   ul: {
     marginBottom: 10,
     paddingLeft: 15
@@ -637,7 +698,7 @@ var UL = ({ children, style, type = "disc" }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ul, style] }, childrenWithBullets);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ul, style] }, childrenWithBullets);
 };
 var OL = ({ children, style, type = "decimal", start = 1 }) => {
   const childrenWithNumbers = React9.Children.map(children, (child, index) => {
@@ -651,7 +712,7 @@ var OL = ({ children, style, type = "decimal", start = 1 }) => {
     }
     return child;
   });
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.ol, style] }, childrenWithNumbers);
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.ol, style] }, childrenWithNumbers);
 };
 var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1, start = 1, value }) => {
   let marker;
@@ -661,11 +722,11 @@ var LI = ({ children, style, bulletType = "disc", isOrdered = false, index = 1,
   } else {
     marker = getBulletPoint(bulletType);
   }
-  return /* @__PURE__ */ React9.createElement(View6, { style: [styles9.li, style] }, /* @__PURE__ */ React9.createElement(Text5, { style: styles9.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles9.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text5, null, children) : children));
+  return /* @__PURE__ */ React9.createElement(View6, { style: [styles8.li, style] }, /* @__PURE__ */ React9.createElement(Text6, { style: styles8.bulletPoint }, marker), /* @__PURE__ */ React9.createElement(View6, { style: styles8.itemContent }, typeof children === "string" ? /* @__PURE__ */ React9.createElement(Text6, null, children) : children));
 };
 
 // src/components/core/index.tsx
-import { View as View7, Text as Text6, StyleSheet as StyleSheet10, Font } from "@react-pdf/renderer";
+import { View as View7, Text as Text7, StyleSheet as StyleSheet9, Font } from "@react-pdf/renderer";
 
 // src/functions/decodeBase64Pdf.ts
 var decodeBase64Pdf = (base64, fileName) => {
@@ -757,11 +818,11 @@ export {
   Small,
   Span,
   Strong,
-  StyleSheet10 as StyleSheet,
+  StyleSheet9 as StyleSheet,
   Table,
   Tbody,
   Td,
-  Text6 as Text,
+  Text7 as Text,
   Th,
   Thead,
   Tr,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "2.0.20",
+  "version": "2.0.25",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -18,16 +18,20 @@
     "publicar": "npm run upVersion && npm run update-jsx && npm run build-lib && npm publish",
     "demo": "ts-node ./src/useExample/index.ts"
   },
+  "peerDependencies": {
+    "@react-pdf/renderer": "^4.3.0",
+    "qr-code-styling": "^1.9.2",
+    "react": "^18",
+    "react-dom": "^18"
+  },
   "dependencies": {
     "@babel/standalone": "^7.23.10",
     "@monaco-editor/react": "^4.7.0",
-    "@react-pdf/renderer": "^4.3.0",
-    "easyqrcodejs": "^4.6.2",
+    "canvas": "^3.1.0",
+    "i": "^0.3.7",
+    "jsdom": "^26.1.0",
     "lucide-react": "^0.485.0",
-    "qrcode": "^1.5.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-pdf-levelup": "^2.0.18",
+    "npm": "^11.3.0",
     "react-router-dom": "^7.4.1",
     "rimraf": "^6.0.1",
     "ts-node": "^10.9.2"
@@ -35,7 +39,7 @@
   "devDependencies": {
     "@eslint/js": "^9.21.0",
     "@react-pdf/types": "^2.9.0",
-    "@types/qrcode": "^1.5.5",
+    "@types/jsdom": "^21.1.7",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4.3.4",
@@ -44,6 +48,7 @@
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
     "json": "^11.0.0",
+    "react-pdf-levelup": "^2.0.18",
     "tsup": "^8.4.0",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",