NO-ISSUE: Make examples better reflect their domain and contain more focused code

.github/supporting-files/ci/partitions/partition1.txt

@@ -1,4 +1,5 @@
-@kie-tools-examples/sonataflow-greeting-quarkus-example
+@kie-tools-examples/sonataflow-greeting
+@kie-tools-examples/serverless-workflow-editor-standalone-on-webapp
 @kie-tools/serverless-logic-web-tools-swf-builder-image
 @kie-tools/serverless-logic-web-tools
 @kie-tools/serverless-logic-web-tools-base-builder-image

examples/README.md

@@ -0,0 +1,5 @@
+# KIE Tools :: Examples
+
+This directory contains packages that showcase features, tools, complete apps, and use-cases for packages hosted in the [packages](../packages) directory.
+
+Building packages in this directory is toggled by the `KIE_TOOLS_BUILD__buildExamples` (true/false) Environment Variable. Default is `false`.

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

@@ -0,0 +1,60 @@
+<!--
+   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.
+-->
+
+# 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.
+
+### Building the dependencies
+
+Before running this example, building its dependencies is required. Run the following command on a Terminal:
+
+```shell script
+KIE_TOOLS_BUILD__buildExamples=true pnpm -F @kie-tools-examples/bpmn-editor-classic-on-webapp^... build:dev
+```
+
+### Running
+
+```shell script
+pnpm start
+```
+
+---
+
+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

examples/base64png-editor-chrome-extension/env/index.js → examples/bpmn-editor-classic-on-webapp/env/index.js

@@ -23,10 +23,8 @@ module.exports = composeEnv([require("@kie-tools/root-env/env")], {
   vars: varsWithName({}),
   get env() {
     return {
-      exampleChromeExtension: {
-        envelope: {
-          port: 9101,
-        },
+      bpmnEditorClassicOnWebappExample: {
+        port: 7771,
       },
     };
   },

examples/bpmn-editor-classic-on-webapp/package.json

@@ -0,0 +1,37 @@
+{
+  "private": true,
+  "name": "@kie-tools-examples/bpmn-editor-classic-on-webapp",
+  "version": "0.0.0",
+  "license": "Apache-2.0",
+  "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\"",
+    "start": "webpack serve --host 0.0.0.0 --env dev"
+  },
+  "devDependencies": {
+    "@kie-tools-core/editor": "workspace:*",
+    "@kie-tools-core/envelope-bus": "workspace:*",
+    "@kie-tools-core/patternfly-base": "workspace:*",
+    "@kie-tools-core/react-hooks": "workspace:*",
+    "@kie-tools-core/webpack-base": "workspace:*",
+    "@kie-tools/kie-bc-editors": "workspace:*",
+    "@kie-tools/root-env": "workspace:*",
+    "@kie-tools/stunner-editors": "workspace:*",
+    "@kie-tools/tsconfig": "workspace:*",
+    "@patternfly/react-core": "^4.276.6",
+    "@patternfly/react-icons": "^4.93.6",
+    "@types/react": "^17.0.6",
+    "@types/react-dom": "^17.0.5",
+    "copy-webpack-plugin": "^11.0.0",
+    "process": "^0.11.10",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "rimraf": "^3.0.2",
+    "typescript": "^5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.1",
+    "webpack-merge": "^5.9.0"
+  }
+}

examples/webapp/src/Pages/KogitoEditors/BpmnPage.tsx → examples/bpmn-editor-classic-on-webapp/src/BpmnEditorClassicPage.tsx

@@ -17,16 +17,17 @@
  * under the License.
  */
 
-import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import * as React from "react";
+import { ChannelType, EnvelopeContentType } from "@kie-tools-core/editor/dist/api";
 import { EditorEnvelopeLocator, EnvelopeMapping } from "@kie-tools-core/editor/dist/api";
 import { useMemo, useState } from "react";
-import { Page } from "@patternfly/react-core/dist/js/components/Page";
 import { EmbeddedEditor, useEditorRef } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Brand } from "@patternfly/react-core/dist/js/components/Brand";
+import { Page, PageSection, PageHeader } from "@patternfly/react-core/dist/js/components/Page";
 import { Sidebar } from "./Sidebar";
 
-export function BpmnPage() {
+export function BpmnEditorClassicPage() {
   /**
    * The reference of the Editor. It allows us to access/modify the Editor properties imperatively.
    */
@@ -53,31 +54,35 @@ export function BpmnPage() {
       new EnvelopeMapping({
         type: "bpmn",
         filePathGlob: "**/*.bpmn?(2)",
-        resourcesPathPrefix: "../bpmn-editor/bpmn/",
-        envelopeContent: { type: EnvelopeContentType.PATH, path: "envelope/bpmn-editor.html" },
+        resourcesPathPrefix: "../bpmn-editor-classic/",
+        envelopeContent: { type: EnvelopeContentType.PATH, path: "bpmn-editor-classic-envelope.html" },
       }),
     ]);
   }, []);
 
   return (
-    <Page>
-      <div className={"webapp--page-main-div"}>
+    <Page
+      header={<PageHeader logo={<Brand src={"logo.png"} alt="Logo" />} />}
+      sidebar={
         <Sidebar
           editor={editor}
           editorEnvelopeLocator={editorEnvelopeLocator}
           file={file}
           setFile={setFile}
           fileExtension={"bpmn"}
-          accept={".bpmn, .bpmn2"}
+          accept={".bpmn"}
         />
+      }
+    >
+      <PageSection padding={{ default: "noPadding" }}>
         <EmbeddedEditor
           ref={editorRef}
           file={file}
           editorEnvelopeLocator={editorEnvelopeLocator}
           channelType={ChannelType.EMBEDDED}
           locale={"en"}
         />
-      </div>
+      </PageSection>
     </Page>
   );
 }

