feat(barcode-generator-web): add Data Matrix editor preview

Renders a representative Data Matrix glyph in the Studio Pro page
editor when the Data Matrix format is selected.

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

Author: samuelreichert

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

@@ -4,6 +4,7 @@ import { parseStyle } from "@mendix/widget-plugin-platform/preview/parse-style";
 import { BarcodeGeneratorPreviewProps } from "../typings/BarcodeGeneratorProps";
 import { DownloadIcon } from "./components/icons/DownloadIcon";
 import { BarcodePreview } from "./components/preview/BarcodePreview";
+import { DataMatrixPreview } from "./components/preview/DataMatrixPreview";
 import { QRCodePreview } from "./components/preview/QRCodePreview";
 
 const defaultDownloadCaption = "Download";
@@ -23,6 +24,7 @@ function PreviewDownloadButton(props: BarcodeGeneratorPreviewProps): ReactElemen
 export function preview(props: BarcodeGeneratorPreviewProps): ReactElement {
     const styles = parseStyle(props.style);
     const isQrCode = props.codeFormat === "QRCode";
+    const isDataMatrix = props.codeFormat === "DataMatrix";
     const downloadButton = <PreviewDownloadButton {...props} />;
 
     return (
@@ -34,6 +36,8 @@ export function preview(props: BarcodeGeneratorPreviewProps): ReactElement {
         >
             {isQrCode ? (
                 <QRCodePreview {...props} downloadButton={downloadButton} />
+            ) : isDataMatrix ? (
+                <DataMatrixPreview {...props} downloadButton={downloadButton} />
             ) : (
                 <BarcodePreview {...props} downloadButton={downloadButton} />
             )}

packages/pluggableWidgets/barcode-generator-web/src/components/preview/DataMatrixPreview.tsx

@@ -0,0 +1,45 @@
+import { datamatrix, drawingSVG, gs1datamatrix } from "@bwip-js/browser";
+import { ReactElement, useMemo } from "react";
+import { BarcodeGeneratorPreviewProps } from "../../../typings/BarcodeGeneratorProps";
+
+interface DataMatrixPreviewProps extends BarcodeGeneratorPreviewProps {
+    downloadButton: ReactElement | null;
+}
+
+const SAMPLE_PLAIN = "DATA MATRIX";
+const SAMPLE_GS1 = "(01)09501101020917(17)261231(10)ABC123";
+
+export function DataMatrixPreview(props: DataMatrixPreviewProps): ReactElement {
+    const { downloadButton, ...restProps } = props;
+    const size = restProps.dmSize ?? 128;
+    const displaySize = Math.min(size, 200); // Clamped to 200px for preview
+    const gs1Mode = restProps.dmGs1Mode === true;
+
+    const svg = useMemo<string | null>(() => {
+        try {
+            return gs1Mode
+                ? gs1datamatrix({ bcid: "gs1datamatrix", text: SAMPLE_GS1, scale: 3, parse: true }, drawingSVG())
+                : datamatrix({ bcid: "datamatrix", text: SAMPLE_PLAIN, scale: 3 }, drawingSVG());
+        } catch {
+            return null;
+        }
+    }, [gs1Mode]);
+
+    return (
+        <div className="barcode-renderer datamatrix-renderer">
+            {restProps.buttonPosition === "top" && downloadButton}
+            {svg ? (
+                <div
+                    className="datamatrix-preview-image"
+                    style={{ width: displaySize, height: displaySize }}
+                    dangerouslySetInnerHTML={{ __html: svg }}
+                />
+            ) : (
+                <div className="alert alert-danger" role="alert">
+                    <strong>Data Matrix preview unavailable</strong>
+                </div>
+            )}
+            {restProps.buttonPosition === "bottom" && downloadButton}
+        </div>
+    );
+}