Merge pull request #22120 from storybookjs/tom/21798-add-attached-mdx…

…-to-index Core: Add new tags to distinguish docs attachment
storybookjs · Apr 18, 2023 · fdadeb7 · fdadeb7
2 parents 510a130 + e7b6a5b
commit fdadeb7
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 2 deletions.
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts
@@ -508,6 +508,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/B.stories.ts",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "B",
@@ -566,6 +567,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/B.stories.ts",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "B",
@@ -616,6 +618,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -727,6 +730,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -740,6 +744,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -762,6 +767,7 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": Array [],
                 "tags": Array [
+                  "unattached-mdx",
                   "docs",
                 ],
                 "title": "ComponentReference",
@@ -773,6 +779,7 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": Array [],
                 "tags": Array [
+                  "unattached-mdx",
                   "docs",
                 ],
                 "title": "docs2/Yabbadabbadooo",
@@ -784,6 +791,7 @@ describe('StoryIndexGenerator', () => {
                 "name": "docs",
                 "storiesImports": Array [],
                 "tags": Array [
+                  "unattached-mdx",
                   "docs",
                 ],
                 "title": "NoTitle",
@@ -844,6 +852,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -857,6 +866,7 @@ describe('StoryIndexGenerator', () => {
                   "./src/A.stories.js",
                 ],
                 "tags": Array [
+                  "attached-mdx",
                   "docs",
                 ],
                 "title": "A",
@@ -879,6 +889,7 @@ describe('StoryIndexGenerator', () => {
                 "name": "Info",
                 "storiesImports": Array [],
                 "tags": Array [
+                  "unattached-mdx",
                   "docs",
                 ],
                 "title": "ComponentReference",
@@ -890,6 +901,7 @@ describe('StoryIndexGenerator', () => {
                 "name": "Info",
                 "storiesImports": Array [],
                 "tags": Array [
+                  "unattached-mdx",
                   "docs",
                 ],
                 "title": "docs2/Yabbadabbadooo",
@@ -901,6 +913,7 @@ describe('StoryIndexGenerator', () => {
                 "name": "Info",
                 "storiesImports": Array [],
                 "tags": Array [
+                  "unattached-mdx",
                   "docs",
                 ],
                 "title": "NoTitle",
@@ -911,6 +924,62 @@ describe('StoryIndexGenerator', () => {
           }
         `);
       });
+
+      it('pulls the attached story file to the front of the list', async () => {
+        const generator = new StoryIndexGenerator(
+          [
+            normalizeStoriesEntry('./src/A.stories.js', options),
+            normalizeStoriesEntry('./src/B.stories.ts', options),
+            normalizeStoriesEntry('./complex/TwoStoryReferences.mdx', options),
+          ],
+          options
+        );
+        await generator.initialize();
+        expect(await generator.getIndex()).toMatchInlineSnapshot(`
+          Object {
+            "entries": Object {
+              "a--story-one": Object {
+                "id": "a--story-one",
+                "importPath": "./src/A.stories.js",
+                "name": "Story One",
+                "tags": Array [
+                  "story-tag",
+                  "story",
+                ],
+                "title": "A",
+                "type": "story",
+              },
+              "b--story-one": Object {
+                "id": "b--story-one",
+                "importPath": "./src/B.stories.ts",
+                "name": "Story One",
+                "tags": Array [
+                  "autodocs",
+                  "story",
+                ],
+                "title": "B",
+                "type": "story",
+              },
+              "b--twostoryreferences": Object {
+                "id": "b--twostoryreferences",
+                "importPath": "./complex/TwoStoryReferences.mdx",
+                "name": "TwoStoryReferences",
+                "storiesImports": Array [
+                  "./src/B.stories.ts",
+                  "./src/A.stories.js",
+                ],
+                "tags": Array [
+                  "attached-mdx",
+                  "docs",
+                ],
+                "title": "B",
+                "type": "docs",
+              },
+            },
+            "v": 4,
+          }
+        `);
+      });
     });
 
     describe('errors', () => {

diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -325,6 +325,10 @@ export class StoryIndexGenerator {
       // are invalidated.f
       const dependencies = this.findDependencies(absoluteImports);
 
+      // To ensure the `<Meta of={}/>` import is always first in the list, we'll bring the dependency
+      // that contains it to the front of the list.
+      let sortedDependencies = dependencies;
+
       // Also, if `result.of` is set, it means that we're using the `<Meta of={XStories} />` syntax,
       // so find the `title` defined the file that `meta` points to.
       let csfEntry: StoryIndexEntry;
@@ -342,6 +346,8 @@ export class StoryIndexGenerator {
               csfEntry = first;
             }
           }
+
+          sortedDependencies = [dep, ...dependencies.filter((d) => d !== dep)];
         });
 
         if (!csfEntry)
@@ -372,9 +378,9 @@ export class StoryIndexGenerator {
         title,
         name,
         importPath,
-        storiesImports: dependencies.map((dep) => dep.entries[0].importPath),
+        storiesImports: sortedDependencies.map((dep) => dep.entries[0].importPath),
         type: 'docs',
-        tags: [...(result.tags || []), 'docs'],
+        tags: [...(result.tags || []), csfEntry ? 'attached-mdx' : 'unattached-mdx', 'docs'],
       };
       return docsEntry;
     } catch (err) {

diff --git a/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx b/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx
@@ -0,0 +1,9 @@
+{/* References AStories first, but is attached to B */}
+import * as AStories from '../src/A.stories';
+import * as BStories from '../src/B.stories';
+
+<Meta of={BStories}/>
+
+# This file references two story files
+
+It is important that B.stories is the first listed in `storiesImports` (so we can tell what it is attached to)
diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts
@@ -126,6 +126,7 @@ describe('useStoriesJson', () => {
                 "./src/A.stories.js",
               ],
               "tags": Array [
+                "attached-mdx",
                 "docs",
               ],
               "title": "A",
@@ -139,6 +140,7 @@ describe('useStoriesJson', () => {
                 "./src/A.stories.js",
               ],
               "tags": Array [
+                "attached-mdx",
                 "docs",
               ],
               "title": "A",
@@ -183,6 +185,7 @@ describe('useStoriesJson', () => {
               "name": "docs",
               "storiesImports": Array [],
               "tags": Array [
+                "unattached-mdx",
                 "docs",
               ],
               "title": "docs2/ComponentReference",
@@ -194,6 +197,7 @@ describe('useStoriesJson', () => {
               "name": "docs",
               "storiesImports": Array [],
               "tags": Array [
+                "unattached-mdx",
                 "docs",
               ],
               "title": "docs2/NoTitle",
@@ -205,6 +209,7 @@ describe('useStoriesJson', () => {
               "name": "docs",
               "storiesImports": Array [],
               "tags": Array [
+                "unattached-mdx",
                 "docs",
               ],
               "title": "docs2/Yabbadabbadooo",
@@ -304,6 +309,7 @@ describe('useStoriesJson', () => {
               ],
               "story": "MetaOf",
               "tags": Array [
+                "attached-mdx",
                 "docs",
               ],
               "title": "A",
@@ -323,6 +329,7 @@ describe('useStoriesJson', () => {
               ],
               "story": "Second Docs",
               "tags": Array [
+                "attached-mdx",
                 "docs",
               ],
               "title": "A",
@@ -391,6 +398,7 @@ describe('useStoriesJson', () => {
               "storiesImports": Array [],
               "story": "docs",
               "tags": Array [
+                "unattached-mdx",
                 "docs",
               ],
               "title": "docs2/ComponentReference",
@@ -408,6 +416,7 @@ describe('useStoriesJson', () => {
               "storiesImports": Array [],
               "story": "docs",
               "tags": Array [
+                "unattached-mdx",
                 "docs",
               ],
               "title": "docs2/NoTitle",
@@ -425,6 +434,7 @@ describe('useStoriesJson', () => {
               "storiesImports": Array [],
               "story": "docs",
               "tags": Array [
+                "unattached-mdx",
                 "docs",
               ],
               "title": "docs2/Yabbadabbadooo",