@boltic/swirl 1.0.2 β 1.0.3
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.
- package/README.md +145 -346
- package/dist/swirl.es.js +48499 -45255
- package/dist/swirl.umd.js +267 -263
- package/package.json +8 -4
package/README.md
CHANGED
|
@@ -1,59 +1,50 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Swirl
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Visual workflow builder library for React** β drag-and-drop automation with React Flow and Material-UI.
|
|
4
4
|
|
|
5
|
+
[](https://www.npmjs.com/package/@boltic/swirl)
|
|
5
6
|
[](https://www.typescriptlang.org/)
|
|
6
|
-
[](https://reactjs.org/)
|
|
8
|
+
[](https://mui.com/)
|
|
9
|
+
[](https://reactflow.dev/)
|
|
8
10
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
- π¨ **Visual Workflow Builder** - Drag-and-drop interface for creating complex workflows
|
|
12
|
-
- π **Node-Based Architecture** - Connect activities, triggers, and conditions visually
|
|
13
|
-
- π **Execution Monitoring** - Real-time workflow execution tracking and debugging
|
|
14
|
-
- π― **80+ Built-in Activities** - Pre-built integrations and actions
|
|
15
|
-
- π **Conditional Logic** - IF/ELSE conditions, loops, and parallel execution
|
|
16
|
-
- π **API Integration** - HTTP requests, webhooks, and custom API calls
|
|
17
|
-
- π§ **Communication** - Email, Slack, and notification activities
|
|
18
|
-
- π **Data Processing** - JSON manipulation, mapping, and transformation
|
|
19
|
-
- π **Secure Execution** - Token-based authentication and secure API calls
|
|
20
|
-
- π± **Responsive Design** - Works seamlessly on desktop and tablet devices
|
|
21
|
-
- π¨ **Customizable Theming** - Full Material-UI theme customization
|
|
22
|
-
- π **Extensible Architecture** - Add custom activities and integrations
|
|
23
|
-
|
|
24
|
-
## π Quick Start
|
|
11
|
+
---
|
|
25
12
|
|
|
26
|
-
|
|
13
|
+
## Installation
|
|
27
14
|
|
|
28
15
|
```bash
|
|
29
16
|
npm install @boltic/swirl
|
|
30
17
|
```
|
|
31
18
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
Swirl requires the following peer dependencies:
|
|
19
|
+
**Peer dependencies** (install in your app if not already present):
|
|
35
20
|
|
|
36
21
|
```bash
|
|
37
|
-
npm install
|
|
22
|
+
npm install react react-dom @mui/material @emotion/react @emotion/styled
|
|
38
23
|
```
|
|
39
24
|
|
|
40
|
-
|
|
25
|
+
---
|
|
26
|
+
|
|
27
|
+
## Quick Start
|
|
28
|
+
|
|
29
|
+
1. Import the component and styles.
|
|
30
|
+
2. Provide required configuration (URLs, entity ID, token, integration state).
|
|
31
|
+
3. Render `<WorkflowBuilder />` or `<ExecutionData />`.
|
|
32
|
+
|
|
33
|
+
### WorkflowBuilder (visual editor)
|
|
41
34
|
|
|
42
35
|
```tsx
|
|
43
|
-
import React from 'react';
|
|
44
36
|
import { WorkflowBuilder } from '@boltic/swirl';
|
|
45
37
|
import '@boltic/swirl/dist/style.css';
|
|
46
38
|
|
|
47
|
-
|
|
39
|
+
function App() {
|
|
48
40
|
const WORKFLOW_URLS = {
|
|
49
41
|
VORTEX_MAIN_URL: 'https://api.example.com/workflow',
|
|
50
42
|
FRONTEND_URL: 'https://yourapp.com',
|
|
51
43
|
VORTEX_WEBHOOK_URL: 'https://api.example.com/webhook',
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
console.log('Integration drawer opened:', data);
|
|
44
|
+
VORTEX_SYNC_DOMAIN: 'https://sync.example.com',
|
|
45
|
+
SERVERLESS_URL: 'https://serverless.example.com',
|
|
46
|
+
TESSERACT_MAIN_URL: 'https://tesseract.example.com',
|
|
47
|
+
// Add other URLs your backend requires
|
|
57
48
|
};
|
|
58
49
|
|
|
59
50
|
return (
|
|
@@ -61,377 +52,185 @@ const App = () => {
|
|
|
61
52
|
WORKFLOW_URLS={WORKFLOW_URLS}
|
|
62
53
|
ENTITY_ID="your-entity-id"
|
|
63
54
|
TOKEN="your-auth-token"
|
|
64
|
-
api={{}}
|
|
65
|
-
openIntegrationDrawer={handleIntegrationDrawer}
|
|
66
55
|
INTEGRATION_DATA={{}}
|
|
67
56
|
SET_INTEGRATION_DATA={() => {}}
|
|
57
|
+
USER_DATA={{}}
|
|
58
|
+
currentSubscription={null}
|
|
59
|
+
pro_integration={false}
|
|
60
|
+
openUpgradeModal={() => {}}
|
|
68
61
|
analytics={{}}
|
|
69
|
-
|
|
62
|
+
ALERT_TOP_BAR={null}
|
|
63
|
+
openIntegrationDrawer={(data) => console.log('Integration:', data)}
|
|
64
|
+
api={undefined}
|
|
65
|
+
navigate={(path) => window.history.pushState({}, '', path)}
|
|
70
66
|
/>
|
|
71
67
|
);
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
export default App;
|
|
68
|
+
}
|
|
75
69
|
```
|
|
76
70
|
|
|
77
|
-
###
|
|
71
|
+
### ExecutionData (execution monitoring)
|
|
72
|
+
|
|
73
|
+
Use this to show execution list and details (typically on a route like `/workflows/:workflowId/executions`). The component reads `workflowId` from the URL when used inside your router.
|
|
78
74
|
|
|
79
75
|
```tsx
|
|
80
|
-
import React from 'react';
|
|
81
76
|
import { ExecutionData } from '@boltic/swirl';
|
|
82
77
|
import '@boltic/swirl/dist/style.css';
|
|
83
78
|
|
|
84
|
-
|
|
79
|
+
function ExecutionsPage() {
|
|
85
80
|
return (
|
|
86
81
|
<ExecutionData
|
|
87
82
|
WORKFLOW_URLS={WORKFLOW_URLS}
|
|
88
83
|
ENTITY_ID="your-entity-id"
|
|
89
84
|
TOKEN="your-auth-token"
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
USER_DATA={{}}
|
|
86
|
+
currentSubscription={null}
|
|
87
|
+
openUpgradeModal={() => {}}
|
|
88
|
+
analytics={{}}
|
|
89
|
+
isAccountLevel={false}
|
|
90
|
+
api={undefined}
|
|
91
|
+
navigate={(path) => window.history.pushState({}, '', path)}
|
|
92
92
|
/>
|
|
93
93
|
);
|
|
94
|
-
}
|
|
94
|
+
}
|
|
95
95
|
```
|
|
96
96
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
### WorkflowBuilder
|
|
100
|
-
|
|
101
|
-
The main visual workflow editor component that provides:
|
|
102
|
-
|
|
103
|
-
- **Canvas Interface** - Drag-and-drop workflow design
|
|
104
|
-
- **Activity Palette** - Library of available workflow activities
|
|
105
|
-
- **Node Configuration** - Form-based activity configuration using Ripple
|
|
106
|
-
- **Connection Management** - Visual connections between workflow steps
|
|
107
|
-
- **Execution Controls** - Test, save, and deploy workflows
|
|
108
|
-
|
|
109
|
-
### ExecutionData
|
|
110
|
-
|
|
111
|
-
Workflow execution monitoring and debugging component:
|
|
112
|
-
|
|
113
|
-
- **Execution Timeline** - Step-by-step execution visualization
|
|
114
|
-
- **Debug Logs** - Detailed execution logs and error tracking
|
|
115
|
-
- **Data Flow** - Input/output data for each workflow step
|
|
116
|
-
- **Performance Metrics** - Execution time and performance analytics
|
|
117
|
-
|
|
118
|
-
## π§ Available Activities
|
|
119
|
-
|
|
120
|
-
Swirl comes with 80+ built-in activities organized by category:
|
|
121
|
-
|
|
122
|
-
### **π API & HTTP**
|
|
123
|
-
|
|
124
|
-
- **HTTP Activity** - Make REST API calls
|
|
125
|
-
- **Webhook** - Receive webhook notifications
|
|
126
|
-
- **API Activity** - Advanced API integrations
|
|
127
|
-
- **Custom Activity** - Build custom API interactions
|
|
128
|
-
|
|
129
|
-
### **π§ Communication**
|
|
130
|
-
|
|
131
|
-
- **Email Activity** - Send emails with templates
|
|
132
|
-
- **Slack Activity** - Send Slack messages and notifications
|
|
133
|
-
- **Gmail Activity** - Gmail integration for sending emails
|
|
134
|
-
- **Gmail Trigger** - Trigger workflows from Gmail events
|
|
135
|
-
|
|
136
|
-
### **π Data Processing**
|
|
137
|
-
|
|
138
|
-
- **Mapper** - Transform and map data between formats
|
|
139
|
-
- **Converter Activity** - Convert data types and formats
|
|
140
|
-
- **Template** - Generate content from templates
|
|
141
|
-
- **JSON Processing** - Manipulate JSON data structures
|
|
142
|
-
|
|
143
|
-
### **π Flow Control**
|
|
144
|
-
|
|
145
|
-
- **IF Activity** - Conditional branching logic
|
|
146
|
-
- **Switch Activity** - Multi-branch conditional logic
|
|
147
|
-
- **Loop** - Iterate over data collections
|
|
148
|
-
- **Parallel** - Execute multiple activities simultaneously
|
|
149
|
-
- **Sleep** - Add delays to workflow execution
|
|
150
|
-
|
|
151
|
-
### **π
Scheduling & Time**
|
|
152
|
-
|
|
153
|
-
- **Schedule** - Time-based workflow triggers
|
|
154
|
-
- **Google Calendar** - Calendar event management
|
|
155
|
-
- **Calendly** - Appointment scheduling integration
|
|
156
|
-
- **Date/Time Operations** - Date manipulation activities
|
|
157
|
-
|
|
158
|
-
### **πΎ Data Storage**
|
|
159
|
-
|
|
160
|
-
- **Boltic Storage** - Cloud storage operations
|
|
161
|
-
- **Boltic Tables** - Database table operations
|
|
162
|
-
- **Cloud Database** - Database connectivity
|
|
163
|
-
- **Google Sheets** - Spreadsheet read/write operations
|
|
164
|
-
|
|
165
|
-
### **π€ AI & Automation**
|
|
166
|
-
|
|
167
|
-
- **GPT** - AI text generation and processing
|
|
168
|
-
- **MCP (Model Context Protocol)** - AI model interactions
|
|
169
|
-
- **Function Activity** - Custom function execution
|
|
170
|
-
- **Serverless** - Serverless function execution
|
|
171
|
-
|
|
172
|
-
### **π§ Utilities**
|
|
97
|
+
---
|
|
173
98
|
|
|
174
|
-
|
|
175
|
-
- **Monitor** - System monitoring and alerts
|
|
176
|
-
- **Response** - HTTP response handling
|
|
177
|
-
- **Execute Child Workflow** - Nested workflow execution
|
|
99
|
+
## Features
|
|
178
100
|
|
|
179
|
-
|
|
101
|
+
- **Visual workflow builder** β Drag-and-drop canvas for designing workflows (React Flow).
|
|
102
|
+
- **Node-based model** β Triggers, activities, conditions, loops, and parallel branches.
|
|
103
|
+
- **Execution monitoring** β List, filter, and inspect workflow runs and logs.
|
|
104
|
+
- **80+ activities** β HTTP, webhooks, email, Slack, mapper, conditions, scheduling, storage, AI, and more.
|
|
105
|
+
- **Ripple forms** β Schema-driven activity configuration.
|
|
106
|
+
- **Theming** β Material-UI theme; works with your appβs `ThemeProvider`.
|
|
107
|
+
- **TypeScript** β Typed props and exports (`WorkflowBuilderProps`, `ExecutionDataProps`, `IntegrationFormProps`).
|
|
180
108
|
|
|
181
|
-
|
|
109
|
+
---
|
|
182
110
|
|
|
183
|
-
|
|
184
|
-
| ----------------------- | ---------- | -------- | ----------------------------------------- |
|
|
185
|
-
| `WORKFLOW_URLS` | `object` | β
| Configuration URLs for workflow services |
|
|
186
|
-
| `ENTITY_ID` | `string` | β
| Unique identifier for the workflow entity |
|
|
187
|
-
| `TOKEN` | `string` | β
| Authentication token for API calls |
|
|
188
|
-
| `INTEGRATION_DATA` | `object` | β
| Integration configuration data |
|
|
189
|
-
| `SET_INTEGRATION_DATA` | `function` | β
| Function to update integration data |
|
|
190
|
-
| `api` | `object` | β | Custom API interface (optional) |
|
|
191
|
-
| `openIntegrationDrawer` | `function` | β | Callback for opening integration drawer |
|
|
192
|
-
| `analytics` | `object` | β | Analytics tracking configuration |
|
|
193
|
-
| `navigate` | `function` | β | Navigation function for routing |
|
|
111
|
+
## Exports
|
|
194
112
|
|
|
195
|
-
|
|
113
|
+
| Export | Description |
|
|
114
|
+
| ----------------- | ------------------------------------------------------------ |
|
|
115
|
+
| `WorkflowBuilder` | Main workflow editor (canvas, palette, drawer, save/deploy). |
|
|
116
|
+
| `ExecutionData` | Execution list and detail view (use on executions route). |
|
|
117
|
+
| `IntegrationForm` | Standalone integration/activity form drawer (advanced). |
|
|
196
118
|
|
|
197
|
-
|
|
198
|
-
| --------------- | ---------- | -------- | ----------------------------------------- |
|
|
199
|
-
| `WORKFLOW_URLS` | `object` | β
| Configuration URLs for workflow services |
|
|
200
|
-
| `ENTITY_ID` | `string` | β
| Unique identifier for the workflow entity |
|
|
201
|
-
| `TOKEN` | `string` | β
| Authentication token for API calls |
|
|
202
|
-
| `workflowId` | `string` | β
| ID of the workflow to monitor |
|
|
203
|
-
| `executionId` | `string` | β
| ID of the specific execution |
|
|
204
|
-
| `api` | `object` | β | Custom API interface (optional) |
|
|
205
|
-
| `navigate` | `function` | β | Navigation function for routing |
|
|
119
|
+
---
|
|
206
120
|
|
|
207
|
-
|
|
121
|
+
## API Reference
|
|
122
|
+
|
|
123
|
+
### WorkflowBuilder props
|
|
124
|
+
|
|
125
|
+
| Prop | Type | Required | Description |
|
|
126
|
+
| ----------------------- | ----------- | -------- | -------------------------------------------- |
|
|
127
|
+
| `WORKFLOW_URLS` | `object` | Yes | Service base URLs (see below). |
|
|
128
|
+
| `ENTITY_ID` | `string` | Yes | Tenant/organization identifier. |
|
|
129
|
+
| `TOKEN` | `string` | Yes | Auth token for API calls. |
|
|
130
|
+
| `INTEGRATION_DATA` | `object` | Yes | Integration/credential state. |
|
|
131
|
+
| `SET_INTEGRATION_DATA` | `function` | Yes | Updater for integration state. |
|
|
132
|
+
| `USER_DATA` | `object` | Yes | Current user context. |
|
|
133
|
+
| `currentSubscription` | `any` | Yes | Subscription/plan data. |
|
|
134
|
+
| `pro_integration` | `boolean` | Yes | Whether pro integrations are enabled. |
|
|
135
|
+
| `openUpgradeModal` | `function` | Yes | Callback to open upgrade UI. |
|
|
136
|
+
| `analytics` | `object` | Yes | Analytics config. |
|
|
137
|
+
| `ALERT_TOP_BAR` | `ReactNode` | Yes | Optional top bar (e.g. banner). |
|
|
138
|
+
| `openIntegrationDrawer` | `function` | No | Callback when user opens integration drawer. |
|
|
139
|
+
| `api` | `object` | No | Custom HTTP client (replaces default axios). |
|
|
140
|
+
| `navigate` | `function` | No | Navigation function (e.g. router). |
|
|
141
|
+
|
|
142
|
+
### ExecutionData props
|
|
143
|
+
|
|
144
|
+
| Prop | Type | Required | Description |
|
|
145
|
+
| --------------------- | ---------- | -------- | ----------------------------------------- |
|
|
146
|
+
| `WORKFLOW_URLS` | `object` | Yes | Service base URLs. |
|
|
147
|
+
| `ENTITY_ID` | `string` | Yes | Tenant/organization identifier. |
|
|
148
|
+
| `TOKEN` | `string` | Yes | Auth token. |
|
|
149
|
+
| `USER_DATA` | `object` | Yes | Current user context. |
|
|
150
|
+
| `currentSubscription` | `any` | Yes | Subscription data. |
|
|
151
|
+
| `openUpgradeModal` | `function` | Yes | Callback to open upgrade UI. |
|
|
152
|
+
| `analytics` | `object` | Yes | Analytics config. |
|
|
153
|
+
| `isAccountLevel` | `boolean` | Yes | Whether view is account-level executions. |
|
|
154
|
+
| `api` | `object` | No | Custom HTTP client. |
|
|
155
|
+
| `navigate` | `function` | No | Navigation function. |
|
|
156
|
+
|
|
157
|
+
### WORKFLOW_URLS (shape)
|
|
158
|
+
|
|
159
|
+
Provide at least the URLs your backend and activities use. Common keys:
|
|
160
|
+
|
|
161
|
+
| Key | Description |
|
|
162
|
+
| -------------------- | ---------------------------------------- |
|
|
163
|
+
| `VORTEX_MAIN_URL` | Main workflow API. |
|
|
164
|
+
| `FRONTEND_URL` | Frontend app URL. |
|
|
165
|
+
| `VORTEX_WEBHOOK_URL` | Webhook base URL. |
|
|
166
|
+
| `VORTEX_SYNC_DOMAIN` | Sync service domain. |
|
|
167
|
+
| `SERVERLESS_URL` | Serverless functions. |
|
|
168
|
+
| `TESSERACT_MAIN_URL` | OCR service. |
|
|
169
|
+
| `ATHENA_MAIN_URL` | Analytics (optional). |
|
|
170
|
+
| β¦ | Add any other keys your backend expects. |
|
|
208
171
|
|
|
209
|
-
|
|
210
|
-
const WORKFLOW_URLS = {
|
|
211
|
-
VORTEX_MAIN_URL: string; // Main workflow engine URL
|
|
212
|
-
FRONTEND_URL: string; // Frontend application URL
|
|
213
|
-
VORTEX_WEBHOOK_URL: string; // Webhook handler URL
|
|
214
|
-
VORTEX_SYNC_DOMAIN: string; // Sync service domain
|
|
215
|
-
SERVERLESS_URL: string; // Serverless functions URL
|
|
216
|
-
TESSERACT_MAIN_URL: string; // OCR service URL
|
|
217
|
-
FC_DOMAIN: string; // File conversion domain
|
|
218
|
-
MADROX_MAIN_URL: string; // Duplication service URL
|
|
219
|
-
HITMAN_PUBLIC_DOMAIN: string; // Public API domain
|
|
220
|
-
HITMAN_PLTM_URL: string; // Platform API URL
|
|
221
|
-
ATHENA_MAIN_URL: string; // Analytics service URL
|
|
222
|
-
GYRATE_MAIN_URL: string; // Rotation service URL
|
|
223
|
-
BOLTIC_EMAIL_DOMAIN: string; // Email service domain
|
|
224
|
-
};
|
|
225
|
-
```
|
|
172
|
+
---
|
|
226
173
|
|
|
227
|
-
##
|
|
174
|
+
## Theming
|
|
228
175
|
|
|
229
|
-
Swirl
|
|
176
|
+
Swirl uses Material-UI. Wrap your app (or the Swirl components) in a `ThemeProvider` to match your app theme:
|
|
230
177
|
|
|
231
178
|
```tsx
|
|
232
179
|
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
|
233
180
|
import { WorkflowBuilder } from '@boltic/swirl';
|
|
181
|
+
import '@boltic/swirl/dist/style.css';
|
|
234
182
|
|
|
235
|
-
const
|
|
183
|
+
const theme = createTheme({
|
|
236
184
|
palette: {
|
|
237
|
-
primary: {
|
|
238
|
-
|
|
239
|
-
},
|
|
240
|
-
secondary: {
|
|
241
|
-
main: '#dc004e',
|
|
242
|
-
},
|
|
243
|
-
},
|
|
244
|
-
components: {
|
|
245
|
-
MuiButton: {
|
|
246
|
-
styleOverrides: {
|
|
247
|
-
root: {
|
|
248
|
-
borderRadius: 8,
|
|
249
|
-
},
|
|
250
|
-
},
|
|
251
|
-
},
|
|
185
|
+
primary: { main: '#1976d2' },
|
|
186
|
+
secondary: { main: '#dc004e' },
|
|
252
187
|
},
|
|
253
188
|
});
|
|
254
189
|
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
<
|
|
258
|
-
|
|
259
|
-
|
|
190
|
+
function App() {
|
|
191
|
+
return (
|
|
192
|
+
<ThemeProvider theme={theme}>
|
|
193
|
+
<WorkflowBuilder {...props} />
|
|
194
|
+
</ThemeProvider>
|
|
195
|
+
);
|
|
196
|
+
}
|
|
260
197
|
```
|
|
261
198
|
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
Swirl is built with modern React patterns:
|
|
265
|
-
|
|
266
|
-
- **React Flow** - Visual node-based workflow canvas
|
|
267
|
-
- **Redux Toolkit** - Centralized state management
|
|
268
|
-
- **Material-UI** - Consistent design system
|
|
269
|
-
- **TypeScript** - Full type safety
|
|
270
|
-
- **Vite** - Fast development and build tooling
|
|
271
|
-
- **Ripple Integration** - Dynamic form generation for activity configuration
|
|
272
|
-
|
|
273
|
-
### Tech Stack
|
|
274
|
-
|
|
275
|
-
- [React](https://reactjs.org/) 18.x
|
|
276
|
-
- [Redux Toolkit](https://redux-toolkit.js.org/) - State management
|
|
277
|
-
- [TypeScript](https://www.typescriptlang.org/) - Type safety
|
|
278
|
-
- [Material-UI](https://mui.com/) 5.x - UI components
|
|
279
|
-
- [React Flow](https://reactflow.dev/) - Node-based canvas
|
|
280
|
-
- [Vite](https://vite.dev/) 7.x - Build tooling
|
|
199
|
+
---
|
|
281
200
|
|
|
282
|
-
##
|
|
201
|
+
## Build outputs
|
|
283
202
|
|
|
284
|
-
|
|
203
|
+
When you install from npm you get:
|
|
285
204
|
|
|
286
|
-
- **ESM**: `dist/swirl.es.js`
|
|
287
|
-
- **UMD**: `dist/swirl.umd.js`
|
|
288
|
-
- **CSS**: `dist/style.css`
|
|
289
|
-
- **Types**: `dist/index.d.ts`
|
|
205
|
+
- **ESM**: `dist/swirl.es.js`
|
|
206
|
+
- **UMD**: `dist/swirl.umd.js` (global `window.swirl`)
|
|
207
|
+
- **CSS**: `dist/style.css`
|
|
208
|
+
- **Types**: `dist/index.d.ts`
|
|
290
209
|
|
|
291
|
-
|
|
210
|
+
UMD example:
|
|
292
211
|
|
|
293
212
|
```html
|
|
294
|
-
<link rel="stylesheet" href="/dist/style.css" />
|
|
295
|
-
<script src="/dist/swirl.umd.js"></script>
|
|
296
|
-
<div id="workflow-root"></div>
|
|
213
|
+
<link rel="stylesheet" href="node_modules/@boltic/swirl/dist/style.css" />
|
|
214
|
+
<script src="node_modules/@boltic/swirl/dist/swirl.umd.js"></script>
|
|
297
215
|
<script>
|
|
298
216
|
const { WorkflowBuilder } = window.swirl;
|
|
299
|
-
// Initialize WorkflowBuilder with your framework
|
|
300
|
-
console.log('WorkflowBuilder available:', typeof WorkflowBuilder === 'function');
|
|
301
217
|
</script>
|
|
302
218
|
```
|
|
303
219
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
### Prerequisites
|
|
307
|
-
|
|
308
|
-
- Node.js β₯ 20.19 (or β₯ 22.12)
|
|
309
|
-
- npm β₯ 10
|
|
310
|
-
|
|
311
|
-
### Local Development
|
|
312
|
-
|
|
313
|
-
1. **Clone the repository**
|
|
314
|
-
|
|
315
|
-
```bash
|
|
316
|
-
git clone <repo-link>
|
|
317
|
-
cd swirl
|
|
318
|
-
```
|
|
319
|
-
|
|
320
|
-
2. **Install dependencies**
|
|
321
|
-
|
|
322
|
-
```bash
|
|
323
|
-
npm install
|
|
324
|
-
```
|
|
325
|
-
|
|
326
|
-
3. **Set up SSL certificate** (for HTTPS development)
|
|
327
|
-
|
|
328
|
-
```bash
|
|
329
|
-
# Install mkcert
|
|
330
|
-
# Generate certificate
|
|
331
|
-
mkcert -key-file key.pem -cert-file cert.pem "*.fcz0.de"
|
|
332
|
-
|
|
333
|
-
# Create ssl folder and copy certificates
|
|
334
|
-
mkdir ssl
|
|
335
|
-
cp key.pem cert.pem ssl/
|
|
336
|
-
|
|
337
|
-
# Add to /etc/hosts
|
|
338
|
-
echo "127.0.0.1 local.fcz0.de" >> /etc/hosts
|
|
339
|
-
```
|
|
340
|
-
|
|
341
|
-
4. **Configure environment**
|
|
342
|
-
|
|
343
|
-
```bash
|
|
344
|
-
chmod +x ./run.local.sh
|
|
345
|
-
# Edit run.local.sh with your environment variables
|
|
346
|
-
```
|
|
347
|
-
|
|
348
|
-
5. **Start development server**
|
|
349
|
-
|
|
350
|
-
```bash
|
|
351
|
-
./run.local.sh
|
|
352
|
-
```
|
|
353
|
-
|
|
354
|
-
Access at: `https://local.fcz0.de:3000`
|
|
355
|
-
|
|
356
|
-
6. **Build the library**
|
|
357
|
-
```bash
|
|
358
|
-
npm run build
|
|
359
|
-
```
|
|
360
|
-
|
|
361
|
-
## π§ Environment Variables
|
|
362
|
-
|
|
363
|
-
Required environment variables for development:
|
|
364
|
-
|
|
365
|
-
```bash
|
|
366
|
-
VITE_VORTEX_MAIN_URL=https://api.example.com/workflow
|
|
367
|
-
VITE_FRONTEND_URL=https://yourapp.com
|
|
368
|
-
VITE_ENTITY_ID=your-entity-id
|
|
369
|
-
VITE_TOKEN=your-auth-token
|
|
370
|
-
# ... other service URLs
|
|
371
|
-
```
|
|
372
|
-
|
|
373
|
-
## π― Use Cases
|
|
374
|
-
|
|
375
|
-
Swirl is perfect for building:
|
|
376
|
-
|
|
377
|
-
- **Business Process Automation** - Automate repetitive business workflows
|
|
378
|
-
- **Data Integration Platforms** - Connect and sync data between systems
|
|
379
|
-
- **Notification Systems** - Multi-channel notification workflows
|
|
380
|
-
- **Content Management** - Automated content processing pipelines
|
|
381
|
-
- **E-commerce Automation** - Order processing and inventory management
|
|
382
|
-
- **Customer Support** - Automated ticket routing and responses
|
|
383
|
-
- **Marketing Automation** - Lead nurturing and campaign workflows
|
|
384
|
-
- **DevOps Pipelines** - CI/CD and deployment automation
|
|
385
|
-
|
|
386
|
-
## π€ Publishing (maintainers)
|
|
387
|
-
|
|
388
|
-
### Access & prerequisites
|
|
389
|
-
|
|
390
|
-
- **npm account**: Use a Gofynd email address for your npm account.
|
|
391
|
-
- **Two-factor authentication (2FA)**: Enable 2FA on your npm account using an authenticator app (e.g. Google Authenticator). Required for publishing.
|
|
392
|
-
- **Publish access**: If you donβt have permission to publish `@boltic/swirl` on npm, reach out to **Ahmed Sakri** β [ahmedsakri@gofynd.com](mailto:ahmedsakri@gofynd.com) β to get access.
|
|
393
|
-
|
|
394
|
-
### Branches & release strategy
|
|
395
|
-
|
|
396
|
-
- **`fcz0`** β SIT (System Integration Testing) releases. Publish from this branch for SIT versions.
|
|
397
|
-
- **`fcz5`** β UAT (User Acceptance Testing) releases. Publish from this branch for UAT versions.
|
|
398
|
-
- **`master`** (or main) β Production releases. Publish from this branch for stable `latest` on npm.
|
|
399
|
-
|
|
400
|
-
**Publish SIT from `fcz0`** (version does not become `latest`):
|
|
401
|
-
|
|
402
|
-
```bash
|
|
403
|
-
git checkout fcz0
|
|
404
|
-
npm run build
|
|
405
|
-
npm version prerelease --preid=sit # e.g. 1.0.2-sit.0
|
|
406
|
-
npm publish --access public --tag sit
|
|
407
|
-
```
|
|
408
|
-
|
|
409
|
-
Consumers install SIT: `npm install @boltic/swirl@sit`
|
|
410
|
-
|
|
411
|
-
**Publish UAT from `fcz5`** (version does not become `latest`):
|
|
412
|
-
|
|
413
|
-
```bash
|
|
414
|
-
git checkout fcz5
|
|
415
|
-
npm run build
|
|
416
|
-
npm version prerelease --preid=uat # e.g. 1.0.2-uat.0
|
|
417
|
-
npm publish --access public --tag uat
|
|
418
|
-
```
|
|
220
|
+
---
|
|
419
221
|
|
|
420
|
-
|
|
222
|
+
## Development (contributors)
|
|
421
223
|
|
|
422
|
-
|
|
224
|
+
- **Node**: 24.x LTS (β₯ 24.0.0). Enforced via `engines` in package.json and `.npmrc` (`engine-strict=true`).
|
|
225
|
+
- **Commands**: `npm install` β `npm run build`
|
|
226
|
+
- **Local dev**: See repository for SSL and `run.local.sh` setup.
|
|
227
|
+
- **Publishing**: From `fcz0` (SIT), `fcz5` (UAT), or `master` (production). Use npm dist-tags `sit`, `uat`, or `latest`. Requires npm account with 2FA; contact [ahmedsakri@gofynd.com](mailto:ahmedsakri@gofynd.com) for publish access.
|
|
423
228
|
|
|
424
|
-
|
|
425
|
-
npm publish --access public
|
|
426
|
-
```
|
|
427
|
-
|
|
428
|
-
- **Build before publish**: `prepublishOnly` runs `npm run build` automatically when you run `npm publish`.
|
|
429
|
-
- **Package name**: If the name `swirl` is taken on npm, use a scoped name (e.g. `@boltic/swirl`) and set it in `package.json`.
|
|
430
|
-
- **Private dependencies**: This package depends on `@fynd/intelligence` and `ripple` from Azure DevOps. For **public npm**, installs will fail for users without access to those repos. Options: publish to a **private registry** (e.g. Azure Artifacts) where those deps resolve, or move those deps to `optionalDependencies` and document fallbacks for public npm.
|
|
229
|
+
---
|
|
431
230
|
|
|
432
|
-
##
|
|
231
|
+
## Support
|
|
433
232
|
|
|
434
|
-
- **Email**: ahmedsakri@gofynd.com
|
|
233
|
+
- **Email**: [ahmedsakri@gofynd.com](mailto:ahmedsakri@gofynd.com)
|
|
435
234
|
|
|
436
235
|
---
|
|
437
236
|
|