kie-issues#1493: Repurpose the “form-generation-tool” package to be t…

…he “form-code-generator” library (#2627)

.syncpackrc.json

@@ -3,8 +3,8 @@
     {
       "dependencies": ["prettier"],
       "packages": [
-        "@kie-tools/uniforms-bootstrap4-codegen",
-        "@kie-tools/uniforms-patternfly-codegen",
+        "@kie-tools/form-code-generator-bootstrap4-theme",
+        "@kie-tools/form-code-generator-patternfly-theme",
         "@kie-tools/yaml-language-server"
       ]
     },

packages/uniforms-bootstrap4-codegen/README.md → packages/form-code-generator-bootstrap4-theme/README.md

@@ -15,9 +15,39 @@
    under the License.
 -->
 
-## Uniforms Bootstrap 4 Codegen
+## Form Code Generator Bootstrap4 Theme
 
-This module contains the [Uniforms](https://uniforms.tools) theme contain to generate Bootstrap 4 forms for the `@kie-tools/form-generation-tool`.
+This package is the Bootstrap4 theme for the [form-code-generator](../form-code-generator/README.md) package.
+
+## How it works?
+
+This package generates the form code of a [Uniforms](https://uniforms.tools/) form using the Bootstrap4 style. [Uniforms](https://uniforms.tools/) is a library that autogenerates forms based on schemas and supports multiple themes. This package makes its own theme, describing the code that each field should have. After it, the form is rendered using `ReactDOMServer.renderToString` getting the form code.
+
+## Usage
+
+You can consume this package in two ways:
+
+1. The `dist/theme.ts` file exports the `bootstrap4FormCodeGeneratorTheme` which is a theme for the `form-code-generator` package. This theme implements the `FormCodeGeneratorTheme` interface, and its `generate` function uses JSON Schemas to generate the form code.
+
+2. You can create your own theme, and implement the `FormCodeGeneratorTheme` interface, and make the `generate` fucntion use another type of schema that is supported by [Uniforms](https://uniforms.tools/). To do so, you must use the `dist/uniforms/renderForm` function, which will receive a [Uniforms Bridge](https://uniforms.tools/docs/api-bridges/) and some parameters:
+
+```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
+}
+```
+
+## 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-bootstrap4-theme... build:prod
+```
 
 ---
 

packages/uniforms-bootstrap4-codegen/package.json → packages/form-code-generator-bootstrap4-theme/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kie-tools/uniforms-bootstrap4-codegen",
+  "name": "@kie-tools/form-code-generator-bootstrap4-theme",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -22,11 +22,12 @@
     "test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --silent --verbose --passWithNoTests\""
   },
   "dependencies": {
+    "@kie-tools/form-code-generator": "workspace:*",
     "lodash": "^4.17.21",
     "prettier": "^2.8.8",
     "underscore": "^1.13.1",
     "uniforms": "^3.10.2",
-    "uniforms-bridge-simple-schema-2": "^3.10.2"
+    "uniforms-bridge-json-schema": "^3.10.2"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -57,6 +58,7 @@
     "simpl-schema": "^1.12.0",
     "ts-jest": "^29.1.5",
     "typescript": "^5.5.3",
+    "uniforms-bridge-simple-schema-2": "^3.10.2",
     "webpack": "^5.94.0",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0",

packages/form-generation-tool/src/generation/tools/uniforms/bootstrap4/Bootstrap4FormGenerationTool.ts → packages/form-code-generator-bootstrap4-theme/src/theme.ts

@@ -17,58 +17,46 @@
  * under the License.
  */
 
-import unescape from "lodash/unescape";
-import { FormAssetType, FormAsset, FormStyle, FormConfig, FormGenerationTool, FormSchema } from "../../../types";
-
-import { renderForm } from "@kie-tools/uniforms-bootstrap4-codegen/dist";
+import { FormCodeGeneratorTheme, FormAsset } from "@kie-tools/form-code-generator/dist/types";
 import JSONSchemaBridge from "uniforms-bridge-json-schema";
-import { getUniformsSchema } from "../utils/UniformsSchemaUtils";
-import { inputSanitizationUtil } from "../utils/InputSanitizationUtil";
+import unescape from "lodash/unescape";
+import { renderForm } from ".";
 
 export const BOOTSTRAP4_CSS_URL = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
 export const BOOTSTRAP4_JS_URL = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js";
-
 export const JQUERY_URL = "https://code.jquery.com/jquery-3.2.1.slim.min.js";
 
-export class Bootstrap4FormConfig implements FormConfig {
-  public readonly schema: string;
-
-  constructor(formSchema: any) {
-    this.schema = JSON.stringify(formSchema);
-  }
-
-  public resources = {
-    styles: {
-      "bootstrap.min.css": BOOTSTRAP4_CSS_URL,
-    },
-    scripts: {
-      "jquery.js": JQUERY_URL,
-      "bootstrap.bundle.min.js": BOOTSTRAP4_JS_URL,
-    },
-  };
-}
-
-export class Bootstrap4FormGenerationTool implements FormGenerationTool {
-  type: string = FormStyle.BOOTSTRAP;
+export const BOOTSTRAP4_FILE_EXT = "html";
 
-  generate(inputSchema: FormSchema): FormAsset {
-    const uniformsSchema = getUniformsSchema(inputSchema.schema);
+export type Bootstrap4FileExt = typeof BOOTSTRAP4_FILE_EXT;
+export interface Bootstrap4FormAsset extends FormAsset<Bootstrap4FileExt> {}
 
+export const bootstrap4FormCodeGeneratorTheme: FormCodeGeneratorTheme<Bootstrap4FileExt, Bootstrap4FormAsset> = {
+  generate: (formSchema) => {
     const form = renderForm({
-      id: inputSchema.name,
-      sanitizedId: inputSanitizationUtil(inputSchema.name),
-      schema: new JSONSchemaBridge(uniformsSchema, () => true),
+      id: formSchema.name,
+      sanitizedId: formSchema.name,
+      schema: new JSONSchemaBridge(formSchema.schema, () => true),
       disabled: false,
       placeholder: true,
     });
     return {
-      id: inputSchema.name,
-      sanitizedId: inputSanitizationUtil(inputSchema.name),
-      assetName: `${inputSchema.name}.${FormAssetType.HTML}`,
-      sanitizedAssetName: `${inputSanitizationUtil(inputSchema.name)}.${FormAssetType.HTML}`,
-      type: FormAssetType.HTML,
+      id: formSchema.name,
+      assetName: `${formSchema.name}.${BOOTSTRAP4_FILE_EXT}`,
+      type: BOOTSTRAP4_FILE_EXT,
       content: unescape(form),
-      config: new Bootstrap4FormConfig(inputSchema.schema),
+      config: {
+        schema: JSON.stringify(formSchema.schema),
+        resources: {
+          styles: {
+            "bootstrap.min.css": BOOTSTRAP4_CSS_URL,
+          },
+          scripts: {
+            "jquery.js": JQUERY_URL,
+            "bootstrap.bundle.min.js": BOOTSTRAP4_JS_URL,
+          },
+        },
+      },
     };
-  }
-}
+  },
+};

packages/uniforms-bootstrap4-codegen/src/uniforms/rendering/RenderingUtils.tsx → packages/form-code-generator-bootstrap4-theme/src/uniforms/rendering/RenderingUtils.tsx

@@ -60,5 +60,5 @@ export const renderNestedInputFragmentWithContext = (
     })
   );
 
-  return codegenCtx.rendered.length == 1 ? codegenCtx.rendered[0] : undefined;
+  return codegenCtx.rendered.length === 1 ? codegenCtx.rendered[0] : undefined;
 };

packages/uniforms-bootstrap4-codegen/webpack.config.js → packages/form-code-generator-bootstrap4-theme/webpack.config.js

@@ -27,6 +27,7 @@ module.exports = (env, args) => [
   merge(common(env, args), {
     entry: {
       index: "./src/index.ts",
+      theme: "./src/theme.ts",
     },
     plugins: [new CopyPlugin({ patterns: [{ from: "./src/resources", to: "./resources" }] })],
     module: {

packages/uniforms-patternfly-codegen/README.md → packages/form-code-generator-patternfly-theme/README.md

@@ -15,9 +15,39 @@
    under the License.
 -->
 
-## Uniforms Patternfly Codegen
+## Form Code Generator PatternFly Theme
 
-This module contains the [Uniforms](https://uniforms.tools) theme contain to generate Patternfly forms for the `@kie-tools/form-generation-tool`.
+This package is the PatternFly theme for the [form-code-generator](../form-code-generator/README.md) package.
+
+## How it works?
+
+This package generates the form code of a [Uniforms](https://uniforms.tools/) form using PatternFly components. [Uniforms](https://uniforms.tools/) is a library that autogenerates forms based on schemas and supports multiple themes. This package makes its own theme, describing the code that each field should have. After it, the form is rendered using `ReactDOMServer.renderToString` getting the form code.
+
+## Usage
+
+You can consume this package in two ways:
+
+1. The `dist/theme.ts` file exports the `patternflyFormCodeGeneratorTheme` which is a theme for the `form-code-generator` package. This theme implements the `FormCodeGeneratorTheme` interface, and its `generate` function uses JSON Schemas to generate the form code.
+
+2. You can create your own theme, and implement the `FormCodeGeneratorTheme` interface, and make the `generate` function use another type of schema that is supported by [Uniforms](https://uniforms.tools/). To do so, you must use the `dist/uniforms/renderForm` function, which will receive a [Uniforms Bridge](https://uniforms.tools/docs/api-bridges/) and some parameters:
+
+```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
+}
+```
+
+## 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-patternfly-theme... build:prod
+```
 
 ---
 

packages/uniforms-patternfly-codegen/package.json → packages/form-code-generator-patternfly-theme/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@kie-tools/uniforms-patternfly-codegen",
+  "name": "@kie-tools/form-code-generator-patternfly-theme",
   "version": "0.0.0",
   "description": "",
   "license": "Apache-2.0",
@@ -22,10 +22,11 @@
     "test": "run-script-if --ignore-errors \"$(build-env tests.ignoreFailures)\" --bool \"$(build-env tests.run)\" --then \"jest --verbose --passWithNoTests\""
   },
   "dependencies": {
+    "@kie-tools/form-code-generator": "workspace:*",
     "lodash": "^4.17.21",
     "prettier": "^2.8.8",
     "uniforms": "^3.10.2",
-    "uniforms-bridge-simple-schema-2": "^3.10.2"
+    "uniforms-bridge-json-schema": "^3.10.2"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",
@@ -55,6 +56,7 @@
     "simpl-schema": "^1.12.0",
     "ts-jest": "^29.1.5",
     "typescript": "^5.5.3",
+    "uniforms-bridge-simple-schema-2": "^3.10.2",
     "webpack": "^5.94.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.15.1",

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

@@ -0,0 +1,53 @@
+/*
+ * 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.
+ */
+
+import { FormAsset, FormCodeGeneratorTheme } from "@kie-tools/form-code-generator/dist/types";
+import JSONSchemaBridge from "uniforms-bridge-json-schema";
+import unescape from "lodash/unescape";
+import { renderForm } from ".";
+
+export const PATTERNFLY_FILE_EXT = "tsx";
+
+export type PatternflyFileExt = typeof PATTERNFLY_FILE_EXT;
+export interface PatternflyFormAsset extends FormAsset<PatternflyFileExt> {}
+
+export const patternflyFormCodeGeneratorTheme: FormCodeGeneratorTheme<PatternflyFileExt, PatternflyFormAsset> = {
+  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,
+      content: unescape(form),
+      config: {
+        schema: JSON.stringify(formSchema.schema),
+        resources: {
+          styles: {},
+          scripts: {},
+        },
+      },
+    };
+  },
+};

packages/uniforms-patternfly-codegen/src/uniforms/rendering/RenderingUtils.tsx → packages/form-code-generator-patternfly-theme/src/uniforms/rendering/RenderingUtils.tsx

@@ -60,5 +60,5 @@ export const renderNestedInputFragmentWithContext = (
     })
   );
 
-  return codegenCtx.rendered.length == 1 ? codegenCtx.rendered[0] : undefined;
+  return codegenCtx.rendered.length === 1 ? codegenCtx.rendered[0] : undefined;
 };

packages/uniforms-patternfly-codegen/webpack.config.js → packages/form-code-generator-patternfly-theme/webpack.config.js

@@ -26,6 +26,7 @@ module.exports = (env) => [
   merge(common(env), {
     entry: {
       index: "./src/index.ts",
+      theme: "./src/theme.ts",
     },
     plugins: [new CopyPlugin({ patterns: [{ from: "./src/resources", to: "./resources" }] })],
     output: {