EventX Design System

Um design system completo baseado no Figma, construído com React, TypeScript, Styled Components e Storybook.

🚀 Instalação

npm install eventx-design-system

📦 Componentes Disponíveis

Básicos

• Button - Botões com diferentes variantes e tamanhos
• Input - Campos de entrada de texto
• Card - Containers para conteúdo
• Badge - Indicadores de status
• Avatar - Imagens de perfil
• Divider - Separadores visuais
• Container - Containers responsivos

Formulários

• Select - Seletores dropdown
• Checkbox - Caixas de seleção
• Radio - Botões de opção

Feedback

• Modal - Janelas modais
• Loading - Indicadores de carregamento
• Tag - Tags para categorização

Navegação

• Tabs - Navegação por abas
• Pagination - Paginação

Dados

• Table - Tabelas de dados com ordenação, seleção e ações

🎨 Design Tokens

O design system utiliza tokens consistentes para:

• Cores: Paleta de cores primária, secundária, neutra e semântica
• Tipografia: Fontes, tamanhos, pesos e espaçamentos
• Espaçamento: Sistema de espaçamento consistente
• Border Radius: Raios de borda padronizados
• Sombras: Sistema de sombras

📖 Uso

Importação

import { Button, Input, Card, Badge, Avatar, Divider, Modal, Select, Checkbox, Radio, Container, Loading, Tag, Tabs, Pagination, Table, Alert } from 'eventx-design-system';

Exemplos de Uso

Button

<Button variant="primary" size="medium" onClick={() => console.log('Clicked!')}>
  Clique aqui
</Button>

Input

<Input 
  placeholder="Digite seu nome"
  value={value}
  onChange={(e) => setValue(e.target.value)}
/>

Card

<Card>
  <h3>Título do Card</h3>
  <p>Conteúdo do card aqui...</p>
</Card>

Badge

<Badge variant="success" size="medium">
  Ativo
</Badge>

Avatar

<Avatar 
  src="/path/to/image.jpg"
  alt="User Avatar"
  size="large"
/>

Alert

<Alert 
  variant="success" 
  title="Sucesso!" 
  dismissible={true}
  onDismiss={() => console.log('Alert dismissed')}
>
  A operação foi concluída com sucesso.
</Alert>

Modal

<Modal 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Título do Modal"
>
  <p>Conteúdo do modal...</p>
</Modal>

Select

<Select
  options={[
    { value: 'option1', label: 'Opção 1' },
    { value: 'option2', label: 'Opção 2' }
  ]}
  value={selectedValue}
  onChange={(value) => setSelectedValue(value)}
  placeholder="Selecione uma opção"
/>

Loading

<Loading variant="spinner" size="medium" />

Tag

<Tag variant="success" size="medium">
  Sucesso
</Tag>

Tabs

<Tabs
  tabs={[
    { id: 'tab1', label: 'Aba 1', content: <div>Conteúdo 1</div> },
    { id: 'tab2', label: 'Aba 2', content: <div>Conteúdo 2</div> }
  ]}
  onChange={(tabId) => console.log('Tab changed:', tabId)}
/>

Pagination

<Pagination
  currentPage={1}
  totalPages={10}
  totalItems={100}
  pageSize={10}
  onPageChange={(page) => console.log('Page changed:', page)}
/>

Table

const columns = [
  { key: 'name', title: 'Nome', dataIndex: 'name', sortable: true },
  { key: 'email', title: 'Email', dataIndex: 'email' },
  { key: 'status', title: 'Status', dataIndex: 'status' },
];

const data = [
  { id: '1', name: 'João Silva', email: '[email protected]', status: 'Ativo' },
  { id: '2', name: 'Maria Santos', email: '[email protected]', status: 'Inativo' },
];

<Table
  columns={columns}
  dataSource={data}
  variant="default"
  hoverable
  selectable
  onRowClick={(record) => console.log('Row clicked:', record)}
/>

🛠️ Desenvolvimento

Pré-requisitos

• Node.js 16+
• npm ou yarn

Instalação das dependências

npm install

Executar Storybook

npm run storybook

Build

npm run build

Testes

npm test

Lint

npm run lint

📚 Storybook

O Storybook está disponível em http://localhost:6006 após executar npm run storybook.

Cada componente possui:

• Documentação automática
• Controles interativos
• Exemplos de uso
• Variações de props

🎯 Design Tokens

Os tokens de design são baseados no arquivo design-tokens.tokens.json do Figma e incluem:

Cores

• Primary: Tons de rosa/vermelho (#E980A7)
• Secondary: Tons de roxo (#9187AB)
• Neutral: Tons de cinza (#FFFFFF a #11142D)
• Semantic: Success, Error, Warning, Info

Tipografia

• Font Family: Poppins (primária), Cairo (secundária)
• Font Sizes: xs (12px) a 9xl (96px)
• Font Weights: light (300) a black (900)

Espaçamento

• Sistema baseado em 4px (0 a 96)

Border Radius

• none (0px) a full (9999px)

🤝 Contribuição

1. Fork o projeto
2. Crie uma branch para sua feature (git checkout -b feature/AmazingFeature)
3. Commit suas mudanças (git commit -m 'Add some AmazingFeature')
4. Push para a branch (`