@principal-ai/file-city-react 0.3.0

package/dist/stories/ArchitectureMapHighlightLayers.stories.js

@@ -0,0 +1,270 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithBorderRadius = exports.WithTransformations = exports.WithGrid = exports.CustomRenderStrategies = exports.WithAbstractionLayer = exports.Interactive = exports.SubdirectoryMode = exports.SelectiveRendering = exports.DirectoryHighlighting = exports.WithHighlightLayers = exports.Default = void 0;
+const react_1 = require("react");
+const ArchitectureMapHighlightLayers_1 = require("../components/ArchitectureMapHighlightLayers");
+const sample_data_1 = require("./sample-data");
+const meta = {
+    title: 'Components/ArchitectureMapHighlightLayers',
+    component: ArchitectureMapHighlightLayers_1.ArchitectureMapHighlightLayers,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    decorators: [
+        Story => (React.createElement("div", { style: { width: '100vw', height: '100vh', backgroundColor: '#1a1a1a' } },
+            React.createElement(Story, null))),
+    ],
+};
+exports.default = meta;
+// Basic story with sample city data
+exports.Default = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        showGrid: false,
+        fullSize: true,
+        canvasBackgroundColor: '#0f1419',
+        defaultBuildingColor: '#36454F',
+        defaultDirectoryColor: '#111827',
+        enableZoom: true,
+    },
+};
+// Story with highlight layers
+exports.WithHighlightLayers = {
+    render: function RenderWithHighlightLayers() {
+        const [layers, setLayers] = (0, react_1.useState)([
+            {
+                id: 'modified-files',
+                name: 'Modified Files',
+                enabled: true,
+                color: '#3b82f6',
+                priority: 1,
+                items: [
+                    { path: 'src/components/App.tsx', type: 'file' },
+                    { path: 'src/components/Header.tsx', type: 'file' },
+                    { path: 'src/utils/helpers.ts', type: 'file' },
+                ],
+            },
+            {
+                id: 'new-files',
+                name: 'New Files',
+                enabled: true,
+                color: '#10b981',
+                priority: 2,
+                items: [
+                    { path: 'src/components/Footer.tsx', type: 'file' },
+                    { path: 'tests/unit/footer.test.tsx', type: 'file' },
+                ],
+            },
+            {
+                id: 'deleted-files',
+                name: 'Deleted Files',
+                enabled: false,
+                color: '#ef4444',
+                priority: 3,
+                items: [{ path: 'src/deprecated/OldComponent.tsx', type: 'file' }],
+            },
+        ]);
+        const handleLayerToggle = (layerId, enabled) => {
+            setLayers(prev => prev.map(layer => (layer.id === layerId ? { ...layer, enabled } : layer)));
+        };
+        return (React.createElement(ArchitectureMapHighlightLayers_1.ArchitectureMapHighlightLayers, { cityData: (0, sample_data_1.createSampleCityData)(), highlightLayers: layers, onLayerToggle: handleLayerToggle, showLayerControls: true, fullSize: true, canvasBackgroundColor: "#0f1419", defaultBuildingColor: "#36454F", defaultDirectoryColor: "#111827", enableZoom: true }));
+    },
+};
+// Story with directory highlighting
+exports.DirectoryHighlighting = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        highlightLayers: [
+            {
+                id: 'test-directory',
+                name: 'Test Files',
+                enabled: true,
+                color: '#f59e0b',
+                priority: 1,
+                items: [
+                    { path: 'tests', type: 'directory' },
+                    { path: '__tests__', type: 'directory' },
+                ],
+            },
+        ],
+        showLayerControls: true,
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Story with selective rendering
+exports.SelectiveRendering = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        selectiveRender: {
+            mode: 'filter',
+            directories: new Set(['src', 'tests']),
+        },
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Story with subdirectory mode
+exports.SubdirectoryMode = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        subdirectoryMode: {
+            enabled: true,
+            rootPath: 'src',
+            autoCenter: true,
+        },
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Interactive story with hover and click callbacks
+exports.Interactive = {
+    render: function RenderInteractive() {
+        const [hoveredInfo, setHoveredInfo] = (0, react_1.useState)('');
+        const [clickedPath, setClickedPath] = (0, react_1.useState)('');
+        return (React.createElement("div", { style: { position: 'relative', width: '100%', height: '100%' } },
+            React.createElement(ArchitectureMapHighlightLayers_1.ArchitectureMapHighlightLayers, { cityData: (0, sample_data_1.createSampleCityData)(), fullSize: true, enableZoom: true, onHover: info => {
+                    if (info.hoveredBuilding) {
+                        setHoveredInfo(`File: ${info.hoveredBuilding.path}`);
+                    }
+                    else if (info.hoveredDistrict) {
+                        setHoveredInfo(`Directory: ${info.hoveredDistrict.path || '/'}`);
+                    }
+                    else {
+                        setHoveredInfo('');
+                    }
+                }, onFileClick: (path, type) => {
+                    setClickedPath(`Clicked: ${type} - ${path}`);
+                } }),
+            React.createElement("div", { style: {
+                    position: 'absolute',
+                    top: 20,
+                    left: 20,
+                    color: 'white',
+                    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                    padding: '10px',
+                    borderRadius: '4px',
+                    fontFamily: 'monospace',
+                } },
+                React.createElement("div", null, hoveredInfo || 'Hover over elements'),
+                clickedPath && React.createElement("div", null, clickedPath))));
+    },
+};
+// Story with abstraction layer
+exports.WithAbstractionLayer = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        highlightLayers: [
+            {
+                id: 'directory-abstraction',
+                name: 'Directory Abstraction',
+                enabled: true,
+                color: '#1e40af',
+                priority: 0,
+                items: [],
+                // @ts-expect-error - abstraction layer specific properties
+                abstractionLayer: true,
+                abstractionConfig: {
+                    maxZoomLevel: 2.0,
+                    minPercentage: 0.02,
+                    backgroundColor: '#1e40af',
+                    allowRootAbstraction: false,
+                },
+            },
+        ],
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Story with custom rendering strategies
+exports.CustomRenderStrategies = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        highlightLayers: [
+            {
+                id: 'glow-effect',
+                name: 'Glow Effect',
+                enabled: true,
+                color: '#fbbf24',
+                priority: 1,
+                items: [
+                    {
+                        path: 'src/index.ts',
+                        type: 'file',
+                        renderStrategy: 'glow',
+                    },
+                ],
+            },
+            {
+                id: 'pattern-fill',
+                name: 'Pattern Fill',
+                enabled: true,
+                color: '#8b5cf6',
+                priority: 2,
+                items: [
+                    {
+                        path: 'package.json',
+                        type: 'file',
+                        renderStrategy: 'pattern',
+                    },
+                ],
+            },
+            {
+                id: 'covered-directories',
+                name: 'Covered Directories',
+                enabled: true,
+                color: '#06b6d4',
+                priority: 3,
+                items: [
+                    {
+                        path: 'node_modules',
+                        type: 'directory',
+                        renderStrategy: 'cover',
+                        coverOptions: {
+                            text: 'Dependencies',
+                            backgroundColor: '#06b6d4',
+                            opacity: 0.8,
+                            borderRadius: 4,
+                        },
+                    },
+                ],
+            },
+        ],
+        showLayerControls: true,
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Story with grid display
+exports.WithGrid = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        showGrid: true,
+        showFileNames: true,
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Story with transformations
+exports.WithTransformations = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        transform: {
+            rotation: 90,
+            flipHorizontal: false,
+            flipVertical: false,
+        },
+        fullSize: true,
+        enableZoom: true,
+    },
+};
+// Story with border radius
+exports.WithBorderRadius = {
+    args: {
+        cityData: (0, sample_data_1.createSampleCityData)(),
+        buildingBorderRadius: 4,
+        districtBorderRadius: 8,
+        fullSize: true,
+        enableZoom: true,
+    },
+};

