[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 using bwip-js
src/components/preview/DataMatrixPreview.tsx	Studio Pro editor preview for DataMatrix
src/config/Barcode.config.ts	Added DataMatrixTypeConfig to the BarcodeConfig union
src/config/validation.ts	Added DataMatrix case + new validateGs1DataMatrixValue()
src/config/__tests__/Barcode.config.spec.ts	New unit tests for DataMatrix config mapping
src/config/__tests__/validation.spec.ts	New unit tests for plain + GS1 validation
src/__tests__/BarcodeGenerator.spec.tsx	Added DataMatrix integration tests
src/BarcodeGenerator.tsx	Added datamatrix dispatch branch
src/BarcodeGenerator.editorPreview.tsx	Added isDataMatrix preview branch
src/BarcodeGenerator.xml	Added DataMatrix enum value + Data Matrix property group
typings/BarcodeGeneratorProps.d.ts	Regenerated: CodeFormatEnum, DmShapeEnum, new props
src/ui/BarcodeGenerator.scss	Added .datamatrix-svg + .datamatrix-preview-image styles
src/utils/download-code.ts	Added datamatrix filename prefix branch
CHANGELOG.md	Unreleased entry for DataMatrix support
package.json	Added @bwip-js/browser ^4.11.2 dependency
openspec/changes/add-datamatrix-generation/*	OpenSpec artifacts (design, proposal, spec, tasks)
document-viewer-web/openspec/changes/archive/*	Archived document-viewer change (renames only)

Skipped (out of scope): pnpm-lock.yaml

---

Findings

🚨 High — dangerouslySetInnerHTML with unsanitized bwip-js output

File: src/components/DataMatrix.tsx line 606
Problem: The SVG string returned by encodeDataMatrix(config) — which receives config.codeValue directly from a Mendix DynamicValue — is injected via dangerouslySetInnerHTML without passing through a sanitizer. While bwip-js converts input into barcode matrix paths (not rendered text), if bwip-js ever embeds the input literal (e.g. human-readable text rows), a crafted value could inject SVG <script> or onload attributes. DOMPurify with an SVG allowlist eliminates this class of risk.
Fix:

import DOMPurify from "dompurify";

// in DataMatrixRenderer, replace the raw injection:
dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true, svgFilters: true } }) }}

Add dompurify (+ @types/dompurify) to package.json dependencies. The DataMatrixPreview.tsx version uses hardcoded sample strings so its risk is negligible, but applying the same sanitizer there is good defence-in-depth.

---

🔶 Medium — E2E test not implemented

File: openspec/changes/add-datamatrix-generation/tasks.md line 260 (task 6.2)
Problem: Task 6.2 (Playwright E2E: render + download a DataMatrix) is unchecked and marked blocked. Per repo conventions, new interactive behaviour should have E2E coverage. The blocker is a missing Studio Pro test-project page — not a code issue — but the gap should be tracked as a follow-up issue so it doesn't silently fall through.
Fix: Open a follow-up ticket / GitHub issue for task 6.2 before or immediately after merge, and link it from this PR description. This satisfies the "related PRs/issues linked" template requirement.

---

⚠️ Low — .datamatrix-preview-image class not scoped under widget prefix

File: src/ui/BarcodeGenerator.scss line 908
Note: .datamatrix-preview-image is added at the top level of the file, outside any widget-root or .barcode-renderer block, with no widget-name prefix. Per frontend guidelines, custom classes must be prefixed to avoid conflicts (.barcode-generator-datamatrix-preview-image). The .datamatrix-svg class nested inside .barcode-renderer is fine by contrast.

---

⚠️ Low — Manual useMemo dep list with suppressed exhaustive-deps lint

File: src/components/DataMatrix.tsx line 571–572
Note: The eslint-disable-next-line react-hooks/exhaustive-deps comment was needed because encodeDataMatrix(config) takes the full config object while individual fields are listed in the dep array. The current dep list is complete and correct. The fragility is that future DataMatrixTypeConfig fields used inside encodeDataMatrix won't trigger a lint warning — they'd silently be missing from deps. Consider destructuring all consumed fields at the top of the memo body and removing the disable comment, or adding a brief explanation comment of which fields are intentionally omitted (e.g. config object identity).

---

Positives

• The discriminated union + dispatch architecture (BarcodeTypeConfig | QRCodeTypeConfig | DataMatrixTypeConfig) mirrors the existing QR pattern perfectly — no new abstractions, no over-engineering.
• Named imports from @bwip-js/browser (datamatrix, drawingSVG, etc.) correctly implement tree-shaking as required by the design doc — toSVG() (which links all 100 BWIPP encoders) is explicitly avoided.
• Validation is layered correctly: cheap structural check (validateGs1DataMatrixValue) runs before the encoder, and try/catch catches bwip-js errors at render time — consistent with how 1D barcode errors are handled.
• XML property keys (dmGs1Mode, dmShape, dmSize) are all lowerCamelCase and align exactly with the regenerated BarcodeGeneratorProps.d.ts typings.
• Unit tests use @mendix/widget-plugin-test-utils builders (dynamic.available(...)) and the { virtual: true } ESM mock for bwip-js is a clean workaround for Jest's CJS transform boundary.
• CHANGELOG entry is user-facing behaviour only ("Added Data Matrix and GS1 Data Matrix generation support"), no implementation details — matches repo convention.