@principal-ai/subsystems-react 0.17.0

package/src/stories/Components/MultiCanvasRenderer.stories.tsx

@@ -0,0 +1,370 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MultiCanvasRenderer } from '../../components/MultiCanvasRenderer';
+import type { MultiCanvasLayout } from '../../components/MultiCanvasRenderer';
+import type { ExtendedCanvas } from '@principal-ai/subsystems-core';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+
+const meta = {
+  title: 'Components/MultiCanvasRenderer',
+  component: MultiCanvasRenderer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ width: '100vw', height: '100vh' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof MultiCanvasRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Sample Canvases
+// ============================================================================
+
+const authFlowCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'login',
+      type: 'text',
+      x: 0,
+      y: 0,
+      width: 120,
+      height: 60,
+      text: 'Login',
+      color: '#4A90E2',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'User' },
+    },
+    {
+      id: 'validate',
+      type: 'text',
+      x: 170,
+      y: 0,
+      width: 120,
+      height: 60,
+      text: 'Validate',
+      color: '#F5A623',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'Shield' },
+    },
+    {
+      id: 'session',
+      type: 'text',
+      x: 340,
+      y: 0,
+      width: 120,
+      height: 60,
+      text: 'Session',
+      color: '#7ED321',
+      pv: { nodeType: 'data', shape: 'rectangle', icon: 'Key' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'login', toNode: 'validate', pv: { edgeType: 'flow' } },
+    { id: 'e2', fromNode: 'validate', toNode: 'session', pv: { edgeType: 'flow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Authentication Flow',
+  },
+};
+
+const dataProcessingCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'input',
+      type: 'text',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      text: 'Input',
+      color: '#7B68EE',
+      pv: { nodeType: 'data', shape: 'circle', icon: 'Download' },
+    },
+    {
+      id: 'transform',
+      type: 'text',
+      x: 150,
+      y: 15,
+      width: 140,
+      height: 70,
+      text: 'Transform',
+      color: '#4A90E2',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'Settings' },
+    },
+    {
+      id: 'output',
+      type: 'text',
+      x: 340,
+      y: 0,
+      width: 100,
+      height: 100,
+      text: 'Output',
+      color: '#7B68EE',
+      pv: { nodeType: 'data', shape: 'circle', icon: 'Upload' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'input', toNode: 'transform', pv: { edgeType: 'dataflow' } },
+    { id: 'e2', fromNode: 'transform', toNode: 'output', pv: { edgeType: 'dataflow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Data Processing Pipeline',
+  },
+};
+
+const notificationCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'event',
+      type: 'text',
+      x: 0,
+      y: 30,
+      width: 100,
+      height: 60,
+      text: 'Event',
+      color: '#F5A623',
+      pv: { nodeType: 'trigger', shape: 'rectangle', icon: 'Zap' },
+    },
+    {
+      id: 'router',
+      type: 'text',
+      x: 150,
+      y: 0,
+      width: 100,
+      height: 100,
+      text: 'Router',
+      color: '#4A90E2',
+      pv: { nodeType: 'process', shape: 'diamond', icon: 'GitBranch' },
+    },
+    {
+      id: 'email',
+      type: 'text',
+      x: 300,
+      y: -30,
+      width: 100,
+      height: 50,
+      text: 'Email',
+      color: '#7ED321',
+      pv: { nodeType: 'action', shape: 'rectangle', icon: 'Mail' },
+    },
+    {
+      id: 'sms',
+      type: 'text',
+      x: 300,
+      y: 40,
+      width: 100,
+      height: 50,
+      text: 'SMS',
+      color: '#7ED321',
+      pv: { nodeType: 'action', shape: 'rectangle', icon: 'MessageSquare' },
+    },
+    {
+      id: 'push',
+      type: 'text',
+      x: 300,
+      y: 110,
+      width: 100,
+      height: 50,
+      text: 'Push',
+      color: '#7ED321',
+      pv: { nodeType: 'action', shape: 'rectangle', icon: 'Bell' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'event', toNode: 'router', pv: { edgeType: 'flow' } },
+    { id: 'e2', fromNode: 'router', toNode: 'email', pv: { edgeType: 'flow' } },
+    { id: 'e3', fromNode: 'router', toNode: 'sms', pv: { edgeType: 'flow' } },
+    { id: 'e4', fromNode: 'router', toNode: 'push', pv: { edgeType: 'flow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Notification System',
+  },
+};
+
+const monitoringCanvas: ExtendedCanvas = {
+  nodes: [
+    {
+      id: 'metrics',
+      type: 'text',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 60,
+      text: 'Metrics',
+      color: '#4A90E2',
+      pv: { nodeType: 'data', shape: 'rectangle', icon: 'BarChart2' },
+    },
+    {
+      id: 'alert',
+      type: 'text',
+      x: 150,
+      y: 0,
+      width: 100,
+      height: 60,
+      text: 'Alert',
+      color: '#D0021B',
+      pv: { nodeType: 'process', shape: 'rectangle', icon: 'AlertTriangle' },
+    },
+  ],
+  edges: [
+    { id: 'e1', fromNode: 'metrics', toNode: 'alert', pv: { edgeType: 'flow' } },
+  ],
+  pv: {
+    version: '1.0.0',
+    name: 'Monitoring',
+  },
+};
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/**
+ * Two canvases side by side on the same graph
+ */
+const twoCanvasLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'auth', canvas: authFlowCanvas, position: { x: 0, y: 0 } },
+    { canvasId: 'data', canvas: dataProcessingCanvas, position: { x: 600, y: 0 } },
+  ],
+};
+
+export const TwoCanvasesSideBySide: Story = {
+  args: {
+    layout: twoCanvasLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Four canvases arranged in a 2x2 grid pattern
+ */
+const fourCanvasLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'auth', canvas: authFlowCanvas, position: { x: 0, y: 0 } },
+    { canvasId: 'data', canvas: dataProcessingCanvas, position: { x: 600, y: 0 } },
+    { canvasId: 'notify', canvas: notificationCanvas, position: { x: 0, y: 200 } },
+    { canvasId: 'monitor', canvas: monitoringCanvas, position: { x: 600, y: 200 } },
+  ],
+};
+
+export const FourCanvasesGrid: Story = {
+  args: {
+    layout: fourCanvasLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Canvases stacked vertically
+ */
+const verticalLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'auth', canvas: authFlowCanvas, position: { x: 0, y: 0 } },
+    { canvasId: 'data', canvas: dataProcessingCanvas, position: { x: 0, y: 150 } },
+    { canvasId: 'notify', canvas: notificationCanvas, position: { x: 0, y: 300 } },
+  ],
+};
+
+export const VerticalStack: Story = {
+  args: {
+    layout: verticalLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Single canvas (baseline comparison)
+ */
+const singleCanvasLayout: MultiCanvasLayout = {
+  placements: [
+    { canvasId: 'notify', canvas: notificationCanvas, position: { x: 0, y: 0 } },
+  ],
+};
+
+export const SingleCanvas: Story = {
+  args: {
+    layout: singleCanvasLayout,
+    showControls: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * With minimap enabled to navigate the combined view
+ */
+export const WithMinimap: Story = {
+  args: {
+    layout: fourCanvasLayout,
+    showControls: true,
+    showMinimap: true,
+    showBackground: true,
+  },
+};
+
+/**
+ * Without group borders - just the nodes merged together
+ */
+export const WithoutGroups: Story = {
+  args: {
+    layout: fourCanvasLayout,
+    showControls: true,
+    showBackground: true,
+    showGroups: false,
+  },
+};
+
+/**
+ * Draggable groups - drag the group borders to rearrange canvases
+ */
+export const DraggableGroups: Story = {
+  render: () => {
+    const [layout, setLayout] = React.useState<MultiCanvasLayout>(fourCanvasLayout);
+
+    const handleLayoutChange = React.useCallback((newLayout: MultiCanvasLayout) => {
+      console.log('Layout changed:', newLayout.placements.map(p => ({
+        canvasId: p.canvasId,
+        position: p.position,
+      })));
+      setLayout(newLayout);
+    }, []);
+
+    return (
+      <div style={{ width: '100%', height: '100%' }}>
+        <div style={{
+          position: 'absolute',
+          top: 10,
+          left: 10,
+          zIndex: 100,
+          background: 'rgba(0,0,0,0.7)',
+          color: 'white',
+          padding: '8px 12px',
+          borderRadius: 4,
+          fontSize: 12,
+        }}>
+          Drag the group borders to move entire canvases
+        </div>
+        <MultiCanvasRenderer
+          layout={layout}
+          onLayoutChange={handleLayoutChange}
+          showControls
+          showBackground
+        />
+      </div>
+    );
+  },
+};

package/src/stories/Components/SequenceDiagram.stories.tsx

@@ -0,0 +1,255 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { SequenceDiagramRenderer } from '../../components/SequenceDiagramRenderer';
+import type { SequenceEvent, SequenceEdge } from '../../hooks/useSequenceLayout';
+import { ThemeProvider, defaultEditorTheme } from '@principal-ade/industry-theme';
+
+const meta = {
+  title: 'Components/SequenceDiagram',
+  component: SequenceDiagramRenderer,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ThemeProvider theme={defaultEditorTheme}>
+        <div style={{ padding: 20, height: '100vh', boxSizing: 'border-box' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+} satisfies Meta<typeof SequenceDiagramRenderer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Sample Data
+// ============================================================================
+
+/**
+ * Simple authentication flow across two namespaces
+ */
+const simpleAuthFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'auth.validation.started', label: 'Validation Started' },
+    { id: '2', name: 'database.query.findUser', label: 'Find User' },
+    { id: '3', name: 'auth.validation.completed', label: 'Validation Completed' },
+    { id: '4', name: 'auth.token.generated', label: 'Token Generated' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+  ],
+};
+
+/**
+ * More complex flow with multiple actors
+ */
+const complexOrderFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'api.request.received', label: 'Request Received' },
+    { id: '2', name: 'auth.session.validate', label: 'Validate Session' },
+    { id: '3', name: 'order.validation.started', label: 'Validate Order' },
+    { id: '4', name: 'inventory.check.availability', label: 'Check Stock' },
+    { id: '5', name: 'order.validation.completed', label: 'Order Valid' },
+    { id: '6', name: 'payment.charge.initiated', label: 'Initiate Charge' },
+    { id: '7', name: 'payment.charge.completed', label: 'Charge Complete' },
+    { id: '8', name: 'order.fulfillment.started', label: 'Start Fulfillment' },
+    { id: '9', name: 'inventory.reserve.items', label: 'Reserve Items' },
+    { id: '10', name: 'notification.email.sent', label: 'Confirmation Email' },
+    { id: '11', name: 'api.response.sent', label: 'Response Sent' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+    { id: 'e4', fromEvent: '4', toEvent: '5' },
+    { id: 'e5', fromEvent: '5', toEvent: '6' },
+    { id: 'e6', fromEvent: '6', toEvent: '7' },
+    { id: 'e7', fromEvent: '7', toEvent: '8' },
+    { id: 'e8', fromEvent: '8', toEvent: '9' },
+    { id: 'e9', fromEvent: '9', toEvent: '10' },
+    { id: 'e10', fromEvent: '10', toEvent: '11' },
+  ],
+};
+
+/**
+ * Flow with hierarchical namespaces (sub-namespaces)
+ */
+const hierarchicalFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'auth.login.started', label: 'Login Started' },
+    { id: '2', name: 'auth.login.validation.credentials', label: 'Check Credentials' },
+    { id: '3', name: 'auth.login.validation.mfa', label: 'Check MFA' },
+    { id: '4', name: 'auth.login.session.create', label: 'Create Session' },
+    { id: '5', name: 'auth.login.completed', label: 'Login Completed' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+    { id: 'e4', fromEvent: '4', toEvent: '5' },
+  ],
+};
+
+/**
+ * Flow with same-namespace sequential events
+ */
+const sameNamespaceFlow: { events: SequenceEvent[]; edges: SequenceEdge[] } = {
+  events: [
+    { id: '1', name: 'processor.step1', label: 'Step 1' },
+    { id: '2', name: 'processor.step2', label: 'Step 2' },
+    { id: '3', name: 'processor.step3', label: 'Step 3' },
+    { id: '4', name: 'external.callback', label: 'External Callback' },
+    { id: '5', name: 'processor.step4', label: 'Step 4' },
+  ],
+  edges: [
+    { id: 'e1', fromEvent: '1', toEvent: '2' },
+    { id: 'e2', fromEvent: '2', toEvent: '3' },
+    { id: 'e3', fromEvent: '3', toEvent: '4' },
+    { id: 'e4', fromEvent: '4', toEvent: '5' },
+  ],
+};
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+/**
+ * Basic two-namespace flow showing authentication
+ */
+export const SimpleFlow: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 500,
+  },
+};
+
+/**
+ * Complex multi-actor e-commerce order flow
+ */
+export const ComplexFlow: Story = {
+  args: {
+    events: complexOrderFlow.events,
+    edges: complexOrderFlow.edges,
+    height: 700,
+  },
+};
+
+/**
+ * Flow with hierarchical namespaces. By default, lanes group at the first
+ * dotted segment — drill in via `openedNamespaces` (see `WithDrillDown`).
+ */
+export const HierarchicalNamespaces: Story = {
+  args: {
+    events: hierarchicalFlow.events,
+    edges: hierarchicalFlow.edges,
+    height: 500,
+  },
+};
+
+/**
+ * Flow testing same-namespace edge rendering
+ */
+export const SameNamespaceEdges: Story = {
+  args: {
+    events: sameNamespaceFlow.events,
+    edges: sameNamespaceFlow.edges,
+    height: 500,
+  },
+};
+
+/**
+ * Interactive drill-down. Click ▶ on a lane header to split it into
+ * its sub-namespaces; click ‹ on a child lane to step back out.
+ */
+export const WithDrillDown: Story = {
+  render: () => {
+    const [opened, setOpened] = useState<string[]>([]);
+
+    const handleToggle = (namespace: string) => {
+      setOpened((prev) =>
+        prev.includes(namespace)
+          ? prev.filter((n) => n !== namespace)
+          : [...prev, namespace]
+      );
+    };
+
+    return (
+      <div>
+        <div style={{ marginBottom: 16 }}>
+          <strong>Opened namespaces:</strong>{' '}
+          {opened.length ? opened.join(', ') : 'none'}
+          <br />
+          <small>▶ on a lane header drills in. ‹ on a child lane steps back out.</small>
+        </div>
+        <SequenceDiagramRenderer
+          events={hierarchicalFlow.events}
+          edges={hierarchicalFlow.edges}
+          height={500}
+          layoutOptions={{ openedNamespaces: opened }}
+          onToggleNamespace={handleToggle}
+        />
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom layout options - wider lanes and more spacing
+ */
+export const CustomLayout: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 500,
+    layoutOptions: {
+      laneWidth: 250,
+      laneGap: 80,
+      eventSpacing: 100,
+    },
+  },
+};
+
+/**
+ * Compact layout for smaller diagrams
+ */
+export const CompactLayout: Story = {
+  args: {
+    events: simpleAuthFlow.events,
+    edges: simpleAuthFlow.edges,
+    height: 400,
+    layoutOptions: {
+      laneWidth: 150,
+      laneGap: 30,
+      eventSpacing: 50,
+    },
+  },
+};
+
+/**
+ * Empty state
+ */
+export const EmptyDiagram: Story = {
+  args: {
+    events: [],
+    edges: [],
+    height: 300,
+  },
+};
+
+/**
+ * Single event (edge case)
+ */
+export const SingleEvent: Story = {
+  args: {
+    events: [{ id: '1', name: 'system.startup', label: 'System Startup' }],
+    edges: [],
+    height: 300,
+  },
+};