feat: add download functionality and improve architecture

Author: yordan-st

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.tsx

@@ -1,7 +1,7 @@
-import JsBarcode from "jsbarcode";
-import { QRCodeSVG } from "qrcode.react";
-import { ReactElement, useEffect, useRef } from "react";
+import { ReactElement, useRef } from "react";
 import { BarcodeGeneratorContainerProps } from "../typings/BarcodeGeneratorProps";
+import { useDownload } from "./hooks/useDownload";
+import { CodeRenderer } from "./components/CodeRenderer";
 
 import "./ui/BarcodeGenerator.scss";
 
@@ -13,41 +13,45 @@ export default function BarcodeGenerator({
     codeMargin,
     displayValue,
     qrSize,
-    tabIndex
+    tabIndex,
+    allowDownload
 }: BarcodeGeneratorContainerProps): ReactElement {
     const svgRef = useRef<SVGSVGElement>(null);
+    const qrContainerRef = useRef<HTMLDivElement>(null);
 
     const value = codeValue?.status === "available" ? codeValue.value : "";
     const width = codeWidth ?? 128;
     const height = codeHeight ?? 128;
     const format = codeFormat ?? "CODE128";
     const margin = codeMargin ?? 2;
     const showValue = displayValue ?? false;
+    const download = allowDownload ?? false;
     const size = qrSize ?? 128;
 
-    useEffect(() => {
-        if (format !== "QRCode" && svgRef.current && value) {
-            try {
-                JsBarcode(svgRef.current, value, {
-                    format,
-                    width,
-                    height,
-                    margin,
-                    displayValue: showValue
-                });
-            } catch (error) {
-                console.error("Error generating barcode:", error);
-            }
-        }
-    }, [value, width, height, format, margin, showValue]);
+    const { downloadSVG } = useDownload({ format, svgRef, qrContainerRef });
 
     if (!value) {
         return <span>No barcode value provided</span>;
     }
 
     return (
         <div className="barcode-generator" tabIndex={tabIndex}>
-            {format === "QRCode" ? <QRCodeSVG value={value} size={size} /> : <svg ref={svgRef} />}
+            <CodeRenderer
+                format={format}
+                value={value}
+                size={size}
+                width={width}
+                height={height}
+                margin={margin}
+                displayValue={showValue}
+                svgRef={svgRef}
+                qrContainerRef={qrContainerRef}
+            />
+            {download && (
+                <button type="button" onClick={downloadSVG} className="btn btn-default">
+                    Download {format === "QRCode" ? "QR Code" : "Barcode"}
+                </button>
+            )}
         </div>
     );
 }

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.xml

@@ -24,6 +24,10 @@
                         <enumerationValue key="Custom">Custom Format</enumerationValue>
                     </enumerationValues>
                 </property>
+                <property key="allowDownload" type="boolean" defaultValue="false">
+                    <caption>Allow download</caption>
+                    <description>Adds a download button</description>
+                </property>
             </propertyGroup>
             <propertyGroup caption="Display">
                 <property key="displayValue" type="boolean" defaultValue="false">

packages/pluggableWidgets/barcode-generator-web/src/components/BarcodeRenderer.tsx

@@ -0,0 +1,33 @@
+import JsBarcode from "jsbarcode";
+import { forwardRef, useEffect } from "react";
+
+interface BarcodeRendererProps {
+    value: string;
+    width: number;
+    height: number;
+    format: string;
+    margin: number;
+    displayValue: boolean;
+}
+
+export const BarcodeRenderer = forwardRef<SVGSVGElement, BarcodeRendererProps>(
+    ({ value, width, height, format, margin, displayValue }, ref) => {
+        useEffect(() => {
+            if (ref && typeof ref !== "function" && ref.current && value) {
+                try {
+                    JsBarcode(ref.current, value, {
+                        format,
+                        width,
+                        height,
+                        margin,
+                        displayValue
+                    });
+                } catch (error) {
+                    console.error("Error generating barcode:", error);
+                }
+            }
+        }, [value, width, height, format, margin, displayValue, ref]);
+
+        return <svg ref={ref} />;
+    }
+);

packages/pluggableWidgets/barcode-generator-web/src/components/CodeRenderer.tsx

