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,16 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import ComponentRow, { PureComponentRow } from './ComponentRow';
+import * as SpecRowStories from './SpecRow.stories';
+import Table from '../../components/Table';
+
+const specNames = ['Default', 'Low data', 'empty', 'something', 'extra one'];
+
+export const { actions } = SpecRowStories;
+
+storiesOf('Webapp screens/Build/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,28 @@
+// 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 { action } from '@storybook/addon-actions';
+
+import ComponentRow, { PureComponentRow } from './ComponentRow';
+import * as SpecRowStories from './SpecRow.stories';
+import Table from '../../components/Table';
+
+const specNames = ['Default', 'Low data', 'empty', 'something', 'extra one'];
+
+export const { actions } = SpecRowStories;
+
+export default {
+  title: 'Webapp screens/Build/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,47 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+import ComponentItem from './ComponentItem';
+import {
+  componentRepresentations as imageComponentRepresentations,
+  makeSimpleComponentRepresentation as imageMakeSimpleComponentRepresentation,
+} from './ComponentRepresentationImage.stories';
+
+function Item({ ...props }) {
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: 230,
+        outline: '1px dotted red',
+        margin: '7.5px',
+      }}
+    >
+      <ComponentItem {...props} />
+    </div>
+  );
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const componentRepresentations = Object.entries(imageComponentRepresentations).reduce(
+  (acc, [key, componentRepresentation]) => ({
+    ...acc,
+    [key]: {
+      ...componentRepresentation,
+      webPath: '/component',
+      specCount: 3,
+    },
+  }),
+  {}
+);
+
+export function makeSimpleComponentRepresentation({}) {
+  return 5;
+}
+
+storiesOf('Webapp components/ComponentItem', module)
+  .addDecorator(storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>)
+  .add('loading', () => <Item loading />)
+  .add('in progress', () => <Item componentRepresentation={componentRepresentations.inProgress} />);

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

@@ -0,0 +1,65 @@
+// 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';
+import {
+  componentRepresentations as imageComponentRepresentations,
+  makeSimpleComponentRepresentation as imageMakeSimpleComponentRepresentation,
+} from './ComponentRepresentationImage.stories';
+
+function Item({ ...props }) {
+  return (
+    <div
+      style={{
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: 230,
+        outline: '1px dotted red',
+        margin: '7.5px',
+      }}
+    >
+      <ComponentItem {...props} />
+    </div>
+  );
+}
+
+// eslint-disable-next-line import/prefer-default-export
+export const componentRepresentations = Object.entries(imageComponentRepresentations).reduce(
+  (acc, [key, componentRepresentation]) => ({
+    ...acc,
+    [key]: {
+      ...componentRepresentation,
+      webPath: '/component',
+      specCount: 3,
+    },
+  }),
+  {}
+);
+
+export function makeSimpleComponentRepresentation({}) {
+  return 5;
+}
+
+export default {
+  title: 'Webapp components/ComponentItem',
+  decorators: [storyFn => <div style={{ margin: '1rem' }}>{storyFn()}</div>],
+  excludeStories: ['componentRepresentations', 'makeSimpleComponentRepresentation'],
+};
+
+export const Loading = () => <Item loading />;
+
+Loading.story = {
+  name: 'loading',
+};
+
+export const InProgress = () => (
+  <Item componentRepresentation={componentRepresentations.inProgress} />
+);
+
+InProgress.story = {
+  name: 'in progress',
+};"
+`;

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

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import styled from 'styled-components';
+
+import FlexCenter from './FlexCenter';
+import { specs, urls } from './LiveView.stories';
+import { ignoredRegions } from './IgnoredRegions.stories';
+
+export { specs, urls, ignoredRegions };
+
+const CanvasWrapper = styled.div`
+  width: 50%;
+`;
+
+storiesOf('Webapp components/FlexCenter', module)
+  .addDecorator(storyFn => <CanvasWrapper>{storyFn()}</CanvasWrapper>)
+  .add('2:1', () => (
+    <FlexCenter width={200} height={100} style={{ background: 'papayawhip' }}>
+      <div style={{ padding: 30, background: 'hotpink' }}>2:1</div>
+    </FlexCenter>
+  ))
+  .add('2:2', () => (
+    <FlexCenter width={200} height={200} style={{ background: 'papayawhip' }}>
+      <div style={{ padding: 30, background: 'hotpink' }}>2:2</div>
+    </FlexCenter>
+  ))
+  .add('2:3', () => (
+    <FlexCenter width={200} height={300} style={{ background: 'papayawhip' }}>
+      <div style={{ padding: 30, background: 'hotpink' }}>2:3</div>
+    </FlexCenter>
+  ));

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

@@ -0,0 +1,53 @@
+// 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 styled from 'styled-components';
+
+import FlexCenter from './FlexCenter';
+import { specs, urls } from './LiveView.stories';
+import { ignoredRegions } from './IgnoredRegions.stories';
+
+export { specs, urls, ignoredRegions };
+
+const CanvasWrapper = styled.div\`
+  width: 50%;
+\`;
+
+export default {
+  title: 'Webapp components/FlexCenter',
+  decorators: [storyFn => <CanvasWrapper>{storyFn()}</CanvasWrapper>],
+  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',
+};
+
+export const _22 = () => (
+  <FlexCenter width={200} height={200} style={{ background: 'papayawhip' }}>
+    <div style={{ padding: 30, background: 'hotpink' }}>2:2</div>
+  </FlexCenter>
+);
+
+_22.story = {
+  name: '2:2',
+};
+
+export const _23 = () => (
+  <FlexCenter width={200} height={300} style={{ background: 'papayawhip' }}>
+    <div style={{ padding: 30, background: 'hotpink' }}>2:3</div>
+  </FlexCenter>
+);
+
+_23.story = {
+  name: '2:3',
+};"
+`;

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

