Workflow Builder

The Workflow Builder is a visual tool for creating and managing automated workflows. It utilizes @xyflow/react (React Flow) for the canvas visualization and provides a drag-and-drop interface for constructing logic flows.

Usage

import { WorkflowCanvas, NodePalette, NodePropertiesPanel } from '@orbitusdev/components/workflow';
 
export default function WorkflowPage() {
  return (
    <div className="flex h-screen">
      <NodePalette className="w-64 border-r" />
      <div className="flex-1">
        <WorkflowCanvas />
      </div>
      <NodePropertiesPanel className="w-80 border-l" />
    </div>
  );
}

Features

• Visual Canvas: Interactive infinite canvas to design workflows.
• Drag & Drop: Drag nodes from the palette and drop them onto the canvas.
• Node Configuration: Select any node to edit its properties in a dedicated side panel.
• Validation: Built-in validation to ensure connections and node configurations are correct.
• Minimap & Controls: Easy navigation with zoom, pan, and a minimap overview.

Components

WorkflowCanvas

The core component that renders the flow. It handles:

• Rendering nodes and connections (edges).
• Drag-and-drop logic for adding new nodes.
• Selection state management.
• Deletion of nodes and edges.

NodePalette

A sidebar component displaying available node types. Users can drag items from here to the canvas. Grouped by categories:

• Flow Control: Start, End, Delay, Condition.
• Communication: Email, SMS, Slack, Telegram, WhatsApp.
• Data: DB Create, DB Update, DB Delete, HTTP Request, Set Variable.

NodePropertiesPanel

A contextual side panel that shows configuration options for the currently selected node. It automatically adapts its fields based on the node type (e.g., showing email fields for “Send Email” or condition logic for “Condition”).

Node Types