kie-issues#1498: Add "Generate form code for human interactions" command in the BPMN VS Code extension

packages/bpmn-vscode-extension/package.json

@@ -30,6 +30,7 @@
     "@kie-tools-core/i18n": "workspace:*",
     "@kie-tools-core/patternfly-base": "workspace:*",
     "@kie-tools-core/vscode-extension": "workspace:*",
+    "@kie-tools/form-code-generator-vscode-command": "workspace:*",
     "@kie-tools/kie-bc-editors": "workspace:*"
   },
   "devDependencies": {
@@ -65,11 +66,15 @@
           "dark": "./static/svg-icon-dark.png",
           "light": "./static/svg-icon-light.png"
         },
-        "title": "Get BPMN Editor Preview SVG"
+        "title": "BPMN Editor: Get preview SVG"
       },
       {
         "command": "extension.kogito.silentlyGenerateSvgBpmn",
-        "title": "Generate SVG without any notification"
+        "title": "BPMN Editor: Generate SVG without any notification"
+      },
+      {
+        "command": "extension.apache.kie.bpmnEditor.generateFormCode",
+        "title": "BPMN Editor: Generate form code for human interactions from jBPM project"
       }
     ],
     "configuration": {
@@ -93,7 +98,7 @@
     },
     "customEditors": [
       {
-        "displayName": "BPMN Editor",
+        "displayName": "Apache KIE BPMN Editor",
         "selector": [
           {
             "filenamePattern": "*.{bpmn,bpmn2}"

packages/bpmn-vscode-extension/src/extension/extension.ts

@@ -23,6 +23,7 @@ import { I18n } from "@kie-tools-core/i18n/dist/core";
 import { VsCodeBackendProxy } from "@kie-tools-core/backend/dist/vscode";
 import * as KogitoVsCode from "@kie-tools-core/vscode-extension";
 import * as vscode from "vscode";
+import { generateFormsCommand } from "@kie-tools/form-code-generator-vscode-command/dist/generateFormCodeCommand";
 
 let backendProxy: VsCodeBackendProxy;
 
@@ -49,6 +50,12 @@ export function activate(context: vscode.ExtensionContext) {
     backendProxy: backendProxy,
   });
 
+  context.subscriptions.push(
+    vscode.commands.registerCommand("extension.apache.kie.bpmnEditor.generateFormCode", async (args: any) =>
+      generateFormsCommand()
+    )
+  );
+
   KogitoVsCode.VsCodeRecommendation.showExtendedServicesRecommendation(context);
 
   console.info("Extension is successfully setup.");

packages/form-code-generator-bootstrap4-theme/README.md

@@ -33,11 +33,11 @@ You can consume this package in two ways:
 
 ```ts
 {
-  id: string;             // The form id
-  sanitizedId: string;    // The form id, any # is replaced by _
-  disabled?: boolean;     // Enable/disable form (read only)
-  placeholder?: boolean;  // Enable/disable placeholders
-  schema: Bridge;         // A Uniforms Bridge instance
+  id: string;                            // The form id
+  idWithoutInvalidTsVarChars: string;    // The form id, any # is replaced by _
+  disabled?: boolean;                    // Enable/disable form (read only)
+  placeholder?: boolean;                 // Enable/disable placeholders
+  schema: Bridge;                        // A Uniforms Bridge instance
 }
 ```
 

packages/form-code-generator-bootstrap4-theme/src/theme.ts

@@ -35,15 +35,14 @@ export const bootstrap4FormCodeGeneratorTheme: FormCodeGeneratorTheme<Bootstrap4
   generate: (formSchema) => {
     const form = renderForm({
       id: formSchema.name,
-      sanitizedId: formSchema.name,
       schema: new JSONSchemaBridge(formSchema.schema, () => true),
       disabled: false,
       placeholder: true,
     });
     return {
-      id: formSchema.name,
-      assetName: `${formSchema.name}.${BOOTSTRAP4_FILE_EXT}`,
-      type: BOOTSTRAP4_FILE_EXT,
+      name: formSchema.name,
+      fileName: `${formSchema.name}.${BOOTSTRAP4_FILE_EXT}`,
+      fileExt: BOOTSTRAP4_FILE_EXT,
       content: unescape(form),
       config: {
         schema: JSON.stringify(formSchema.schema),

packages/form-code-generator-bootstrap4-theme/src/uniforms/renderForm.tsx

@@ -25,7 +25,7 @@ import unescape from "lodash/unescape";
 
 interface Args {
   id: string;
-  sanitizedId: string;
+  idWithoutInvalidTsVarChars?: string;
   disabled?: boolean;
   placeholder?: boolean;
   schema: Bridge;

packages/form-code-generator-patternfly-theme/README.md

@@ -33,11 +33,11 @@ You can consume this package in two ways:
 
 ```ts
 {
-  id: string;             // The form id
-  sanitizedId: string;    // The form id, any # is replaced by _
-  disabled?: boolean;     // Enable/disable form (read only)
-  placeholder?: boolean;  // Enable/disable placeholders
-  schema: Bridge;         // A Uniforms Bridge instance
+  id: string;                            // The form id
+  idWithoutInvalidTsVarChars: string;    // The form id, any # is replaced by _
+  disabled?: boolean;                    // Enable/disable form (read only)
+  placeholder?: boolean;                 // Enable/disable placeholders
+  schema: Bridge;                        // A Uniforms Bridge instance
 }
 ```
 

packages/form-code-generator-patternfly-theme/src/theme.ts

@@ -31,15 +31,14 @@ export const patternflyFormCodeGeneratorTheme: FormCodeGeneratorTheme<Patternfly
   generate: (formSchema) => {
     const form = renderForm({
       id: formSchema.name,
-      sanitizedId: formSchema.name,
       schema: new JSONSchemaBridge(formSchema.schema, () => true),
       disabled: false,
       placeholder: true,
     });
     return {
-      id: formSchema.name,
-      assetName: `${formSchema.name}.${PATTERNFLY_FILE_EXT}`,
-      type: PATTERNFLY_FILE_EXT,
+      name: formSchema.name,
+      fileName: `${formSchema.name}.${PATTERNFLY_FILE_EXT}`,
+      fileExt: PATTERNFLY_FILE_EXT,
       content: unescape(form),
       config: {
         schema: JSON.stringify(formSchema.schema),

packages/form-code-generator-patternfly-theme/src/uniforms/AutoForm.tsx

@@ -35,7 +35,7 @@ import { getStaticCodeBlock } from "./staticCode/staticCodeBlocks";
 
 export type AutoFormProps = {
   id: string;
-  sanitizedId: string;
+  idWithoutInvalidTsVarChars?: string;
   disabled?: boolean;
   placeholder?: boolean;
   schema: Bridge;
@@ -54,7 +54,8 @@ const AutoForm: React.FC<AutoFormProps> = (props) => {
     staticCodeArray = union(staticCodeArray, input.requiredCode);
   });
 
-  const formName = `Form${props.sanitizedId ? `${NS_SEPARATOR}${props.sanitizedId}` : ""}`;
+  const formId = props.idWithoutInvalidTsVarChars ?? props.id;
+  const formName = `Form${formId ? `${NS_SEPARATOR}${formId}` : ""}`;
   const hooks = inputs.map((input) => input.stateCode).join("\n");
   const elements = inputs.map((input) => input.jsxCode).join("\n");
   const staticCodeStr: string = staticCodeArray.map((id) => JSON.stringify(getStaticCodeBlock(id))).join("\n");

packages/form-code-generator-patternfly-theme/src/uniforms/renderForm.tsx

@@ -25,7 +25,7 @@ import unescape from "lodash/unescape";
 
 interface Args {
   id: string;
-  sanitizedId: string;
+  idWithoutInvalidTsVarChars?: string;
   disabled?: boolean;
   placeholder?: boolean;
   schema: Bridge;

packages/form-code-generator-patternfly-theme/tests/AutoForm.test.tsx

@@ -76,7 +76,7 @@ const schema = {
 
 const props: AutoFormProps = {
   id: "HRInterview",
-  sanitizedId: "HRInterview",
+  idWithoutInvalidTsVarChars: "HRInterview",
   schema: createSchema(schema),
   disabled: false,
   placeholder: true,

packages/form-code-generator-vscode-command/README.md

@@ -0,0 +1,64 @@
+<!--
+   Licensed to the Apache Software Foundation (ASF) under one
+   or more contributor license agreements.  See the NOTICE file
+   distributed with this work for additional information
+   regarding copyright ownership.  The ASF licenses this file
+   to you under the Apache License, Version 2.0 (the
+   "License"); you may not use this file except in compliance
+   with the License.  You may obtain a copy of the License at
+     http://www.apache.org/licenses/LICENSE-2.0
+   Unless required by applicable law or agreed to in writing,
+   software distributed under the License is distributed on an
+   "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+   KIND, either express or implied.  See the License for the
+   specific language governing permissions and limitations
+   under the License.
+-->
+
+## Form Code Generator VS Code command
+
+This package is a VS Code command for generating form code from jBPM projects.
+
+## How it works?
+
+The command provides a user-friendly interface for generating form code from jBPM projects. It interacts with the file system getting the jBPM JSON Schemas that are generated during compile time, and feeding them to the "form-code-generator" that will generate the form code using one of two themes: Bootstrap4 or Patternfly.
+
+## Usage
+
+The command name will change depending on the host extension, but it should be available in the command palette. After starting the command, the user will be prompted with a few questions, which can be represented using the following diagram:
+
+![VS Code command diagram](./docs/vscode-command-diagram.png?raw=true "VS Code command diagram")
+
+## Build
+
+In order to build the library you must run the following command in the root folder of the repository:
+
+```shell script
+pnpm -F @kie-tools/form-code-generator-vscode-command... build:prod
+```
+
+---
+
+Apache KIE (incubating) is an effort undergoing incubation at The Apache Software
+Foundation (ASF), sponsored by the name of Apache Incubator. Incubation is
+required of all newly accepted projects until a further review indicates that
+the infrastructure, communications, and decision making process have stabilized
+in a manner consistent with other successful ASF projects. While incubation
+status is not necessarily a reflection of the completeness or stability of the
+code, it does indicate that the project has yet to be fully endorsed by the ASF.
+
+Some of the incubating project’s releases may not be fully compliant with ASF
+policy. For example, releases may have incomplete or un-reviewed licensing
+conditions. What follows is a list of known issues the project is currently
+aware of (note that this list, by definition, is likely to be incomplete):
+
+- Hibernate, an LGPL project, is being used. Hibernate is in the process of
+  relicensing to ASL v2
+- Some files, particularly test files, and those not supporting comments, may
+  be missing the ASF Licensing Header
+
+If you are planning to incorporate this work into your product/project, please
+be aware that you will need to conduct a thorough licensing review to determine
+the overall implications of including this work. For the current status of this
+project through the Apache Incubator visit:
+https://incubator.apache.org/projects/kie.html

packages/form-code-generator-vscode-command/env/index.js

@@ -0,0 +1,27 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const { varsWithName, composeEnv } = require("@kie-tools-scripts/build-env");
+
+module.exports = composeEnv([require("@kie-tools/root-env/env")], {
+  vars: varsWithName({}),
+  get env() {
+    return {};
+  },
+});

packages/form-code-generator-vscode-command/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@kie-tools/form-code-generator-vscode-command",
+  "version": "0.0.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "keywords": [],
+  "homepage": "https://github.com/apache/incubator-kie-tools",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/apache/incubator-kie-tools.git"
+  },
+  "bugs": {
+    "url": "https://github.com/apache/incubator-kie-tools/issues"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:dev": "rimraf dist && tsc",
+    "build:prod": "pnpm lint && rimraf dist && tsc",
+    "lint": "run-script-if --bool \"$(build-env linters.run)\" --then \"kie-tools--eslint ./src\""
+  },
+  "dependencies": {
+    "@kie-tools/form-code-generator": "workspace:*",
+    "@kie-tools/form-code-generator-bootstrap4-theme": "workspace:*",
+    "@kie-tools/form-code-generator-patternfly-theme": "workspace:*",
+    "@kie-tools/jbpm-form-code-generator-themes": "workspace:*"
+  },
+  "devDependencies": {
+    "@kie-tools/eslint": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@types/vscode": "1.67.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3"
+  }
+}