Quicker side-navigating through deeply nested menus (#450)

* Quicker side-navigation for deeply nested stories

* Mdx-to-stories add internal lib as an import target

.changeset/lovely-eyes-push.md

@@ -0,0 +1,5 @@
+---
+"@ladle/react": minor
+---
+
+Quicker side-navigation for deeply nested stories. The sub-tree is automatically expanded and the first story/link activated.

packages/example/src/my-story--sec.stories.tsx

@@ -5,7 +5,7 @@ export const Lol: Story = () => {
   const [val, setVal] = useState(true);
   return (
     <div>
-      <h1>Middle fam</h1>
+      <h1>LOL fam</h1>
       <button onClick={() => setVal(false)}>
         button {val ? "true" : "false"}
       </button>

packages/ladle/lib/app/src/args-provider.tsx

@@ -119,10 +119,18 @@ const ArgsProvider = ({
       Object.keys(urlValues).forEach((key) => {
         controls[key].value = urlValues[key].value;
       });
-      dispatch({
-        type: ActionType.UpdateControl,
-        value: controls,
-      });
+      if (
+        Object.keys(controls).some(
+          (key) =>
+            !globalState.control[key] ||
+            controls[key].value !== globalState.control[key].value,
+        )
+      ) {
+        dispatch({
+          type: ActionType.UpdateControl,
+          value: controls,
+        });
+      }
     } else {
       if (!globalState.controlInitialized) {
         dispatch({

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

@@ -6,6 +6,8 @@ import { getStoryTree } from "../story-name";
 import {
   getEndId,
   getFirstChildId,
+  getFirstLink,
+  getSubtree,
   getNextId,
   getParentId,
   getPrevId,
@@ -122,9 +124,18 @@ const TreeView = ({
         fullTree={tree}
         story={story}
         updateStory={updateStory}
-        onItemClick={(item: StoryTreeItem) =>
-          setTree(toggleIsExpanded(tree, item))
-        }
+        onItemClick={(item: StoryTreeItem) => {
+          const newTree = toggleIsExpanded(tree, item);
+          const firstChildLink = getFirstLink(
+            getSubtree(newTree, item.id),
+            item.id,
+          );
+          firstChildLink &&
+            story !== firstChildLink.id &&
+            firstChildLink.isExpanded &&
+            updateStory(firstChildLink.id);
+          setTree(newTree);
+        }}
         selectedItemId={selectedItemId}
         onKeyDownFn={onKeyDownFn}
         treeItemRefs={treeItemRefs}

packages/ladle/lib/app/src/sidebar/utils.ts

@@ -67,6 +67,29 @@ export const getPrevId = (
   return null;
 };
 
+export const getSubtree = (nodes: StoryTree, nodeId: string): StoryTree => {
+  for (let i = 0; i < nodes.length; i++) {
+    if (nodes[i].id === nodeId) {
+      return nodes[i].children;
+    }
+    const res = getSubtree(nodes[i].children, nodeId);
+    if (res.length) {
+      return res;
+    }
+  }
+  return [];
+};
+
+export const getFirstLink = (
+  nodes: StoryTree,
+  nodeId: string,
+): StoryTreeItem => {
+  if (nodes[0].isLinkable) {
+    return nodes[0];
+  }
+  return getFirstLink(nodes[0].children, nodeId);
+};
+
 export const getFirstChildId = (
   nodes: StoryTree,
   nodeId: string,
@@ -136,13 +159,24 @@ export const toggleIsExpanded = (
   arr: StoryTree,
   toggledNode: StoryTreeItem,
 ): StoryTree => {
-  return arr.map((node) => {
+  return arr.map((node, order) => {
     const newNode = { ...node };
     if (newNode.id === toggledNode.id) {
       newNode.isExpanded = !newNode.isExpanded;
     }
+    if (toggledNode.id === "+" && order === 0) {
+      newNode.isExpanded = true;
+    }
+    if (toggledNode.id === "-") {
+      newNode.isExpanded = false;
+    }
     if (newNode.children && newNode.children.length) {
-      newNode.children = toggleIsExpanded(newNode.children, toggledNode);
+      newNode.children = toggleIsExpanded(
+        newNode.children,
+        newNode.id === toggledNode.id
+          ? ({ id: newNode.isExpanded ? "+" : "-" } as StoryTreeItem)
+          : toggledNode,
+      );
     }
     return newNode;
   });

packages/ladle/lib/cli/vite-plugin/mdx-to-stories.js

@@ -5,7 +5,8 @@ import getAst from "./get-ast.js";
 
 const transformPlugin = (babel) => {
   const { types: t } = babel;
-  const packageName = "@ladle/react";
+  // make it configurable
+  const packageName = ["@ladle/react", "@uber/ubook"];
 
   return {
     visitor: {