Change logic for detecting docs-only items

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

@@ -7,7 +7,7 @@ import type { StoriesHash, State, ComposedRef } from '@storybook/api';
 
 import { Heading } from './Heading';
 
-import { DEFAULT_REF_ID, collapseAllStories, collapseDocsOnlyStories } from './data';
+import { DEFAULT_REF_ID, collapseAllStories } from './data';
 import { Explorer } from './Explorer';
 import { Search } from './Search';
 import { SearchResults } from './SearchResults';
@@ -100,7 +100,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
     enableShortcuts = true,
     refs = {},
   }) => {
-    const collapseFn = DOCS_MODE ? collapseAllStories : collapseDocsOnlyStories;
+    const collapseFn = DOCS_MODE && collapseAllStories;
     const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
     const stories = useMemo(() => collapseFn(storiesHash), [DOCS_MODE, storiesHash]);
 
@@ -109,7 +109,7 @@ export const Sidebar: FunctionComponent<SidebarProps> = React.memo(
         if (ref.stories) {
           acc[id] = {
             ...ref,
-            stories: collapseFn(ref.stories),
+            stories: collapseFn ? collapseFn(ref.stories) : ref.stories,
           };
         } else {
           acc[id] = ref;

lib/ui/src/components/sidebar/__tests__/data.test.ts

@@ -1,5 +1,5 @@
 import type { StoriesHash } from '@storybook/api';
-import { collapseDocsOnlyStories, collapseAllStories } from '../data';
+import { collapseAllStories } from '../data';
 
 type Item = StoriesHash[keyof StoriesHash];
 
@@ -69,28 +69,6 @@ const b2: Item = {
 
 const stories: StoriesHash = { root, a, a1, b, b1, b2 };
 
-// this seems to work as intended
-describe('collapse docs-only stories', () => {
-  it('ignores normal stories', () => {
-    const filtered = collapseDocsOnlyStories(stories);
-    expect(filtered).toEqual(stories);
-  });
-
-  it('filters out docs-only stories', () => {
-    const hasDocsOnly: StoriesHash = {
-      ...stories,
-      a1: { ...a1, parameters: { ...a1.parameters, ...docsOnly.parameters } },
-    };
-    const filtered = collapseDocsOnlyStories(hasDocsOnly);
-
-    expect(filtered.root.children).not.toContain(hasDocsOnly.a.id);
-    expect(filtered.root.children).toContain(hasDocsOnly.a1.id);
-    expect(filtered.root.children).toContain(hasDocsOnly.b.id);
-
-    expect(filtered.a).not.toBeDefined();
-  });
-});
-
 describe('collapse all stories', () => {
   it('collapses normal stories', () => {
     const collapsed = collapseAllStories(stories);

lib/ui/src/components/sidebar/data.ts

@@ -36,7 +36,7 @@ export const collapseAllStories = (stories: StoriesHash) => {
       args: {},
       ...rest,
       id: leafId,
-      kind: (stories[leafId] as Story).kind,
+      title: (stories[leafId] as Story).title,
       isRoot: false,
       isLeaf: true,
       isComponent: true,
@@ -72,48 +72,3 @@ export const collapseAllStories = (stories: StoriesHash) => {
   });
   return result;
 };
-
-export const collapseDocsOnlyStories = (storiesHash: StoriesHash) => {
-  // keep track of component IDs that have been rewritten to the ID of their first leaf child
-  const componentIdToLeafId: Record<string, string> = {};
-  const docsOnlyStoriesRemoved = Object.values(storiesHash).filter((item: Story) => {
-    if (item.isLeaf && item.parameters && item.parameters.docsOnly) {
-      componentIdToLeafId[item.parent] = item.id;
-      return false; // filter it out
-    }
-    return true;
-  });
-
-  const docsOnlyComponentsCollapsed = docsOnlyStoriesRemoved.map((item: Story) => {
-    // collapse docs-only components
-    const { isComponent, children, id } = item;
-    if (isComponent && children.length === 1) {
-      const leafId = componentIdToLeafId[id];
-      if (leafId) {
-        const collapsed = {
-          args: {},
-          ...item,
-          id: leafId,
-          isLeaf: true,
-          children: [] as string[],
-        };
-        return collapsed;
-      }
-    }
-
-    // update groups
-    if (children) {
-      const rewritten = children.map((child: string) => componentIdToLeafId[child] || child);
-      return { ...item, children: rewritten };
-    }
-
-    // pass through stories unmodified
-    return item;
-  });
-
-  const result = {} as StoriesHash;
-  docsOnlyComponentsCollapsed.forEach((item) => {
-    result[item.id] = item as Item;
-  });
-  return result;
-};

lib/ui/src/containers/preview.tsx

@@ -31,7 +31,7 @@ const getDescription = (item: Item) => {
 const mapper = ({ api, state }: Combo) => {
   const { layout, location, customQueryParams, storyId, refs, viewMode, path, refId } = state;
   const story = api.getData(storyId, refId);
-  const docsOnly = story && story.parameters ? !!story.parameters.docsOnly : false;
+  const docsOnly = story.isComponent && story.isLeaf;
 
   return {
     api,

lib/ui/src/index.tsx

@@ -72,7 +72,7 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
                   viewMode={state.viewMode}
                   layout={isLoading ? { ...state.layout, showPanel: false } : state.layout}
                   panelCount={panelCount}
-                  docsOnly={story && story.parameters && story.parameters.docsOnly}
+                  docsOnly={story.isComponent && story.isLeaf}
                 />
               </ThemeProvider>
             );