@appearhere/bloom/components/Form/InputRange/InputRange.story.js

Appear Here's pattern library and styleguide

import React from 'react';
import { storiesOf, action } from '@storybook/react';
import { withKnobs, number } from '@storybook/addon-knobs';
import InputRange from './InputRange';
import transformStepValues from './transformStepValues';
import InputRangeWithHistogram from './InputRangeWithHistogram';

const stories = storiesOf('FormComponents', module);
stories.addDecorator(withKnobs);

const bucket = [
  0,
  2,
  4,
  8,
  16,
  32,
  64,
];

stories
  .add('Default InputRange', () => (
    <InputRange
      minValue={0}
      maxValue={10}
      value={number('value', 4)}
      name="Simple range input"
      onChange={action('Change...')}
      onChangeComplete={action('Change complete...')}
    />
  ))
  .add('Multi InputRange', () => (
    <InputRange
      minValue={0}
      maxValue={10}
      value={{
        min: number('min', 0),
        max: number('max', 10),
      }}
      name="Simple range input"
      onChange={action('Change...')}
      onChangeComplete={action('Change complete...')}
    />
  ))
  .add('Non-linear default InputRange', () => {
    const NonLinearRangeInput = transformStepValues(InputRange)(bucket);

    return (
      <NonLinearRangeInput
        minValue={bucket[0]}
        maxValue={bucket[6]}
        value={bucket[number('value', 1)]}
        name="Simple range input"
        onChange={action('Change...')}
        onChangeComplete={action('Change complete...')}
      />
    );
  })
  .add('Non-linear multi InputRange', () => {
    const NonLinearRangeInput = transformStepValues(InputRange)(bucket);

    return (
      <NonLinearRangeInput
        minValue={bucket[0]}
        maxValue={bucket[6]}
        value={{
          min: bucket[number('min', 1)],
          max: bucket[number('max', 5)],
        }}
        name="Simple range input"
        onChange={action('Change...')}
        onChangeComplete={action('Change complete...')}
      />
    );
  })
  .add('With histogram', () => (
    <InputRangeWithHistogram
      minValue={bucket[0]}
      maxValue={bucket[6]}
      value={{
        min: bucket[number('min', 1)],
        max: bucket[number('max', 5)],
      }}
      name="Range input with histogram"
      data={[10, 35, 20, 3, 5, 37, 24]}
    />
  ));