@principal-ai/file-city-react 0.3.0

package/src/stories/ArchitectureMapGridLayout.stories.tsx

@@ -0,0 +1,410 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  CodeCityBuilderWithGrid,
+  buildFileSystemTreeFromFileInfoList,
+  CityData,
+} from '@principal-ai/file-city-builder';
+
+import { ArchitectureMapHighlightLayers } from '../components/ArchitectureMapHighlightLayers';
+
+// Type definitions needed for the story
+interface FileInfo {
+  name: string;
+  path: string;
+  relativePath: string;
+  size: number;
+  extension: string;
+  lastModified: Date;
+  isDirectory: boolean;
+}
+
+interface CodebaseView {
+  id: string;
+  version: string;
+  name: string;
+  description: string;
+  overviewPath: string;
+  cells: {
+    [key: string]: {
+      files: string[];
+      coordinates: [number, number];
+    };
+  };
+  metadata?: {
+    ui?: {
+      paddingTop?: number;
+      paddingBottom?: number;
+      paddingLeft?: number;
+      paddingRight?: number;
+      paddingInner?: number;
+      paddingOuter?: number;
+    };
+  };
+}
+
+const meta = {
+  title: 'Components/ArchitectureMapHighlightLayers/Grid Layout',
+  component: ArchitectureMapHighlightLayers,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ArchitectureMapHighlightLayers>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper function to create city data with grid layout
+function createGridLayoutCityData(config: CodebaseView, customFilePaths?: string[]): CityData {
+  // Create a mock file tree with typical monorepo structure
+  const filePaths = customFilePaths || [
+    // Core source files
+    'src/index.ts',
+    'src/components/App.tsx',
+    'src/components/Header.tsx',
+    'src/utils/helpers.ts',
+    'lib/core.ts',
+    'lib/utils.ts',
+
+    // Configuration
+    '.a24z/config.json',
+    '.principleMD/settings.json',
+    'config/webpack.config.js',
+
+    // Documentation
+    'docs/README.md',
+    'docs/API.md',
+    'examples/basic.ts',
+    'examples/advanced.ts',
+
+    // Testing
+    'tests/unit/app.test.ts',
+    'tests/integration/api.test.ts',
+    '__tests__/components.test.tsx',
+    'test-utils/helpers.ts',
+
+    // Build outputs
+    'dist/bundle.js',
+    'build/index.html',
+    '.next/static/chunks/pages.js',
+
+    // Dependencies
+    'node_modules/react/index.js',
+    'node_modules/typescript/lib/typescript.js',
+    'packages/shared/index.ts',
+    'packages/ui/components.tsx',
+
+    // Assets
+    'public/index.html',
+    'public/favicon.ico',
+    'static/logo.svg',
+    'assets/styles.css',
+
+    // Root files
+    'package.json',
+    'README.md',
+    '.gitignore',
+    'tsconfig.json',
+  ];
+
+  // Convert file paths to FileInfo objects
+  const fileInfos: FileInfo[] = filePaths.map(path => ({
+    name: path.split('/').pop() || path,
+    path: path,
+    relativePath: path,
+    size: Math.random() * 10000, // Random size for demo
+    extension: path.includes('.') ? '.' + (path.split('.').pop() || '') : '',
+    lastModified: new Date(),
+    isDirectory: false,
+  }));
+
+  // Build a proper file tree with hierarchy
+  const fileTree = buildFileSystemTreeFromFileInfoList(fileInfos as any, 'demo-sha');
+  const cityBuilder = new CodeCityBuilderWithGrid();
+
+  // Use the new integrated grid layout builder with adaptive sizing
+  // This allows the grid to calculate its own optimal dimensions
+  return cityBuilder.buildCityFromFileSystem(fileTree, '', {
+    gridLayout: config as any,
+  });
+}
+
+// Minimal config - tests default UI metadata
+export const DefaultsTest: Story = {
+  args: {
+    cityData: createGridLayoutCityData({
+      id: 'defaults-test',
+      version: '1.0.0',
+      name: 'Test Default UI Settings',
+      description: 'Tests default UI metadata settings when none are provided',
+      overviewPath: 'README.md',
+      cells: {
+        Source: {
+          files: ['src', 'lib'],
+          coordinates: [0, 0],
+        },
+        Config: {
+          files: ['config', '.*'],
+          coordinates: [0, 1],
+        },
+        Tests: {
+          files: ['test*', '__tests__'],
+          coordinates: [1, 0],
+        },
+        Build: {
+          files: ['dist', 'build', 'node_modules'],
+          coordinates: [1, 1],
+        },
+      },
+      // No metadata.ui provided - should use defaults
+    }),
+    showGrid: true,
+    showFileNames: false,
+    showDirectoryLabels: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// 2x2 Grid Layout with Labels
+export const TwoByTwoGrid: Story = {
+  args: {
+    cityData: createGridLayoutCityData({
+      id: 'two-by-two-grid',
+      version: '1.0.0',
+      name: 'Two by Two Grid Layout',
+      description: 'A 2x2 grid layout organizing code into four quadrants',
+      overviewPath: 'README.md',
+      cells: {
+        Source: {
+          files: ['src', 'lib'],
+          coordinates: [0, 0],
+        },
+        Configuration: {
+          files: ['config', '.a24z', '.principleMD', 'tsconfig.json', 'package.json'],
+          coordinates: [1, 0],
+        },
+        Testing: {
+          files: ['tests', '__tests__', 'test-utils'],
+          coordinates: [0, 1],
+        },
+        Documentation: {
+          files: ['docs', 'examples', 'README.md'],
+          coordinates: [1, 1],
+        },
+      },
+      metadata: {
+        ui: {
+          paddingTop: 10,
+          paddingBottom: 10,
+          paddingLeft: 15,
+          paddingRight: 15,
+          paddingInner: 8,
+          paddingOuter: 20,
+        },
+      },
+    }),
+    showGrid: true,
+    showFileNames: false,
+    showDirectoryLabels: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// 3x3 Grid Layout
+export const ThreeByThreeGrid: Story = {
+  args: {
+    cityData: createGridLayoutCityData({
+      id: 'three-by-three-grid',
+      version: '1.0.0',
+      name: 'Three by Three Grid Layout',
+      description: 'A 3x3 grid layout for more granular organization',
+      overviewPath: 'README.md',
+      cells: {
+        Source: {
+          files: ['src'],
+          coordinates: [0, 0],
+        },
+        Libraries: {
+          files: ['lib'],
+          coordinates: [1, 0],
+        },
+        Packages: {
+          files: ['packages'],
+          coordinates: [2, 0],
+        },
+        Tests: {
+          files: ['tests', '__tests__'],
+          coordinates: [0, 1],
+        },
+        Configuration: {
+          files: ['config', '.*', 'tsconfig.json', 'package.json'],
+          coordinates: [1, 1],
+        },
+        Documentation: {
+          files: ['docs', 'README.md'],
+          coordinates: [2, 1],
+        },
+        'Test Utils': {
+          files: ['test-utils'],
+          coordinates: [0, 2],
+        },
+        Build: {
+          files: ['dist', 'build', '.next'],
+          coordinates: [1, 2],
+        },
+        Assets: {
+          files: ['public', 'static', 'assets'],
+          coordinates: [2, 2],
+        },
+      },
+    }),
+    showGrid: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Sparse Grid Layout (gaps in grid)
+export const SparseGrid: Story = {
+  args: {
+    cityData: createGridLayoutCityData({
+      id: 'sparse-grid',
+      version: '1.0.0',
+      name: 'Sparse Grid Layout',
+      description: 'A grid with intentional gaps for visual organization',
+      overviewPath: 'README.md',
+      cells: {
+        Source: {
+          files: ['src', 'lib'],
+          coordinates: [0, 0],
+        },
+        Tests: {
+          files: ['tests', '__tests__', 'test-utils'],
+          coordinates: [2, 0],
+        },
+        Documentation: {
+          files: ['docs', 'examples', 'README.md'],
+          coordinates: [0, 2],
+        },
+        Build: {
+          files: ['dist', 'build', '.next', 'node_modules'],
+          coordinates: [2, 2],
+        },
+      },
+    }),
+    showGrid: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Custom colored grid with highlight layers
+export const GridWithHighlights: Story = {
+  args: {
+    cityData: createGridLayoutCityData({
+      id: 'grid-with-highlights',
+      version: '1.0.0',
+      name: 'Grid with Highlights',
+      description: 'Grid layout with custom highlight layers',
+      overviewPath: 'README.md',
+      cells: {
+        Source: {
+          files: ['src', 'lib'],
+          coordinates: [0, 0],
+        },
+        Tests: {
+          files: ['tests', '__tests__'],
+          coordinates: [1, 0],
+        },
+        Config: {
+          files: ['config', '.*'],
+          coordinates: [0, 1],
+        },
+        Build: {
+          files: ['dist', 'build'],
+          coordinates: [1, 1],
+        },
+      },
+    }),
+    highlightLayers: [
+      {
+        id: 'modified-files',
+        name: 'Modified Files',
+        enabled: true,
+        color: '#3b82f6',
+        priority: 1,
+        items: [
+          { path: 'src/components/App.tsx', type: 'file' },
+          { path: 'src/utils/helpers.ts', type: 'file' },
+        ],
+      },
+      {
+        id: 'test-coverage',
+        name: 'Test Coverage',
+        enabled: true,
+        color: '#10b981',
+        priority: 2,
+        items: [{ path: 'tests', type: 'directory' }],
+      },
+    ],
+    showLayerControls: true,
+    showGrid: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Large grid (5x5)
+export const LargeGrid: Story = {
+  args: {
+    cityData: createGridLayoutCityData({
+      id: 'large-grid',
+      version: '1.0.0',
+      name: 'Large 5x5 Grid',
+      description: 'A large grid for complex projects',
+      overviewPath: 'README.md',
+      cells: {
+        'Core Source': { files: ['src/core'], coordinates: [0, 0] },
+        Components: { files: ['src/components'], coordinates: [1, 0] },
+        Utils: { files: ['src/utils'], coordinates: [2, 0] },
+        Hooks: { files: ['src/hooks'], coordinates: [3, 0] },
+        Types: { files: ['src/types'], coordinates: [4, 0] },
+
+        'Unit Tests': { files: ['tests/unit'], coordinates: [0, 1] },
+        Integration: { files: ['tests/integration'], coordinates: [1, 1] },
+        E2E: { files: ['tests/e2e'], coordinates: [2, 1] },
+        'Test Utils': { files: ['test-utils'], coordinates: [3, 1] },
+        Fixtures: { files: ['fixtures'], coordinates: [4, 1] },
+
+        Config: { files: ['config'], coordinates: [0, 2] },
+        Scripts: { files: ['scripts'], coordinates: [1, 2] },
+        Tools: { files: ['tools'], coordinates: [2, 2] },
+        'CI/CD': { files: ['.github', '.gitlab'], coordinates: [3, 2] },
+        Docker: { files: ['docker', 'Dockerfile'], coordinates: [4, 2] },
+
+        Docs: { files: ['docs'], coordinates: [0, 3] },
+        Examples: { files: ['examples'], coordinates: [1, 3] },
+        API: { files: ['api'], coordinates: [2, 3] },
+        Packages: { files: ['packages'], coordinates: [3, 3] },
+        Libs: { files: ['lib'], coordinates: [4, 3] },
+
+        Build: { files: ['dist'], coordinates: [0, 4] },
+        Public: { files: ['public'], coordinates: [1, 4] },
+        Assets: { files: ['assets'], coordinates: [2, 4] },
+        Static: { files: ['static'], coordinates: [3, 4] },
+        'Node Modules': { files: ['node_modules'], coordinates: [4, 4] },
+      },
+    }),
+    showGrid: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};

package/src/stories/ArchitectureMapHighlightLayers.stories.tsx

@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+
+import { ArchitectureMapHighlightLayers } from '../components/ArchitectureMapHighlightLayers';
+import { HighlightLayer } from '../render/client/drawLayeredBuildings';
+import { createSampleCityData } from './sample-data';
+
+const meta = {
+  title: 'Components/ArchitectureMapHighlightLayers',
+  component: ArchitectureMapHighlightLayers,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    Story => (
+      <div style={{ width: '100vw', height: '100vh', backgroundColor: '#1a1a1a' }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ArchitectureMapHighlightLayers>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Basic story with sample city data
+export const Default: Story = {
+  args: {
+    cityData: createSampleCityData(),
+    showGrid: false,
+    fullSize: true,
+    canvasBackgroundColor: '#0f1419',
+    defaultBuildingColor: '#36454F',
+    defaultDirectoryColor: '#111827',
+    enableZoom: true,
+  },
+};
+
+// Story with highlight layers
+export const WithHighlightLayers: Story = {
+  render: function RenderWithHighlightLayers() {
+    const [layers, setLayers] = useState<HighlightLayer[]>([
+      {
+        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: string, enabled: boolean) => {
+      setLayers(prev => prev.map(layer => (layer.id === layerId ? { ...layer, enabled } : layer)));
+    };
+
+    return (
+      <ArchitectureMapHighlightLayers
+        cityData={createSampleCityData()}
+        highlightLayers={layers}
+        onLayerToggle={handleLayerToggle}
+        showLayerControls={true}
+        fullSize={true}
+        canvasBackgroundColor="#0f1419"
+        defaultBuildingColor="#36454F"
+        defaultDirectoryColor="#111827"
+        enableZoom={true}
+      />
+    );
+  },
+};
+
+// Story with directory highlighting
+export const DirectoryHighlighting: Story = {
+  args: {
+    cityData: 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
+export const SelectiveRendering: Story = {
+  args: {
+    cityData: createSampleCityData(),
+    selectiveRender: {
+      mode: 'filter',
+      directories: new Set(['src', 'tests']),
+    },
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Story with subdirectory mode
+export const SubdirectoryMode: Story = {
+  args: {
+    cityData: createSampleCityData(),
+    subdirectoryMode: {
+      enabled: true,
+      rootPath: 'src',
+      autoCenter: true,
+    },
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Interactive story with hover and click callbacks
+export const Interactive: Story = {
+  render: function RenderInteractive() {
+    const [hoveredInfo, setHoveredInfo] = useState<string>('');
+    const [clickedPath, setClickedPath] = useState<string>('');
+
+    return (
+      <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+        <ArchitectureMapHighlightLayers
+          cityData={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}`);
+          }}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            top: 20,
+            left: 20,
+            color: 'white',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            padding: '10px',
+            borderRadius: '4px',
+            fontFamily: 'monospace',
+          }}
+        >
+          <div>{hoveredInfo || 'Hover over elements'}</div>
+          {clickedPath && <div>{clickedPath}</div>}
+        </div>
+      </div>
+    );
+  },
+};
+
+// Story with abstraction layer
+export const WithAbstractionLayer: Story = {
+  args: {
+    cityData: 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
+export const CustomRenderStrategies: Story = {
+  args: {
+    cityData: 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
+export const WithGrid: Story = {
+  args: {
+    cityData: createSampleCityData(),
+    showGrid: true,
+    showFileNames: true,
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Story with transformations
+export const WithTransformations: Story = {
+  args: {
+    cityData: createSampleCityData(),
+    transform: {
+      rotation: 90,
+      flipHorizontal: false,
+      flipVertical: false,
+    },
+    fullSize: true,
+    enableZoom: true,
+  },
+};
+
+// Story with border radius
+export const WithBorderRadius: Story = {
+  args: {
+    cityData: createSampleCityData(),
+    buildingBorderRadius: 4,
+    districtBorderRadius: 8,
+    fullSize: true,
+    enableZoom: true,
+  },
+};