Merge pull request #20373 from storybookjs/tom/sb-1032-warn-if-settin…

…g-tags-docspage-and-then

Don't allow setting `Meta of={X}` if `X` is tagged with `'autodocs'`

code/lib/core-server/src/utils/StoryIndexGenerator.test.ts

@@ -321,20 +321,6 @@ describe('StoryIndexGenerator', () => {
         expect(await generator.getIndex()).toMatchInlineSnapshot(`
           Object {
             "entries": Object {
-              "a--docs": Object {
-                "id": "a--docs",
-                "importPath": "./src/A.stories.js",
-                "name": "docs",
-                "standalone": false,
-                "storiesImports": Array [],
-                "tags": Array [
-                  "component-tag",
-                  "autodocs",
-                  "docs",
-                ],
-                "title": "A",
-                "type": "docs",
-              },
               "a--story-one": Object {
                 "id": "a--story-one",
                 "importPath": "./src/A.stories.js",
@@ -431,19 +417,20 @@ describe('StoryIndexGenerator', () => {
         `);
       });
 
+      const autodocsTrueOptions = {
+        ...autodocsOptions,
+        docs: {
+          ...autodocsOptions.docs,
+          autodocs: true,
+        },
+      };
       it('generates an entry for every CSF file when docsOptions.autodocs = true', async () => {
         const specifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
           './src/**/*.stories.(ts|js|jsx)',
           options
         );
 
-        const generator = new StoryIndexGenerator([specifier], {
-          ...autodocsOptions,
-          docs: {
-            ...autodocsOptions.docs,
-            autodocs: true,
-          },
-        });
+        const generator = new StoryIndexGenerator([specifier], autodocsTrueOptions);
         await generator.initialize();
 
         expect(Object.keys((await generator.getIndex()).entries)).toMatchInlineSnapshot(`
@@ -464,7 +451,26 @@ describe('StoryIndexGenerator', () => {
         `);
       });
 
-      it('does not generate a docs page entry if there is a standalone entry with the same name', async () => {
+      it('throws an error if you attach a MetaOf entry to a tagged autodocs entry', async () => {
+        const csfSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
+          './src/B.stories.ts',
+          options
+        );
+
+        const docsSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
+          './errors/MetaOfAutodocs.mdx',
+          options
+        );
+
+        const generator = new StoryIndexGenerator([csfSpecifier, docsSpecifier], autodocsOptions);
+        await generator.initialize();
+
+        await expect(generator.getIndex()).rejects.toThrowError(
+          `You created a component docs page for B (./errors/MetaOfAutodocs.mdx), but also tagged the CSF file (./src/B.stories.ts) with 'autodocs'. This is probably a mistake.`
+        );
+      });
+
+      it('allows you to override autodocs with MetaOf if it is automatic', async () => {
         const csfSpecifier: NormalizedStoriesSpecifier = normalizeStoriesEntry(
           './src/A.stories.js',
           options
@@ -475,7 +481,10 @@ describe('StoryIndexGenerator', () => {
           options
         );
 
-        const generator = new StoryIndexGenerator([csfSpecifier, docsSpecifier], autodocsOptions);
+        const generator = new StoryIndexGenerator(
+          [csfSpecifier, docsSpecifier],
+          autodocsTrueOptions
+        );
         await generator.initialize();
 
         expect(await generator.getIndex()).toMatchInlineSnapshot(`

code/lib/core-server/src/utils/StoryIndexGenerator.ts

@@ -388,9 +388,14 @@ export class StoryIndexGenerator {
           `🚨 You have two component docs pages with the same name ${betterEntry.title}:${betterEntry.name}. ${changeDocsName}`
         );
       }
-      // If one entry is standalone (i.e. .mdx of={}) we are OK with it overriding a template
-      //   - docs page templates, this is totally fine and expected
-      //   - not sure if it is even possible to have a .mdx of={} pointing at a stories.mdx file
+
+      // If you link a file to a tagged CSF file, you have probably made a mistake
+      if (worseEntry.tags?.includes('autodocs'))
+        throw new Error(
+          `You created a component docs page for ${worseEntry.title} (${betterEntry.importPath}), but also tagged the CSF file (${worseEntry.importPath}) with 'autodocs'. This is probably a mistake.`
+        );
+
+      // Otherwise the existing entry is created by `autodocs=true` which allowed to be overridden.
     } else {
       // If both entries are templates (e.g. you have two CSF files with the same title), then
       //   we need to merge the entries. We'll use the the first one's name and importPath,

code/lib/core-server/src/utils/__mockdata__/errors/MetaOfAutodocs.mdx

@@ -0,0 +1,7 @@
+import * as BStories from '../src/B.stories';
+
+<Meta of={BStories} />
+
+# Docs with of
+
+hello docs

code/lib/core-server/src/utils/__mockdata__/src/A.stories.js

@@ -1,7 +1,7 @@
 const component = {};
 export default {
   component,
-  tags: ['component-tag', 'autodocs'],
+  tags: ['component-tag'],
 };
 
 export const StoryOne = { tags: ['story-tag'] };