@forgeframework/flow-ui

Visual BPMN designer for the Forge Framework.

Part of the Forge Framework — a TypeScript framework for backend microservices and web applications.

Installation

npm install @forgeframework/flow-ui

Usage

import { BpmnDesigner, BpmnJsonExporter, WorkflowStatusRenderer } from '@forgeframework/flow-ui';
import { WorkflowDefinition } from '@forgeframework/flow';

function WorkflowEditorPage(): JSX.Element {
  const [definition, setDefinition] = useState<WorkflowDefinition | undefined>();

  const handleChange = (updated: WorkflowDefinition): void => {
    setDefinition(updated);
  };

  const handleExport = (): void => {
    if (definition) {
      const json = JSON.stringify(definition, null, 2);
      downloadFile('workflow.json', json);
    }
  };

  return (
    <BpmnDesigner
      definition={definition}
      onChange={handleChange}
      showMiniMap={true}
      showToolbar={true}
      showGrid={true}
    />
  );
}

function WorkflowMonitorPage({ instanceId }: { instanceId: string }): JSX.Element {
  const { definition, instanceStatus } = useWorkflowStatus(instanceId);
  const exporter = new BpmnJsonExporter();
  const { elements, connections } = exporter.fromJson(definition);

  return (
    <WorkflowStatusRenderer
      elements={elements}
      connections={connections}
      instanceStatus={instanceStatus}
      onElementClick={(elementId) => console.log('Element clicked:', elementId)}
    />
  );
}

Documentation

Full API reference and guides: https://carbonforge.io/framework/docs/flow/flow-ui

(Documentation site launching soon.)

License

MIT © Carbon Forge