@storybook/codemod/src/transforms/__testfixtures__/update-addon-info/update-addon-info.output.js

A collection of codemod scripts written with JSCodeshift

/* 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/storybooks/react-storybook-addon-info">
      This is a link
    </a>
  </p>
  <p>
    <img src="http://placehold.it/350x150" />
  </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/storybooks/react-storybook-addon-info">
        This is a link
      </a>
    </p>
    <p>
      <img src="http://placehold.it/350x150" />
    </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)}
    />
  )));