Merge pull request #7524 from storybookjs/7522-mdx-module-component

Core: Top-level components in MDX/Module formats

addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap

@@ -281,8 +281,8 @@ function MDXContent({ components, ...props }) {
     <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
       <Meta
         title=\\"Button\\"
+        component={Button}
         parameters={{
-          component: Button,
           notes: 'component notes',
         }}
         mdxType=\\"Meta\\"
@@ -323,7 +323,6 @@ storyNotes.story.parameters = {
 const componentMeta = {
   title: 'Button',
   parameters: {
-    component: Button,
     notes: 'component notes',
   },
   includeStories: ['componentNotes', 'storyNotes'],
@@ -364,8 +363,8 @@ function MDXContent({ components, ...props }) {
     <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
       <Meta
         title=\\"Button\\"
+        component={Button}
         parameters={{
-          component: Button,
           notes: 'component notes',
         }}
         mdxType=\\"Meta\\"
@@ -400,7 +399,6 @@ two.story.parameters = { mdxSource: '<Button>Two</Button>' };
 const componentMeta = {
   title: 'Button',
   parameters: {
-    component: Button,
     notes: 'component notes',
   },
   includeStories: ['helloButton', 'two'],

addons/docs/fixtures/parameters.mdx

@@ -1,7 +1,7 @@
 import { Button } from '@storybook/react/demo';
 import { Story, Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Button" parameters={{ component: Button, notes: 'component notes' }} />
+<Meta title="Button" component={Button} parameters={{ notes: 'component notes' }} />
 
 <Story name="component notes">
   <Button>Component notes</Button>

addons/docs/fixtures/previews.mdx

@@ -1,7 +1,7 @@
 import { Button } from '@storybook/react/demo';
 import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
 
-<Meta title="Button" parameters={{ component: Button, notes: 'component notes' }} />
+<Meta title="Button" component={Button} parameters={{ notes: 'component notes' }} />
 
 # Preview
 

addons/docs/src/blocks/Meta.tsx

@@ -4,6 +4,7 @@ type Decorator = (...args: any) => any;
 
 interface MetaProps {
   title: string;
+  component?: any;
   decorators?: [Decorator];
   parameters?: any;
 }

docs/src/pages/basics/writing-stories/index.md

@@ -16,7 +16,10 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import Button from './Button';
 
-export default { title: 'Button' };
+export default {
+  component: Button,
+  title: 'Button',
+};
 
 export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
@@ -33,7 +36,7 @@ This is what you'll see in Storybook:
 
 ![Basic stories](../static/basic-stories.png)
 
-The named exports define the Button's stories, and the `default` export defines metadata that applies to the group. In this case, the title determines the title of the group in Storybook's left-hand navigation panel.
+The named exports define the Button's stories, and the `default` export defines metadata that applies to the group. In this case, the `component` is `Button`. The title determines the title of the group in Storybook's left-hand navigation panel. In this case it's located at the top level, but typically it's [positioned within the story hierarchy](#story-hierarchy).
 
 This example is written in Storybook's [Module format](../../formats/module-story-format/). Storybook also supports:
 

docs/src/pages/formats/module-story-format/index.md

@@ -11,11 +11,14 @@ The module format is supported in all frameworks except React Native, where you
 
 ## Default export
 
-The default export defines metadata about your component, including its `title` (where it will show up in the Storybook navigation UI), [decorators](../../basics/writing-stories/#decorators) and [parameters](../../writing-stories/#parameters).
+The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../../basics/writing-stories/#story-hierarchy)), [decorators](../../basics/writing-stories/#decorators), and [parameters](../../basics/writing-stories/#parameters).
 
 ```js
+import MyComponent from './MyComponent';
+
 export default {
-  title: 'Path|To/Some/Component',
+  title: 'Path|To/MyComponent',
+  component: MyComponent,
   decorators: [ ... ],
   parameters: { ... }
 }
@@ -27,7 +30,7 @@ For more examples, see [writing stories](../../basics/writing-stories/)
 
 By default every named export in the file represents a story function.
 
-Story functions can be annotated with a `story` object to define story-level [decorators](../../basics/writing-stories/#decorators) and [parameters](../../writing-stories/#parameters), and also to define the `name` of the story.
+Story functions can be annotated with a `story` object to define story-level [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters), and also to define the `name` of the story.
 
 The `name` is useful if you want to use names with spaces, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead.
 
@@ -55,6 +58,7 @@ import someData from './data.json';
 
 export default {
   title: 'MyComponent',
+  component: MyComponent,
   includeStories: ['simpleStory', 'complexStory']
 }
 export const simpleData = { foo: 1, bar: 'baz' };
@@ -71,7 +75,3 @@ For this specific example the equivalent result can be achieved in a few ways de
 - `includeStories: /.*Story$/`
 - `excludeStories: ['simpleData', 'complexData']`
 - `excludeStories: /.*Data$/`
-
-```
-
-```

examples/mithril-kitchen-sink/src/stories/welcome.stories.js

@@ -4,9 +4,7 @@ import Welcome from '../Welcome';
 
 export default {
   title: 'Welcome',
-  parameters: {
-    component: Welcome,
-  },
+  component: Welcome,
 };
 
 export const story1 = () => ({

examples/official-storybook/stories/addon-a11y/base-button.stories.js

@@ -6,8 +6,8 @@ const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons|A11y/BaseButton',
+  component: BaseButton,
   parameters: {
-    component: BaseButton,
     options: { selectedPanel: 'storybook/a11y/panel' },
   },
 };

examples/official-storybook/stories/addon-a11y/button.stories.js

@@ -5,8 +5,8 @@ const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons|A11y/Button',
+  component: Button,
   parameters: {
-    component: Button,
     options: { selectedPanel: 'storybook/a11y/panel' },
   },
 };

examples/official-storybook/stories/addon-a11y/form.stories.js

@@ -6,8 +6,8 @@ const text = 'Testing the a11y addon';
 
 export default {
   title: 'Addons|A11y/Form',
+  component: Form,
   parameters: {
-    component: Form,
     options: { selectedPanel: 'storybook/a11y/panel' },
   },
 };

examples/official-storybook/stories/addon-docs.stories.js

@@ -5,9 +5,7 @@ import DocgenButton from '../components/DocgenButton';
 
 export default {
   title: 'Addons|Docs/stories',
-  parameters: {
-    component: DocgenButton,
-  },
+  component: DocgenButton,
 };
 
 export const basic = () => <div>Click docs tab to see basic docs</div>;

examples/official-storybook/stories/addon-docs.stories.mdx

@@ -15,8 +15,9 @@ import DocgenButton from '../components/DocgenButton';
 
 <Meta
   title="Addons|Docs/mdx"
+  component={Button}
   decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
-  parameters={{ component: Button, notes: 'component notes' }}
+  parameters={{ notes: 'component notes' }}
 />
 
 # Selected

examples/official-storybook/stories/addon-info/options.stories.js

@@ -128,8 +128,8 @@ fullControlOverStylesUsingAFunction.story = {
 export const useACustomComponentForTheTable = () => <BaseButton label="Button" />;
 useACustomComponentForTheTable.story = {
   name: 'Use a custom component for the table',
+  component: TableComponent,
   parameters: {
-    component: TableComponent,
     info: {
       TableComponent,
     },

examples/official-storybook/stories/addon-knobs/with-knobs.stories.js

@@ -43,10 +43,6 @@ let injectedIsLoading = false;
 export default {
   title: 'Addons|Knobs.withKnobs',
   decorators: [withKnobs],
-
-  parameters: {
-    component: withKnobs,
-  },
 };
 
 export const tweaksStaticValues = () => {

examples/official-storybook/stories/demo/button.stories.js

@@ -4,9 +4,7 @@ import { Button } from '@storybook/react/demo';
 
 export default {
   title: 'Other|Demo/Button',
-  parameters: {
-    component: Button,
-  },
+  component: Button,
 };
 
 export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;

examples/official-storybook/stories/demo/button.stories.mdx

@@ -3,12 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
 
-<Meta
-  title="Other|Demo/ButtonMdx"
-  parameters={{
-    component: Button,
-  }}
-/>
+<Meta title="Other|Demo/ButtonMdx" component={Button} />
 
 # Simple Button
 

examples/official-storybook/stories/demo/welcome.stories.js

@@ -4,9 +4,7 @@ import { Welcome } from '@storybook/react/demo';
 
 export default {
   title: 'Other|Demo/Welcome',
-  parameters: {
-    component: Welcome,
-  },
+  component: Welcome,
 };
 
 export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;

examples/preact-kitchen-sink/src/stories/addon-centered.stories.js

@@ -7,11 +7,8 @@ import Button from '../Button';
 
 export default {
   title: 'Addons|Centered',
+  component: Button,
   decorators: [Centered],
-
-  parameters: {
-    component: Centered,
-  },
 };
 
 export const button = () => <Button>A button</Button>;

examples/preact-kitchen-sink/src/stories/button.stories.js

@@ -7,10 +7,7 @@ import Button from '../Button';
 
 export default {
   title: 'Button',
-
-  parameters: {
-    component: Button,
-  },
+  component: Button,
 };
 
 export const withText = () => <Button onclick={action('clicked')}>Hello Button</Button>;

examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js

@@ -5,10 +5,8 @@ import Button from '../components/Button.svelte';
 
 export default {
   title: 'Addon|Centered',
+  component: Button,
   decorators: [Centered],
-  parameters: {
-    component: Centered,
-  },
 };
 
 export const rounded = () => ({

examples/vue-kitchen-sink/src/stories/addon-centered.stories.js

@@ -4,10 +4,8 @@ import MyButton from './Button.vue';
 
 export default {
   title: 'Addon|Centered',
+  component: MyButton,
   decorators: [Centered],
-  parameters: {
-    component: Centered,
-  },
 };
 
 export const rounded = () => ({

examples/vue-kitchen-sink/src/stories/components/app.stories.js

@@ -2,10 +2,7 @@ import App from '../../App.vue';
 
 export default {
   title: 'App',
-
-  parameters: {
-    component: App,
-  },
+  component: App,
 };
 
 export const app = () => ({

examples/vue-kitchen-sink/src/stories/components/button.stories.js

@@ -2,9 +2,7 @@ import Button from '../Button.vue';
 
 export default {
   title: 'Button',
-  parameters: {
-    component: Button,
-  },
+  component: Button,
 };
 
 export const rounded = () => ({

lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.input.js

@@ -5,8 +5,8 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta
   title='Button'
+  component={Button}
   parameters={{
-    component: Button,
     foo: 1,
     bar: 2,
   }} />

lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.output.js

@@ -4,9 +4,9 @@ import { storiesOf } from '@storybook/react';
 
 export default {
   title: 'Button',
+  component: Button,
 
   parameters: {
-    component: Button,
     foo: 1,
     bar: 2,
   },

lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.input.js

@@ -4,8 +4,9 @@ import { Button } from '@storybook/react/demo';
 
 <Meta
   title="Addons|Docs/mdx"
+  component={Button}
   decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
-  parameters={{ component: Button, notes: 'component notes' }}
+  parameters={{ notes: 'component notes' }}
 />
 
 ## Getting into details

lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.output.js

@@ -4,6 +4,7 @@ import { Button } from '@storybook/react/demo';
 
 export default {
   title: 'Addons|Docs/mdx',
+  component: Button,
 
   decorators: [
     storyFn => (
@@ -18,7 +19,6 @@ export default {
   ],
 
   parameters: {
-    component: Button,
     notes: 'component notes',
   },
 };

lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.input.js

@@ -5,9 +5,8 @@ import { storiesOf } from '@storybook/react';
 
 export default {
   title: 'Button',
-
+  component: Button,
   parameters: {
-    component: Button,
     foo: 1,
     bar: 2,
   },

lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.output.js

@@ -4,8 +4,8 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
 
 <Meta
   title='Button'
+  component={Button}
   parameters={{
-    component: Button,
     foo: 1,
     bar: 2,
   }} />

lib/core/src/client/preview/start.js

@@ -350,18 +350,17 @@ export default function start(render, { decorateStory } = {}) {
       }
 
       const { default: meta, ...exports } = fileExports;
-      const kindName = meta.title;
+      const { title: kindName, parameters: params, decorators: decos, component } = meta;
 
       // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
       const kind = clientApi.storiesOf(kindName, true);
-      kind.addParameters({ framework });
 
-      (meta.decorators || []).forEach(decorator => {
+      // we should always have a framework, rest optional
+      kind.addParameters({ framework, component, ...params });
+
+      (decos || []).forEach(decorator => {
         kind.addDecorator(decorator);
       });
-      if (meta.parameters) {
-        kind.addParameters(meta.parameters);
-      }
 
       Object.keys(exports).forEach(key => {
         if (isExportStory(key, meta)) {