Codemod: Use camelcase vars to codemod story names with whitespace

lib/codemod/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "core-js": "^3.0.1",
     "jscodeshift": "^0.6.3",
+    "lodash": "^4.17.11",
     "prettier": "^1.16.4",
     "regenerator-runtime": "^0.12.1"
   },

lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js

@@ -10,19 +10,19 @@ export default {
 };
 
 export const story1 = () => <Button label="Story 1" />;
-export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
 
-story2.story = {
+secondStory.story = {
   name: 'second story',
 };
 
-export const story3 = () => (
+export const complexStory = () => (
   <div>
     <Button label="The Button" onClick={action('onClick')} />
     <br />
   </div>
 );
 
-story3.story = {
+complexStory.story = {
   name: 'complex story',
 };

lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js

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

lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js

@@ -12,8 +12,8 @@ export default {
   },
 };
 
-export const story1 = () => <Button label="The Button" />;
+export const withKindParameters = () => <Button label="The Button" />;
 
-story1.story = {
+withKindParameters.story = {
   name: 'with kind parameters',
 };

lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js

@@ -6,9 +6,9 @@ export default {
   title: 'Button',
 };
 
-export const story1 = () => <Button label="The Button" />;
+export const withStoryParameters = () => <Button label="The Button" />;
 
-story1.story = {
+withStoryParameters.story = {
   name: 'with story parameters',
 
   parameters: {

lib/codemod/src/transforms/convert-to-module-format.js

@@ -1,4 +1,5 @@
 import prettier from 'prettier';
+import camelCase from 'lodash/camelCase';
 
 /**
  * Convert a legacy story file to module format
@@ -28,7 +29,6 @@ export default function transformer(file, api, options) {
   function convertToModuleExports(path) {
     const base = j(path);
 
-    let counter = 1;
     const statements = [];
     const extraExports = [];
 
@@ -104,7 +104,7 @@ export default function transformer(file, api, options) {
       let name = null;
       if (/\s/.exec(key)) {
         name = key;
-        key = `story${counter}`;
+        key = camelCase(key);
       }
       const val = add.node.arguments[1];
       statements.push(
@@ -134,8 +134,6 @@ export default function transformer(file, api, options) {
           )
         );
       }
-
-      counter += 1;
     });
 
     statements.reverse();