From 0d4397c30ca962540aed777adbc5943375eaa8e0 Mon Sep 17 00:00:00 2001
From: jozefhruska <me@jozefhruska.com>
Date: Fri, 5 May 2023 14:26:18 +0200
Subject: [PATCH 1/3] feat: expanded tree config option

---
 packages/ladle/lib/app/src/sidebar/main.tsx               | 5 ++++-
 packages/ladle/lib/app/src/sidebar/tree-view.tsx          | 8 ++++----
 .../lib/cli/vite-plugin/generate/get-config-import.js     | 3 +++
 packages/ladle/lib/shared/default-config.js               | 1 +
 packages/ladle/lib/shared/types.ts                        | 1 +
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/ladle/lib/app/src/sidebar/main.tsx b/packages/ladle/lib/app/src/sidebar/main.tsx
index 43ff1080..ebf457e7 100644
--- a/packages/ladle/lib/app/src/sidebar/main.tsx
+++ b/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)
         }
diff --git a/packages/ladle/lib/app/src/sidebar/tree-view.tsx b/packages/ladle/lib/app/src/sidebar/tree-view.tsx
index c906ab58..39304beb 100644
--- a/packages/ladle/lib/app/src/sidebar/tree-view.tsx
+++ b/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>(
diff --git a/packages/ladle/lib/cli/vite-plugin/generate/get-config-import.js b/packages/ladle/lib/cli/vite-plugin/generate/get-config-import.js
index 9058fe8a..277f8fd2 100644
--- a/packages/ladle/lib/cli/vite-plugin/generate/get-config-import.js
+++ b/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 }
+      : {}),
   };
 };
 
diff --git a/packages/ladle/lib/shared/default-config.js b/packages/ladle/lib/shared/default-config.js
index 5a053bd6..c6050965 100644
--- a/packages/ladle/lib/shared/default-config.js
+++ b/packages/ladle/lib/shared/default-config.js
@@ -11,6 +11,7 @@ export default {
   previewPort: 8080,
   outDir: "build",
   base: undefined,
+  expandStoryTree: false,
   onDevServerStart: () => {
     return;
   },
diff --git a/packages/ladle/lib/shared/types.ts b/packages/ladle/lib/shared/types.ts
index 62625dd5..eea4249d 100644
--- a/packages/ladle/lib/shared/types.ts
+++ b/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: {

From 4d409820a5c0dc0f3bd253b0748924953f6551ec Mon Sep 17 00:00:00 2001
From: jozefhruska <me@jozefhruska.com>
Date: Fri, 5 May 2023 14:58:34 +0200
Subject: [PATCH 2/3] test: expanded tree config option

---
 e2e/config/.ladle/config.mjs           | 1 +
 e2e/config/tests/expanded-tree.spec.ts | 7 +++++++
 e2e/config/tests/hello.spec.ts         | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 e2e/config/tests/expanded-tree.spec.ts

diff --git a/e2e/config/.ladle/config.mjs b/e2e/config/.ladle/config.mjs
index 33465aef..a7b618a5 100644
--- a/e2e/config/.ladle/config.mjs
+++ b/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,
 };
diff --git a/e2e/config/tests/expanded-tree.spec.ts b/e2e/config/tests/expanded-tree.spec.ts
new file mode 100644
index 00000000..c7ba6b0e
--- /dev/null
+++ b/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);
+});
diff --git a/e2e/config/tests/hello.spec.ts b/e2e/config/tests/hello.spec.ts
index dcae411c..132120a6 100644
--- a/e2e/config/tests/hello.spec.ts
+++ b/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",
+  );
 });

From 0ee7d3cd7d59af02165994ea18eed44d9f1b7e34 Mon Sep 17 00:00:00 2001
From: jozefhruska <me@jozefhruska.com>
Date: Fri, 5 May 2023 15:05:18 +0200
Subject: [PATCH 3/3] docs: changeset

---
 .changeset/rare-walls-study.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/rare-walls-study.md

diff --git a/.changeset/rare-walls-study.md b/.changeset/rare-walls-study.md
new file mode 100644
index 00000000..cfcd8f61
--- /dev/null
+++ b/.changeset/rare-walls-study.md
@@ -0,0 +1,6 @@
+---
+"@ladle/react": minor
+"test-config": minor
+---
+
+add expandStoryTree config option