feat(barcode-generator-web): render Data Matrix via bwip-js

Adds DataMatrixRenderer as a third render path. Selects the bwip-js
encoder by GS1 mode and shape (datamatrix / gs1datamatrix /
*rectangular), renders inline SVG, and reuses the existing SVG->PNG
download pipeline. Wires the dispatch in BarcodeGenerator and the
download filename prefix for the datamatrix type.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: samuelreichert

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

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import { ReactElement } from "react";
 import { BarcodeGeneratorContainerProps } from "../typings/BarcodeGeneratorProps";
 import { BarcodeRenderer } from "./components/Barcode";
+import { DataMatrixRenderer } from "./components/DataMatrix";
 import { QRCodeRenderer } from "./components/QRCode";
 import { barcodeConfig } from "./config/Barcode.config";
 
@@ -22,7 +23,13 @@ export default function BarcodeGenerator(props: BarcodeGeneratorContainerProps):
             tabIndex={props.tabIndex}
             style={props.style}
         >
-            {config.type === "qrcode" ? <QRCodeRenderer config={config} /> : <BarcodeRenderer config={config} />}
+            {config.type === "qrcode" ? (
+                <QRCodeRenderer config={config} />
+            ) : config.type === "datamatrix" ? (
+                <DataMatrixRenderer config={config} />
+            ) : (
+                <BarcodeRenderer config={config} />
+            )}
         </div>
     );
 }

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

@@ -0,0 +1,106 @@
+import {
+    datamatrix,
+    datamatrixrectangular,
+    drawingSVG,
+    gs1datamatrix,
+    gs1datamatrixrectangular
+} from "@bwip-js/browser";
+import { ReactElement, useMemo, useRef } from "react";
+import { DownloadButton } from "./DownloadButton";
+import { DataMatrixTypeConfig } from "../config/Barcode.config";
+import { validateBarcodeValue, validateGs1DataMatrixValue } from "../config/validation";
+import { downloadCode } from "../utils/download-code";
+import { printError } from "../utils/helpers";
+
+interface DataMatrixRendererProps {
+    config: DataMatrixTypeConfig;
+}
+
+/** Selects the bwip-js encoder for the requested GS1 mode and symbol shape. */
+function encodeDataMatrix(config: DataMatrixTypeConfig): string {
+    const opts = {
+        text: config.codeValue,
+        // bwip-js scale is in module units; map the pixel size onto a reasonable scale.
+        scale: Math.max(1, Math.round(config.size / 32)),
+        paddingwidth: config.margin,
+        paddingheight: config.margin,
+        // GS1 AI syntax uses parentheses; parse must be on for the human-readable form.
+        parse: config.gs1Mode
+    } as const;
+
+    if (config.gs1Mode) {
+        return config.shape === "rectangle"
+            ? gs1datamatrixrectangular({ ...opts, bcid: "gs1datamatrixrectangular" }, drawingSVG())
+            : gs1datamatrix({ ...opts, bcid: "gs1datamatrix" }, drawingSVG());
+    }
+
+    return config.shape === "rectangle"
+        ? datamatrixrectangular({ ...opts, bcid: "datamatrixrectangular" }, drawingSVG())
+        : datamatrix({ ...opts, bcid: "datamatrix" }, drawingSVG());
+}
+
+export function DataMatrixRenderer({ config }: DataMatrixRendererProps): ReactElement {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { codeValue, downloadButton, size, gs1Mode } = config;
+    const buttonPosition = downloadButton?.buttonPosition ?? "bottom";
+
+    const { svg, error } = useMemo<{ svg: string | null; error: boolean }>(() => {
+        if (!codeValue) {
+            return { svg: null, error: false };
+        }
+
+        const baseValidation = validateBarcodeValue("DataMatrix", codeValue);
+        if (!baseValidation.valid) {
+            printError(`Validation failed for Data Matrix: ${baseValidation.message}`, config.logLevel);
+            return { svg: null, error: true };
+        }
+
+        if (gs1Mode) {
+            const gs1Validation = validateGs1DataMatrixValue(codeValue);
+            if (!gs1Validation.valid) {
+                printError(`GS1 Data Matrix validation failed: ${gs1Validation.message}`, config.logLevel);
+                return { svg: null, error: true };
+            }
+        }
+
+        try {
+            return { svg: encodeDataMatrix(config), error: false };
+        } catch (e) {
+            const message = e instanceof Error ? e.message : "Error generating Data Matrix";
+            printError(`Rendering failed: ${message} \nValue: "${codeValue}"`, config.logLevel);
+            return { svg: null, error: true };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [codeValue, size, gs1Mode, config.shape, config.margin, config.logLevel]);
+
+    if (error || !svg) {
+        return (
+            <div className="barcode-renderer">
+                {error && config.logLevel !== "None" && (
+                    <div className="alert alert-danger" role="alert">
+                        <strong>Unable to generate Data Matrix.</strong> Please check the value and format
+                        configuration.
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    const getSvgElement = (): SVGSVGElement | null => containerRef.current?.querySelector("svg") ?? null;
+
+    const button = downloadButton && (
+        <DownloadButton
+            onClick={() => downloadCode({ current: getSvgElement() }, config, downloadButton.fileName)}
+            ariaLabel={downloadButton.label}
+            caption={downloadButton.caption}
+        />
+    );
+
+    return (
+        <div className="barcode-renderer datamatrix-renderer">
+            {buttonPosition === "top" && button}
+            <div ref={containerRef} className="datamatrix-svg" dangerouslySetInnerHTML={{ __html: svg }} />
+            {buttonPosition === "bottom" && button}
+        </div>
+    );
+}

packages/pluggableWidgets/barcode-generator-web/src/utils/download-code.ts

@@ -25,6 +25,8 @@ export async function downloadCode(
         // Process overlay images for QR codes
         if (config.type === "qrcode") {
             await processQRImages(clonedSvg);
+        } else if (config.type === "datamatrix") {
+            fileNamePrefix = config.gs1Mode ? "datamatrix_gs1" : "datamatrix";
         } else {
             fileNamePrefix = `${config.type}_${config.format}`;
         }