<commit_before>import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import {storiesOf} from '@storybook/react';
import ResizingTextArea from './ResizingTextArea';

function TestCase({defaultText}) {
  const [text, setText] = useState(defaultText);
  useEffect(() => {
    setTimeout(() => setText(text + ' ...ok...\nwait...'), 2000);
    setTimeout(() => setText('short...'), 4000);
    setTimeout(() => setText(text + '\n\ngoodbye!'), 6000);
  }, []);
  const props = {
    value: text,
    onChange: e => setText(e.target.value),
    style: {
      outline: '1px solid black',
      border: 0,
      padding: 0,
      margin: 0
    }
  };
  return <ResizingTextArea {...props} />;
}
TestCase.propTypes = {
  defaultText: PropTypes.string.isRequired
};


storiesOf('components/ResizingTextArea', module) // eslint-disable-line no-undef
  .add('all', () => {
    return (
      <div>
        <div style={{padding: 10}}><TestCase defaultText={`hello`} /></div>
        <div style={{padding: 10}}><TestCase defaultText={`hello world`} /></div>
        <div style={{padding: 10}}><TestCase defaultText={`hello\nworld`} /></div>
        <div style={{padding: 10}}><TestCase defaultText={`hello\nworld\n`} /></div>
        <div style={{padding: 10}}><TestCase defaultText={`hello\nworld\nwith\nresizing`} /></div>
      </div>
    );
  });<commit_msg>Add story case<commit_after>import React, {useState, useEffect} from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import {storiesOf} from '@storybook/react';
import ResizingTextArea from './ResizingTextArea';

function TestCase({defaultText}) {
  const [text, setText] = useState(defaultText);
  useEffect(() => {
    setTimeout(() => setText(text + ' ...ok...\nwait...'), 2000);
    setTimeout(() => setText('short...'), 4000);
    setTimeout(() => setText(text + '\n\ngoodbye!'), 6000);
  }, []);
  const props = {
    value: text,
    onChange: e => setText(e.target.value),
    style: {
      outline: '1px solid black',
      width: 300,
      border: 0,
      padding: 0,
      margin: 0
    }
  };
  return <ResizingTextArea {...props} />;
}
TestCase.propTypes = {
  defaultText: PropTypes.string.isRequired
};

const longText = _.repeat('This is a really long sentence with many different clauses saying many, many important things.', 20);


storiesOf('components/ResizingTextArea', module) // eslint-disable-line no-undef
  .add('all', () => {
    return (
      <div style={{display: 'flex', flexDirection: 'row'}}>
        <div style={{flex: 1}}>
          <div style={{padding: 10}}><TestCase defaultText={`hello`} /></div>
          <div style={{padding: 10}}><TestCase defaultText={`hello world`} /></div>
          <div style={{padding: 10}}><TestCase defaultText={`hello\nworld`} /></div>
          <div style={{padding: 10}}><TestCase defaultText={`hello\nworld\n`} /></div>
          <div style={{padding: 10}}><TestCase defaultText={`hello\nworld\nwith\nresizing`} /></div>
        </div>
        <div style={{flex: 1}}>
          <div style={{padding: 10}}><TestCase defaultText={longText} /></div>
        </div>
      </div>
    );
  });
{'fraction_non_alphanumeric': 0.19860847564832385, 'fraction_numerical': 0.019291587602783048, 'mean_word_length': 3.3567493112947657, 'pattern_counts': {'":': 0, '<': 46, '<?xml version=': 0, '>': 58, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '934737', 'n_tokens_mistral': 1054, 'n_tokens_neox': 1009, 'n_words': 230}