CSF: Refactor to stabilize export to storyName transform

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

@@ -194,7 +194,7 @@ helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
 
 const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
 
-const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hellostory' };
+const mdxStoryNameToId = { one: 'button--one', 'hello story': 'button--hello-story' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
@@ -280,8 +280,8 @@ const componentMeta = {
 };
 
 const mdxStoryNameToId = {
-  'component notes': 'button--componentnotes',
-  'story notes': 'button--storynotes',
+  'component notes': 'button--component-notes',
+  'story notes': 'button--story-notes',
 };
 
 componentMeta.parameters = componentMeta.parameters || {};
@@ -362,7 +362,7 @@ const componentMeta = {
   includeStories: ['helloButton', 'two'],
 };
 
-const mdxStoryNameToId = { 'hello button': 'button--hellobutton', two: 'button--two' };
+const mdxStoryNameToId = { 'hello button': 'button--hello-button', two: 'button--two' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {
@@ -532,8 +532,8 @@ const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', '
 
 const mdxStoryNameToId = {
   one: 'button--one',
-  'hello story': 'button--hellostory',
-  'w/punctuation': 'button--wpunctuation',
+  'hello story': 'button--hello-story',
+  'w/punctuation': 'button--w-punctuation',
 };
 
 componentMeta.parameters = componentMeta.parameters || {};
@@ -670,7 +670,7 @@ toStorybook.story.parameters = {
 
 const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
 
-const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--tostorybook' };
+const mdxStoryNameToId = { 'to storybook': 'mdx-welcome--to-storybook' };
 
 componentMeta.parameters = componentMeta.parameters || {};
 componentMeta.parameters.docs = {

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

@@ -3,7 +3,7 @@ const parser = require('@babel/parser');
 const generate = require('@babel/generator').default;
 const camelCase = require('lodash/camelCase');
 const jsStringEscape = require('js-string-escape');
-const { toId } = require('@storybook/router');
+const { toId, storyNameFromExport } = require('@storybook/router/utils');
 
 // Generate the MDX as is, but append named exports for every
 // story in the contents
@@ -234,7 +234,7 @@ function extractExports(node, options) {
   const mdxStoryNameToId = Object.entries(context.storyNameToKey).reduce(
     (acc, [storyName, storyKey]) => {
       if (title) {
-        acc[storyName] = toId(title, storyKey);
+        acc[storyName] = toId(title, storyNameFromExport(storyKey));
       }
       return acc;
     },

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, { makeDisplayName } from './client_api';
+import ClientApi from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 
@@ -26,20 +26,6 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 describe('preview.client_api', () => {
-  describe('makeDisplayName', () => {
-    it('should format CSF exports with sensible defaults', () => {
-      const testCases = {
-        name: 'Name',
-        someName: 'Some Name',
-        someNAME: 'Some NAME',
-        some_custom_NAME: 'Some Custom NAME',
-        someName1234: 'Some Name 1234',
-        someName1_2_3_4: 'Some Name 1 2 3 4',
-      };
-      Object.entries(testCases).forEach(([key, val]) => expect(makeDisplayName(key)).toBe(val));
-    });
-  });
-
   describe('setAddon', () => {
     it('should register addons', () => {
       const { clientApi } = getContext(undefined);

lib/client-api/src/client_api.ts

@@ -1,7 +1,6 @@
 /* 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';
@@ -83,8 +82,6 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
-export const makeDisplayName = (key: string) => startCase(key);
-
 export default class ClientApi {
   private _storyStore: StoryStore;
 
@@ -126,8 +123,6 @@ export default class ClientApi {
       this._globalParameters.options
     );
 
-  getMakeDisplayName = () => makeDisplayName;
-
   addDecorator = (decorator: DecoratorFunction) => {
     this._globalDecorators.push(decorator);
   };

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

@@ -7,7 +7,7 @@ import AnsiToHtml from 'ansi-to-html';
 import addons from '@storybook/addons';
 import createChannel from '@storybook/channel-postmessage';
 import { ClientApi, StoryStore, ConfigApi } from '@storybook/client-api';
-import { toId } from '@storybook/router/utils';
+import { toId, storyNameFromExport } from '@storybook/router/utils';
 import { logger } from '@storybook/client-logger';
 import Events from '@storybook/core-events';
 
@@ -398,9 +398,6 @@ 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 });
 
@@ -418,7 +415,7 @@ export default function start(render, { decorateStory } = {}) {
           }
           const decoratorParams = decorators ? { decorators } : null;
           const displayNameParams = name ? { displayName: name } : {};
-          kind.add(makeDisplayName(key), storyFn, {
+          kind.add(storyNameFromExport(key), storyFn, {
             ...parameters,
             ...decoratorParams,
             ...displayNameParams,

lib/router/package.json

@@ -25,6 +25,7 @@
     "@types/reach__router": "^1.2.3",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
+    "lodash": "^4.17.11",
     "memoizerific": "^1.11.3",
     "qs": "^6.6.0"
   },

lib/router/src/utils.test.js

@@ -1,4 +1,4 @@
-import { toId } from '../utils';
+import { toId, storyNameFromExport } from './utils';
 
 describe('toId', () => {
   [
@@ -37,3 +37,17 @@ describe('toId', () => {
     expect(() => toId('kind', '')).toThrow(`Invalid name '', must include alphanumeric characters`);
   });
 });
+
+describe('storyNameFromExport', () => {
+  it('should format CSF exports with sensible defaults', () => {
+    const testCases = {
+      name: 'Name',
+      someName: 'Some Name',
+      someNAME: 'Some NAME',
+      some_custom_NAME: 'Some Custom NAME',
+      someName1234: 'Some Name 1234',
+      someName1_2_3_4: 'Some Name 1 2 3 4',
+    };
+    Object.entries(testCases).forEach(([key, val]) => expect(storyNameFromExport(key)).toBe(val));
+  });
+});

lib/router/src/utils.ts

@@ -1,5 +1,6 @@
 import qs from 'qs';
 import memoize from 'memoizerific';
+import startCase from 'lodash/startCase';
 
 interface StoryData {
   viewMode?: string;
@@ -91,3 +92,6 @@ export const parseKind = (kind: string, { rootSeparator, groupSeparator }: Separ
     groups,
   };
 };
+
+// Transform the CSF named export into a readable story name
+export const storyNameFromExport = (key: string) => startCase(key);