From 78e0050af167e250728b69506a5f8b415283f62f Mon Sep 17 00:00:00 2001
From: Filipp Riabchun <filipp.riabchun@jetbrains.com>
Date: Mon, 18 Nov 2019 01:15:42 +0100
Subject: [PATCH 1/5] storiesof-to-csf: avoid id changes after migration

---
 lib/codemod/src/lib/utils.js                  | 10 ++-----
 lib/codemod/src/lib/utils.test.js             | 15 ++++------
 .../mdx-to-csf/basic.output.snapshot          | 19 +++++++-----
 .../mdx-to-csf/component-id.output.snapshot   |  6 +++-
 .../mdx-to-csf/decorators.output.snapshot     |  4 +--
 .../exclude-stories.output.snapshot           | 17 +++++++----
 .../mdx-to-csf/parameters.output.snapshot     |  4 +--
 .../mdx-to-csf/plaintext.output.snapshot      |  6 +++-
 .../mdx-to-csf/story-function.output.snapshot |  4 +--
 .../story-parameters.output.snapshot          | 10 ++++---
 .../mdx-to-csf/story-refs.output.snapshot     |  4 +--
 .../storiesof-to-csf/basic.output.snapshot    | 18 +++++------
 .../storiesof-to-csf/collision.input.js       | 12 ++++----
 .../collision.output.snapshot                 | 30 +++++++++----------
 .../storiesof-to-csf/const.output.snapshot    |  4 +--
 .../decorators.output.snapshot                |  4 +--
 .../storiesof-to-csf/default.output.snapshot  |  4 +--
 .../storiesof-to-csf/exports.output.snapshot  |  4 +--
 .../storiesof-to-csf/multi.output.snapshot    | 16 +++++-----
 .../parameters.output.snapshot                |  4 +--
 .../story-decorators.output.snapshot          |  8 ++---
 .../story-parameters.output.snapshot          |  8 ++---
 .../src/transforms/storiesof-to-csf.js        |  7 ++---
 23 files changed, 112 insertions(+), 106 deletions(-)

diff --git a/lib/codemod/src/lib/utils.js b/lib/codemod/src/lib/utils.js
index 4d782569a215..c16dd0592522 100644
--- a/lib/codemod/src/lib/utils.js
+++ b/lib/codemod/src/lib/utils.js
@@ -1,14 +1,8 @@
 import camelCase from 'lodash/camelCase';
