Merge pull request #7878 from storybookjs/7599-display-name-option

CSF: Transform CSF named exports w/ `makeDisplayName`

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

@@ -53,6 +53,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
+one.story.name = 'one';
 one.story.parameters = { mdxSource: '<Button>One</Button>' };
 one.story.decorators = [storyFn => <div className=\\"local\\">{storyFn()}</div>];
 
@@ -181,6 +182,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
+one.story.name = 'one';
 one.story.parameters = { mdxSource: '<Button>One</Button>' };
 
 export const helloStory = () => <Button>Hello button</Button>;
@@ -342,6 +344,7 @@ helloButton.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
 
 export const two = () => <Button>Two</Button>;
 two.story = {};
+two.story.name = 'two';
 two.story.parameters = { mdxSource: '<Button>Two</Button>' };
 
 const componentMeta = {
@@ -443,6 +446,7 @@ MDXContent.isMDXComponent = true;
 
 export const text = () => 'Plain text';
 text.story = {};
+text.story.name = 'text';
 text.story.parameters = { mdxSource: \\"'Plain text'\\" };
 
 const componentMeta = { title: 'Text', includeStories: ['text'] };
@@ -501,6 +505,7 @@ MDXContent.isMDXComponent = true;
 
 export const one = () => <Button>One</Button>;
 one.story = {};
+one.story.name = 'one';
 one.story.parameters = { mdxSource: '<Button>One</Button>' };
 
 export const helloStory = () => <Button>Hello button</Button>;

addons/docs/src/mdx/mdx-compiler-plugin.js

@@ -72,9 +72,8 @@ function genStoryExport(ast, counter) {
   }
   statements.push(`${storyKey}.story = {};`);
 
-  if (storyName !== storyKey) {
-    statements.push(`${storyKey}.story.name = '${storyName}';`);
-  }
+  // always preserve the name, since CSF exports can get modified by displayName
+  statements.push(`${storyKey}.story.name = '${storyName}';`);
 
   let parameters = getAttr(ast.openingElement, 'parameters');
   parameters = parameters && parameters.expression;

docs/src/pages/configurations/options-parameter/index.md

@@ -82,6 +82,14 @@ addParameters({
     * @type {Function}
     */
     storySort: undefined
+
+    /**
+    * Function to transform Component Story Format named exports (typically camel-case
+    * variables) into display names. If the story specifies a `story.name` option, that
+    * will not be transformed and will always take precedence over a named export.
+    * @type {Function}
+    */
+    makeDisplayName: lodash.startCase
   },
 });
 ```

examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
+exports[`Storyshots Addons|Actions story1 1`] = `
 <button
   type="button"
 >
@@ -8,7 +8,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+exports[`Storyshots Addons|Actions story2 1`] = `
 <button
   type="button"
 >
@@ -16,7 +16,7 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions story3 1`] = `
 <button
   type="button"
 >
@@ -24,7 +24,7 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+exports[`Storyshots Addons|Actions story4 1`] = `
 <button
   type="button"
 >
@@ -32,36 +32,36 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
+exports[`Storyshots Addons|Actions story5 1`] = `
 
         
 `;
 
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Actions story6 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story7 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story8 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds story1 1`] = `
 <span
   style="color: white"
 >
@@ -69,7 +69,7 @@ exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 </span>
 `;
 
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story2 1`] = `
 <span
   style="color: white"
 >
@@ -77,7 +77,7 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 </span>
 `;
 
-exports[`Storyshots Addons|Centered button in center 1`] = `
+exports[`Storyshots Addons|Centered story1 1`] = `
 <div
   id="sb-addon-centered-wrapper"
   style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
