@storybook/codemod 0.0.0-pr-23609-sha-f47ef339

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

package/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 />);

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

package/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>
+));

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

package/src/transforms/__testfixtures__/storiesof-to-csf/exports.input.js

@@ -0,0 +1,2 @@
+export const foo = 1;
+storiesOf('bar', module).add('baz', () => <button />);

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "exports.input.js" data 1`] = `
+"export const foo = 1;
+
+export default {
+  title: 'bar',
+  excludeStories: ['foo'],
+};
+
+export const Baz = () => <button />;
+
+Baz.story = {
+  name: 'baz',
+};"
+`;

package/src/transforms/__testfixtures__/storiesof-to-csf/module.input.js

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'foo',
+};
+
+const bar = 1;
+
+storiesOf('foo', module).add('bar', () => <Button />);

package/src/transforms/__testfixtures__/storiesof-to-csf/module.output.snapshot

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "module.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'foo',
+};
+
+const bar = 1;
+
+storiesOf('foo', module).add('bar', () => <Button />);"
+`;

package/src/transforms/__testfixtures__/storiesof-to-csf/multi.input.js

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// If we have multiple storiesOf calls, export multiple defaults. It's not valid
+// JS but will still save the user time in converting.
+
+storiesOf('Button1', module)
+  .add('story1', () => <Button label="Button1.1" />)
+  .add('story2', () => <Button label="Button1.2" />);
+
+storiesOf('Button2', module)
+  .add('story1', () => <Button label="Button2.1" />)
+  .add('story2', () => <Button label="Button2.2" />);

package/src/transforms/__testfixtures__/storiesof-to-csf/multi.output.snapshot

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "multi.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button1',
+};
+
+export const Story1 = () => <Button label=\\"Button1.1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};
+
+export const Story2 = () => <Button label=\\"Button1.2\\" />;
+
+Story2.story = {
+  name: 'story2',
+};
+
+export default {
+  title: 'Button2',
+};
+
+export const _Story1 = () => <Button label=\\"Button2.1\\" />;
+
+_Story1.story = {
+  name: 'story1',
+};
+
+export const _Story2 = () => <Button label=\\"Button2.2\\" />;
+
+_Story2.story = {
+  name: 'story2',
+};"
+`;

package/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);

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

package/src/transforms/__testfixtures__/storiesof-to-csf/parameters.input.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+  .addParameters({ component: Button, foo: 1 })
+  .addParameters({ bar: 2 })
+  .add('with kind parameters', () => <Button label="The Button" />);

package/src/transforms/__testfixtures__/storiesof-to-csf/parameters.output.snapshot

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "parameters.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+
+  parameters: {
+    component: Button,
+    foo: 1,
+    bar: 2,
+  },
+};
+
+export const WithKindParameters = () => <Button label=\\"The Button\\" />;
+
+WithKindParameters.story = {
+  name: 'with kind parameters',
+};"
+`;

package/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 />);

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

package/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.input.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import Button from './Button';
+
+storiesOf('Some.Button', module)
+  .add('with story params and decorators', () => <Button label="The Button" />, {
+    bar: 1,
+    decorators: [withKnobs, (storyFn) => <div className="foo">{storyFn}</div>],
+  })
+  .add('with story decorators', () => <Button label="The Button" />, {
+    decorators: [withKnobs],
+  });

package/src/transforms/__testfixtures__/storiesof-to-csf/story-decorators.output.snapshot

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "story-decorators.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Some.Button',
+};
+
+export const WithStoryParamsAndDecorators = () => <Button label=\\"The Button\\" />;
+
+WithStoryParamsAndDecorators.story = {
+  name: 'with story params and decorators',
+
+  parameters: {
+    bar: 1,
+  },
+
+  decorators: [withKnobs, (storyFn) => <div className=\\"foo\\">{storyFn}</div>],
+};
+
+export const WithStoryDecorators = () => <Button label=\\"The Button\\" />;
+
+WithStoryDecorators.story = {
+  name: 'with story decorators',
+  decorators: [withKnobs],
+};"
+`;

package/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.input.js

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+  .add('with story parameters', () => <Button label="The Button" />, {
+    header: false,
+    inline: true,
+  })
+  .add('foo', () => <Button label="Foo" />, {
+    bar: 1,
+  });

package/src/transforms/__testfixtures__/storiesof-to-csf/story-parameters.output.snapshot

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "story-parameters.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+};
+
+export const WithStoryParameters = () => <Button label=\\"The Button\\" />;
+
+WithStoryParameters.story = {
+  name: 'with story parameters',
+
+  parameters: {
+    header: false,
+    inline: true,
+  },
+};
+
+export const Foo = () => <Button label=\\"Foo\\" />;
+
+Foo.story = {
+  name: 'foo',
+
+  parameters: {
+    bar: 1,
+  },
+};"
+`;

package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.input.js

@@ -0,0 +1,184 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button').addWithInfo(
+  'simple usage',
+  'This is the basic usage with the button with providing a label to show the text.',
+  () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+      <p>Click the "?" mark at top-right to view the info.</p>
+    </div>
+  )
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (inline info)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { inline: true }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (disable source)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { source: false, inline: true }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (no header)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { header: false, inline: true }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (no prop tables)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { propTables: false, inline: true }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (custom propTables)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+      Since, the story source code is wrapped inside a div, info addon can't figure out propTypes on it's own.
+      So, we need to give relevant React component classes manually using \`propTypes\` option as shown below:
+      ~~~js
+      storiesOf('Button')
+        .addWithInfo(
+          'simple usage (custom propTables)',
+          <info>,
+          <storyFn>,
+          { inline: true, propTables: [Button]}
+        );
+      ~~~
+    `,
+  () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+    </div>
+  ),
+  { inline: true, propTables: [Button] }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (JSX description)',
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
+    </p>
+    <p>
+      <img src="https://storybook.js.org/images/placeholders/350x150.png" />
+    </p>
+  </div>,
+  () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+      <p>Click the "?" mark at top-right to view the info.</p>
+    </div>
+  )
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (inline JSX description)',
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
+    </p>
+    <p>
+      <img src="https://storybook.js.org/images/placeholders/350x150.png" />
+    </p>
+  </div>,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { inline: true }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropsInLine === 1)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  { inline: true, maxPropsIntoLine: 1 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropObjectKeys === 5)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />,
+  { inline: true, maxPropObjectKeys: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropArrayLength === 8)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />,
+  { inline: true, maxPropArrayLength: 8 }
+);
+
+storiesOf('Button').addWithInfo(
+  'simple usage (maxPropStringLength === 10)',
+  `
+      This is the basic usage with the button with providing a label to show the text.
+    `,
+  () => <Button label="The Button" string="1 2 3 4 5 6 7 8" />,
+  { inline: true, maxPropStringLength: 5 }
+);
+
+storiesOf('Button').addWithInfo(
+  'with custom styles',
+  `
+      This is an example of how to customize the styles of the info components.
+      For the full styles available, see \`./src/components/Story.js\`
+    `,
+  () => <Button label="The Button" onClick={action('onClick')} />,
+  {
+    inline: true,
+    styles: (stylesheet) => {
+      stylesheet.infoPage = {
+        backgroundColor: '#ccc',
+      };
+      return stylesheet;
+    },
+  }
+);
+
+storiesOf('shared/ProgressBar', module)
+  .addDecorator(withKnobs)
+  .addWithInfo('default style', () => (
+    <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
+  ));