react-pdf-levelup 1.0.11 → 1.0.13

package/dist/index.cjs

@@ -78,6 +78,7 @@ __export(index_exports, {
   Left: () => Left,
   Mark: () => Mark,
   P: () => P,
+  QRCode: () => QRCode_default,
   Right: () => Right,
   Row: () => Row,
   Small: () => Small,
@@ -578,6 +579,145 @@ var Header = ({ children, style, fixed = false }) => {
 var Footer = ({ children, style, fixed = false }) => {
   return /* @__PURE__ */ import_react7.default.createElement(import_renderer7.View, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ import_react7.default.createElement(import_renderer7.Text, null, children) : children);
 };
+
+// src/components/PDF/core/QRCode.tsx
+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 styles8 = import_renderer8.StyleSheet.create({
+  qrContainer: {
+    position: "relative",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+var QRCode = ({
+  value,
+  size = 150,
+  dotsColor = "#000000",
+  dotsGradient,
+  backgroundColor = "#ffffff",
+  dotsType = "square",
+  cornersType = "square",
+  cornersSquareColor,
+  cornersDotColor,
+  logo,
+  logoSize = 30,
+  logoBackgroundColor,
+  logoMargin = 5,
+  errorCorrectionLevel = "M",
+  margin = 10,
+  style
+}) => {
+  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
+          },
+          cornersDotOptions: {
+            type: cornersType,
+            color: cornersDotColor || dotsColor
+          },
+          backgroundOptions: {
+            color: backgroundColor
+          }
+        };
+        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();
+        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
+  ]);
+  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);
+};
+var QRCode_default = QRCode;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   A,
@@ -611,6 +751,7 @@ var Footer = ({ children, style, fixed = false }) => {
   Left,
   Mark,
   P,
+  QRCode,
   Right,
   Row,
   Small,

package/dist/index.d.cts

@@ -113,4 +113,24 @@ interface PageElementProps {
 declare const Header: React.FC<PageElementProps>;
 declare const Footer: React.FC<PageElementProps>;
 
-export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
+interface QRCodeProps {
+    value: string;
+    size?: number;
+    dotsColor?: string;
+    dotsGradient?: [string, string];
+    backgroundColor?: string;
+    dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
+    cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
+    cornersSquareColor?: string;
+    cornersDotColor?: string;
+    logo?: string;
+    logoSize?: number;
+    logoBackgroundColor?: string;
+    logoMargin?: number;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
+    margin?: number;
+    style?: any;
+}
+declare const QRCode: React.FC<QRCodeProps>;
+
+export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };

package/dist/index.d.ts

@@ -113,4 +113,24 @@ interface PageElementProps {
 declare const Header: React.FC<PageElementProps>;
 declare const Footer: React.FC<PageElementProps>;
 
-export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };
+interface QRCodeProps {
+    value: string;
+    size?: number;
+    dotsColor?: string;
+    dotsGradient?: [string, string];
+    backgroundColor?: string;
+    dotsType?: "square" | "dots" | "rounded" | "classy" | "classy-rounded" | "extra-rounded";
+    cornersType?: "square" | "dots" | "rounded" | "extra-rounded";
+    cornersSquareColor?: string;
+    cornersDotColor?: string;
+    logo?: string;
+    logoSize?: number;
+    logoBackgroundColor?: string;
+    logoMargin?: number;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
+    margin?: number;
+    style?: any;
+}
+declare const QRCode: React.FC<QRCodeProps>;
+
+export { A, BR, Blockquote, Center, Col1, Col10, Col11, Col12, Col2, Col3, Col4, Col5, Col6, Col7, Col8, Col9, Container, Em, Footer, H1, H2, H3, H4, H5, H6, Header, Img, LayoutPDF, Left, Mark, P, QRCode, Right, Row, Small, Span, Strong, Table, Tbody, Td, Th, Thead, Tr, U };

package/dist/index.js

@@ -503,6 +503,145 @@ var Header = ({ children, style, fixed = false }) => {
 var Footer = ({ children, style, fixed = false }) => {
   return /* @__PURE__ */ React7.createElement(View4, { style: [styles7.footer, style], fixed }, typeof children === "string" ? /* @__PURE__ */ React7.createElement(Text4, null, children) : children);
 };
+
+// src/components/PDF/core/QRCode.tsx
+import React8 from "react";
+import { useEffect, useState, useRef } from "react";
+import { Image as Image2, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
+import QRCodeStyling from "qr-code-styling";
+var styles8 = StyleSheet8.create({
+  qrContainer: {
+    position: "relative",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+var QRCode = ({
+  value,
+  size = 150,
+  dotsColor = "#000000",
+  dotsGradient,
+  backgroundColor = "#ffffff",
+  dotsType = "square",
+  cornersType = "square",
+  cornersSquareColor,
+  cornersDotColor,
+  logo,
+  logoSize = 30,
+  logoBackgroundColor,
+  logoMargin = 5,
+  errorCorrectionLevel = "M",
+  margin = 10,
+  style
+}) => {
+  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
+          },
+          cornersDotOptions: {
+            type: cornersType,
+            color: cornersDotColor || dotsColor
+          },
+          backgroundOptions: {
+            color: backgroundColor
+          }
+        };
+        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();
+        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
+  ]);
+  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);
+};
+var QRCode_default = QRCode;
 export {
   A,
   BR,
@@ -535,6 +674,7 @@ export {
   Left,
   Mark,
   P,
+  QRCode_default as QRCode,
   Right,
   Row,
   Small,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-pdf-levelup",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -26,6 +26,8 @@
     "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",
     "react-pdf": "^9.2.1"
@@ -33,6 +35,7 @@
   "devDependencies": {
     "@react-pdf/types": "^2.9.0",
     "@types/node": "^20",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",