@storybook/codemod 7.0.0-alpha.5 → 7.0.0-alpha.50

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,198 @@
+/* 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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+// 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>);"
+`;