@kiberon-labs/behave-graph-flow 1.0.0 → 2.0.0

package/stories/components/panels/events.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EventsPanel } from '@/components/panels/events';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof EventsPanel> = {
+  title: 'Components/Panels/EventsPanel',
+  component: EventsPanel,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'EventsPanel component for displaying and managing events.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof EventsPanel>;
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default EventsPanel.'
+      }
+    }
+  }
+};

package/stories/components/panels/graphRunner.stories.tsx

@@ -0,0 +1,317 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { GraphRunnerPanel } from '@/plugin/graphrunner/panel';
+import { graphRunnerClientPlugin } from '@/plugin/graphrunner';
+import { System } from '@/system/system';
+import {
+  registerCoreProfile,
+  writeNodeSpecsToJSON
+} from '@kiberon-labs/behave-graph';
+import { SystemProvider } from '@/system/provider';
+
+const meta: Meta<typeof GraphRunnerPanel> = {
+  title: 'Components/Panels/GraphRunner',
+  component: GraphRunnerPanel,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'GraphRunnerPanel component for managing remote graph execution via WebSocket connections.'
+      }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof GraphRunnerPanel>;
+
+/**
+ * Default story showing the GraphRunnerPanel in disconnected state
+ */
+export const Disconnected: Story = {
+  render: () => {
+    // Create a system with the graphRunnerClient plugin
+    const coreRegistry = registerCoreProfile({
+      nodes: {},
+      values: {},
+      dependencies: {}
+    });
+    const nodeSpecs = writeNodeSpecsToJSON(coreRegistry);
+    const nodeRegistry = {
+      values: coreRegistry.values,
+      specs: nodeSpecs
+    };
+
+    const system = new System(nodeRegistry);
+    system.registerPlugin(graphRunnerClientPlugin);
+
+    return (
+      <SystemProvider value={system}>
+        <GraphRunnerPanel system={system} />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default disconnected state with connection form.'
+      }
+    }
+  }
+};
+
+/**
+ * Story showing the GraphRunnerPanel with connection configuration
+ */
+export const WithConfiguration: Story = {
+  render: () => {
+    const coreRegistry = registerCoreProfile({
+      nodes: {},
+      values: {},
+      dependencies: {}
+    });
+    const nodeSpecs = writeNodeSpecsToJSON(coreRegistry);
+    const nodeRegistry = {
+      values: coreRegistry.values,
+      specs: nodeSpecs
+    };
+
+    const system = new System(nodeRegistry);
+    system.registerPlugin(graphRunnerClientPlugin);
+
+    // Pre-configure connection settings
+    system.runner.store.getState().setConnectionConfig({
+      url: 'ws://localhost:8080',
+      auth: { type: 'bearer' },
+      autoReconnect: true
+    });
+
+    return (
+      <SystemProvider value={system}>
+        <GraphRunnerPanel system={system} />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'GraphRunnerPanel with pre-configured connection settings.'
+      }
+    }
+  }
+};
+
+/**
+ * Story simulating a connected state with server metadata
+ */
+export const Connected: Story = {
+  render: () => {
+    const coreRegistry = registerCoreProfile({
+      nodes: {},
+      values: {},
+      dependencies: {}
+    });
+    const nodeSpecs = writeNodeSpecsToJSON(coreRegistry);
+    const nodeRegistry = {
+      values: coreRegistry.values,
+      specs: nodeSpecs
+    };
+
+    const system = new System(nodeRegistry);
+    system.registerPlugin(graphRunnerClientPlugin);
+
+    const store = system.runner.store;
+
+    // Simulate connected state
+    store.getState().setConnectionState('connected');
+    store.getState().setConnectionConfig({
+      url: 'ws://localhost:8080',
+      auth: { type: 'none' },
+      autoReconnect: true
+    });
+    store.getState().setConnectionInfo({
+      serverId: 'demo-server-01',
+      userId: 'user-123',
+      sessionId: 'session-abc-456',
+      authenticated: true,
+      capabilities: {
+        execute: true,
+        pause: true,
+        step: true,
+        variables: true,
+        events: true
+      }
+    });
+
+    // Add sample server variables
+    store.getState().setServerVariables([
+      { name: 'playerHealth', type: 'float', currentValue: 100 },
+      { name: 'gameScore', type: 'integer', currentValue: 1500 },
+      { name: 'playerName', type: 'string', currentValue: 'Hero' },
+      { name: 'isGameActive', type: 'boolean', currentValue: true }
+    ]);
+
+    // Add sample server events
+    store.getState().setServerEvents([
+      {
+        id: 'event-1',
+        name: 'onPlayerDamage',
+        description: 'Triggered when player takes damage',
+        readonly: true,
+        parameters: [
+          { name: 'damage', valueTypeName: 'number', defaultValue: 0 },
+          { name: 'source', valueTypeName: 'string', defaultValue: 'xx' }
+        ]
+      },
+      {
+        id: 'event-2',
+        name: 'onScoreUpdate',
+        description: 'Triggered when score changes',
+        readonly: true,
+        parameters: [
+          { name: 'newScore', valueTypeName: 'number', defaultValue: 0 },
+          { name: 'delta', valueTypeName: 'number', defaultValue: 0 }
+        ]
+      }
+    ]);
+
+    // Add sample node types
+    store.getState().setNodeTypes([
+      {
+        type: 'game/dealDamage',
+        label: 'Deal Damage',
+        description: 'Applies damage to a target',
+        category: 'Game',
+        inputs: [
+          { name: 'target', type: 'string' },
+          { name: 'amount', type: 'float' }
+        ],
+        outputs: [{ name: 'success', type: 'boolean' }]
+      },
+      {
+        type: 'game/updateScore',
+        label: 'Update Score',
+        description: 'Modifies the player score',
+        category: 'Game',
+        inputs: [{ name: 'delta', type: 'integer' }],
+        outputs: [{ name: 'newScore', type: 'integer' }]
+      }
+    ]);
+
+    // Add sample message activity
+    store.getState().addMessageActivity('sent', {
+      type: 'connect',
+      id: 'msg-001'
+    });
+    store.getState().addMessageActivity('received', {
+      type: 'welcome',
+      id: 'msg-002',
+      serverId: 'demo-server-01',
+      capabilities: {
+        execute: true,
+        pause: true,
+        step: true,
+        variables: true,
+        events: true
+      }
+    });
+    store.getState().addMessageActivity('sent', {
+      type: 'getMetadata',
+      id: 'msg-003'
+    });
+
+    return (
+      <SystemProvider value={system}>
+        <GraphRunnerPanel system={system} />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'GraphRunnerPanel in connected state with server variables, events, node types, and message activity.'
+      }
+    }
+  }
+};
+
+/**
+ * Story showing the connecting state
+ */
+export const Connecting: Story = {
+  render: () => {
+    const coreRegistry = registerCoreProfile({
+      nodes: {},
+      values: {},
+      dependencies: {}
+    });
+    const nodeSpecs = writeNodeSpecsToJSON(coreRegistry);
+    const nodeRegistry = {
+      values: coreRegistry.values,
+      specs: nodeSpecs
+    };
+
+    const system = new System(nodeRegistry);
+    system.registerPlugin(graphRunnerClientPlugin);
+
+    system.runner.store.getState().setConnectionState('connecting');
+    system.runner.store.getState().setConnectionConfig({
+      url: 'ws://localhost:8080',
+      auth: { type: 'none' },
+      autoReconnect: true
+    });
+
+    return (
+      <SystemProvider value={system}>
+        <GraphRunnerPanel system={system} />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'GraphRunnerPanel in connecting state.'
+      }
+    }
+  }
+};
+
+/**
+ * Story showing an error state
+ */
+export const WithError: Story = {
+  render: () => {
+    const coreRegistry = registerCoreProfile({
+      nodes: {},
+      values: {},
+      dependencies: {}
+    });
+    const nodeSpecs = writeNodeSpecsToJSON(coreRegistry);
+    const nodeRegistry = {
+      values: coreRegistry.values,
+      specs: nodeSpecs
+    };
+
+    const system = new System(nodeRegistry);
+    system.registerPlugin(graphRunnerClientPlugin);
+
+    system.runner.store.getState().setConnectionState('disconnected');
+    system.runner.store
+      .getState()
+      .setError('Failed to connect: Connection timeout after 30 seconds');
+
+    return (
+      <SystemProvider value={system}>
+        <GraphRunnerPanel system={system} />
+      </SystemProvider>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'GraphRunnerPanel displaying a connection error.'
+      }
+    }
+  }
+};

