Add expandStoryTree config option

.changeset/rare-walls-study.md

@@ -0,0 +1,6 @@
+---
+"@ladle/react": minor
+"test-config": minor
+---
+
+add expandStoryTree config option

e2e/config/.ladle/config.mjs

@@ -3,4 +3,5 @@ export default {
   viteConfig: "ladle-vite.config.js",
   appendToHead: `<style>.append {color: green}</style>`,
   storyOrder: () => ["specific*", "Hello*"],
+  expandStoryTree: true,
 };

e2e/config/tests/expanded-tree.spec.ts

@@ -0,0 +1,7 @@
+import { test, expect } from "@playwright/test";
+
+test("story tree is expanded", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByRole("treeitem")).toHaveCount(5);
+});

e2e/config/tests/hello.spec.ts

@@ -9,5 +9,7 @@ test("navigation respects storyOrder from the .ladle/config.mjs", async ({
   page,
 }) => {
   await page.goto("/");
-  await expect(page.locator("nav")).toHaveText("Specific fileCustomHello");
+  await expect(page.locator("nav")).toHaveText(
+    "Specific fileCustomHelloStylesWorld",
+  );
 });

packages/ladle/lib/app/src/sidebar/main.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import TreeView from "./tree-view";
+import config from "../get-config";
 import type { UpdateStory } from "../../../shared/types";
 
 const Main = ({
@@ -41,6 +42,8 @@ const Main = ({
     story.includes(canonicalSearch),
   );
 
+  console.log("config", config);
+
   return (
     <nav role="navigation" className="ladle-aside">
       <input
@@ -62,7 +65,7 @@ const Main = ({
         stories={filteredStories}
         story={story}
         updateStory={updateStory}
-        searchActive={search !== ""}
+        allExpanded={search !== "" || config.expandStoryTree}
         setTreeRootRef={(root: HTMLUListElement | null) =>
           (treeRoot.current = root)
         }

packages/ladle/lib/app/src/sidebar/tree-view.tsx

@@ -25,7 +25,7 @@ const TreeView = ({
   stories,
   story,
   updateStory,
-  searchActive,
+  allExpanded,
   searchRef,
   setTreeRootRef,
 }: {
@@ -34,14 +34,14 @@ const TreeView = ({
   searchRef: React.Ref<HTMLLinkElement>;
   updateStory: UpdateStory;
   setTreeRootRef: (root: HTMLUListElement | null) => void;
-  searchActive?: boolean;
+  allExpanded?: boolean;
 }) => {
   const treeItemRefs: TreeItemRefs = React.useRef({});
   const [tree, setTree] = React.useState(
-    getStoryTree(stories, story, searchActive),
+    getStoryTree(stories, story, allExpanded),
   );
   React.useEffect(() => {
-    setTree(getStoryTree(stories, story, searchActive));
+    setTree(getStoryTree(stories, story, allExpanded));
   }, [stories.join(",")]);
 
   const [selectedItemId, setSelectedItemId] = React.useState<string | null>(

packages/ladle/lib/cli/vite-plugin/generate/get-config-import.js

@@ -21,6 +21,9 @@ const ladleConfigToClientConfig = (config) => {
             : config.storyOrder.toString(),
         }
       : {}),
+    ...(config.expandStoryTree
+      ? { expandStoryTree: config.expandStoryTree }
+      : {}),
   };
 };
 

packages/ladle/lib/shared/default-config.js

@@ -11,6 +11,7 @@ export default {
   previewPort: 8080,
   outDir: "build",
   base: undefined,
+  expandStoryTree: false,
   onDevServerStart: () => {
     return;
   },

packages/ladle/lib/shared/types.ts

@@ -178,6 +178,7 @@ export type Config = {
   outDir: string;
   base?: string;
   mode?: string;
+  expandStoryTree?: boolean;
   onDevServerStart: (serverUrl: string) => void;
   i18n: { [key: string]: string };
   addons: {