..

examples/bpmn-editor-classic-on-webapp/README.md

@@ -17,6 +17,14 @@
 
 # Example :: BPMN Editor (classic) on webapp
 
+This package contains a web application that features the BPMN Editor (classic) as a wrapped inside a Micro-frontend Multiplying Architecture Envelope.
+
+## Running
+
+```shell script
+pnpm start
+```
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software

examples/dmn-editor-classic-on-webapp/README.md

@@ -17,6 +17,14 @@
 
 # Example :: DMN Editor (classic) on webapp
 
+This package contains a web application that features the DMN Editor (classic) as a wrapped inside a Micro-frontend Multiplying Architecture Envelope.
+
+## Running
+
+```shell script
+pnpm start
+```
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software

examples/dmn-editor-on-webapp/README.md

@@ -17,6 +17,14 @@
 
 # Example :: DMN Editor on webapp
 
+This package contains a web application that features the DMN Editor as a wrapped inside a Micro-frontend Multiplying Architecture Envelope.
+
+## Running
+
+```shell script
+pnpm start
+```
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software

examples/dmn-editor-standalone-on-webapp/README.md

@@ -15,13 +15,13 @@
    under the License.
 -->
 
-# Example :: DMN Editor Standalone on webapp
+# Example :: DMN Editor (standalone) on webapp
 
-A series of examples on how to use the DMN Editor Standalone in different applications.
+A series of examples on how to use the DMN Editor (standalone) in different applications.
 
-- [State Control]("src/stateControl/index.ts"): Shows how to leverage the Editor API to undo/redo changes to a decision, get its contents and download an SVG of the diagram.
-- [Read Only]("src/readOnly/index.ts"): Loads the editor in "Read Only" mode, where a decision can be displayed and navigated but not changed.
-- [With Included Models]("src/withIncludedModels/index.ts"): Displays how Decisions can be imported into other Decisions as "Included Models", using the `resources` parameter from the DMN Editor.
+- [State Control]("src/stateControl/index.ts"): Shows how to leverage the Editor API to undo/redo changes to a Decision, get its contents, and download an SVG of the diagram.
+- [Read Only]("src/readOnly/index.ts"): Loads the editor in "Read Only" mode, where a decision can be displayed and explored but not changed.
+- [With Included Models]("src/withIncludedModels/index.ts"): Displays how Decisions can be imported into other Decisions as "Included Models", using the `resources` parameter of DMN Editor (standalone).
 
 ### Build
 
@@ -40,7 +40,7 @@ To start the examples application, execute the following command on the root fol
 pnpm -F @kie-tools-examples/dmn-editor-standalone-examples start
 ```
 
-Open http://localhost:9102 to see the list of files bundled by webpack, then choose an example:
+Open http://localhost:9102 to see the list of files bundled by Webpack, then choose an example:
 
 - State Control: http://localhost:9102/state_control.html
 - Read Only: http://localhost:9102/read_only.html

examples/kie-sandbox-commit-message-validation-service/README.md

@@ -29,6 +29,12 @@ Provides a simple service to check for patterns in a commit message.
 
   Enables and configures validators. The value is a list of `;` separated validators that are parameterized with anything after `:`. e.g.: `Length:5-72;IssuePrefix:kie-issues#*` will enable the Lenght validator, with min 5 and max 72 characters, and will also enable the IssuePrefix validator, with the prefix pattern being `kie-issues#*`.
 
+## Running
+
+```shell script
+pnpm start
+```
+
 ## API
 
 ### - `/validate`

examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/README.md

@@ -17,6 +17,18 @@
 
 # Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor Chrome Extension
 
+Allows seeing `.base64png` files directly in GitHub's website.
+
+## Running
+
+First, run this command on your Terminal. It will build the Chrome Extension and start an HTTP server acting as the hosting application for the Base64 Editor Envelope.
+
+```shell script
+  KIE_TOOLS_BUILD__buildExamples=true pnpm build:dev && pnpm start
+```
+
+Then, head over to `chrome://extensions` on Chrome, click "Load unpacked", and select this package's `dist` folder. The extension will be installed. If you change the code, Ctrl+C the running app in your Terminal and run the same command again. Rebuilding it will be necessary.
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software

examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/package.json

@@ -16,7 +16,7 @@
     "build": "rimraf dist && webpack",
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
     "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\"",
