From b69d132d3a5f98ca6614d675713f7e2fab0333de Mon Sep 17 00:00:00 2001 From: Thomas Bouffard <27200110+tbouffard@users.noreply.github.com> Date: Sat, 19 Aug 2023 19:52:18 +0200 Subject: [PATCH] feat(demo): introduce a Home page for all demos (#60) It introduces the projects and list all available demos. For now, we have a single demo but this prepares the others that are coming soon. --- README.md | 4 +- packages/addons/README.md | 2 +- packages/demo/README.md | 2 + packages/demo/index.html | 51 ++++++++++++------- packages/demo/pages/path-resolver.html | 24 +++++++++ .../demo/public/assets}/github-logo.svg | 0 packages/demo/public/{ => assets}/logo.svg | 0 packages/demo/src/index.css | 48 +++++++++++++++++ .../demo/src/{style.css => path-resolver.css} | 0 .../demo/src/{index.ts => path-resolver.ts} | 5 +- packages/demo/vite.config.ts | 39 ++++++++++++++ 11 files changed, 150 insertions(+), 25 deletions(-) create mode 100644 packages/demo/pages/path-resolver.html rename {docs => packages/demo/public/assets}/github-logo.svg (100%) rename packages/demo/public/{ => assets}/logo.svg (100%) create mode 100644 packages/demo/src/index.css rename packages/demo/src/{style.css => path-resolver.css} (100%) rename packages/demo/src/{index.ts => path-resolver.ts} (98%) create mode 100644 packages/demo/vite.config.ts diff --git a/README.md b/README.md index 8cb6db9..be18079 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ Running the demo only: - Build the lib: `npm run build -w packages/addons` - Run the demo: `npm run dev -w packages/demo`. The demo is accessible at http://localhost:5173/ -Develop in the lib and live update the demo +Develop the lib and live update the demo - run `npm run dev` @@ -95,7 +95,7 @@ Create a new GitHub release by following the [GitHub help](https://help.github.c ## ⚡ Powered by -GitHub logo +GitHub logo **[GitHub Pages](https://pages.github.com/)** (demo live environment) diff --git a/packages/addons/README.md b/packages/addons/README.md index 3066b49..700c8a7 100644 --- a/packages/addons/README.md +++ b/packages/addons/README.md @@ -26,7 +26,7 @@ Limitations ### `PathResolver` -Infer paths. Currently, only infer edges/flows given a list of flow node ids. +Infer BPMN path. Currently, only infer edges/flows given a list of flow node ids. **WARNING**: this is front-end processing. It's more efficient for this type of processing to be carried out in the backend. Use it to bypass the limitations of the tools and algorithms provided in the backend. diff --git a/packages/demo/README.md b/packages/demo/README.md index 28fcdb3..98c283d 100644 --- a/packages/demo/README.md +++ b/packages/demo/README.md @@ -3,3 +3,5 @@ The demo has been initialized using [bpmn-visualization-demo-template](https://github.com/process-analytics/bpmn-visualization-demo-template/). See the main [README](../../README.md) for development setup. + +The list of features demonstrated is available in [index.html](./index.html). diff --git a/packages/demo/index.html b/packages/demo/index.html index 7957d91..8a4b136 100644 --- a/packages/demo/index.html +++ b/packages/demo/index.html @@ -1,24 +1,37 @@ - + - + - bpmn-visualization demo template - - - -
- -

PathResolver demo

-
-
-
Select or deselect BPMN flow nodes, then compute the missing flows in the path.
-
- - -
-
-
- + bv-experimental-add-ons + + + +
+ +

bv-experimental-add-ons

+
+
+ Welcome to bv-experimental-add-ons. +

+ bv-experimental-add-ons provides new experimental features for bpmn-visualization. +

+ +

+
+ Source code: + +
+ bpmn-visualization examples: ⏩ live environment +
+ +
+
+

Available demos

+ +
+ diff --git a/packages/demo/pages/path-resolver.html b/packages/demo/pages/path-resolver.html new file mode 100644 index 0000000..5deae77 --- /dev/null +++ b/packages/demo/pages/path-resolver.html @@ -0,0 +1,24 @@ + + + + + + + bv-addons PathResolver demo + + + +
+ +

PathResolver demo

+
+
+
Select or deselect BPMN flow nodes, then compute the missing flows in the path.
+
+ + +
+
+
+ + diff --git a/docs/github-logo.svg b/packages/demo/public/assets/github-logo.svg similarity index 100% rename from docs/github-logo.svg rename to packages/demo/public/assets/github-logo.svg diff --git a/packages/demo/public/logo.svg b/packages/demo/public/assets/logo.svg similarity index 100% rename from packages/demo/public/logo.svg rename to packages/demo/public/assets/logo.svg diff --git a/packages/demo/src/index.css b/packages/demo/src/index.css new file mode 100644 index 0000000..372b759 --- /dev/null +++ b/packages/demo/src/index.css @@ -0,0 +1,48 @@ +/*TODO duplicated with path-resolver.css*/ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + font-weight: 400; + line-height: 1.5; +} + +body { +/*TODO duplicated with path-resolver.css*/ + /*margin: 0;*/ + min-width: 320px; + min-height: 100vh; + color: #2c3e50; + /*display: flex;*/ + /*place-items: center;*/ + /*flex-direction: column;*/ +/* Specific */ + margin-left: 2rem; + margin-top: .5rem; +} + +/*TODO duplicated with path-resolver.css*/ +header { + display: flex; + align-items: center; + /*justify-content: space-evenly;*/ +} + +/*TODO duplicated with path-resolver.css*/ +.logo { + height: 3rem; + width: 3rem; + margin-right: .5rem; +} + +.source-code { + display: flex; + align-items: center; +} + +.gh-logo { + display: flex; + text-decoration: none; + margin-left: .5rem; +} +.gh-logo img { + width: 2rem; +} diff --git a/packages/demo/src/style.css b/packages/demo/src/path-resolver.css similarity index 100% rename from packages/demo/src/style.css rename to packages/demo/src/path-resolver.css diff --git a/packages/demo/src/index.ts b/packages/demo/src/path-resolver.ts similarity index 98% rename from packages/demo/src/index.ts rename to packages/demo/src/path-resolver.ts index f2c76d0..958b664 100644 --- a/packages/demo/src/index.ts +++ b/packages/demo/src/path-resolver.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import './style.css'; +import './path-resolver.css'; import {BpmnElement, BpmnVisualization, FitType} from 'bpmn-visualization'; import {PathResolver, ShapeUtil} from "@process-analytics/bv-experimental-add-ons"; // This is simple example of the BPMN diagram, loaded as string. The '?.raw' extension support is provided by Vite. @@ -22,7 +22,7 @@ import {PathResolver, ShapeUtil} from "@process-analytics/bv-experimental-add-on // eslint-disable-next-line n/file-extension-in-import -- Vite syntax import diagram from './diagram.bpmn?raw'; -// Instantiate BpmnVisualization, pass the container HTMLElement - present in index.html +// Instantiate BpmnVisualization, pass the container HTMLElement - present in path-resolver.html const bpmnVisualization = new BpmnVisualization({ container: 'bpmn-container', }); @@ -40,7 +40,6 @@ const registerSelectedBpmnElement = (id: string): boolean => { selectedBpmnElements.add(id); return true; } - const computedFlows: string[] = []; function computePath() { diff --git a/packages/demo/vite.config.ts b/packages/demo/vite.config.ts new file mode 100644 index 0000000..c8a4d4b --- /dev/null +++ b/packages/demo/vite.config.ts @@ -0,0 +1,39 @@ +/* +Copyright 2023 Bonitasoft S.A. + +Licensed 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 { resolve } from 'node:path'; +import { defineConfig } from 'vite'; + +export default defineConfig(() => { + return { + build: { + rollupOptions: { + input: { + // TODO compute the list of HTML pages automatically + index: resolve(__dirname, 'index.html'), + 'path-resolver': resolve(__dirname, 'pages/path-resolver.html'), + }, + output: { + manualChunks: { + // put mxgraph code in a dedicated file. + mxgraph: ['mxgraph'], + }, + }, + }, + chunkSizeWarningLimit: 838, // mxgraph + }, + }; +});