@dwv/ui

Design System da DWV - Componentes React com Tailwind CSS.

Instalação

npm install @dwv/ui

Uso

import { Button } from '@dwv/ui'
import '@dwv/ui/styles.css'

const App = () => (
  <Button variant="primary" size="md">
    Click me
  </Button>
)

Componentes disponíveis

Actions

• Button - Botão com variantes (primary, secondary, outline, ghost, link)

Forms (em breve)

• Input
• Select
• Checkbox
• Radio

Feedback (em breve)

• Toast
• Alert
• Skeleton

Display (em breve)

• Badge
• Avatar
• Table

Overlays (em breve)

• Modal
• Drawer
• Popover

Desenvolvimento

# Instalar dependências
npm install

# Build
npm run build

# Watch mode
npm run dev

# Type check
npm run typecheck

Publicação

# Build e publicar
npm publish

Estrutura

src/
├── components/
│   ├── actions/      # Button, IconButton, Link
│   ├── forms/        # Input, Select, Checkbox
│   ├── feedback/     # Toast, Alert, Skeleton
│   ├── layout/       # Container, Grid, Stack
│   ├── display/      # Badge, Avatar, Table
│   └── overlays/     # Modal, Drawer, Popover
├── lib/
│   └── cn.ts         # Função de merge de classes
├── styles/
│   └── theme.css     # Estilos base e tema
└── index.ts          # Barrel export

Guidelines

A pasta guidelines/ contém documentação para o Figma Make entender como usar os componentes corretamente.

Padrões

Este pacote segue os padrões definidos em:

• docs/standards/frontend/STANDARDS.md
• docs/standards/frontend/ARCHITECTURE.md