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

[samuelreichert]

Pull request type

New feature (non-breaking change which adds functionality)

---

Description

[iobuhov]

LGTM

[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 Data Matrix
src/BarcodeGenerator.tsx	Dispatch to DataMatrixRenderer
src/BarcodeGenerator.xml	New DataMatrix enum value + DM property group
src/BarcodeGenerator.editorConfig.ts	Format-scoped visibility, DM size/margin validation
src/BarcodeGenerator.editorPreview.tsx	Preview routing for DataMatrix
src/config/Barcode.config.ts	DataMatrixTypeConfig + barcodeConfig() branch
src/config/validation.ts	validateBarcodeValue("DataMatrix") + validateGs1DataMatrixValue
src/utils/download-code.ts	DataMatrix filename prefix
src/ui/BarcodeGenerator.scss	.datamatrix-svg and preview image styles
typings/BarcodeGeneratorProps.d.ts	DataMatrix added to CodeFormatEnum, DmShapeEnum, new DM props
src/__tests__/BarcodeGenerator.spec.tsx	Unit tests: encoder dispatch, GS1/plain/shape/error
src/__tests__/BarcodeGenerator.editorConfig.spec.ts	New: visibility and check() tests for DM format
src/config/__tests__/Barcode.config.spec.ts	New: config-mapping tests
src/config/__tests__/validation.spec.ts	New: GS1 and plain DM validation tests
e2e/BarcodeGenerator.spec.js	Dormant E2E tests covering render/GS1/shape/download
CHANGELOG.md	Added Data Matrix + GS1 Data Matrix entry
package.json	Added @bwip-js/browser and dompurify

Skipped (out of scope): pnpm-lock.yaml, openspec/changes/ (design artefacts)

---

Findings

🔶 Medium — E2E beforeEach drops waitForMendixApp without a replacement

File: e2e/BarcodeGenerator.spec.js line 42
Problem: The previous beforeEach called waitForMendixApp(page) after page.goto. The new code removes it and navigates to /p/datamatrix bare. When the tests are activated (the dormant-notice swap from echo to run-e2e ci), Mendix widget rendering will race against the assertions — expect(symbol).toBeVisible() may time out before the runtime has bootstrapped. The E2E guidelines require waitForMendixApp in beforeEach.
Fix:

import { waitForMendixApp } from "@mendix/run-e2e/mendix-helpers";

test.beforeEach(async ({ page }) => {
    await page.goto("/p/datamatrix");
    await waitForMendixApp(page);
});

---

⚠️ Low — dmMargin is split from the "Advanced Data Matrix Settings" XML group

File: src/BarcodeGenerator.xml lines 195–198
Note: dmGs1Mode, dmShape, and dmSize are all under the <propertyGroup caption="Advanced Data Matrix Settings"> group, but dmMargin lives in the separate Display group. A developer configuring Data Matrix has to hunt across two property panels for related settings. Moving dmMargin inside "Advanced Data Matrix Settings" alongside dmSize would be consistent and match how qrMargin is now hidden when DM is active anyway.

---

⚠️ Low — QR Code hint text is stale after MAX_2D_BARCODE_STATIC_VALUE_LENGTH change

File: src/BarcodeGenerator.editorConfig.ts line 217
Note: getFormatHint still says "QR Code: any text (max 1200 chars recommended)" but the actual validation threshold for both QR and DataMatrix was unified at MAX_2D_BARCODE_STATIC_VALUE_LENGTH = 2000. The hint text shown to Studio Pro developers should reflect the real limit:

QRCode: "QR Code: any text (max 2000 chars recommended)",

---

⚠️ Low — DataMatrix SVG has no accessibility label

File: src/components/DataMatrix.tsx lines 115–127
Note: QR codes expose a qrTitle property (rendered as a <title> inside the SVG) so screen readers can announce the content. The Data Matrix renderer injects raw SVG markup via dangerouslySetInnerHTML with no equivalent title or aria-label. This isn't a blocker for this PR (the spec doesn't mention it), but a follow-up issue to add an accessible label would bring DataMatrix to parity with the QR path.

---

Positives

• dangerouslySetInnerHTML is correctly guarded with DOMPurify.sanitize using the SVG profile on both the runtime renderer and the editor preview — exactly the right approach for injecting bwip-js output.
• bwip-js is imported tree-shakeably (datamatrix, drawingSVG named exports; no toSVG() call) as the design doc required; the bundle delta note in tasks.md is a nice transparency touch.
• The DataMatrixTypeConfig discriminated union slots cleanly into the existing BarcodeConfig type without touching BarcodeTypeConfig or QRCodeTypeConfig.
• check() correctly scopes sizing validation to the active format — the old bug where QR size errors were reported on codeHeight is also fixed here (property was previously "codeHeight", now correctly "qrSize").
• Validation is layered sensibly: validateBarcodeValue handles length/charset, validateGs1DataMatrixValue handles AI-structure, and bwip-js is the final encoding authority — the two-stage approach is a good balance of early feedback vs not duplicating encoder logic.
• Unit test coverage is thorough: config mapping, GS1/plain encoder dispatch, rectangular shape, error-alert visibility, design-time property visibility, and GS1 AI syntax — each tested independently with a clean beforeEach(jest.clearAllMocks).