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,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',
+  };
+}"
+`;