@duabalabs/workflow-builder-ui

React component library for building visual workflows with drag-and-drop interface powered by ReactFlow.

Features

• WorkflowCanvas: Main visual workflow builder component
• ReactFlow Integration: Drag-and-drop node placement and connection
• Node Palette: Browse and add nodes from registry
• Dynamic Forms: Auto-generated configuration forms from JSON Schema
• Run Console: Real-time execution monitoring
• Version Check: Ensures UI-Server version compatibility
• Template Picker: Load pre-built workflow templates
• Group Support: Organize nodes into logical groups

Installation

npm install @duabalabs/workflow-builder-ui
# or
pnpm add @duabalabs/workflow-builder-ui

Quick Start

Basic Usage

import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

function App() {
  return (
    <div style={{ height: '100vh' }}>
      <WorkflowCanvas
        serverUrl="https://your-parse-server.com/parse"
        appId="your-app-id"
        sessionToken={userSession.token}
      />
    </div>
  );
}

With All Options

import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

function WorkflowBuilder() {
  const handleSave = (workflow) => {
    console.log('Workflow saved:', workflow);
  };
  
  const handleExecute = (result) => {
    console.log('Execution started:', result);
  };
  
  return (
    <div style={{ height: '100vh' }}>
      <WorkflowCanvas
        serverUrl="https://api.duabalabs.com/parse"
        appId="duabalabs-app"
        javascriptKey="your-javascript-key"  // Optional
        sessionToken={currentUser.sessionToken}
        workflowId="existing-workflow-id"  // Load existing workflow
        templatePicker  // Show template picker
        allowGroups  // Allow node grouping
        theme="auto"  // 'light' | 'dark' | 'auto'
        onSave={handleSave}
        onExecute={handleExecute}
      />
    </div>
  );
}

Read-Only Mode

<WorkflowCanvas
  serverUrl="https://api.duabalabs.com/parse"
  workflowId="workflow-123"
  readOnly  // Disable editing
  theme="light"
/>

Components

WorkflowCanvas

Main component that renders the complete workflow builder.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | serverUrl | string | required | Parse Server endpoint URL | | appId | string | required | Parse App ID | | javascriptKey | string | - | Parse JavaScript Key (optional) | | sessionToken | string | - | User session token for authentication | | workflowId | string | - | Load existing workflow by ID | | templatePicker | boolean | false | Show template picker panel | | allowGroups | boolean | false | Enable node grouping | | readOnly | boolean | false | Disable editing | | theme | 'light' \| 'dark' \| 'auto' | 'light' | UI theme | | onSave | (workflow) => void | - | Callback when workflow is saved | | onExecute | (result) => void | - | Callback when execution starts |

Hooks

useWorkflowAPI

Hook for interacting with the workflow server.

import { useWorkflowAPI } from '@duabalabs/workflow-builder-ui';

function MyComponent() {
  const api = useWorkflowAPI(
    'https://api.duabalabs.com/parse',
    'app-id',
    sessionToken,
    'javascript-key' // optional
  );
  
  const handleExecute = async () => {
    try {
      const result = await api.executeWorkflow('workflow-id');
      console.log('Execution started:', result);
    } catch (error) {
      console.error('Failed:', error);
    }
  };
  
  return (
    <button onClick={handleExecute} disabled={api.loading}>
      Execute Workflow
    </button>
  );
}

API Methods

• getVersion(): Get server version
• fetchDefs(params?): Fetch node definitions
• fetchTemplates(params?): Fetch workflow templates
• createWorkflow(workflow): Create new workflow
• updateWorkflow(id, patch): Update workflow
• validateWorkflow(id): Validate workflow
• executeWorkflow(id, inputs?): Execute workflow
• getRunStatus(runId): Get run status
• cancelRun(runId): Cancel run

useWorkflowStore

Zustand store for workflow state management.

import { useWorkflowStore } from '@duabalabs/workflow-builder-ui';

function MyComponent() {
  const { nodes, edges, selectedNode, setSelectedNode } = useWorkflowStore();
  
  return (
    <div>
      <p>Nodes: {nodes.length}</p>
      <p>Edges: {edges.length}</p>
      {selectedNode && <p>Selected: {selectedNode}</p>}
    </div>
  );
}

Styling

The library includes default styles. Import them in your app:

import '@duabalabs/workflow-builder-ui/dist/style.css';

Custom Styling

Override CSS variables for theming:

.workflow-canvas {
  --primary-color: #0066cc;
  --background-color: #f5f5f5;
  --text-color: #333;
}

.workflow-canvas.dark {
  --background-color: #1a1a1a;
  --text-color: #f5f5f5;
}

Version Compatibility

The UI automatically checks version compatibility with the server on initialization. If versions don't match:

• Major version mismatch: Blocks execution with error message
• Minor/patch mismatch: Shows warning but allows execution

import { checkServerVersion } from '@duabalabs/workflow-builder-ui';

const result = await checkServerVersion('https://api.example.com', '1.0.0');

if (!result.compatible) {
  console.error(result.message);
}

Integration with Next.js

// app/workflow/page.tsx
'use client';

import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

export default function WorkflowPage() {
  return (
    <main className="h-screen">
      <WorkflowCanvas
        serverUrl={process.env.NEXT_PUBLIC_PARSE_URL!}
        appId={process.env.NEXT_PUBLIC_APP_ID}
        templatePicker
        theme="auto"
      />
    </main>
  );
}

Integration with Vite/React

// src/App.tsx
import { WorkflowCanvas } from '@duabalabs/workflow-builder-ui';
import '@duabalabs/workflow-builder-ui/dist/style.css';

function App() {
  return (
    <div className="app">
      <WorkflowCanvas
        serverUrl={import.meta.env.VITE_PARSE_URL}
        appId={import.meta.env.VITE_APP_ID}
        templatePicker
        allowGroups
      />
    </div>
  );
}

export default App;

TypeScript Support

The library is fully typed with TypeScript. Import types:

import type {
  WorkflowCanvasProps,
  NodeDefUI,
  WorkflowState
} from '@duabalabs/workflow-builder-ui';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT