@principal-ai/principal-view-react 0.6.6

package/dist/utils/graphConverter.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertToXYFlowNodes = convertToXYFlowNodes;
+exports.convertToXYFlowEdges = convertToXYFlowEdges;
+exports.autoLayoutNodes = autoLayoutNodes;
+const react_1 = require("@xyflow/react");
+/**
+ * Convert our NodeState to xyflow Node format
+ */
+function convertToXYFlowNodes(nodes, configuration, violations = []) {
+    return nodes.map((node) => {
+        const typeDefinition = configuration.nodeTypes[node.type];
+        // Warn if node type is not defined in configuration
+        if (!typeDefinition) {
+            console.warn(`Node type "${node.type}" not found in configuration for node "${node.id}"`);
+        }
+        const hasViolations = violations.some(v => v.context?.nodeId === node.id);
+        return {
+            id: node.id,
+            type: 'custom',
+            position: node.position || { x: 0, y: 0 },
+            data: {
+                label: node.id,
+                typeDefinition,
+                state: node.state,
+                hasViolations,
+                data: node.data,
+            },
+        };
+    });
+}
+/**
+ * Convert our EdgeState to xyflow Edge format
+ */
+function convertToXYFlowEdges(edges, configuration, violations = []) {
+    return edges.map((edge) => {
+        const typeDefinition = configuration.edgeTypes[edge.type];
+        // Warn if edge type is not defined in configuration
+        if (!typeDefinition) {
+            console.warn(`Edge type "${edge.type}" not found in configuration for edge "${edge.id}"`);
+        }
+        const hasViolations = violations.some(v => v.context?.edgeId === edge.id);
+        const edgeWithHandles = edge;
+        // Add arrow marker if edge type is directed
+        const markerEnd = typeDefinition?.directed !== false ? {
+            type: react_1.MarkerType.ArrowClosed,
+            color: typeDefinition?.color || '#888',
+            width: 20,
+            height: 20,
+        } : undefined;
+        return {
+            id: edge.id,
+            source: edge.from,
+            target: edge.to,
+            sourceHandle: edgeWithHandles.sourceHandle,
+            targetHandle: edgeWithHandles.targetHandle,
+            type: 'custom',
+            animated: typeDefinition?.style === 'animated',
+            markerEnd,
+            data: {
+                typeDefinition,
+                hasViolations,
+                data: edge.data,
+            },
+        };
+    });
+}
+/**
+ * Auto-layout nodes if they don't have positions
+ */
+function autoLayoutNodes(nodes, edges, layoutType = 'hierarchical') {
+    // Skip if all nodes have positions
+    const hasPositions = nodes.every(n => n.position.x !== 0 || n.position.y !== 0);
+    if (hasPositions || layoutType === 'manual') {
+        return nodes;
+    }
+    switch (layoutType) {
+        case 'hierarchical':
+            return applyHierarchicalLayout(nodes, edges);
+        case 'circular':
+            return applyCircularLayout(nodes);
+        case 'force-directed':
+            // For now, use hierarchical as fallback
+            // TODO: Implement force-directed with elkjs
+            return applyHierarchicalLayout(nodes, edges);
+        default:
+            return nodes;
+    }
+}
+/**
+ * Simple hierarchical layout algorithm
+ */
+function applyHierarchicalLayout(nodes, edges) {
+    // Build adjacency list
+    const adjacency = new Map();
+    const inDegree = new Map();
+    nodes.forEach(node => {
+        adjacency.set(node.id, []);
+        inDegree.set(node.id, 0);
+    });
+    edges.forEach(edge => {
+        const targets = adjacency.get(edge.source) || [];
+        targets.push(edge.target);
+        adjacency.set(edge.source, targets);
+        inDegree.set(edge.target, (inDegree.get(edge.target) || 0) + 1);
+    });
+    // Topological sort to determine layers
+    const layers = [];
+    const queue = [];
+    // Start with nodes that have no incoming edges
+    inDegree.forEach((degree, nodeId) => {
+        if (degree === 0) {
+            queue.push(nodeId);
+        }
+    });
+    const visited = new Set();
+    while (queue.length > 0) {
+        const currentLayer = [];
+        const layerSize = queue.length;
+        for (let i = 0; i < layerSize; i++) {
+            const nodeId = queue.shift();
+            currentLayer.push(nodeId);
+            visited.add(nodeId);
+            const neighbors = adjacency.get(nodeId) || [];
+            neighbors.forEach(neighbor => {
+                const degree = inDegree.get(neighbor) - 1;
+                inDegree.set(neighbor, degree);
+                if (degree === 0 && !visited.has(neighbor)) {
+                    queue.push(neighbor);
+                }
+            });
+        }
+        if (currentLayer.length > 0) {
+            layers.push(currentLayer);
+        }
+    }
+    // Handle any remaining nodes (cycles or disconnected)
+    const remainingNodes = nodes.filter(n => !visited.has(n.id)).map(n => n.id);
+    if (remainingNodes.length > 0) {
+        layers.push(remainingNodes);
+    }
+    // Position nodes based on layers
+    const LAYER_HEIGHT = 150;
+    const NODE_WIDTH = 200;
+    return nodes.map(node => {
+        const layerIndex = layers.findIndex(layer => layer.includes(node.id));
+        const layer = layers[layerIndex] || [];
+        const positionInLayer = layer.indexOf(node.id);
+        const layerWidth = layer.length * NODE_WIDTH;
+        return {
+            ...node,
+            position: {
+                x: (positionInLayer * NODE_WIDTH) + (NODE_WIDTH / 2) - (layerWidth / 2),
+                y: layerIndex * LAYER_HEIGHT,
+            },
+        };
+    });
+}
+/**
+ * Simple circular layout algorithm
+ */
+function applyCircularLayout(nodes) {
+    const radius = Math.max(200, nodes.length * 30);
+    const angleStep = (2 * Math.PI) / nodes.length;
+    return nodes.map((node, index) => {
+        const angle = index * angleStep;
+        return {
+            ...node,
+            position: {
+                x: radius * Math.cos(angle) + radius,
+                y: radius * Math.sin(angle) + radius,
+            },
+        };
+    });
+}
+//# sourceMappingURL=graphConverter.js.map

