refactor(web-widgets): connect signature-web to workspace (#339)

Author: Illia Obukhau

.pnpmfile.cjs

@@ -1,11 +1,17 @@
 function readPackage(pkg, context) {
-    if (pkg.name === "@mendix/pluggable-widgets-tools") {
-        delete pkg.dependencies["react-native"];
-    }
-
-    if (pkg && pkg.name === "react-big-calendar") {
-        pkg.peerDependencies["react"] = "^15.3.0 || ^16.0.0 || ^17.0.0";
-        pkg.peerDependencies["react-dom"] = "^15.3.0 || ^16.0.0 || ^17.0.0";
+    if (pkg) {
+        switch (pkg.name) {
+            case "@mendix/pluggable-widgets-tools": {
+                delete pkg.dependencies["react-native"];
+                break;
+            }
+            case "react-big-calendar":
+            case "react-resize-detector": {
+                pkg.peerDependencies["react"] = "^15.3.0 || ^16.0.0 || ^17.0.0";
+                pkg.peerDependencies["react-dom"] = "^15.3.0 || ^16.0.0 || ^17.0.0";
+                break;
+            }
+        }
     }
 
     return pkg;

packages/customWidgets/signature-web/.prettierignore

@@ -0,0 +1,4 @@
+dist
+node_modules
+tests
+

packages/customWidgets/signature-web/package.json

@@ -13,38 +13,55 @@
     "branchName": "signature-web"
   },
   "license": "Apache-2.0",
+  "mxpackage": {
+    "name": "Signature",
+    "type": "widget",
+    "mpkName": "Signature.mpk"
+  },
+  "packagePath": "com.mendix.widget.custom",
   "marketplace": {
     "minimumMXVersion": "7.13.1",
+    "appName": "Signature",
     "appNumber": 107984
   },
   "scripts": {
-    "start": "utils-react-widgets start",
-    "dev": "utils-react-widgets dev",
-    "test": "npm run test:unit",
-    "test:unit": "jest --config ../../../scripts/test/jest.web.config.js",
-    "pretest:e2e": "npm run release && node ../../../scripts/test/updateAtlas.js --latest-atlas",
-    "test:e2e": "pluggable-widgets-tools test:e2e:web:cypress --no-widget-update --remove-atlas-files",
-    "test:e2e:local": "pluggable-widgets-tools test:e2e:web:cypress:local -- --config-file ../../../configs/e2e/cypress/cypress.json",
+    "build": "ts-node --project scripts/tsconfig.json scripts/build.ts development",
+    "release": "ts-node --project scripts/tsconfig.json scripts/build.ts production",
+    "format": "prettier --write .",
     "lint": "eslint --ext .jsx,.js,.ts,.tsx src/ cypress/",
-    "lint:fix": "npm run lint -- --fix",
-    "build": "utils-react-widgets build",
-    "release": "utils-react-widgets release",
-    "format": "prettier --write ."
-  },
-  "config": {
-    "mendixHost": "http://localhost:8080",
-    "developmentPort": 3000
+    "test": "pluggable-widgets-tools test:unit:web"
   },
   "devDependencies": {
-    "@mendix/custom-widgets-utils-internal": "workspace:*",
-    "@mendix/pluggable-widgets-tools": ">=9.20.0",
-    "@types/classnames": "^2.2.6",
+    "@mendix-internal/automation-utils": "workspace:*",
+    "@mendix/eslint-config-web-widgets": "workspace:*",
+    "@mendix/pluggable-widgets-tools": "^9.20.0",
+    "@mendix/prettier-config-web-widgets": "workspace:*",
+    "@types/enzyme": "^3.10.12",
+    "@types/jest": "^26.0.24",
+    "@types/node": "^18.8.3",
+    "@types/react": "^17.0.53",
+    "@types/react-dom": "^17.0.18",
     "@types/react-resize-detector": "^5.0.0",
+    "css-loader": "^6.7.3",
     "eslint": "^7.32.0",
-    "jest": "^26.6.3"
+    "jest": "^26.6.3",
+    "jest-canvas-mock": "^2.4.0",
+    "mendix-client": "^7.15.8",
+    "mini-css-extract-plugin": "^2.7.2",
+    "prettier": "^2.5.1",
+    "react": "~17.0.2",
+    "react-dom": "~17.0.2",
+    "rollup": "^2.79.1",
+    "sass-loader": "^13.2.0",
+    "to-string-loader": "^1.1.6",
+    "ts-loader": "^9.4.2",
+    "ts-node": "^9.1.1",
+    "typescript": "4.5.4",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.2",
     "react-resize-detector": "^5.2.0",
     "signature_pad": "https://github.com/Andries-Smit/signature_pad/releases/download/v3.0.0-beta.4/signature_pad.tar.gz"
   },

packages/customWidgets/signature-web/scripts/build.ts

@@ -0,0 +1,43 @@
+#!/usr/bin/env ts-node-script
+
+import { cp, mkdir, zip, exec } from "@mendix-internal/automation-utils/shell";
+import { logStep, removeDist, runWidgetSteps, WidgetStepParams } from "@mendix-internal/automation-utils/steps";
+import { dirname, join } from "node:path";
+
+const [, , env] = process.argv;
+const isProd = env === "production";
+const copyToProject = !isProd && process.env.MX_PROJECT_PATH;
+
+async function createMPK({ config }: WidgetStepParams): Promise<void> {
+    logStep("Create mpk");
+    const { paths, output } = config;
+    mkdir("-p", dirname(output.files.mpk));
+    await zip(paths.tmp, output.files.mpk);
+}
+
+async function main(): Promise<void> {
+    await runWidgetSteps({
+        packagePath: process.cwd(),
+        steps: [
+            removeDist,
+            async () => {
+                logStep("Bundling");
+                await exec(`webpack -c webpack.config.js`);
+            },
+            createMPK,
+            async ({ config }) => {
+                if (copyToProject) {
+                    logStep("Copy widget to targetProject");
+                    const dir = join(config.paths.targetProject, "widgets");
+                    mkdir("-p", dir);
+                    cp(config.output.files.mpk, dir);
+                }
+            }
+        ]
+    });
+}
+
+main().catch(err => {
+    console.error(err);
+    process.exit(1);
+});

packages/customWidgets/signature-web/scripts/tsconfig.json

@@ -0,0 +1,3 @@
+{
+    "extends": "@mendix-internal/automation-utils/tsconfig"
+}

packages/customWidgets/signature-web/src/components/Signature.tsx

@@ -30,8 +30,7 @@ export interface SignatureProps extends Dimensions {
 export type penOptions = "fountain" | "ballpoint" | "marker";
 
 export class Signature extends PureComponent<SignatureProps> {
-    // @ts-ignore
-    private canvasNode: HTMLCanvasElement;
+    private canvasNode: HTMLCanvasElement | null = null;
     private signaturePad: SignaturePad;
 
     render(): ReactNode {

packages/customWidgets/signature-web/src/components/SignatureContainer.ts

@@ -31,7 +31,7 @@ interface SignatureContainerState {
 
 export default class SignatureContainer extends Component<SignatureContainerProps, SignatureContainerState> {
     private subscriptionHandles: number[] = [];
-    private base64Uri: string;
+    private base64Uri = "";
     private formHandle?: number;
 
     readonly state = {

…web/src/components/_tests_/Alert.spec.ts …b/src/components/__tests__/Alert.spec.tspackages/customWidgets/signature-web/src/components/_tests_/Alert.spec.ts renamed to packages/customWidgets/signature-web/src/components/__tests__/Alert.spec.ts packages/customWidgets/signature-web/src/components/_tests_/Alert.spec.ts renamed to packages/customWidgets/signature-web/src/components/__tests__/Alert.spec.ts

@@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from "enzyme";
 import { createElement } from "react";
 
 import { Signature, SignatureProps } from "../Signature";
+import "jest-canvas-mock";
 
 describe("Signature", () => {
     const renderCanvas = (props: SignatureProps): ShallowWrapper<SignatureProps, any> =>