{"size": 2043, "ext": "js", "max_stars_repo_path": "packages/mcs-lite-ui/src/Orderbox/Orderbox.example.js", "max_stars_repo_name": "MCS-Lite/mcs-lite", "max_stars_repo_stars_event_min_datetime": "2017-04-26T08:38:29.000Z", "max_stars_repo_stars_event_max_datetime": "2020-05-15T15:13:10.000Z", "max_issues_repo_path": "packages/mcs-lite-ui/src/Orderbox/Orderbox.example.js", "max_issues_repo_name": "MCS-Lite/mcs-lite", "max_issues_repo_issues_event_min_datetime": "2017-04-26T03:02:32.000Z", "max_issues_repo_issues_event_max_datetime": "2020-02-22T07:12:44.000Z", "max_forks_repo_path": "packages/mcs-lite-ui/src/Orderbox/Orderbox.example.js", "max_forks_repo_name": "MCS-Lite/mcs-lite", "max_forks_repo_forks_event_min_datetime": "2017-04-26T02:48:11.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-18T06:04:51.000Z"}
{"max_stars_count": 72, "max_issues_count": 382, "max_forks_count": 14, "avg_line_length": 25.5375, "max_line_length": 72, "alphanum_fraction": 0.5163974547}
// @flow
import * as React from 'react';
import { storiesOf } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import Orderbox from '.';

class StatefulOrderbox extends React.Component<any, { value: number }> {
  state = { value: 9 };
  onClick = () => {
    if (this.state.value === -1) {
      this.setState(() => ({ value: 9 }));
    } else {
      this.setState(() => ({ value: -1 }));
    }
  };
  render() {
    const { value } = this.state;
    const { onClick } = this;

    return <Orderbox value={value} onClick={onClick} {...this.props} />;
  }
}

storiesOf('Orderbox', module)
  .add(
    'API',
    withInfo({
      text: 'Controlled API',
      inline: true,
    })(() => (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <Orderbox value={-1} />
        <Orderbox value={0.1} />
        <Orderbox value={0} />
        <Orderbox value={1} />
        <Orderbox value={2} />
        <Orderbox value={3} />
        <Orderbox value={4} />
        <Orderbox value={5} />
        <Orderbox value={6} />
        <Orderbox value={7} />
        <Orderbox value={8} />
        <Orderbox value={9} />
        <Orderbox value={10} />
        <Orderbox value={50} />
        <Orderbox value={99} />
        <Orderbox value={100} />
      </div>
    )),
  )
  .add(
    'With state',
    withInfo({
      text: 'default',
      inline: true,
    })(() => <StatefulOrderbox />),
  )
  .add(
    'With size',
    withInfo({
      text: 'default',
      inline: true,
    })(() => <StatefulOrderbox size={24} style={{ fontSize: 14 }} />),
  )
  .add(
    'With kind',
    withInfo({
      text: 'different color',
      inline: true,
    })(() => (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <StatefulOrderbox kind="default" /> default
        <StatefulOrderbox kind="primary" /> primary
        <StatefulOrderbox kind="success" /> success
        <StatefulOrderbox kind="error" /> error
        <StatefulOrderbox kind="warning" /> warning
      </div>
    )),
  );
