Merge pull request #13089 from storybookjs/13082-fix-no-parent

UI: Fix single story hoisting at the root

Author: shilman

lib/ui/src/components/sidebar/Tree.stories.tsx

@@ -34,6 +34,33 @@ export const Full = () => {
   );
 };
 
+const singleStoryComponent = {
+  single: {
+    name: 'Single',
+    id: 'single',
+    parent: false,
+    depth: 0,
+    children: ['single--single'],
+    isComponent: true,
+    isLeaf: false,
+    isRoot: false,
+  },
+  'single--single': {
+    id: 'single--single',
+    kind: 'Single',
+    name: 'Single',
+    story: 'Single',
+    args: {},
+    argTypes: {},
+    initialArgs: {},
+    depth: 1,
+    parent: 'single',
+    isLeaf: true,
+    isComponent: false,
+    isRoot: false,
+  },
+};
+
 const tooltipStories = Object.keys(stories).reduce((acc, key) => {
   if (key === 'tooltip-tooltipselect--default') {
     acc['tooltip-tooltipselect--tooltipselect'] = {
@@ -51,15 +78,15 @@ const tooltipStories = Object.keys(stories).reduce((acc, key) => {
   return acc;
 }, {} as StoriesHash);
 
-export const SingleStoryComponent = () => {
-  const [selectedId, setSelectedId] = React.useState('tooltip-tooltipselect--tooltipselect');
+export const SingleStoryComponents = () => {
+  const [selectedId, setSelectedId] = React.useState('tooltip-tooltipbuildlist--default');
   return (
     <Tree
       isBrowsing
       isMain
       refId={refId}
-      data={tooltipStories}
-      highlightedItemId="tooltip-tooltipselect--tooltipselect"
+      data={{ ...singleStoryComponent, ...tooltipStories } as StoriesHash}
+      highlightedItemId="tooltip-tooltipbuildlist--default"
       setHighlightedItemId={log}
       selectedStoryId={selectedId}
       onSelectStoryId={setSelectedId}

lib/ui/src/components/sidebar/Tree.tsx

@@ -225,7 +225,7 @@ export const Tree = React.memo<{
     }, [data, rootIds, orphanIds]);
 
     // Create a list of component IDs which have exactly one story, which name exactly matches the component name.
-    const singleStoryComponents = useMemo(() => {
+    const singleStoryComponentIds = useMemo(() => {
       return orphansFirst.filter((nodeId) => {
         const { children = [], isComponent, isLeaf, name } = data[nodeId];
         return (
@@ -239,20 +239,21 @@ export const Tree = React.memo<{
     }, [data, orphansFirst]);
 
     // Omit single-story components from the list of nodes.
-    const collapsedItems = useMemo(
-      () => orphansFirst.filter((id) => !singleStoryComponents.includes(id)),
-      [orphansFirst, singleStoryComponents]
-    );
+    const collapsedItems = useMemo(() => {
+      return orphansFirst.filter((id) => !singleStoryComponentIds.includes(id));
+    }, [orphanIds, orphansFirst, singleStoryComponentIds]);
 
     // Rewrite the dataset to place the child story in place of the component.
     const collapsedData = useMemo(() => {
-      return singleStoryComponents.reduce(
+      return singleStoryComponentIds.reduce(
         (acc, id) => {
           const { children, parent } = data[id] as Group;
           const [childId] = children;
-          const siblings = [...data[parent].children];
-          siblings[siblings.indexOf(id)] = childId;
-          acc[parent] = { ...data[parent], children: siblings };
+          if (parent) {
+            const siblings = [...data[parent].children];
+            siblings[siblings.indexOf(id)] = childId;
+            acc[parent] = { ...data[parent], children: siblings };
+          }
           acc[childId] = { ...data[childId], parent, depth: data[childId].depth - 1 } as Story;
           return acc;
         },