chore: initial version of barcode generator

Author: gjulivan

packages/pluggableWidgets/barcode-generator-web/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@mendix/prettier-config-web-widgets");

packages/pluggableWidgets/barcode-generator-web/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+All notable changes to this widget will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2025-10-09
+
+### Added
+
+- Initial release of QR Code Generator widget
+- Generate QR codes from string input
+- Configurable QR code properties

packages/pluggableWidgets/barcode-generator-web/README.md

@@ -0,0 +1 @@
+<!-- Please see [Barcode Generator](https://docs.mendix.com/appstore/widgets/barcode-generator) in the Mendix documentation for details. -->

packages/pluggableWidgets/barcode-generator-web/e2e/BarcodeGenerator.spec.js

@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+
+test.afterEach("Cleanup session", async ({ page }) => {
+    // Because the test isolation that will open a new session for every test executed, and that exceeds Mendix's license limit of 5 sessions, so we need to force logout after each test.
+    await page.evaluate(() => window.mx.session.logout());
+});
+
+test.describe("BarcodeGenerator", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/");
+        await page.waitForLoadState("networkidle");
+    });
+
+    test("renders barcode generator widget", async ({ page }) => {
+        // TODO: Replace with actual barcode generator test when implementation is complete
+        // Example test structure for barcode generator:
+        // await expect(page.locator(".mx-name-barcodeGenerator").first()).toBeVisible();
+        // await page.locator(".mx-name-textInput").fill("Test QR Code");
+        // await expect(page.locator(".mx-name-barcodeGenerator canvas")).toBeVisible();
+
+        // Placeholder test for now
+        await expect(page.locator("body")).toBeVisible();
+    });
+});

packages/pluggableWidgets/barcode-generator-web/eslint.config.mjs

@@ -0,0 +1,3 @@
+import config from "@mendix/eslint-config-web-widgets/widget-ts.mjs";
+
+export default config;

packages/pluggableWidgets/barcode-generator-web/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@mendix/barcode-generator-web",
+    "widgetName": "BarcodeGenerator",
+    "version": "1.0.0",
+    "description": "Generate barcodes and QR codes from a string input",
+    "copyright": "© Mendix Technology BV 2025. All rights reserved.",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mendix/web-widgets.git"
+    },
+    "config": {},
+    "mxpackage": {
+        "name": "BarcodeGenerator",
+        "type": "widget",
+        "mpkName": "BarcodeGenerator.mpk"
+    },
+    "packagePath": "com.mendix.widget.web",
+    "marketplace": {
+        "minimumMXVersion": "9.6.0",
+        "appNumber": -1,
+        "appName": "Barcode Generator",
+        "reactReady": true
+    },
+    "testProject": {
+        "githubUrl": "https://github.com/mendix/testProjects",
+        "branchName": "barcode-generator-web"
+    },
+    "scripts": {
+        "build": "pluggable-widgets-tools build:web",
+        "create-gh-release": "rui-create-gh-release",
+        "create-translation": "rui-create-translation",
+        "dev": "pluggable-widgets-tools start:web",
+        "e2e": "echo \"Skipping barcode-generator-web e2e tests\"",
+        "e2edev": "run-e2e dev --with-preps",
+        "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
+        "lint": "eslint src/ package.json",
+        "publish-marketplace": "rui-publish-marketplace",
+        "release": "pluggable-widgets-tools release:web",
+        "start": "pluggable-widgets-tools start:server",
+        "test": "pluggable-widgets-tools test:unit:web:enzyme-free",
+        "update-changelog": "rui-update-changelog-widget",
+        "verify": "rui-verify-package-format"
+    },
+    "dependencies": {
+        "classnames": "^2.5.1",
+        "jsbarcode": "^3.12.1",
+        "qrcode.react": "^4.2.0"
+    },
+    "devDependencies": {
+        "@mendix/automation-utils": "workspace:*",
+        "@mendix/eslint-config-web-widgets": "workspace:*",
+        "@mendix/pluggable-widgets-tools": "*",
+        "@mendix/prettier-config-web-widgets": "workspace:*",
+        "@mendix/run-e2e": "workspace:*",
+        "@mendix/widget-plugin-component-kit": "workspace:*",
+        "@mendix/widget-plugin-platform": "workspace:*",
+        "@mendix/widget-plugin-test-utils": "workspace:*",
+        "cross-env": "^7.0.3"
+    }
+}

packages/pluggableWidgets/barcode-generator-web/playwright.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@mendix/run-e2e/playwright.config.cjs");

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.editorConfig.ts

@@ -0,0 +1,54 @@
+import { hidePropertiesIn, Properties } from "@mendix/pluggable-widgets-tools";
+import { BarcodeGeneratorPreviewProps } from "../typings/BarcodeGeneratorProps";
+
+export type Problem = {
+    property?: string; // key of the property, at which the problem exists
+    severity?: "error" | "warning" | "deprecation"; // default = "error"
+    message: string; // description of the problem
+    studioMessage?: string; // studio-specific message, defaults to message
+    url?: string; // link with more information about the problem
+    studioUrl?: string; // studio-specific link
+};
+
+export function getProperties(values: BarcodeGeneratorPreviewProps, defaultProperties: Properties): Properties {
+    if (values.codeFormat === "QRCode") {
+        hidePropertiesIn(defaultProperties, values, ["codeWidth", "codeHeight", "displayValue"]);
+    } else {
+        hidePropertiesIn(defaultProperties, values, ["qrSize"]);
+    }
+
+    if (values.codeFormat !== "Custom") {
+        hidePropertiesIn(defaultProperties, values, ["customCodeFormat"]);
+    }
+    return defaultProperties;
+}
+
+export function check(_values: BarcodeGeneratorPreviewProps): Problem[] {
+    const errors: Problem[] = [];
+
+    if (!_values.codeWidth || _values.codeWidth < 1) {
+        errors.push({
+            property: `codeWidth`,
+            severity: "error",
+            message: `The value of 'Bar width' must be at least 1.`
+        });
+    }
+
+    if (!_values.codeHeight || _values.codeHeight < 20) {
+        errors.push({
+            property: `codeHeight`,
+            severity: "error",
+            message: `The value of 'Code height' must be at least 20.`
+        });
+    }
+
+    if (!_values.qrSize || _values.qrSize < 50) {
+        errors.push({
+            property: `codeHeight`,
+            severity: "error",
+            message: `The value of 'QR size' must be at least 50.`
+        });
+    }
+
+    return errors;
+}

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

@@ -0,0 +1,13 @@
+import { ReactElement } from "react";
+import { BarcodeGeneratorPreviewProps } from "../typings/BarcodeGeneratorProps";
+import BarcodePreviewSVG from "./assets/BarcodeGeneratorPreview.svg";
+
+export function preview(_props: BarcodeGeneratorPreviewProps): ReactElement {
+    const doc = decodeURI(BarcodePreviewSVG);
+
+    return (
+        <div className="barcode-generator-widget-preview">
+            <img src={doc} alt="" />
+        </div>
+    );
+}