package/dist/utils/graphConverter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphConverter.js","sourceRoot":"","sources":["../../src/utils/graphConverter.ts"],"names":[],"mappings":"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"}

package/dist/utils/iconResolver.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * Icon Resolver
+ *
+ * Resolves icon strings to React components. Supports:
+ * 1. Lucide icon names (e.g., "Database", "Settings", "Package")
+ * 2. Emoji/Unicode strings (e.g., "⚙️", "💾", "📦")
+ *
+ * This keeps configurations JSON-serializable while supporting icon libraries.
+ */
+export interface IconProps {
+    icon?: string;
+    size?: number;
+    className?: string;
+}
+/**
+ * Resolves an icon string to a React element
+ *
+ * @param icon - Icon name (Lucide) or emoji/text string
+ * @param size - Icon size in pixels (default: 20)
+ * @param className - Optional CSS class
+ * @returns React element or null
+ */
+export declare function resolveIcon(icon?: string, size?: number, className?: string): React.ReactNode;
+/**
+ * Icon component that resolves icon strings
+ */
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=iconResolver.d.ts.map

package/dist/utils/iconResolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconResolver.d.ts","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;;;;;;GAQG;AAEH,MAAM,WAAW,SAAS;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,GAAE,MAAW,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAcjG;AAED;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAEpC,CAAC"}

package/dist/utils/iconResolver.js

@@ -0,0 +1,68 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+exports.resolveIcon = resolveIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LucideIcons = __importStar(require("lucide-react"));
+/**
+ * Resolves an icon string to a React element
+ *
+ * @param icon - Icon name (Lucide) or emoji/text string
+ * @param size - Icon size in pixels (default: 20)
+ * @param className - Optional CSS class
+ * @returns React element or null
+ */
+function resolveIcon(icon, size = 20, className) {
+    if (!icon)
+        return null;
+    // Try to resolve as Lucide icon first
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const LucideIcon = LucideIcons[icon];
+    // Check if it's a valid React component (function or object with $$typeof)
+    if (LucideIcon && (typeof LucideIcon === 'function' || typeof LucideIcon === 'object')) {
+        return (0, jsx_runtime_1.jsx)(LucideIcon, { size: size, className: className });
+    }
+    // Fall back to rendering as text (emoji or unicode)
+    return (0, jsx_runtime_1.jsx)("span", { className: className, style: { fontSize: `${size}px` }, children: icon });
+}
+/**
+ * Icon component that resolves icon strings
+ */
+const Icon = ({ icon, size = 20, className }) => {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: resolveIcon(icon, size, className) });
+};
+exports.Icon = Icon;
+//# sourceMappingURL=iconResolver.js.map