package/stories/components/panels/history.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { HistoryPanel } from '@/components/panels/history';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof HistoryPanel> = {
+  title: 'Components/Panels/HistoryPanel',
+  component: HistoryPanel,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'HistoryPanel component for displaying action history.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof HistoryPanel>;
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default HistoryPanel.'
+      }
+    }
+  }
+};

package/stories/components/panels/keymaps.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { KeymapsPanel } from '@/components/panels/keymaps';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof KeymapsPanel> = {
+  title: 'Components/Panels/Keymaps',
+  component: KeymapsPanel
+};
+
+export default meta;
+type Story = StoryObj<typeof KeymapsPanel>;
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <KeymapsPanel />
+      </DefaultSystemProvider>
+    );
+  },
+  args: {}
+};

package/stories/components/panels/legend.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LegendPanel } from '@/components/panels/legend';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof LegendPanel> = {
+  title: 'Components/Panels/LegendPanel',
+  component: LegendPanel,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'LegendPanel component for displaying graph legends.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof LegendPanel>;
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default LegendPanel.'
+      }
+    }
+  }
+};

package/stories/components/panels/logs.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { LogsPanel } from '@/components/panels/logs';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof LogsPanel> = {
+  title: 'Components/Panels/Logs',
+  component: LogsPanel,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof LogsPanel>;
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <LogsPanel />
+      </DefaultSystemProvider>
+    );
+  },
+  args: {}
+};

