<commit_before>import React, { useState } from 'react'
import { Discussion, Text } from 'kitten'
import { DocsPage } from 'storybook/docs-page'
import { action } from '@storybook/addon-actions'

export default {
  component: Discussion,
  title: 'Interaction/Discussion',
  parameters: {
    docs: {
      page: () => <DocsPage filepath={__filename} importString="Discussion" />,
    },
  },
  decorators: [
    story => <div className="story-Container story-Grid">{story()}</div>,
  ],
  argTypes: {},
  args: {},
}

export const Default = args => {
  const [inputValue, setInputValue] = useState('')

  return (
    <Discussion {...args}>
      <p className="k-u-a11y-visuallyHidden">
        Les messages de la discussion sont dans l’ordre antéchronologique : le
        premier message de la liste est le plus récent.
      </p>
      <Discussion.List>
        <Discussion.Message>
          <Discussion.Message.Avatar src="/kitten-3.jpg" />
          <Discussion.Message.Header>
            <Text weight="500" lineHeight="1">
              <NAME>.
            </Text>
            <Text
              weight="400"
              lineHeight="1"
              size="micro"
              activeColEl
              color="grey-700"
            >
              &nbsp;•&nbsp;Avant-Hier{' '}
              <span className="k-u-a11y-visuallyHidden">à </span>19:30
            </Text>
          </Discussion.Message.Header>
          <Discussion.Message.Content>
            Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis
            consectetur purus sit amet fermentum. Integer posuere erat a ante
            venenatis dapibus posuere velit aliquet. Praesent commodo cursus
            magna, vel scelerisque nisl consectetur et. Integer posuere erat a
            ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
            porta felis euismod semper. Vestibulum id ligula porta felis euismod
            semper.
          </Discussion.Message.Content>
        </Discussion.Message>
        <Discussion.Message>
          <Discussion.Message.Avatar src="/kitten-0.jpg" />
          <Discussion.Message.Header>
            <Text weight="500" lineHeight="1">
              Moi
            </Text>
            <Text weight="400" lineHeight="1" size="micro" color="grey-700">
              &nbsp;•&nbsp;Hier{' '}
              <span className="k-u-a11y-visuallyHidden">à </span>10:00
            </Text>
          </Discussion.Message.Header>
          <Discussion.Message.Content>
            Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae
            elit libero, a pharetra augue.
          </Discussion.Message.Content>
        </Discussion.Message>
        <Discussion.Message>
          <Discussion.Message.Avatar src="/kitten-3.jpg" />
          <Discussion.Message.Header>
            <Text weight="500" lineHeight="1">
              <NAME>.
            </Text>
            <Text weight="400" lineHeight="1" size="micro" color="grey-700">
              &nbsp;•&nbsp;Hier{' '}
              <span className="k-u-a11y-visuallyHidden">à </span>18:30
            </Text>
          </Discussion.Message.Header>
          <Discussion.Message.Content>
            Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id
            elit. Maecenas faucibus mollis interdum. Nullam id dolor id nibh
            ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur
            ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
          </Discussion.Message.Content>
        </Discussion.Message>
      </Discussion.List>
      <Discussion.Form
        onSubmit={e => {
          e.preventDefault()
          action('Form submit')(e)
        }}
        inputProps={{
          'aria-label': 'Texte à envoyer',
          placeholder: 'Envoyer un message',
          value: inputValue,
          onChange: e => {
            setInputValue(e.target.value)
          },
        }}
        buttonProps={{
          'aria-label': 'Envoyer',
          onClick: e => {
            action('Click envoyer')(e)
            setInputValue('')
          },
          disabled: inputValue.length < 1,
        }}
      />
    </Discussion>
  )
}
<commit_msg>[Discussion] Story: Add enter to submit form (#3231)<commit_after>import React, { useState } from 'react'
import { Discussion, Text } from 'kitten'
import { DocsPage } from 'storybook/docs-page'
import { action } from '@storybook/addon-actions'

export default {
  component: Discussion,
  title: 'Interaction/Discussion',
  parameters: {
    docs: {
      page: () => <DocsPage filepath={__filename} importString="Discussion" />,
    },
  },
  decorators: [
    story => (
      <div className="story-Container story-Grid story-Grid--large">
        {story()}
      </div>),
  ],
  argTypes: {},
  args: {},
}

export const Default = args => {
  const [inputValue, setInputValue] = useState('')

  return (
    <Discussion {...args}>
      <p className="k-u-a11y-visuallyHidden">
        Les messages de la discussion sont dans l’ordre chronologique : le
        premier message de la liste est le plus ancien.
      </p>
      <Discussion.List>
        <Discussion.Message>
          <Discussion.Message.Avatar src="/kitten-3.jpg" />
          <Discussion.Message.Header>
            <Text weight="500" lineHeight="1">
              <NAME>.
            </Text>
            <Text
              weight="400"
              lineHeight="1"
              size="micro"
              color="grey-700"
            >
              &nbsp;•&nbsp;Avant-Hier{' '}
              <span className="k-u-a11y-visuallyHidden">à </span>19:30
            </Text>
          </Discussion.Message.Header>
          <Discussion.Message.Content>
            Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis
            consectetur purus sit amet fermentum. Integer posuere erat a ante
            venenatis dapibus posuere velit aliquet. Praesent commodo cursus
            magna, vel scelerisque nisl consectetur et. Integer posuere erat a
            ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula
            porta felis euismod semper. Vestibulum id ligula porta felis euismod
            semper.
          </Discussion.Message.Content>
        </Discussion.Message>
        <Discussion.Message>
          <Discussion.Message.Avatar src="/kitten-0.jpg" />
          <Discussion.Message.Header>
            <Text weight="500" lineHeight="1">
              Moi
            </Text>
            <Text weight="400" lineHeight="1" size="micro" color="grey-700">
              &nbsp;•&nbsp;Hier{' '}
              <span className="k-u-a11y-visuallyHidden">à </span>10:00
            </Text>
          </Discussion.Message.Header>
          <Discussion.Message.Content>
            Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae
            elit libero, a pharetra augue.
          </Discussion.Message.Content>
        </Discussion.Message>
        <Discussion.Message>
          <Discussion.Message.Avatar src="/kitten-3.jpg" />
          <Discussion.Message.Header>
            <Text weight="500" lineHeight="1">
              <NAME>.
            </Text>
            <Text weight="400" lineHeight="1" size="micro" color="grey-700">
              &nbsp;•&nbsp;Hier{' '}
              <span className="k-u-a11y-visuallyHidden">à </span>18:30
            </Text>
          </Discussion.Message.Header>
          <Discussion.Message.Content>
            Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id
            elit. Maecenas faucibus mollis interdum. Nullam id dolor id nibh
            ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur
            ac, vestibulum at eros. Sed posuere consectetur est at lobortis.
          </Discussion.Message.Content>
        </Discussion.Message>
      </Discussion.List>
      <Discussion.Form
        onSubmit={e => {
          e.preventDefault()
          action('Form submit')(e)
        }}
        inputProps={{
          'aria-label': 'Texte à envoyer',
          placeholder: 'Envoyer un message',
          value: inputValue,
          onChange: e => {
            setInputValue(e.target.value)
          },
          onKeyPress: e => {
            if (e.key === "Enter" && !e.shiftKey) {
              e.preventDefault()

              if (inputValue.trim().split('<br>').join('').length > 0) {
                action('Enter key form submit')(e)
                setInputValue('')
              }
            }
          }
        }}
        buttonProps={{
          'aria-label': 'Envoyer',
          onClick: e => {
            action('Click envoyer')(e)
            setInputValue('')
          },
          disabled: inputValue.trim().split('<br>').join('').length < 1,
        }}
      />
    </Discussion>
  )
}

{'fraction_non_alphanumeric': 0.12098319990979817, 'fraction_numerical': 0.013417521704814523, 'mean_word_length': 1.8447722899294419, 'pattern_counts': {'":': 0, '<': 109, '<?xml version=': 0, '>': 121, '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': '983057', 'n_tokens_mistral': 2742, 'n_tokens_neox': 2583, 'n_words': 612}