react-pdf-levelup 1.0.13 → 1.0.14

package/dist/index.cjs

@@ -584,138 +584,72 @@ var Footer = ({ children, style, fixed = false }) => {
 var import_react8 = __toESM(require("react"), 1);
 var import_react9 = require("react");
 var import_renderer8 = require("@react-pdf/renderer");
-var import_qr_code_styling = __toESM(require("qr-code-styling"), 1);
+var import_qrcode = __toESM(require("qrcode"), 1);
 var styles8 = import_renderer8.StyleSheet.create({
   qrContainer: {
     position: "relative",
     alignItems: "center",
     justifyContent: "center"
+  },
+  logo: {
+    position: "absolute",
+    zIndex: 2
+  },
+  logoBackground: {
+    position: "absolute",
+    zIndex: 1
   }
 });
 var QRCode = ({
   value,
   size = 150,
-  dotsColor = "#000000",
-  dotsGradient,
+  color = "#000000",
   backgroundColor = "#ffffff",
-  dotsType = "square",
-  cornersType = "square",
-  cornersSquareColor,
-  cornersDotColor,
+  errorCorrectionLevel = "M",
+  style,
+  includeMargin = true,
   logo,
   logoSize = 30,
-  logoBackgroundColor,
-  logoMargin = 5,
-  errorCorrectionLevel = "M",
-  margin = 10,
-  style
+  logoBackgroundColor = "#ffffff",
+  logoMargin = 5
 }) => {
   const [qrDataURL, setQrDataURL] = (0, import_react9.useState)("");
-  const qrCodeRef = (0, import_react9.useRef)(null);
   (0, import_react9.useEffect)(() => {
-    if (typeof window !== "undefined" && !qrCodeRef.current) {
-      qrCodeRef.current = new import_qr_code_styling.default({
-        width: 300,
-        height: 300,
-        type: "canvas",
-        data: "Initial",
-        dotsOptions: {
-          type: "square",
-          color: "#000000"
-        },
-        cornersSquareOptions: {
-          type: "square"
-        },
-        cornersDotOptions: {
-          type: "square"
-        },
-        backgroundOptions: {
-          color: "#ffffff"
-        },
-        imageOptions: {
-          crossOrigin: "anonymous",
-          margin: 5
-        }
-      });
-    }
     const generateQRCode = async () => {
-      if (typeof window === "undefined" || !qrCodeRef.current) return;
       try {
         const options = {
-          width: size,
-          height: size,
-          data: value,
-          margin,
-          qrOptions: {
-            errorCorrectionLevel
-          },
-          dotsOptions: {
-            type: dotsType,
-            color: dotsColor
-          },
-          cornersSquareOptions: {
-            type: cornersType,
-            color: cornersSquareColor || dotsColor
+          errorCorrectionLevel,
+          margin: includeMargin ? 4 : 0,
+          color: {
+            dark: color,
+            light: backgroundColor
           },
-          cornersDotOptions: {
-            type: cornersType,
-            color: cornersDotColor || dotsColor
-          },
-          backgroundOptions: {
-            color: backgroundColor
-          }
+          width: size
         };
-        if (dotsGradient && dotsGradient.length === 2) {
-          options.dotsOptions.gradient = {
-            type: "linear",
-            colorStops: [
-              { offset: 0, color: dotsGradient[0] },
-              { offset: 1, color: dotsGradient[1] }
-            ]
-          };
-        }
-        if (logo) {
-          options.image = logo;
-          options.imageOptions = {
-            hideBackgroundDots: true,
-            imageSize: logoSize / size,
-            crossOrigin: "anonymous",
-            margin: logoMargin
-          };
-          if (logoBackgroundColor) {
-            options.imageOptions.margin = logoMargin;
-          }
-        }
-        qrCodeRef.current.update(options);
-        const dataURL = await qrCodeRef.current.getDataUrl();
+        const dataURL = await import_qrcode.default.toDataURL(value, options);
         setQrDataURL(dataURL);
       } catch (error) {
         console.error("Error generating QR code:", error);
       }
     };
     generateQRCode();
-  }, [
-    value,
-    size,
-    dotsColor,
-    dotsGradient,
-    backgroundColor,
-    dotsType,
-    cornersType,
-    cornersSquareColor,
-    cornersDotColor,
-    logo,
-    logoSize,
-    logoBackgroundColor,
-    logoMargin,
-    errorCorrectionLevel,
-    margin
-  ]);
+  }, [value, size, color, backgroundColor, errorCorrectionLevel, includeMargin]);
   const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
     width: size,
     height: size
   }), style);
