CLI: Fix various storiesof-to-csf cases based on chromatic stor… (#9013)

CLI: Fix various storiesof-to-csf cases based on chromatic stories upgrade

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

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ComponentRow from './ComponentRow';
+import * as SpecRowStories from './SpecRow.stories';
+
+export const { actions } = SpecRowStories;
+
+storiesOf('ComponentRow', module).add('pending', () => (
+  <ComponentRow snapshots={snapshots.pending} buildNumber={2} {...actions} />
+));

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "export-destructuring.input.js" data 1`] = `
+"/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import ComponentRow from './ComponentRow';
+import * as SpecRowStories from './SpecRow.stories';
+
+export const { actions } = SpecRowStories;
+
+export default {
+  title: 'ComponentRow',
+  excludeStories: ['actions'],
+};
+
+export const Pending = () => (
+  <ComponentRow snapshots={snapshots.pending} buildNumber={2} {...actions} />
+);
+
+Pending.story = {
+  name: 'pending',
+};"
+`;

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

@@ -0,0 +1,12 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import ComponentItem from './ComponentItem';
+
+export function someHelper() {
+  return 5;
+}
+
+storiesOf('ComponentItem', module)
+  .addDecorator(storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
+  .add('loading', () => <ComponentItem loading />);

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "export-function.input.js" data 1`] = `
+"/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import ComponentItem from './ComponentItem';
+
+export function someHelper() {
+  return 5;
+}
+
+export default {
+  title: 'ComponentItem',
+  decorators: [storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>],
+  excludeStories: ['someHelper'],
+};
+
+export const Loading = () => <ComponentItem loading />;
+
+Loading.story = {
+  name: 'loading',
+};"
+`;

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

@@ -0,0 +1,14 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import FlexCenter from './FlexCenter';
+import { specs, urls } from './LiveView.stories';
+import { ignoredRegions } from './IgnoredRegions.stories';
+
+export { specs, urls, ignoredRegions };
+
+storiesOf('FlexCenter', module).add('2:1', () => (
+  <FlexCenter width={200} height={100} style={{ background: 'papayawhip' }}>
+    <div style={{ padding: 30, background: 'hotpink' }}>2:1</div>
+  </FlexCenter>
+));

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "export-names.input.js" data 1`] = `
+"/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import FlexCenter from './FlexCenter';
+import { specs, urls } from './LiveView.stories';
+import { ignoredRegions } from './IgnoredRegions.stories';
+
+export { specs, urls, ignoredRegions };
+
+export default {
+  title: 'FlexCenter',
+  excludeStories: ['specs', 'urls', 'ignoredRegions'],
+};
+
+export const _21 = () => (
+  <FlexCenter width={200} height={100} style={{ background: 'papayawhip' }}>
+    <div style={{ padding: 30, background: 'hotpink' }}>2:1</div>
+  </FlexCenter>
+);
+
+_21.story = {
+  name: '2:1',
+};"
+`;

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters-as-var.input.js

@@ -0,0 +1,8 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Canvas from './Canvas';
+
+const CHROMATIC_DELAY = { chromatic: { delay: 500 } };
+
+storiesOf('Canvas', module).add('loading', () => <Canvas loading />, CHROMATIC_DELAY);

lib/codemod/src/transforms/__testfixtures__/storiesof-to-csf/parameters-as-var.output.snapshot

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "parameters-as-var.input.js" data 1`] = `
+"/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import Canvas from './Canvas';
+
+const CHROMATIC_DELAY = { chromatic: { delay: 500 } };
+
+export default {
+  title: 'Canvas',
+};
+
+export const Loading = () => <Canvas loading />;
+
+Loading.story = {
+  name: 'loading',
+  parameters: CHROMATIC_DELAY,
+};"
+`;

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

@@ -0,0 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Hero from './Hero';
+
+const chapter = storiesOf('Webapp screens/Marketing/LandingScreen/Hero', module).add(
+  'default',
+  () => <Hero />
+);
+
+chapter.add('loading', () => <Hero loading />);

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

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "storiesof-var.input.js" data 1`] = `
+"/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import Hero from './Hero';
+
+export default {
+  title: 'Webapp screens/Marketing/LandingScreen/Hero',
+};
+
+export const Default = () => <Hero />;
+
+Default.story = {
+  name: 'default',
+};
+
+export const Loading = () => <Hero loading />;
+
+Loading.story = {
+  name: 'loading',
+};"
+`;

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

@@ -32,6 +32,9 @@ export default function transformer(file, api, options) {
     if (!parameters) {
       return {};
     }
+    if (!parameters.properties) {
+      return { storyParams: parameters };
+    }
     let storyDecorators = parameters.properties.find(p => p.key.name === 'decorators');
     if (!storyDecorators) {
       return { storyParams: parameters };
@@ -177,9 +180,11 @@ export default function transformer(file, api, options) {
       }
     });
 
+    const stmt = path.parent.node.type === 'VariableDeclarator' ? path.parent.parent : path.parent;
+
     statements.reverse();
-    statements.forEach(s => path.parent.insertAfter(s));
-    base.remove();
+    statements.forEach(s => stmt.insertAfter(s));
+    j(stmt).remove();
   }
 
   // Save the original storiesOf
@@ -202,17 +207,34 @@ export default function transformer(file, api, options) {
 
   // Exclude all the original named exports
   const originalExports = [];
-  root
-    .find(j.ExportNamedDeclaration)
-    .forEach(exp => originalExports.push(exp.node.declaration.declarations[0].id.name));
+  root.find(j.ExportNamedDeclaration).forEach(exp => {
+    const { declaration, specifiers } = exp.node;
+    if (declaration) {
+      const { id, declarations } = declaration;
+      if (declarations) {
+        declarations.forEach(decl => {
+          const { name, properties } = decl.id;
+          if (name) {
+            originalExports.push(name);
+          } else if (properties) {
+            properties.forEach(prop => originalExports.push(prop.key.name));
+          }
+        });
+      } else if (id) {
+        originalExports.push(id.name);
+      }
+    } else if (specifiers) {
+      specifiers.forEach(spec => originalExports.push(spec.exported.name));
+    }
+  });
 
   // each top-level add expression corresponds to the last "add" of the chain.
   // replace it with the entire export statements
   root
     .find(j.CallExpression)
     .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
     .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
-    .filter(add => add.parentPath.node.type === 'ExpressionStatement')
+    .filter(add => ['ExpressionStatement', 'VariableDeclarator'].includes(add.parentPath.node.type))
     .forEach(path => convertToModuleExports(path, originalExports));
 
   // remove storiesOf import