@@ -100,7 +100,27 @@ exports[`Storyshots Addons|Events Logger 1`] = `
 
 exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
 
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs story3 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs story4 1`] = `
 <div
   style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
 >
@@ -147,29 +167,9 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
-<p
-  style="transition: color 0.5s ease-out; color: orangered;"
->
-  John Doe
-</p>
-`;
+exports[`Storyshots Addons|Knobs story5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
 
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-<p>
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
-
-exports[`Storyshots Addons|Notes Simple note 1`] = `
+exports[`Storyshots Addons|Notes story1 1`] = `
 <p>
   
       
@@ -185,8 +185,6 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
 
 exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
 
-exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
-
 exports[`Storyshots Addons|a11y Disabled 1`] = `
 <button
   disabled=""
@@ -195,20 +193,22 @@ exports[`Storyshots Addons|a11y Disabled 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
-  Testing the a11y addon
-</button>
-`;
-
 exports[`Storyshots Addons|a11y Label 1`] = `
 <button>
   Testing the a11y addon
 </button>
 `;
 
+exports[`Storyshots Addons|a11y story4 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y story5 1`] = `<div />`;
+
 exports[`Storyshots Demo button 1`] = `
 <button>
   Hello Button

examples/official-storybook/config.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import startCase from 'lodash/startCase';
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -52,6 +53,7 @@ addParameters({
     theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
+    makeDisplayName: key => startCase(key).toLowerCase(),
   },
   backgrounds: [
     { name: 'storybook app', value: themes.light.appBg, default: true },

examples/official-storybook/package.json

@@ -53,6 +53,7 @@
     "global": "^4.3.2",
     "graphql": "^14.1.1",
     "jest-emotion": "^10.0.11",
+    "lodash": "^4.17.11",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",

examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Action and method 1`] = `
+exports[`Storyshots Addons|Actions actionAndMethod 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -9,7 +9,7 @@ exports[`Storyshots Addons|Actions Action and method 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Action only 1`] = `
+exports[`Storyshots Addons|Actions actionOnly 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -18,7 +18,7 @@ exports[`Storyshots Addons|Actions Action only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+exports[`Storyshots Addons|Actions multipleActions 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -28,7 +28,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addons|Actions multipleActionsObject 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -38,7 +38,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
+exports[`Storyshots Addons|Backgrounds example1 1`] = `
 <button
   class="button"
 >
@@ -46,7 +46,7 @@ exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
+exports[`Storyshots Addons|Backgrounds example2 1`] = `
 <button
   class="button"
 >
@@ -54,7 +54,7 @@ exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Centered Button  1`] = `
+exports[`Storyshots Addons|Centered button 1`] = `
 <div
   style={
     Object {
@@ -86,7 +86,7 @@ exports[`Storyshots Addons|Centered Button  1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
+exports[`Storyshots Addons|Contexts simpleCssTheming 1`] = `
 <div
   style={
     Object {
@@ -103,7 +103,13 @@ exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs allKnobs 1`] = `
 <div
   style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
 >
@@ -136,13 +142,7 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Links Go to welcome 1`] = `
+exports[`Storyshots Addons|Links goToWelcome 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -151,7 +151,7 @@ exports[`Storyshots Addons|Links Go to welcome 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Notes Note with HTML 1`] = `
+exports[`Storyshots Addons|Notes noteWithHtml 1`] = `
 <p>
   <span>
     🤔😳😯😮
@@ -167,7 +167,7 @@ exports[`Storyshots Addons|Notes Note with HTML 1`] = `
 </p>
 `;
 
-exports[`Storyshots Addons|Notes Simple note 1`] = `
+exports[`Storyshots Addons|Notes simpleNote 1`] = `
 <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.
