feat: add expandStoryTree config flag (#587)

Author: Wesleyzxc

.changeset/gold-students-doubt.md

@@ -0,0 +1,7 @@
+---
+"website": minor
+"@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/expand-story-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/example/.ladle/config.mjs

@@ -18,4 +18,5 @@ export default {
       enabled: true,
     },
   },
+  expandStoryTree: true,
 };

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

@@ -146,7 +146,7 @@ const Main = ({
           story={story}
           hotkeys={hotkeys}
           updateStory={updateStory}
-          searchActive={search !== ""}
+          allExpanded={search !== "" || config.expandStoryTree}
           setTreeRootRef={(root: HTMLUListElement | null) =>
             (treeRoot.current = root)
           }

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

@@ -29,7 +29,7 @@ const TreeView = ({
   stories,
   story,
   updateStory,
-  searchActive,
+  allExpanded,
   searchRef,
   setTreeRootRef,
   hotkeys,
@@ -39,15 +39,15 @@ const TreeView = ({
   searchRef: React.Ref<HTMLInputElement>;
   updateStory: UpdateStory;
   setTreeRootRef: (root: HTMLUListElement | null) => void;
-  searchActive?: boolean;
+  allExpanded?: boolean;
   hotkeys: 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>(
@@ -64,7 +64,7 @@ const TreeView = ({
   const hotkeyStoryTransition = (story?: string) => {
     if (story) {
       updateStory(story);
-      setTree(getStoryTree(stories, story, searchActive));
+      setTree(getStoryTree(stories, story, allExpanded));
       setTimeout(() => focusSelectedItem(story), 1);
     }
   };

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

@@ -22,6 +22,9 @@ const ladleConfigToClientConfig = (config) => {
             : config.storyOrder.toString(),
         }
       : {}),
+    ...(config.expandStoryTree
+      ? { expandStoryTree: config.expandStoryTree }
+      : {}),
   };
 };
 
@@ -37,12 +40,11 @@ const getConfigImport = async (configFolder, config) => {
   let clientConfig = {};
   if (fs.existsSync(configPath)) {
     const fileConfig = (await import(pathToFileURL(configPath).href)).default;
-    // @ts-ignore
+    // @ts-expect-error: exclude hotkeys
     clientConfig = ladleConfigToClientConfig(fileConfig);
   }
   merge(clientConfig, ladleConfigToClientConfig(config));
-  // don't merge hotkeys
-  // @ts-ignore
+  // @ts-expect-error: don't merge hotkeys
   clientConfig.hotkeys = {
     ...clientConfig.hotkeys,
     ...config.hotkeys,

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

@@ -15,6 +15,7 @@ export default {
   hmrPort: undefined,
   outDir: "build",
   base: undefined,
+  expandStoryTree: false,
   hotkeys: {
     search: ["/", "meta+p"],
     nextStory: ["alt+arrowright"],

packages/ladle/lib/shared/types.ts

@@ -189,6 +189,7 @@ export type Config = {
   outDir: string;
   base?: string;
   mode?: string;
+  expandStoryTree?: boolean;
   noWatch: boolean;
   hotkeys: {
     fullscreen: string[];

packages/website/docs/config.md

@@ -331,3 +331,14 @@ export default {
   noWatch: true,
 };
 ```
+
+### expandStoryTree
+
+You can expand the story tree by default.
+
+```js
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  expandStoryTree: true,
+};
+```