Merge pull request #21 from storybookjs/error-of-prop

Throw descriptive error when 'of' prop is detected

src/sb-mdx-plugin.test.ts

@@ -802,6 +802,34 @@ describe('docs-mdx-compiler-plugin', () => {
     ).rejects.toThrow('Expected a Story name, id, or story attribute');
   });
 
+  it("errors on story 'of' prop", async () => {
+    await expect(async () =>
+      clean(dedent`
+        import * as MyStories from './My.stories';
+        import { Story, Meta } from '@storybook/addon-docs';
+
+        <Meta title="Button" />
+
+        # Bad story
+
+        <Story of={MyStories.Primary} />
+      `)
+    ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files.
+    See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`);
+  });
+
+  it("errors on meta 'of' prop", async () => {
+    await expect(async () =>
+      clean(dedent`
+        import * as MyStories from './My.stories';
+        import { Meta } from '@storybook/addon-docs';
+
+        <Meta title="Button" of={MyStories} />
+      `)
+    ).rejects.toThrow(`The 'of' prop is not supported in .stories.mdx files, only .mdx files.
+    See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`);
+  });
+
   describe('csf3', () => {
     it('auto-title-docs-only.mdx', () => {
       expect(

src/sb-mdx-plugin.ts

@@ -135,6 +135,11 @@ const expressionOrNull = (attr: t.JSXAttribute['value']) =>
   t.isJSXExpressionContainer(attr) ? attr.expression : null;
 
 function genStoryExport(ast: t.JSXElement, context: Context) {
+  if (getAttr(ast.openingElement, 'of')) {
+    throw new Error(`The 'of' prop is not supported in .stories.mdx files, only .mdx files.
+    See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`);
+  }
+
   const storyName = idOrNull(getAttr(ast.openingElement, 'name'));
   const storyId = idOrNull(getAttr(ast.openingElement, 'id'));
   const storyRef = getAttr(ast.openingElement, 'story') as t.JSXExpressionContainer;
@@ -277,6 +282,11 @@ function genCanvasExports(ast: t.JSXElement, context: Context) {
 }
 
 function genMeta(ast: t.JSXElement, options: CompilerOptions) {
+  if (getAttr(ast.openingElement, 'of')) {
+    throw new Error(`The 'of' prop is not supported in .stories.mdx files, only .mdx files.
+    See https://storybook.js.org/docs/7.0/react/writing-docs/mdx on how to write MDX files and stories separately.`);
+  }
+
   const titleAttr = getAttr(ast.openingElement, 'title');
   const idAttr = getAttr(ast.openingElement, 'id');
   let title = null;