@principal-ai/file-city-react 0.3.0

package/dist/components/CityViewWithReactFlow.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import 'reactflow/dist/style.css';
+import { FileTree } from '@principal-ai/repository-abstraction';
+import { CodebaseView } from '@principal-ai/alexandria-core-library';
+export interface CityViewWithReactFlowProps {
+    fileTree: FileTree;
+    gridConfig?: CodebaseView;
+    onCellClick?: (cellId: string) => void;
+    cellWidth?: number;
+    cellHeight?: number;
+    cellSpacing?: number;
+}
+export declare const CityViewWithReactFlow: React.FC<CityViewWithReactFlowProps>;
+//# sourceMappingURL=CityViewWithReactFlow.d.ts.map

package/dist/components/CityViewWithReactFlow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CityViewWithReactFlow.d.ts","sourceRoot":"","sources":["../../src/components/CityViewWithReactFlow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAepD,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAIrE,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,QAAQ,CAAC;IACnB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA+UD,eAAO,MAAM,qBAAqB,sCAA6B,CAAC"}

package/dist/components/CityViewWithReactFlow.js

@@ -0,0 +1,266 @@
+"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.CityViewWithReactFlow = void 0;
+const react_1 = __importStar(require("react"));
+const reactflow_1 = __importStar(require("reactflow"));
+require("reactflow/dist/style.css");
+const industry_theme_1 = require("@principal-ade/industry-theme");
+const file_city_builder_1 = require("@principal-ai/file-city-builder");
+const ArchitectureMapHighlightLayers_1 = require("./ArchitectureMapHighlightLayers");
+const CellNode = ({ data, selected }) => {
+    const { label, fileTree, fileCount, directoryCount } = data;
+    const { theme } = (0, industry_theme_1.useTheme)();
+    // Build city data for this cell's file tree
+    const cityBuilder = (0, react_1.useMemo)(() => new file_city_builder_1.CodeCityBuilderWithGrid(), []);
+    const cityData = (0, react_1.useMemo)(() => {
+        if (!fileTree || !fileTree.root || fileTree.root.children.length === 0) {
+            return null;
+        }
+        try {
+            const result = cityBuilder.buildCityFromFileSystem(fileTree);
+            return result;
+        }
+        catch (error) {
+            // Silently fail for production
+            return null;
+        }
+    }, [fileTree, cityBuilder]);
+    return (react_1.default.createElement("div", { className: "cell-node", style: {
+            background: selected
+                ? `linear-gradient(135deg, ${theme.colors.primary} 0%, ${theme.colors.accent} 100%)`
+                : `linear-gradient(135deg, ${theme.colors.backgroundSecondary} 0%, ${theme.colors.background} 100%)`,
+            borderRadius: `${theme.radii[2]}px`,
+            padding: `${theme.space[3]}px`,
+            width: '450px',
+            height: '450px',
+            border: selected ? `3px solid ${theme.colors.accent}` : `2px solid ${theme.colors.border}`,
+            boxShadow: selected
+                ? `0 10px 25px ${theme.colors.accent}30`
+                : '0 4px 6px rgba(0, 0, 0, 0.1)',
+            display: 'flex',
+            flexDirection: 'column',
+            transition: 'all 0.3s ease',
+        } },
+        react_1.default.createElement(reactflow_1.Handle, { type: "target", position: reactflow_1.Position.Top, style: { background: theme.colors.accent } }),
+        react_1.default.createElement("div", { style: {
+                marginBottom: `${theme.space[2]}px`,
+                paddingBottom: `${theme.space[2]}px`,
+                borderBottom: `1px solid ${theme.colors.border}`,
+            } },
+            react_1.default.createElement("h3", { style: {
+                    margin: `0 0 ${theme.space[1]}px 0`,
+                    fontSize: `${theme.fontSizes[2]}px`,
+                    fontWeight: theme.fontWeights.bold,
+                    fontFamily: theme.fonts.heading,
+                    color: theme.colors.text,
+                } }, label),
+            react_1.default.createElement("div", { style: {
+                    fontSize: `${theme.fontSizes[0]}px`,
+                    fontFamily: theme.fonts.body,
+                    color: theme.colors.textSecondary,
+                    display: 'flex',
+                    gap: `${theme.space[3]}px`,
+                } },
+                react_1.default.createElement("span", null,
+                    fileCount,
+                    " files"),
+                react_1.default.createElement("span", null,
+                    directoryCount,
+                    " directories"))),
+        react_1.default.createElement("div", { style: {
+                position: 'relative',
+                background: theme.colors.background,
+                borderRadius: `${theme.radii[1]}px`,
+                overflow: 'hidden',
+                width: '350px',
+                height: '350px',
+            } }, cityData ? (react_1.default.createElement("div", { style: { width: '100%', height: '100%', position: 'relative', pointerEvents: 'none' } },
+            react_1.default.createElement(ArchitectureMapHighlightLayers_1.ArchitectureMapHighlightLayers, { cityData: cityData, highlightLayers: [
+                    {
+                        id: 'typescript',
+                        name: 'TypeScript Files',
+                        enabled: true,
+                        color: theme.colors.success,
+                        opacity: 0.8,
+                        priority: 1,
+                        items: cityData.buildings
+                            .filter(b => b.path.endsWith('.ts') || b.path.endsWith('.tsx'))
+                            .map(b => ({
+                            path: b.path,
+                            type: 'file',
+                            opacity: 1,
+                        })),
+                    },
+                ], showGrid: false, showDirectoryLabels: false, canvasBackgroundColor: theme.colors.background, defaultBuildingColor: theme.colors.muted, defaultDirectoryColor: theme.colors.backgroundSecondary, className: "w-full h-full", 
+                // Disable interactions to prevent conflicts with React Flow
+                onFileClick: undefined }))) : (react_1.default.createElement("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: theme.colors.textMuted,
+                fontSize: `${theme.fontSizes[1]}px`,
+                fontFamily: theme.fonts.body,
+            } }, "Empty cell"))),
+        react_1.default.createElement(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Bottom, style: { background: theme.colors.accent } })));
+};
+const nodeTypes = {
+    cellNode: CellNode,
+};
+const CityViewWithReactFlowInner = ({ fileTree, gridConfig, onCellClick, cellWidth = 450, cellHeight = 350, cellSpacing = 100, }) => {
+    const { theme } = (0, industry_theme_1.useTheme)();
+    const defaultGridConfig = {
+        id: 'default',
+        version: '1.0',
+        name: 'Default Grid',
+        description: 'Default single-cell grid layout',
+        overviewPath: 'README.md',
+        category: 'default',
+        displayOrder: 0,
+        referenceGroups: {
+            main: {
+                files: ['*'],
+                coordinates: [0, 0],
+            },
+        },
+        metadata: {
+            ui: {
+                enabled: true,
+                rows: 1,
+                cols: 1,
+            },
+        },
+    };
+    const config = gridConfig || defaultGridConfig;
+    const { nodes, edges } = (0, react_1.useMemo)(() => {
+        const gridManager = new file_city_builder_1.GridLayoutManager();
+        const { rows, cols } = gridManager.getGridDimensions(config);
+        const gridTrees = gridManager.splitTreeIntoGrid(fileTree, config);
+        const generatedNodes = [];
+        const generatedEdges = [];
+        // Create cell nodes
+        gridTrees.forEach((cellTree, cellKey) => {
+            const [row, col] = cellKey.split(',').map(Number);
+            // Find cell name from config
+            let cellName = 'Cell';
+            for (const [name, cellConfig] of Object.entries(config.referenceGroups)) {
+                if (cellConfig.coordinates[0] === row && cellConfig.coordinates[1] === col) {
+                    cellName = name;
+                    break;
+                }
+            }
+            const cellNode = {
+                id: `cell-${row}-${col}`,
+                type: 'cellNode',
+                position: {
+                    x: col * (cellWidth + cellSpacing),
+                    y: row * (cellHeight + cellSpacing),
+                },
+                data: {
+                    label: cellName,
+                    fileTree: cellTree,
+                    fileCount: cellTree.stats.totalFiles,
+                    directoryCount: cellTree.stats.totalDirectories,
+                    coordinates: [row, col],
+                },
+            };
+            generatedNodes.push(cellNode);
+        });
+        // Create subtle grid connections (optional)
+        for (let row = 0; row < rows; row++) {
+            for (let col = 0; col < cols; col++) {
+                // Only add edges if both nodes exist (non-empty cells)
+                const currentNode = generatedNodes.find(n => n.id === `cell-${row}-${col}`);
+                if (!currentNode)
+                    continue;
+                // Horizontal connections
+                if (col < cols - 1) {
+                    const rightNode = generatedNodes.find(n => n.id === `cell-${row}-${col + 1}`);
+                    if (rightNode) {
+                        generatedEdges.push({
+                            id: `edge-${row}-${col}-to-${row}-${col + 1}`,
+                            source: `cell-${row}-${col}`,
+                            target: `cell-${row}-${col + 1}`,
+                            type: 'straight',
+                            animated: false,
+                            style: {
+                                stroke: `${theme.colors.border}40`,
+                                strokeWidth: 1,
+                                strokeDasharray: '5 10',
+                            },
+                        });
+                    }
+                }
+                // Vertical connections
+                if (row < rows - 1) {
+                    const bottomNode = generatedNodes.find(n => n.id === `cell-${row + 1}-${col}`);
+                    if (bottomNode) {
+                        generatedEdges.push({
+                            id: `edge-${row}-${col}-to-${row + 1}-${col}`,
+                            source: `cell-${row}-${col}`,
+                            target: `cell-${row + 1}-${col}`,
+                            type: 'straight',
+                            animated: false,
+                            style: {
+                                stroke: `${theme.colors.border}40`,
+                                strokeWidth: 1,
+                                strokeDasharray: '5 10',
+                            },
+                        });
+                    }
+                }
+            }
+        }
+        return { nodes: generatedNodes, edges: generatedEdges };
+    }, [fileTree, config, cellWidth, cellHeight, cellSpacing, theme]);
+    const [nodesState, , onNodesChange] = (0, reactflow_1.useNodesState)(nodes);
+    const [edgesState, , onEdgesChange] = (0, reactflow_1.useEdgesState)(edges);
+    const onNodeClick = (0, react_1.useCallback)((_event, node) => {
+        if (node.type === 'cellNode' && onCellClick) {
+            onCellClick(node.id);
+        }
+    }, [onCellClick]);
+    return (react_1.default.createElement("div", { style: { width: '100%', height: '100%', background: theme.colors.background } },
+        react_1.default.createElement(reactflow_1.ReactFlowProvider, null,
+            react_1.default.createElement(reactflow_1.default, { nodes: nodesState, edges: edgesState, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onNodeClick: onNodeClick, nodeTypes: nodeTypes, fitView: true, fitViewOptions: { padding: 0.2 }, attributionPosition: "bottom-left", defaultViewport: { x: 0, y: 0, zoom: 0.8 }, minZoom: 0.2, maxZoom: 2 },
+                react_1.default.createElement(reactflow_1.Background, { variant: reactflow_1.BackgroundVariant.Dots, gap: 30, size: 1, color: `${theme.colors.border}40` }),
+                react_1.default.createElement(reactflow_1.Controls, null),
+                react_1.default.createElement(reactflow_1.MiniMap, { nodeColor: () => theme.colors.primary, style: {
+                        backgroundColor: theme.colors.backgroundSecondary,
+                        border: `1px solid ${theme.colors.border}`,
+                    }, maskColor: "rgba(0, 0, 0, 0.6)" })))));
+};
+exports.CityViewWithReactFlow = CityViewWithReactFlowInner;