react-pdf-levelup 1.0.11 → 1.0.14

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,79 @@ 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_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,
+  color = "#000000",
+  backgroundColor = "#ffffff",
+  errorCorrectionLevel = "M",
+  style,
+  includeMargin = true,
+  logo,
+  logoSize = 30,
+  logoBackgroundColor = "#ffffff",
+  logoMargin = 5
+}) => {
+  const [qrDataURL, setQrDataURL] = (0, import_react9.useState)("");
+  (0, import_react9.useEffect)(() => {
+    const generateQRCode = async () => {
+      try {
+        const options = {
+          errorCorrectionLevel,
+          margin: includeMargin ? 4 : 0,
+          color: {
+            dark: color,
+            light: backgroundColor
+          },
+          width: size
+        };
+        const dataURL = await import_qrcode.default.toDataURL(value, options);
+        setQrDataURL(dataURL);
+      } catch (error) {
+        console.error("Error generating QR code:", error);
+      }
+    };
+    generateQRCode();
+  }, [value, size, color, backgroundColor, errorCorrectionLevel, includeMargin]);
+  const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
+    width: size,
+    height: size
+  }), style);
+  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:
 0 && (module.exports = {
   A,
@@ -611,6 +685,7 @@ var Footer = ({ children, style, fixed = false }) => {
   Left,
   Mark,
   P,
+  QRCode,
   Right,
   Row,
   Small,

package/dist/index.d.cts

@@ -113,4 +113,19 @@ 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;
+    color?: string;
+    backgroundColor?: string;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
+    style?: any;
+    includeMargin?: boolean;
+    logo?: string;
+    logoSize?: number;
+    logoBackgroundColor?: string;
+    logoMargin?: number;
+}
+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,19 @@ 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;
+    color?: string;
+    backgroundColor?: string;
+    errorCorrectionLevel?: "L" | "M" | "Q" | "H";
+    style?: any;
+    includeMargin?: boolean;
+    logo?: string;
+    logoSize?: number;
+    logoBackgroundColor?: string;
+    logoMargin?: number;
+}
+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,79 @@ 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 } from "react";
+import { Image as Image2, StyleSheet as StyleSheet8, View as View5 } from "@react-pdf/renderer";
+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,
+  color = "#000000",
+  backgroundColor = "#ffffff",
+  errorCorrectionLevel = "M",
+  style,
+  includeMargin = true,
+  logo,
+  logoSize = 30,
+  logoBackgroundColor = "#ffffff",
+  logoMargin = 5
+}) => {
+  const [qrDataURL, setQrDataURL] = useState("");
+  useEffect(() => {
+    const generateQRCode = async () => {
+      try {
+        const options = {
+          errorCorrectionLevel,
+          margin: includeMargin ? 4 : 0,
+          color: {
+            dark: color,
+            light: backgroundColor
+          },
+          width: size
+        };
+        const dataURL = await QRCodeLib.toDataURL(value, options);
+        setQrDataURL(dataURL);
+      } catch (error) {
+        console.error("Error generating QR code:", error);
+      }
+    };
+    generateQRCode();
+  }, [value, size, color, backgroundColor, errorCorrectionLevel, includeMargin]);
+  const containerStyle = __spreadValues(__spreadProps(__spreadValues({}, styles8.qrContainer), {
+    width: size,
+    height: size
+  }), style);
+  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 {
   A,
   BR,
@@ -535,6 +608,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.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -26,6 +26,7 @@
     "lucide-react": "^0.477.0",
     "next": "14.2.24",
     "next-transpile-modules": "^10.0.1",
+    "qrcode": "^1.5.4",
     "react": "^18",
     "react-dom": "^18",
     "react-pdf": "^9.2.1"
@@ -33,6 +34,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",