CLI: Fix storiesof-to-csf migration w/punctuation

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

@@ -504,6 +504,9 @@ function MDXContent({ components, ...props }) {
       <Story name=\\"hello story\\" mdxType=\\"Story\\">
         <Button mdxType=\\"Button\\">Hello button</Button>
       </Story>
+      <Story name=\\"w/punctuation\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">with punctuation</Button>
+      </Story>
     </MDXLayout>
   );
 }
@@ -519,7 +522,12 @@ helloStory.story = {};
 helloStory.story.name = 'hello story';
 helloStory.story.parameters = { mdxSource: '<Button>Hello button</Button>' };
 
-const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
+export const wPunctuation = () => <Button>with punctuation</Button>;
+wPunctuation.story = {};
+wPunctuation.story.name = 'w/punctuation';
+wPunctuation.story.parameters = { mdxSource: '<Button>with punctuation</Button>' };
+
+const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory', 'wPunctuation'] };
 
 const mdxKind = componentMeta.title || componentMeta.displayName;
 const WrappedMDXContent = ({ context }) => (

addons/docs/fixtures/story-definitions.mdx

@@ -12,3 +12,7 @@ import { Story, Meta } from '@storybook/addon-docs/blocks';
 <Story name="hello story">
   <Button>Hello button</Button>
 </Story>
+
+<Story name="w/punctuation">
+  <Button>with punctuation</Button>
+</Story>

lib/codemod/src/lib/utils.js

@@ -1,3 +1,13 @@
+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);
+
+export const sanitizeName = name => {
+  let key = camelCase(name);
+  if (isReserved(key)) {
+    key = `${key}Story`;
+  }
+  return key;
+};

lib/codemod/src/lib/utils.test.js

@@ -0,0 +1,14 @@
+import { sanitizeName } from '@storybook/router/src/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);
+  });
+});

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.input.js

@@ -11,4 +11,8 @@ import { Meta, Story } from '@storybook/addon-docs/blocks';
 <Story name='complex story'><div>
     <Button label='The Button' onClick={action('onClick')} />
     <br />
-  </div></Story>
+  </div></Story>
+
+<Story name='w/punctuation'>
+  <Button label='w/punctuation'/>
+</Story>

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.js

@@ -23,3 +23,9 @@ export const complexStory = () => (
 complexStory.story = {
   name: 'complex story',
 };
+
+export const wPunctuation = () => <Button label="w/punctuation" />;
+
+wPunctuation.story = {
+  name: 'w/punctuation',
+};

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js

@@ -13,4 +13,5 @@ storiesOf('Button', module)
       <Button label="The Button" onClick={action('onClick')} />
       <br />
     </div>
-  ));
+  ))
+  .add('w/punctuation', () => <Button label="Story 2" onClick={action('click')} />);

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.js

@@ -26,3 +26,9 @@ export const complexStory = () => (
 complexStory.story = {
   name: 'complex story',
 };
+
+export const wPunctuation = () => <Button label="Story 2" onClick={action('click')} />;
+
+wPunctuation.story = {
+  name: 'w/punctuation',
+};

lib/codemod/src/transforms/mdx-to-csf.js

@@ -1,8 +1,7 @@
 // import recast from 'recast';
-import camelCase from 'lodash/camelCase';
 import mdx from '@mdx-js/mdx';
 import prettier from 'prettier';
-import { isReserved } from '../lib/isReserved';
+import { sanitizeName } from '../lib/utils';
 
 /**
  * Convert a compponent's MDX file into module story format
@@ -57,10 +56,7 @@ export default function transformer(file, api) {
       .forEach(elt => {
         const attrs = parseJsxAttributes(elt.node.openingElement.attributes);
         if (attrs.name) {
-          let storyKey = camelCase(attrs.name.value);
-          if (isReserved(storyKey)) {
-            storyKey = `${storyKey}Story`;
-          }
+          const storyKey = sanitizeName(attrs.name.value);
           includeStories.push(storyKey);
           if (storyKey === attrs.name.value) {
             delete attrs.name;

lib/codemod/src/transforms/storiesof-to-csf.js

@@ -1,7 +1,6 @@
 import prettier from 'prettier';
-import camelCase from 'lodash/camelCase';
 import { logger } from '@storybook/node-logger';
-import { isReserved } from '../lib/isReserved';
+import { sanitizeName } from '../lib/utils';
 
 /**
  * Convert a legacy story API to component story format
@@ -129,22 +128,14 @@ export default function transformer(file, api, options) {
     adds.push(path);
 
     adds.forEach(add => {
-      let key = add.node.arguments[0].value;
-      let name = null;
-      if (/\s/.exec(key)) {
-        name = key;
-        key = camelCase(key);
-      } else if (isReserved(key)) {
-        name = key;
-        key = `${key}Story`;
-      }
-
+      let name = add.node.arguments[0].value;
+      let key = sanitizeName(name);
       if (originalExports.includes(key)) {
-        if (!name) {
-          name = key;
-        }
         key = `story${counter}`;
       }
+      if (key === name) {
+        name = null;
+      }
 
       const val = add.node.arguments[1];
       statements.push(