@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { specs, urls } from './LiveView.stories';
+import { ignoredRegions } from './IgnoredRegions.stories';
+export { specs, urls, ignoredRegions };
+
+const figure = 'http://via.placeholder.com/400x350';
+
+const captureImageSize = { width: 300, height: 300 };
+const CHROMATIC_DELAY = { chromatic: { delay: 500 } };
+
+storiesOf('Webapp components/Canvas', module)
+  .add(
+    'interactiveUrl w/ interactiveMode',
+    () => (
+      <Canvas
+        interactiveUrl={urls.storybook52}
+        interactiveMode="interactive"
+        figure={figure}
+        captureImageSize={captureImageSize}
+        spec={specs.basic}
+        showIgnoredRegions={false}
+      />
+    ),
+    CHROMATIC_DELAY
+  )
+  .add(
+    'wide short image',
+    () => (
+      <Canvas
+        figure="http://via.placeholder.com/900x350"
+        captureImageSize={{ width: 900, height: 350 }}
+        showIgnoredRegions={false}
+      />
+    ),
+    { chromatic: { viewports: [600, 1200] } }
+  );

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

@@ -0,0 +1,48 @@
+// 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 { specs, urls } from './LiveView.stories';
+import { ignoredRegions } from './IgnoredRegions.stories';
+export { specs, urls, ignoredRegions };
+
+const figure = 'http://via.placeholder.com/400x350';
+
+const captureImageSize = { width: 300, height: 300 };
+const CHROMATIC_DELAY = { chromatic: { delay: 500 } };
+
+export default {
+  title: 'Webapp components/Canvas',
+  excludeStories: ['specs', 'urls', 'ignoredRegions'],
+};
+
+export const InteractiveUrlWInteractiveMode = () => (
+  <Canvas
+    interactiveUrl={urls.storybook52}
+    interactiveMode=\\"interactive\\"
+    figure={figure}
+    captureImageSize={captureImageSize}
+    spec={specs.basic}
+    showIgnoredRegions={false}
+  />
+);
+
+InteractiveUrlWInteractiveMode.story = {
+  name: 'interactiveUrl w/ interactiveMode',
+  parameters: CHROMATIC_DELAY,
+};
+
+export const WideShortImage = () => (
+  <Canvas
+    figure=\\"http://via.placeholder.com/900x350\\"
+    captureImageSize={{ width: 900, height: 350 }}
+    showIgnoredRegions={false}
+  />
+);
+
+WideShortImage.story = {
+  name: 'wide short image',
+  parameters: { chromatic: { viewports: [600, 1200] } },
+};"
+`;

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

@@ -0,0 +1,14 @@
+/* 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 />)
+  .add('maintenanceMode', () => <Hero maintenanceMode />);
+
+// Remove this story from storyshots. Let's use the parameters API for this soon!
+if (typeof jest === 'undefined') {
+  chapter.add('video start open', () => <Hero startOpen />);
+}

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

@@ -0,0 +1,33 @@
+// 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 MaintenanceMode = () => <Hero maintenanceMode />;
+
+MaintenanceMode.story = {
+  name: 'maintenanceMode',
+};
+
+// Remove this story from storyshots. Let's use the parameters API for this soon!
+if (typeof jest === 'undefined') {
+  export const VideoStartOpen = () => <Hero startOpen />;
+
+  VideoStartOpen.story = {
+    name: 'video start open',
+  };
+}"
+`;

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,9 +207,26 @@ 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
@@ -212,7 +234,7 @@ export default function transformer(file, api, options) {
     .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