[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

⚠️ Approved with suggestions — low-severity items only, safe to merge

---

What was reviewed

File	Change
src/components/DataMatrix.tsx	New DataMatrix renderer using bwip-js, DOMPurify sanitization, SVG download
src/components/preview/DataMatrixPreview.tsx	Studio Pro design-time preview for Data Matrix
src/BarcodeGenerator.tsx	Dispatch updated to route config.type === "datamatrix"
src/BarcodeGenerator.xml	DataMatrix enum added, dm* property group added
src/BarcodeGenerator.editorConfig.ts	Visibility/validation extended for Data Matrix
src/BarcodeGenerator.editorPreview.tsx	Preview dispatch updated
src/config/Barcode.config.ts	DataMatrixTypeConfig added to discriminated union; getMargin extended
src/config/validation.ts	validateBarcodeValue("DataMatrix") + validateGs1DataMatrixValue added
src/utils/download-code.ts	datamatrix / datamatrix_gs1 filename prefix
src/ui/BarcodeGenerator.scss	.datamatrix-svg + .barcode-generator-datamatrix-preview-image
typings/BarcodeGeneratorProps.d.ts	Regenerated — DataMatrix, DmShapeEnum, dm* props
src/__tests__/BarcodeGenerator.spec.tsx	Data Matrix render, encoder dispatch, GS1 validation tests
src/__tests__/BarcodeGenerator.editorConfig.spec.ts	Visibility + check() tests for Data Matrix
src/config/__tests__/validation.spec.ts	validateBarcodeValue("DataMatrix") + validateGs1DataMatrixValue tests
src/config/__tests__/Barcode.config.spec.ts	barcodeConfig mapping tests for Data Matrix
e2e/BarcodeGenerator.spec.js	Playwright specs written but dormant (no test project yet)
CHANGELOG.md	Keep a Changelog entry added under [Unreleased]
package.json	@bwip-js/browser + dompurify added

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

CI check result: could not retrieve (permission not granted) — no failing checks observed from context.

---

Findings

⚠️ Low — logLevel in useMemo deps causes unnecessary SVG re-renders

File: packages/pluggableWidgets/barcode-generator-web/src/components/DataMatrix.tsx line 88
Note: logLevel appears in the useMemo dependency array, but the memo's return value — the SVG string or error boolean — doesn't depend on logLevel. Only the printError side-effect call uses it. Changing the log level at runtime will needlessly re-run the encoder.

// before
}, [codeValue, size, gs1Mode, shape, margin, logLevel]);

// after — logLevel only drives the side-effect, not the computed value
}, [codeValue, size, gs1Mode, shape, margin]);

---

⚠️ Low — DataMatrixPreview ignores dmShape, always renders a square symbol

File: packages/pluggableWidgets/barcode-generator-web/src/components/preview/DataMatrixPreview.tsx lines 21-26
Note: The preview always calls the square datamatrix/gs1datamatrix encoder, regardless of restProps.dmShape. A developer who sets Symbol shape = Rectangle in Studio Pro sees a square symbol in the editor, which may be confusing. Runtime rendering is unaffected.

Consider branching on restProps.dmShape === "rectangle" and calling datamatrixrectangular/gs1datamatrixrectangular — same pattern as DataMatrixRenderer.

---

⚠️ Low — E2E tests written but dormant; no testProjects branch yet

File: packages/pluggableWidgets/barcode-generator-web/e2e/BarcodeGenerator.spec.js line 1-36
Note: The spec is well-structured and covers the right scenarios, but package.json keeps "e2e": "echo ...", so these tests never run in CI. The comment block explains what page content is needed in mendix/testProjects. Track the barcode-generator-web test project branch as a follow-up work item so the tests are activated before the next release.

---

⚠️ Low — No unit test for the encoder throw path or for logLevel: "None" suppressing the error UI

File: packages/pluggableWidgets/barcode-generator-web/src/__tests__/BarcodeGenerator.spec.tsx line 1058
Note: The Data Matrix test block covers plain, GS1, rectangular, and GS1 validation failure — good coverage. Two gaps remain:

1. No test for when encodeDataMatrix itself throws (the try/catch at DataMatrix.tsx:81) — verify the error alert appears.
2. No test confirming logLevel: "None" suppresses the error UI — existing tests only use "Debug".

These gaps are low-risk (the paths exist in the existing barcode tests as precedent) but worth adding for symmetry.

---

Positives

• DOMPurify applied correctly — raw bwip-js SVG markup is sanitized with USE_PROFILES: { svg: true, svgFilters: true } before injection via dangerouslySetInnerHTML, both in the runtime renderer and the Studio Pro preview. This is the right approach for untrusted SVG strings.
• Clean discriminated union architecture — DataMatrixTypeConfig follows exactly the same pattern as QRCodeTypeConfig and BarcodeTypeConfig, making the dispatch in BarcodeGenerator.tsx and download-code.ts straightforward to extend.
• Format-scoped property visibility — getProperties correctly hides 1D-only props (bar sizing, display value, EAN addons, Mod43) for Data Matrix and vice versa; backed by a dedicated editorConfig.spec.ts test matrix.
• Dedicated dmMargin vs codeMargin — the design correctly separates module-unit margin (Data Matrix, QR) from pixel margin (1D barcodes), with the rationale documented in design.md and enforced by the getMargin dispatch.
• Tree-shakeable bwip-js import — named datamatrix/gs1datamatrix/drawingSVG imports instead of the monolithic toSVG(), as the design doc requires.
• Quiet zone validation — dmMargin < 1 correctly emits a "warning" (not "error") in check(), matching the spec requirement that at least 1 module unit is needed for scannability.
• GS1 validation is appropriately loose — the regex checks structural correctness ((nn)data groups) but delegates encoding validity to bwip-js, with a clear comment explaining why (bwip-js is the source of truth).

[iobuhov]

LGTM