@cravern/bpmn-flow-designer 1.0.11 → 1.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/README.md +52 -13
  2. package/dist/dist/index.d.ts +3 -0
  3. package/dist/dist/index.d.ts.map +1 -0
  4. package/dist/dist/index.umd.d.ts +2 -0
  5. package/dist/dist/index.umd.d.ts.map +1 -0
  6. package/dist/index.js +11868 -1
  7. package/dist/index.umd.js +221 -1
  8. package/dist/src/index.d.ts +2 -1
  9. package/dist/src/index.d.ts.map +1 -1
  10. package/dist/style.css +0 -2
  11. package/dist/vite.config.d.ts.map +1 -1
  12. package/package.json +3 -2
package/README.md CHANGED
@@ -1,20 +1,59 @@
1
- <div align="center">
2
- <img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
3
- </div>
1
+ # BPMN Flow Designer
4
2
 
5
- # Run and deploy your AI Studio app
3
+ Enterprise BPMN Flow Designer - A React-based tool for designing and managing business process models.
6
4
 
7
- This contains everything you need to run your app locally.
5
+ ## Installation
8
6
 
9
- View your app in AI Studio: https://ai.studio/apps/drive/1T5RxWNtwMo7anyaqY3VRKVCDzKWZNbKZ
7
+ ```bash
8
+ npm install @cravern/bpmn-flow-designer
9
+ ```
10
10
 
11
- ## Run Locally
11
+ ## ⚠️ Important: BPMN-JS Dependency
12
12
 
13
- **Prerequisites:** Node.js
13
+ This package requires **BPMN-JS** to be loaded in your application. The component expects `BpmnJS` to be available globally.
14
14
 
15
+ ### Setup Step 1: Include BPMN-JS
15
16
 
16
- 1. Install dependencies:
17
- `npm install`
18
- 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
19
- 3. Run the app:
20
- `npm run dev`
17
+ Add these to your `index.html`:
18
+
19
+ ```html
20
+ <!-- BPMN-JS Styles -->
21
+ <link
22
+ rel="stylesheet"
23
+ href="https://unpkg.com/bpmn-js@18.1.0/dist/assets/diagram-js.css"
24
+ />
25
+ <link
26
+ rel="stylesheet"
27
+ href="https://unpkg.com/bpmn-js@18.1.0/dist/assets/bpmn-font/css/bpmn.css"
28
+ />
29
+
30
+ <!-- BPMN-JS Library -->
31
+ <script src="https://unpkg.com/bpmn-js@18.1.0/dist/bpmn-modeler.development.js"></script>
32
+ ```
33
+
34
+ ### Setup Step 2: Import and Use
35
+
36
+ ```typescript
37
+ import { BPMNFlowDesigner } from "@cravern/bpmn-flow-designer";
38
+ import "@cravern/bpmn-flow-designer/dist/style.css";
39
+
40
+ function App() {
41
+ const handleSave = (xml: string) => {
42
+ console.log("BPMN XML:", xml);
43
+ };
44
+
45
+ return <BPMNFlowDesigner title="My BPMN Designer" onSave={handleSave} />;
46
+ }
47
+ ```
48
+
49
+ ## Component Props
50
+
51
+ - **initialXml** (string): Initial BPMN 2.0 XML diagram
52
+ - **onSave** (function): Callback when user saves diagram
53
+ - **onBack** (function): Back button callback
54
+ - **title** (string): Component title
55
+ - **geminiApiKey** (string, optional): API key for AI features
56
+
57
+ ## License
58
+
59
+ MIT
package/dist/dist/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ declare function Kf(): any;
2
+ export { Kf as BPMNFlowDesigner, Kf as default };
3
+ //# sourceMappingURL=index.d.ts.map
package/dist/dist/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.js"],"names":[],"mappings":"AAy5WA,2BA8LC"}
package/dist/dist/index.umd.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=index.umd.d.ts.map
package/dist/dist/index.umd.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.umd.d.ts","sourceRoot":"","sources":["../index.umd.js"],"names":[],"mappings":""}