Merge pull request #19590 from storybookjs/tom/sb-732-docs2-support-d…

…ocs-only-stories-in-v6

Add new SET_INDEX event

code/lib/api/src/lib/stories.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { dedent } from 'ts-dedent';
 import mapValues from 'lodash/mapValues';
 import countBy from 'lodash/countBy';
-import { toId, sanitize } from '@storybook/csf';
+import { sanitize } from '@storybook/csf';
 import type {
   StoryId,
   ComponentTitle,
@@ -235,7 +235,7 @@ export const denormalizeStoryParameters = ({
 
 const TITLE_PATH_SEPARATOR = /\s*\/\s*/;
 
-// We used to received a bit more data over the channel on the SET_STORIES event, including
+// We recieve a bit more data over the channel on the SET_INDEX event (v6 store), including
 // the full parameters for each story.
 type PreparedIndexEntry = IndexEntry & {
   parameters?: Parameters;
@@ -252,19 +252,14 @@ export const transformSetStoriesStoryDataToStoriesHash = (
   data: SetStoriesStoryData,
   { provider, docsOptions }: { provider: Provider; docsOptions: DocsOptions }
 ) =>
-  transformStoryIndexToStoriesHash(
-    transformSetStoriesStoryDataToPreparedStoryIndex(data, { docsOptions }),
-    {
-      provider,
-      docsOptions,
-    }
-  );
+  transformStoryIndexToStoriesHash(transformSetStoriesStoryDataToPreparedStoryIndex(data), {
+    provider,
+    docsOptions,
+  });
 
 const transformSetStoriesStoryDataToPreparedStoryIndex = (
-  stories: SetStoriesStoryData,
-  { docsOptions }: { docsOptions: DocsOptions }
+  stories: SetStoriesStoryData
 ): PreparedStoryIndex => {
-  const seenTitles = new Set<ComponentTitle>();
   const entries: PreparedStoryIndex['entries'] = Object.entries(stories).reduce(
     (acc, [id, story]) => {
       if (!story) return acc;
@@ -283,19 +278,6 @@ const transformSetStoriesStoryDataToPreparedStoryIndex = (
           ...base,
         };
       } else {
-        if (!seenTitles.has(base.title) && docsOptions.docsPage) {
-          const name = docsOptions.defaultName;
-          const docsId = toId(story.componentId || base.title, name);
-          seenTitles.add(base.title);
-          acc[docsId] = {
-            type: 'docs',
-            storiesImports: [],
-            ...base,
-            id: docsId,
-            name,
-          };
-        }
-
         const { argTypes, args, initialArgs } = story;
         acc[id] = {
           type: 'story',

code/lib/api/src/modules/stories.ts

@@ -9,6 +9,7 @@ import {
   STORY_CHANGED,
   SELECT_STORY,
   SET_STORIES,
+  SET_INDEX,
   STORY_SPECIFIED,
   STORY_INDEX_INVALIDATED,
   CONFIG_ERROR,
@@ -18,20 +19,19 @@ import { logger } from '@storybook/client-logger';
 import { getEventMetadata } from '../lib/events';
 import {
   denormalizeStoryParameters,
-  transformSetStoriesStoryDataToStoriesHash,
   transformStoryIndexToStoriesHash,
   getComponentLookupList,
   getStoriesLookupList,
   HashEntry,
   LeafEntry,
   addPreparedStories,
+  PreparedStoryIndex,
 } from '../lib/stories';
 
 import type {
   StoriesHash,
   StoryEntry,
   StoryId,
-  SetStoriesStoryData,
   SetStoriesPayload,
   StoryIndex,
 } from '../lib/stories';
@@ -66,7 +66,7 @@ export interface SubAPI {
     obj?: { ref?: string; viewMode?: ViewMode }
   ) => void;
   getCurrentStoryData: () => LeafEntry;
-  setStories: (stories: SetStoriesStoryData, failed?: Error) => Promise<void>;
+  setIndex: (index: PreparedStoryIndex) => Promise<void>;
   jumpToComponent: (direction: Direction) => void;
   jumpToStory: (direction: Direction) => void;
   getData: (storyId: StoryId, refId?: string) => LeafEntry;
@@ -86,8 +86,7 @@ export interface SubAPI {
     direction: Direction,
     toSiblingGroup: boolean // when true, skip over leafs within the same group
   ): StoryId;
-  fetchStoryList: () => Promise<void>;
-  setStoryList: (storyList: StoryIndex) => Promise<void>;
+  fetchIndex: () => Promise<void>;
   updateStory: (storyId: StoryId, update: StoryUpdate, ref?: ComposedRef) => Promise<void>;
 }
 
@@ -198,19 +197,6 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
         api.selectStory(result, undefined, { ref: refId });
       }
     },
-    setStories: async (input, error) => {
-      // Now create storiesHash by reordering the above by group
-      const hash = transformSetStoriesStoryDataToStoriesHash(input, {
-        provider,
-        docsOptions,
-      });
-
-      await store.setState({
-        storiesHash: hash,
-        storiesConfigured: true,
-        storiesFailed: error,
-      });
-    },
     selectFirstStory: () => {
       const { storiesHash } = store.getState();
       const firstStory = Object.keys(storiesHash).find((id) => storiesHash[id].type === 'story');
@@ -322,7 +308,7 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
         options: { target: refId },
       });
     },
-    fetchStoryList: async () => {
+    fetchIndex: async () => {
       try {
         const result = await fetch(STORY_INDEX_PATH);
         if (result.status !== 200) throw new Error(await result.text());
@@ -335,15 +321,18 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
           return;
         }
 
-        await fullAPI.setStoryList(storyIndex);
+        await fullAPI.setIndex(storyIndex);
       } catch (err) {
         store.setState({
           storiesConfigured: true,
           storiesFailed: err,
         });
       }
     },
-    setStoryList: async (storyIndex: StoryIndex) => {
+    // The story index we receive on SET_INDEX is "prepared" in that it has parameters
+    // The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional
+    // so we can cast one to the other easily enough
+    setIndex: async (storyIndex: PreparedStoryIndex) => {
       const newHash = transformStoryIndexToStoriesHash(storyIndex, {
         provider,
         docsOptions,
@@ -453,18 +442,25 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
       }
     });
 
-    fullAPI.on(SET_STORIES, function handler(data: SetStoriesPayload) {
+    fullAPI.on(SET_INDEX, function handler(index: PreparedStoryIndex) {
       const { ref } = getEventMetadata(this, fullAPI);
-      const setStoriesData = data.v ? denormalizeStoryParameters(data) : data.stories;
 
       if (!ref) {
-        if (!data.v) {
-          throw new Error('Unexpected legacy SET_STORIES event from local source');
-        }
-
-        fullAPI.setStories(setStoriesData);
+        fullAPI.setIndex(index);
         const options = fullAPI.getCurrentParameter('options');
         fullAPI.setOptions(removeRemovedOptions(options));
+      } else {
+        fullAPI.setRef(ref.id, { ...ref, storyIndex: index }, true);
+      }
+    });
+
+    // For composition back-compatibilty
+    fullAPI.on(SET_STORIES, function handler(data: SetStoriesPayload) {
+      const { ref } = getEventMetadata(this, fullAPI);
+      const setStoriesData = data.v ? denormalizeStoryParameters(data) : data.stories;
+
+      if (!ref) {
+        throw new Error('Cannot call SET_STORIES for local frame');
       } else {
         fullAPI.setRef(ref.id, { ...ref, setStoriesData }, true);
       }
@@ -509,8 +505,8 @@ export const init: ModuleFn<SubAPI, SubState, true> = ({
     });
 
     if (FEATURES?.storyStoreV7) {
-      provider.serverChannel?.on(STORY_INDEX_INVALIDATED, () => fullAPI.fetchStoryList());
-      await fullAPI.fetchStoryList();
+      provider.serverChannel?.on(STORY_INDEX_INVALIDATED, () => fullAPI.fetchIndex());
+      await fullAPI.fetchIndex();
     }
   };