package/dist/stories/CityViewWithReactFlow.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from '@storybook/react';
+import { FileTree } from '@principal-ai/repository-abstraction';
+import { CodebaseView } from '@principal-ai/alexandria-core-library';
+declare const meta: {
+    title: string;
+    component: import("react").FC<import("../components/CityViewWithReactFlow").CityViewWithReactFlowProps>;
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        fileTree: FileTree;
+        gridConfig?: CodebaseView | undefined;
+        onCellClick?: ((cellId: string) => void) | undefined;
+        cellWidth?: number | undefined;
+        cellHeight?: number | undefined;
+        cellSpacing?: number | undefined;
+    }>) => import("react").JSX.Element)[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SingleCell: Story;
+export declare const MultiCell: Story;
+export declare const LargeGrid: Story;
+//# sourceMappingURL=CityViewWithReactFlow.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CityViewWithReactFlow.stories.d.ts","sourceRoot":"","sources":["../../src/stories/CityViewWithReactFlow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,QAAQ,EAA2B,MAAM,sCAAsC,CAAC;AACzF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAErE,QAAA,MAAM,IAAI;;;;;;;;;;;;;;CAaoC,CAAC;AAE/C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4nBnC,eAAO,MAAM,UAAU,EAAE,KA2BxB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAuCvB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2DvB,CAAC"}