[WC-3448]: Add datamatrix option for Barcode Generation

[samuelreichert]

Pull request type

New feature (non-breaking change which adds functionality)

---

Description

[github-actions]

AI Code Review

🔶 Changes requested — one or more medium-severity items must be addressed

---

What was reviewed

File	Change
src/components/DataMatrix.tsx	New DataMatrix renderer component with bwip-js + DOMPurify
src/components/preview/DataMatrixPreview.tsx	Studio Pro editor preview for DataMatrix format
src/config/Barcode.config.ts	New DataMatrixTypeConfig union member and barcodeConfig() branch
src/config/validation.ts	Added DataMatrix case and validateGs1DataMatrixValue()
src/utils/download-code.ts	DataMatrix filename-prefix branch
src/BarcodeGenerator.tsx	Dispatch to DataMatrixRenderer
src/BarcodeGenerator.editorPreview.tsx	Routes DataMatrix to new preview component
src/BarcodeGenerator.xml	New DataMatrix enum value + Data Matrix property group
src/ui/BarcodeGenerator.scss	.datamatrix-svg and preview image styles
typings/BarcodeGeneratorProps.d.ts	Regenerated with DataMatrix, DmShapeEnum, new props
src/__tests__/BarcodeGenerator.spec.tsx	Integration tests for DataMatrix render paths
src/config/__tests__/Barcode.config.spec.ts	Unit tests for barcodeConfig DataMatrix mapping
src/config/__tests__/validation.spec.ts	Unit tests for DataMatrix/GS1 validation
package.json	Added @bwip-js/browser and dompurify dependencies
CHANGELOG.md	User-facing entry for DataMatrix/GS1 support
openspec/changes/add-datamatrix-generation/**	OpenSpec change artifacts (design, spec, tasks)
document-viewer-web/openspec/changes/archive/…	File moves only (renames)

Skipped (out of scope): pnpm-lock.yaml, openspec/ artifact files

---

Findings

🔶 Medium — CI: "Run code quality check" and "Plan E2E matrix" are failing

File: CI (workflow run 30443193344)
Problem: Two checks are currently failing: Run code quality check and Plan E2E matrix. The lint/quality failure is particularly important — it may indicate a lint error introduced by this PR. Per the review guidelines, PRs with failing CI checks must not be approved until the failures are explained or resolved.
Fix: Investigate the failing Run code quality check job. If the failure is pre-existing or unrelated to this PR, document that in the PR description. Otherwise fix the lint/type error before merge.

---

🔶 Medium — DataMatrix margin uses codeMargin but is labelled as a separate dmSize option

File: src/config/Barcode.config.ts:83
Problem: baseConfig.margin is set to props.qrMargin for QR and props.codeMargin for everything else, including DataMatrix. DataMatrix therefore reuses codeMargin ("Bar width"), which is a 1D-barcode-specific property with a misleading label in Studio Pro. The design document called out "add dedicated dmSize/dmMargin props to avoid overloading 1D bar-width semantics" — dmSize was added but dmMargin was not, so users have no obvious way to control DataMatrix padding independently.
Fix: Either add a dmMargin XML property and branch margin on format (similar to qrMargin), or add a Studio Pro caption/description to codeMargin clarifying it also controls DataMatrix padding. Keeping the current silent reuse is technically functional but surprising to users.

---

⚠️ Low — DOMPurify used in Studio Pro editor preview (SSR environment)

File: src/components/preview/DataMatrixPreview.tsx:2
Note: DOMPurify requires a DOM environment (window, document). Editor preview components run in the Studio Pro design-time sandbox, which is not always a full browser environment and may lack these globals. The existing DataMatrix.tsx runtime component has the same import, but the preview component is the higher-risk site. Consider guarding with typeof window !== "undefined" before calling DOMPurify.sanitize, or use isomorphic-dompurify/DOMPurify.sanitize with a fallback stub so the preview degrades gracefully rather than throwing.

---

⚠️ Low — getSvgElement defined inside render, new function reference every render

File: src/components/DataMatrix.tsx:103
Note: getSvgElement is redefined on every render:

const getSvgElement = (): SVGSVGElement | null => containerRef.current?.querySelector("svg") ?? null;

This is minor (it's a tiny closure) but inconsistent with how similar helpers are handled elsewhere. Inlining it directly into the DownloadButton.onClick callback, or defining it outside the component (taking containerRef as an arg), would be cleaner.

---

⚠️ Low — SCSS .barcode-generator-datamatrix-preview-image defined outside .barcode-renderer block

File: src/ui/BarcodeGenerator.scss:112
Note: .datamatrix-svg (used in runtime) is correctly nested inside .barcode-renderer. However, .barcode-generator-datamatrix-preview-image (used in preview) is a free-standing top-level class at line 112, not scoped to the widget prefix .barcode-generator. This deviates from the BEM-like widget-prefix convention. Consider nesting it under .barcode-generator or the .barcode-renderer block for consistency.

---

Positives

• DOMPurify is used with USE_PROFILES: { svg: true, svgFilters: true } — the right profile for bwip-js SVG output, not a raw passthrough. Security handling is correct.
• bwip-js is imported via named tree-shakeable exports (datamatrix, drawingSVG, etc.), not the bundle-everything toSVG() — exactly as the design spec required.
• The discriminated union (BarcodeConfig = … | DataMatrixTypeConfig) pattern mirrors the existing QR path cleanly; dispatch in BarcodeGenerator.tsx stays a simple ternary chain.
• validateGs1DataMatrixValue is deliberately minimal (structural check only) and delegates encoding correctness to bwip-js, which is the right call given the complexity of GS1 AI rules.
• Tests cover all four encoder paths (plain square, plain rect, GS1 square, GS1 rect), config mapping, and validation edge cases; builder utilities from @mendix/widget-plugin-test-utils are used correctly.
• CHANGELOG entry is user-facing, concise, and correctly placed under [Unreleased].