Merge pull request #17669 from storybookjs/17611-docs-order-should-mi…

…rror-index

Addon-docs: DocsPage story order should match the index

lib/store/src/StoryStore.test.ts

@@ -357,6 +357,25 @@ describe('StoryStore', () => {
       expect(stories).toHaveLength(2);
       expect(stories.map((s) => s.id)).toEqual(['component-one--a', 'component-one--b']);
     });
+
+    it('returns them in the order they are in the index, not the file', async () => {
+      const store = new StoryStore();
+      store.setProjectAnnotations(projectAnnotations);
+      const reversedIndex = {
+        v: 3,
+        stories: {
+          'component-one--b': storyIndex.stories['component-one--b'],
+          'component-one--a': storyIndex.stories['component-one--a'],
+        },
+      };
+      store.initialize({ storyIndex: reversedIndex, importFn, cache: false });
+
+      const csfFile = await store.loadCSFFileByStoryId('component-one--a');
+      const stories = store.componentStoriesFromCSFFile({ csfFile });
+
+      expect(stories).toHaveLength(2);
+      expect(stories.map((s) => s.id)).toEqual(['component-one--b', 'component-one--a']);
+    });
   });
 
   describe('getStoryContext', () => {

lib/store/src/StoryStore.ts

@@ -216,9 +216,9 @@ export class StoryStore<TFramework extends AnyFramework> {
 
   // If we have a CSF file we can get all the stories from it synchronously
   componentStoriesFromCSFFile({ csfFile }: { csfFile: CSFFile<TFramework> }): Story<TFramework>[] {
-    return Object.keys(csfFile.stories).map((storyId: StoryId) =>
-      this.storyFromCSFFile({ storyId, csfFile })
-    );
+    return Object.keys(this.storyIndex.stories)
+      .filter((storyId: StoryId) => !!csfFile.stories[storyId])
+      .map((storyId: StoryId) => this.storyFromCSFFile({ storyId, csfFile }));
   }
 
   // A prepared story does not include args, globals or hooks. These are stored in the story store