diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js
new file mode 100644
index 00000000000..0129759479c
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/App.stories.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+// eslint-disable-next-line import/extensions,import/no-unresolved
+import App from 'App';
+
+storiesOf('App', module).add('full app', () => <App />);
diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
new file mode 100644
index 00000000000..701812e1e03
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import LifecycleLogger from '../components/LifecycleLogger';
+
+storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot
new file mode 100644
index 00000000000..e80329a49dc
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/App.stories.storyshot
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots App full app 1`] = `
+<div
+  class="App"
+>
+  <div
+    class="App-header"
+  >
+    <img
+      alt="logo"
+      class="App-logo"
+      src="file-stub"
+    />
+    <h2>
+      Welcome to React
+    </h2>
+  </div>
+  <p
+    class="App-intro"
+  >
+    To get started, edit 
+    <code>
+      src/App.js
+    </code>
+     and save to reload.
+  </p>
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot
new file mode 100644
index 00000000000..b53b1b40877
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/Lifecycle.stories.storyshot
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Lifecycle logging 1`] = `
+<div>
+  Lifecycle methods are logged to the console
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
index 2706c849033..7aca90b808d 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -1,33 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots App full app 1`] = `
-<div
-  class="App"
->
-  <div
-    class="App-header"
-  >
-    <img
-      alt="logo"
-      class="App-logo"
-      src="file-stub"
-    />
-    <h2>
-      Welcome to React
-    </h2>
-  </div>
-  <p
-    class="App-intro"
-  >
-    To get started, edit 
-    <code>
-      src/App.js
-    </code>
-     and save to reload.
-  </p>
-</div>
-`;
-
 exports[`Storyshots Button addons composition 1`] = `
 .emotion-4 {
   display: -webkit-box;
@@ -168,13 +140,6 @@ exports[`Storyshots Button addons composition 1`] = `
                     &gt;
                   </span>
                 </div>
-                <div
-                  style="padding-left:33px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  />
-                </div>
                 <div
                   style="padding-left:33px;padding-right:3px"
                 >
@@ -445,13 +410,6 @@ exports[`Storyshots Button with new info 1`] = `
                     &gt;
                   </span>
                 </div>
-                <div
-                  style="padding-left:33px;padding-right:3px"
-                >
-                  <span
-                    style="color:#444"
-                  />
-                </div>
                 <div
                   style="padding-left:33px;padding-right:3px"
                 >
@@ -768,26 +726,3 @@ exports[`Storyshots Button with text 1`] = `
   Hello Button
 </button>
 `;
-
-exports[`Storyshots Lifecycle logging 1`] = `
-<div>
-  Lifecycle methods are logged to the console
-</div>
-`;
-
-exports[`Storyshots Some really long story kind description with text 1`] = `
-<div
-  style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
->
-  <div
-    style="margin:auto;max-height:100%"
-  >
-    <button
-      style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
-      type="button"
-    >
-      Hello Button
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot
new file mode 100644
index 00000000000..08c35849a01
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/long-description.stories.storyshot
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Some really long story kind description with text 1`] = `
+<div
+  style="position:fixed;top:0;left:0;bottom:0;right:0;display:flex;align-items:center;overflow:auto"
+>
+  <div
+    style="margin:auto;max-height:100%"
+  >
+    <button
+      style="border:1px solid #eee;border-radius:3px;background-color:#FFFFFF;cursor:pointer;font-size:15px;padding:3px 10px;margin:10px"
+      type="button"
+    >
+      Hello Button
+    </button>
+  </div>
+</div>
+`;
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index 361d6aca77f..550b203013c 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,17 +1,11 @@
 import React from 'react';
-
 import { storiesOf } from '@storybook/react';
-import { setOptions } from '@storybook/addon-options';
 import { action } from '@storybook/addon-actions';
 import { withNotes } from '@storybook/addon-notes';
-import centered from '@storybook/addon-centered';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
 
-// eslint-disable-next-line import/extensions,import/no-unresolved
-import App from 'App';
 import Container from './Container';
-import LifecycleLogger from '../components/LifecycleLogger';
 
 const InfoButton = () => (
   <span
@@ -33,57 +27,48 @@ const InfoButton = () => (
 
 storiesOf('Button', module)
   .addDecorator(withNotes)
-  .add('with text', () => (
-    <Button onClick={action('clicked')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-      Hello Button
-    </Button>
-  ))
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      {setOptions({ selectedAddonPanel: 'storybook/actions/actions-panel' })}
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ))
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>, {
+    options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
+  })
   .add(
-    'with notes',
+    'with some emoji',
     () => (
-      <Button>
-        {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
-        Check my notes in the notes panel
+      <Button onClick={action('clicked')}>
+        <span role="img" aria-label="so cool">
+          😀 😎 👍 💯
+        </span>
       </Button>
     ),
-    { notes: 'A very simple button' }
+    {
+      options: { selectedAddonPanel: 'storybook/actions/actions-panel' },
+    }
   )
+  .add('with notes', () => <Button>Check my notes in the notes panel</Button>, {
+    notes: 'A very simple button',
+    options: { selectedAddonPanel: 'storybook/notes/panel' },
+  })
   .add(
     'with new info',
     withInfo(
       'Use the [info addon](https://github.com/storybooks/storybook/tree/master/addons/info) with its new painless API.'
     )(context => (
       <Container>
-        {setOptions({ selectedAddonPanel: 'storybook/info/info-panel' })}
         click the <InfoButton /> label in top right for info about "{context.story}"
       </Container>
-    ))
+    )),
+    {
+      options: { selectedAddonPanel: 'storybook/info/info-panel' },
+    }
   )
   .add(
     'addons composition',
-    withInfo('see Notes panel for composition info')(
-      withNotes('Composition: Info(Notes())')(context => (
-        <div>
-          {setOptions({ selectedAddonPanel: 'storybook/notes/panel' })}
-          click the <InfoButton /> label in top right for info about "{context.story}"
-        </div>
-      ))
-    )
+    withInfo('see Notes panel for composition info')(context => (
+      <div>
+        click the <InfoButton /> label in top right for info about "{context.story}"
+      </div>
+    )),
+    {
+      notes: 'Composition: Info(Notes())',
+      options: { selectedAddonPanel: 'storybook/notes/panel' },
+    }
   );
-
-storiesOf('App', module).add('full app', () => <App />);
-
-storiesOf('Some really long story kind description', module)
-  .addDecorator(centered)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
-
-storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
new file mode 100644
index 00000000000..fb111e7c954
--- /dev/null
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import centered from '@storybook/addon-centered';
+import { Button } from '@storybook/react/demo';
+
+storiesOf('Some really long story kind description', module)
+  .addDecorator(centered)
+  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);