From a6c21204e657a58c53fd7e12e2bc327a02150cc1 Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Mon, 29 Jul 2019 18:14:31 +0800
Subject: [PATCH] CLI: Fix storiesof-to-csf migration w/punctuation

---
 .../mdx-compiler-plugin.test.js.snap          | 10 ++++++++-
 addons/docs/fixtures/story-definitions.mdx    |  4 ++++
 .../src/lib/{isReserved.js => utils.js}       | 10 +++++++++
 lib/codemod/src/lib/utils.test.js             | 14 +++++++++++++
 .../mdx-to-csf/basic.input.js                 |  6 +++++-
 .../mdx-to-csf/basic.output.js                |  6 ++++++
 .../storiesof-to-csf/basic.input.js           |  3 ++-
 .../storiesof-to-csf/basic.output.js          |  6 ++++++
 lib/codemod/src/transforms/mdx-to-csf.js      |  8 ++-----
 .../src/transforms/storiesof-to-csf.js        | 21 ++++++-------------
 10 files changed, 64 insertions(+), 24 deletions(-)
 rename lib/codemod/src/lib/{isReserved.js => utils.js} (68%)
 create mode 100644 lib/codemod/src/lib/utils.test.js

diff --git a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
index 1f7f247a54a..9e918e0b420 100644
--- a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
+++ b/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 }) => (
diff --git a/addons/docs/fixtures/story-definitions.mdx b/addons/docs/fixtures/story-definitions.mdx
index ee5c355b989..74dc5db7a0d 100644
--- a/addons/docs/fixtures/story-definitions.mdx
+++ b/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>
diff --git a/lib/codemod/src/lib/isReserved.js b/lib/codemod/src/lib/utils.js
similarity index 68%
rename from lib/codemod/src/lib/isReserved.js
rename to lib/codemod/src/lib/utils.js
index 99d1b7e9e8e..822774440a2 100644
--- a/lib/codemod/src/lib/isReserved.js
+++ b/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;
+};
diff --git a/lib/codemod/src/lib/utils.test.js b/lib/codemod/src/lib/utils.test.js
new file mode 100644
index 00000000000..54cc14eabea
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.input.js b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.input.js
index 816062e09b9..fc45a6e5850 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.input.js
+++ b/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>
\ No newline at end of file
+  </div></Story>
+
+<Story name='w/punctuation'>
+  <Button label='w/punctuation'/>
+</Story>
\ No newline at end of file
diff --git a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.js
index 8f65e15fce6..ec7c181b573 100644
--- a/lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/basic.output.js
+++ b/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',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js
index 962bbf6d8d5..459203a0429 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.input.js
+++ b/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')} />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.js
index 169a5b3ebc9..f5e86149cc1 100644
--- a/lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/basic.output.js
+++ b/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',
+};
diff --git a/lib/codemod/src/transforms/mdx-to-csf.js b/lib/codemod/src/transforms/mdx-to-csf.js
index 3c4c20936df..776ad4ea77d 100644
--- a/lib/codemod/src/transforms/mdx-to-csf.js
+++ b/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;
diff --git a/lib/codemod/src/transforms/storiesof-to-csf.js b/lib/codemod/src/transforms/storiesof-to-csf.js
index 393d48e3082..1fe45368471 100644
--- a/lib/codemod/src/transforms/storiesof-to-csf.js
+++ b/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(