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

UI component library of Eureca's user and admin apps

import React from 'react';
import Faker from 'faker/locale/pt_BR';

import { text, withKnobs } from '@storybook/addon-knobs';

import Logo from '../../../assets/images/logo-small.svg';
import { Messages } from '..';

export default { title: 'Originals/Messages', decorators: [withKnobs], includeStories: [] };

export function MessagesStory() {
  const data = [
    {
      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>
      ),
    },
    {
      id: Faker.random.number(1000),
      title: Faker.lorem.sentence(2),
      sender: {
        id: Faker.random.number(1000),
        name: Faker.name.findName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
      },
      date: Faker.date.past(1),
      body: (
        <div>
          <h3>{Faker.lorem.sentence(2)}</h3>
          <span>{Faker.lorem.paragraphs(12)}</span>
        </div>
      ),
    },
    {
      id: Faker.random.number(1000),
      title: Faker.lorem.sentence(2),
      sender: {
        id: Faker.random.number(1000),
        name: Faker.name.findName(),
        email: Faker.internet.email(),
        avatar: Faker.internet.avatar(),
      },
      date: Faker.date.future(1),
      body: (
        <div>
          <h3>{Faker.lorem.sentence(2)}</h3>
          <span>{Faker.lorem.paragraphs(12)}</span>
        </div>
      ),
    },
  ];
  return <Messages data={data} />;
}