-  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }) : null);
+  const logoContainerSize = logoSize + logoMargin * 2;
+  const logoBackgroundStyle = __spreadProps(__spreadValues({}, styles8.logoBackground), {
+    width: logoContainerSize,
+    height: logoContainerSize,
+    backgroundColor: logoBackgroundColor,
+    borderRadius: logoContainerSize / 2
+  });
+  const logoStyle = __spreadProps(__spreadValues({}, styles8.logo), {
+    width: logoSize,
+    height: logoSize
+  });
+  return /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(import_renderer8.View, { style: logoBackgroundStyle }), /* @__PURE__ */ import_react8.default.createElement(import_renderer8.Image, { src: logo || "/placeholder.svg", style: logoStyle }))) : null);
 };
 var QRCode_default = QRCode;
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.d.cts

@@ -116,20 +116,15 @@ declare const Footer: React.FC<PageElementProps>;
 interface QRCodeProps {
     value: string;
     size?: number;
-    dotsColor?: string;
-    dotsGradient?: [string, string];
+    color?: string;
     backgroundColor?: string;
-    dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
-    cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
-    cornersSquareColor?: string;
-    cornersDotColor?: string;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
+    style?: any;
+    includeMargin?: boolean;
     logo?: string;
     logoSize?: number;
     logoBackgroundColor?: string;
     logoMargin?: number;
-    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
-    margin?: number;
-    style?: any;
 }
 declare const QRCode: React.FC<QRCodeProps>;
 

package/dist/index.d.ts

@@ -116,20 +116,15 @@ declare const Footer: React.FC<PageElementProps>;
 interface QRCodeProps {
     value: string;
     size?: number;
-    dotsColor?: string;
-    dotsGradient?: [string, string];
+    color?: string;
     backgroundColor?: string;
-    dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
-    cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
-    cornersSquareColor?: string;
-    cornersDotColor?: string;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
+    style?: any;
+    includeMargin?: boolean;
     logo?: string;
     logoSize?: number;
     logoBackgroundColor?: string;
     logoMargin?: number;
-    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
-    margin?: number;
-    style?: any;
 }
 declare const QRCode: React.FC<QRCodeProps>;
 

package/dist/index.js

