CLI: Avoid id changes after storiesof-to-csf migration

lib/codemod/src/lib/utils.js

@@ -1,14 +1,8 @@
 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);
+import upperFirst from 'lodash/upperFirst';
 
 export const sanitizeName = name => {
-  let key = camelCase(name);
-  if (isReserved(key)) {
-    key = `${key}Story`;
-  }
+  let key = upperFirst(camelCase(name));
   // prepend _ if name starts with a digit
   if (/^\d/.test(key)) {
     key = `_${key}`;

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

@@ -1,14 +1,9 @@
 import { sanitizeName } from './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);
-  });
+  expect(sanitizeName('basic')).toMatchInlineSnapshot(`"Basic"`);
+  expect(sanitizeName('with space')).toMatchInlineSnapshot(`"WithSpace"`);
+  expect(sanitizeName('default')).toMatchInlineSnapshot(`"Default"`);
+  expect(sanitizeName('w/punctuation')).toMatchInlineSnapshot(`"WPunctuation"`);
+  expect(sanitizeName('5')).toMatchInlineSnapshot(`"_5"`);
 });

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

@@ -9,27 +9,32 @@ export default {
   title: 'Button',
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;
-export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const Story1 = () => <Button label=\\"Story 1\\" />;
 
-secondStory.story = {
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
   name: 'second story',
 };
 
-export const complexStory = () => (
+export const ComplexStory = () => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-complexStory.story = {
+ComplexStory.story = {
   name: 'complex story',
 };
 
-export const wPunctuation = () => <Button label=\\"w/punctuation\\" />;
+export const WPunctuation = () => <Button label=\\"w/punctuation\\" />;
 
-wPunctuation.story = {
+WPunctuation.story = {
   name: 'w/punctuation',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot

@@ -9,5 +9,9 @@ export default {
   id: 'button-id',
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;"
+export const Story1 = () => <Button label=\\"Story 1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};"
 `;

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/decorators.output.snapshot

@@ -9,9 +9,9 @@ export default {
   decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
 };
 
-export const withDecorator = () => <Button label=\\"The Button\\" />;
+export const WithDecorator = () => <Button label=\\"The Button\\" />;
 
-withDecorator.story = {
+WithDecorator.story = {
   name: 'with decorator',
   decorators: [withKnobs],
 };"

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot

@@ -11,24 +11,29 @@ export const rowData = {
 
 export default {
   title: 'Button',
-  includeStories: ['story1', 'secondStory', 'complexStory'],
+  includeStories: ['Story1', 'SecondStory', 'ComplexStory'],
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;
-export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const Story1 = () => <Button label=\\"Story 1\\" />;
 
-secondStory.story = {
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
   name: 'second story',
 };
 
-export const complexStory = () => (
+export const ComplexStory = () => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-complexStory.story = {
+ComplexStory.story = {
   name: 'complex story',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/parameters.output.snapshot

@@ -15,9 +15,9 @@ export default {
   },
 };
 
-export const withKindParameters = () => <Button label=\\"The Button\\" />;
+export const WithKindParameters = () => <Button label=\\"The Button\\" />;
 
-withKindParameters.story = {
+WithKindParameters.story = {
   name: 'with kind parameters',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/plaintext.output.snapshot

@@ -3,5 +3,9 @@
 exports[`mdx-to-csf transforms correctly using "plaintext.input.js" data 1`] = `
 "import React from 'react';
 export default {};
-export const plaintext = () => 'Plain text';"
+export const Plaintext = () => 'Plain text';
+
+Plaintext.story = {
+  name: 'plaintext',
+};"
 `;

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot

@@ -4,14 +4,14 @@ exports[`mdx-to-csf transforms correctly using "story-function.input.js" data 1`
 "import React from 'react';
 export default {};
 
-export const functionStory = () => {
+export const Function = () => {
   const btn = document.createElement('button');
   btn.innerHTML = 'Hello Button';
   btn.addEventListener('click', action('Click'));
   return btn;
 };
 
-functionStory.story = {
+Function.story = {
   name: 'function',
   height: '100px',
 };"

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-parameters.output.snapshot

@@ -9,9 +9,9 @@ export default {
   title: 'Button',
 };
 
-export const withStoryParameters = () => <Button label=\\"The Button\\" />;
+export const WithStoryParameters = () => <Button label=\\"The Button\\" />;
 
-withStoryParameters.story = {
+WithStoryParameters.story = {
   name: 'with story parameters',
 
   parameters: {
@@ -20,9 +20,11 @@ withStoryParameters.story = {
   },
 };
 
-export const foo = () => <Button label=\\"Foo\\" />;
+export const Foo = () => <Button label=\\"Foo\\" />;
+
+Foo.story = {
+  name: 'foo',
 
-foo.story = {
   parameters: {
     bar: 1,
   },

lib/codemod/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot

@@ -26,9 +26,9 @@ export default {
   },
 };
 
-export const soloStory = () => <Button onClick={action('clicked')}>solo</Button>;
+export const SoloStory = () => <Button onClick={action('clicked')}>solo</Button>;
 
-soloStory.story = {
+SoloStory.story = {
   name: 'solo story',
 };"
 `;

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

@@ -12,34 +12,34 @@ export default {
   title: 'Button',
 };
 
-export const story1 = () => <Button label=\\"Story 1\\" />;
+export const Story1 = () => <Button label=\\"Story 1\\" />;
 
-story1.story = {
+Story1.story = {
   name: 'story1',
 };
 
-export const secondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
 
-secondStory.story = {
+SecondStory.story = {
   name: 'second story',
 };
 
-export const complexStory = () => (
+export const ComplexStory = () => (
   <div>
     <Button label=\\"The Button\\" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-complexStory.story = {
+ComplexStory.story = {
   name: 'complex story',
 };
 
-export const wPunctuation = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+export const WPunctuation = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
 
-wPunctuation.story = {
+WPunctuation.story = {
   name: 'w/punctuation',
 };
 
-export const startCase = () => <Button label=\\"Story 2\\" onClick={action('click')} />;"
+export const StartCase = () => <Button label=\\"Story 2\\" onClick={action('click')} />;"
 `;

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

@@ -1,11 +1,11 @@
-export const foo = 1;
-const bar = 1;
-const barStory = 1;
-const baz = 1;
-const bazStory1 = 1;
+export const Foo = 1;
+const Bar = 1;
+const _Bar = 1;
+const Baz = 1;
+const __Baz = 1;
 
 storiesOf('foo', module)
   .add('foo', () => <button />)
   .add('bar', () => <button />)
-  .add('bazStory', () => <button />)
+  .add('_baz', () => <button />)
   .add('baz', () => <button />);

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/collision.output.snapshot

@@ -1,38 +1,38 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`storiesof-to-csf transforms correctly using "collision.input.js" data 1`] = `
-"export const foo = 1;
-const bar = 1;
-const barStory = 1;
-const baz = 1;
-const bazStory1 = 1;
+"export const Foo = 1;
+const Bar = 1;
+const _Bar = 1;
+const Baz = 1;
+const __Baz = 1;
 
 export default {
   title: 'foo',
-  excludeStories: ['foo'],
+  excludeStories: ['Foo'],
 };
 
-export const fooStory = () => <button />;
+export const _Foo = () => <button />;
 
-fooStory.story = {
+_Foo.story = {
   name: 'foo',
 };
 
-export const barStory1 = () => <button />;
+export const __Bar = () => <button />;
 
-barStory1.story = {
+__Bar.story = {
   name: 'bar',
 };
 
-export const bazStory = () => <button />;
+export const _Baz = () => <button />;
 
-bazStory.story = {
-  name: 'bazStory',
+_Baz.story = {
+  name: '_baz',
 };
 
-export const bazStory2 = () => <button />;
+export const ___Baz = () => <button />;
 
-bazStory2.story = {
+___Baz.story = {
   name: 'baz',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/const.output.snapshot

@@ -5,9 +5,9 @@ exports[`storiesof-to-csf transforms correctly using "const.input.js" data 1`] =
   title: 'bar',
 };
 
-export const constStory = () => <button />;
+export const Const = () => <button />;
 
-constStory.story = {
+Const.story = {
   name: 'const',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/decorators.output.snapshot

@@ -10,9 +10,9 @@ export default {
   decorators: [withKnobs, storyFn => <div className=\\"foo\\">{storyFn}</div>],
 };
 
-export const withDecorator = () => <Button label=\\"The Button\\" />;
+export const WithDecorator = () => <Button label=\\"The Button\\" />;
 
-withDecorator.story = {
+WithDecorator.story = {
   name: 'with decorator',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/default.output.snapshot

@@ -9,9 +9,9 @@ export default {
   title: 'Button',
 };
 
-export const defaultStory = () => <Button label=\\"Story 1\\" />;
+export const Default = () => <Button label=\\"Story 1\\" />;
 
-defaultStory.story = {
+Default.story = {
   name: 'default',
 };"
 `;

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/exports.output.snapshot

@@ -8,9 +8,9 @@ export default {
   excludeStories: ['foo'],
 };
 
-export const baz = () => <button />;
+export const Baz = () => <button />;
 
-baz.story = {
+Baz.story = {
   name: 'baz',
 };"
 `;