@principal-ai/file-city-react 0.3.0 → 0.4.1

package/dist/stories/ArchitectureMapHighlightLayers.stories.js

@@ -1,270 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"}