<commit_before>import * as React from 'react'
import { storiesOf, action } from '@kadira/storybook'
import InputAutocomplete from '../src/InputAutocomplete'

const onChange = (ev: React.FormEvent<HTMLInputElement>) => {
  return action('input onChange')(ev.currentTarget.value)
}

const autocompleteValues = [
  'utm_source',
  'utm_medium',
  'utm_campaign',
  'utm_term',
  'utm_content',
]

storiesOf('AutocompleteInput', module)
  .addDecorator(story => (
    <div>
      <p>Try writing utm_source, utm_medium, utm_campaign, utm_term or utm_content</p>
      {story()}
    </div>
  ))
  .add('Uncontrolled input', () => (
    <InputAutocomplete
      onChange={onChange}
      autocompleteValues={autocompleteValues}
      type='text'
    />
  ))
  .add('Controlled input', () => {
    let state = ''
    const handleOnChange = (ev: React.FormEvent<HTMLInputElement>) => {
      onChange(ev)
      state = ev.currentTarget.value
    }

    return <InputAutocomplete
      onChange={handleOnChange}
      value={state}
      autocompleteValues={autocompleteValues}
      type='text'
    />
  })<commit_msg>Make storybook test case more correct<commit_after>import * as React from 'react'
import { storiesOf, action } from '@kadira/storybook'
import InputAutocomplete from '../src/InputAutocomplete'

const onChange = (ev: React.FormEvent<HTMLInputElement>) => {
  return action('input onChange')(ev.currentTarget.value)
}

const autocompleteValues = [
  'utm_source',
  'utm_medium',
  'utm_campaign',
  'utm_term',
  'utm_content',
]

storiesOf('AutocompleteInput', module)
  .addDecorator(story => (
    <div>
      <p>Try writing utm_source, utm_medium, utm_campaign, utm_term or utm_content</p>
      {story()}
    </div>
  ))
  .add('Uncontrolled input', () => (
    <InputAutocomplete
      onChange={onChange}
      autocompleteValues={autocompleteValues}
      type='text'
    />
  ))
  .add('Controlled input', () => {
    const state = { 
      value: ''
    }

    const handleOnChange = (ev: React.FormEvent<HTMLInputElement>) => {
      onChange(ev)
      state.value = ev.currentTarget.value
    }

    return <InputAutocomplete
      onChange={handleOnChange}
      value={state.value}
      autocompleteValues={autocompleteValues}
      type='text'
    />
  })
{'fraction_non_alphanumeric': 0.13821851689337428, 'fraction_numerical': 0.0, 'mean_word_length': 3.497041420118343, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 29, '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': '2082983', 'n_tokens_mistral': 761, 'n_tokens_neox': 742, 'n_words': 136}