package/dist/utils/iconResolver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconResolver.js","sourceRoot":"","sources":["../../src/utils/iconResolver.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,kCAcC;;AAxCD,0DAA4C;AAkB5C;;;;;;;GAOG;AACH,SAAgB,WAAW,CAAC,IAAa,EAAE,OAAe,EAAE,EAAE,SAAkB;IAC9E,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IAEvB,sCAAsC;IACtC,8DAA8D;IAC9D,MAAM,UAAU,GAAI,WAAmB,CAAC,IAAI,CAAC,CAAC;IAE9C,2EAA2E;IAC3E,IAAI,UAAU,IAAI,CAAC,OAAO,UAAU,KAAK,UAAU,IAAI,OAAO,UAAU,KAAK,QAAQ,CAAC,EAAE,CAAC;QACvF,OAAO,uBAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAAC;IAC1D,CAAC;IAED,oDAAoD;IACpD,OAAO,iCAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,GAAG,IAAI,IAAI,EAAE,YAAG,IAAI,GAAQ,CAAC;AACrF,CAAC;AAED;;GAEG;AACI,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1E,OAAO,2DAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,GAAI,CAAC;AACnD,CAAC,CAAC;AAFW,QAAA,IAAI,QAEf"}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@principal-ai/principal-view-react",
+  "version": "0.6.6",
+  "description": "React components for graph-based principal view framework",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "clean": "rm -rf dist",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@principal-ai/principal-view-core": "^0.5.6",
+    "@xyflow/react": "^12.0.0",
+    "elkjs": "^0.9.0",
+    "framer-motion": "^11.0.0",
+    "lucide-react": "^0.554.0",
+    "zustand": "^4.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.5.0",
+    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-links": "^8.5.0",
+    "@storybook/blocks": "^8.5.0",
+    "@storybook/react": "^8.5.0",
+    "@storybook/react-vite": "^8.5.0",
+    "@storybook/test": "^8.5.0",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.0.0",
+    "happy-dom": "^12.10.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "storybook": "^8.5.0",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "keywords": [
+    "validation",
+    "graph",
+    "visualization",
+    "react",
+    "testing"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}

package/src/components/ConfigurationSelector.tsx

@@ -0,0 +1,147 @@
+import React from 'react';
+import type { ConfigurationFile } from '@principal-ai/principal-view-core';
+
+export interface ConfigurationSelectorProps {
+  /** Available configurations */
+  configurations: ConfigurationFile[];
+
+  /** Currently selected configuration name */
+  selectedConfig: string;
+
+  /** Callback when configuration changes */
+  onConfigChange: (configName: string) => void;
+
+  /** Optional custom className */
+  className?: string;
+
+  /** Optional custom styles */
+  style?: React.CSSProperties;
+
+  /** Whether to show description */
+  showDescription?: boolean;
+
+  /** Whether to show version */
+  showVersion?: boolean;
+
+  /** Label text for the selector */
+  label?: string;
+}
+
+/**
+ * Configuration selector component for switching between multiple graph configurations
+ *
+ * @example
+ * ```tsx
+ * const [selectedConfig, setSelectedConfig] = useState('simple-service');
+ *
+ * <ConfigurationSelector
+ *   configurations={loadedConfigs}
+ *   selectedConfig={selectedConfig}
+ *   onConfigChange={setSelectedConfig}
+ *   showDescription
+ * />
+ * ```
+ */
+export const ConfigurationSelector: React.FC<ConfigurationSelectorProps> = ({
+  configurations,
+  selectedConfig,
+  onConfigChange,
+  className,
+  style,
+  showDescription = false,
+  showVersion = false,
+  label = 'Graph Configuration',
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onConfigChange(event.target.value);
+  };
+
+  const selectedConfigData = configurations.find(c => c.name === selectedConfig);
+
+  const defaultStyle: React.CSSProperties = {
+    backgroundColor: 'white',
+    padding: '12px 16px',
+    borderRadius: '8px',
+    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    ...style,
+  };
+
+  const labelStyle: React.CSSProperties = {
+    display: 'block',
+    fontSize: '14px',
+    fontWeight: 600,
+    marginBottom: '8px',
+    color: '#333',
+  };
+
+  const selectStyle: React.CSSProperties = {
+    width: '100%',
+    padding: '8px 12px',
+    fontSize: '14px',
+    border: '1px solid #ddd',
+    borderRadius: '4px',
+    backgroundColor: 'white',
+    cursor: 'pointer',
+    outline: 'none',
+    transition: 'border-color 0.2s',
+  };
+
+  const infoStyle: React.CSSProperties = {
+    marginTop: '8px',
+    fontSize: '12px',
+    color: '#666',
+    lineHeight: '1.5',
+  };
+
+  if (configurations.length === 0) {
+    return (
+      <div className={className} style={defaultStyle}>
+        <div style={{ ...labelStyle, color: '#999' }}>
+          No configurations available
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className} style={defaultStyle}>
+      <label style={labelStyle} htmlFor="config-selector">
+        {label}
+      </label>
+
+      <select
+        id="config-selector"
+        value={selectedConfig}
+        onChange={handleChange}
+        style={selectStyle}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.borderColor = '#4A90E2';
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.borderColor = '#ddd';
+        }}
+      >
+        {configurations.map((config) => (
+          <option key={config.name} value={config.name}>
+            {config.config.metadata.name}
+            {showVersion && config.config.metadata.version && ` (v${config.config.metadata.version})`}
+          </option>
+        ))}
+      </select>
+
+      {selectedConfigData && (showDescription || showVersion) && (
+        <div style={infoStyle}>
+          {showVersion && selectedConfigData.config.metadata.version && (
+            <div style={{ marginBottom: '4px' }}>
+              <strong>Version:</strong> {selectedConfigData.config.metadata.version}
+            </div>
+          )}
+          {showDescription && selectedConfigData.config.metadata.description && (
+            <div>{selectedConfigData.config.metadata.description}</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};