<commit_before>import React, { Component } from 'react';
import { storiesOf } from '@storybook/react';

import { Grommet, Box, RangeSelector, Stack, Text } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';

const customThemeRangeSelector = deepMerge(grommet, {
  global: {
    borderSize: {
      small: '6px',
    },
    edgeSize: {
      small: '13px',
    },
    spacing: '10px',
    colors: {
      control: 'accent-2',
      border: 'brand',
    },
  },
  rangeSelector: {
    background: {
      invert: {
        color: 'brand',
      },
    },
    edge: {
      type: 'bar',
    },
  },
});
class CustomRangeSelector extends Component {
  static defaultProps = {
    direction: 'horizontal',
  };

  state = { values: [12, 16] };

  onChange = values => this.setState({ values });

  render() {
    const { direction, ...rest } = this.props;
    const { values } = this.state;
    return (
      <Grommet theme={customThemeRangeSelector}>
        <Box align="center" pad="large">
          <Stack>
            <Box
              direction={direction === 'vertical' ? 'column' : 'row'}
              justify="between"
            >
              {[10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map(value => (
                <Box
                  key={value}
                  width="xxsmall"
                  height="xxsmall"
                  align="center"
                  pad="small"
                  border={false}
                >
                  <Text style={{ fontFamily: 'monospace' }}>{value}</Text>
                </Box>
              ))}
            </Box>
            <RangeSelector
              invert
              direction={direction}
              min={10}
              max={20}
              size="full"
              values={values}
              onChange={this.onChange}
              {...rest}
            />
          </Stack>
        </Box>
      </Grommet>
    );
  }
}

storiesOf('RangeSelector', module).add('Custom', () => <CustomRangeSelector />);<commit_msg>Refactor RangeSelector Custom Story to use Hooks (#3421)<commit_after>import React, { useState } from 'react';
import { storiesOf } from '@storybook/react';

import { Grommet, Box, RangeSelector, Stack, Text } from 'grommet';
import { grommet } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';

const customThemeRangeSelector = deepMerge(grommet, {
  global: {
    borderSize: {
      small: '6px',
    },
    edgeSize: {
      small: '13px',
    },
    spacing: '10px',
    colors: {
      control: 'accent-2',
      border: 'brand',
    },
  },
  rangeSelector: {
    background: {
      invert: {
        color: 'brand',
      },
    },
    edge: {
      type: 'bar',
    },
  },
});

const CustomRangeSelector = ({ direction = 'horizontal', ...rest }) => {
  const [range, setRange] = useState([12, 16]);
  const onChange = values => {
    setRange(values);
  };

  return (
    <Grommet theme={customThemeRangeSelector}>
      <Box align="center" pad="large">
        <Stack>
          <Box
            direction={direction === 'vertical' ? 'column' : 'row'}
            justify="between"
          >
            {[10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20].map(value => (
              <Box
                key={value}
                width="xxsmall"
                height="xxsmall"
                align="center"
                pad="small"
                border={false}
              >
                <Text style={{ fontFamily: 'monospace' }}>{value}</Text>
              </Box>
            ))}
          </Box>
          <RangeSelector
            invert
            direction={direction}
            min={10}
            max={20}
            size="full"
            values={range}
            onChange={onChange}
            {...rest}
          />
        </Stack>
      </Box>
    </Grommet>
  );
};

storiesOf('RangeSelector', module).add('Custom', () => <CustomRangeSelector />);
{'fraction_non_alphanumeric': 0.1514616935483871, 'fraction_numerical': 0.019153225806451613, 'mean_word_length': 1.6354581673306774, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3101211', 'n_tokens_mistral': 1233, 'n_tokens_neox': 1152, 'n_words': 251}