examples/webapp/src/Pages/KogitoEditors/Sidebar.tsx → examples/bpmn-editor-classic-on-webapp/src/Sidebar.tsx

@@ -20,10 +20,12 @@
 import * as React from "react";
 import { EditorEnvelopeLocator } from "@kie-tools-core/editor/dist/api";
 import { useCallback, useRef, useState } from "react";
-import { Nav, NavItem, NavList } from "@patternfly/react-core/dist/js/components/Nav";
+import { Nav, NavList } from "@patternfly/react-core/dist/js/components/Nav";
 import { TextInput } from "@patternfly/react-core/dist/js/components/TextInput";
 import { EmbeddedEditorRef, useDirtyState } from "@kie-tools-core/editor/dist/embedded";
 import { EmbeddedEditorFile } from "@kie-tools-core/editor/dist/channel";
+import { Label } from "@patternfly/react-core/dist/js/components/Label";
+import { Button, ButtonVariant } from "@patternfly/react-core/dist/js/components/Button";
 
 function extractFileExtension(fileName: string) {
   return fileName.match(/[.]/)
@@ -54,9 +56,6 @@ interface Props {
 
 /**
  * A Sidebar component to enable edit the file name, create new files, open sample and open a file.
- *
- * @param props
- * @constructor
  */
 export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExtension, accept }: Props) {
   /**
@@ -137,65 +136,53 @@ export function Sidebar({ editorEnvelopeLocator, editor, setFile, file, fileExte
   );
 
   return (
-    <div>
-      <Nav className={"webapp--page-navigation"}>
-        <NavList>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <TextInput
-                className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-text-input"}
-                value={fileName}
-                type={"text"}
-                aria-label={"Edit file name"}
-                onChange={setFileName}
-                onBlur={onChangeName}
-              />
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onNewFile}>
-                New Empty File
-              </a>
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"}>
-                Open File
-                <input
-                  accept={accept}
-                  className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-open-file pf-c-button"}
-                  type="file"
-                  aria-label="File selection"
-                  onChange={onOpenFile}
-                  ref={inputRef}
-                />
-              </a>
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onOpenSample}>
-                Open Sample
-              </a>
-            </div>
-          </NavItem>
-          <NavItem className={"webapp--page-kogito-editors-sidebar--navigation-nav-item"}>
-            <div className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-div"}>
-              <a className={"webapp--page-kogito-editors-sidebar--navigation-nav-item-a"} onClick={onDownload}>
-                Download
-              </a>
-            </div>
-          </NavItem>
-          {isDirty && (
-            <div style={{ display: "flex", alignItems: "center", padding: "20px" }}>
-              <p style={{ color: "red" }}>File Edited!</p>
-            </div>
-          )}
+    <>
+      <Nav>
+        <NavList style={{ padding: "8px" }}>
+          <TextInput
+            value={fileName}
+            type={"text"}
+            aria-label={"Edit file name"}
+            onChange={setFileName}
+            onBlur={onChangeName}
+          />
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onNewFile}>
+            New empty file
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open file
+            <input
+              accept={accept}
+              style={{
+                position: "absolute",
+                left: 0,
+                top: 0,
+                opacity: 0,
+                cursor: "pointer",
+                width: "100%",
+                zIndex: 999,
+              }}
+              type="file"
+              aria-label="File selection"
+              onChange={onOpenFile}
+              ref={inputRef}
+            />
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onOpenSample}>
+            Open Sample
+          </Button>
+          <br />
+          <Button variant={ButtonVariant.plain} onClick={onDownload}>
+            Download
+          </Button>
+          <br />
+          {isDirty && <Label color={"blue"}>File edited</Label>}
         </NavList>
+        <a ref={downloadRef} />
       </Nav>
-      <a ref={downloadRef} />
-    </div>
+    </>
   );
 }

examples/bpmn-editor-classic-on-webapp/src/index.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 "@patternfly/react-core/dist/styles/base.css";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { BpmnEditorClassicPage } from "./BpmnEditorClassicPage";
+
+ReactDOM.render(<BpmnEditorClassicPage />, document.getElementById("app"));

examples/webapp/envelope/new-dmn-editor.html → examples/bpmn-editor-classic-on-webapp/static/bpmn-editor-classic-envelope.html

@@ -40,6 +40,6 @@
   </head>
   <body>
     <div id="envelope-app"></div>
-    <script src="new-dmn-editor.js"></script>
+    <script src="bpmn-editor-classic-envelope.js"></script>
   </body>
 </html>