CSF: displayName => makeDisplayName per review feedback

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

@@ -89,7 +89,7 @@ addParameters({
     * will not be transformed and will always take precedence over a named export.
     * @type {Function}
     */
-    displayName: lodash.startCase
+    makeDisplayName: lodash.startCase
   },
 });
 ```

examples/official-storybook/config.js

@@ -53,7 +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 }),
-    displayName: key => startCase(key).toLowerCase(),
+    makeDisplayName: key => startCase(key).toLowerCase(),
   },
   backgrounds: [
     { name: 'storybook app', value: themes.light.appBg, default: true },

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, { defaultDisplayName } from './client_api';
+import ClientApi, { defaultMakeDisplayName } from './client_api';
 import ConfigApi from './config_api';
 import StoryStore from './story_store';
 
@@ -26,15 +26,17 @@ jest.mock('@storybook/client-logger', () => ({
 }));
 
 describe('preview.client_api', () => {
-  describe('defaultDisplayName', () => {
-    it('should format CSF with sensible defaults', () => {
+  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(defaultDisplayName(key)).toBe(val));
+      Object.entries(testCases).forEach(([key, val]) =>
+        expect(defaultMakeDisplayName(key)).toBe(val)
+      );
     });
   });
 

lib/client-api/src/client_api.ts

@@ -83,7 +83,7 @@ const withSubscriptionTracking = (storyFn: StoryFn) => {
   return result;
 };
 
-export const defaultDisplayName = (key: string) => startCase(key);
+export const defaultMakeDisplayName = (key: string) => startCase(key);
 
 export default class ClientApi {
   private _storyStore: StoryStore;
@@ -126,9 +126,9 @@ export default class ClientApi {
       this._globalParameters.options
     );
 
-  getDisplayName = () =>
-    (this._globalParameters.options && this._globalParameters.options.displayName) ||
-    defaultDisplayName;
+  getMakeDisplayName = () =>
+    (this._globalParameters.options && this._globalParameters.options.makeDisplayName) ||
+    defaultMakeDisplayName;
 
   addDecorator = (decorator: DecoratorFunction) => {
     this._globalDecorators.push(decorator);

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

@@ -399,7 +399,7 @@ export default function start(render, { decorateStory } = {}) {
       const kind = clientApi.storiesOf(kindName, true);
 
       // Transform the CSF named export if the user hasn't specified a name
-      const displayName = clientApi.getDisplayName();
+      const makeDisplayName = clientApi.getMakeDisplayName();
 
       // we should always have a framework, rest optional
       kind.addParameters({ framework, component, ...params });
@@ -418,7 +418,7 @@ export default function start(render, { decorateStory } = {}) {
           }
           const decoratorParams = decorators ? { decorators } : null;
           const displayNameParams = {
-            displayName: name || displayName(key),
+            displayName: name || makeDisplayName(key),
           };
           kind.add(key, storyFn, { ...parameters, ...decoratorParams, ...displayNameParams });
         }