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,83 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
+exports[`Storyshots Addons|Actions story1 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+exports[`Storyshots Addons|Actions story2 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions story3 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+exports[`Storyshots Addons|Actions story4 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+exports[`Storyshots Addons|Actions story5 1`] = `
+
+        
+`;
+
+exports[`Storyshots Addons|Actions story6 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
+exports[`Storyshots Addons|Actions story7 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addons|Actions story8 1`] = `
 <button
   type="button"
 >
   Hello World
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
-
-        
-`;
-
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds story1 1`] = `
 <span
   style="color: white"
 >
   You should be able to switch backgrounds for this story
 </span>
 `;
 
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story2 1`] = `
 <span
   style="color: white"
 >
   This one too!
 </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 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|Knobs story5 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;"
->
+exports[`Storyshots Addons|a11y Label 1`] = `
+<button>
   Testing the a11y addon
 </button>
 `;
 
-exports[`Storyshots Addons|a11y Label 1`] = `
-<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",