From b22a3fdf0674eb015d2907fc1d0a17c86ec6012f Mon Sep 17 00:00:00 2001 From: Wesleyzxc Date: Mon, 11 Nov 2024 08:44:48 +1000 Subject: [PATCH] feat: add expandStoryTree config flag --- .changeset/gold-students-doubt.md | 7 +++++++ e2e/config/.ladle/config.mjs | 1 + e2e/config/tests/expand-story-tree.spec.ts | 7 +++++++ e2e/config/tests/hello.spec.ts | 4 +++- packages/example/.ladle/config.mjs | 1 + packages/ladle/lib/app/src/sidebar/main.tsx | 2 +- packages/ladle/lib/app/src/sidebar/tree-view.tsx | 10 +++++----- .../lib/cli/vite-plugin/generate/get-config-import.js | 8 +++++--- packages/ladle/lib/shared/default-config.js | 1 + packages/ladle/lib/shared/types.ts | 1 + packages/website/docs/config.md | 11 +++++++++++ 11 files changed, 43 insertions(+), 10 deletions(-) create mode 100644 .changeset/gold-students-doubt.md create mode 100644 e2e/config/tests/expand-story-tree.spec.ts diff --git a/.changeset/gold-students-doubt.md b/.changeset/gold-students-doubt.md new file mode 100644 index 00000000..86a88fc0 --- /dev/null +++ b/.changeset/gold-students-doubt.md @@ -0,0 +1,7 @@ +--- +"website": minor +"@ladle/react": minor +"test-config": minor +--- + +add expandStoryTree config option 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: ``, storyOrder: () => ["specific*", "Hello*"], + expandStoryTree: true, }; diff --git a/e2e/config/tests/expand-story-tree.spec.ts b/e2e/config/tests/expand-story-tree.spec.ts new file mode 100644 index 00000000..c7ba6b0e --- /dev/null +++ b/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); +}); 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", + ); }); diff --git a/packages/example/.ladle/config.mjs b/packages/example/.ladle/config.mjs index 1b0dbbf0..e4b5abcd 100644 --- a/packages/example/.ladle/config.mjs +++ b/packages/example/.ladle/config.mjs @@ -18,4 +18,5 @@ export default { enabled: true, }, }, + expandStoryTree: true, }; diff --git a/packages/ladle/lib/app/src/sidebar/main.tsx b/packages/ladle/lib/app/src/sidebar/main.tsx index ebdefe5c..3c719ed1 100644 --- a/packages/ladle/lib/app/src/sidebar/main.tsx +++ b/packages/ladle/lib/app/src/sidebar/main.tsx @@ -140,7 +140,7 @@ const Main = ({ story={story} hotkeys={hotkeys} 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 1fe55f7a..b4fb22a6 100644 --- a/packages/ladle/lib/app/src/sidebar/tree-view.tsx +++ b/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; 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( @@ -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); } }; 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 8017d695..ee80fdb9 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 @@ -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, diff --git a/packages/ladle/lib/shared/default-config.js b/packages/ladle/lib/shared/default-config.js index 1d2a007e..09009aa0 100644 --- a/packages/ladle/lib/shared/default-config.js +++ b/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"], diff --git a/packages/ladle/lib/shared/types.ts b/packages/ladle/lib/shared/types.ts index a69dc908..87aaa03b 100644 --- a/packages/ladle/lib/shared/types.ts +++ b/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[]; diff --git a/packages/website/docs/config.md b/packages/website/docs/config.md index ed2f4b30..5104883d 100644 --- a/packages/website/docs/config.md +++ b/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, +}; +```