fix: code cleanup and update

Author: gjulivan

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

@@ -1,6 +1,6 @@
 import { StructurePreviewProps } from "@mendix/widget-plugin-platform/preview/structure-preview-api";
 import { hidePropertiesIn, hidePropertyIn, Properties } from "@mendix/pluggable-widgets-tools";
-import { BarcodeGeneratorPreviewProps } from "../typings/BarcodeGeneratorProps";
+import { BarcodeGeneratorPreviewProps, CodeFormatEnum, CustomCodeFormatEnum } from "../typings/BarcodeGeneratorProps";
 import { validateAddonValue, validateBarcodeValue } from "./config/validation";
 
 export type Problem = {
@@ -144,7 +144,7 @@ export function check(_values: BarcodeGeneratorPreviewProps): Problem[] {
     return errors.concat(valueProblems);
 }
 
-function getActiveFormat(values: BarcodeGeneratorPreviewProps): string {
+function getActiveFormat(values: BarcodeGeneratorPreviewProps): CodeFormatEnum | CustomCodeFormatEnum {
     if (values.codeFormat === "Custom") {
         return values.customCodeFormat || "CODE128";
     }

packages/pluggableWidgets/barcode-generator-web/src/BarcodeGenerator.xml

@@ -176,7 +176,7 @@
             </property>
             <property key="qrOverlay" type="boolean" required="true" defaultValue="false">
                 <caption>Overlay image</caption>
-                <description>Include an image on top the QR code</description>
+                <description>Include an image overlay on the QR code</description>
             </property>
             <property key="qrOverlaySrc" type="image" required="true">
                 <caption>Image source</caption>

packages/pluggableWidgets/barcode-generator-web/src/components/QRCode.tsx

@@ -11,7 +11,7 @@ interface QRCodeRendererProps {
 export function QRCodeRenderer({ config }: QRCodeRendererProps): ReactElement {
     const ref = useRef<SVGSVGElement>(null);
 
-    const { codeValue, downloadButton, size, margin, title, level, image } = config;
+    const { codeValue, downloadButton, size, margin, title, level, overlay } = config;
     const buttonPosition = downloadButton?.buttonPosition ?? "bottom";
 
     const button = downloadButton && (
@@ -33,7 +33,7 @@ export function QRCodeRenderer({ config }: QRCodeRendererProps): ReactElement {
                 level={level}
                 marginSize={margin}
                 title={title}
-                imageSettings={image}
+                imageSettings={overlay}
             />
             {buttonPosition === "bottom" && button}
         </div>

packages/pluggableWidgets/barcode-generator-web/src/config/Barcode.config.ts

@@ -1,4 +1,10 @@
-import { BarcodeGeneratorContainerProps, QrLevelEnum } from "../../typings/BarcodeGeneratorProps";
+import {
+    AddonFormatEnum,
+    BarcodeGeneratorContainerProps,
+    CodeFormatEnum,
+    CustomCodeFormatEnum,
+    QrLevelEnum
+} from "../../typings/BarcodeGeneratorProps";
 
 interface DownloadButtonConfig {
     caption?: string;
@@ -7,9 +13,9 @@ interface DownloadButtonConfig {
     buttonPosition: "top" | "bottom";
 }
 
-type codeType = "barcode" | "qrcode";
+type CodeType = "barcode" | "qrcode";
 
-export interface CodeBaseTypeConfig<T = codeType> extends Pick<BarcodeGeneratorContainerProps, "logLevel"> {
+export interface CodeBaseTypeConfig<T = CodeType> extends Pick<BarcodeGeneratorContainerProps, "logLevel"> {
     type: T;
     codeValue: string;
     margin: number;
@@ -20,7 +26,7 @@ export interface CodeBaseTypeConfig<T = codeType> extends Pick<BarcodeGeneratorC
 export interface BarcodeTypeConfig extends CodeBaseTypeConfig<"barcode"> {
     width: number;
     height: number;
-    format: string;
+    format: CodeFormatEnum | CustomCodeFormatEnum;
     displayValue: boolean;
 
     // Advanced barcode options
@@ -29,7 +35,7 @@ export interface BarcodeTypeConfig extends CodeBaseTypeConfig<"barcode"> {
     lastChar: string;
     enableMod43: boolean;
     addonValue: string;
-    addonFormat: string;
+    addonFormat: AddonFormatEnum | null | undefined;
     addonSpacing: number;
 }
 
@@ -38,7 +44,7 @@ export interface QRCodeTypeConfig extends CodeBaseTypeConfig<"qrcode"> {
     size: number;
     title: string;
     level: QrLevelEnum;
-    image?: {
+    overlay?: {
         src: string;
         x: number | undefined;
         y: number | undefined;
@@ -79,7 +85,7 @@ export function barcodeConfig(props: BarcodeGeneratorContainerProps): BarcodeCon
             size: props.qrSize ?? 128,
             title: props.qrTitle ?? "",
             level: props.qrLevel ?? "L",
-            image:
+            overlay:
                 props.qrOverlaySrc?.status === "available"
                     ? {
                           src: props.qrOverlaySrc.value.uri,

packages/pluggableWidgets/barcode-generator-web/src/config/validation.ts

@@ -1,11 +1,17 @@
-export type ValidationResult = {
-    valid: boolean;
-    // `message` is a plain, non-localized message shown in Studio if validation fails.
-    message?: string;
-};
+import { AddonFormatEnum, CodeFormatEnum, CustomCodeFormatEnum } from "../../typings/BarcodeGeneratorProps";
+
+export type ValidationResult =
+    | {
+          valid: true;
+      }
+    | {
+          valid: false;
+          // `message` is a plain, non-localized message shown in Studio if validation fails.
+          message: string;
+      };
 
 /** Validate barcode value for a given format. */
-export function validateBarcodeValue(format: string, value: string): ValidationResult {
+export function validateBarcodeValue(format: CustomCodeFormatEnum | CodeFormatEnum, value: string): ValidationResult {
     // If no value is present at design time, assume dynamic binding will provide it at runtime.
     if (!value) {
         return { valid: true };
@@ -135,7 +141,7 @@ export function validateBarcodeValue(format: string, value: string): ValidationR
 }
 
 /** Validate addon (EAN-5 / EAN-2) values. */
-export function validateAddonValue(addonFormat: string | null | undefined, value: string): ValidationResult {
+export function validateAddonValue(addonFormat: AddonFormatEnum | null | undefined, value: string): ValidationResult {
     if (!addonFormat || addonFormat === "None") {
         return { valid: true };
     }

packages/pluggableWidgets/barcode-generator-web/src/hooks/useRenderBarcode.ts

@@ -2,13 +2,7 @@ import { BarcodeTypeConfig } from "../config/Barcode.config";
 import { RefObject, useEffect, useRef, useState } from "react";
 import { type BarcodeRenderOptions, renderBarcode } from "../utils/barcodeRenderer-utils";
 import { validateAddonValue, validateBarcodeValue } from "../config/validation";
-import { LogLevelEnum } from "../../typings/BarcodeGeneratorProps";
-
-function printError(message: string, logLevel: LogLevelEnum) {
-    if (logLevel === "Debug") {
-        console.error(`[Barcode Generator] ${message}`);
-    }
-}
+import { printError } from "../utils/helpers";
 
 export const useRenderBarcode = (
     config: BarcodeTypeConfig
@@ -40,7 +34,7 @@ export const useRenderBarcode = (
             // Validate barcode value at runtime
             const validationResult = validateBarcodeValue(format, value);
             if (!validationResult.valid) {
-                const errorMsg = validationResult.message || "Invalid barcode value";
+                const errorMsg = validationResult.message;
                 // Log detailed error for developers
 
                 printError(
@@ -55,7 +49,7 @@ export const useRenderBarcode = (
             if (addonValue && addonFormat && addonFormat !== "None") {
                 const addonResult = validateAddonValue(addonFormat, addonValue);
                 if (!addonResult.valid) {
-                    const errorMsg = addonResult.message || "Invalid addon value";
+                    const errorMsg = addonResult.message;
                     // Log detailed error for developers
                     printError(
                         `Addon validation failed for format "${addonFormat}": ${errorMsg} \nProvided addon value: "${addonValue}"`,
@@ -108,7 +102,8 @@ export const useRenderBarcode = (
         enableMod43,
         addonValue,
         addonFormat,
-        addonSpacing
+        addonSpacing,
+        config.logLevel
     ]);
 
     return { ref, error };

packages/pluggableWidgets/barcode-generator-web/src/utils/barcodeRenderer-utils.ts

@@ -1,5 +1,6 @@
 import JsBarcode from "jsbarcode";
 import { type ForwardedRef } from "react";
+import { AddonFormatEnum } from "typings/BarcodeGeneratorProps";
 
 interface BarcodeMethodOptions {
     width?: number;
@@ -42,7 +43,7 @@ export interface BarcodeRenderOptions {
     lastChar?: string;
     mod43?: boolean;
     addonValue?: string;
-    addonFormat?: string;
+    addonFormat?: AddonFormatEnum | null | undefined;
     addonSpacing?: number;
 }
 
@@ -54,7 +55,7 @@ export const createBarcodeWithAddon = (
     value: string,
     mainFormat: string,
     addonValue: string,
-    addonFormat: string,
+    addonFormat: AddonFormatEnum,
     options: BarcodeOptions,
     addonSpacing: number
 ): void => {

packages/pluggableWidgets/barcode-generator-web/src/utils/helpers.ts

@@ -0,0 +1,7 @@
+import { LogLevelEnum } from "../../typings/BarcodeGeneratorProps";
+
+export function printError(message: string, logLevel: LogLevelEnum) {
+    if (logLevel === "Debug") {
+        console.error(`[Barcode Generator] ${message}`);
+    }
+}