@cravern/bpmn-flow-designer 1.0.21 → 1.0.22

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 (7) hide show
  1. package/README.md +149 -20
  2. package/dist/bpmn-flow-designer.css +1 -0
  3. package/dist/index.js +1194 -11511
  4. package/dist/index.umd.js +216 -122
  5. package/package.json +28 -49
  6. package/dist/index.d.ts +0 -6
  7. package/dist/style.css +0 -1
package/README.md CHANGED
@@ -1,20 +1,31 @@
1
1
  # BPMN Flow Designer
2
2
 
3
- Enterprise BPMN Flow Designer - A React-based tool for designing and managing business process models.
3
+ A powerful React component for designing and editing BPMN (Business Process Model and Notation) workflows with AI-powered diagram generation capabilities.
4
+
5
+ ## Features
6
+
7
+ - 🎨 **Visual BPMN Editor**: Drag-and-drop interface for creating BPMN diagrams
8
+ - 🤖 **AI-Powered Generation**: Generate BPMN diagrams from natural language descriptions using Google's Gemini API
9
+ - 📥 **XML Import/Export**: Import existing BPMN XML and export your designs
10
+ - 🎯 **Component Palette**: Built-in components (Start Event, Tasks, Gateways, End Events)
11
+ - 💅 **Styled UI**: Modern, responsive interface with Tailwind CSS
12
+ - 🔧 **Fully Typed**: Complete TypeScript support with type definitions
4
13
 
5
14
  ## Installation
6
15
 
7
16
  ```bash
8
- npm install @cravern/bpmn-flow-designer
17
+ npm install bpmn-flow-designer
9
18
  ```
10
19
 
11
- ## ⚠️ Important: BPMN-JS Dependency
20
+ ## Prerequisites
12
21
 
13
- This package requires **BPMN-JS** to be loaded in your application. The component expects `BpmnJS` to be available globally.
22
+ You need to have the following peer dependencies installed:
14
23
 
15
- ### Setup Step 1: Include BPMN-JS
24
+ ```bash
25
+ npm install react react-dom tailwindcss
26
+ ```
16
27
 
17
- Add these to your `index.html`:
28
+ You'll also need to load BPMN-JS library. Add this to your HTML `<head>`:
18
29
 
19
30
  ```html
20
31
  <!-- BPMN-JS Styles -->
@@ -31,29 +42,147 @@ Add these to your `index.html`:
31
42
  <script src="https://unpkg.com/bpmn-js@18.1.0/dist/bpmn-modeler.development.js"></script>
32
43
  ```
33
44
 
34
- ### Setup Step 2: Import and Use
45
+ ## Usage
35
46
 
36
- ```typescript
37
- import { BPMNFlowDesigner } from "@cravern/bpmn-flow-designer";
38
- import "@cravern/bpmn-flow-designer/dist/style.css";
47
+ ### Basic Example
48
+
49
+ ```tsx
50
+ import React from "react";
51
+ import { BpmnDesigner } from "bpmn-flow-designer";
52
+ import "bpmn-flow-designer/dist/style.css";
39
53
 
40
54
  function App() {
41
- const handleSave = (xml: string) => {
42
- console.log("BPMN XML:", xml);
43
- };
55
+ return (
56
+ <BpmnDesigner
57
+ title="My Workflow"
58
+ onSave={(xml) => {
59
+ console.log("BPMN XML:", xml);
60
+ }}
61
+ />
62
+ );
63
+ }
64
+
65
+ export default App;
66
+ ```
67
+
68
+ ### With Custom Initial XML
69
+
70
+ ```tsx
71
+ import { BpmnDesigner } from "bpmn-flow-designer";
72
+
73
+ const customXml = `<?xml version="1.0" encoding="UTF-8"?>
74
+ <bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL">
75
+ <!-- Your custom BPMN XML here -->
76
+ </bpmn:definitions>`;
44
77
 
45
- return <BPMNFlowDesigner title="My BPMN Designer" onSave={handleSave} />;
78
+ export default function App() {
79
+ return (
80
+ <BpmnDesigner
81
+ initialXml={customXml}
82
+ title="Custom Workflow"
83
+ onSave={(xml) => console.log(xml)}
84
+ />
85
+ );
46
86
  }