-
-const RESERVED = /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
-
-export const isReserved = name => RESERVED.exec(name);
+import upperFirst from 'lodash/upperFirst';
 
 export const sanitizeName = name => {
-  let key = camelCase(name);
-  if (isReserved(key)) {
-    key = `${key}Story`;
-  }
+  let key = upperFirst(camelCase(name));
   // prepend _ if name starts with a digit
   if (/^\d/.test(key)) {
     key = `_${key}`;
diff --git a/lib/codemod/src/lib/utils.test.js b/lib/codemod/src/lib/utils.test.js
index efeffdfb8806..588ed7f3ad45 100644
--- a/lib/codemod/src/lib/utils.test.js
+++ b/lib/codemod/src/lib/utils.test.js
@@ -1,14 +1,9 @@
 import { sanitizeName } from './utils';
 
 it('should sanitize names', () => {
-  const testCases = [
-    ['basic', 'basic'],
-    ['with space', 'withSpace'],
-    ['default', 'defaultStory'],
-    ['w/punctuation', 'wPunctuation'],
-  ];
-  testCases.forEach(testCase => {
-    const [input, out] = testCase;
-    expect(sanitizeName(input)).toBe(out);
-  });
+  expect(sanitizeName('basic')).toMatchInlineSnapshot(`"Basic"`);
+  expect(sanitizeName('with space')).toMatchInlineSnapshot(`"WithSpace"`);
+  expect(sanitizeName('default')).toMatchInlineSnapshot(`"Default"`);
+  expect(sanitizeName('w/punctuation')).toMatchInlineSnapshot(`"WPunctuation"`);
+  expect(sanitizeName('5')).toMatchInlineSnapshot(`"_5"`);
 });
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot
index 62ab723f1bda..8f502e342d30 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.snapshot
@@ -9,27 +9,32 @@ export default {
   title: 'Button',
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;
-export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const Story1 = () => <Button label=\\"Story 1\\" />;
 
-secondStory.story = {
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
   name: 'second story',
 };
 
-export const complexStory = () => (
+export const ComplexStory = () => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-complexStory.story = {
+ComplexStory.story = {
   name: 'complex story',
 };
 
-export const wPunctuation = () => <Button label=\\"w/punctuation\\" />;
+export const WPunctuation = () => <Button label=\\"w/punctuation\\" />;
 
-wPunctuation.story = {
+WPunctuation.story = {
   name: 'w/punctuation',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot
index 980708af05db..98125c844db5 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot
@@ -9,5 +9,9 @@ export default {
   id: 'button-id',
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;"
+export const Story1 = () => <Button label=\\"Story 1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot
index 7a587637c648..1504bb144894 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot
@@ -9,9 +9,9 @@ export default {
   decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
 };
 
-export const withDecorator = () => <Button label=\\"The Button\\" />;
+export const WithDecorator = () => <Button label=\\"The Button\\" />;
 
-withDecorator.story = {
+WithDecorator.story = {
   name: 'with decorator',
   decorators: [withKnobs],
 };"
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot
index 59d3673f8dda..b5e3f960cb74 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot
@@ -11,24 +11,29 @@ export const rowData = {
 
 export default {
   title: 'Button',
-  includeStories: ['story1', 'secondStory', 'complexStory'],
+  includeStories: ['Story1', 'SecondStory', 'ComplexStory'],
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;
-export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const Story1 = () => <Button label=\\"Story 1\\" />;
 
-secondStory.story = {
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
   name: 'second story',
 };
 
-export const complexStory = () => (
+export const ComplexStory = () => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-complexStory.story = {
+ComplexStory.story = {
   name: 'complex story',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
index 18f2744d6881..95b9c8814b2b 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot
@@ -15,9 +15,9 @@ export default {
   },
 };
 
-export const withKindParameters = () => <Button label=\\"The Button\\" />;
+export const WithKindParameters = () => <Button label=\\"The Button\\" />;
 
-withKindParameters.story = {
+WithKindParameters.story = {
   name: 'with kind parameters',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot
index c9579e33dd74..58ad1ca96af8 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot
@@ -3,5 +3,9 @@
 exports[`mdx-to-csf transforms correctly using "plaintext.input.js" data 1`] = `
 "import React from 'react';
 export default {};
-export const plaintext = () => 'Plain text';"
+export const Plaintext = () => 'Plain text';
+
+Plaintext.story = {
+  name: 'plaintext',
+};"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot
index 4c8b093344fa..41997d5facc8 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot
@@ -4,14 +4,14 @@ exports[`mdx-to-csf transforms correctly using "story-function.input.js" data 1`
 "import React from 'react';
 export default {};
 
-export const functionStory = () => {
+export const Function = () => {
   const btn = document.createElement('button');
   btn.innerHTML = 'Hello Button';
   btn.addEventListener('click', action('Click'));
   return btn;
 };
 
-functionStory.story = {
+Function.story = {
   name: 'function',
   height: '100px',
 };"
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.snapshot
index ceee41775030..b4e1f5c2e191 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.snapshot
@@ -9,9 +9,9 @@ export default {
   title: 'Button',
 };
 
-export const withStoryParameters = () => <Button label=\\"The Button\\" />;
+export const WithStoryParameters = () => <Button label=\\"The Button\\" />;
 
-withStoryParameters.story = {
+WithStoryParameters.story = {
   name: 'with story parameters',
 
   parameters: {
@@ -20,9 +20,11 @@ withStoryParameters.story = {
   },
 };
 
-export const foo = () => <Button label=\\"Foo\\" />;
+export const Foo = () => <Button label=\\"Foo\\" />;
+
+Foo.story = {
+  name: 'foo',
 
-foo.story = {
   parameters: {
     bar: 1,
   },
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
index 7e2f9915ceb2..f138089ac6c8 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot
@@ -26,9 +26,9 @@ export default {
   },
 };
 
-export const soloStory = () => <Button onClick={action('clicked')}>solo</Button>;
+export const SoloStory = () => <Button onClick={action('clicked')}>solo</Button>;
 
-soloStory.story = {
+SoloStory.story = {
   name: 'solo story',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot
index 3e04e63a0db8..6b26bc238044 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.snapshot
@@ -12,34 +12,34 @@ export default {
   title: 'Button',
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;
+export const Story1 = () => <Button label=\\"Story 1\\" />;
 
-story1.story = {
+Story1.story = {
   name: 'story1',
 };
 
-export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
 
-secondStory.story = {
+SecondStory.story = {
   name: 'second story',
 };
 
-export const complexStory = () => (
+export const ComplexStory = () => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-complexStory.story = {
+ComplexStory.story = {
   name: 'complex story',
 };
 
-export const wPunctuation = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const WPunctuation = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
 
-wPunctuation.story = {
+WPunctuation.story = {
   name: 'w/punctuation',
 };
 
-export const startCase = () => <Button label=\\"Story 2\\" onClick={action('click')} />;"
+export const StartCase = () => <Button label=\\"Story 2\\" onClick={action('click')} />;"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.input.js b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.input.js
index 232cce44a42a..fc9108a22d29 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.input.js
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.input.js
@@ -1,11 +1,11 @@
-export const foo = 1;
-const bar = 1;
-const barStory = 1;
-const baz = 1;
-const bazStory1 = 1;
+export const Foo = 1;
+const Bar = 1;
+const _Bar = 1;
+const Baz = 1;
+const __Baz = 1;
 
 storiesOf('foo', module)
   .add('foo', () => <button />)
   .add('bar', () => <button />)
-  .add('bazStory', () => <button />)
+  .add('_baz', () => <button />)
   .add('baz', () => <button />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.snapshot
index 59e217c23eb7..1cde3dcf27ff 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.snapshot
@@ -1,38 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`storiesof-to-csf transforms correctly using "collision.input.js" data 1`] = `
-"export const foo = 1;
-const bar = 1;
-const barStory = 1;
-const baz = 1;
-const bazStory1 = 1;
+"export const Foo = 1;
+const Bar = 1;
+const _Bar = 1;
+const Baz = 1;
+const __Baz = 1;
 
 export default {
   title: 'foo',
-  excludeStories: ['foo'],
+  excludeStories: ['Foo'],
 };
 
-export const fooStory = () => <button />;
+export const _Foo = () => <button />;
 
-fooStory.story = {
+_Foo.story = {
   name: 'foo',
 };
 
-export const barStory1 = () => <button />;
+export const __Bar = () => <button />;
 
-barStory1.story = {
+__Bar.story = {
   name: 'bar',
 };
 
-export const bazStory = () => <button />;
+export const _Baz = () => <button />;
 
-bazStory.story = {
-  name: 'bazStory',
+_Baz.story = {
+  name: '_baz',
 };
 
-export const bazStory2 = () => <button />;
+export const ___Baz = () => <button />;
 
-bazStory2.story = {
+___Baz.story = {
   name: 'baz',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.snapshot
index 217201f7683b..3afdb3c66d2f 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.snapshot
@@ -5,9 +5,9 @@ exports[`storiesof-to-csf transforms correctly using "const.input.js" data 1`] =
   title: 'bar',
 };
 
-export const constStory = () => <button />;
+export const Const = () => <button />;
 
-constStory.story = {
+Const.story = {
   name: 'const',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot
index 86219a07d64f..a9a663a780f0 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot
@@ -10,9 +10,9 @@ export default {
   decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
 };
 
-export const withDecorator = () => <Button label=\\"The Button\\" />;
+export const WithDecorator = () => <Button label=\\"The Button\\" />;
 
-withDecorator.story = {
+WithDecorator.story = {
   name: 'with decorator',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.snapshot
index b20eea88d458..56f1d0ba1217 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.snapshot
@@ -9,9 +9,9 @@ export default {
   title: 'Button',
 };
 
-export const defaultStory = () => <Button label=\\"Story 1\\" />;
+export const Default = () => <Button label=\\"Story 1\\" />;
 
-defaultStory.story = {
+Default.story = {
   name: 'default',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.snapshot
index c88bde4ae613..eb0839d895ba 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.snapshot
@@ -8,9 +8,9 @@ export default {
   excludeStories: ['foo'],
 };
 
-export const baz = () => <button />;
+export const Baz = () => <button />;
 
-baz.story = {
+Baz.story = {
   name: 'baz',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.snapshot
index 2c2fbe567479..670e9a1784cf 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.snapshot
@@ -9,15 +9,15 @@ export default {
   title: 'Button1',
 };
 
-export const story1 = () => <Button label=\\"Button1.1\\" />;
+export const Story1 = () => <Button label=\\"Button1.1\\" />;
 
-story1.story = {
+Story1.story = {
   name: 'story1',
 };
 
-export const story2 = () => <Button label=\\"Button1.2\\" />;
+export const Story2 = () => <Button label=\\"Button1.2\\" />;
 
-story2.story = {
+Story2.story = {
   name: 'story2',
 };
 
@@ -25,15 +25,15 @@ export default {
   title: 'Button2',
 };
 
-export const story1Story = () => <Button label=\\"Button2.1\\" />;
+export const _Story1 = () => <Button label=\\"Button2.1\\" />;
 
-story1Story.story = {
+_Story1.story = {
   name: 'story1',
 };
 
-export const story2Story = () => <Button label=\\"Button2.2\\" />;
+export const _Story2 = () => <Button label=\\"Button2.2\\" />;
 
-story2Story.story = {
+_Story2.story = {
   name: 'story2',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.snapshot
index e2b913931d31..8ee0083b9d1f 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.snapshot
@@ -15,9 +15,9 @@ export default {
   },
 };
 
-export const withKindParameters = () => <Button label=\\"The Button\\" />;
+export const WithKindParameters = () => <Button label=\\"The Button\\" />;
 
-withKindParameters.story = {
+WithKindParameters.story = {
   name: 'with kind parameters',
 };"
 `;
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
index e088c87fc1b5..9a8a79208ebf 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot
@@ -8,9 +8,9 @@ export default {
   title: 'Some.Button',
 };
 
-export const withStoryParamsAndDecorators = () => <Button label=\\"The Button\\" />;
+export const WithStoryParamsAndDecorators = () => <Button label=\\"The Button\\" />;
 
-withStoryParamsAndDecorators.story = {
+WithStoryParamsAndDecorators.story = {
   name: 'with story params and decorators',
 
   parameters: {
@@ -20,9 +20,9 @@ withStoryParamsAndDecorators.story = {
   decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
 };
 
-export const withStoryDecorators = () => <Button label=\\"The Button\\" />;
+export const WithStoryDecorators = () => <Button label=\\"The Button\\" />;
 
-withStoryDecorators.story = {
+WithStoryDecorators.story = {
   name: 'with story decorators',
   decorators: [withKnobs],
 };"
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.snapshot b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.snapshot
index d45863cd6f31..43d24f405ce0 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.snapshot
+++ b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.snapshot
@@ -9,9 +9,9 @@ export default {
   title: 'Button',
 };
 
-export const withStoryParameters = () => <Button label=\\"The Button\\" />;
+export const WithStoryParameters = () => <Button label=\\"The Button\\" />;
 
-withStoryParameters.story = {
+WithStoryParameters.story = {
   name: 'with story parameters',
 
   parameters: {
@@ -20,9 +20,9 @@ withStoryParameters.story = {
   },
 };
 
-export const foo = () => <Button label=\\"Foo\\" />;
+export const Foo = () => <Button label=\\"Foo\\" />;
 
-foo.story = {
+Foo.story = {
   name: 'foo',
 
   parameters: {
diff --git a/lib/codemod/src/transforms/storiesof-to-csf.js b/lib/codemod/src/transforms/storiesof-to-csf.js
index fca733b0a405..d27842a1a855 100644
--- a/lib/codemod/src/transforms/storiesof-to-csf.js
+++ b/lib/codemod/src/transforms/storiesof-to-csf.js
@@ -132,12 +132,9 @@ export default function transformer(file, api, options) {
     root.find(j.Identifier).forEach(({ value }) => identifiers.add(value.name));
     adds.forEach(add => {
       let name = add.node.arguments[0].value;
-      const sanitized = sanitizeName(name);
-      let key = sanitized;
-      let counter = 0;
+      let key = sanitizeName(name);
       while (identifiers.has(key)) {
-        key = `${sanitized}Story${counter || ''}`;
-        counter += 1;
+        key = `_${key}`;
       }
       identifiers.add(key);
       if (storyNameFromExport(key) === name) {

From 66a79bc20598644b38bef81f86799e926e56003d Mon Sep 17 00:00:00 2001
From: Filipp Riabchun <filipp.riabchun@jetbrains.com>
Date: Mon, 18 Nov 2019 20:24:39 +0100
Subject: [PATCH 2/5] Fix typo

---
 lib/codemod/src/transforms/csf-to-mdx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/codemod/src/transforms/csf-to-mdx.js b/lib/codemod/src/transforms/csf-to-mdx.js
index 88825fe15eef..fffa371bfc7a 100644
--- a/lib/codemod/src/transforms/csf-to-mdx.js
+++ b/lib/codemod/src/transforms/csf-to-mdx.js
@@ -37,7 +37,7 @@ function parseIncludeExclude(prop) {
 }
 
 /**
- * Convert a compponent's module story file into an MDX file
+ * Convert a component's module story file into an MDX file
  *
  * For example:
  *

From 24ec9d3674fe8a2b151144803c1443c6d0a389ab Mon Sep 17 00:00:00 2001
From: Filipp Riabchun <filipp.riabchun@jetbrains.com>
Date: Tue, 19 Nov 2019 21:08:32 +0100
Subject: [PATCH 3/5] Migrate examples and templates to PascalCase exports

---
 .../src/stories/addon-actions.stories.ts      |  8 +--
 .../src/stories/addon-jest.stories.ts         |  4 +-
 .../src/stories/addon-knobs.stories.ts        | 12 ++--
 .../src/stories/addon-links.stories.ts        |  4 +-
 .../src/stories/addon-notes.stories.ts        |  8 +--
 .../src/stories/app.component.stories.ts      |  4 +-
 .../component-with-di/di.component.stories.ts |  8 +--
 .../styled.component.stories.ts               |  4 +-
 .../angular-cli/src/stories/core.stories.ts   |  4 +-
 .../src/stories/custom-pipes.stories.ts       |  8 +--
 .../src/stories/custom-providers.stories.ts   |  8 +--
 .../src/stories/custom-styles.stories.ts      |  8 +--
 .../custom-cva-component.stories.ts           |  4 +-
 .../stories/doc-button/doc-button.stories.ts  |  2 +-
 .../inheritance/inheritance.stories.ts        |  8 +--
 .../src/stories/metadata-combined.stories.ts  |  8 +--
 .../stories/metadata-individual.stories.ts    |  8 +--
 .../src/stories/metadata-shared.stories.ts    |  8 +--
 .../src/stories/on-push/on-push.stories.ts    |  4 +-
 .../src/stories/App.stories.js                |  4 +-
 .../src/stories/Lifecycle.stories.js          |  2 +-
 .../src/stories/button.stories.js             | 16 ++---
 .../src/stories/cra-dynamic-import.stories.js |  4 +-
 .../src/stories/force-rerender.stories.js     |  6 +-
 .../src/stories/long-description.stories.js   |  4 +-
 .../src/stories/welcome.stories.js            |  4 +-
 .../cra-react15/src/stories/button.stories.js |  8 +--
 .../src/components/Button.stories.tsx         |  4 +-
 .../src/stories/0-Welcome.stories.tsx         |  4 +-
 .../src/stories/1-Button.stories.tsx          |  4 +-
 .../ember-cli/stories/addon-a11y.stories.js   |  4 +-
 .../stories/addon-actions.stories.js          |  2 +-
 .../stories/addon-backgrounds.stories.js      |  8 +--
 .../stories/addon-centered.stories.js         |  2 +-
 .../ember-cli/stories/addon-knobs.stories.js  |  4 +-
 .../ember-cli/stories/addon-links.stories.js  |  4 +-
 .../ember-cli/stories/addon-notes.stories.js  |  8 +--
 examples/ember-cli/stories/index.stories.js   |  2 +-
 .../stories/welcome-banner.stories.js         |  2 +-
 .../stories/addon-a11y.stories.js             |  8 +--
 .../stories/addon-actions.stories.js          | 32 +++++-----
 .../stories/addon-backgrounds.stories.js      |  8 +--
 .../stories/addon-centered.stories.js         |  4 +-
 .../stories/addon-jest.stories.js             |  4 +-
 .../stories/addon-knobs.stories.js            | 12 ++--
 .../stories/addon-notes.stories.js            |  4 +-
 .../stories/button.stories.js                 |  8 +--
 .../marko-cli/src/stories/hello.stories.js    |  4 +-
 .../src/stories/addon-actions.stories.js      | 16 ++---
 .../src/stories/addon-backgrounds.stories.js  |  8 +--
 .../src/stories/addon-knobs.stories.js        |  8 +--
 .../src/stories/addon-links.stories.js        |  4 +-
 .../src/stories/addon-notes.stories.js        |  8 +--
 .../src/stories/button.stories.js             |  8 +--
 .../src/stories/welcome.stories.js            |  4 +-
 .../stories/addon-a11y/base-button.stories.js |  4 +-
 .../stories/addon-a11y/button.stories.js      |  4 +-
 .../stories/addon-a11y/form.stories.js        | 12 ++--
 .../stories/addon-a11y/image.stories.js       | 12 ++--
 .../stories/addon-a11y/typography.stories.js  | 16 ++---
 .../stories/addon-actions.stories.js          | 58 +++++++++---------
 .../stories/addon-backgrounds.stories.js      | 24 ++++----
 .../stories/addon-centered.stories.js         |  8 +--
 .../stories/addon-contexts.stories.js         |  4 +-
 .../stories/addon-cssresources.stories.js     |  8 +--
 .../stories/addon-design-assets.stories.js    | 24 ++++----
 .../stories/addon-docs/addon-docs.stories.js  | 28 ++++-----
 .../stories/addon-docs/mdx.stories.js         |  2 +-
 .../stories/addon-graphql.stories.js          |  4 +-
 .../stories/addon-info/decorators.stories.js  |  4 +-
 .../stories/addon-info/forward-ref.stories.js |  8 +--
 .../stories/addon-info/jsx.stories.js         |  4 +-
 .../stories/addon-info/markdown.stories.js    | 12 ++--
 .../stories/addon-info/options.stories.js     | 60 +++++++++----------
 .../stories/addon-info/parameters.stories.js  | 20 +++----
 .../addon-info/react-docgen.stories.js        | 16 ++---
 .../addon-info/story-source.stories.js        | 20 +++----
 .../stories/addon-jest.stories.js             |  4 +-
 .../with-knobs-decorators.stories.js          |  4 +-
 .../addon-knobs/with-knobs-options.stories.js |  4 +-
 .../stories/addon-knobs/with-knobs.stories.js | 38 ++++++------
 .../stories/addon-links/href.stories.js       |  4 +-
 .../stories/addon-notes.stories.js            | 20 +++----
 .../stories/addon-options.stories.js          |  8 +--
 .../stories/addon-queryparams.stories.js      |  8 +--
 .../addon-viewport/custom-default.stories.js  |  4 +-
 .../stories/addon-viewport/default.stories.js |  4 +-
 .../stories/core/decorators.stories.js        |  8 +--
 .../stories/core/errors.stories.js            |  8 +--
 .../stories/core/events.stories.js            |  4 +-
 .../stories/core/parameters.stories.js        |  4 +-
 .../stories/core/scroll.stories.js            | 16 ++---
 .../stories/demo/button.stories.js            | 12 ++--
 .../stories/demo/csf-embedding.test.js        |  2 +-
 .../stories/demo/welcome.stories.js           |  4 +-
 .../deprecated/addon-actions.stories.js       |  4 +-
 .../stories/deprecated/addon-info.stories.js  |  4 +-
 .../stories/hooks.stories.js                  |  4 +-
 .../src/stories/addon-actions.stories.js      |  8 +--
 .../src/stories/addon-backgrounds.stories.js  |  4 +-
 .../src/stories/addon-links.stories.js        |  4 +-
 .../src/stories/addon-notes.stories.js        |  8 +--
 .../src/stories/components/app.stories.js     |  4 +-
 .../src/stories/components/button.stories.js  |  4 +-
 .../polymer-cli/src/stories/core.stories.js   |  4 +-
 .../src/stories/custom-decorators.stories.js  |  4 +-
 .../src/stories/addon-actions.stories.js      | 16 ++---
 .../src/stories/addon-backgrounds.stories.js  |  8 +--
 .../src/stories/addon-contexts.stories.js     |  4 +-
 .../src/stories/addon-knobs.stories.js        |  4 +-
 .../src/stories/addon-links.stories.js        |  4 +-
 .../src/stories/addon-notes.stories.js        |  8 +--
 .../src/stories/button.stories.js             |  8 +--
 .../src/stories/welcome.stories.js            |  4 +-
 .../src/stories/addon-a11y.stories.js         | 12 ++--
 .../src/stories/addon-actions.stories.js      |  8 +--
 .../src/stories/addon-centered.stories.js     |  8 +--
 .../src/stories/addon-knobs.stories.js        |  8 +--
 .../src/stories/addon-notes.stories.js        | 12 ++--
 .../src/stories/index.stories.js              |  4 +-
 .../src/stories/addon-actions.stories.js      |  8 +--
 .../src/stories/addon-backgrounds.stories.js  |  8 +--
 .../src/stories/addon-knobs.stories.js        |  8 +--
 .../src/stories/addon-links.stories.js        |  4 +-
 .../src/stories/addon-notes.stories.js        |  8 +--
 .../src/stories/core.stories.js               |  4 +-
 .../src/stories/nested-tags.stories.js        |  4 +-
 .../src/stories/story-code.stories.js         | 32 +++++-----
 .../src/stories/addon-actions.stories.js      |  8 +--
 .../src/stories/addon-backgrounds.stories.js  |  4 +-
 .../src/stories/addon-centered.stories.js     |  6 +-
 .../src/stories/addon-links.stories.js        |  4 +-
 .../src/stories/addon-notes.stories.js        |  8 +--
 .../src/stories/button.stories.js             |  4 +-
 .../src/stories/addon-actions.stories.js      | 16 ++---
 .../src/stories/addon-backgrounds.stories.js  |  8 +--
 .../src/stories/addon-centered.stories.js     |  2 +-
 .../src/stories/addon-contexts.stories.js     |  4 +-
 .../src/stories/addon-knobs.stories.js        |  8 +--
 .../src/stories/addon-links.stories.js        |  4 +-
 .../src/stories/addon-notes.stories.js        |  8 +--
 .../src/stories/components/button.stories.js  |  4 +-
 .../stories/components/info-button.stories.js |  2 +-
 .../src/stories/core-errors.stories.js        |  6 +-
 .../src/stories/core-template.stories.js      |  4 +-
 .../src/stories/core.stories.js               |  4 +-
 .../src/stories/custom-decorators.stories.js  |  6 +-
 .../src/stories/custom-rendering.stories.js   | 28 ++++-----
 .../stories/addon-a11y.stories.js             |  8 +--
 .../stories/addon-actions.stories.js          | 32 +++++-----
 .../stories/addon-backgrounds.stories.js      |  8 +--
 .../stories/addon-knobs.stories.js            |  8 +--
 .../src/stories/0-Welcome.stories.ts          |  4 +-
 .../src/stories/1-Button.stories.ts           | 22 +++----
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  4 +-
 .../template-csf/stories/index.stories.js     |  4 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  4 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  4 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  4 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  2 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  4 +-
 .../src/stories/0-Welcome.stories.tsx         |  4 +-
 .../src/stories/1-Button.stories.tsx          |  4 +-
 .../src/stories/0-Welcome.stories.js          |  4 +-
 .../src/stories/1-Button.stories.js           |  4 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  6 +-
 .../src/stories/0-Welcome.stories.js          |  4 +-
 .../src/stories/1-Button.stories.js           |  6 +-
 .../template-csf/stories/index.stories.js     |  4 +-
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  6 +-
 .../template/stories/index.stories.js         |  8 +--
 .../template-csf/stories/0-Welcome.stories.js |  4 +-
 .../template-csf/stories/1-Button.stories.js  |  6 +-
 181 files changed, 720 insertions(+), 720 deletions(-)

diff --git a/examples/angular-cli/src/stories/addon-actions.stories.ts b/examples/angular-cli/src/stories/addon-actions.stories.ts
index 40d245c49a21..7d9b6ad77774 100644
--- a/examples/angular-cli/src/stories/addon-actions.stories.ts
+++ b/examples/angular-cli/src/stories/addon-actions.stories.ts
@@ -5,7 +5,7 @@ export default {
   title: 'Addon/Actions',
 };
 
-export const actionOnly = () => ({
+export const ActionOnly = () => ({
   component: Button,
   props: {
     text: 'Action only',
@@ -13,11 +13,11 @@ export const actionOnly = () => ({
   },
 });
 
-actionOnly.story = {
+ActionOnly.story = {
   name: 'Action only',
 };
 
-export const actionAndMethod = () => ({
+export const ActionAndMethod = () => ({
   component: Button,
   props: {
     text: 'Action and Method',
@@ -29,6 +29,6 @@ export const actionAndMethod = () => ({
   },
 });
 
-actionAndMethod.story = {
+ActionAndMethod.story = {
   name: 'Action and method',
 };
diff --git a/examples/angular-cli/src/stories/addon-jest.stories.ts b/examples/angular-cli/src/stories/addon-jest.stories.ts
index c0f821ddc4cb..b5ca229ef1b7 100644
--- a/examples/angular-cli/src/stories/addon-jest.stories.ts
+++ b/examples/angular-cli/src/stories/addon-jest.stories.ts
@@ -13,12 +13,12 @@ export default {
   ],
 };
 
-export const appComponentWithJestTests = () => ({
+export const AppComponentWithJestTests = () => ({
   component: AppComponent,
   props: {},
 });
 
-appComponentWithJestTests.story = {
+AppComponentWithJestTests.story = {
   name: 'app.component with jest tests',
 
   parameters: {
diff --git a/examples/angular-cli/src/stories/addon-knobs.stories.ts b/examples/angular-cli/src/stories/addon-knobs.stories.ts
index fc4436e6eb84..36501f9165be 100644
--- a/examples/angular-cli/src/stories/addon-knobs.stories.ts
+++ b/examples/angular-cli/src/stories/addon-knobs.stories.ts
@@ -26,7 +26,7 @@ export default {
   },
 };
 
-export const simple = () => {
+export const Simple = () => {
   const name = text('name', 'John Doe');
   const age = number('age', 0);
   const phoneNumber = text('phoneNumber', '555-55-55');
@@ -53,11 +53,11 @@ export const simple = () => {
   };
 };
 
-simple.story = {
+Simple.story = {
   name: 'Simple',
 };
 
-export const allKnobs = () => {
+export const AllKnobs = () => {
   const name = text('name', 'Jane');
   const stock = number('stock', 20, {
     range: true,
@@ -101,14 +101,14 @@ export const allKnobs = () => {
   };
 };
 
-allKnobs.story = {
+AllKnobs.story = {
   name: 'All knobs',
 };
 
-export const xssSafety = () => ({
+export const XssSafety = () => ({
   template: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
 });
 
-xssSafety.story = {
+XssSafety.story = {
   name: 'XSS safety',
 };
diff --git a/examples/angular-cli/src/stories/addon-links.stories.ts b/examples/angular-cli/src/stories/addon-links.stories.ts
index 785828427ebd..065d4df98410 100644
--- a/examples/angular-cli/src/stories/addon-links.stories.ts
+++ b/examples/angular-cli/src/stories/addon-links.stories.ts
@@ -5,7 +5,7 @@ export default {
   title: 'Addon/Links',
 };
 
-export const buttonWithLinkToAnotherStory = () => ({
+export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
     text: 'Go to Welcome Story',
@@ -13,6 +13,6 @@ export const buttonWithLinkToAnotherStory = () => ({
   },
 });
 
-buttonWithLinkToAnotherStory.story = {
+ButtonWithLinkToAnotherStory.story = {
   name: 'button with link to another story',
 };
diff --git a/examples/angular-cli/src/stories/addon-notes.stories.ts b/examples/angular-cli/src/stories/addon-notes.stories.ts
index e4a3b3b5923c..87f7bb7d69c9 100644
--- a/examples/angular-cli/src/stories/addon-notes.stories.ts
+++ b/examples/angular-cli/src/stories/addon-notes.stories.ts
@@ -4,7 +4,7 @@ export default {
   title: 'Addon/Notes',
 };
 
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
   component: Button,
   props: {
     text: 'Notes on some Button',
@@ -12,12 +12,12 @@ export const simpleNote = () => ({
   },
 });
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on some button' },
 };
 
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
   component: Button,
   props: {
     text: 'Notes with HTML',
@@ -25,7 +25,7 @@ export const noteWithHtml = () => ({
   },
 });
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
   parameters: {
     notes: `
diff --git a/examples/angular-cli/src/stories/app.component.stories.ts b/examples/angular-cli/src/stories/app.component.stories.ts
index 40f7b779e89d..d9a65e40769d 100644
--- a/examples/angular-cli/src/stories/app.component.stories.ts
+++ b/examples/angular-cli/src/stories/app.component.stories.ts
@@ -5,12 +5,12 @@ export default {
   component: AppComponent,
 };
 
-export const componentWithSeparateTemplate = () => ({
+export const ComponentWithSeparateTemplate = () => ({
   component: AppComponent,
   props: {},
 });
 
-componentWithSeparateTemplate.story = {
+ComponentWithSeparateTemplate.story = {
   name: 'Component with separate template',
   parameters: { docs: { iframeHeight: 400 } },
 };
diff --git a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
index 92033eada970..59e2734db89c 100644
--- a/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-di/di.component.stories.ts
@@ -5,25 +5,25 @@ export default {
   title: 'Custom/Dependencies',
 };
 
-export const inputsAndInjectDependencies = () => ({
+export const InputsAndInjectDependencies = () => ({
   component: DiComponent,
   props: {
     title: 'Component dependencies',
   },
 });
 
-inputsAndInjectDependencies.story = {
+InputsAndInjectDependencies.story = {
   name: 'inputs and inject dependencies',
 };
 
-export const inputsAndInjectDependenciesWithKnobs = () => ({
+export const InputsAndInjectDependenciesWithKnobs = () => ({
   component: DiComponent,
   props: {
     title: text('title', 'Component dependencies'),
   },
 });
 
-inputsAndInjectDependenciesWithKnobs.story = {
+InputsAndInjectDependenciesWithKnobs.story = {
   name: 'inputs and inject dependencies with knobs',
   decorators: [withKnobs],
 };
diff --git a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
index e94b3b4f21de..868e6dd35485 100644
--- a/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
+++ b/examples/angular-cli/src/stories/component-with-style/styled.component.stories.ts
@@ -4,10 +4,10 @@ export default {
   title: 'Custom/styleUrls',
 };
 
-export const componentWithStyles = () => ({
+export const ComponentWithStyles = () => ({
   component: StyledComponent,
 });
 
-componentWithStyles.story = {
+ComponentWithStyles.story = {
   name: 'Component with styles',
 };
diff --git a/examples/angular-cli/src/stories/core.stories.ts b/examples/angular-cli/src/stories/core.stories.ts
index 0e8908b13baf..91898719d28f 100644
--- a/examples/angular-cli/src/stories/core.stories.ts
+++ b/examples/angular-cli/src/stories/core.stories.ts
@@ -14,7 +14,7 @@ export default {
   },
 };
 
-export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
+export const PassedToStory = ({ parameters: { fileName, ...parameters } }) => ({
   component: Button,
   props: {
     text: `Parameters are ${JSON.stringify(parameters)}`,
@@ -22,7 +22,7 @@ export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
   },
 });
 
-passedToStory.story = {
+PassedToStory.story = {
   name: 'passed to story',
   parameters: { storyParameter },
 };
diff --git a/examples/angular-cli/src/stories/custom-pipes.stories.ts b/examples/angular-cli/src/stories/custom-pipes.stories.ts
index 48edeb238d0f..f0c9d379fcea 100644
--- a/examples/angular-cli/src/stories/custom-pipes.stories.ts
+++ b/examples/angular-cli/src/stories/custom-pipes.stories.ts
@@ -16,25 +16,25 @@ export default {
   ],
 };
 
-export const simple = () => ({
+export const Simple = () => ({
   component: NameComponent,
   props: {
     field: 'foobar',
   },
 });
 
-simple.story = {
+Simple.story = {
   name: 'Simple',
 };
 
-export const withKnobsStory = () => ({
+export const WithKnobsStory = () => ({
   component: NameComponent,
   props: {
     field: text('field', 'foobar'),
   },
 });
 
-withKnobsStory.story = {
+WithKnobsStory.story = {
   name: 'With Knobs',
   decorators: [withKnobs],
 };
diff --git a/examples/angular-cli/src/stories/custom-providers.stories.ts b/examples/angular-cli/src/stories/custom-providers.stories.ts
index fd5a3acf12b1..86b2c2093798 100644
--- a/examples/angular-cli/src/stories/custom-providers.stories.ts
+++ b/examples/angular-cli/src/stories/custom-providers.stories.ts
@@ -16,18 +16,18 @@ export default {
   ],
 };
 
-export const simple = () => ({
+export const Simple = () => ({
   component: ServiceComponent,
   props: {
     name: 'Static name',
   },
 });
 
-simple.story = {
+Simple.story = {
   name: 'Simple',
 };
 
-export const withKnobsStory = () => {
+export const WithKnobsStory = () => {
   const name = text('name', 'Dynamic knob');
 
   return {
@@ -38,7 +38,7 @@ export const withKnobsStory = () => {
   };
 };
 
-withKnobsStory.story = {
+WithKnobsStory.story = {
   name: 'With knobs',
   decorators: [withKnobs],
 };
diff --git a/examples/angular-cli/src/stories/custom-styles.stories.ts b/examples/angular-cli/src/stories/custom-styles.stories.ts
index c54b858ad674..207e818174ca 100644
--- a/examples/angular-cli/src/stories/custom-styles.stories.ts
+++ b/examples/angular-cli/src/stories/custom-styles.stories.ts
@@ -12,7 +12,7 @@ export default {
   ],
 };
 
-export const defaultStory = () => ({
+export const DefaultStory = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
     text: 'Button with custom styles',
@@ -28,11 +28,11 @@ export const defaultStory = () => ({
   ],
 });
 
-defaultStory.story = {
+DefaultStory.story = {
   name: 'Default',
 };
 
-export const withKnobsStory = () => ({
+export const WithKnobsStory = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
     text: text('text', 'Button with custom styles'),
@@ -48,7 +48,7 @@ export const withKnobsStory = () => ({
   ],
 });
 
-withKnobsStory.story = {
+WithKnobsStory.story = {
   name: 'With Knobs',
   decorators: [withKnobs],
 };
diff --git a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
index a620d636cea9..bb93d416ef2f 100644
--- a/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
+++ b/examples/angular-cli/src/stories/customControlValueAccessor/custom-cva-component.stories.ts
@@ -9,7 +9,7 @@ export default {
   title: 'Custom/ngModel',
 };
 
-export const customControlValueAccessor = () => ({
+export const CustomControlValueAccessor = () => ({
   component: CustomCvaComponent,
   props: {
     ngModel: 'Type anything',
@@ -17,7 +17,7 @@ export const customControlValueAccessor = () => ({
   },
 });
 
-customControlValueAccessor.story = {
+CustomControlValueAccessor.story = {
   name: 'custom ControlValueAccessor',
   parameters: { notes: description },
 };
diff --git a/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts b/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
index fba2d69a05bb..30faec0ae6c7 100644
--- a/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
+++ b/examples/angular-cli/src/stories/doc-button/doc-button.stories.ts
@@ -6,7 +6,7 @@ export default {
   parameters: { docs: { iframeHeight: 120 } },
 };
 
-export const basic = () => ({
+export const Basic = () => ({
   component: ButtonComponent,
   props: {
     label: 'Docs Test',
diff --git a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
index 0ca1dfcd367a..37060f32ca92 100644
--- a/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
+++ b/examples/angular-cli/src/stories/inheritance/inheritance.stories.ts
@@ -5,7 +5,7 @@ export default {
   title: 'Custom/Inheritance',
 };
 
-export const iconButton = () => ({
+export const IconButton = () => ({
   component: IconButtonComponent,
   props: {
     icon: 'this is icon',
@@ -13,17 +13,17 @@ export const iconButton = () => ({
   },
 });
 
-iconButton.story = {
+IconButton.story = {
   name: 'icon button',
 };
 
-export const baseButton = () => ({
+export const BaseButton = () => ({
   component: BaseButtonComponent,
   props: {
     label: 'this is label',
   },
 });
 
-baseButton.story = {
+BaseButton.story = {
   name: 'base button',
 };
diff --git a/examples/angular-cli/src/stories/metadata-combined.stories.ts b/examples/angular-cli/src/stories/metadata-combined.stories.ts
index 4233e46a133c..a1af39192691 100644
--- a/examples/angular-cli/src/stories/metadata-combined.stories.ts
+++ b/examples/angular-cli/src/stories/metadata-combined.stories.ts
@@ -22,18 +22,18 @@ export default {
   ],
 };
 
-export const combined1 = () => ({
+export const Combined1 = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',
   },
 });
 
-combined1.story = {
+Combined1.story = {
   name: 'Combined 1',
 };
 
-export const combined2 = () => ({
+export const Combined2 = () => ({
   template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',
@@ -43,6 +43,6 @@ export const combined2 = () => ({
   },
 });
 
-combined2.story = {
+Combined2.story = {
   name: 'Combined 2',
 };
diff --git a/examples/angular-cli/src/stories/metadata-individual.stories.ts b/examples/angular-cli/src/stories/metadata-individual.stories.ts
index 35392945881d..d70c0306f690 100644
--- a/examples/angular-cli/src/stories/metadata-individual.stories.ts
+++ b/examples/angular-cli/src/stories/metadata-individual.stories.ts
@@ -4,7 +4,7 @@ export default {
   title: 'Metadata/Individual',
 };
 
-export const individual1 = () => ({
+export const Individual1 = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',
@@ -21,11 +21,11 @@ export const individual1 = () => ({
   },
 });
 
-individual1.story = {
+Individual1.story = {
   name: 'Individual 1',
 };
 
-export const individual2 = () => ({
+export const Individual2 = () => ({
   template: `<storybook-simple-token-component></storybook-simple-token-component>`,
   moduleMetadata: {
     imports: [],
@@ -43,6 +43,6 @@ export const individual2 = () => ({
   },
 });
 
-individual2.story = {
+Individual2.story = {
   name: 'Individual 2',
 };
diff --git a/examples/angular-cli/src/stories/metadata-shared.stories.ts b/examples/angular-cli/src/stories/metadata-shared.stories.ts
index c09bfabb53eb..9748a174f306 100644
--- a/examples/angular-cli/src/stories/metadata-shared.stories.ts
+++ b/examples/angular-cli/src/stories/metadata-shared.stories.ts
@@ -21,21 +21,21 @@ export default {
   ],
 };
 
-export const shared1 = () => ({
+export const Shared1 = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',
   },
 });
 
-shared1.story = {
+Shared1.story = {
   name: 'Shared 1',
 };
 
-export const shared2 = () => ({
+export const Shared2 = () => ({
   template: `<storybook-simple-token-component></storybook-simple-token-component>`,
 });
 
-shared2.story = {
+Shared2.story = {
   name: 'Shared 2',
 };
diff --git a/examples/angular-cli/src/stories/on-push/on-push.stories.ts b/examples/angular-cli/src/stories/on-push/on-push.stories.ts
index 5077336acf91..0246c5e87a36 100644
--- a/examples/angular-cli/src/stories/on-push/on-push.stories.ts
+++ b/examples/angular-cli/src/stories/on-push/on-push.stories.ts
@@ -6,7 +6,7 @@ export default {
   decorators: [withKnobs],
 };
 
-export const classSpecifiedComponentWithOnPushAndKnobs = () => ({
+export const ClassSpecifiedComponentWithOnPushAndKnobs = () => ({
   component: OnPushBoxComponent,
   props: {
     word: text('Word', 'OnPush'),
@@ -14,7 +14,7 @@ export const classSpecifiedComponentWithOnPushAndKnobs = () => ({
   },
 });
 
-classSpecifiedComponentWithOnPushAndKnobs.story = {
+ClassSpecifiedComponentWithOnPushAndKnobs.story = {
   name: 'Class-specified component with OnPush and Knobs',
   parameters: {
     notes: `
diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js
index 953d945c6f44..2f773b4b223a 100644
--- a/examples/cra-kitchen-sink/src/stories/App.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/App.stories.js
@@ -8,8 +8,8 @@ export default {
   title: 'App',
 };
 
-export const fullApp = () => <App />;
+export const FullApp = () => <App />;
 
-fullApp.story = {
+FullApp.story = {
   name: 'full app',
 };
diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
index 0b48d1a40321..0a8fbaceb3ff 100644
--- a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
@@ -5,4 +5,4 @@ export default {
   title: 'Lifecycle',
 };
 
-export const logging = () => <LifecycleLogger />;
+export const Logging = () => <LifecycleLogger />;
diff --git a/examples/cra-kitchen-sink/src/stories/button.stories.js b/examples/cra-kitchen-sink/src/stories/button.stories.js
index b0ec9efecd6b..4a6563d040f4 100644
--- a/examples/cra-kitchen-sink/src/stories/button.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/button.stories.js
@@ -28,30 +28,30 @@ export default {
   component: Button,
 };
 
-export const story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
-story1.story = {
+export const Story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
+Story1.story = {
   name: 'with text',
   parameters: {
     options: { selectedPanel: 'storybook/actions/panel' },
   },
 };
 
-export const story2 = () => (
+export const Story2 = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="yolo">
       😀 😎 👍 💯
     </span>
   </Button>
 );
-story2.story = {
+Story2.story = {
   name: 'with some emoji',
   parameters: {
     options: { selectedPanel: 'storybook/actions/panel' },
   },
 };
 
-export const story3 = () => <Button>Check my notes in the notes panel</Button>;
-story3.story = {
+export const Story3 = () => <Button>Check my notes in the notes panel</Button>;
+Story3.story = {
   name: 'with notes',
   parameters: {
     notes: 'A very simple button',
@@ -59,14 +59,14 @@ story3.story = {
   },
 };
 
-export const story4 = context => (
+export const Story4 = context => (
   <Container>
     <span>
       click the <InfoButton /> label in top right for info about "{context.name}"
     </span>
   </Container>
 );
-story4.story = {
+Story4.story = {
   name: 'with new info',
   parameters: {
     notes: 'Composition: Info(Notes())',
diff --git a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
index 45fb81c14241..24b6f340196d 100644
--- a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
@@ -7,7 +7,7 @@ export default {
   title: 'CRA',
 };
 
-export const story1 = () => {
+export const Story1 = () => {
   if (!Component) {
     import('@storybook/react/demo').then(({ Button }) => {
       Component = Button;
@@ -20,4 +20,4 @@ export const story1 = () => {
   return <Component>Hello Button</Component>;
 };
 
-story1.story = { name: 'Dynamic import' };
+Story1.story = { name: 'Dynamic import' };
diff --git a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
index ad1c9edb4f68..c46682a20c51 100644
--- a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
@@ -11,8 +11,8 @@ export default {
   title: 'Force ReRender',
 };
 
-export const button = () => (
-  <button type="button" onClick={increment}>
+export const Button = () => (
+  <Button type="button" onClick={increment}>
     Click me to increment: {count}
-  </button>
+  </Button>
 );
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
index 02b61f388686..2fc4ffe73949 100644
--- a/examples/cra-kitchen-sink/src/stories/long-description.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -8,5 +8,5 @@ export default {
   decorators: [centered],
 };
 
-export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-story1.story = { name: 'with text' };
+export const Story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+Story1.story = { name: 'with text' };
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.stories.js b/examples/cra-kitchen-sink/src/stories/welcome.stories.js
index a7203b79b87d..878844fa562c 100644
--- a/examples/cra-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/welcome.stories.js
@@ -7,5 +7,5 @@ export default {
   component: Welcome,
 };
 
-export const story1 = () => <Welcome showApp={linkTo('Button')} />;
-story1.title = 'to Storybook';
+export const Story1 = () => <Welcome showApp={linkTo('Button')} />;
+Story1.title = 'to Storybook';
diff --git a/examples/cra-react15/src/stories/button.stories.js b/examples/cra-react15/src/stories/button.stories.js
index 3c443e29464f..1b35a0e35f1f 100644
--- a/examples/cra-react15/src/stories/button.stories.js
+++ b/examples/cra-react15/src/stories/button.stories.js
@@ -9,14 +9,14 @@ export default {
   },
 };
 
-export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-story1.story = { name: 'with text' };
+export const Story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+Story1.story = { name: 'with text' };
 
-export const story2 = () => (
+export const Story2 = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>
   </Button>
 );
-story2.story = { name: 'with some emoji' };
+Story2.story = { name: 'with some emoji' };
diff --git a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
index f7da6411c637..d058304c95f1 100644
--- a/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
+++ b/examples/cra-ts-kitchen-sink/src/components/Button.stories.tsx
@@ -10,7 +10,7 @@ export default {
 
 type Story = () => any;
 
-export const simpleButton: Story = () => {
+export const SimpleButton: Story = () => {
   const x = 0;
   return <Button onClick={action('button clicked')}>OK {x}</Button>;
 };
@@ -20,6 +20,6 @@ const typeOptions = {
   Action: 'action',
 };
 
-export const withType = () => (
+export const WithType = () => (
   <Button type={radios('Type', typeOptions, typeOptions.Default) as Type}>Label</Button>
 );
diff --git a/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx b/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
index fa267f24c316..c76f45f3b4be 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/0-Welcome.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx b/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx
index b4608d78e926..f9cd3c5119d3 100644
--- a/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx
+++ b/examples/cra-ts-kitchen-sink/src/stories/1-Button.stories.tsx
@@ -7,9 +7,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/examples/ember-cli/stories/addon-a11y.stories.js b/examples/ember-cli/stories/addon-a11y.stories.js
index a8bcb6529205..4958bd0157f0 100644
--- a/examples/ember-cli/stories/addon-a11y.stories.js
+++ b/examples/ember-cli/stories/addon-a11y.stories.js
@@ -14,9 +14,9 @@ export const Default = () => hbs`<button></button>`;
 export const Label = () => hbs`<button>Testing the a11y addon</button>`;
 export const Disabled = () => hbs`<button disabled>Testing the a11y addon</button>`;
 
-export const invalidContrast = () =>
+export const InvalidContrast = () =>
   hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`;
 
-invalidContrast.story = {
+InvalidContrast.story = {
   name: 'Invalid contrast',
 };
diff --git a/examples/ember-cli/stories/addon-actions.stories.js b/examples/ember-cli/stories/addon-actions.stories.js
index aab9fd86f064..60b66a0377dc 100644
--- a/examples/ember-cli/stories/addon-actions.stories.js
+++ b/examples/ember-cli/stories/addon-actions.stories.js
@@ -11,7 +11,7 @@ export default {
   },
 };
 
-export const button = () => ({
+export const Button = () => ({
   template: hbs`<button {{action onClick}}>Click Me</button>`,
   context: {
     onClick: action('clicked'),
diff --git a/examples/ember-cli/stories/addon-backgrounds.stories.js b/examples/ember-cli/stories/addon-backgrounds.stories.js
index 0f8ab7df34b3..7f17ebeea6c5 100644
--- a/examples/ember-cli/stories/addon-backgrounds.stories.js
+++ b/examples/ember-cli/stories/addon-backgrounds.stories.js
@@ -11,18 +11,18 @@ export default {
   },
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
 });
 
-story1.story = {
+Story1.story = {
   name: 'story 1',
 };
 
-export const story2 = () => ({
+export const Story2 = () => ({
   template: hbs`<button>This one too!</button>`,
 });
 
-story2.story = {
+Story2.story = {
   name: 'story 2',
 };
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
index 797e882feda2..2382a0b83b87 100644
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ b/examples/ember-cli/stories/addon-centered.stories.js
@@ -10,6 +10,6 @@ export default {
   },
 };
 
-export const button = () => ({
+export const Button = () => ({
   template: hbs`<button>A Button</button>`,
 });
diff --git a/examples/ember-cli/stories/addon-knobs.stories.js b/examples/ember-cli/stories/addon-knobs.stories.js
index 7cc3806665d6..a379a495814b 100644
--- a/examples/ember-cli/stories/addon-knobs.stories.js
+++ b/examples/ember-cli/stories/addon-knobs.stories.js
@@ -11,7 +11,7 @@ export default {
   },
 };
 
-export const withText = () => ({
+export const WithText = () => ({
   template: hbs`
       {{welcome-banner
         style=(if hidden "display: none")
@@ -34,6 +34,6 @@ export const withText = () => ({
   },
 });
 
-withText.story = {
+WithText.story = {
   name: 'with text',
 };
diff --git a/examples/ember-cli/stories/addon-links.stories.js b/examples/ember-cli/stories/addon-links.stories.js
index 8aba44e70029..539a821fe43b 100644
--- a/examples/ember-cli/stories/addon-links.stories.js
+++ b/examples/ember-cli/stories/addon-links.stories.js
@@ -5,13 +5,13 @@ export default {
   title: 'Addon/Links',
 };
 
-export const goToWelcome = () => ({
+export const GoToWelcome = () => ({
   template: hbs`<button {{action onClick}}>This button brings you to welcome</button>`,
   context: {
     onClick: linkTo('Welcome'),
   },
 });
 
-goToWelcome.story = {
+GoToWelcome.story = {
   name: 'Go to welcome',
 };
diff --git a/examples/ember-cli/stories/addon-notes.stories.js b/examples/ember-cli/stories/addon-notes.stories.js
index 25ebe7cf591b..a2b963b58dac 100644
--- a/examples/ember-cli/stories/addon-notes.stories.js
+++ b/examples/ember-cli/stories/addon-notes.stories.js
@@ -4,20 +4,20 @@ export default {
   title: 'Addon/Notes',
 };
 
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
   template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
 });
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on some bold text' },
 };
 
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
   template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
 });
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
 
   parameters: {
diff --git a/examples/ember-cli/stories/index.stories.js b/examples/ember-cli/stories/index.stories.js
index 4c194a8a2dde..8b3f32fce523 100644
--- a/examples/ember-cli/stories/index.stories.js
+++ b/examples/ember-cli/stories/index.stories.js
@@ -8,7 +8,7 @@ export default {
   },
 };
 
-export const basic = () => ({
+export const Basic = () => ({
   template: hbs`
         {{welcome-page}}
       `,
diff --git a/examples/ember-cli/stories/welcome-banner.stories.js b/examples/ember-cli/stories/welcome-banner.stories.js
index 3a914a80b414..6b5f3d0bbf89 100644
--- a/examples/ember-cli/stories/welcome-banner.stories.js
+++ b/examples/ember-cli/stories/welcome-banner.stories.js
@@ -5,7 +5,7 @@ export default {
   title: 'welcome-banner',
 };
 
-export const basic = () => ({
+export const Basic = () => ({
   template: hbs`
       {{welcome-banner
         backgroundColor=backgroundColor
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index 89942adb7cf2..a811c0cee73f 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -14,15 +14,15 @@ export default {
 export const Default = () => `<button></button>`;
 export const Label = () => `<button>${text}</button>`;
 export const Disabled = () => `<button disabled>${text}</button>`;
-export const story4 = () =>
+export const Story4 = () =>
   `<button style="color: black; background-color: brown;">${text}</button>`;
-story4.story = { name: 'Invalid contrast' };
+Story4.story = { name: 'Invalid contrast' };
 
-export const story5 = () => {
+export const Story5 = () => {
   const div = document.createElement('div');
   setTimeout(() => {
     div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
   }, 1000);
   return div;
 };
-story5.story = { name: 'Delayed render' };
+Story5.story = { name: 'Delayed render' };
diff --git a/examples/html-kitchen-sink/stories/addon-actions.stories.js b/examples/html-kitchen-sink/stories/addon-actions.stories.js
index 4b7f110b639b..40ec7cb6eba0 100644
--- a/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-actions.stories.js
@@ -8,19 +8,19 @@ export default {
   title: 'Addons/Actions',
 };
 
-export const story1 = () => withActions('click')(button);
-story1.story = { name: 'Hello World' };
-export const story2 = () => withActions('click', 'contextmenu')(button);
-story2.story = { name: 'Multiple actions' };
+export const Story1 = () => withActions('click')(button);
+Story1.story = { name: 'Hello World' };
+export const Story2 = () => withActions('click', 'contextmenu')(button);
+Story2.story = { name: 'Multiple actions' };
 
-export const story3 = () =>
+export const Story3 = () =>
   withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story3.story = { name: 'Multiple actions + config' };
+Story3.story = { name: 'Multiple actions + config' };
 
-export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
-story4.story = { name: 'Multiple actions, object' };
+export const Story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+Story4.story = { name: 'Multiple actions, object' };
 
-export const story5 = () =>
+export const Story5 = () =>
   withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
     () => `
         <div>
@@ -28,18 +28,18 @@ export const story5 = () =>
         </div>
       `
   );
-story5.story = { name: 'Multiple actions, selector' };
+Story5.story = { name: 'Multiple actions, selector' };
 
-export const story6 = () =>
+export const Story6 = () =>
   withActions(
     { click: 'clicked', contextmenu: 'right clicked' },
     { clearOnStoryChange: false }
   )(button);
-story6.story = { name: 'Multiple actions, object + config' };
+Story6.story = { name: 'Multiple actions, object + config' };
 
-export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
-story7.story = { name: 'Decorated actions' };
+export const Story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+Story7.story = { name: 'Decorated actions' };
 
-export const story8 = () =>
+export const Story8 = () =>
   pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story8.story = { name: 'Decorated actions + config' };
+Story8.story = { name: 'Decorated actions + config' };
diff --git a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
index 6a2d799ac4c3..fdfdb6b9954b 100644
--- a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -8,9 +8,9 @@ export default {
   },
 };
 
-export const story1 = () =>
+export const Story1 = () =>
   '<span style="color: white">You should be able to switch backgrounds for this story</span>';
-story1.story = { name: 'story 1' };
+Story1.story = { name: 'story 1' };
 
-export const story2 = () => '<span style="color: white">This one too!</span>';
-story2.story = { name: 'story 2' };
+export const Story2 = () => '<span style="color: white">This one too!</span>';
+Story2.story = { name: 'story 2' };
diff --git a/examples/html-kitchen-sink/stories/addon-centered.stories.js b/examples/html-kitchen-sink/stories/addon-centered.stories.js
index 858709b9a324..611afd934335 100644
--- a/examples/html-kitchen-sink/stories/addon-centered.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-centered.stories.js
@@ -5,5 +5,5 @@ export default {
   decorators: [centered],
 };
 
-export const story1 = () => '<button>I am a Button !</button>';
-story1.story = { name: 'button in center' };
+export const Story1 = () => '<button>I am a Button !</button>';
+Story1.story = { name: 'button in center' };
diff --git a/examples/html-kitchen-sink/stories/addon-jest.stories.js b/examples/html-kitchen-sink/stories/addon-jest.stories.js
index f2dee19b5239..eb80009be86b 100644
--- a/examples/html-kitchen-sink/stories/addon-jest.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-jest.stories.js
@@ -6,5 +6,5 @@ export default {
   decorators: [wt({ results })],
 };
 
-export const withTests = () => 'This story shows test results';
-withTests.parameters = { jest: 'addon-jest' };
+export const WithTests = () => 'This story shows test results';
+WithTests.parameters = { jest: 'addon-jest' };
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index e97a4608cdcf..7b529a6c4101 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -34,7 +34,7 @@ export const DOM = () => {
   return container;
 };
 
-export const story3 = () => {
+export const Story3 = () => {
   const name = text('Name', 'John Doe');
   const textColor = color('Text color', 'orangered');
   cachedContainer.textContent = name;
@@ -42,9 +42,9 @@ export const story3 = () => {
   cachedContainer.style.color = textColor;
   return cachedContainer;
 };
-story3.story = { name: 'CSS transitions' };
+Story3.story = { name: 'CSS transitions' };
 
-export const story4 = () => {
+export const Story4 = () => {
   const name = text('Name', 'Jane');
   const stock = number('Stock', 20, {
     range: true,
@@ -85,7 +85,7 @@ export const story4 = () => {
       </div>
     `;
 };
-story4.story = { name: 'All knobs' };
+Story4.story = { name: 'All knobs' };
 
-export const story5 = () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >');
-story5.story = { name: 'XSS safety' };
+export const Story5 = () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >');
+Story5.story = { name: 'XSS safety' };
diff --git a/examples/html-kitchen-sink/stories/addon-notes.stories.js b/examples/html-kitchen-sink/stories/addon-notes.stories.js
index 795a21fe7a92..9129457c82d5 100644
--- a/examples/html-kitchen-sink/stories/addon-notes.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-notes.stories.js
@@ -2,13 +2,13 @@ export default {
   title: 'Addons/Notes',
 };
 
-export const story1 = () =>
+export const Story1 = () =>
   `<p>
       <strong>
         This is a fragment of HTML
       </strong>
     </p>`;
-story1.story = {
+Story1.story = {
   name: 'Simple note',
   parameters: {
     notes: 'My notes on some bold text',
diff --git a/examples/html-kitchen-sink/stories/button.stories.js b/examples/html-kitchen-sink/stories/button.stories.js
index 72627d513e5f..bf4c9ea5f998 100644
--- a/examples/html-kitchen-sink/stories/button.stories.js
+++ b/examples/html-kitchen-sink/stories/button.stories.js
@@ -6,18 +6,18 @@ export default {
   title: 'Demo',
 };
 
-export const heading = () => '<h1>Hello World</h1>';
-export const headings = () =>
+export const Heading = () => '<h1>Hello World</h1>';
+export const Headings = () =>
   '<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>';
 
-export const button = () => {
+export const Button = () => {
   const btn = document.createElement('button');
   btn.innerHTML = 'Hello Button';
   btn.addEventListener('click', action('Click'));
   return btn;
 };
 
-export const effect = () => {
+export const Effect = () => {
   useEffect(() => {
     document.getElementById('button').style.backgroundColor = 'yellow';
   });
diff --git a/examples/marko-cli/src/stories/hello.stories.js b/examples/marko-cli/src/stories/hello.stories.js
index 4c9e74866c69..a6a717560ad8 100644
--- a/examples/marko-cli/src/stories/hello.stories.js
+++ b/examples/marko-cli/src/stories/hello.stories.js
@@ -8,5 +8,5 @@ export default {
 };
 
 export const Simple = () => ({ input: { name: 'abc', age: 20 } });
-export const story2 = () => 'NOT A MARKO RENDER_RESULT';
-story2.story = { name: 'with ERROR!' };
+export const Story2 = () => 'NOT A MARKO RENDER_RESULT';
+Story2.story = { name: 'with ERROR!' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
index 193629f7ef81..aa033b382be5 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
@@ -8,28 +8,28 @@ export default {
   title: 'Addons/Actions',
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   view: () => <Button onclick={action('logo1')}>Click me to log the action</Button>,
 });
-story1.story = { name: 'Action only' };
+Story1.story = { name: 'Action only' };
 
-export const story2 = () => ({
+export const Story2 = () => ({
   view: () => (
     <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
   ),
 });
-story2.story = { name: 'Multiple actions' };
+Story2.story = { name: 'Multiple actions' };
 
-export const story3 = () => ({
+export const Story3 = () => ({
   view: () => (
     <Button {...actions({ onclick: 'clicked', ondblclick: 'double clicked' })}>
       (Double) click me to log the action
     </Button>
   ),
 });
-story3.story = { name: 'Multiple actions, object' };
+Story3.story = { name: 'Multiple actions, object' };
 
-export const story4 = () => ({
+export const Story4 = () => ({
   view: () => (
     <Button
       onclick={e => {
@@ -41,4 +41,4 @@ export const story4 = () => ({
     </Button>
   ),
 });
-story4.story = { name: 'Action and method' };
+Story4.story = { name: 'Action and method' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 7423669b09aa..48c158691950 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -13,12 +13,12 @@ export default {
   },
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
 });
-story1.story = { name: 'story 1' };
+Story1.story = { name: 'story 1' };
 
-export const story2 = () => ({
+export const Story2 = () => ({
   view: () => <BaseButton label="This one too!" />,
 });
-story2.story = { name: 'story 2' };
+Story2.story = { name: 'story 2' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
index 6d8b76d6ace1..4cf79669f6a0 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -29,7 +29,7 @@ export const Simple = () => {
   };
 };
 
-export const story2 = () => {
+export const Story2 = () => {
   const name = text('Name', 'Jane');
   const stock = number('Stock', 20, {
     range: true,
@@ -75,9 +75,9 @@ export const story2 = () => {
     ),
   };
 };
-story2.story = { name: 'All knobs' };
+Story2.story = { name: 'All knobs' };
 
-export const story3 = () => ({
+export const Story3 = () => ({
   view: () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
 });
-story3.story = { name: 'XSS safety' };
+Story3.story = { name: 'XSS safety' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
index 72589574ae1a..ea20da6fa529 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
@@ -9,7 +9,7 @@ export default {
   title: 'Addons/Links',
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   view: () => <Button onclick={linkTo('Welcome')}>This buttons links to Welcome</Button>,
 });
-story1.story = { name: 'Go to welcome' };
+Story1.story = { name: 'Go to welcome' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
index 6801d66fcecd..26a9b8a401db 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
@@ -6,7 +6,7 @@ export default {
   title: 'Addons/Notes',
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   view: () => (
     <p>
       <strong>
@@ -21,12 +21,12 @@ export const story1 = () => ({
   ),
 });
 
-story1.story = {
+Story1.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on some bold text' },
 };
 
-export const story2 = () => ({
+export const Story2 = () => ({
   view: () => (
     <p>
       <span>🤔😳😯😮</span>
@@ -38,7 +38,7 @@ export const story2 = () => ({
   ),
 });
 
-story2.story = {
+Story2.story = {
   name: 'Note with HTML',
   parameters: {
     notes: `
diff --git a/examples/mithril-kitchen-sink/src/stories/button.stories.js b/examples/mithril-kitchen-sink/src/stories/button.stories.js
index ef051b16dec0..f172c6abe7fc 100644
--- a/examples/mithril-kitchen-sink/src/stories/button.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/button.stories.js
@@ -12,12 +12,12 @@ export default {
   },
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
 });
-story1.story = { name: 'with text' };
+Story1.story = { name: 'with text' };
 
-export const story2 = () => ({
+export const Story2 = () => ({
   view: () =>
     m(
       Button,
@@ -25,4 +25,4 @@ export const story2 = () => ({
       m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
     ),
 });
-story2.story = { name: 'with some emoji' };
+Story2.story = { name: 'with some emoji' };
diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
index 60ead95a694f..c30203e117c4 100644
--- a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
@@ -7,7 +7,7 @@ export default {
   component: Welcome,
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   view: () => m(Welcome, { showApp: linkTo('Button') }),
 });
-story1.story = { name: 'to Storybook' };
+Story1.story = { name: 'to Storybook' };
diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
index cfdac38ea8be..64f1aded15ca 100644
--- a/examples/official-storybook/stories/addon-a11y/base-button.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
@@ -16,11 +16,11 @@ export const Default = () => <BaseButton label="" />;
 export const Label = () => <BaseButton label={text} />;
 export const Disabled = () => <BaseButton disabled label={text} />;
 
-export const invalidContrast = () => (
+export const InvalidContrast = () => (
   // FIXME: has no effect on score
   <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
 );
-invalidContrast.story = {
+InvalidContrast.story = {
   name: 'Invalid contrast',
 };
 
diff --git a/examples/official-storybook/stories/addon-a11y/button.stories.js b/examples/official-storybook/stories/addon-a11y/button.stories.js
index 6f030c88bec3..a59bd7a48603 100644
--- a/examples/official-storybook/stories/addon-a11y/button.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/button.stories.js
@@ -15,7 +15,7 @@ export const Default = () => <Button />;
 export const Content = () => <Button content={text} />;
 export const Label = () => <Button label={text} />;
 export const Disabled = () => <Button disabled content={text} />;
-export const invalidContrast = () => <Button contrast="wrong" content={text} />;
-invalidContrast.story = {
+export const InvalidContrast = () => <Button contrast="wrong" content={text} />;
+InvalidContrast.story = {
   name: 'Invalid contrast',
 };
diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js
index d0df82b3b099..e120332ce118 100644
--- a/examples/official-storybook/stories/addon-a11y/form.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/form.stories.js
@@ -12,29 +12,29 @@ export default {
   },
 };
 
-export const withoutLabel = () => (
+export const WithoutLabel = () => (
   <Form.Field label="">
     <Form.Input />
   </Form.Field>
 );
-withoutLabel.story = {
+WithoutLabel.story = {
   name: 'Without Label',
 };
 
-export const withLabel = () => (
+export const WithLabel = () => (
   <Form.Field label={text}>
     <Form.Input id="1" />
   </Form.Field>
 );
-withLabel.story = {
+WithLabel.story = {
   name: 'With label',
 };
 
-export const withPlaceholder = () => (
+export const WithPlaceholder = () => (
   <Form.Field label="">
     <Form.Input id="1" placeholder={text} />
   </Form.Field>
 );
-withPlaceholder.story = {
+WithPlaceholder.story = {
   name: 'With placeholder',
 };
diff --git a/examples/official-storybook/stories/addon-a11y/image.stories.js b/examples/official-storybook/stories/addon-a11y/image.stories.js
index 7b516b0c7cd9..9a124605cf12 100644
--- a/examples/official-storybook/stories/addon-a11y/image.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/image.stories.js
@@ -11,13 +11,13 @@ export default {
   },
 };
 
-export const withoutAlt = () => <img src={image} />;
-withoutAlt.story = {
+export const WithoutAlt = () => <img src={image} />;
+WithoutAlt.story = {
   name: 'Without alt',
 };
 
-export const withoutAltButUnchecked = () => <img src={image} />;
-withoutAltButUnchecked.story = {
+export const WithoutAltButUnchecked = () => <img src={image} />;
+WithoutAltButUnchecked.story = {
   name: 'Without alt but unchecked',
   parameters: {
     a11y: {
@@ -30,8 +30,8 @@ withoutAltButUnchecked.story = {
   },
 };
 
-export const withAlt = () => <img src={image} alt={text} />;
-withAlt.story = {
+export const WithAlt = () => <img src={image} alt={text} />;
+WithAlt.story = {
   name: 'With alt',
 };
 
diff --git a/examples/official-storybook/stories/addon-a11y/typography.stories.js b/examples/official-storybook/stories/addon-a11y/typography.stories.js
index 1c51cef77ac4..9fc6868def16 100644
--- a/examples/official-storybook/stories/addon-a11y/typography.stories.js
+++ b/examples/official-storybook/stories/addon-a11y/typography.stories.js
@@ -19,26 +19,26 @@ export const Correct = () => (
   </Fragment>
 );
 
-export const emptyHeading = () => <h1 />;
+export const EmptyHeading = () => <h1 />;
 
-emptyHeading.story = {
+EmptyHeading.story = {
   name: 'Empty Heading',
 };
 
-export const emptyParagraph = () => <p />;
+export const EmptyParagraph = () => <p />;
 
-emptyParagraph.story = {
+EmptyParagraph.story = {
   name: 'Empty Paragraph',
 };
 
-export const emptyLink = () => <a href={href} />;
+export const EmptyLink = () => <a href={href} />;
 
-emptyLink.story = {
+EmptyLink.story = {
   name: 'Empty Link',
 };
 
-export const linkWithoutHref = () => <a>{`${text}...`}</a>;
+export const LinkWithoutHref = () => <a>{`${text}...`}</a>;
 
-linkWithoutHref.story = {
+LinkWithoutHref.story = {
   name: 'Link without href',
 };
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index 66ae37eadea5..f28d05bd18d7 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -23,39 +23,39 @@ export default {
   },
 };
 
-export const basicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
+export const BasicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
 
-basicExample.story = {
+BasicExample.story = {
   name: 'Basic example',
 };
 
-export const multipleActions = () => (
+export const MultipleActions = () => (
   <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
 );
 
-multipleActions.story = {
+MultipleActions.story = {
   name: 'Multiple actions',
 };
 
-export const multipleActionsConfig = () => (
+export const MultipleActionsConfig = () => (
   <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
     Moving away from this story will persist the action logger
   </Button>
 );
 
-multipleActionsConfig.story = {
+MultipleActionsConfig.story = {
   name: 'Multiple actions + config',
 };
 
-export const multipleActionsAsObject = () => (
+export const MultipleActionsAsObject = () => (
   <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
 );
 
-multipleActionsAsObject.story = {
+MultipleActionsAsObject.story = {
   name: 'Multiple actions as object',
 };
 
-export const multipleActionsObjectConfig = () => (
+export const MultipleActionsObjectConfig = () => (
   <Button
     {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
   >
@@ -63,63 +63,63 @@ export const multipleActionsObjectConfig = () => (
   </Button>
 );
 
-multipleActionsObjectConfig.story = {
+MultipleActionsObjectConfig.story = {
   name: 'Multiple actions, object + config',
 };
 
-export const decoratedAction = () => (
+export const DecoratedAction = () => (
   <Button onClick={pickNative.action('decorated')}>Native Event</Button>
 );
 
-decoratedAction.story = {
+DecoratedAction.story = {
   name: 'Decorated action',
 };
 
-export const decoratedActionConfig = () => (
+export const DecoratedActionConfig = () => (
   <Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
     Moving away from this story will persist the action logger
   </Button>
 );
 
-decoratedActionConfig.story = {
+DecoratedActionConfig.story = {
   name: 'Decorated action + config',
 };
 
-export const decoratedActions = () => (
+export const DecoratedActions = () => (
   <Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
 );
 
-decoratedActions.story = {
+DecoratedActions.story = {
   name: 'Decorated actions',
 };
 
-export const decoratedActionsConfig = () => (
+export const DecoratedActionsConfig = () => (
   <Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
     Moving away from this story will persist the action logger
   </Button>
 );
 
-decoratedActionsConfig.story = {
+DecoratedActionsConfig.story = {
   name: 'Decorated actions + config',
 };
 
-export const circularPayload = () => {
+export const CircularPayload = () => {
   const circular = { foo: {} };
   circular.foo.circular = circular;
   return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
 };
 
-circularPayload.story = {
+CircularPayload.story = {
   name: 'Circular Payload',
 };
 
-export const reservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
+export const ReservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
 
-reservedKeywordAsName.story = {
+ReservedKeywordAsName.story = {
   name: 'Reserved keyword as name',
 };
 
-export const allTypes = () => {
+export const AllTypes = () => {
   function A() {}
   function B() {}
 
@@ -185,11 +185,11 @@ export const allTypes = () => {
   );
 };
 
-allTypes.story = {
+AllTypes.story = {
   name: 'All types',
 };
 
-export const configureActionsDepth = () => {
+export const ConfigureActionsDepth = () => {
   configureActions({
     depth: 2,
   });
@@ -201,7 +201,7 @@ export const configureActionsDepth = () => {
   );
 };
 
-export const persistingTheActionLogger = () => (
+export const PersistingTheActionLogger = () => (
   <Fragment>
     <p>Moving away from this story will persist the action logger</p>
     <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
@@ -210,11 +210,11 @@ export const persistingTheActionLogger = () => (
   </Fragment>
 );
 
-persistingTheActionLogger.story = {
+PersistingTheActionLogger.story = {
   name: 'Persisting the action logger',
 };
 
-export const limitActionOutput = () => {
+export const LimitActionOutput = () => {
   configureActions({
     limit: 2,
   });
@@ -226,6 +226,6 @@ export const limitActionOutput = () => {
     </Fragment>
   );
 };
-limitActionOutput.story = {
+LimitActionOutput.story = {
   name: 'Limit Action Output',
 };
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index 17ef4de2626e..738f174bc2d9 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -16,23 +16,23 @@ export default {
   },
 };
 
-export const story1 = () => (
+export const Story1 = () => (
   <BaseButton label="You should be able to switch backgrounds for this story" />
 );
 
-story1.story = {
+Story1.story = {
   name: 'story 1',
 };
 
-export const story2 = () => <BaseButton label="This one too!" />;
+export const Story2 = () => <BaseButton label="This one too!" />;
 
-story2.story = {
+Story2.story = {
   name: 'story 2',
 };
 
-export const overridden = () => <BaseButton label="This one should have different backgrounds" />;
+export const Overridden = () => <BaseButton label="This one should have different backgrounds" />;
 
-overridden.story = {
+Overridden.story = {
   parameters: {
     backgrounds: [
       { name: 'pink', value: 'hotpink' },
@@ -41,9 +41,9 @@ overridden.story = {
   },
 };
 
-export const disabledVia = () => <BaseButton label="This one should not use backgrounds" />;
+export const DisabledVia = () => <BaseButton label="This one should not use backgrounds" />;
 
-disabledVia.story = {
+DisabledVia.story = {
   name: 'disabled via []',
 
   parameters: {
@@ -51,11 +51,11 @@ disabledVia.story = {
   },
 };
 
-export const skippedViaDisableTrue = () => (
+export const SkippedViaDisableTrue = () => (
   <BaseButton label="This one should not use backgrounds either" />
 );
 
-skippedViaDisableTrue.story = {
+SkippedViaDisableTrue.story = {
   name: 'skipped via disable:true',
 
   parameters: {
@@ -63,11 +63,11 @@ skippedViaDisableTrue.story = {
   },
 };
 
-export const gridCellSize = () => (
+export const GridCellSize = () => (
   <BaseButton label="This one should have a different grid cell size" />
 );
 
-gridCellSize.story = {
+GridCellSize.story = {
   parameters: {
     grid: { cellSize: 10 },
   },
diff --git a/examples/official-storybook/stories/addon-centered.stories.js b/examples/official-storybook/stories/addon-centered.stories.js
index 44cc6d60502b..bd428217e743 100644
--- a/examples/official-storybook/stories/addon-centered.stories.js
+++ b/examples/official-storybook/stories/addon-centered.stories.js
@@ -8,15 +8,15 @@ export default {
   decorators: [centered],
 };
 
-export const story1 = () => <BaseButton label="This story should be centered" />;
+export const Story1 = () => <BaseButton label="This story should be centered" />;
 
-story1.story = {
+Story1.story = {
   name: 'story 1',
 };
 
-export const story2 = () => <BaseButton label="This story should not be centered" />;
+export const Story2 = () => <BaseButton label="This story should not be centered" />;
 
-story2.story = {
+Story2.story = {
   name: 'story 2 not centered',
 
   parameters: {
diff --git a/examples/official-storybook/stories/addon-contexts.stories.js b/examples/official-storybook/stories/addon-contexts.stories.js
index 0e76638a612d..d85a97ad6c79 100644
--- a/examples/official-storybook/stories/addon-contexts.stories.js
+++ b/examples/official-storybook/stories/addon-contexts.stories.js
@@ -43,10 +43,10 @@ export default {
   decorators: [withContexts(topLevelContexts)],
 };
 
-export const simpleCssTheming = () => (
+export const SimpleCssTheming = () => (
   <>I'm a children of the injected 'div' (where provides a theming context).</>
 );
-simpleCssTheming.story = {
+SimpleCssTheming.story = {
   name: 'Simple CSS Theming',
   parameters: {
     contexts: storyLevelContexts,
diff --git a/examples/official-storybook/stories/addon-cssresources.stories.js b/examples/official-storybook/stories/addon-cssresources.stories.js
index 18537dbe8c98..e0e5b2f0d773 100644
--- a/examples/official-storybook/stories/addon-cssresources.stories.js
+++ b/examples/official-storybook/stories/addon-cssresources.stories.js
@@ -4,12 +4,12 @@ export default {
   title: 'Addons/Cssresources',
 };
 
-export const primaryLargeButton = () => (
+export const PrimaryLargeButton = () => (
   <button type="button" className="btn btn-lg btn-primary">
     Primary Large Button
   </button>
 );
-primaryLargeButton.story = {
+PrimaryLargeButton.story = {
   name: 'Primary Large Button',
   parameters: {
     cssresources: [
@@ -30,8 +30,8 @@ primaryLargeButton.story = {
   },
 };
 
-export const cameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
-cameraIcon.story = {
+export const CameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
+CameraIcon.story = {
   name: 'Camera Icon',
   parameters: {
     cssresources: [
diff --git a/examples/official-storybook/stories/addon-design-assets.stories.js b/examples/official-storybook/stories/addon-design-assets.stories.js
index b0f928195c99..6d858132d683 100644
--- a/examples/official-storybook/stories/addon-design-assets.stories.js
+++ b/examples/official-storybook/stories/addon-design-assets.stories.js
@@ -10,9 +10,9 @@ export default {
   },
 };
 
-export const singleImage = () => <div>This story should a single image in the assets panel</div>;
+export const SingleImage = () => <div>This story should a single image in the assets panel</div>;
 
-singleImage.story = {
+SingleImage.story = {
   name: 'single image',
 
   parameters: {
@@ -20,9 +20,9 @@ singleImage.story = {
   },
 };
 
-export const singleWebpage = () => <div>This story should a single image in the assets panel</div>;
+export const SingleWebpage = () => <div>This story should a single image in the assets panel</div>;
 
-singleWebpage.story = {
+SingleWebpage.story = {
   name: 'single webpage',
 
   parameters: {
@@ -30,9 +30,9 @@ singleWebpage.story = {
   },
 };
 
-export const youtubeVideo = () => <div>This story should a single image in the assets panel</div>;
+export const YoutubeVideo = () => <div>This story should a single image in the assets panel</div>;
 
-youtubeVideo.story = {
+YoutubeVideo.story = {
   name: 'youtube video',
 
   parameters: {
@@ -40,11 +40,11 @@ youtubeVideo.story = {
   },
 };
 
-export const multipleImages = () => (
+export const MultipleImages = () => (
   <div>This story should a multiple images in the assets panel</div>
 );
 
-multipleImages.story = {
+MultipleImages.story = {
   name: 'multiple images',
 
   parameters: {
@@ -55,9 +55,9 @@ multipleImages.story = {
   },
 };
 
-export const namedAssets = () => <div>This story should a single image in the assets panel</div>;
+export const NamedAssets = () => <div>This story should a single image in the assets panel</div>;
 
-namedAssets.story = {
+NamedAssets.story = {
   name: 'named assets',
 
   parameters: {
@@ -74,11 +74,11 @@ namedAssets.story = {
   },
 };
 
-export const urlReplacement = () => (
+export const UrlReplacement = () => (
   <div>This story should have a webpge, with within it's url the storyId</div>
 );
 
-urlReplacement.story = {
+UrlReplacement.story = {
   name: 'url replacement',
 
   parameters: {
diff --git a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
index 1b06f9bfc190..c82415db5022 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs/addon-docs.stories.js
@@ -8,49 +8,49 @@ export default {
   component: DocgenButton,
 };
 
-export const basic = () => <div>Click docs tab to see basic docs</div>;
+export const Basic = () => <div>Click docs tab to see basic docs</div>;
 
-export const noDocs = () => <div>Click docs tab to see no docs error</div>;
-noDocs.story = {
+export const NoDocs = () => <div>Click docs tab to see no docs error</div>;
+NoDocs.story = {
   name: 'no docs',
   parameters: { docs: { page: null } },
 };
 
-export const withNotes = () => <div>Click docs tab to see DocsPage docs</div>;
-withNotes.story = {
+export const WithNotes = () => <div>Click docs tab to see DocsPage docs</div>;
+WithNotes.story = {
   name: 'with notes',
   parameters: { notes },
 };
 
-export const withInfo = () => <div>Click docs tab to see DocsPage docs</div>;
-withInfo.story = {
+export const WithInfo = () => <div>Click docs tab to see DocsPage docs</div>;
+WithInfo.story = {
   name: 'with info',
   parameters: {
     info: 'some user info string',
   },
 };
 
-export const mdxOverride = () => <div>Click docs tab to see MDX-overridden docs</div>;
-mdxOverride.story = {
+export const MdxOverride = () => <div>Click docs tab to see MDX-overridden docs</div>;
+MdxOverride.story = {
   name: 'mdx override',
   parameters: {
     docs: { page: mdxNotes },
   },
 };
 
-export const jsxOverride = () => <div>Click docs tab to see JSX-overridden docs</div>;
-jsxOverride.story = {
+export const JsxOverride = () => <div>Click docs tab to see JSX-overridden docs</div>;
+JsxOverride.story = {
   name: 'jsx override',
   parameters: {
     docs: { page: () => <div>Hello docs</div> },
   },
 };
 
-export const docsDisable = () => <div>This story shouldn't show up in DocsPage</div>;
-docsDisable.story = {
+export const DocsDisable = () => <div>This story shouldn't show up in DocsPage</div>;
+DocsDisable.story = {
   parameters: {
     docs: { disable: true },
   },
 };
 
-export const largerThanPreview = () => <div style={{ width: 1000, background: 'pink' }}>HUGE</div>;
+export const LargerThanPreview = () => <div style={{ width: 1000, background: 'pink' }}>HUGE</div>;
diff --git a/examples/official-storybook/stories/addon-docs/mdx.stories.js b/examples/official-storybook/stories/addon-docs/mdx.stories.js
index c4cab584e45a..e2563d4825fe 100644
--- a/examples/official-storybook/stories/addon-docs/mdx.stories.js
+++ b/examples/official-storybook/stories/addon-docs/mdx.stories.js
@@ -8,7 +8,7 @@ export default {
 };
 
 // This renders the contents of the docs panel into story content
-export const typography = () => {
+export const Typography = () => {
   const Docs = markdown.parameters.docs.page;
   return <Docs />;
 };
diff --git a/examples/official-storybook/stories/addon-graphql.stories.js b/examples/official-storybook/stories/addon-graphql.stories.js
index f1e8044e0d93..ceab150d2f7e 100644
--- a/examples/official-storybook/stories/addon-graphql.stories.js
+++ b/examples/official-storybook/stories/addon-graphql.stories.js
@@ -4,9 +4,9 @@ export default {
   title: 'Addons/GraphQL',
 };
 
-export const getPikachu = () => <div>hello</div>;
+export const GetPikachu = () => <div>hello</div>;
 
-getPikachu.story = {
+GetPikachu.story = {
   name: 'get Pikachu',
   parameters: {
     graphiql: {
diff --git a/examples/official-storybook/stories/addon-info/decorators.stories.js b/examples/official-storybook/stories/addon-info/decorators.stories.js
index 0d3774ffdcc0..780fb3a0b6db 100644
--- a/examples/official-storybook/stories/addon-info/decorators.stories.js
+++ b/examples/official-storybook/stories/addon-info/decorators.stories.js
@@ -7,5 +7,5 @@ export default {
   decorators: [withInfo('Info can take options via the global or local decorator as well.')],
 };
 
-export const useInfo = () => <BaseButton label="Button" />;
-useInfo.story = { name: 'Use Info as story decorator' };
+export const UseInfo = () => <BaseButton label="Button" />;
+UseInfo.story = { name: 'Use Info as story decorator' };
diff --git a/examples/official-storybook/stories/addon-info/forward-ref.stories.js b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
index 21fdcd5ac6d6..1aa8da24c022 100644
--- a/examples/official-storybook/stories/addon-info/forward-ref.stories.js
+++ b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
@@ -8,10 +8,10 @@ export default {
   decorators: [withInfo],
 };
 
-export const displaysCorrectly = () => <ForwardedRefButton label="Forwarded Ref Button" />;
-displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };
+export const DisplaysCorrectly = () => <ForwardedRefButton label="Forwarded Ref Button" />;
+DisplaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };
 
-export const displayName = () => (
+export const DisplayName = () => (
   <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
 );
-displayName.story = { name: 'Uses forwardRef displayName if available' };
+DisplayName.story = { name: 'Uses forwardRef displayName if available' };
diff --git a/examples/official-storybook/stories/addon-info/jsx.stories.js b/examples/official-storybook/stories/addon-info/jsx.stories.js
index 5052bf5f241c..7db0a4ee09b5 100644
--- a/examples/official-storybook/stories/addon-info/jsx.stories.js
+++ b/examples/official-storybook/stories/addon-info/jsx.stories.js
@@ -25,11 +25,11 @@ export default {
   decorators: [withInfo],
 };
 
-export const displaysJsxInDescription = () => (
+export const DisplaysJsxInDescription = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-displaysJsxInDescription.story = {
+DisplaysJsxInDescription.story = {
   name: 'Displays JSX in description',
 
   parameters: {
diff --git a/examples/official-storybook/stories/addon-info/markdown.stories.js b/examples/official-storybook/stories/addon-info/markdown.stories.js
index 208b5c84ffee..38038e50703f 100644
--- a/examples/official-storybook/stories/addon-info/markdown.stories.js
+++ b/examples/official-storybook/stories/addon-info/markdown.stories.js
@@ -47,20 +47,20 @@ html with special formatting
 Maybe include a [link](http://storybook.js.org) to your project as well.
 `;
 
-export const displaysMarkdownInDescription = () => (
+export const DisplaysMarkdownInDescription = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-displaysMarkdownInDescription.story = {
+DisplaysMarkdownInDescription.story = {
   name: 'Displays Markdown in description',
   parameters: { info: markdownDescription },
 };
 
-export const fromInternalMarkdownFile = () => (
+export const FromInternalMarkdownFile = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-fromInternalMarkdownFile.story = {
+FromInternalMarkdownFile.story = {
   name: 'From internal Markdown file',
 
   parameters: {
@@ -72,11 +72,11 @@ fromInternalMarkdownFile.story = {
   },
 };
 
-export const fromExternalMarkdownFile = () => (
+export const FromExternalMarkdownFile = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-fromExternalMarkdownFile.story = {
+FromExternalMarkdownFile.story = {
   name: 'From external Markdown file',
   parameters: { info: externalMdDocs },
 };
diff --git a/examples/official-storybook/stories/addon-info/options.stories.js b/examples/official-storybook/stories/addon-info/options.stories.js
index 632518c932f3..f75e3b825607 100644
--- a/examples/official-storybook/stories/addon-info/options.stories.js
+++ b/examples/official-storybook/stories/addon-info/options.stories.js
@@ -12,8 +12,8 @@ export default {
   decorators: [withInfo],
 };
 
-export const inlinesComponentInsideStory = () => <BaseButton label="Button" />;
-inlinesComponentInsideStory.story = {
+export const InlinesComponentInsideStory = () => <BaseButton label="Button" />;
+InlinesComponentInsideStory.story = {
   name: 'Inlines component inside story',
   parameters: {
     info: {
@@ -23,10 +23,10 @@ inlinesComponentInsideStory.story = {
   },
 };
 
-export const excludesPropTypesThatAreInTheExcludedPropTypesArray = () => (
+export const ExcludesPropTypesThatAreInTheExcludedPropTypesArray = () => (
   <BaseButton label="Button" />
 );
-excludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
+ExcludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
   name: 'Excludes propTypes that are in the excludedPropTypes array',
   parameters: {
     info: {
@@ -36,8 +36,8 @@ excludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
   },
 };
 
-export const showsOrHidesInfoAddonHeader = () => <BaseButton label="Button" />;
-showsOrHidesInfoAddonHeader.story = {
+export const ShowsOrHidesInfoAddonHeader = () => <BaseButton label="Button" />;
+ShowsOrHidesInfoAddonHeader.story = {
   name: 'Shows or hides Info Addon header',
   parameters: {
     info: {
@@ -47,8 +47,8 @@ showsOrHidesInfoAddonHeader.story = {
   },
 };
 
-export const showsOrHidesInfoAddonSource = () => <BaseButton label="Button" />;
-showsOrHidesInfoAddonSource.story = {
+export const ShowsOrHidesInfoAddonSource = () => <BaseButton label="Button" />;
+ShowsOrHidesInfoAddonSource.story = {
   name: 'Shows or hides Info Addon source',
   parameters: {
     info: {
@@ -58,8 +58,8 @@ showsOrHidesInfoAddonSource.story = {
   },
 };
 
-export const showsAdditionalComponentPropTables = () => <BaseButton label="Button" />;
-showsAdditionalComponentPropTables.story = {
+export const ShowsAdditionalComponentPropTables = () => <BaseButton label="Button" />;
+ShowsAdditionalComponentPropTables.story = {
   name: 'Shows additional component prop tables',
   parameters: {
     info: {
@@ -69,13 +69,13 @@ showsAdditionalComponentPropTables.story = {
   },
 };
 
-export const excludeComponentFromPropTables = () => (
+export const ExcludeComponentFromPropTables = () => (
   <div>
     <BaseButton label="Button" />
     <FlowTypeButton label="Flow Typed Button" />
   </div>
 );
-excludeComponentFromPropTables.story = {
+ExcludeComponentFromPropTables.story = {
   name: 'Exclude component from prop tables',
   parameters: {
     info: {
@@ -85,8 +85,8 @@ excludeComponentFromPropTables.story = {
   },
 };
 
-export const extendInfoStylesWithAnObject = () => <BaseButton label="Button" />;
-extendInfoStylesWithAnObject.story = {
+export const ExtendInfoStylesWithAnObject = () => <BaseButton label="Button" />;
+ExtendInfoStylesWithAnObject.story = {
   name: 'Extend info styles with an object',
   parameters: {
     info: {
@@ -106,8 +106,8 @@ extendInfoStylesWithAnObject.story = {
   },
 };
 
-export const fullControlOverStylesUsingAFunction = () => <BaseButton label="Button" />;
-fullControlOverStylesUsingAFunction.story = {
+export const FullControlOverStylesUsingAFunction = () => <BaseButton label="Button" />;
+FullControlOverStylesUsingAFunction.story = {
   name: 'Full control over styles using a function',
   parameters: {
     info: {
@@ -125,8 +125,8 @@ fullControlOverStylesUsingAFunction.story = {
   },
 };
 
-export const useACustomComponentForTheTable = () => <BaseButton label="Button" />;
-useACustomComponentForTheTable.story = {
+export const UseACustomComponentForTheTable = () => <BaseButton label="Button" />;
+UseACustomComponentForTheTable.story = {
   name: 'Use a custom component for the table',
   component: TableComponent,
   parameters: {
@@ -136,22 +136,22 @@ useACustomComponentForTheTable.story = {
   },
 };
 
-export const useInfoAsStoryDecorator = () => <BaseButton label="Button" />;
+export const UseInfoAsStoryDecorator = () => <BaseButton label="Button" />;
 
-useInfoAsStoryDecorator.story = {
+UseInfoAsStoryDecorator.story = {
   name: 'Use Info as story decorator',
   decorators: [withInfo('Info can take options via the global or local decorator as well.')],
 };
 
-export const usingParametersAcrossAllStories = () => <BaseButton label="Button" />;
-usingParametersAcrossAllStories.story = {
+export const UsingParametersAcrossAllStories = () => <BaseButton label="Button" />;
+UsingParametersAcrossAllStories.story = {
   name: 'Using parameters across all stories',
 };
 
-export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
+export const OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
   <BaseButton label="Button" />
 );
-overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
+OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
   name: 'Overwriting and extending the parameters and options set stories-wise',
   parameters: {
     info: {
@@ -161,20 +161,20 @@ overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
   },
 };
 
-export const overwriteTheParametersWithMarkdownVariable = () => (
+export const OverwriteTheParametersWithMarkdownVariable = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-overwriteTheParametersWithMarkdownVariable.story = {
+OverwriteTheParametersWithMarkdownVariable.story = {
   name: 'Overwrite the parameters with markdown variable',
   parameters: { info: markdownDescription },
 };
 
-export const overwriteTheTextParameterWithMarkdownInline = () => (
+export const OverwriteTheTextParameterWithMarkdownInline = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-overwriteTheTextParameterWithMarkdownInline.story = {
+OverwriteTheTextParameterWithMarkdownInline.story = {
   name: 'Overwrite the text parameter with markdown inline',
   parameters: {
     info: {
@@ -189,10 +189,10 @@ overwriteTheTextParameterWithMarkdownInline.story = {
   },
 };
 
-export const disableTheAddonEntirely = () => (
+export const DisableTheAddonEntirely = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
-disableTheAddonEntirely.story = {
+DisableTheAddonEntirely.story = {
   name: 'Disable the addon entirely',
   parameters: { info: { disable: true } },
 };
diff --git a/examples/official-storybook/stories/addon-info/parameters.stories.js b/examples/official-storybook/stories/addon-info/parameters.stories.js
index 257c165f9937..9e36b966b5f7 100644
--- a/examples/official-storybook/stories/addon-info/parameters.stories.js
+++ b/examples/official-storybook/stories/addon-info/parameters.stories.js
@@ -27,15 +27,15 @@ export default {
   },
 };
 
-export const usingParametersAcrossAllStories = () => <BaseButton label="Button" />;
-usingParametersAcrossAllStories.story = {
+export const UsingParametersAcrossAllStories = () => <BaseButton label="Button" />;
+UsingParametersAcrossAllStories.story = {
   name: 'Using parameters across all stories',
 };
 
-export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
+export const OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
   <BaseButton label="Button" />
 );
-overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
+OverwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
   name: 'Overwriting and extending the parameters and options set stories-wise',
   parameters: {
     info: {
@@ -45,18 +45,18 @@ overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
   },
 };
 
-export const overwriteTheParametersWithMarkdownVariable = () => (
+export const OverwriteTheParametersWithMarkdownVariable = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
-overwriteTheParametersWithMarkdownVariable.story = {
+OverwriteTheParametersWithMarkdownVariable.story = {
   name: 'Overwrite the parameters with markdown variable',
   parameters: { info: markdownDescription },
 };
 
-export const overwriteTheTextParameterWithMarkdownInline = () => (
+export const OverwriteTheTextParameterWithMarkdownInline = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
-overwriteTheTextParameterWithMarkdownInline.story = {
+OverwriteTheTextParameterWithMarkdownInline.story = {
   name: 'Overwrite the text parameter with markdown inline',
   parameters: {
     info: {
@@ -71,10 +71,10 @@ overwriteTheTextParameterWithMarkdownInline.story = {
   },
 };
 
-export const disableTheAddonEntirely = () => (
+export const DisableTheAddonEntirely = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
-disableTheAddonEntirely.story = {
+DisableTheAddonEntirely.story = {
   name: 'Disable the addon entirely',
   parameters: { info: { disable: true } },
 };
diff --git a/examples/official-storybook/stories/addon-info/react-docgen.stories.js b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
index bbb6412abeba..deef915f0478 100644
--- a/examples/official-storybook/stories/addon-info/react-docgen.stories.js
+++ b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
@@ -13,7 +13,7 @@ export default {
   decorators: [withInfo],
 };
 
-export const commentsFromPropTypeDeclarations = () => (
+export const CommentsFromPropTypeDeclarations = () => (
   <DocgenButton
     onClick={action('clicked')}
     label="Docgen Button"
@@ -33,7 +33,7 @@ export const commentsFromPropTypeDeclarations = () => (
   />
 );
 
-commentsFromPropTypeDeclarations.story = {
+CommentsFromPropTypeDeclarations.story = {
   name: 'Comments from PropType declarations',
 
   parameters: {
@@ -42,11 +42,11 @@ commentsFromPropTypeDeclarations.story = {
   },
 };
 
-export const commentsFromFlowDeclarations = () => (
+export const CommentsFromFlowDeclarations = () => (
   <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
 );
 
-commentsFromFlowDeclarations.story = {
+CommentsFromFlowDeclarations.story = {
   name: 'Comments from Flow declarations',
 
   parameters: {
@@ -55,11 +55,11 @@ commentsFromFlowDeclarations.story = {
   },
 };
 
-export const commentsFromComponentDeclaration = () => (
+export const CommentsFromComponentDeclaration = () => (
   <BaseButton onClick={action('clicked')} label="Button" />
 );
 
-commentsFromComponentDeclaration.story = {
+CommentsFromComponentDeclaration.story = {
   name: 'Comments from component declaration',
 
   parameters: {
@@ -68,11 +68,11 @@ commentsFromComponentDeclaration.story = {
   },
 };
 
-export const commentsFromNamedExportComponentDeclaration = () => (
+export const CommentsFromNamedExportComponentDeclaration = () => (
   <NamedExportButton onClick={action('clicked')} label="Button" />
 );
 
-commentsFromNamedExportComponentDeclaration.story = {
+CommentsFromNamedExportComponentDeclaration.story = {
   name: 'Comments from named export component declaration',
 
   parameters: {
diff --git a/examples/official-storybook/stories/addon-info/story-source.stories.js b/examples/official-storybook/stories/addon-info/story-source.stories.js
index fb2a42ece90e..8c8f3dd4ec78 100644
--- a/examples/official-storybook/stories/addon-info/story-source.stories.js
+++ b/examples/official-storybook/stories/addon-info/story-source.stories.js
@@ -10,21 +10,21 @@ export default {
   decorators: [withInfo],
 };
 
-export const oneProp = () => <BaseButton label="Button" />;
-oneProp.story = { name: 'One prop' };
+export const OneProp = () => <BaseButton label="Button" />;
+OneProp.story = { name: 'One prop' };
 
-export const manyProps = () => <BaseButton label="Button" onClick={action('clicked')} disabled />;
-manyProps.story = { name: 'Many props' };
+export const ManyProps = () => <BaseButton label="Button" onClick={action('clicked')} disabled />;
+ManyProps.story = { name: 'Many props' };
 
-export const children = () => (
+export const Children = () => (
   <div>
     <p>Here is my nice button:</p>
     <BaseButton label="Button" onClick={action('clicked')} />
   </div>
 );
-children.story = { name: 'Children' };
+Children.story = { name: 'Children' };
 
-export const arrayProp = () => {
+export const ArrayProp = () => {
   const propDefs = [
     {
       property: 'label',
@@ -55,9 +55,9 @@ export const arrayProp = () => {
   ];
   return <TableComponent propDefinitions={propDefs} />;
 };
-arrayProp.story = { name: 'Array prop' };
+ArrayProp.story = { name: 'Array prop' };
 
-export const objectProp = () => (
+export const ObjectProp = () => (
   <BaseButton
     label="Button"
     style={{
@@ -70,4 +70,4 @@ export const objectProp = () => (
     }}
   />
 );
-objectProp.story = { name: 'Object prop' };
+ObjectProp.story = { name: 'Object prop' };
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index b0226b4cd8f2..e488a6e6f75a 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -8,7 +8,7 @@ export default {
   decorators: [withTestsHOC({ results })],
 };
 
-export const withTests = () => <p>Hello</p>;
-withTests.story = {
+export const WithTests = () => <p>Hello</p>;
+WithTests.story = {
   parameters: { jest: 'addon-jest' },
 };
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
index 1a9a5a6d7ba9..478b21d5ef07 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-decorators.stories.js
@@ -4,10 +4,10 @@ export default {
   title: 'Addons/Knobs/with decorators',
 };
 
-export const withDecoratorCallingStoryFunctionMoreThanOnce = () => {
+export const WithDecoratorCallingStoryFunctionMoreThanOnce = () => {
   return text('Text', 'Hello');
 };
-withDecoratorCallingStoryFunctionMoreThanOnce.story = {
+WithDecoratorCallingStoryFunctionMoreThanOnce.story = {
   decorators: [
     withKnobs,
     storyFn => {
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
index d4ee216a4fd4..df29629444bb 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
@@ -10,7 +10,7 @@ export default {
   ],
 };
 
-export const acceptsOptions = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
-acceptsOptions.story = {
+export const AcceptsOptions = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
+AcceptsOptions.story = {
   name: 'accepts options',
 };
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
index c6209f09a214..3a94cd0d34d8 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -14,7 +14,7 @@ import {
   button,
   object,
   files,
-  optionsKnob as options,
+  OptionsKnob as options,
 } from '@storybook/addon-knobs';
 
 const ItemLoader = ({ isLoading, items }) => {
@@ -45,7 +45,7 @@ export default {
   decorators: [withKnobs],
 };
 
-export const tweaksStaticValues = () => {
+export const TweaksStaticValues = () => {
   const name = text('Name', 'Storyteller');
   const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
   const fruits = {
@@ -119,11 +119,11 @@ export const tweaksStaticValues = () => {
     </div>
   );
 };
-tweaksStaticValues.story = {
+TweaksStaticValues.story = {
   name: 'tweaks static values',
 };
 
-export const tweaksStaticValuesOrganizedInGroups = () => {
+export const TweaksStaticValuesOrganizedInGroups = () => {
   const GROUP_IDS = {
     DISPLAY: 'Display',
     GENERAL: 'General',
@@ -206,11 +206,11 @@ export const tweaksStaticValuesOrganizedInGroups = () => {
     </div>
   );
 };
-tweaksStaticValuesOrganizedInGroups.story = {
+TweaksStaticValuesOrganizedInGroups.story = {
   name: 'tweaks static values organized in groups',
 };
 
-export const dynamicKnobs = () => {
+export const DynamicKnobs = () => {
   const showOptional = select('Show optional', ['yes', 'no'], 'yes');
   return (
     <Fragment>
@@ -219,11 +219,11 @@ export const dynamicKnobs = () => {
     </Fragment>
   );
 };
-dynamicKnobs.story = {
+DynamicKnobs.story = {
   name: 'dynamic knobs',
 };
 
-export const complexSelect = () => {
+export const ComplexSelect = () => {
   const m = select(
     'complex',
     {
@@ -243,11 +243,11 @@ export const complexSelect = () => {
     </pre>
   );
 };
-complexSelect.story = {
+ComplexSelect.story = {
   name: 'complex select',
 };
 
-export const optionsKnob = () => {
+export const OptionsKnob = () => {
   const valuesRadio = {
     Monday: 'Monday',
     Tuesday: 'Tuesday',
@@ -322,7 +322,7 @@ export const optionsKnob = () => {
   );
 };
 
-export const triggersActionsViaButton = () => {
+export const TriggersActionsViaButton = () => {
   button('Toggle item list state', () => {
     if (!injectedIsLoading && injectedItems.length === 0) {
       injectedIsLoading = true;
@@ -346,18 +346,18 @@ export const triggersActionsViaButton = () => {
     </Fragment>
   );
 };
-triggersActionsViaButton.story = {
+TriggersActionsViaButton.story = {
   name: 'triggers actions via button',
 };
 
-export const buttonWithReactUseState = () => {
+export const ButtonWithReactUseState = () => {
   const [counter, setCounter] = React.useState(0);
   button('increment', () => setCounter(counter + 1));
   button('decrement', () => setCounter(counter - 1));
   return counter;
 };
 
-export const xssSafety = () => (
+export const XssSafety = () => (
   <div
     // eslint-disable-next-line react/no-danger
     dangerouslySetInnerHTML={{
@@ -365,12 +365,12 @@ export const xssSafety = () => (
     }}
   />
 );
-xssSafety.story = {
+XssSafety.story = {
   name: 'XSS safety',
 };
 
-export const acceptsStoryParameters = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
-acceptsStoryParameters.story = {
+export const AcceptsStoryParameters = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
+AcceptsStoryParameters.story = {
   name: 'accepts story parameters',
 
   parameters: {
@@ -378,7 +378,7 @@ acceptsStoryParameters.story = {
   },
 };
 
-export const withDuplicateDecorator = () => {
+export const WithDuplicateDecorator = () => {
   return text('Text', 'Hello');
 };
-withDuplicateDecorator.story = { decorators: [withKnobs] };
+WithDuplicateDecorator.story = { decorators: [withKnobs] };
diff --git a/examples/official-storybook/stories/addon-links/href.stories.js b/examples/official-storybook/stories/addon-links/href.stories.js
index 98dc6fb4a891..fc2f79bae16b 100644
--- a/examples/official-storybook/stories/addon-links/href.stories.js
+++ b/examples/official-storybook/stories/addon-links/href.stories.js
@@ -6,12 +6,12 @@ export default {
   title: 'Addons/Links/Href',
 };
 
-export const log = () => {
+export const Log = () => {
   hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
 
   return <span>See action logger</span>;
 };
-log.story = {
+Log.story = {
   parameters: {
     options: {
       panel: 'storybook/actions/panel',
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index f6053091f722..b9d05dd35035 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -77,11 +77,11 @@ export default {
   title: 'Addons/Notes',
 };
 
-export const addonNotes = () => (
+export const AddonNotes = () => (
   <BaseButton label="Button with notes - check the notes panel for details" />
 );
 
-addonNotes.story = {
+AddonNotes.story = {
   name: 'addon notes',
   parameters: {
     notes:
@@ -89,44 +89,44 @@ addonNotes.story = {
   },
 };
 
-export const addonNotesRenderingImportedMarkdown = () => (
+export const AddonNotesRenderingImportedMarkdown = () => (
   <BaseButton label="Button with notes - check the notes panel for details" />
 );
 
-addonNotesRenderingImportedMarkdown.story = {
+AddonNotesRenderingImportedMarkdown.story = {
   name: 'addon notes rendering imported markdown',
   parameters: {
     notes: { markdown: markdownNotes },
   },
 };
 
-export const addonNotesRenderingInlineGithubFlavoredMarkdown = () => (
+export const AddonNotesRenderingInlineGithubFlavoredMarkdown = () => (
   <BaseButton label="Button with notes - check the notes panel for details" />
 );
 
-addonNotesRenderingInlineGithubFlavoredMarkdown.story = {
+AddonNotesRenderingInlineGithubFlavoredMarkdown.story = {
   name: 'addon notes rendering inline, github-flavored markdown',
   parameters: {
     notes: { markdown: markdownString },
   },
 };
 
-export const withAMarkdownTable = () => (
+export const WithAMarkdownTable = () => (
   <BaseButton label="Button with notes - check the notes panel for details" />
 );
 
-withAMarkdownTable.story = {
+WithAMarkdownTable.story = {
   name: 'with a markdown table',
   parameters: {
     notes: { markdown: markdownTable },
   },
 };
 
-export const withAMarkdownGiphy = () => (
+export const WithAMarkdownGiphy = () => (
   <BaseButton label="Button with notes - check the notes panel for details" />
 );
 
-withAMarkdownGiphy.story = {
+WithAMarkdownGiphy.story = {
   name: 'with a markdown giphy',
   parameters: {
     notes: { markdown: giphyMarkdown },
diff --git a/examples/official-storybook/stories/addon-options.stories.js b/examples/official-storybook/stories/addon-options.stories.js
index 358abb41b2f6..b8cafe157faf 100644
--- a/examples/official-storybook/stories/addon-options.stories.js
+++ b/examples/official-storybook/stories/addon-options.stories.js
@@ -4,11 +4,11 @@ export default {
   title: 'Addons/Options',
 };
 
-export const settingName = () => (
+export const SettingName = () => (
   <div>This story should have changed the name of the storybook</div>
 );
 
-settingName.story = {
+SettingName.story = {
   name: 'setting name',
 
   parameters: {
@@ -18,11 +18,11 @@ settingName.story = {
   },
 };
 
-export const hidingAddonPanel = () => (
+export const HidingAddonPanel = () => (
   <div>This story should have changed hidden the addons panel</div>
 );
 
-hidingAddonPanel.story = {
+HidingAddonPanel.story = {
   name: 'hiding addon panel',
 
   parameters: {
diff --git a/examples/official-storybook/stories/addon-queryparams.stories.js b/examples/official-storybook/stories/addon-queryparams.stories.js
index 8fe633c230f0..3d5c515fb2ae 100644
--- a/examples/official-storybook/stories/addon-queryparams.stories.js
+++ b/examples/official-storybook/stories/addon-queryparams.stories.js
@@ -13,19 +13,19 @@ export default {
   },
 };
 
-export const mockIsTrue = () => (
+export const MockIsTrue = () => (
   <div>This story should have an extra url query param: {document.location.search}</div>
 );
 
-mockIsTrue.story = {
+MockIsTrue.story = {
   name: 'mock is true',
 };
 
-export const mockIs4 = () => (
+export const MockIs4 = () => (
   <div>This story should have an extra url query param: {document.location.search}</div>
 );
 
-mockIs4.story = {
+MockIs4.story = {
   name: 'mock is 4',
   parameters: { query: { mock: 4 } },
 };
diff --git a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
index aa98e44191f1..b75528e380bc 100644
--- a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
+++ b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
@@ -28,12 +28,12 @@ export const Inherited = () => (
   </Panel>
 );
 
-export const overriddenViaWithViewportParameterizedDecorator = () => (
+export const OverriddenViaWithViewportParameterizedDecorator = () => (
   <Panel>
     I respect my parents but I should be looking good on <b>iPad</b>.
   </Panel>
 );
-overriddenViaWithViewportParameterizedDecorator.story = {
+OverriddenViaWithViewportParameterizedDecorator.story = {
   name: 'Overridden via "withViewport" parameterized decorator',
   parameters: { viewport: { defaultViewport: 'ipad' } },
 };
diff --git a/examples/official-storybook/stories/addon-viewport/default.stories.js b/examples/official-storybook/stories/addon-viewport/default.stories.js
index 945473987ad6..31c43a42c866 100644
--- a/examples/official-storybook/stories/addon-viewport/default.stories.js
+++ b/examples/official-storybook/stories/addon-viewport/default.stories.js
@@ -12,7 +12,7 @@ export default {
     },
   },
 };
-export const defaultFn = () => (
+export const DefaultFn = () => (
   <Panel>I don't have problems being rendered using the default viewport.</Panel>
 );
-defaultFn.story = { name: 'default' };
+DefaultFn.story = { name: 'default' };
diff --git a/examples/official-storybook/stories/core/decorators.stories.js b/examples/official-storybook/stories/core/decorators.stories.js
index be0c8c2071e7..15af07f7bde9 100644
--- a/examples/official-storybook/stories/core/decorators.stories.js
+++ b/examples/official-storybook/stories/core/decorators.stories.js
@@ -26,8 +26,8 @@ export default {
   ],
 };
 
-export const all = () => <p>Story</p>;
-all.story = {
+export const All = () => <p>Story</p>;
+All.story = {
   decorators: [
     s => (
       <>
@@ -38,8 +38,8 @@ all.story = {
   ],
 };
 
-export const deprecated = () => <p>Story</p>;
-deprecated.story = {
+export const Deprecated = () => <p>Story</p>;
+Deprecated.story = {
   parameters: {
     decorators: [
       s => (
diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js
index 54950d178087..00c6c19bf082 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -7,10 +7,10 @@ export default {
   title: 'Core/Errors',
 };
 
-export const exception = () => {
+export const Exception = () => {
   throw new Error('storyFn threw an error! WHOOPS');
 };
-exception.story = {
+Exception.story = {
   name: 'story throws exception',
   parameters: {
     storyshots: { disable: true },
@@ -33,8 +33,8 @@ badComponent.story = {
   },
 };
 
-export const badStory = () => badOutput;
-badStory.story = {
+export const BadStory = () => badOutput;
+BadStory.story = {
   name: 'story errors - story un-renderable type',
   parameters: {
     notes: 'Story does not return something react can render',
diff --git a/examples/official-storybook/stories/core/events.stories.js b/examples/official-storybook/stories/core/events.stories.js
index 4da37afffc0d..7f193d263b39 100644
--- a/examples/official-storybook/stories/core/events.stories.js
+++ b/examples/official-storybook/stories/core/events.stories.js
@@ -13,5 +13,5 @@ export default {
   title: 'Core/Events',
 };
 
-export const force = () => <Button onClick={increment}>Clicked: {timesClicked}</Button>;
-force.story = { name: 'Force re-render' };
+export const Force = () => <Button onClick={increment}>Clicked: {timesClicked}</Button>;
+Force.story = { name: 'Force re-render' };
diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js
index 25c93dadf61b..2afcde8a13ad 100644
--- a/examples/official-storybook/stories/core/parameters.stories.js
+++ b/examples/official-storybook/stories/core/parameters.stories.js
@@ -19,10 +19,10 @@ export default {
 
 // I'm not sure what we should recommend regarding propTypes? are they a good idea for examples?
 // Given we sort of control the props, should we export a prop type?
-export const passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
+export const Passed = ({ parameters: { options, fileName, ...parameters }, ...rest }) => (
   <pre>Parameters: {JSON.stringify(parameters, null, 2)}</pre>
 );
-passed.story = {
+Passed.story = {
   name: 'passed to story',
   parameters: { storyParameter: 'storyParameter' },
 };
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
index 4b619f0af7c0..73b7b4bca47c 100644
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -13,7 +13,7 @@ const Horizontal = styled(props => <Spaced col={1} {...props} />)({
 });
 const Vertical = styled(props => <Spaced row={1} {...props} />)({});
 
-export const story1 = () => (
+export const Story1 = () => (
   <Vertical>
     <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
     <pre style={{ height: '100vh' }}>middle</pre>
@@ -23,9 +23,9 @@ export const story1 = () => (
     </pre>
   </Vertical>
 );
-story1.story = { name: 'story with 100vh padding 1' };
+Story1.story = { name: 'story with 100vh padding 1' };
 
-export const story2 = () => (
+export const Story2 = () => (
   <Vertical>
     <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
     <pre style={{ height: '100vh' }}>middle</pre>
@@ -35,22 +35,22 @@ export const story2 = () => (
     </pre>
   </Vertical>
 );
-story2.story = { name: 'story with 100vh padding 2' };
+Story2.story = { name: 'story with 100vh padding 2' };
 
-export const story3 = () => (
+export const Story3 = () => (
   <Horizontal>
     <pre>START</pre>
     <pre>middle</pre>
     <pre>END</pre>
   </Horizontal>
 );
-story3.story = { name: 'story with 100vw+' };
+Story3.story = { name: 'story with 100vw+' };
 
-export const story4 = () => (
+export const Story4 = () => (
   <Horizontal>
     <pre>START</pre>
     <pre>middle</pre>
     <pre>END</pre>
   </Horizontal>
 );
-story4.story = { name: 'story with 100vw+ 2' };
+Story4.story = { name: 'story with 100vw+ 2' };
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
index ed9e74c27d4c..d641ccae0054 100644
--- a/examples/official-storybook/stories/demo/button.stories.js
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -13,29 +13,29 @@ export default {
   },
 };
 
-export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
-withText.story = {
+export const WithText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+WithText.story = {
   name: 'with text',
 };
 
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
     </span>
   </Button>
 );
-withSomeEmoji.story = {
+WithSomeEmoji.story = {
   name: 'with some emoji',
 };
 
-export const withCounter = () => {
+export const WithCounter = () => {
   const [counter, setCounter] = useState(0);
   const label = `Testing: ${counter}`;
   return <Button onClick={() => setCounter(counter + 1)}>{label}</Button>;
 };
 
-withCounter.story = {
+WithCounter.story = {
   name: 'with counter',
   parameters: {
     docs: {
diff --git a/examples/official-storybook/stories/demo/csf-embedding.test.js b/examples/official-storybook/stories/demo/csf-embedding.test.js
index b5f566e3257e..ba26d54e53d3 100644
--- a/examples/official-storybook/stories/demo/csf-embedding.test.js
+++ b/examples/official-storybook/stories/demo/csf-embedding.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { withText as WithText, withCounter as WithCounter } from './button.stories';
+import { WithText, WithCounter } from './button.stories';
 
 const mockAction = jest.fn();
 jest.mock('@storybook/addon-actions', () => ({
diff --git a/examples/official-storybook/stories/demo/welcome.stories.js b/examples/official-storybook/stories/demo/welcome.stories.js
index b0b56a55bc04..7d13665f6f22 100644
--- a/examples/official-storybook/stories/demo/welcome.stories.js
+++ b/examples/official-storybook/stories/demo/welcome.stories.js
@@ -7,7 +7,7 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
-toStorybook.story = {
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/examples/official-storybook/stories/deprecated/addon-actions.stories.js b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
index 0da9183e3d70..eb04f408d1de 100644
--- a/examples/official-storybook/stories/deprecated/addon-actions.stories.js
+++ b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
@@ -18,10 +18,10 @@ export default {
   title: 'Addons/Actions/deprecated',
 };
 
-export const decoratedAction = () => (
+export const DecoratedAction = () => (
   <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
 );
 
-decoratedAction.story = {
+DecoratedAction.story = {
   name: 'Decorated Action',
 };
diff --git a/examples/official-storybook/stories/deprecated/addon-info.stories.js b/examples/official-storybook/stories/deprecated/addon-info.stories.js
index 4180d2ed88d0..f63fadce4b12 100644
--- a/examples/official-storybook/stories/deprecated/addon-info.stories.js
+++ b/examples/official-storybook/stories/deprecated/addon-info.stories.js
@@ -9,8 +9,8 @@ export default {
   title: 'Addons/Info/deprecated',
 };
 
-export const displaysMarkdown = withInfo(markdownDescription)(() => (
+export const DisplaysMarkdown = withInfo(markdownDescription)(() => (
   <BaseButton onClick={action('clicked')} label="Button" />
 ));
 
-displaysMarkdown.story = { name: 'Displays Markdown in description' };
+DisplaysMarkdown.story = { name: 'Displays Markdown in description' };
diff --git a/examples/official-storybook/stories/hooks.stories.js b/examples/official-storybook/stories/hooks.stories.js
index 3f349858e254..6f705a024982 100644
--- a/examples/official-storybook/stories/hooks.stories.js
+++ b/examples/official-storybook/stories/hooks.stories.js
@@ -20,7 +20,7 @@ export const Input = () => {
   return <input value={text} onChange={e => setText(e.target.value)} />;
 };
 
-export const effect = () => {
+export const Effect = () => {
   const ref = useRef();
   useEffect(() => {
     if (ref.current != null) {
@@ -35,7 +35,7 @@ export const effect = () => {
   );
 };
 
-export const reactHookCheckbox = () => {
+export const ReactHookCheckbox = () => {
   const [on, setOn] = React.useState(false);
   return (
     <label>
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
index f8bb6b119488..256046fd16f9 100644
--- a/examples/polymer-cli/src/stories/addon-actions.stories.js
+++ b/examples/polymer-cli/src/stories/addon-actions.stories.js
@@ -7,22 +7,22 @@ export default {
   title: 'Addon/Actions',
 };
 
-export const actionOnly = () => {
+export const ActionOnly = () => {
   const el = document.createElement('simple-button');
   el.addEventListener('click', action('log1'));
   return el;
 };
 
-actionOnly.story = {
+ActionOnly.story = {
   name: 'Action only',
 };
 
-export const actionAndMethod = () => {
+export const ActionAndMethod = () => {
   const el = document.createElement('simple-button');
   el.addEventListener('click', e => action('log2')(e.target));
   return el;
 };
 
-actionAndMethod.story = {
+ActionAndMethod.story = {
   name: 'Action and method',
 };
diff --git a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
index 9610bc16587d..69e615c5e8fb 100644
--- a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
+++ b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
@@ -9,8 +9,8 @@ export default {
   },
 };
 
-export const buttonWithText = () => '<button>Click me</button>';
+export const ButtonWithText = () => '<button>Click me</button>';
 
-buttonWithText.story = {
+ButtonWithText.story = {
   name: 'button with text',
 };
diff --git a/examples/polymer-cli/src/stories/addon-links.stories.js b/examples/polymer-cli/src/stories/addon-links.stories.js
index 4af90cc1030c..abf5e3e367cf 100644
--- a/examples/polymer-cli/src/stories/addon-links.stories.js
+++ b/examples/polymer-cli/src/stories/addon-links.stories.js
@@ -7,13 +7,13 @@ export default {
   title: 'Addon/Links',
 };
 
-export const withCreateElement = () => {
+export const WithCreateElement = () => {
   const el = document.createElement('simple-button');
   el.title = 'Go to welcome';
   el.handleClick = linkTo('Welcome');
   return el;
 };
 
-withCreateElement.story = {
+WithCreateElement.story = {
   name: 'With Create Element',
 };
diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js
index ea11b37cfc4b..c86773f8343d 100644
--- a/examples/polymer-cli/src/stories/addon-notes.stories.js
+++ b/examples/polymer-cli/src/stories/addon-notes.stories.js
@@ -2,19 +2,19 @@ export default {
   title: 'Addon/Notes',
 };
 
-export const simpleNote = () =>
+export const SimpleNote = () =>
   '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>';
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: {
     notes: 'My notes on some bold text',
   },
 };
 
-export const noteWithHtml = () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>';
+export const NoteWithHtml = () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>';
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
   parameters: {
     notes: `
diff --git a/examples/polymer-cli/src/stories/components/app.stories.js b/examples/polymer-cli/src/stories/components/app.stories.js
index 95173e6dc762..ca95c2f09541 100644
--- a/examples/polymer-cli/src/stories/components/app.stories.js
+++ b/examples/polymer-cli/src/stories/components/app.stories.js
@@ -4,8 +4,8 @@ export default {
   title: 'App',
 };
 
-export const fullApp = () =>
+export const FullApp = () =>
   '<polymer-playground-app title="Storybook for Polymer"></polymer-playground-app>';
-fullApp.story = {
+FullApp.story = {
   name: 'full app',
 };
diff --git a/examples/polymer-cli/src/stories/components/button.stories.js b/examples/polymer-cli/src/stories/components/button.stories.js
index bbea3969239e..7f460b7d76db 100644
--- a/examples/polymer-cli/src/stories/components/button.stories.js
+++ b/examples/polymer-cli/src/stories/components/button.stories.js
@@ -4,5 +4,5 @@ export default {
   title: 'Button',
 };
 
-export const rounded = () => '<playground-button></playground-button>';
-export const square = () => '<playground-button is-square></playground-button>';
+export const Rounded = () => '<playground-button></playground-button>';
+export const Square = () => '<playground-button is-square></playground-button>';
diff --git a/examples/polymer-cli/src/stories/core.stories.js b/examples/polymer-cli/src/stories/core.stories.js
index 5a84645bb6dc..efa4e34b119c 100644
--- a/examples/polymer-cli/src/stories/core.stories.js
+++ b/examples/polymer-cli/src/stories/core.stories.js
@@ -14,10 +14,10 @@ export default {
   },
 };
 
-export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+export const PassedToStory = ({ parameters: { fileName, ...parameters } }) =>
   `<div>Parameters are ${JSON.stringify(parameters)}</div>`;
 
-passedToStory.story = {
+PassedToStory.story = {
   name: 'passed to story',
 
   parameters: {
diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js
index fadc6c47caed..d3d7b475d09c 100644
--- a/examples/polymer-cli/src/stories/custom-decorators.stories.js
+++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js
@@ -12,12 +12,12 @@ export default {
   ],
 };
 
-export const exampleDecoration = () => {
+export const ExampleDecoration = () => {
   const el = document.createElement('playground-button');
   el.setAttribute('title', 'An example title');
   return el;
 };
 
-exampleDecoration.story = {
+ExampleDecoration.story = {
   name: 'example decoration',
 };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
index da91db540836..39705549882e 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
@@ -9,31 +9,31 @@ export default {
   title: 'Addons/Actions',
 };
 
-export const actionOnly = () => <Button onclick={action('log')}>Click me to log the action</Button>;
+export const ActionOnly = () => <Button onclick={action('log')}>Click me to log the action</Button>;
 
-actionOnly.story = {
+ActionOnly.story = {
   name: 'Action only',
 };
 
-export const multipleActions = () => (
+export const MultipleActions = () => (
   <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
 );
 
-multipleActions.story = {
+MultipleActions.story = {
   name: 'Multiple actions',
 };
 
-export const multipleActionsObject = () => (
+export const MultipleActionsObject = () => (
   <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
     (Double) click me to log the action
   </Button>
 );
 
-multipleActionsObject.story = {
+MultipleActionsObject.story = {
   name: 'Multiple actions, object',
 };
 
-export const actionAndMethod = () => (
+export const ActionAndMethod = () => (
   <Button
     onclick={event => {
       event.preventDefault();
@@ -44,6 +44,6 @@ export const actionAndMethod = () => (
   </Button>
 );
 
-actionAndMethod.story = {
+ActionAndMethod.story = {
   name: 'Action and method',
 };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 960ee54461fe..49db337988d8 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -15,16 +15,16 @@ export default {
   },
 };
 
-export const example1 = () => (
+export const Example1 = () => (
   <Button>You should be able to switch backgrounds for this story</Button>
 );
 
-example1.story = {
+Example1.story = {
   name: 'Example 1',
 };
 
-export const example2 = () => <Button>This one too!</Button>;
+export const Example2 = () => <Button>This one too!</Button>;
 
-example2.story = {
+Example2.story = {
   name: 'Example 2',
 };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
index 445148b61c59..f310300239ce 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -45,11 +45,11 @@ export default {
   decorators: [withContexts(topLevelContexts)],
 };
 
-export const simpleCssTheming = () => (
+export const SimpleCssTheming = () => (
   <div>I'm a children of the injected 'div' (where provides a theming context).</div>
 );
 
-simpleCssTheming.story = {
+SimpleCssTheming.story = {
   name: 'Simple CSS Theming',
 
   parameters: {
diff --git a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
index 330c3a8f56b1..8007e50bf1c8 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -28,7 +28,7 @@ export const Simple = () => {
   return <div>{content}</div>;
 };
 
-export const allKnobs = () => {
+export const AllKnobs = () => {
   const name = text('Name', 'Jane');
   const stock = number('Stock', 20, {
     range: true,
@@ -73,6 +73,6 @@ export const allKnobs = () => {
   );
 };
 
-allKnobs.story = {
+AllKnobs.story = {
   name: 'All knobs',
 };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
index b138b207a602..e36cdceeed35 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
@@ -10,10 +10,10 @@ export default {
   title: 'Addons/Links',
 };
 
-export const goToWelcome = () => (
+export const GoToWelcome = () => (
   <Button onclick={linkTo('Welcome')}>This button links to Welcome</Button>
 );
 
-goToWelcome.story = {
+GoToWelcome.story = {
   name: 'Go to welcome',
 };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
index 14d3bf9feea4..9f5b05b996b6 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
@@ -9,7 +9,7 @@ export default {
   decorators: [withNotes],
 };
 
-export const simpleNote = () => (
+export const SimpleNote = () => (
   <p>
     <strong>
       Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
@@ -22,12 +22,12 @@ export const simpleNote = () => (
   </p>
 );
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on some bold text' },
 };
 
-export const noteWithHtml = () => (
+export const NoteWithHtml = () => (
   <p>
     <span>🤔😳😯😮</span>
     <br />
@@ -37,7 +37,7 @@ export const noteWithHtml = () => (
   </p>
 );
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
 
   parameters: {
diff --git a/examples/preact-kitchen-sink/src/stories/button.stories.js b/examples/preact-kitchen-sink/src/stories/button.stories.js
index 0cac539b8ece..8bdbbad0b384 100644
--- a/examples/preact-kitchen-sink/src/stories/button.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/button.stories.js
@@ -10,13 +10,13 @@ export default {
   component: Button,
 };
 
-export const withText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
+export const WithText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
 
-withText.story = {
+WithText.story = {
   name: 'with text',
 };
 
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
   <Button onclick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
@@ -24,6 +24,6 @@ export const withSomeEmoji = () => (
   </Button>
 );
 
-withSomeEmoji.story = {
+WithSomeEmoji.story = {
   name: 'with some emoji',
 };
diff --git a/examples/preact-kitchen-sink/src/stories/welcome.stories.js b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
index 1a996cfe809b..db0487bfc335 100644
--- a/examples/preact-kitchen-sink/src/stories/welcome.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
@@ -12,8 +12,8 @@ export default {
   },
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
index 43e25ed67eda..49b953eff4f1 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
@@ -9,22 +9,22 @@ export default {
   decorators: [withA11Y],
 };
 
-export const basic = () => <Text>RAX TEXT NODE</Text>;
+export const Basic = () => <Text>RAX TEXT NODE</Text>;
 
-basic.story = {
+Basic.story = {
   parameters: { notes: 'super awesome note' },
 };
 
-export const withStyle = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
+export const WithStyle = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
 
-withStyle.story = {
+WithStyle.story = {
   name: 'with style',
   parameters: {
     notes: ' this is a note with emojis 🚀🚀🚀🚀🚀',
   },
 };
 
-export const withMarkdown = () => (
+export const WithMarkdown = () => (
   <button type="button">
     &nbsp;
     <Text id="text1">😀 😎 👍 💯</Text>
@@ -35,7 +35,7 @@ export const withMarkdown = () => (
   </button>
 );
 
-withMarkdown.story = {
+WithMarkdown.story = {
   name: 'with markdown',
   parameters: {
     notes: {
diff --git a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
index 00496f4718ea..28ff6fbd609c 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
@@ -7,17 +7,17 @@ export default {
   title: 'Addon/addon-actions',
 };
 
-export const withText = () => (
+export const WithText = () => (
   <button onClick={action('clicked')} type="button">
     Hello Button
   </button>
 );
 
-withText.story = {
+WithText.story = {
   name: 'with text',
 };
 
-export const withSomeEmoji = () => (
+export const WithSomeEmoji = () => (
   <button onClick={action('clicked')} type="button">
     <Text role="img" aria-label="so cool">
       😀 😎 👍 💯
@@ -25,6 +25,6 @@ export const withSomeEmoji = () => (
   </button>
 );
 
-withSomeEmoji.story = {
+WithSomeEmoji.story = {
   name: 'with some emoji',
 };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
index 2e0eebf13051..8c72523e63f3 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
@@ -8,12 +8,12 @@ export default {
   decorators: [Centered],
 };
 
-export const button = () => (
-  <button type="button">
+export const Button = () => (
+  <Button type="button">
     <Text>BUTTON</Text>
-  </button>
+  </Button>
 );
-button.story = { name: 'Button' };
+Button.story = { name: 'Button' };
 
 export const app = () => <App />;
 app.story = { name: 'App' };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
index 2775c44adf57..ffeb0093657c 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -8,7 +8,7 @@ export default {
   decorators: [withKnobs],
 };
 
-export const withAButton = () => {
+export const WithAButton = () => {
   const disabled = boolean('Disabled', false);
   const hasStyle = boolean('Has Style', false);
   const style = hasStyle
@@ -34,11 +34,11 @@ export const withAButton = () => {
   );
 };
 
-withAButton.story = {
+WithAButton.story = {
   name: 'with a button',
 };
 
-export const asDynamicVariables = () => {
+export const AsDynamicVariables = () => {
   const name = text('Name', 'Benjamin Button');
   const age = number('Age', 89);
 
@@ -46,6 +46,6 @@ export const asDynamicVariables = () => {
   return <Text>{content}</Text>;
 };
 
-asDynamicVariables.story = {
+AsDynamicVariables.story = {
   name: 'as dynamic variables',
 };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
index b4b4c85dca13..dfdbf8b90f62 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
@@ -8,24 +8,24 @@ export default {
   decorators: [withNotes],
 };
 
-export const basic = () => <Text>RAX TEXT NODE</Text>;
+export const Basic = () => <Text>RAX TEXT NODE</Text>;
 
-basic.story = {
+Basic.story = {
   parameters: { notes: 'super awesome note' },
 };
 
-export const withEmojies = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
+export const WithEmojies = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
 
-withEmojies.story = {
+WithEmojies.story = {
   name: 'with emojies',
   parameters: {
     notes: ' this is a note with emojies 🚀🚀🚀🚀🚀',
   },
 };
 
-export const withMarkdown = () => <Text>😀 😎 👍 💯</Text>;
+export const WithMarkdown = () => <Text>😀 😎 👍 💯</Text>;
 
-withMarkdown.story = {
+WithMarkdown.story = {
   name: 'with markdown',
   parameters: {
     notes: {
diff --git a/examples/rax-kitchen-sink/src/stories/index.stories.js b/examples/rax-kitchen-sink/src/stories/index.stories.js
index 793c7ddc5eeb..1d5ab0e256ff 100644
--- a/examples/rax-kitchen-sink/src/stories/index.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/index.stories.js
@@ -7,8 +7,8 @@ export default {
   title: 'Basic',
 };
 
-export const welcomeScreen = () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />;
-welcomeScreen.story = {
+export const WelcomeScreen = () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />;
+WelcomeScreen.story = {
   name: 'Welcome screen',
 };
 
diff --git a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
index 2a2966ca1c7f..cf8196fda117 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
@@ -8,22 +8,22 @@ export default {
   title: 'Addon/Actions',
 };
 
-export const actionOnly = () =>
+export const ActionOnly = () =>
   mount('my-button', {
     handleClick: action('button-click'),
     content: 'Click me to log the action',
   });
 
-actionOnly.story = {
+ActionOnly.story = {
   name: 'Action only',
 };
 
-export const multipleActions = () =>
+export const MultipleActions = () =>
   mount('my-button', {
     handleDblClick: action('button-double-click'),
     content: 'Double Click me to log the action',
   });
 
-multipleActions.story = {
+MultipleActions.story = {
   name: 'Multiple actions',
 };
diff --git a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 9c5ba032ab47..6b18ecddfb36 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -10,7 +10,7 @@ export default {
   },
 };
 
-export const story1 = () => {
+export const Story1 = () => {
   const content = 'You should be able to switch backgrounds for this story';
 
   return {
@@ -19,11 +19,11 @@ export const story1 = () => {
   };
 };
 
-story1.story = {
+Story1.story = {
   name: 'story 1',
 };
 
-export const story2 = () => {
+export const Story2 = () => {
   const content = 'This one too!';
 
   return {
@@ -32,6 +32,6 @@ export const story2 = () => {
   };
 };
 
-story2.story = {
+Story2.story = {
   name: 'story 2',
 };
diff --git a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
index de49663bb517..6d754a7af993 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -26,7 +26,7 @@ export const Simple = () => {
   };
 };
 
-export const allKnobs = () => {
+export const AllKnobs = () => {
   const name = text('Name', 'Jane');
   const stock = number('Stock', 20, {
     range: true,
@@ -73,11 +73,11 @@ export const allKnobs = () => {
   };
 };
 
-allKnobs.story = {
+AllKnobs.story = {
   name: 'All knobs',
 };
 
-export const xssSafety = () => ({
+export const XssSafety = () => ({
   tags: [
     `
       <div>
@@ -87,6 +87,6 @@ export const xssSafety = () => ({
   ],
 });
 
-xssSafety.story = {
+XssSafety.story = {
   name: 'XSS safety',
 };
diff --git a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
index a372d6a5b468..1f2cd6303566 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
@@ -8,7 +8,7 @@ export default {
   title: 'Addon/Links',
 };
 
-export const goToWelcome = () =>
+export const GoToWelcome = () =>
   mount('my-button', {
     rounded: true,
     content: 'This button links to Welcome',
@@ -16,6 +16,6 @@ export const goToWelcome = () =>
     handleClick: linkTo('Welcome', 'Welcome'),
   });
 
-goToWelcome.story = {
+GoToWelcome.story = {
   name: 'Go to welcome',
 };
diff --git a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
index 1b20fdc48302..cd8f2ad23633 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
@@ -2,22 +2,22 @@ export default {
   title: 'Addon/Notes',
 };
 
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
   tags: [
     '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
   ],
 });
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on some bold text' },
 };
 
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
   tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
 });
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
   parameters: {
     notes: `
diff --git a/examples/riot-kitchen-sink/src/stories/core.stories.js b/examples/riot-kitchen-sink/src/stories/core.stories.js
index f34fbb367797..769fe3c29830 100644
--- a/examples/riot-kitchen-sink/src/stories/core.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/core.stories.js
@@ -15,9 +15,9 @@ export default {
   },
 };
 
-export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+export const PassedToStory = ({ parameters: { fileName, ...parameters } }) =>
   mount('parameters', { ...parameters, storyParameter });
 
-passedToStory.story = {
+PassedToStory.story = {
   name: 'passed to story',
 };
diff --git a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
index f6180cb8689e..ab021ebbb888 100644
--- a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
@@ -8,7 +8,7 @@ export default {
   title: 'Story/Nest tags',
 };
 
-export const threeTags = () => ({
+export const ThreeTags = () => ({
   tags: [
     '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
     '<PageHeader><h1><yield/></h1></PageHeader>',
@@ -16,7 +16,7 @@ export const threeTags = () => ({
   ],
 });
 
-threeTags.story = {
+ThreeTags.story = {
   name: 'Three tags',
 };
 
diff --git a/examples/riot-kitchen-sink/src/stories/story-code.stories.js b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
index 49a3ab6e535c..7a06796e7cd9 100644
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@@ -8,33 +8,33 @@ export default {
   title: 'Story/How to create a story',
 };
 
-export const builtWithTag = () =>
+export const BuiltWithTag = () =>
   tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
   mount('test', { value: 'with a parameter' });
 
-builtWithTag.story = {
+BuiltWithTag.story = {
   name: 'built with tag',
 };
 
-export const builtAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
+export const BuiltAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
 
-builtAsString.story = {
+BuiltAsString.story = {
   name: 'built as string',
 };
 
-export const builtFromRawImport = () => simpleTestCompiled;
+export const BuiltFromRawImport = () => simpleTestCompiled;
 
-builtFromRawImport.story = {
+BuiltFromRawImport.story = {
   name: 'built from raw import',
 };
 
-export const builtFromTagsAndTemplate = () => ({
+export const BuiltFromTagsAndTemplate = () => ({
   tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
   template:
     '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
 });
 
-builtFromTagsAndTemplate.story = {
+BuiltFromTagsAndTemplate.story = {
   name: 'built from tags and template',
   parameters: {
     notes:
@@ -42,7 +42,7 @@ builtFromTagsAndTemplate.story = {
   },
 };
 
-export const tagsTemplateAndTagConstructorAtOnce = () => ({
+export const TagsTemplateAndTagConstructorAtOnce = () => ({
   tags: [
     {
       content:
@@ -57,27 +57,27 @@ export const tagsTemplateAndTagConstructorAtOnce = () => ({
   },
 });
 
-tagsTemplateAndTagConstructorAtOnce.story = {
+TagsTemplateAndTagConstructorAtOnce.story = {
   name: 'tags, template and tagConstructor at once',
 };
 
-export const builtFromThePrecompilation = () => mount('anothertest', {});
+export const BuiltFromThePrecompilation = () => mount('anothertest', {});
 
-builtFromThePrecompilation.story = {
+BuiltFromThePrecompilation.story = {
   name: 'built from the precompilation',
   parameters: {
     notes: 'WARN, only works in lower case, never upper case with precompiled templates',
   },
 };
 
-export const theMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
+export const TheMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
 
-theMountInstructionIsNotNecessary.story = {
+TheMountInstructionIsNotNecessary.story = {
   name: 'the mount instruction is not necessary',
 };
 
-export const theOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
+export const TheOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
 
-theOptsValueIsNotNecessary.story = {
+TheOptsValueIsNotNecessary.story = {
   name: 'the opts value is not necessary',
 };
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
index 677b5b946151..1a4ef7f86ee0 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
@@ -7,18 +7,18 @@ export default {
   title: 'Addon/Actions',
 };
 
-export const actionOnViewMethod = () => ({
+export const ActionOnViewMethod = () => ({
   Component: ButtonView,
   props: {
     click: action('I am logging in the actions tab'),
   },
 });
 
-actionOnViewMethod.story = {
+ActionOnViewMethod.story = {
   name: 'Action on view method',
 };
 
-export const actionOnComponentMethod = () => ({
+export const ActionOnComponentMethod = () => ({
   Component: Button,
   props: {
     text: 'Custom text',
@@ -28,6 +28,6 @@ export const actionOnComponentMethod = () => ({
   },
 });
 
-actionOnComponentMethod.story = {
+ActionOnComponentMethod.story = {
   name: 'Action on component method',
 };
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 0775af134557..cb1cf1104976 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -10,10 +10,10 @@ export default {
   },
 };
 
-export const story1 = () => ({
+export const Story1 = () => ({
   Component: ButtonView,
 });
 
-story1.story = {
+Story1.story = {
   name: 'story 1',
 };
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 0483e8a474ad..5f3ea64f5954 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
@@ -9,7 +9,7 @@ export default {
   decorators: [Centered],
 };
 
-export const rounded = () => ({
+export const Rounded = () => ({
   Component: Button,
   props: {
     rounded: true,
@@ -17,13 +17,13 @@ export const rounded = () => ({
   },
 });
 
-export const withAction = () => ({
+export const WithAction = () => ({
   Component: Button,
   on: {
     click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
   },
 });
 
-withAction.story = {
+WithAction.story = {
   name: 'with action',
 };
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
index ca32c056211f..f30478f8cd7a 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
@@ -6,13 +6,13 @@ export default {
   title: 'Addon/Links',
 };
 
-export const goToWelcomeView = () => ({
+export const GoToWelcomeView = () => ({
   Component: ActionLinkView,
   on: {
     click: linkTo('Welcome'),
   },
 });
 
-goToWelcomeView.story = {
+GoToWelcomeView.story = {
   name: 'Go to welcome view',
 };
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
index c998d5c1096b..220ac04ad61e 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
@@ -4,23 +4,23 @@ export default {
   title: 'Addon/Notes',
 };
 
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
   Component: ButtonView,
 });
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' },
 };
 
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
   Component: ButtonView,
   props: {
     text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
   },
 });
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
   parameters: {
     notes: `
diff --git a/examples/svelte-kitchen-sink/src/stories/button.stories.js b/examples/svelte-kitchen-sink/src/stories/button.stories.js
index a68a4d865b13..af0b416d9c25 100644
--- a/examples/svelte-kitchen-sink/src/stories/button.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/button.stories.js
@@ -4,7 +4,7 @@ export default {
   title: 'Button',
 };
 
-export const rounded = () => ({
+export const Rounded = () => ({
   Component: ButtonView,
   props: {
     rounded: true,
@@ -12,7 +12,7 @@ export const rounded = () => ({
   },
 });
 
-export const square = () => ({
+export const Square = () => ({
   Component: ButtonView,
   props: {
     rounded: false,
diff --git a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
index a114a82731eb..1cd29f08fd90 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
@@ -4,38 +4,38 @@ export default {
   title: 'Addon/Actions',
 };
 
-export const actionOnly = () => ({
+export const ActionOnly = () => ({
   template: '<my-button @click="log">Click me to log the action</my-button>',
   methods: {
     log: action('log1'),
   },
 });
 
-actionOnly.story = {
+ActionOnly.story = {
   name: 'Action only',
 };
 
-export const multipleActions = () => ({
+export const MultipleActions = () => ({
   template:
     '<my-button @click="click" @double-click="doubleclick">(Double) click me to log the action</my-button>',
   methods: actions('click', 'doubleclick'),
 });
 
-multipleActions.story = {
+MultipleActions.story = {
   name: 'Multiple actions',
 };
 
-export const multipleActionsObject = () => ({
+export const MultipleActionsObject = () => ({
   template:
     '<my-button @click="click" @double-click="doubleclick">(Double) click me to log the action</my-button>',
   methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
 });
 
-multipleActionsObject.story = {
+MultipleActionsObject.story = {
   name: 'Multiple actions, object',
 };
 
-export const actionAndMethod = () => ({
+export const ActionAndMethod = () => ({
   template: '<my-button @click="log">Click me to log the action</my-button>',
   methods: {
     log: e => {
@@ -45,6 +45,6 @@ export const actionAndMethod = () => ({
   },
 });
 
-actionAndMethod.story = {
+ActionAndMethod.story = {
   name: 'Action and method',
 };
diff --git a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
index edc6d5028317..1d5ac7f8b103 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -8,7 +8,7 @@ export default {
   },
 };
 
-export const story1 = () => {
+export const Story1 = () => {
   const content = 'You should be able to switch backgrounds for this story';
 
   return {
@@ -16,11 +16,11 @@ export const story1 = () => {
   };
 };
 
-story1.story = {
+Story1.story = {
   name: 'story 1',
 };
 
-export const story2 = () => {
+export const Story2 = () => {
   const content = 'This one too!';
 
   return {
@@ -28,6 +28,6 @@ export const story2 = () => {
   };
 };
 
-story2.story = {
+Story2.story = {
   name: 'story 2',
 };
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 806065382181..3731b6be3a4c 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -8,7 +8,7 @@ export default {
   decorators: [Centered],
 };
 
-export const rounded = () => ({
+export const Rounded = () => ({
   components: { MyButton },
   template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
 });
diff --git a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
index 919487510722..744bb725f438 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -43,11 +43,11 @@ export default {
   decorators: [withContexts(topLevelContexts)],
 };
 
-export const simpleCssTheming = () => ({
+export const SimpleCssTheming = () => ({
   template: "<span>I'm a children of the injected 'div' (where provides a theming context).</span>",
 });
 
-simpleCssTheming.story = {
+SimpleCssTheming.story = {
   name: 'Simple CSS Theming',
   parameters: {
     contexts: storyLevelContexts,
diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
index 79f6c67f3e97..e1993bf7ac87 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -39,7 +39,7 @@ export const Simple = () => ({
   },
 });
 
-export const allKnobs = () => {
+export const AllKnobs = () => {
   const fruits = {
     Apple: 'apples',
     Banana: 'bananas',
@@ -104,17 +104,17 @@ export const allKnobs = () => {
   };
 };
 
-allKnobs.story = {
+AllKnobs.story = {
   name: 'All knobs',
 };
 
-export const xssSafety = () => ({
+export const XssSafety = () => ({
   props: {
     text: { default: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >') },
   },
   template: '<div v-html="text"></div>',
 });
 
-xssSafety.story = {
+XssSafety.story = {
   name: 'XSS safety',
 };
diff --git a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
index 6ad80aeb3c76..a0ea152465a6 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
@@ -4,13 +4,13 @@ export default {
   title: 'Addon/Links',
 };
 
-export const goToWelcome = () => ({
+export const GoToWelcome = () => ({
   template: '<my-button :rounded="true" @click="click" >This buttons links to Welcome</my-button>',
   methods: {
     click: linkTo('Welcome'),
   },
 });
 
-goToWelcome.story = {
+GoToWelcome.story = {
   name: 'Go to welcome',
 };
diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
index 70a17d3e8254..809d459a88ca 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
@@ -2,21 +2,21 @@ export default {
   title: 'Addon/Notes',
 };
 
-export const simpleNote = () => ({
+export const SimpleNote = () => ({
   template:
     '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
 });
 
-simpleNote.story = {
+SimpleNote.story = {
   name: 'Simple note',
   parameters: { notes: 'My notes on some bold text' },
 };
 
-export const noteWithHtml = () => ({
+export const NoteWithHtml = () => ({
   template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
 });
 
-noteWithHtml.story = {
+NoteWithHtml.story = {
   name: 'Note with HTML',
 
   parameters: {
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
index 4bbbe2ba50a2..13b3ff4eb0be 100644
--- a/examples/vue-kitchen-sink/src/stories/components/button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -5,12 +5,12 @@ export default {
   component: MyButton,
 };
 
-export const rounded = () => ({
+export const Rounded = () => ({
   components: { MyButton },
   template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
 });
 
-export const square = () => ({
+export const Square = () => ({
   components: { MyButton },
   template: '<my-button :rounded="false">A Button with square edges</my-button>',
 });
diff --git a/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js b/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js
index fb62af728e0b..fba6f26201ec 100644
--- a/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/components/info-button.stories.js
@@ -5,7 +5,7 @@ export default {
   component: InfoButton,
 };
 
-export const simple = () => ({
+export const Simple = () => ({
   components: { InfoButton },
   template: '<info-button label="I\'m a button!"/>',
 });
diff --git a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
index a1c0d9973f65..719a72a1a8dd 100644
--- a/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-errors.stories.js
@@ -2,9 +2,9 @@ export default {
   title: 'Core/Errors',
 };
 
-export const throwsError = () => {
+export const ThrowsError = () => {
   throw new Error('foo');
 };
-throwsError.story = { parameters: { storyshots: { disable: true } } };
+ThrowsError.story = { parameters: { storyshots: { disable: true } } };
 
-export const nullError = () => null;
+export const NullError = () => null;
diff --git a/examples/vue-kitchen-sink/src/stories/core-template.stories.js b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
index 3a18393d907f..51168bb7673e 100644
--- a/examples/vue-kitchen-sink/src/stories/core-template.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
@@ -2,9 +2,9 @@ export default {
   title: 'Core/Template',
 };
 
-export const stringOnly = () =>
+export const StringOnly = () =>
   '<my-button :rounded="false">A Button with square edges</my-button>';
 
-stringOnly.story = {
+StringOnly.story = {
   name: 'string only',
 };
diff --git a/examples/vue-kitchen-sink/src/stories/core.stories.js b/examples/vue-kitchen-sink/src/stories/core.stories.js
index 8876d7bc2e85..fbb1f7942bef 100644
--- a/examples/vue-kitchen-sink/src/stories/core.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core.stories.js
@@ -13,11 +13,11 @@ export default {
   },
 };
 
-export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
+export const PassedToStory = ({ parameters: { fileName, ...parameters } }) => ({
   template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
 });
 
-passedToStory.story = {
+PassedToStory.story = {
   name: 'passed to story',
 
   parameters: {
diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
index cf923e501360..0fbdfc039b39 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -26,15 +26,15 @@ export default {
   ],
 };
 
-export const template = () => ({
+export const Template = () => ({
   template: '<my-button>MyButton with template</my-button>',
 });
 
-export const withData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
+export const WithData = ({ parameters: { fileName, ...parameters }, hooks, ...rest }) => ({
   template: `<pre v-pre>${JSON.stringify({ ...rest, parameters }, null, 2)}</pre>`,
 });
 
-export const render = () => ({
+export const Render = () => ({
   render(h) {
     return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
   },
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
index 9ecdc5222b6c..181b1036612a 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -8,21 +8,21 @@ export default {
   title: 'Custom/Method for rendering Vue',
 };
 
-export const render = () => ({
+export const Render = () => ({
   render: h => h('div', ['renders a div with some text in it..']),
 });
 
-export const renderComponent = () => ({
+export const RenderComponent = () => ({
   render(h) {
     return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
   },
 });
 
-renderComponent.story = {
+RenderComponent.story = {
   name: 'render + component',
 };
 
-export const template = () => ({
+export const Template = () => ({
   template: `
       <div>
         <h1>A template</h1>
@@ -30,16 +30,16 @@ export const template = () => ({
       </div>`,
 });
 
-export const templateComponent = () => ({
+export const TemplateComponent = () => ({
   components: { MyButton },
   template: '<my-button>MyButton rendered in a template</my-button>',
 });
 
-templateComponent.story = {
+TemplateComponent.story = {
   name: 'template + component',
 };
 
-export const templateMethods = () => ({
+export const TemplateMethods = () => ({
   components: { MyButton },
   template: `
       <p>
@@ -51,7 +51,7 @@ export const templateMethods = () => ({
   },
 });
 
-templateMethods.story = {
+TemplateMethods.story = {
   name: 'template + methods',
 };
 
@@ -63,7 +63,7 @@ export const JSX = () => ({
   },
 });
 
-export const vuexActions = () => ({
+export const VuexActions = () => ({
   components: { MyButton },
   template: '<my-button @click="log">with vuex: {{ $store.state.count }}</my-button>',
   store: new Vuex.Store({
@@ -82,11 +82,11 @@ export const vuexActions = () => ({
   },
 });
 
-vuexActions.story = {
+VuexActions.story = {
   name: 'vuex + actions',
 };
 
-export const whateverYouWant = () => ({
+export const WhateverYouWant = () => ({
   components: { MyButton },
   template: '<my-button @click="log">with awesomeness: {{ $store.state.count }}</my-button>',
   store: new Vuex.Store({
@@ -105,11 +105,11 @@ export const whateverYouWant = () => ({
   },
 });
 
-whateverYouWant.story = {
+WhateverYouWant.story = {
   name: 'whatever you want',
 };
 
-export const preRegisteredComponent = () => ({
+export const PreRegisteredComponent = () => ({
   /* By pre-registering component in config.js,
    * the need to register all components with each story is removed.
    * You'll only need the template */
@@ -120,6 +120,6 @@ export const preRegisteredComponent = () => ({
       </p>`,
 });
 
-preRegisteredComponent.story = {
+PreRegisteredComponent.story = {
   name: 'pre-registered component',
 };
diff --git a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
index 385bcfa94dad..ebbacd65298f 100644
--- a/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-a11y.stories.js
@@ -21,16 +21,16 @@ export const Label = () => html`
 export const Disabled = () => html`
   <button disabled>${text}</button>
 `;
-export const story4 = () => html`
+export const Story4 = () => html`
   <button style="color: black; background-color: brown;">${text}</button>
 `;
-story4.story = { name: 'Invalid contrast' };
+Story4.story = { name: 'Invalid contrast' };
 
-export const story5 = () => {
+export const Story5 = () => {
   const div = document.createElement('div');
   setTimeout(() => {
     div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
   }, 1000);
   return div;
 };
-story5.story = { name: 'Delayed render' };
+Story5.story = { name: 'Delayed render' };
diff --git a/examples/web-components-kitchen-sink/stories/addon-actions.stories.js b/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
index 5f90a8686268..0831b7ab632a 100644
--- a/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-actions.stories.js
@@ -11,19 +11,19 @@ export default {
   title: 'Addons/Actions',
 };
 
-export const story1 = () => withActions('click')(button);
-story1.story = { name: 'Hello World' };
-export const story2 = () => withActions('click', 'contextmenu')(button);
-story2.story = { name: 'Multiple actions' };
+export const Story1 = () => withActions('click')(button);
+Story1.story = { name: 'Hello World' };
+export const Story2 = () => withActions('click', 'contextmenu')(button);
+Story2.story = { name: 'Multiple actions' };
 
-export const story3 = () =>
+export const Story3 = () =>
   withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story3.story = { name: 'Multiple actions + config' };
+Story3.story = { name: 'Multiple actions + config' };
 
-export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
-story4.story = { name: 'Multiple actions, object' };
+export const Story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+Story4.story = { name: 'Multiple actions, object' };
 
-export const story5 = () =>
+export const Story5 = () =>
   withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
     () => html`
       <div>
@@ -31,18 +31,18 @@ export const story5 = () =>
       </div>
     `
   );
-story5.story = { name: 'Multiple actions, selector' };
+Story5.story = { name: 'Multiple actions, selector' };
 
-export const story6 = () =>
+export const Story6 = () =>
   withActions(
     { click: 'clicked', contextmenu: 'right clicked' },
     { clearOnStoryChange: false }
   )(button);
-story6.story = { name: 'Multiple actions, object + config' };
+Story6.story = { name: 'Multiple actions, object + config' };
 
-export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
-story7.story = { name: 'Decorated actions' };
+export const Story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+Story7.story = { name: 'Decorated actions' };
 
-export const story8 = () =>
+export const Story8 = () =>
   pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
-story8.story = { name: 'Decorated actions + config' };
+Story8.story = { name: 'Decorated actions + config' };
diff --git a/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
index b4951dd88543..881637bf133b 100644
--- a/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -12,12 +12,12 @@ export default {
   },
 };
 
-export const story1 = () => html`
+export const Story1 = () => html`
   <demo-wc-card>You should be able to switch backgrounds for this story</demo-wc-card>
 `;
-story1.story = { name: 'story 1' };
+Story1.story = { name: 'story 1' };
 
-export const story2 = () => html`
+export const Story2 = () => html`
   <demo-wc-card back-side>This one too!</demo-wc-card>
 `;
-story2.story = { name: 'story 2' };
+Story2.story = { name: 'story 2' };
diff --git a/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js b/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
index c4f06119dca2..82b88b22546f 100644
--- a/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/web-components-kitchen-sink/stories/addon-knobs.stories.js
@@ -30,7 +30,7 @@ export const Simple = () => {
   `;
 };
 
-export const story3 = () => {
+export const Story3 = () => {
   const header = text('header', 'Power Ranger');
   const textColor = color('Text color', 'orangered');
   return html`
@@ -44,9 +44,9 @@ export const story3 = () => {
     </style>
   `;
 };
-story3.story = { name: 'Color Selection' };
+Story3.story = { name: 'Color Selection' };
 
-export const story4 = () => {
+export const Story4 = () => {
   const name = text('Name', 'Jane');
   const stock = number('Stock', 20, {
     range: true,
@@ -94,7 +94,7 @@ export const story4 = () => {
     </div>
   `;
 };
-story4.story = { name: 'All knobs' };
+Story4.story = { name: 'All knobs' };
 
 export const XssSafety = () => {
   const content = text('content', '<img src=x onerror="alert(\'XSS Attack\')" >');
diff --git a/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts b/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
index f506f387ca3c..fb32db9e5f8e 100644
--- a/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
+++ b/lib/cli/generators/ANGULAR/template-csf/src/stories/0-Welcome.stories.ts
@@ -5,11 +5,11 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
   component: Welcome,
   props: {},
 });
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts b/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
index 26c7fc6b40f8..36a3ccd6e6f3 100644
--- a/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
+++ b/lib/cli/generators/ANGULAR/template-csf/src/stories/1-Button.stories.ts
@@ -8,45 +8,45 @@ export default {
   component: Button,
 };
 
-export const text = () => ({
+export const Text = () => ({
   component: Button,
   props: {
-    text: 'Hello Button',
+    Text: 'Hello Button',
   },
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   component: Button,
   props: {
-    text: '😀 😎 👍 💯',
+    Text: '😀 😎 👍 💯',
   },
 });
 
-emoji.story = {
+Emoji.story = {
   parameters: { notes: 'My notes on a button with emojis' },
 };
 
-export const withSomeEmojiAndAction = () => ({
+export const WithSomeEmojiAndAction = () => ({
   component: Button,
   props: {
-    text: '😀 😎 👍 💯',
+    Text: '😀 😎 👍 💯',
     onClick: action('This was clicked OMG'),
   },
 });
 
-withSomeEmojiAndAction.story = {
+WithSomeEmojiAndAction.story = {
   name: 'with some emoji and action',
   parameters: { notes: 'My notes on a button with emojis' },
 };
 
-export const buttonWithLinkToAnotherStory = () => ({
+export const ButtonWithLinkToAnotherStory = () => ({
   component: Button,
   props: {
-    text: 'Go to Welcome Story',
+    Text: 'Go to Welcome Story',
     onClick: linkTo('Welcome'),
   },
 });
 
-buttonWithLinkToAnotherStory.story = {
+ButtonWithLinkToAnotherStory.story = {
   name: 'button with link to another story',
 };
diff --git a/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js
index 566628a70abe..b6dc16dc3be1 100644
--- a/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/EMBER/template-csf/stories/0-Welcome.stories.js
@@ -5,7 +5,7 @@ export default {
   title: 'Welcome',
 };
 
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
   template: hbs`
     <div>
       <h3> Welcome to Storybook! </h3>
@@ -17,6 +17,6 @@ export const toStorybook = () => ({
   },
 });
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js b/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
index 44d70a9c2fd1..c8cd39a34252 100644
--- a/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/EMBER/template-csf/stories/1-Button.stories.js
@@ -5,14 +5,14 @@ export default {
   title: 'Button',
 };
 
-export const text = () => ({
+export const Text = () => ({
   template: hbs`<button {{action onClick}}>Hello Button</button>`,
   context: {
     onClick: action('clicked'),
   },
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   template: hbs`
     <button {{action onClick}}>
       <span role="img" aria-label="so cool">
diff --git a/lib/cli/generators/HTML/template-csf/stories/index.stories.js b/lib/cli/generators/HTML/template-csf/stories/index.stories.js
index 2ce3f82341d5..7d4bd3351c80 100644
--- a/lib/cli/generators/HTML/template-csf/stories/index.stories.js
+++ b/lib/cli/generators/HTML/template-csf/stories/index.stories.js
@@ -2,9 +2,9 @@ export default {
   title: 'Demo',
 };
 
-export const heading = () => '<h1>Hello World</h1>';
+export const Heading = () => '<h1>Hello World</h1>';
 
-export const button = () => {
+export const Button = () => {
   const btn = document.createElement('button');
   btn.type = 'button';
   btn.innerText = 'Hello Button';
diff --git a/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
index fa267f24c316..c76f45f3b4be 100644
--- a/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/METEOR/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js b/lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js
index ee421d08d5b0..6bcfa2146627 100644
--- a/lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/METEOR/template-csf/stories/1-Button.stories.js
@@ -7,9 +7,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
index 3514edb1c9b4..3805e37c73cf 100644
--- a/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/MITHRIL/template-csf/stories/0-Welcome.stories.js
@@ -7,10 +7,10 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
   view: () => m(Welcome, { showApp: linkTo('Button') }),
 });
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js b/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
index 770c8b9d95fe..c6d192dc23f1 100644
--- a/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/MITHRIL/template-csf/stories/1-Button.stories.js
@@ -7,11 +7,11 @@ export default {
   component: Button,
 };
 
-export const text = () => ({
+export const Text = () => ({
   view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   view: () =>
     m(
       Button,
diff --git a/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
index 03442e51b929..94e96aca4bc2 100644
--- a/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/PREACT/template-csf/stories/0-Welcome.stories.js
@@ -9,8 +9,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js
index 650c1a6d2a6f..e4070f9c465a 100644
--- a/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/PREACT/template-csf/stories/1-Button.stories.js
@@ -9,9 +9,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
index 7f3dddec5d41..36caa134ee44 100644
--- a/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/RAX/template-csf/stories/0-Welcome.stories.js
@@ -8,8 +8,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button', 'with text')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button', 'with text')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js b/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js
index 3a9a6a195248..a107246db315 100644
--- a/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/RAX/template-csf/stories/1-Button.stories.js
@@ -13,7 +13,7 @@ export const text = () => (
   </button>
 );
 
-export const emoji = () => (
+export const Emoji = () => (
   <button onPress={action('clicked')} type="button">
     <Text role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
index fa267f24c316..c76f45f3b4be 100644
--- a/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/REACT/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js
index ee421d08d5b0..6bcfa2146627 100644
--- a/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/REACT/template-csf/stories/1-Button.stories.js
@@ -7,9 +7,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
index fa267f24c316..c76f45f3b4be 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
+++ b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/0-Welcome.stories.tsx
@@ -7,8 +7,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx
index ee421d08d5b0..6bcfa2146627 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx
+++ b/lib/cli/generators/REACT_SCRIPTS/template-csf-ts/src/stories/1-Button.stories.tsx
@@ -7,9 +7,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
index fa267f24c316..c76f45f3b4be 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
index ee421d08d5b0..6bcfa2146627 100644
--- a/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
+++ b/lib/cli/generators/REACT_SCRIPTS/template-csf/src/stories/1-Button.stories.js
@@ -7,9 +7,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
diff --git a/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
index aa73a8905141..87952621919c 100644
--- a/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/RIOT/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
   title: 'Welcome',
 };
 
-export const toStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });
+export const ToStorybook = () => mount('welcome', { showApp: () => linkTo('Button') });
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
index b4e02649a856..211af792c39b 100644
--- a/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/RIOT/template-csf/stories/1-Button.stories.js
@@ -8,15 +8,15 @@ export default {
   title: 'Button',
 };
 
-export const text = () => ({
+export const Text = () => ({
   tags: ['<my-button>Hello Button</my-button>'],
 });
 
-export const scenario = () => ({
+export const Scenario = () => ({
   tags: [{ content: MyButtonRaw, boundAs: 'MyButton' }],
   template: '<MyButton>With scenario</MyButton>',
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   tags: ['<my-button>😀 😎 👍 💯</my-button>'],
 });
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
index 6be3fcf848cb..cb6e01906951 100644
--- a/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/SFC_VUE/template-csf/src/stories/0-Welcome.stories.js
@@ -7,12 +7,12 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
   components: { Welcome },
   template: '<welcome :showApp="action" />',
   methods: { action: linkTo('Button') },
 });
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js b/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
index 69eb65389e63..c659ea0fb6a3 100644
--- a/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
+++ b/lib/cli/generators/SFC_VUE/template-csf/src/stories/1-Button.stories.js
@@ -8,13 +8,13 @@ export default {
   component: MyButton,
 };
 
-export const text = () => ({
+export const Text = () => ({
   components: { MyButton },
   template: '<my-button @click="action">Hello Button</my-button>',
   methods: { action: action('clicked') },
 });
 
-export const jsx = () => ({
+export const Jsx = () => ({
   components: { MyButton },
   render() {
     return <my-button onClick={this.action}>With JSX</my-button>;
@@ -22,7 +22,7 @@ export const jsx = () => ({
   methods: { action: linkTo('clicked') },
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   components: { MyButton },
   template:
     '<my-button @click="action"><span role="img" aria-label="so cool">😀 😎 👍 💯</span></my-button>',
diff --git a/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js b/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js
index d200a570fd3b..944233291921 100644
--- a/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js
+++ b/lib/cli/generators/SVELTE/template-csf/stories/index.stories.js
@@ -7,13 +7,13 @@ export default {
   component: Button,
 };
 
-export const text = () => ({
+export const Text = () => ({
   Component: Button,
   props: { text: 'Hello Button' },
   on: { click: action('clicked') },
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   Component: Button,
   props: {
     text: '😀 😎 👍 💯',
diff --git a/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js
index e796e4824d3e..35c1beef731f 100644
--- a/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/VUE/template-csf/stories/0-Welcome.stories.js
@@ -7,12 +7,12 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => ({
+export const ToStorybook = () => ({
   components: { Welcome },
   template: '<welcome :showApp="action" />',
   methods: { action: linkTo('Button') },
 });
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js b/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js
index 5560968ea542..f9438eb09aed 100644
--- a/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/VUE/template-csf/stories/1-Button.stories.js
@@ -8,13 +8,13 @@ export default {
   component: MyButton,
 };
 
-export const text = () => ({
+export const Text = () => ({
   components: { MyButton },
   template: '<my-button @click="action">Hello Button</my-button>',
   methods: { action: action('clicked') },
 });
 
-export const jsx = () => ({
+export const Jsx = () => ({
   components: { MyButton },
   render(h) {
     return <my-button onClick={this.action}>With JSX</my-button>;
@@ -22,7 +22,7 @@ export const jsx = () => ({
   methods: { action: linkTo('clicked') },
 });
 
-export const emoji = () => ({
+export const Emoji = () => ({
   components: { MyButton },
   template: '<my-button @click="action">😀 😎 👍 💯</my-button>',
   methods: { action: action('clicked') },
diff --git a/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js b/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
index 32a3b0cae55a..2b9bedb51a12 100644
--- a/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
+++ b/lib/cli/generators/WEB-COMPONENTS/template/stories/index.stories.js
@@ -6,19 +6,19 @@ export default {
   title: 'Demo',
 };
 
-export const heading = () => html`
+export const Heading = () => html`
   <h1>Hello World</h1>
 `;
 
-export const settingProperties = () => html`
+export const SettingProperties = () => html`
   <my-component .data=${{ header: 'foo', state: true }}>Hello World</my-component>
 `;
 
-export const events = () => html`
+export const Events = () => html`
   <button @click=${ev => console.log('clicked button')}>clicking will get logged to console</button>
 `;
 
-export const withFunction = () => {
+export const WithFunction = () => {
   const header = 'My Header';
   return html`
     <h1>${header}</h1>
diff --git a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
index fa267f24c316..c76f45f3b4be 100644
--- a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
+++ b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/0-Welcome.stories.js
@@ -7,8 +7,8 @@ export default {
   component: Welcome,
 };
 
-export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
 
-toStorybook.story = {
+ToStorybook.story = {
   name: 'to Storybook',
 };
diff --git a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
index 7f31c9b92bcb..b84fca566012 100644
--- a/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
+++ b/lib/cli/generators/WEBPACK_REACT/template-csf/stories/1-Button.stories.js
@@ -8,9 +8,9 @@ export default {
   component: Button,
 };
 
-export const text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+export const Text = () => <Button onClick={action('clicked')}>Hello Button</Button>;
 
-export const emoji = () => (
+export const Emoji = () => (
   <Button onClick={action('clicked')}>
     <span role="img" aria-label="so cool">
       😀 😎 👍 💯
@@ -18,6 +18,6 @@ export const emoji = () => (
   </Button>
 );
 
-emoji.story = {
+Emoji.story = {
   name: 'with emoji',
 };

From a7a3f36255f72f0e3ef35842fdb5cd438209bcca Mon Sep 17 00:00:00 2001
From: Filipp Riabchun <filipp.riabchun@jetbrains.com>
Date: Tue, 19 Nov 2019 22:33:58 +0100
Subject: [PATCH 4/5] Fix error

---
 .../stories/addon-knobs/with-knobs.stories.js                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
index 3a94cd0d34d8..4b9109dd07be 100644
--- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -14,7 +14,7 @@ import {
   button,
   object,
   files,
-  OptionsKnob as options,
+  optionsKnob as options,
 } from '@storybook/addon-knobs';
 
 const ItemLoader = ({ isLoading, items }) => {

From 811dd24802d4de7948df68242a512fdeba1f4932 Mon Sep 17 00:00:00 2001
From: Filipp Riabchun <filipp.riabchun@jetbrains.com>
Date: Tue, 19 Nov 2019 22:34:19 +0100
Subject: [PATCH 5/5] Fix stories glob

---
 examples/official-storybook/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/official-storybook/main.js b/examples/official-storybook/main.js
index ebd5bdbf7d7e..20c98e932aa9 100644
--- a/examples/official-storybook/main.js
+++ b/examples/official-storybook/main.js
@@ -3,7 +3,7 @@ module.exports = {
   stories: [
     '../../lib/ui/src/**/*.stories./(js|tsx|mdx)',
     '../../lib/components/src/**/*.stories.(js|tsx|mdx)',
-    './stories/*.stories.(js|tsx|mdx)',
+    './stories/**/*.stories.(js|tsx|mdx)',
   ],
   addons: [
     '@storybook/addon-storysource/register',