@principal-ai/principal-view-react 0.7.15 → 0.7.17

package/src/stories/IndustryThemes.stories.tsx

@@ -1,483 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { GraphRenderer } from '../components/GraphRenderer';
-import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
-import {
-  terminalTheme,
-  matrixTheme,
-  slateTheme,
-  regalTheme,
-  glassmorphismTheme,
-  landingPageTheme,
-  defaultEditorTheme,
-  ThemeProvider,
-} from '@principal-ade/industry-theme';
-
-const meta = {
-  title: 'Themes/IndustryThemes',
-  component: GraphRenderer,
-  parameters: {
-    layout: 'fullscreen',
-  },
-} satisfies Meta<typeof GraphRenderer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// ============================================================================
-// Theme Registry from @principal-ade/industry-theme
-// ============================================================================
-
-interface IndustryTheme {
-  colors: {
-    text: string;
-    background: string;
-    primary: string;
-    secondary: string;
-    accent: string;
-    success: string;
-    warning: string;
-    error: string;
-    info: string;
-    border: string;
-    surface: string;
-    [key: string]: string;
-  };
-  fonts: {
-    body: string;
-    heading: string;
-    monospace: string;
-  };
-  [key: string]: unknown;
-}
-
-const themes: Record<string, { theme: IndustryTheme; name: string; description: string }> = {
-  terminal: {
-    theme: terminalTheme as IndustryTheme,
-    name: 'Terminal',
-    description: 'Dark terminal-style theme with monospace fonts',
-  },
-  matrix: {
-    theme: matrixTheme as IndustryTheme,
-    name: 'Matrix',
-    description: 'Green-on-black hacker aesthetic',
-  },
-  slate: {
-    theme: slateTheme as IndustryTheme,
-    name: 'Slate',
-    description: 'Modern dark gray theme with amber accents',
-  },
-  regal: {
-    theme: regalTheme as IndustryTheme,
-    name: 'Regal',
-    description: 'Elegant dark theme with gold accents',
-  },
-  glassmorphism: {
-    theme: glassmorphismTheme as IndustryTheme,
-    name: 'Glassmorphism',
-    description: 'Frosted glass effect with purple tones',
-  },
-  landingPage: {
-    theme: landingPageTheme as IndustryTheme,
-    name: 'Landing Page',
-    description: 'Cyan accent on dark background',
-  },
-  editor: {
-    theme: defaultEditorTheme as IndustryTheme,
-    name: 'Editor',
-    description: 'VS Code inspired dark theme',
-  },
-};
-
-// ============================================================================
-// Sample Canvas that uses theme colors
-// ============================================================================
-
-function createThemedCanvas(theme: IndustryTheme): ExtendedCanvas {
-  const colors = theme.colors;
-
-  return {
-    nodes: [
-      {
-        id: 'api-gateway',
-        type: 'text',
-        x: 100,
-        y: 200,
-        width: 140,
-        height: 70,
-        text: '# API Gateway',
-        pv: {
-          nodeType: 'api-gateway',
-          shape: 'rectangle',
-          icon: 'Globe',
-          fill: colors.primary,
-        },
-      },
-      {
-        id: 'auth-service',
-        type: 'text',
-        x: 320,
-        y: 100,
-        width: 140,
-        height: 70,
-        text: '# Auth Service',
-        pv: {
-          nodeType: 'service',
-          shape: 'hexagon',
-          icon: 'Shield',
-          fill: colors.success,
-        },
-      },
-      {
-        id: 'user-service',
-        type: 'text',
-        x: 320,
-        y: 300,
-        width: 140,
-        height: 70,
-        text: '# User Service',
-        pv: {
-          nodeType: 'service',
-          shape: 'hexagon',
-          icon: 'Users',
-          fill: colors.info,
-        },
-      },
-      {
-        id: 'database',
-        type: 'text',
-        x: 540,
-        y: 200,
-        width: 100,
-        height: 100,
-        text: '# Database',
-        pv: {
-          nodeType: 'database',
-          shape: 'circle',
-          icon: 'Database',
-          fill: colors.secondary,
-        },
-      },
-      {
-        id: 'cache',
-        type: 'text',
-        x: 540,
-        y: 350,
-        width: 80,
-        height: 80,
-        text: '# Cache',
-        pv: {
-          nodeType: 'cache',
-          shape: 'diamond',
-          icon: 'Zap',
-          fill: colors.warning,
-        },
-      },
-      {
-        id: 'queue',
-        type: 'text',
-        x: 320,
-        y: 450,
-        width: 80,
-        height: 80,
-        text: '# Queue',
-        pv: {
-          nodeType: 'queue',
-          shape: 'diamond',
-          icon: 'Inbox',
-          fill: colors.accent,
-        },
-      },
-    ],
-    edges: [
-      {
-        id: 'e1',
-        fromNode: 'api-gateway',
-        toNode: 'auth-service',
-        fromSide: 'right',
-        toSide: 'left',
-        pv: { edgeType: 'http' },
-      },
-      {
-        id: 'e2',
-        fromNode: 'api-gateway',
-        toNode: 'user-service',
-        fromSide: 'right',
-        toSide: 'left',
-        pv: { edgeType: 'http' },
-      },
-      {
-        id: 'e3',
-        fromNode: 'auth-service',
-        toNode: 'database',
-        fromSide: 'right',
-        toSide: 'left',
-        pv: { edgeType: 'query' },
-      },
-      {
-        id: 'e4',
-        fromNode: 'user-service',
-        toNode: 'database',
-        fromSide: 'right',
-        toSide: 'left',
-        pv: { edgeType: 'query' },
-      },
-      {
-        id: 'e5',
-        fromNode: 'user-service',
-        toNode: 'cache',
-        fromSide: 'right',
-        toSide: 'top',
-        pv: { edgeType: 'cache' },
-      },
-      {
-        id: 'e6',
-        fromNode: 'user-service',
-        toNode: 'queue',
-        fromSide: 'bottom',
-        toSide: 'top',
-        pv: { edgeType: 'async' },
-      },
-    ],
-    pv: {
-      version: '1.0.0',
-      name: 'Themed Architecture',
-      edgeTypes: {
-        http: { style: 'solid', color: colors.primary, directed: true },
-        query: { style: 'dashed', color: colors.secondary, directed: true },
-        cache: { style: 'dotted', color: colors.warning, directed: true },
-        async: { style: 'dashed', color: colors.accent, directed: true },
-      },
-    },
-  };
-}
-
-// ============================================================================
-// Interactive Theme Switcher Component
-// ============================================================================
-
-const ThemeSwitcher = () => {
-  const [selectedTheme, setSelectedTheme] = useState<string>('terminal');
-  const themeConfig = themes[selectedTheme];
-  const canvas = createThemedCanvas(themeConfig.theme);
-
-  return (
-    <ThemeProvider theme={themeConfig.theme}>
-      <div
-        style={{
-          width: '100%',
-          height: '100vh',
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: themeConfig.theme.colors.background,
-          color: themeConfig.theme.colors.text,
-          fontFamily: themeConfig.theme.fonts.body,
-        }}
-      >
-        {/* Theme Selector Header */}
-        <div
-          style={{
-            padding: '16px 24px',
-            backgroundColor: themeConfig.theme.colors.surface,
-            display: 'flex',
-            alignItems: 'center',
-            gap: '16px',
-            borderBottom: `1px solid ${themeConfig.theme.colors.border}`,
-          }}
-        >
-          <label style={{ fontWeight: 600, fontSize: '14px' }}>Theme:</label>
-          <select
-            value={selectedTheme}
-            onChange={(e) => setSelectedTheme(e.target.value)}
-            style={{
-              padding: '8px 16px',
-              fontSize: '14px',
-              borderRadius: '6px',
-              border: `1px solid ${themeConfig.theme.colors.border}`,
-              backgroundColor: themeConfig.theme.colors.background,
-              color: themeConfig.theme.colors.text,
-              cursor: 'pointer',
-              minWidth: '200px',
-            }}
-          >
-            {Object.entries(themes).map(([key, config]) => (
-              <option key={key} value={key}>
-                {config.name}
-              </option>
-            ))}
-          </select>
-
-          <div style={{ marginLeft: 'auto', fontSize: '12px', opacity: 0.7 }}>
-            @principal-ade/industry-theme
-          </div>
-        </div>
-
-        {/* Theme Description */}
-        <div
-          style={{
-            padding: '12px 24px',
-            backgroundColor: themeConfig.theme.colors.surface,
-            borderBottom: `1px solid ${themeConfig.theme.colors.border}`,
-            fontSize: '13px',
-            opacity: 0.8,
-          }}
-        >
-          <strong>{themeConfig.name}</strong>: {themeConfig.description}
-        </div>
-
-        {/* Graph Renderer */}
-        <div style={{ flex: 1, position: 'relative' }}>
-          <GraphRenderer canvas={canvas} width="100%" height="100%" />
-        </div>
-
-        {/* Color Palette Legend */}
-        <div
-          style={{
-            padding: '16px 24px',
-            backgroundColor: themeConfig.theme.colors.surface,
-            borderTop: `1px solid ${themeConfig.theme.colors.border}`,
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '16px',
-          }}
-        >
-          {['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info'].map(
-            (colorKey) => (
-              <div
-                key={colorKey}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                  fontSize: '12px',
-                }}
-              >
-                <div
-                  style={{
-                    width: '16px',
-                    height: '16px',
-                    borderRadius: '4px',
-                    backgroundColor: themeConfig.theme.colors[colorKey],
-                    border: `1px solid ${themeConfig.theme.colors.border}`,
-                  }}
-                />
-                <span style={{ fontFamily: themeConfig.theme.fonts.monospace }}>{colorKey}</span>
-              </div>
-            )
-          )}
-        </div>
-      </div>
-    </ThemeProvider>
-  );
-};
-
-// ============================================================================
-// Stories
-// ============================================================================
-
-export const ThemeSwitcherDemo: Story = {
-  render: () => <ThemeSwitcher />,
-  parameters: {
-    docs: {
-      description: {
-        story: `
-**Industry Theme Switcher**
-
-This demo uses the \`@principal-ade/industry-theme\` package to apply different visual themes to the graph.
-
-Available themes:
-- **Terminal**: Dark terminal-style with monospace fonts
-- **Matrix**: Green-on-black hacker aesthetic
-- **Slate**: Modern dark gray with amber accents
-- **Regal**: Elegant dark theme with gold accents
-- **Glassmorphism**: Frosted glass effect with purple tones
-- **Landing Page**: Cyan accent on dark background
-- **Editor**: VS Code inspired dark theme
-
-Each theme provides a cohesive color palette that is applied to:
-- Node fill colors
-- Edge colors
-- Background and UI elements
-        `,
-      },
-    },
-  },
-};
-
-// Individual theme stories for direct access
-export const TerminalTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(terminalTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: terminalTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};
-
-export const MatrixTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(matrixTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: matrixTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};
-
-export const SlateTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(slateTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: slateTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};
-
-export const RegalTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(regalTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: regalTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};
-
-export const GlassmorphismTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(glassmorphismTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: glassmorphismTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};
-
-export const LandingPageTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(landingPageTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: landingPageTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};
-
-export const EditorTheme: Story = {
-  render: () => {
-    const canvas = createThemedCanvas(defaultEditorTheme as IndustryTheme);
-    return (
-      <div style={{ backgroundColor: defaultEditorTheme.colors.background, padding: 20 }}>
-        <GraphRenderer canvas={canvas} width={800} height={500} />
-      </div>
-    );
-  },
-};