47
87
  ```
48
88
 
49
- ## Component Props
89
+ ## Props
90
+
91
+ ### BpmnDesignerProps
92
+
93
+ ```typescript
94
+ interface BpmnDesignerProps {
95
+ /**
96
+ * Initial BPMN XML to load into the editor
97
+ * @default Default start event only
98
+ */
99
+ initialXml?: string;
100
+
101
+ /**
102
+ * Callback function triggered when the user exports/saves the diagram
103
+ * @param xml - The exported BPMN XML string
104
+ */
105
+ onSave?: (xml: string) => void;
106
+
107
+ /**
108
+ * Title displayed in the header
109
+ * @default "Flow Designer"
110
+ */
111
+ title?: string;
112
+ }
113
+ ```
114
+
115
+ ## AI Generation Features
116
+
117
+ The component includes AI-powered BPMN generation using Google's Gemini API. To enable this feature:
118
+
119
+ 1. Set up a Gemini API key
120
+ 2. Create a `.env` file in your project:
121
+
122
+ ```env
123
+ VITE_GEMINI_API_KEY=your_api_key_here
124
+ ```
125
+
126
+ 3. The AI Architect section will allow you to describe workflows in natural language and automatically generate BPMN diagrams
50
127
 
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
128
+ ## Styling
129
+
130
+ The component uses Tailwind CSS for styling. Make sure your project has Tailwind CSS configured. The package exports all necessary styles via the CSS file:
131
+
132
+ ```tsx
133
+ import "bpmn-flow-designer/dist/style.css";
134
+ ```
135
+
136
+ Ensure Tailwind CSS is installed and configured in your project:
137
+
138
+ ```bash
139
+ npm install -D tailwindcss postcss autoprefixer
140
+ npx tailwindcss init -p
141
+ ```
142
+
143
+ ## Exporting Diagrams
144
+
145
+ Users can export their BPMN diagrams by:
146
+
147
+ 1. Clicking the "Download BPMN" button in the header
148
+ 2. Using the `onSave` callback to capture the XML
149
+
150
+ The exported file is a standard BPMN 2.0 XML file that can be imported into other BPMN tools.
151
+
152
+ ## Components Available
153
+
154
+ The palette includes the following BPMN components:
155
+
156
+ - **Start Event** - Initiates the process flow
157
+ - **Task** - Represents a work item or activity
158
+ - **Gateway** - Decision points (Exclusive Gateway)
159
+ - **End Event** - Terminates the process flow
160
+
161
+ ## Browser Support
162
+
163
+ - Chrome (latest)
164
+ - Firefox (latest)
165
+ - Safari (latest)
166
+ - Edge (latest)
56
167
 
57
168
  ## License
58
169
 
59
170
  MIT
171
+
172
+ ## Contributing
173
+
174
+ Contributions are welcome! Please feel free to submit a Pull Request.
175
+
176
+ ## Support
177
+
178
+ For issues and feature requests, please open an issue on the GitHub repository.
179
+
180
+ ## Run Locally
181
+
182
+ **Prerequisites:** Node.js
183
+
184
+ 1. Install dependencies:
185
+ `npm install`
186
+ 2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
187
+ 3. Run the app:
188
+ `npm run dev`
package/dist/bpmn-flow-designer.css ADDED
@@ -0,0 +1 @@
1
+ @import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";:root{--color-indigo-50: #f0f4ff;--color-indigo-500: #6366f1;--color-indigo-600: #4f46e5;--color-indigo-700: #4338ca;--color-slate-50: #f8fafc;--color-slate-200: #e2e8f0;--color-slate-300: #cbd5e1;--color-slate-400: #94a3b8;--color-slate-600: #475569;--color-slate-800: #1e293b;--color-slate-900: #0f172a;--color-green-600: #16a34a;--color-red-600: #dc2626;--color-amber-500: #f59e0b}*{font-family:Inter,sans-serif}.bpmn-io-style{background-color:#f9fafb!important}.djs-container{background:linear-gradient(135deg,#f9fafb,#f3f4f6)!important}.djs-palette{background-color:var(--color-slate-50)!important;border-right:1px solid var(--color-slate-200)!important}.djs-palette .djs-palette-entries{background-color:transparent!important}.djs-palette .entry{border:1px solid var(--color-slate-200)!important;border-radius:8px!important;background-color:#fff!important;transition:all .2s ease!important}.djs-palette .entry:hover{border-color:var(--color-indigo-500)!important;box-shadow:0 4px 6px #6366f11a!important;background-color:var(--color-indigo-50)!important}.djs-context-pad{background-color:#fff!important;border:1px solid var(--color-slate-200)!important;border-radius:8px!important;box-shadow:0 4px 6px #0000001a!important}.djs-context-pad .entry{border-radius:4px!important}.djs-context-pad .entry:hover{background-color:var(--color-indigo-50)!important}.djs-connection{stroke:var(--color-slate-400)!important;stroke-width:2px!important}.djs-connection.selected{stroke:var(--color-indigo-600)!important;stroke-width:3px!important}.djs-shape{border-radius:4px!important}.djs-shape.selected>.djs-visual{filter:brightness(.95)!important}.djs-outline{stroke:var(--color-indigo-600)!important;stroke-width:2px!important}.djs-popup{background-color:#fff!important;border:1px solid var(--color-slate-200)!important;border-radius:8px!important;box-shadow:0 10px 15px -3px #0000001a!important}.djs-popup .entry{padding:8px 12px!important;border-radius:4px!important;color:var(--color-slate-700)!important;transition:all .15s ease!important}.djs-popup .entry:hover{background-color:var(--color-indigo-50)!important;color:var(--color-indigo-600)!important}.djs-label{font-family:Inter,sans-serif!important;font-size:12px!important;font-weight:500!important;color:var(--color-slate-900)!important}.djs-container:before{background-image:radial-gradient(circle,#e2e8f0 1px,transparent 1px)!important;background-size:24px 24px!important;opacity:.4!important}.djs-container::-webkit-scrollbar{width:8px;height:8px}.djs-container::-webkit-scrollbar-track{background:transparent}.djs-container::-webkit-scrollbar-thumb{background:var(--color-slate-300);border-radius:4px}.djs-container::-webkit-scrollbar-thumb:hover{background:var(--color-slate-400)}