@@ -175,7 +175,7 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
 </p>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button withSomeEmoji 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -189,7 +189,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button withText 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -198,7 +198,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome toStorybook 1`] = `
 <article
   style={
     Object {

examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -14,7 +14,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -28,7 +28,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <div
   data-is="root"
   id="root"
@@ -44,7 +44,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
 <div
   data-is="root"
   id="root"
@@ -60,7 +60,18 @@ exports[`Storyshots Addon|Backgrounds story 2 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    I am John Doe and I'm 44 years old.
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
 <div
   data-is="root"
   id="root"
@@ -115,18 +126,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    I am John Doe and I'm 44 years old.
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
 <div
   data-is="root"
   id="root"
@@ -137,7 +137,7 @@ exports[`Storyshots Addon|Knobs XSS safety 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -151,7 +151,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <div
   data-is="root"
   id="root"
@@ -168,7 +168,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <div
   data-is="root"
   id="root"
@@ -181,18 +181,18 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </div>
 `;
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
 <div
   data-is="parameters"
   id="root"
 >
   <div>
-    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
   </div>
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built as string 1`] = `
+exports[`Storyshots Story|How to create a story builtAsString 1`] = `
 <div
   data-is="root"
   id="root"
@@ -205,7 +205,7 @@ exports[`Storyshots Story|How to create a story built as string 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from raw import 1`] = `
+exports[`Storyshots Story|How to create a story builtFromRawImport 1`] = `
 <div
   data-is="simpletest"
   id="root"
@@ -216,7 +216,7 @@ exports[`Storyshots Story|How to create a story built from raw import 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from tags and template 1`] = `
+exports[`Storyshots Story|How to create a story builtFromTagsAndTemplate 1`] = `
 <div
   data-is="root"
   id="root"
@@ -231,7 +231,7 @@ exports[`Storyshots Story|How to create a story built from tags and template 1`]
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from the precompilation 1`] = `
+exports[`Storyshots Story|How to create a story builtFromThePrecompilation 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -242,7 +242,7 @@ exports[`Storyshots Story|How to create a story built from the precompilation 1`
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built with tag 1`] = `
+exports[`Storyshots Story|How to create a story builtWithTag 1`] = `
 <div
   data-is="test"
   id="root"
@@ -253,7 +253,7 @@ exports[`Storyshots Story|How to create a story built with tag 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = `
+exports[`Storyshots Story|How to create a story tagsTemplateAndTagConstructorAtOnce 1`] = `
 <div
   data-is="root"
   id="root"
@@ -269,7 +269,7 @@ exports[`Storyshots Story|How to create a story tags, template and tagConstructo
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = `
+exports[`Storyshots Story|How to create a story theMountInstructionIsNotNecessary 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -280,7 +280,7 @@ exports[`Storyshots Story|How to create a story the mount instruction is not nec
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story the opts value is not necessary 1`] = `
+exports[`Storyshots Story|How to create a story theOptsValueIsNotNecessary 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -349,7 +349,7 @@ exports[`Storyshots Story|Nest tags Matriochka 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|Nest tags Three tags 1`] = `
+exports[`Storyshots Story|Nest tags threeTags 1`] = `
 <div
   data-is="root"
   id="root"

examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action on component method 1`] = `
+exports[`Storyshots Addon|Actions actionOnComponentMethod 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -19,7 +19,7 @@ exports[`Storyshots Addon|Actions Action on component method 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Actions Action on view method 1`] = `
+exports[`Storyshots Addon|Actions actionOnViewMethod 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -61,7 +61,7 @@ exports[`Storyshots Addon|Actions Action on view method 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -122,7 +122,7 @@ exports[`Storyshots Addon|Centered rounded 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Centered with action 1`] = `
+exports[`Storyshots Addon|Centered withAction 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -155,7 +155,7 @@ exports[`Storyshots Addon|Knobs Simple 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome view 1`] = `
+exports[`Storyshots Addon|Links goToWelcomeView 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -183,7 +183,7 @@ exports[`Storyshots Addon|Links Go to welcome view 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -225,7 +225,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <section
   class="storybook-snapshot-container"
 >

examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action and method 1`] = `
+exports[`Storyshots Addon|Actions actionAndMethod 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -9,7 +9,7 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -18,7 +18,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -27,7 +27,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addon|Actions multipleActionsObject 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -36,13 +36,13 @@ exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
 </button>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
 <button>
   This one too!
 </button>
@@ -77,7 +77,7 @@ exports[`Storyshots Addon|Contexts Languages 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
+exports[`Storyshots Addon|Contexts simpleCssTheming 1`] = `
 <div
   style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
 >
@@ -87,7 +87,13 @@ exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 40 years old.
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
 <div
   style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
 >
@@ -125,19 +131,13 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 40 years old.
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
 <div>
   &lt;img src=x onerror="alert('XSS Attack')" &gt;
 </div>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
 <button
   class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -146,7 +146,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <p>
   🤔😳😯😮
   <br />
@@ -156,7 +156,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </p>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <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.
@@ -164,7 +164,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </p>
 `;
 
-exports[`Storyshots App App 1`] = `
+exports[`Storyshots App app 1`] = `
 <div
   id="app"
 >
@@ -278,13 +278,13 @@ exports[`Storyshots Button square 1`] = `
 </button>
 `;
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
 <div>
-  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"docs":{"iframeHeight":"60px"},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
 </div>
 `;
 
-exports[`Storyshots Core|Template string only 1`] = `
+exports[`Storyshots Core|Template stringOnly 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -351,6 +351,7 @@ exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
     },
     "globalParameter": "globalParameter",
     "framework": "vue",
+    "displayName": "With Data",
     "customParameter": 42
   }
 }
@@ -368,7 +369,7 @@ exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue preRegisteredComponent 1`] = `
 <p>
   <em>
     This component was pre-registered in .storybook/config.js
@@ -384,7 +385,13 @@ exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`]
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue renderComponent 1`] = `
 <button
   class="button"
   style="color: pink; border-color: pink;"
@@ -393,13 +400,19 @@ exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
 <div>
-  renders a div with some text in it..
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
 </div>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue templateComponent 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -408,7 +421,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue templateMethods 1`] = `
 <p>
   <em>
     Clicking the button will navigate to another story using the 'addon-links'
@@ -424,19 +437,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue vuexActions 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -445,7 +446,7 @@ exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue whateverYouWant 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"

lib/client-api/src/client_api.test.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 import { logger } from '@storybook/client-logger';
 import addons, { mockChannel } from '@storybook/addons';
-import ClientApi from './client_api';
+import ClientApi, { defaultMakeDisplayName } from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 
@@ -26,6 +26,20 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 describe('preview.client_api', () => {
+  describe('defaultMakeDisplayName', () => {
+    it('should format CSF exports with sensible defaults', () => {
+      const testCases = {
+        name: 'Name',
+        someName: 'Some Name',
+        someNAME: 'Some NAME',
+        some_custom_NAME: 'Some Custom NAME',
+      };
+      Object.entries(testCases).forEach(([key, val]) =>
+        expect(defaultMakeDisplayName(key)).toBe(val)
+      );
+    });
+  });
+
   describe('setAddon', () => {
     it('should register addons', () => {
       const { clientApi } = getContext(undefined);

lib/client-api/src/client_api.ts

@@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: 0 */
 import deprecate from 'util-deprecate';
 import isPlainObject from 'is-plain-object';
+import startCase from 'lodash/startCase';
 import { logger } from '@storybook/client-logger';
 import addons, { StoryContext, StoryFn, Parameters, OptionsParameter } from '@storybook/addons';
 import Events from '@storybook/core-events';
@@ -82,6 +83,8 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
+export const defaultMakeDisplayName = (key: string) => startCase(key);
+
 export default class ClientApi {
   private _storyStore: StoryStore;
 
@@ -123,6 +126,10 @@ export default class ClientApi {
       this._globalParameters.options
     );
 
+  getMakeDisplayName = () =>
+    (this._globalParameters.options && this._globalParameters.options.makeDisplayName) ||
+    defaultMakeDisplayName;
+
   addDecorator = (decorator: DecoratorFunction) => {
     this._globalDecorators.push(decorator);
   };

lib/components/src/blocks/Source.stories.tsx

@@ -32,7 +32,5 @@ const cssCode = `
 export const css = () => <Source code={cssCode} language="css" />;
 
 export const noStory = () => <Source error={SourceError.NO_STORY} />;
-noStory.story = { name: 'no story' };
 
 export const sourceUnavailable = () => <Source error={SourceError.SOURCE_UNAVAILABLE} />;
-sourceUnavailable.story = { name: 'source unavailable' };

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

@@ -398,6 +398,9 @@ export default function start(render, { decorateStory } = {}) {
       // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this
       const kind = clientApi.storiesOf(kindName, true);
 
+      // Transform the CSF named export if the user hasn't specified a name
+      const makeDisplayName = clientApi.getMakeDisplayName();
+
       // we should always have a framework, rest optional
       kind.addParameters({ framework, component, ...params });
 
@@ -414,7 +417,10 @@ export default function start(render, { decorateStory } = {}) {
             `${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
           }
           const decoratorParams = decorators ? { decorators } : null;
-          kind.add(name || key, storyFn, { ...parameters, ...decoratorParams });
+          const displayNameParams = {
+            displayName: name || makeDisplayName(key),
+          };
+          kind.add(key, storyFn, { ...parameters, ...decoratorParams, ...displayNameParams });
         }
       });
     });

lib/ui/src/components/sidebar/SidebarItem.tsx

@@ -135,6 +135,9 @@ const SidebarItem = ({
     iconName = 'folder';
   }
 
+  // eslint-disable-next-line react/destructuring-assignment
+  const displayName = (props.parameters && props.parameters.displayName) || name;
+
   return (
     <Item
       isSelected={isSelected}
@@ -143,7 +146,7 @@ const SidebarItem = ({
     >
       <Expander className="sidebar-expander" isExpandable={!isLeaf} isExpanded={isExpanded} />
       <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
-      <span>{name}</span>
+      <span>{displayName}</span>
     </Item>
   );
 };