fix: update appNumber to -1 in marketplace configuration

Author: yordan-st

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

@@ -15,10 +15,10 @@
         "type": "widget",
         "mpkName": "QRCodeGenerator.mpk"
     },
-    "packagePath": "com.mendix.widget.custom",
+    "packagePath": "com.mendix.widget.web",
     "marketplace": {
         "minimumMXVersion": "9.6.0",
-        "appNumber": 0,
+        "appNumber": -1,
         "appName": "QR Code Generator",
         "reactReady": true
     },
@@ -43,7 +43,8 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
-        "classnames": "^2.5.1"
+        "classnames": "^2.5.1",
+        "qrcode.react": "^4.2.0"
     },
     "devDependencies": {
         "@mendix/automation-utils": "workspace:*",

packages/pluggableWidgets/qrcode-generator-web/src/QRCodeGenerator.editorConfig.ts

@@ -1,29 +1,5 @@
 import { QRCodeGeneratorPreviewProps } from "../typings/QRCodeGeneratorProps";
 
-export type Platform = "web" | "desktop";
-
-export type Properties = PropertyGroup[];
-
-type PropertyGroup = {
-    caption: string;
-    propertyGroups?: PropertyGroup[];
-    properties?: Property[];
-};
-
-type Property = {
-    key: string;
-    caption: string;
-    description?: string;
-    objectHeaders?: string[]; // used for customizing object grids
-    objects?: ObjectProperties[];
-    properties?: Properties[];
-};
-
-type ObjectProperties = {
-    properties: PropertyGroup[];
-    captions?: string[]; // used for customizing object grids
-};
-
 export type Problem = {
     property?: string; // key of the property, at which the problem exists
     severity?: "error" | "warning" | "deprecation"; // default = "error"
@@ -33,108 +9,16 @@ export type Problem = {
     studioUrl?: string; // studio-specific link
 };
 
-type BaseProps = {
-    type: "Image" | "Container" | "RowLayout" | "Text" | "DropZone" | "Selectable" | "Datasource";
-    grow?: number; // optionally sets a growth factor if used in a layout (default = 1)
-};
-
-type ImageProps = BaseProps & {
-    type: "Image";
-    document?: string; // svg image
-    data?: string; // base64 image
-    property?: object; // widget image property object from Values API
-    width?: number; // sets a fixed maximum width
-    height?: number; // sets a fixed maximum height
-};
-
-type ContainerProps = BaseProps & {
-    type: "Container" | "RowLayout";
-    children: PreviewProps[]; // any other preview element
-    borders?: boolean; // sets borders around the layout to visually group its children
-    borderRadius?: number; // integer. Can be used to create rounded borders
-    backgroundColor?: string; // HTML color, formatted #RRGGBB
-    borderWidth?: number; // sets the border width
-    padding?: number; // integer. adds padding around the container
-};
-
-type RowLayoutProps = ContainerProps & {
-    type: "RowLayout";
-    columnSize?: "fixed" | "grow"; // default is fixed
-};
-
-type TextProps = BaseProps & {
-    type: "Text";
-    content: string; // text that should be shown
-    fontSize?: number; // sets the font size
-    fontColor?: string; // HTML color, formatted #RRGGBB
-    bold?: boolean;
-    italic?: boolean;
-};
-
-type DropZoneProps = BaseProps & {
-    type: "DropZone";
-    property: object; // widgets property object from Values API
-    placeholder: string; // text to be shown inside the dropzone when empty
-    showDataSourceHeader?: boolean; // true by default. Toggles whether to show a header containing information about the datasource
-};
-
-type SelectableProps = BaseProps & {
-    type: "Selectable";
-    object: object; // object property instance from the Value API
-    child: PreviewProps; // any type of preview property to visualize the object instance
-};
+export function check(_values: QRCodeGeneratorPreviewProps): Problem[] {
+    const errors: Problem[] = [];
 
-type DatasourceProps = BaseProps & {
-    type: "Datasource";
-    property: object | null; // datasource property object from Values API
-    child?: PreviewProps; // any type of preview property component (optional)
-};
-
-export type PreviewProps =
-    | ImageProps
-    | ContainerProps
-    | RowLayoutProps
-    | TextProps
-    | DropZoneProps
-    | SelectableProps
-    | DatasourceProps;
-
-export function getProperties(
-    _values: QRCodeGeneratorPreviewProps,
-    defaultProperties: Properties /* , target: Platform*/
-): Properties {
-    // Do the values manipulation here to control the visibility of properties in Studio and Studio Pro conditionally.
-    /* Example
-    if (values.myProperty === "custom") {
-        delete defaultProperties.properties.myOtherProperty;
+    if (!_values.qrSize || _values.qrSize < 50) {
+        errors.push({
+            property: `qrSize`,
+            severity: "error",
+            message: `The value of 'QR Code Size' may not be smaller than 50px.`
+        });
     }
-    */
-    return defaultProperties;
-}
 
-// export function check(_values: QRCodeGeneratorPreviewProps): Problem[] {
-//     const errors: Problem[] = [];
-//     // Add errors to the above array to throw errors in Studio and Studio Pro.
-//     /* Example
-//     if (values.myProperty !== "custom") {
-//         errors.push({
-//             property: `myProperty`,
-//             message: `The value of 'myProperty' is different of 'custom'.`,
-//             url: "https://github.com/myrepo/mywidget"
-//         });
-//     }
-//     */
-//     return errors;
-// }
-
-// export function getPreview(values: QRCodeGeneratorPreviewProps, isDarkMode: boolean, version: number[]): PreviewProps {
-//     // Customize your pluggable widget appearance for Studio Pro.
-//     return {
-//         type: "Container",
-//         children: []
-//     }
-// }
-
-// export function getCustomCaption(values: QRCodeGeneratorPreviewProps, platform: Platform): string {
-//     return "Qrcodegeneratorweb";
-// }
+    return errors;
+}

packages/pluggableWidgets/qrcode-generator-web/src/QRCodeGenerator.tsx

@@ -1,18 +1,40 @@
-import { createElement, ReactElement } from "react";
-
+import { createElement, ReactElement, useMemo } from "react";
 import { QRCodeGeneratorContainerProps } from "../typings/QRCodeGeneratorProps";
-
+import { QRCodeSVG } from "qrcode.react"; // Changed to named import QRCodeSVG
 import "./ui/QRCodeGenerator.scss";
 
-export default function QRCodeGenerator(props: QRCodeGeneratorContainerProps): ReactElement {
-    const value = props.valueAttribute?.value ?? "No value";
+export default function QRCodeGenerator({
+    qrValue,
+    qrSize,
+    qrMargin,
+    tabIndex
+}: QRCodeGeneratorContainerProps): ReactElement {
+    // Handle Mendix data binding
+    const value = qrValue?.status === "available" ? qrValue.value : "";
+    const size = qrSize ?? 128;
+    const margin = qrMargin ?? 2;
+
+    // Memoize QR code rendering
+    const qrCode = useMemo(() => {
+        if (!value) return null;
+        return (
+            <QRCodeSVG
+                value={value}
+                size={size}
+                level="M" // Error correction level
+                marginSize={margin ?? 2}
+                aria-label={`QR code for: ${value}`}
+            />
+        );
+    }, [value, size, margin]);
 
     return (
-        <div className={props.class} style={props.style} tabIndex={props.tabIndex}>
-            <div className="qr-code-generator">
-                <p>QR Code Generator</p>
-                <p>Value: {value}</p>
-            </div>
+        <div className="qr-code-widget" tabIndex={tabIndex}>
+            {qrCode ?? (
+                <span className="text-muted">
+                    {qrValue?.status === "loading" ? "Loading..." : "No QR code to display"}
+                </span>
+            )}
         </div>
     );
 }

packages/pluggableWidgets/qrcode-generator-web/src/QRCodeGenerator.xml

@@ -8,13 +8,21 @@
     <properties>
         <propertyGroup caption="General">
             <propertyGroup caption="Data source">
-                <property key="valueAttribute" type="attribute" required="true">
+                <property key="qrValue" type="attribute" required="true">
                     <caption>Dynamic value</caption>
-                    <description>The attribute that contains the qrcodegeneratorweb value</description>
+                    <description>String to encode in the QR code</description>
                     <attributeTypes>
                         <attributeType name="String" />
                     </attributeTypes>
                 </property>
+                <property key="qrSize" type="integer" required="true" defaultValue="128">
+                    <caption>QR Code Size</caption>
+                    <description>Size of the QR code in pixels</description>
+                </property>
+                <property key="qrMargin" type="integer" required="true" defaultValue="2">
+                    <caption>QR Margin Size</caption>
+                    <description>Size of the QR margin in pixels</description>
+                </property>
             </propertyGroup>
         </propertyGroup>
     </properties>

packages/pluggableWidgets/qrcode-generator-web/src/__tests__/QRCodeGenerator.spec.tsx

@@ -4,51 +4,108 @@ import { createElement } from "react";
 
 import QRCodeGenerator from "../QRCodeGenerator";
 
+// Mock the QRCodeSVG component
+jest.mock("qrcode.react", () => ({
+    QRCodeSVG: ({ value, size, marginSize }: { value: string; size: number; marginSize: number }) => (
+        <div data-testid="qr-code" data-value={value} data-size={size} data-margin={marginSize}>
+            QR Code: {value}
+        </div>
+    )
+}));
+
 describe("QRCodeGenerator", () => {
-    it("renders the basic structure", () => {
+    it("renders QR code when value is available", () => {
+        const props = {
+            name: "qrCodeGenerator1",
+            class: "mx-qrcode-generator",
+            tabIndex: -1,
+            qrValue: {
+                value: "Hello World",
+                status: "available"
+            } as any,
+            qrSize: 128,
+            qrMargin: 8
+        };
+
+        render(<QRCodeGenerator {...props} />);
+
+        expect(screen.getByTestId("qr-code")).toBeInTheDocument();
+        expect(screen.getByTestId("qr-code")).toHaveAttribute("data-value", "Hello World");
+        expect(screen.getByTestId("qr-code")).toHaveAttribute("data-size", "128");
+    });
+
+    it("shows loading message when data is loading", () => {
+        const props = {
+            name: "qrCodeGenerator1",
+            class: "mx-qrcode-generator",
+            tabIndex: -1,
+            qrValue: {
+                value: "",
+                status: "loading"
+            } as any,
+            qrSize: 128,
+            qrMargin: 8
+        };
+
+        render(<QRCodeGenerator {...props} />);
+
+        expect(screen.getByText("Loading...")).toBeInTheDocument();
+        expect(screen.queryByTestId("qr-code")).not.toBeInTheDocument();
+    });
+
+    it("shows no data message when value is empty", () => {
         const props = {
             name: "qrCodeGenerator1",
             class: "mx-qrcode-generator",
             tabIndex: -1,
-            valueAttribute: {
-                value: "Hello World"
-            } as any
+            qrValue: {
+                value: "",
+                status: "available"
+            } as any,
+            qrSize: 128,
+            qrMargin: 8
         };
 
         render(<QRCodeGenerator {...props} />);
 
-        expect(screen.getByText("QR Code Generator")).toBeInTheDocument();
-        expect(screen.getByText("Value: Hello World")).toBeInTheDocument();
+        expect(screen.getByText("No QR code to display")).toBeInTheDocument();
+        expect(screen.queryByTestId("qr-code")).not.toBeInTheDocument();
     });
 
-    it("handles empty value", () => {
+    it("uses default size when qrSize is not provided", () => {
         const props = {
             name: "qrCodeGenerator1",
             class: "mx-qrcode-generator",
             tabIndex: -1,
-            valueAttribute: {
-                value: undefined
-            } as any
+            qrValue: {
+                value: "test",
+                status: "available"
+            } as any,
+            qrSize: 256, // Test with different size
+            qrMargin: 8
         };
 
         render(<QRCodeGenerator {...props} />);
 
-        expect(screen.getByText("Value: No value")).toBeInTheDocument();
+        expect(screen.getByTestId("qr-code")).toHaveAttribute("data-size", "256");
     });
 
-    it("applies CSS classes correctly", () => {
+    it("applies the correct CSS structure", () => {
         const props = {
             name: "qrCodeGenerator1",
             class: "mx-qrcode-generator",
             tabIndex: -1,
-            valueAttribute: {
-                value: "test"
-            } as any
+            qrValue: {
+                value: "test",
+                status: "available"
+            } as any,
+            qrSize: 128,
+            qrMargin: 8
         };
 
         const { container } = render(<QRCodeGenerator {...props} />);
 
-        expect(container.firstChild).toHaveClass("mx-qrcode-generator");
-        expect(container.querySelector(".qr-code-generator")).toBeInTheDocument();
+        expect(container.firstChild).toHaveClass("qr-code-widget");
+        expect(container.firstChild).toHaveAttribute("tabindex", "-1");
     });
 });