eventx-design-system/README.md

Design System do EventX

# EventX Design System

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

## 🚀 Instalação

```bash
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

```tsx
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
```tsx
<Button variant="primary" size="medium" onClick={() => console.log('Clicked!')}>
  Clique aqui
</Button>
```

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

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

#### Badge
```tsx
<Badge variant="success" size="medium">
  Ativo
</Badge>
```

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

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

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

#### Select
```tsx
<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
```tsx
<Loading variant="spinner" size="medium" />
```

#### Tag
```tsx
<Tag variant="success" size="medium">
  Sucesso
</Tag>
```

#### Tabs
```tsx
<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
```tsx
<Pagination
  currentPage={1}
  totalPages={10}
  totalItems={100}
  pageSize={10}
  onPageChange={(page) => console.log('Page changed:', page)}
/>
```

#### Table
```tsx
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: 'joao@email.com', status: 'Ativo' },
  { id: '2', name: 'Maria Santos', email: 'maria@email.com', 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
```bash
npm install
```

### Executar Storybook
```bash
npm run storybook
```

### Build
```bash
npm run build
```

### Testes
```bash
npm test
```

### Lint
```bash
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 (`