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

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {
+  name: 'complex story',
+  parameters: { foo: { bar: baz } },
+  decorators: [(storyFn) => <bar>{storyFn}</bar>],
+};

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/basic.output.snapshot

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "basic.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+story2.story.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.story = {};
+story3.story.name = 'complex story';
+story3.story.parameters = { foo: { bar: baz } };
+story3.story.decorators = [(storyFn) => <bar>{storyFn}</bar>];

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/overrides.output.snapshot

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-hoist-story-annotations transforms correctly using "overrides.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label=\\"Story 1\\" />;
+
+export const story2 = () => <Button label=\\"Story 2\\" onClick={action('click')} />;
+story2.storyName = 'second story';
+story2.parameters = { foo: 'bar' };
+
+export const story3 = () => (
+  <div>
+    <Button label=\\"The Button\\" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+const baz = 17;
+story3.storyName = 'complex story';
+story3.parameters = { foo: { bar: baz } };
+story3.decorators = [(storyFn) => <bar>{storyFn}</bar>];"
+`;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/variable.input.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from './Button';
+
+const foo = {
+  title: 'Button',
+};
+
+export default foo;
+
+const bar = () => <Button label="Story 1" />;
+bar.story = { name: 'bar bar' };
+
+export const story1 = bar;

package/src/transforms/__testfixtures__/csf-hoist-story-annotations/variable.output.snapshot

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

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+story3.story = { name: 'complex story' };

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-to-mdx transforms correctly using "basic.input.js" data 1`] = `
+"import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>"
+`;

package/src/transforms/__testfixtures__/csf-to-mdx/component-id.input.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+  id: 'button-id',
+};
+
+export const someStory = () => <Button label="Story 1" />;

package/src/transforms/__testfixtures__/csf-to-mdx/component-id.output.snapshot

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-to-mdx transforms correctly using "component-id.input.js" data 1`] = `
+"import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' id='button-id' />
+
+<Story name='someStory'><Button label='Story 1' /></Story>"
+`;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Some.Button',
+  decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
+};
+
+export const story1 = () => <Button label="The Button" />;
+story1.story = {
+  name: 'with decorator',
+  decorators: [withKnobs],
+};

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

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-to-mdx transforms correctly using "decorators.input.js" data 1`] = `
+"import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Some.Button'
+  decorators={[withKnobs, storyFn => <div className='foo'>{storyFn}</div>]} />
+
+<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>"
+`;

package/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.input.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+  excludeStories: /.*Data$/,
+};
+
+export const rowData = { col1: 'a', col2: 2 };
+
+export const story1 = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.story = { name: 'second story' };
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+story3.story = { name: 'complex story' };

package/src/transforms/__testfixtures__/csf-to-mdx/exclude-stories.output.snapshot

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-to-mdx transforms correctly using "exclude-stories.input.js" data 1`] = `
+"import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>"
+`;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'Button',
+  component: Button,
+  parameters: {
+    foo: 1,
+    bar: 2,
+  },
+};
+
+export const story1 = () => <Button label="The Button" />;
+story1.story = { name: 'with kind parameters' };

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-to-mdx transforms correctly using "parameters.input.js" data 1`] = `
+"import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Button'
+  component={Button}
+  parameters={{
+    foo: 1,
+    bar: 2,
+  }} />
+
+<Story name='with kind parameters'><Button label='The Button' /></Story>"
+`;

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

@@ -0,0 +1,19 @@
+import global from 'global';
+
+const { document } = global;
+
+export default {
+  title: 'Function',
+};
+
+export const functionStory = () => {
+  const btn = document.createElement('button');
+  btn.innerHTML = 'Hello Button';
+  btn.addEventListener('click', action('Click'));
+  return btn;
+};
+
+functionStory.story = {
+  name: 'function',
+  height: '100px',
+};

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="The Button" />;
+story1.story = {
+  name: 'with story parameters',
+  parameters: {
+    header: false,
+    inline: true,
+  },
+};
+
+export const foo = () => <Button label="Foo" />;
+foo.story = {
+  parameters: {
+    bar: 1,
+  },
+};

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

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`csf-to-mdx transforms correctly using "story-parameters.input.js" data 1`] = `
+"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/basic.input.js

@@ -0,0 +1,18 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>
+
+<Story name='w/punctuation'>
+  <Button label='w/punctuation'/>
+</Story>

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "basic.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+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=\\"w/punctuation\\" />;
+
+WPunctuation.story = {
+  name: 'w/punctuation',
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/component-id.input.js

@@ -0,0 +1,6 @@
+import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' id="button-id" />
+
+<Story name='story1'><Button label='Story 1' /></Story>

package/src/transforms/__testfixtures__/mdx-to-csf/component-id.output.snapshot

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

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

@@ -0,0 +1,8 @@
+import Button from './Button';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Some.Button'
+  decorators={[withKnobs, storyFn => <div className='foo'>{storyFn}</div>]} />
+
+<Story name='with decorator' decorators={[withKnobs]}><Button label='The Button' /></Story>

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "decorators.input.js" data 1`] = `
+"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',
+  decorators: [withKnobs],
+};"
+`;

package/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.input.js

@@ -0,0 +1,19 @@
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta title='Button' />
+
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+
+<Story name='story1'><Button label='Story 1' /></Story>
+
+<Story name='second story'><Button label='Story 2' onClick={action('click')} /></Story>
+
+<Story name='complex story'><div>
+    <Button label='The Button' onClick={action('onClick')} />
+    <br />
+  </div></Story>

package/src/transforms/__testfixtures__/mdx-to-csf/exclude-stories.output.snapshot

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "exclude-stories.input.js" data 1`] = `
+"import React from 'react';
+import Button from './Button';
+import { action } from '@storybook/addon-actions';
+export const rowData = {
+  col1: 'a',
+  col2: 2,
+};
+
+export default {
+  title: 'Button',
+  includeStories: ['Story1', 'SecondStory', 'ComplexStory'],
+};
+
+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',
+};"
+`;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+import { Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title='Button'
+  component={Button}
+  parameters={{
+    foo: 1,
+    bar: 2,
+  }} />
+
+<Story name='with kind parameters'><Button label='The Button' /></Story>

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

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

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

@@ -0,0 +1,3 @@
+import { Story, Meta } from '@storybook/addon-docs';
+
+<Story name="plaintext">Plain text</Story>;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`mdx-to-csf transforms correctly using "plaintext.input.js" data 1`] = `
+"import React from 'react';
+export default {};
+export const Plaintext = () => 'Plain text';
+
+Plaintext.story = {
+  name: 'plaintext',
+};"
+`;

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

@@ -0,0 +1,10 @@
+import { Story, Meta } from '@storybook/addon-docs';
+
+<Story name="function" height="100px">
+  {() => {
+    const btn = document.createElement('button');
+    btn.innerHTML = 'Hello Button';
+    btn.addEventListener('click', action('Click'));
+    return btn;
+  }}
+</Story>;