@eureca/eureca-ui/src/components/Messages/stories/messages.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Messages } from '../';
import { MessagesStory } from './messages.stories.js';

<Meta title='Originals/Messages' component={Messages} decorators={[withKnobs]}/>

<Title>Messages</Title>

<Description>
  Messages dos aplicativos Eureca. 
</Description>

<Preview>
  <Story name="Messages">
    <MessagesStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| data | Array com as mensagens do componente <br /> 'array' | [ ] |

<Subtitle>Formato dos dados de entrada</Subtitle>

> O arquivo é um array de objetos com as chaves: 

- `id`: 'string' \| 'number'
- `title`: 'string'
- `sender`: {
  `id`: 'string' \| 'number'
  `name`: 'string'
  `email`: 'string'
  `avatar`: 'string'
}
- `date`: 'date'
- `body`: 'any'

```jsx
[
  {
    id: 39320,
    title: text('Título', 'Atualize seu perfil'),
    sender: {
      id: 1302,
      name: text('Nome', 'Carla Lopes'),
      email: text('E-mail', 'carla.lopes@eureca.me'),
      avatar: Logo,
    },
    date: new Date(2019, 6, 17, 3, 24, 0),
    body: (
      <span>
        Hey, Fê!
        <br />
        Que alegria ter você em nossa comunidade!
        <br />
        <br />
        Aqui, na Eureca, acreditamos que você tem o potencial necessário para{' '}
        <b>empreender as transformações que o mundo precisa</b>, e como não temos tempo a perder,
        nada melhor do que fazer isso por meio do desenvolvimento e intraempreendedorismo.
        <br />
        <br />
        Um beijo, Carlinha.
      </span>
    ),
  },
]
```

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<Messages data={data} />
```