@storybook/codemod 7.4.0-alpha.0 → 7.4.0-alpha.1

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

@@ -1,10 +0,0 @@
-/* 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

@@ -1,23 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-/* 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

@@ -1,23 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-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

@@ -1,29 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-/* 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

@@ -1,32 +0,0 @@
-// 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

@@ -1,184 +0,0 @@
-/* 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)} />
-  ));

package/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.snapshot

@@ -1,184 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`update-addon-info transforms correctly using "update-addon-info.input.js" data 1`] = `
-"/* eslint-disable */
-import React from 'react';
-import Button from './Button';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-
-import { withInfo } from \\"@storybook/addon-info\\";
-
-storiesOf('Button').add('simple usage', withInfo(
-  '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').add('simple usage (inline info)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('Button').add('simple usage (disable source)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  source: false,
-  inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('Button').add('simple usage (no header)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  header: false,
-  inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('Button').add('simple usage (no prop tables)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  propTables: false,
-  inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('Button').add('simple usage (custom propTables)', withInfo({
-  text: \`
-      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]}
-        );
-      ~~~
-    \`,
-
-  inline: true,
-  propTables: [Button]
-})(() => (
-  <div>
-    <Button label=\\"The Button\\" onClick={action('onClick')} />
-    <br />
-  </div>
-)));
-
-storiesOf('Button').add('simple usage (JSX description)', withInfo(<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').add('simple usage (inline JSX description)', withInfo({
-  text: <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>,
-
-  inline: true
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('Button').add('simple usage (maxPropsInLine === 1)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  inline: true,
-  maxPropsIntoLine: 1
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('Button').add('simple usage (maxPropObjectKeys === 5)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  inline: true,
-  maxPropObjectKeys: 5
-})(
-  () => <Button label=\\"The Button\\" object={{ a: 1, b: 2, c: 3, d: 4, e: 5, f: 6 }} />
-));
-
-storiesOf('Button').add('simple usage (maxPropArrayLength === 8)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  inline: true,
-  maxPropArrayLength: 8
-})(
-  () => <Button label=\\"The Button\\" array={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]} />
-));
-
-storiesOf('Button').add('simple usage (maxPropStringLength === 10)', withInfo({
-  text: \`
-      This is the basic usage with the button with providing a label to show the text.
-    \`,
-
-  inline: true,
-  maxPropStringLength: 5
-})(() => <Button label=\\"The Button\\" string=\\"1 2 3 4 5 6 7 8\\" />));
-
-storiesOf('Button').add('with custom styles', withInfo({
-  text: \`
-      This is an example of how to customize the styles of the info components.
-      For the full styles available, see \\\\\`./src/components/Story.js\\\\\`
-    \`,
-
-  inline: true,
-
-  styles: (stylesheet) => {
-    stylesheet.infoPage = {
-      backgroundColor: '#ccc',
-    };
-    return stylesheet;
-  }
-})(() => <Button label=\\"The Button\\" onClick={action('onClick')} />));
-
-storiesOf('shared/ProgressBar', module)
-  .addDecorator(withKnobs)
-  .add('default style', withInfo('default style')(() => (
-    <ProgressBar progress={number('progress', 25)} delay={number('delay', 500)} />
-  )));"
-`;

package/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.input.js

@@ -1,19 +0,0 @@
-/* eslint-disable */
-import '@kadira/storybook-addons';
-import '@kadira/storybook-addon-comments';
-import '@kadira/react-storybook-decorator-centered';
-import '@kadira/storybook-addon-graphql';
-import '@kadira/storybook-addon-info';
-import '@kadira/storybook-addon-knobs';
-import '@kadira/storybook-addon-links';
-import '@kadira/storybook-addon-notes';
-import '@kadira/storybook-addon-options';
-import 'storyshots';
-import '@kadira/storybook-channels';
-import '@kadira/storybook-channel-postmsg';
-import '@kadira/storybook-channel-websocket';
-import '@kadira/getstorybook';
-import '@kadira/react-storybook';
-import '@kadira/react-native-storybook';
-import '@kadira/storybook-ui';
-import { storiesOf } from '@kadira/react-storybook';

package/src/transforms/__testfixtures__/update-organisation-name/update-organisation-name.output.snapshot

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`update-organisation-name transforms correctly using "update-organisation-name.input.js" data 1`] = `
-"/* eslint-disable */
-import '@storybook/preview-api';
-import '@storybook/addon-comments';
-import '@storybook/addon-centered';
-import '@storybook/addon-graphql';
-import '@storybook/addon-info';
-import '@storybook/addon-knobs';
-import '@storybook/addon-links';
-import '@storybook/addon-notes';
-import '@storybook/addon-options';
-import '@storybook/addon-storyshots';
-import '@storybook/channels';
-import '@storybook/channel-postmessage';
-import '@storybook/channel-websocket';
-import '@storybook/cli';
-import '@storybook/react';
-import '@storybook/react-native';
-import '@storybook/manager';
-import { storiesOf } from '@storybook/react';"
-`;

package/src/transforms/__testfixtures__/upgrade-hierarchy-separators/csf.input.js

@@ -1,3 +0,0 @@
-export default {
-  title: 'Foo|Bar/baz.whatever',
-};

package/src/transforms/__testfixtures__/upgrade-hierarchy-separators/csf.output.snapshot

@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`upgrade-hierarchy-separators transforms correctly using "csf.input.js" data 1`] = `
-"export default {
-  title: 'Foo/Bar/baz/whatever',
-};"
-`;

package/src/transforms/__testfixtures__/upgrade-hierarchy-separators/dynamic-storiesof.input.js

@@ -1,5 +0,0 @@
-import { storiesOf } from '@storybook/react';
-
-const foo = 'some|generated/path';
-
-storiesOf(foo, module).add('foobar', () => <>hmm</>);

package/src/transforms/__testfixtures__/upgrade-hierarchy-separators/dynamic-storiesof.output.snapshot

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`upgrade-hierarchy-separators transforms correctly using "dynamic-storiesof.input.js" data 1`] = `
-"import { storiesOf } from '@storybook/react';
-
-const foo = 'some|generated/path';
-
-storiesOf(foo, module).add('foobar', () => <>hmm</>);"
-`;

package/src/transforms/__testfixtures__/upgrade-hierarchy-separators/storiesof.input.js

@@ -1,8 +0,0 @@
-import { storiesOf } from '@storybook/react';
-
-storiesOf('A/B/C', module).add('abc', () => <div>hello</div>);
-storiesOf('D|E/f', module).add('def', () => <div>hello</div>);
-
-storiesOf('G|h/i.jkl', module)
-  .add('hijkl', () => <div>hello</div>)
-  .add('whatever', () => <div>goodbye!</div>);

package/src/transforms/__testfixtures__/upgrade-hierarchy-separators/storiesof.output.snapshot

@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`upgrade-hierarchy-separators transforms correctly using "storiesof.input.js" data 1`] = `
-"import { storiesOf } from '@storybook/react';
-
-storiesOf('A/B/C', module).add('abc', () => <div>hello</div>);
-storiesOf('D/E/f', module).add('def', () => <div>hello</div>);
-
-storiesOf('G/h/i/jkl', module)
-  .add('hijkl', () => <div>hello</div>)
-  .add('whatever', () => <div>goodbye!</div>);"
-`;