@principal-ai/file-city-react 0.5.40 → 0.5.41

package/src/stories/FileCityExplorerComponent.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FileCityExplorer, type ProjectArea } from '../components/FileCityExplorer';
+import type { CityData } from '../components/FileCity3D';
+
+import electronAppCityData from '../../../../assets/electron-app-city-data.json';
+
+/**
+ * Side-by-side test of the extracted `<FileCityExplorer>` component against
+ * the original story-template implementation in
+ * `FileCityExplorer.stories.tsx`. The two should look and behave identically;
+ * differences indicate regressions in the extraction.
+ *
+ * Persistence is intentionally namespaced to a separate `localStorage` key
+ * (`file-city.scope-overlay-component`) so the two stories don't fight over
+ * the same scopes/areas state.
+ */
+
+const meta: Meta<typeof FileCityExplorer> = {
+  title: 'Experiments/FileCityExplorer (Component)',
+  component: FileCityExplorer,
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+type Story = StoryObj<typeof FileCityExplorer>;
+
+const DEFAULT_AREAS: ProjectArea[] = [
+  {
+    name: 'Documentation',
+    description: 'Project docs, READMEs, and design notes — not OTEL-instrumented.',
+    paths: ['docs'],
+  },
+  {
+    name: 'Build & tooling',
+    description: 'Build scripts, bundler config, and developer tooling.',
+    paths: ['scripts', 'build'],
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <FileCityExplorer
+      cityData={electronAppCityData as CityData}
+      packageRoot="electron-app/"
+      initialAreas={DEFAULT_AREAS}
+      persistKey="file-city.scope-overlay-component"
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Extracted `<FileCityExplorer>` component over the electron-app city. ' +
+          'Should behave identically to the original story (FileCityExplorer / Default).',
+      },
+    },
+  },
+};

package/src/utils/folderElevatedPanels.ts

@@ -105,7 +105,9 @@ export interface BuildFolderElevatedPanelsOptions {
    */
   expandedFolders: ReadonlySet<string>;
   /** Toggle handler invoked when an umbrella tile is clicked. */
-  onToggleFolder?: (folderPath: string) => void;
+  onToggleFolder?: (folderPath: string, event: MouseEvent) => void;
+  /** Double-click handler for an umbrella tile. */
+  onDoubleClickFolder?: (folderPath: string, event: MouseEvent) => void;
   /**
    * Scale label font size by descendant file count. Default true. When false,
    * the renderer's auto-sized label is used (size derived from tile footprint).
@@ -134,6 +136,7 @@ export function buildFolderElevatedPanels(
     cityData,
     expandedFolders,
     onToggleFolder,
+    onDoubleClickFolder,
     scaleLabelByFileCount = true,
   } = options;
   const index = options.index ?? buildFolderIndex(cityData);
@@ -161,7 +164,10 @@ export function buildFolderElevatedPanels(
       bounds,
       label,
       labelSize,
-      onClick: onToggleFolder ? () => onToggleFolder(folderPath) : undefined,
+      onClick: onToggleFolder ? (event: MouseEvent) => onToggleFolder(folderPath, event) : undefined,
+      onDoubleClick: onDoubleClickFolder
+        ? (event: MouseEvent) => onDoubleClickFolder(folderPath, event)
+        : undefined,
     });
   };