{"size": 1337, "ext": "js", "max_stars_repo_path": "examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js", "max_stars_repo_name": "untempered/storybook", "max_stars_repo_stars_event_min_datetime": "2020-01-28T05:38:51.000Z", "max_stars_repo_stars_event_max_datetime": "2021-11-09T11:25:43.000Z", "max_issues_repo_path": "examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js", "max_issues_repo_name": "untempered/storybook", "max_issues_repo_issues_event_min_datetime": "2019-06-26T15:02:52.000Z", "max_issues_repo_issues_event_max_datetime": "2019-06-26T15:02:52.000Z", "max_forks_repo_path": "examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js", "max_forks_repo_name": "nmccready/storybook", "max_forks_repo_forks_event_min_datetime": "2021-11-10T12:59:24.000Z", "max_forks_repo_forks_event_max_datetime": "2021-11-10T12:59:24.000Z"}
{"max_stars_count": 2, "max_issues_count": 1, "max_forks_count": 1, "avg_line_length": 27.2857142857, "max_line_length": 74, "alphanum_fraction": 0.6163051608}
import { createElement } from 'rax';
import { storiesOf } from '@storybook/rax';
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';

import Button from 'rax-button';
import Text from 'rax-text';

const stories = storiesOf('Addon|addon-knobs', module);

// Add the `withKnobs` decorator to add knobs support to your stories.
// You can also configure `withKnobs` as a global decorator.
stories.addDecorator(withKnobs);

// Knobs for Rax props
stories.add('with a button', () => {
  const disabled = boolean('Disabled', false);
  const hasStyle = boolean('Has Style', false);
  const style = hasStyle
    ? {
        border: '1px solid #d2d2d2',
        width: 200,
        paddingLeft: 10,
        paddingRight: 10,
      }
    : null;
  const textStyle = hasStyle
    ? {
        color: disabled ? '#666' : '#00f',
        fontSize: 16,
      }
    : {
        color: disabled ? '#666' : '#000',
      };
  return (
    <Button style={style} disabled={disabled}>
      <Text style={textStyle}>{text('Label', 'Hello Storybook')}</Text>
    </Button>
  );
});

// Knobs as dynamic variables.
stories.add('as dynamic variables', () => {
  const name = text('Name', 'Benjamin Button');
  const age = number('Age', 89);

  const content = `I am ${name} and I'm ${age} years old.`;
  return <Text>{content}</Text>;
});