package/stories/components/panels/nodeInputs.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NodeInputsPanel } from '@/components/panels/nodeInputs';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof NodeInputsPanel> = {
+  title: 'Components/Panels/NodeInputs',
+  component: NodeInputsPanel
+};
+
+export default meta;
+type Story = StoryObj<typeof NodeInputsPanel>;
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <NodeInputsPanel />
+      </DefaultSystemProvider>
+    );
+  },
+  args: {}
+};

package/stories/components/panels/nodePicker.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { NodePickerPanel } from '@/components/panels/nodePicker';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof NodePickerPanel> = {
+  title: 'Components/Panels/NodePickerPanel',
+  component: NodePickerPanel,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: 'NodePickerPanel component for picking nodes from a list.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof NodePickerPanel>;
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default NodePickerPanel.'
+      }
+    }
+  }
+};

package/stories/components/panels/panel.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PanelPanel } from '@/components/panels/panel';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof PanelPanel> = {
+  title: 'Components/Panels/PanelPanel',
+  component: PanelPanel,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'PanelPanel component for displaying all registered panels and allowing users to open them.'
+      }
+    }
+  }
+};
+export default meta;
+
+type Story = StoryObj<typeof PanelPanel>;
+
+export const Default: Story = {
+  args: {},
+  parameters: {
+    docs: {
+      description: {
+        story: 'Default PanelPanel showing all registered panels in the system.'
+      }
+    }
+  }
+};

package/stories/components/panels/search.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SearchPanel } from '@/components/panels/search';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof SearchPanel> = {
+  title: 'Components/Panels/Search',
+  component: SearchPanel,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof SearchPanel>;
+export const Default: Story = {
+  render: () => {
+    return (
+      <DefaultSystemProvider>
+        <SearchPanel />
+      </DefaultSystemProvider>
+    );
+  },
+  args: {}
+};

package/stories/components/panels/systemSettings.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Settings } from '@/components/panels/systemSettings';
+import { DefaultSystemProvider } from '~/defaults/defaultStoryProvider';
+
+const meta: Meta<typeof Settings> = {
+  component: Settings,
+  decorators: [
+    (Story) => (
+      <DefaultSystemProvider>
+        <Story />
+      </DefaultSystemProvider>
+    )
+  ],
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {}
+};