feat: add multi-flow support to RouteFlow via flows prop
All checks were successful
Build & Publish / publish (push) Successful in 50s

Allow rendering multiple named flow segments (e.g., main route +
onException handler) within a single RouteFlow component. Each segment
gets a labeled section with variant-based color theming. Fully backward
compatible — existing nodes prop continues to work unchanged.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-25 18:10:27 +01:00
parent 90e3de2cdf
commit 5fe6321d30
5 changed files with 258 additions and 8 deletions

View File

@@ -815,6 +815,37 @@ export function CompositesSection() {
</div>
</DemoCard>
{/* 17c. RouteFlow (Multi-Flow) */}
<DemoCard
id="routeflow-multi"
title="RouteFlow (Multi-Flow)"
description="Multiple flow segments with labels, showing a main route alongside an exception handler."
>
<div style={{ width: '100%', maxWidth: 360 }}>
<RouteFlow
flows={[
{
label: 'Main Route',
nodes: [
{ name: 'jms:orders', type: 'from', durationMs: 4, status: 'ok' },
{ name: 'OrderValidator', type: 'process', durationMs: 8, status: 'ok' },
{ name: 'http:payment-api/charge', type: 'to', durationMs: 187, status: 'slow' },
{ name: 'kafka:order-completed', type: 'to', durationMs: 11, status: 'ok' },
],
},
{
label: 'onException(IOException)',
variant: 'error',
nodes: [
{ name: 'log:error-logger', type: 'process', durationMs: 2, status: 'ok' },
{ name: 'dead-letter:failed-orders', type: 'to', durationMs: 14, status: 'fail' },
],
},
]}
/>
</div>
</DemoCard>
{/* 18. ShortcutsBar */}
<DemoCard
id="shortcutsbar"