react-life-design/stories/Lists.stories.tsx

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';
import * as R from 'ramda';

import { List, GlobalStyle } from '../src';

const Wrapper = styled.div`
  height: 600px;
  margin: 20px;
`;

const users = [
  {
    name : 'Mattia Parisi',
    email : 'mattiaparisi@gmail.com',
    id : 0
  },
  {
    name : 'Alessia Ciccarello',
    email : 'alessiaciccarello@gmail.com',
    id : 1
  },
  {
    name : 'Ciccio Belo',
    email : 'cicciobelo@gmail.com',
    id : 2
  },
  {
    name : 'Santo Terranova',
    email : 'santoterranova@gmail.com',
    id : 3
  },
  {
    name : 'Damiano Pulvirenti',
    email : 'damianopulvirenti@gmail.com',
    id : 4
  },
  {
    name : 'Enrico Bruno',
    email : 'enricobruno@gmail.com',
    id : 5
  },
];

const repeatedUsers = (num: number) => R.flatten(R.repeat(users, num));

storiesOf('List', module)
  .add('Default', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <List headers={['ID', 'NOME', 'E-MAIL', 'telefone', 'endereco']}>
          {repeatedUsers(4).map(user => (
            <React.Fragment>
              <div>{user.id}</div>
              <div>{user.name}</div>
              <div>{user.email}</div>
              <div>telefone</div>
              <div>Rua Tal</div>
            </React.Fragment>
          ))}
        </List>
      </Wrapper>
    </React.Fragment>
  ));