diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
index e63d097b98be..6dbfd97a1cdd 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
@@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
index 2837b632c0aa..abd9b87b39b4 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@@ -4,4 +4,8 @@ import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
diff --git a/docs/src/new-components/basics/tooltip/Tooltip.stories.js b/docs/src/new-components/basics/tooltip/Tooltip.stories.js
index 83750d375140..9c0bfb7094e7 100644
--- a/docs/src/new-components/basics/tooltip/Tooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/Tooltip.stories.js
@@ -16,6 +16,9 @@ const Content = styled.div`
 `;
 
 storiesOf('basics/tooltip/Tooltip', module)
+  .addParameters({
+    component: Tooltip,
+  })
   .add('basic, default', () => (
     <Tooltip hasChrome {...mockPopperProps}>
       <Content>Text</Content>
diff --git a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
index c848e50a0de4..fe563238920f 100644
--- a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
@@ -13,6 +13,9 @@ export const links = [
 ];
 
 storiesOf('basics/tooltip/TooltipLinkList', module)
+  .addParameters({
+    component: TooltipLinkList,
+  })
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
diff --git a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
index 28a21b36b3a4..ae615685aefb 100644
--- a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
@@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
 import TooltipMessage from './TooltipMessage';
 
 storiesOf('basics/tooltip/TooltipMessage', module)
+  .addParameters({
+    component: TooltipMessage,
+  })
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
diff --git a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
index 990b43c1647b..ea450f10121a 100644
--- a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
@@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
 import TooltipNote from './TooltipNote';
 
 storiesOf('basics/tooltip/TooltipNote', module)
+  .addParameters({
+    component: TooltipNote,
+  })
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
       <WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>
diff --git a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
index 8f5fa1089ddf..685fca47716e 100644
--- a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
@@ -46,6 +46,9 @@ Tooltip.defaultProps = {
 };
 
 storiesOf('basics/tooltip/WithTooltip', module)
+  .addParameters({
+    component: WithTooltip,
+  })
   .addDecorator(storyFn => (
     <ViewPort>
       <BackgroundBox>
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/index.js b/examples-native/crna-kitchen-sink/storybook/stories/index.js
index 1cc3e1352dc1..b1e80c977bd7 100644
--- a/examples-native/crna-kitchen-sink/storybook/stories/index.js
+++ b/examples-native/crna-kitchen-sink/storybook/stories/index.js
@@ -20,7 +20,9 @@ addParameters({
   ],
 });
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
+storiesOf('Welcome', module).addParameters({
+  component: Welcome
+}).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
   notes: `
 # Markdown!\n
 * List Item
@@ -28,7 +30,9 @@ storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo(
 `,
 });
 
-storiesOf('Button', module)
+storiesOf('Button', module).addParameters({
+  component: Button
+})
   .addParameters({
     backgrounds: [
       { name: 'dark', value: '#222222' },
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index f77af5ff862a..3f0d43a8cc7f 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -24,6 +24,9 @@ const InfoButton = () => (
 );
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>, {
     options: { selectedPanel: 'storybook/actions/panel' },
   })
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.js b/examples/cra-kitchen-sink/src/stories/welcome.js
index 9610f12d04e9..936d40e39e31 100644
--- a/examples/cra-kitchen-sink/src/stories/welcome.js
+++ b/examples/cra-kitchen-sink/src/stories/welcome.js
@@ -3,4 +3,8 @@ import { Welcome } from '@storybook/react/demo';
 import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
diff --git a/examples/cra-react15/src/stories/index.js b/examples/cra-react15/src/stories/index.js
index aa04241802db..9813c023564c 100644
--- a/examples/cra-react15/src/stories/index.js
+++ b/examples/cra-react15/src/stories/index.js
@@ -6,9 +6,16 @@ import { linkTo } from '@storybook/addon-links';
 
 import { Button, Welcome } from '@storybook/react/demo';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
index f6a46d022c8c..dd08c80cd26e 100644
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ b/examples/ember-cli/stories/addon-centered.stories.js
@@ -3,6 +3,9 @@ import { storiesOf } from '@storybook/ember';
 import Centered from '@storybook/addon-centered/ember';
 
 storiesOf('Addon|Centered', module)
+  .addParameters({
+    component: Centered,
+  })
   .addDecorator(Centered)
   .add('button', () => ({
     template: hbs`<button>A Button</button>`,
diff --git a/examples/marko-cli/src/stories/addon-actions.stories.js b/examples/marko-cli/src/stories/addon-actions.stories.js
index 73d25b05d3f6..fe094b3f4acd 100644
--- a/examples/marko-cli/src/stories/addon-actions.stories.js
+++ b/examples/marko-cli/src/stories/addon-actions.stories.js
@@ -2,6 +2,8 @@ import { storiesOf } from '@storybook/marko';
 import { action } from '@storybook/addon-actions';
 import Button from '../components/action-button/index.marko';
 
-storiesOf('Addons|Actions/Button', module).add('Simple', () =>
-  Button.renderSync({ click: action('action logged!') })
-);
+storiesOf('Addons|Actions/Button', module)
+  .addParameters({
+    component: Button,
+  })
+  .add('Simple', () => Button.renderSync({ click: action('action logged!') }));
diff --git a/examples/marko-cli/src/stories/addon-knobs.stories.js b/examples/marko-cli/src/stories/addon-knobs.stories.js
index 5c44b59e9fcc..f6236d9862a0 100644
--- a/examples/marko-cli/src/stories/addon-knobs.stories.js
+++ b/examples/marko-cli/src/stories/addon-knobs.stories.js
@@ -3,6 +3,9 @@ import { withKnobs, text, number } from '@storybook/addon-knobs';
 import Hello from '../components/hello/index.marko';
 
 storiesOf('Addons|Knobs/Hello', module)
+  .addParameters({
+    component: Hello,
+  })
   .addParameters({ options: { panelPosition: 'right' } })
   .addDecorator(withKnobs)
   .add('Simple', () => {
diff --git a/examples/marko-cli/src/stories/index.stories.js b/examples/marko-cli/src/stories/index.stories.js
index 8ef9e6d38cb3..9437d7ff170e 100644
--- a/examples/marko-cli/src/stories/index.stories.js
+++ b/examples/marko-cli/src/stories/index.stories.js
@@ -4,12 +4,27 @@ import ClickCount from '../components/click-count/index.marko';
 import StopWatch from '../components/stop-watch/index.marko';
 import Welcome from '../components/welcome/index.marko';
 
-storiesOf('Main|Welcome', module).add('welcome', () => Welcome.renderSync({}));
+storiesOf('Main|Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('welcome', () => Welcome.renderSync({}));
 
 storiesOf('Main|Hello', module)
+  .addParameters({
+    component: Hello,
+  })
   .add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
   .add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
 
-storiesOf('Main|ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
+storiesOf('Main|ClickCount', module)
+  .addParameters({
+    component: ClickCount,
+  })
+  .add('Simple', () => ClickCount.renderSync({}));
 
-storiesOf('Main|StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
+storiesOf('Main|StopWatch', module)
+  .addParameters({
+    component: StopWatch,
+  })
+  .add('Simple', () => StopWatch.renderSync({}));
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
index e97deabdef51..3623a83e701b 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
@@ -7,6 +7,9 @@ import Centered from '@storybook/addon-centered/mithril';
 import Button from '../Button';
 
 storiesOf('Addons|Centered', module)
+  .addParameters({
+    component: Centered,
+  })
   .addDecorator(Centered)
   .add('button', () => ({
     view: () => <Button>A button</Button>,
diff --git a/examples/mithril-kitchen-sink/src/stories/index.stories.js b/examples/mithril-kitchen-sink/src/stories/index.stories.js
index a0952e562bfd..fb5175691afd 100644
--- a/examples/mithril-kitchen-sink/src/stories/index.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/index.stories.js
@@ -7,11 +7,18 @@ import { linkTo } from '@storybook/addon-links';
 import Button from '../Button';
 import Welcome from '../Welcome';
 
-storiesOf('Welcome', module).add('to Storybook', () => ({
-  view: () => m(Welcome, { showApp: linkTo('Button') }),
-}));
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => ({
+    view: () => m(Welcome, { showApp: linkTo('Button') }),
+  }));
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => ({
     view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
   }))
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
index a4717e3ec9e4..c8e18e16662f 100644
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ b/examples/official-storybook/stories/addon-a11y.stories.js
@@ -12,6 +12,9 @@ const image = 'http://placehold.it/350x150';
 const href = 'javascript:void 0';
 
 storiesOf('Addons|A11y/BaseButton', module)
+  .addParameters({
+    component: BaseButton,
+  })
   .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
   .add('Default', () => <BaseButton label="" />)
   .add('Label', () => <BaseButton label={text} />)
@@ -27,6 +30,9 @@ storiesOf('Addons|A11y/BaseButton', module)
   ));
 
 storiesOf('Addons|A11y/Button', module)
+  .addParameters({
+    component: Button,
+  })
   .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
   .add('Default', () => <Button />)
   .add('Content', () => <Button content={text} />)
@@ -35,6 +41,9 @@ storiesOf('Addons|A11y/Button', module)
   .add('Invalid contrast', () => <Button contrast="wrong" content={text} />);
 
 storiesOf('Addons|A11y/Form', module)
+  .addParameters({
+    component: Form,
+  })
   .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
   .add('Without Label', () => (
     <Form.Field label="">
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
index b3c552ca01cd..4229f8ad5094 100644
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ b/examples/official-storybook/stories/addon-info.stories.js
@@ -253,6 +253,9 @@ storiesOf('Addons|Info/Options.styles', module)
   });
 
 storiesOf('Addons|Info/Options.TableComponent', module)
+  .addParameters({
+    component: TableComponent,
+  })
   .addDecorator(withInfo)
   .add('Use a custom component for the table', () => <BaseButton label="Button" />, {
     info: {
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
index 932df0c432e6..c6f24d0b8615 100644
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs.stories.js
@@ -42,6 +42,9 @@ let injectedItems = [];
 let injectedIsLoading = false;
 
 storiesOf('Addons|Knobs.withKnobs', module)
+  .addParameters({
+    component: withKnobs,
+  })
   .addDecorator(withKnobs)
   .add('tweaks static values', () => {
     const name = text('Name', 'Storyteller');
diff --git a/examples/official-storybook/stories/other-demo.stories.js b/examples/official-storybook/stories/other-demo.stories.js
index 3d4bea842eae..80b486a46400 100644
--- a/examples/official-storybook/stories/other-demo.stories.js
+++ b/examples/official-storybook/stories/other-demo.stories.js
@@ -6,11 +6,16 @@ import { linkTo } from '@storybook/addon-links';
 
 import { Button, Welcome } from '@storybook/react/demo';
 
-storiesOf('Other|Demo/Welcome', module).add('to Storybook', () => (
-  <Welcome showApp={linkTo('Button')} />
-));
+storiesOf('Other|Demo/Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Other|Demo/Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
diff --git a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
index 38b9820d043a..dd02c14b3c34 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
@@ -7,5 +7,8 @@ import Centered from '@storybook/addon-centered/preact';
 import Button from '../Button';
 
 storiesOf('Addons|Centered', module)
+  .addParameters({
+    component: Centered,
+  })
   .addDecorator(Centered)
   .add('Button', () => <Button>A button</Button>);
diff --git a/examples/preact-kitchen-sink/src/stories/index.stories.js b/examples/preact-kitchen-sink/src/stories/index.stories.js
index 4c64703c0e99..7f64391f913a 100644
--- a/examples/preact-kitchen-sink/src/stories/index.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/index.stories.js
@@ -9,9 +9,16 @@ import { linkTo } from '@storybook/addon-links';
 import Welcome from '../Welcome';
 import Button from '../Button';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => <Button onclick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => (
     <Button onclick={action('clicked')}>
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
index d350f4e3f09a..51fac4c214b1 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
@@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
 import Button from '../components/Button.svelte';
 
 storiesOf('Addon|Centered', module)
+  .addParameters({
+    component: Centered,
+  })
   .addDecorator(Centered)
   .add('rounded', () => ({
     Component: Button,
diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
index 7fb6567a583f..83a0ad0ccf39 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -4,6 +4,9 @@ import Centered from '@storybook/addon-centered/vue';
 import MyButton from './Button.vue';
 
 storiesOf('Addon|Centered', module)
+  .addParameters({
+    component: Centered,
+  })
   .addDecorator(Centered)
   .add('rounded', () => ({
     components: { MyButton },
diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js
index fa9448a5b0d7..a89f9ee6e3b6 100644
--- a/examples/vue-kitchen-sink/src/stories/index.js
+++ b/examples/vue-kitchen-sink/src/stories/index.js
@@ -4,13 +4,21 @@ import { linkTo } from '@storybook/addon-links';
 import Welcome from './Welcome.vue';
 import App from '../App.vue';
 
-storiesOf('Welcome', module).add('Welcome', () => ({
-  render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
-}));
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('Welcome', () => ({
+    render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
+  }));
 
-storiesOf('App', module).add('App', () => ({
-  render: h => h(App),
-}));
+storiesOf('App', module)
+  .addParameters({
+    component: App,
+  })
+  .add('App', () => ({
+    render: h => h(App),
+  }));
 
 storiesOf('Button', module)
   // Works if Vue.component is called in the config.js in .storybook
diff --git a/lib/codemod/README.md b/lib/codemod/README.md
index 1f69564413fb..f319e19ffe41 100644
--- a/lib/codemod/README.md
+++ b/lib/codemod/README.md
@@ -9,8 +9,8 @@ It will help you migrate breaking changes & deprecations.
 yarn add jscodeshift @storybook/codemod --dev
 ```
 
--   `@storybook/codemod` is our collection of codemod scripts.
--   `jscodeshift` is a tool we use to apply our codemods.
+- `@storybook/codemod` is our collection of codemod scripts.
+- `jscodeshift` is a tool we use to apply our codemods.
 
 After running the migration commands, you can remove them from your `package.json`, if you added them.
 
@@ -65,23 +65,18 @@ Replaces the Info addon's deprecated `addWithInfo` API with the standard `withIn
 Simple example:
 
 ```js
-storiesOf('Button').addWithInfo(
-  'simple usage',
-  'This is the basic usage of the button.',
-  () => (
-    <Button label="The Button" />
-  )
-)
+storiesOf('Button').addWithInfo('simple usage', 'This is the basic usage of the button.', () => (
+  <Button label="The Button" />
+));
 ```
 
 Becomes
 
 ```js
-storiesOf('Button').add('simple usage', withInfo(
-  'This is the basic usage of the button.'
-)(() => (
-  <Button label="The Button" />
-)))
+storiesOf('Button').add(
+  'simple usage',
+  withInfo('This is the basic usage of the button.')(() => <Button label="The Button" />)
+);
 ```
 
 With options example:
@@ -90,21 +85,50 @@ With options example:
 storiesOf('Button').addWithInfo(
   'simple usage (disable source)',
   'This is the basic usage of the button.',
-  () => (
-    <Button label="The Button" />
-  ),
+  () => <Button label="The Button" />,
   { source: false, inline: true }
-)
+);
 ```
 
 Becomes
 
 ```js
-storiesOf('Button').add('simple usage (disable source)', withInfo({
-  text: 'This is the basic usage of the button.',
-  source: false,
-  inline: true
-})(() => (
-  <Button label="The Button" />
-)))
+storiesOf('Button').add(
+  'simple usage (disable source)',
+  withInfo({
+    text: 'This is the basic usage of the button.',
+    source: false,
+    inline: true,
+  })(() => <Button label="The Button" />)
+);
 ```
+
+### add-component-parameters
+
+This tries to smartly adds "component" parameters to all your existing stories
+for use in SB Docs.
+
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/add-component-parameters.js . --ignore-pattern "node_modules|dist"
+```
+
+For example:
+
+```js
+input { Button } from './Button';
+storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+```
+
+Becomes:
+
+```js
+input { Button } from './Button';
+storiesOf('Button', module)
+  .addParameters({ component: Button })
+  .add('story', () => <Button label="The Button" />);
+```
+
+Heuristics:
+
+- The storiesOf "kind" name must be Button
+- Button must be imported in the file
diff --git a/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
new file mode 100644
index 000000000000..8ec32d74ebe2
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).add('basic', () => <Button label="The Button" />);
+
+storiesOf('Button').add('no module', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('with story parameters', () => <Button label="The Button" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module)
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module)
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('complex story', () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).add('with path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).add('with dot-path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module)
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label="The Button" />);
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
new file mode 100644
index 000000000000..c196d5e03a1c
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
@@ -0,0 +1,64 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('basic', () => <Button label="The Button" />);
+
+storiesOf('Button').addParameters({
+  component: Button
+}).add('no module', () => <Button label="The Button" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('with story parameters', () => <Button label="The Button" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('complex story', () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).addParameters({
+  component: Button
+}).add('with path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+}).add('with dot-path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+})
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label="The Button" />);
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).addParameters({
+  component: action
+}).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);
diff --git a/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js b/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
new file mode 100644
index 000000000000..6ceb09621624
--- /dev/null
+++ b/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
@@ -0,0 +1,8 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+defineTest(
+  __dirname,
+  'add-component-parameters',
+  null,
+  'add-component-parameters/add-component-parameters'
+);
diff --git a/lib/codemod/src/transforms/add-component-parameters.js b/lib/codemod/src/transforms/add-component-parameters.js
new file mode 100644
index 000000000000..6a26c7794fc3
--- /dev/null
+++ b/lib/codemod/src/transforms/add-component-parameters.js
@@ -0,0 +1,62 @@
+/**
+ * Adds a `component` parameter for each storiesOf(...) call.
+ *
+ * For example:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ *
+ * Becomes:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module)
+ *   .addParameters({ component: Button })
+ *   .add('story', () => <Button label="The Button" />);
+ *
+ * Heuristics:
+ * - The storiesOf "kind" name must be Button
+ * - Button must be imported in the file
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  //  Create a dictionary whose keys are all the named imports in the file.
+  //  For instance:
+  //
+  //  import foo from 'foo';
+  //  import { bar, baz } from 'zoo';
+  //
+  //  => { foo: true, bar: true, baz: true }
+  const importMap = {};
+  root.find(j.ImportDeclaration).forEach(imp =>
+    imp.node.specifiers.forEach(spec => {
+      importMap[spec.local.name] = true;
+    })
+  );
+
+  function getLeafName(string) {
+    const parts = string.split(/\/|\.|\|/);
+    return parts[parts.length - 1];
+  }
+
+  function addComponentParameter(call) {
+    const { node } = call;
+    const leafName = getLeafName(node.arguments[0].value);
+    return j.callExpression(j.memberExpression(node, j.identifier('addParameters')), [
+      j.objectExpression([j.property('init', j.identifier('component'), j.identifier(leafName))]),
+    ]);
+  }
+
+  const storiesOfCalls = root
+    .find(j.CallExpression)
+    .filter(call => call.node.callee.name === 'storiesOf')
+    .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+    .filter(call => {
+      const leafName = getLeafName(call.node.arguments[0].value);
+      return importMap[leafName];
+    })
+    .replaceWith(addComponentParameter);
+
+  return root.toSource();
+}
diff --git a/lib/core/src/client/preview/url.js b/lib/core/src/client/preview/url.js
index d0ecddb4deb8..47daf2130de5 100644
--- a/lib/core/src/client/preview/url.js
+++ b/lib/core/src/client/preview/url.js
@@ -39,5 +39,5 @@ export const initializePath = () => {
       setPath({ storyId, viewMode });
     }
   }
-  return { storyId };
+  return { storyId, viewMode };
 };
diff --git a/lib/ui/src/components/layout/layout.stories.js b/lib/ui/src/components/layout/layout.stories.js
index 9d9eab205cb3..b813208e58ab 100644
--- a/lib/ui/src/components/layout/layout.stories.js
+++ b/lib/ui/src/components/layout/layout.stories.js
@@ -137,6 +137,9 @@ const realProps = {
 };
 
 storiesOf('UI|Layout/Desktop', module)
+  .addParameters({
+    component: Desktop,
+  })
   .addDecorator(withKnobs)
   .addDecorator(storyFn => {
     const mocked = boolean('mock', true);
@@ -183,6 +186,9 @@ storiesOf('UI|Layout/Desktop', module)
   ));
 
 storiesOf('UI|Layout/Mobile', module)
+  .addParameters({
+    component: Mobile,
+  })
   .addDecorator(withKnobs)
   .addDecorator(storyFn => {
     const mocked = boolean('mock', true);
diff --git a/lib/ui/src/components/preview/preview.stories.js b/lib/ui/src/components/preview/preview.stories.js
index e6a2c84175c8..1258e4d91dfe 100644
--- a/lib/ui/src/components/preview/preview.stories.js
+++ b/lib/ui/src/components/preview/preview.stories.js
@@ -38,5 +38,8 @@ export const previewProps = {
 };
 
 storiesOf('UI|Preview/Preview', module)
+  .addParameters({
+    component: Preview,
+  })
   .add('no tabs', () => <Preview {...previewProps} getElements={() => []} />)
   .add('with tabs', () => <Preview {...previewProps} />);
diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.stories.js b/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
index b56bfb19ff33..0f5c2a6b3412 100644
--- a/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
@@ -3,6 +3,8 @@ import { storiesOf } from '@storybook/react';
 
 import SidebarSubheading from './SidebarSubheading';
 
-storiesOf('UI|Sidebar/SidebarSubheading', module).add('default', () => (
-  <SidebarSubheading>Subheading</SidebarSubheading>
-));
+storiesOf('UI|Sidebar/SidebarSubheading', module)
+  .addParameters({
+    component: SidebarSubheading,
+  })
+  .add('default', () => <SidebarSubheading>Subheading</SidebarSubheading>);
diff --git a/lib/ui/src/settings/about.stories.js b/lib/ui/src/settings/about.stories.js
index a2d70c73d108..ceaf3e55ca5b 100644
--- a/lib/ui/src/settings/about.stories.js
+++ b/lib/ui/src/settings/about.stories.js
@@ -10,6 +10,9 @@ const info = {
 
 const actions = createActions('onClose');
 storiesOf('UI|Settings/AboutScreen', module)
+  .addParameters({
+    component: AboutScreen,
+  })
   .addDecorator(s => (
     <div
       style={{