-    "serve-envelope": "webpack-dev-server"
+    "start": "webpack-dev-server"
   },
   "devDependencies": {
     "@kie-tools-core/chrome-extension": "workspace:*",

examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/src/contentscript.ts

@@ -32,17 +32,17 @@ const resourcesPathPrefix = process.env["WEBPACK_REPLACE__targetOrigin"];
  * @params args.editorEnvelopeLocator.mapping A map associating a file extension with the respective envelope path and resources path.
  */
 startExtension({
-  name: "KIE Tools Example :: Micro-frontends Multiplying Architecutre Base64 PNG Editor",
-  extensionIconUrl: chrome.extension.getURL("/kie_icon_rgb_fullcolor_default.svg"),
-  githubAuthTokenCookieName: "github-oauth-token-base64--png-editors",
+  name: "Apache KIE Tools Example :: Micro-frontends Multiplying Architecutre :: Base64 PNG Editor",
+  extensionIconUrl: chrome.extension.getURL("/kie-logo-rgb-fullcolor-default.svg"),
+  githubAuthTokenCookieName: "github-oauth-token-base64png-editors",
   editorEnvelopeLocator: new EditorEnvelopeLocator(window.location.origin, [
     new EnvelopeMapping({
       type: "base64png",
       filePathGlob: "**/*.base64png",
       resourcesPathPrefix: `${resourcesPathPrefix}/dist/`,
       envelopeContent: {
         type: EnvelopeContentType.PATH,
-        path: `${resourcesPathPrefix}/dist/base64png-editor-envelope.html`,
+        path: `${resourcesPathPrefix}/base64png-editor-envelope.html`,
       },
     }),
   ]),

examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/base64-png-editor-envelope.html → examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/base64png-editor-envelope.html

@@ -39,6 +39,6 @@
   <body>
     <div id="loading-screen" style="z-index: 100; position: relative"></div>
     <div id="envelope-app"></div>
-    <script src="index.js"></script>
+    <script src="base64png-editor-envelope.js"></script>
   </body>
 </html>

examples/micro-frontends-multiplying-architecture-base64png-editor-chrome-extension/static/manifest.json

@@ -1,8 +1,8 @@
 {
-  "name": "KIE Tools Example :: Base64 PNG Editor",
+  "name": "Apache KIE Tools Example :: Base64 PNG Editor",
   "version": "0.0.0",
   "manifest_version": 2,
-  "description": "Micro-frontends Multiplying Architecture Editor",
+  "description": "An example Chrome Extension to showcase a Base64 PNG (.base64png) Editor displaying files directly on GitHub's website.",
   "content_scripts": [
     {
       "run_at": "document_idle",
@@ -11,7 +11,7 @@
       "all_frames": true
     }
   ],
-  "icons": { "128": "./icon_128.png" },
+  "icons": { "128": "./kie-logo-128x128.png" },
   "web_accessible_resources": ["./*"],
   "permissions": ["https://*.github.com/*", "http://*.github.com/*"]
 }

examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/README.md

@@ -17,6 +17,19 @@
 
 # Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor VS Code Extension
 
+This package provides a VS Code Extension containing a Base64 PNG Editor, which allows editing `.base64png` files.
+
+To make it easier to create `.base64png` files and exporting them to other formats, this extension also provides two commands:
+
+1. `Base64 PNG: New from .png`
+   - Creates a new `.base64png` file from a PNG. You can right-click a PNG file to run this command.
+1. `Base64 PNG: Save as SVG`
+   - When a `.base64png` is open, you can click the little SVG icon at the top-right corner of the Editor, or run it from the command palette. A new SVG file will be created at the same directory as the `.base64png` file.
+
+## Building
+
+Run `KIE_TOOLS_BUILD__buildExamples=true pnpm build:prod`. A `.vsix` file will be on the `dist` folder. Drag it to the Extensions panel on VS Code to install it.
+
 ---
 
 Apache KIE (incubating) is an effort undergoing incubation at The Apache Software

examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/package.json

@@ -17,9 +17,8 @@
   "scripts": {
     "build": "rimraf dist && webpack",
     "build:dev": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build --env dev\"",
-    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\" \"pnpm pack\"",
-    "compile": "pnpm build --env dev",
-    "pack": "vsce package --no-dependencies -o ./dist/kie_tools_examples_base64_png_editor_vscode_extension_$npm_package_version.vsix",
+    "build:prod": "run-script-if --bool \"$(build-env examples.build)\" --then \"pnpm build\" \"pnpm build:vsix\"",
+    "build:vsix": "vsce package --allow-star-activation --no-dependencies -o ./dist/kie_tools_examples_base64png_editor_vscode_extension_$npm_package_version.vsix",
     "watch": "export WEBPACK__sourceMaps=true; WEBPACK__minimize=false; webpack --env dev"
   },
   "devDependencies": {
@@ -43,7 +42,7 @@
   "engines": {
     "vscode": "^1.75.0"
   },
-  "displayName": "KIE Tools Example :: Micro-frontends Multiplying Architecture :: Base64 PNG Editor",
+  "displayName": "Apache KIE Tools Example :: Base64 PNG Editor",
   "categories": [
     "Other"
   ],
@@ -52,23 +51,23 @@
       {
         "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
         "icon": {
-          "dark": "./static/kogito-logo-128x128.png",
-          "light": "./static/kogito-logo-128x128.png"
+          "dark": "./static/kie-logo-128x128.png",
+          "light": "./static/kie-logo-128x128.png"
         },
-        "title": "Create Base64 PNG"
+        "title": "Base64 PNG: New from .png"
       },
       {
         "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
         "icon": {
           "dark": "./static/svg-icon-dark.png",
           "light": "./static/svg-icon-light.png"
         },
-        "title": "Base64 PNG Editor :: Save preview SVG"
+        "title": "Base64 PNG: Save as SVG"
       }
     ],
     "customEditors": [
       {
-        "displayName": "KIE Tools Example :: Base64 PNG Editor",
+        "displayName": "Apache KIE Tools Example :: Base64 PNG Editor",
         "selector": [
           {
             "filenamePattern": "*.base64png"
@@ -103,11 +102,11 @@
       "commandPalette": [
         {
           "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
-          "when": "resourceLangId == png"
+          "when": "resourceExtname == .png"
         },
         {
           "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
-          "when": "resourceLangId == base64png"
+          "when": "resourceExtname == .base64png"
         }
       ],
       "editor/title": [
@@ -121,7 +120,21 @@
           "group": "navigation",
           "when": "resourceLangId == base64png"
         }
+      ],
+      "explorer/context": [
+        {
+          "command": "extension.kie.tools.examples.base64PngEditor.createBase64Png",
+          "when": "resourceLangId == png"
+        },
+        {
+          "command": "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
+          "when": "resourceLangId == base64png"
+        }
       ]
     }
-  }
+  },
+  "activationEvents": [
+    "*"
+  ],
+  "icon": "./static/kie-logo-128x128.png"
 }

examples/micro-frontends-multiplying-architecture-base64png-editor-vscode-extension/src/extension.ts

@@ -18,7 +18,7 @@
  */
 
 import * as vscode from "vscode";
-import * as KogitoVsCode from "@kie-tools-core/vscode-extension";
+import { startExtension } from "@kie-tools-core/vscode-extension";
 import * as path from "path";
 import * as fs from "fs";
 import { EditorEnvelopeLocator, EnvelopeContentType, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
@@ -30,15 +30,16 @@ export function activate(context: vscode.ExtensionContext) {
    * Starts the extension and set initial properties:
    *
    * @params args.extensionName The extension name.
-   * @params args.context The VS Code context.
+   * @params args.context The VS Code extension context.
    * @params args.viewType The name of the view command to open the Editor.
-   * @params args.getPreviewCommandId The name of the command to generate a SVG file. (it was set on the package.json)
+   * @params args.generateSvgCommandId The name of the command to generate a SVG file. (it was set on the package.json)
+   * @params args.silentlyGenerateSvgCommandId Same as above but without the toast notification.
    * @params args.editorEnvelopeLocator.targetOrigin The initial path of the envelope.
    * @params args.editorEnvelopeLocator.mapping A map associating a file extension with the respective envelope path and resources path.
    */
-  KogitoVsCode.startExtension({
-    extensionName: "kie-tools-examples.base64png-editor-vscode-extension",
-    context: context,
+  startExtension({
+    extensionName: "kie-tools-examples-base64png-editor-vscode-extension",
+    context,
     viewType: "kieToolsExampleBase64PngEditor",
     generateSvgCommandId: "extension.kie.tools.examples.base64PngEditor.getPreviewSvg",
     silentlyGenerateSvgCommandId: "",
@@ -57,9 +58,9 @@ export function activate(context: vscode.ExtensionContext) {
    */
   context.subscriptions.push(
     /**
-     * This command works on any png image. It will create a new file, it converts a PNG image to a base64png file.
+     * This command works on any png image. It will create a new file, it converts a PNG image to a `.base64png` file.
      *
-     * To use it, can click on the Kogito icon on the top right or use the VS Code command pallet.
+     * To use it, can click on the Apache KIE icon at the top-right or use the VS Code command pallet.
      */
     vscode.commands.registerCommand(
       "extension.kie.tools.examples.base64PngEditor.createBase64Png",
@@ -70,13 +71,15 @@ export function activate(context: vscode.ExtensionContext) {
         const base64AbsoluteFsPath = path.join(parsedPath.dir, base64FileName);
         fs.writeFileSync(base64AbsoluteFsPath, buffer.toString("base64"));
 
-        vscode.window.showInformationMessage("Generated the Base64 file with success!", "Open").then((selected) => {
-          if (!selected) {
-            return;
-          }
+        vscode.window
+          .showInformationMessage("Generated Base64 PNG (.base64png) file successfully.", "Open")
+          .then((selected) => {
+            if (!selected) {
+              return;
+            }
 
-          vscode.commands.executeCommand("vscode.open", vscode.Uri.file(base64AbsoluteFsPath));
-        });
+            vscode.commands.executeCommand("vscode.open", vscode.Uri.file(base64AbsoluteFsPath));
+          });
       }
     )
   );

examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditor.tsx

@@ -26,7 +26,7 @@ import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { Switch } from "@patternfly/react-core/dist/js/components/Switch";
 import { Title } from "@patternfly/react-core/dist/js/components/Title";
 import { CubesIcon } from "@patternfly/react-icons/dist/js/icons/cubes-icon";
-import { Base64PngEdit, Base64PngStateControl } from "./Base64PngStateControl";
+import { Base64PngEdit, Base64PngEditorStateControl } from "./Base64PngEditorStateControl";
 import { KogitoEditorChannelApi } from "@kie-tools-core/editor/dist/api";
 import "./Base64PngEditor.scss";
 
@@ -74,7 +74,7 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
    * Initialize the StateControl instance. When the original content is modified it's necessary to get an another instance
    * so the states aren't shared across contents.
    */
-  const stateControl = useMemo(() => new Base64PngStateControl(), [originalContent]);
+  const stateControl = useMemo(() => new Base64PngEditorStateControl(), [originalContent]);
 
   /**
    * Callback is exposed to the Channel to retrieve the current value of the Editor. It returns the value of
@@ -425,16 +425,18 @@ export const Base64PngEditor = React.forwardRef<EditorApi, Props>((props, forwar
     canvasRef.current!.width = 0;
     canvasRef.current!.height = 0;
 
-    imageRef.current!.onload = () => {
-      canvasRef.current!.width = imageRef.current!.width;
-      canvasRef.current!.height = imageRef.current!.height;
-      ctx.drawImage(imageRef.current!, 0, 0);
+    const r = imageRef.current;
+
+    r!.onload = () => {
+      canvasRef.current!.width = r!.width;
+      canvasRef.current!.height = r!.height;
+      ctx.drawImage(r!, 0, 0);
       setEditorContent(canvasRef.current!.toDataURL().split(",")[1]);
       setDisabled(false);
     };
 
     return () => {
-      imageRef.current!.onload = null;
+      r!.onload = null;
     };
   }, []);
 

examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngStateControl.ts → examples/micro-frontends-multiplying-architecture-base64png-editor/src/Base64PngEditorStateControl.ts

@@ -34,12 +34,12 @@ export interface Base64PngEdit extends WorkspaceEdit {
 }
 
 /**
- * A Base64PngStateControl extends the Kogito State Control which is a class that implements a command stack, and all
+ * A Base64PngEditorStateControl extends the default StateControl which is a class that implements a command stack, and all
  * methods necessary to do undo/redo operations or even if the editor is dirty.
  *
  * The use of this implementation is optional, you can use your own if required.
  */
-export class Base64PngStateControl extends StateControl {
+export class Base64PngEditorStateControl extends StateControl {
   /**
    * The command stack on the Kogito State Control accept strings only, this method retrieve the Base64PngEdit object.
    */