@@ -0,0 +1,46 @@
+import { ReactElement } from "react";
+import { QRCodeRenderer } from "./QRCodeRenderer";
+import { BarcodeRenderer } from "./BarcodeRenderer";
+
+interface CodeRendererProps {
+    format: string;
+    value: string;
+    // QR Code props
+    size: number;
+    // Barcode props
+    width: number;
+    height: number;
+    margin: number;
+    displayValue: boolean;
+    // Refs for download functionality
+    svgRef: React.RefObject<SVGSVGElement>;
+    qrContainerRef: React.RefObject<HTMLDivElement>;
+}
+
+export function CodeRenderer({
+    format,
+    value,
+    size,
+    width,
+    height,
+    margin,
+    displayValue,
+    svgRef,
+    qrContainerRef
+}: CodeRendererProps): ReactElement {
+    if (format === "QRCode") {
+        return <QRCodeRenderer ref={qrContainerRef} value={value} size={size} />;
+    }
+
+    return (
+        <BarcodeRenderer
+            ref={svgRef}
+            value={value}
+            width={width}
+            height={height}
+            format={format}
+            margin={margin}
+            displayValue={displayValue}
+        />
+    );
+}

packages/pluggableWidgets/barcode-generator-web/src/components/QRCodeRenderer.tsx

@@ -0,0 +1,17 @@
+import { QRCodeSVG } from "qrcode.react";
+import { forwardRef } from "react";
+
+const QRCode = QRCodeSVG as React.ComponentType<{ value: string; size: number }>;
+
+interface QRCodeRendererProps {
+    value: string;
+    size: number;
+}
+
+export const QRCodeRenderer = forwardRef<HTMLDivElement, QRCodeRendererProps>(({ value, size }, ref) => {
+    return (
+        <div ref={ref}>
+            <QRCode value={value} size={size} />
+        </div>
+    );
+});

packages/pluggableWidgets/barcode-generator-web/src/hooks/useDownload.ts

@@ -0,0 +1,61 @@
+import { useCallback } from "react";
+
+interface UseDownloadParams {
+    format: string;
+    svgRef: React.RefObject<SVGSVGElement>;
+    qrContainerRef: React.RefObject<HTMLDivElement>;
+}
+interface UseDownloadReturn {
+    downloadSVG: () => void;
+}
+
+export function useDownload({ format, svgRef, qrContainerRef }: UseDownloadParams): UseDownloadReturn {
+    const downloadSVG = useCallback(() => {
+        let svgElement: SVGSVGElement | null = null;
+        let filename = "";
+
+        if (format === "QRCode") {
+            // Find the SVG element inside the QR container
+            svgElement = qrContainerRef.current?.querySelector("svg") || null;
+            filename = "qrcode.svg";
+        } else {
+            svgElement = svgRef.current;
+            filename = "barcode.svg";
+        }
+
+        if (!svgElement) {
+            console.error("SVG element not found for download");
+            return;
+        }
+
+        try {
+            // Clone the SVG to avoid modifying the original
+            const clonedSvg = svgElement.cloneNode(true) as SVGSVGElement;
+
+            // Ensure proper SVG namespace and attributes
+            clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+            // Serialize the SVG
+            const serializer = new XMLSerializer();
+            const svgString = serializer.serializeToString(clonedSvg);
+
+            // Create download link
+            const blob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
+            const url = URL.createObjectURL(blob);
+
+            const link = document.createElement("a");
+            link.href = url;
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+
+            // Clean up the URL object
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error("Error downloading SVG:", error);
+        }
+    }, [format, svgRef, qrContainerRef]);
+
+    return { downloadSVG };
+}

packages/pluggableWidgets/barcode-generator-web/typings/BarcodeGeneratorProps.d.ts

@@ -17,6 +17,7 @@ export interface BarcodeGeneratorContainerProps {
     tabIndex?: number;
     codeValue: EditableValue<string>;
     codeFormat: CodeFormatEnum;
+    allowDownload: boolean;
     displayValue: boolean;
     codeWidth: number;
     codeHeight: number;
@@ -38,6 +39,7 @@ export interface BarcodeGeneratorPreviewProps {
     translate: (text: string) => string;
     codeValue: string;
     codeFormat: CodeFormatEnum;
+    allowDownload: boolean;
     displayValue: boolean;
     codeWidth: number | null;
     codeHeight: number | null;