@@ -506,140 +506,74 @@ var Footer = ({ children, style, fixed = false }) => {
 
 // src/components/PDF/core/QRCode.tsx
 import React8 from "react";
-import { useEffect, useState, useRef } from "react";
+import { useEffect, useState } from "react";
 import { Image as Image2, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
-import QRCodeStyling from "qr-code-styling";
+import QRCodeLib from "qrcode";
 var styles8 = StyleSheet8.create({
   qrContainer: {
     position: "relative",
     alignItems: "center",
     justifyContent: "center"
+  },
+  logo: {
+    position: "absolute",
+    zIndex: 2
+  },
+  logoBackground: {
+    position: "absolute",
+    zIndex: 1
   }
 });
 var QRCode = ({
   value,
   size = 150,
-  dotsColor = "#000000",
-  dotsGradient,
+  color = "#000000",
   backgroundColor = "#ffffff",
-  dotsType = "square",
-  cornersType = "square",
-  cornersSquareColor,
-  cornersDotColor,
+  errorCorrectionLevel = "M",
+  style,
+  includeMargin = true,
   logo,
   logoSize = 30,
-  logoBackgroundColor,
-  logoMargin = 5,
-  errorCorrectionLevel = "M",
-  margin = 10,
-  style
+  logoBackgroundColor = "#ffffff",
+  logoMargin = 5
 }) => {
   const [qrDataURL, setQrDataURL] = useState("");
-  const qrCodeRef = useRef(null);
   useEffect(() => {
-    if (typeof window !== "undefined" && !qrCodeRef.current) {
-      qrCodeRef.current = new QRCodeStyling({
-        width: 300,
-        height: 300,
-        type: "canvas",
-        data: "Initial",
-        dotsOptions: {
-          type: "square",
-          color: "#000000"
-        },
-        cornersSquareOptions: {
-          type: "square"
-        },
-        cornersDotOptions: {
-          type: "square"
-        },
-        backgroundOptions: {
-          color: "#ffffff"
-        },
-        imageOptions: {
-          crossOrigin: "anonymous",
-          margin: 5
-        }
-      });
-    }
     const generateQRCode = async () => {
-      if (typeof window === "undefined" || !qrCodeRef.current) return;
       try {
         const options = {
-          width: size,
-          height: size,
-          data: value,
-          margin,
-          qrOptions: {
-            errorCorrectionLevel
-          },
-          dotsOptions: {
-            type: dotsType,
-            color: dotsColor
-          },
-          cornersSquareOptions: {
-            type: cornersType,
-            color: cornersSquareColor || dotsColor
+          errorCorrectionLevel,
+          margin: includeMargin ? 4 : 0,
+          color: {
+            dark: color,
+            light: backgroundColor
           },
-          cornersDotOptions: {
-            type: cornersType,
-            color: cornersDotColor || dotsColor
-          },
-          backgroundOptions: {
-            color: backgroundColor
-          }
+          width: size
         };
-        if (dotsGradient && dotsGradient.length === 2) {
-          options.dotsOptions.gradient = {
-            type: "linear",
-            colorStops: [
-              { offset: 0, color: dotsGradient[0] },
-              { offset: 1, color: dotsGradient[1] }
-            ]
-          };
-        }
-        if (logo) {
-          options.image = logo;
-          options.imageOptions = {
-            hideBackgroundDots: true,
-            imageSize: logoSize / size,
-            crossOrigin: "anonymous",
-            margin: logoMargin
-          };
-          if (logoBackgroundColor) {
-            options.imageOptions.margin = logoMargin;
-          }
-        }
-        qrCodeRef.current.update(options);
-        const dataURL = await qrCodeRef.current.getDataUrl();
+        const dataURL = await QRCodeLib.toDataURL(value, options);
         setQrDataURL(dataURL);
       } catch (error) {
         console.error("Error generating QR code:", error);
       }
     };
     generateQRCode();
-  }, [
-    value,
-    size,
-    dotsColor,
-    dotsGradient,
-    backgroundColor,
-    dotsType,
-    cornersType,
-    cornersSquareColor,
-    cornersDotColor,
-    logo,
-    logoSize,
-    logoBackgroundColor,
-    logoMargin,
-    errorCorrectionLevel,
-    margin
-  ]);
+  }, [value, size, color, backgroundColor, errorCorrectionLevel, includeMargin]);
   const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
     width: size,
     height: size
   }), style);
-  return /* @__PURE__ */ React8.createElement(View5, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }) : null);
+  const logoContainerSize = logoSize + logoMargin * 2;
+  const logoBackgroundStyle = __spreadProps(__spreadValues({}, styles8.logoBackground), {
+    width: logoContainerSize,
+    height: logoContainerSize,
+    backgroundColor: logoBackgroundColor,
+    borderRadius: logoContainerSize / 2
+  });
+  const logoStyle = __spreadProps(__spreadValues({}, styles8.logo), {
+    width: logoSize,
+    height: logoSize
+  });
+  return /* @__PURE__ */ React8.createElement(View5, { style: containerStyle }, qrDataURL ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Image2, { src: qrDataURL || "/placeholder.svg", style: { width: size, height: size } }), logo && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(View5, { style: logoBackgroundStyle }), /* @__PURE__ */ React8.createElement(Image2, { src: logo || "/placeholder.svg", style: logoStyle }))) : null);
 };
 var QRCode_default = QRCode;
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "1.0.13",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -26,7 +26,6 @@
     "lucide-react": "^0.477.0",
     "next": "14.2.24",
     "next-transpile-modules": "^10.0.1",
-    "qr-code-styling": "^1.9.1",
     "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18",