@storybook/codemod 7.0.0-alpha.7 → 7.0.0-beta.0

package/src/transforms/__testfixtures__/mdx-to-csf/story-function.output.snapshot

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "story-function.input.js" data 1`] = `
+"import React from 'react';
+export default {};
+
+export const Function = () => {
+  const btn = document.createElement('button');
+  btn.innerHTML = 'Hello Button';
+  btn.addEventListener('click', action('Click'));
+  return btn;
+};
+
+Function.story = {
+  name: 'function',
+  height: '100px',
+};"
+`;

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

@@ -0,0 +1,18 @@
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+<Story
+  name='with story parameters'
+  parameters={{
+    header: false,
+    inline: true,
+  }}><Button label='The Button' /></Story>
+
+<Story
+  name='foo'
+  parameters={{
+    bar: 1,
+  }}><Button label='Foo' /></Story>

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "story-parameters.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+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__/mdx-to-csf/story-refs.input.js

@@ -0,0 +1,22 @@
+import { Story, Meta } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+<Meta
+  title="Addons|Docs/mdx"
+  component={Button}
+  decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
+  parameters={{ notes: 'component notes' }}
+/>
+
+## Getting into details
+
+<Story name="solo story">
+  <Button onClick={action('clicked')}>solo</Button>
+</Story>
+
+<Source name="hello story" />
+
+## Configurable height
+
+<Story id="basics-button--all-buttons" height="400px" />

package/src/transforms/__testfixtures__/mdx-to-csf/story-refs.output.snapshot

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "story-refs.input.js" data 1`] = `
+"import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Addons|Docs/mdx',
+  component: Button,
+
+  decorators: [
+    (storyFn) => (
+      <div
+        style={{
+          backgroundColor: 'yellow',
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
+
+  parameters: {
+    notes: 'component notes',
+  },
+};
+
+export const SoloStory = () => <Button onClick={action('clicked')}>solo</Button>;
+
+SoloStory.story = {
+  name: 'solo story',
+};"
+`;

package/src/transforms/__testfixtures__/move-builtin-addons/default.input.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+import { storyOf, action, linkTo } from '@storybook/react';

package/src/transforms/__testfixtures__/move-builtin-addons/default.output.snapshot

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`move-builtin-addons transforms correctly using "default.input.js" data 1`] = `
+"/* eslint-disable */
+import { storyOf } from '@storybook/react';
+import { linkTo } from '@storybook/addon-links';
+import { action } from '@storybook/addon-actions';"
+`;

package/src/transforms/__testfixtures__/move-builtin-addons/with-no-change.input.js

@@ -0,0 +1,3 @@
+/* eslint-disable */
+import { action } from '@kadira/storybook-addons';
+import { storyOf } from '@storybook/react';

package/src/transforms/__testfixtures__/move-builtin-addons/with-no-change.output.snapshot

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`move-builtin-addons transforms correctly using "with-no-change.input.js" data 1`] = `
+"/* eslint-disable */
+import { action } from '@kadira/storybook-addons';
+import { storyOf } from '@storybook/react';"
+`;

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

@@ -0,0 +1,18 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module)
+  .add('story1', () => <Button label="Story 1" />)
+  .add('second story', () => <Button label="Story 2" onClick={action('click')} />)
+  .add('complex story', () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+    </div>
+  ))
+  .add('w/punctuation', () => <Button label="Story 2" onClick={action('click')} />)
+  .add('Start Case', () => <Button label="Story 2" onClick={action('click')} />);

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

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`storiesof-to-csf transforms correctly using "basic.input.js" data 1`] = `
+"/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const Story1 = () => <Button label=\\"Story 1\\" />;
+
+Story1.story = {
+  name: 'story1',
+};
+
+export const SecondStory = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+SecondStory.story = {
+  name: 'second story',
+};
+
+export const ComplexStory = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+
+ComplexStory.story = {
+  name: 'complex story',
+};
+
+export const WPunctuation = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+
+WPunctuation.story = {
+  name: 'w/punctuation',
+};
+
+export const StartCase = () => <Button label=\\"Story 2\\" onClick={action('click')} />;"
+`;

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

@@ -0,0 +1,11 @@
+export const Foo = 1;
+const Bar = 1;
+const _Bar = 1;
+const Baz = 1;
+const __Baz = 1;
+
+storiesOf('foo', module)
+  .add('foo', () => <button />)
+  .add('bar', () => <button />)
+  .add('_baz', () => <button />)
+  .add('baz', () => <button />);

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

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

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

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

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

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

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('Some.Button', module)
+  .addDecorator(withKnobs)
+  .addDecorator(storyFn => <div className="foo">{storyFn}</div>)
+  .add('with decorator', () => <Button label="The Button" />);

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

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

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

@@ -0,0 +1,7 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module).add('default', () => <Button label="Story 1" />);

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

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

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

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

package/src/transforms/__testfixtures__/storiesof-to-csf/digit.output.js

@@ -0,0 +1,5 @@
+export default {
+  title: 'bar',
+};
+
+export const _1 = () => <button />;

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

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

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

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