package/src/stories/MetricsDashboard.stories.tsx

@@ -1,227 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MetricsDashboard } from '../components/MetricsDashboard';
-import type { GraphMetrics } from '@principal-ai/principal-view-core';
-
-const meta = {
-  title: 'Components/MetricsDashboard',
-  component: MetricsDashboard,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof MetricsDashboard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Sample metrics
-const sampleMetrics: GraphMetrics = {
-  nodes: {
-    total: 25,
-    byType: {
-      process: 10,
-      data: 8,
-      external: 7,
-    },
-    byStatus: {
-      active: 20,
-      inactive: 3,
-      error: 2,
-    },
-  },
-  edges: {
-    total: 42,
-    byType: {
-      dataflow: 30,
-      control: 8,
-      dependency: 4,
-    },
-    byStatus: {
-      active: 38,
-      inactive: 2,
-      error: 2,
-    },
-  },
-  events: {
-    total: 156,
-    byCategory: {
-      node: 85,
-      edge: 45,
-      validation: 15,
-      system: 11,
-    },
-    byType: {
-      node_added: 25,
-      node_updated: 35,
-      node_removed: 10,
-      edge_added: 30,
-      edge_updated: 10,
-      edge_removed: 5,
-      validation_run: 15,
-      system_start: 5,
-      system_stop: 5,
-      custom: 16,
-    },
-    rate: {
-      perSecond: 2.5,
-      perMinute: 150,
-      perHour: 9000,
-    },
-  },
-  validation: {
-    violations: 3,
-    warnings: 7,
-    healthScore: 0.92,
-    lastRun: Date.now() - 30000,
-  },
-  performance: {
-    avgEventProcessingTime: 15,
-    avgValidationTime: 120,
-    memoryUsage: 45.2,
-  },
-};
-
-const healthyMetrics: GraphMetrics = {
-  nodes: {
-    total: 10,
-    byType: { process: 5, data: 5 },
-    byStatus: { active: 10, inactive: 0, error: 0 },
-  },
-  edges: {
-    total: 12,
-    byType: { dataflow: 12 },
-    byStatus: { active: 12, inactive: 0, error: 0 },
-  },
-  events: {
-    total: 50,
-    byCategory: { node: 30, edge: 15, validation: 5, system: 0 },
-    byType: {
-      node_added: 10,
-      node_updated: 15,
-      node_removed: 5,
-      edge_added: 12,
-      edge_updated: 3,
-      edge_removed: 0,
-      validation_run: 5,
-      system_start: 0,
-      system_stop: 0,
-      custom: 0,
-    },
-    rate: { perSecond: 1.0, perMinute: 60, perHour: 3600 },
-  },
-  validation: {
-    violations: 0,
-    warnings: 0,
-    healthScore: 1.0,
-    lastRun: Date.now() - 5000,
-  },
-  performance: {
-    avgEventProcessingTime: 8,
-    avgValidationTime: 50,
-    memoryUsage: 25.5,
-  },
-};
-
-const criticalMetrics: GraphMetrics = {
-  nodes: {
-    total: 50,
-    byType: { process: 20, data: 15, external: 15 },
-    byStatus: { active: 30, inactive: 10, error: 10 },
-  },
-  edges: {
-    total: 80,
-    byType: { dataflow: 50, control: 20, dependency: 10 },
-    byStatus: { active: 50, inactive: 15, error: 15 },
-  },
-  events: {
-    total: 500,
-    byCategory: { node: 200, edge: 180, validation: 100, system: 20 },
-    byType: {
-      node_added: 50,
-      node_updated: 100,
-      node_removed: 30,
-      edge_added: 80,
-      edge_updated: 70,
-      edge_removed: 30,
-      validation_run: 100,
-      system_start: 10,
-      system_stop: 10,
-      custom: 20,
-    },
-    rate: { perSecond: 5.2, perMinute: 312, perHour: 18720 },
-  },
-  validation: {
-    violations: 25,
-    warnings: 40,
-    healthScore: 0.35,
-    lastRun: Date.now() - 60000,
-  },
-  performance: {
-    avgEventProcessingTime: 45,
-    avgValidationTime: 350,
-    memoryUsage: 85.8,
-  },
-};
-
-export const Default: Story = {
-  args: {
-    metrics: sampleMetrics,
-  },
-};
-
-export const HealthySystem: Story = {
-  args: {
-    metrics: healthyMetrics,
-  },
-};
-
-export const CriticalSystem: Story = {
-  args: {
-    metrics: criticalMetrics,
-  },
-};
-
-export const MinimalGraph: Story = {
-  args: {
-    metrics: {
-      nodes: {
-        total: 2,
-        byType: { process: 1, data: 1 },
-        byStatus: { active: 2, inactive: 0, error: 0 },
-      },
-      edges: {
-        total: 1,
-        byType: { dataflow: 1 },
-        byStatus: { active: 1, inactive: 0, error: 0 },
-      },
-      events: {
-        total: 5,
-        byCategory: { node: 2, edge: 1, validation: 1, system: 1 },
-        byType: {
-          node_added: 2,
-          node_updated: 0,
-          node_removed: 0,
-          edge_added: 1,
-          edge_updated: 0,
-          edge_removed: 0,
-          validation_run: 1,
-          system_start: 1,
-          system_stop: 0,
-          custom: 0,
-        },
-        rate: { perSecond: 0.1, perMinute: 6, perHour: 360 },
-      },
-      validation: {
-        violations: 0,
-        warnings: 1,
-        healthScore: 0.95,
-        lastRun: Date.now() - 10000,
-      },
-      performance: {
-        avgEventProcessingTime: 5,
-        avgValidationTime: 30,
-        memoryUsage: 12.3,
-      },
-    },
-  },
-};