@principal-ai/subsystems-react 0.17.0 → 0.18.0

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

@@ -1,370 +0,0 @@
-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

@@ -1,255 +0,0 @@
-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,
-  },
-};