@revuu/ds

Design System oficial do ecossistema Revuu. Componentes React com Tailwind CSS, Radix UI e acessibilidade.

Instalação

# npm
npm install @revuu/ds

# pnpm
pnpm add @revuu/ds

# yarn
yarn add @revuu/ds

Configuração

1. Configure o Tailwind CSS

// tailwind.config.js
module.exports = {
  presets: [require('@revuu/ds/tailwind-preset')],
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './node_modules/@revuu/ds/dist/**/*.{js,mjs}',
  ],
}

2. Importe os estilos

// app/layout.tsx ou globals.css
import '@revuu/ds/styles.css'

Uso

import { Button, Card, Input, Dialog } from '@revuu/ds'

function MyComponent() {
  return (
    <Card>
      <Input placeholder="Digite seu email" />
      <Button variant="primary">Enviar</Button>
    </Card>
  )
}

Componentes Disponíveis

Básicos

• Button - Botões com variantes (primary, secondary, outline, ghost, destructive)
• Input - Campo de entrada de texto
• Textarea - Área de texto
• Label - Rótulos para formulários
• Badge - Badges/Tags

Layout

• Card - Container com sombra
• Separator - Divisor visual
• AspectRatio - Manter proporção de mídia
• ScrollArea - Área com scroll customizado

Formulários

• Checkbox - Caixa de seleção
• RadioGroup - Grupo de radio buttons
• Select - Dropdown de seleção
• Switch - Toggle on/off
• Slider - Seletor de range
• DatePicker - Seletor de data
• ColorPicker - Seletor de cor
• FileUpload - Upload de arquivos
• InputOTP - Input para código OTP

Navegação

• Tabs - Navegação por abas
• Breadcrumb - Trilha de navegação
• NavigationMenu - Menu de navegação
• Pagination - Paginação
• DropdownMenu - Menu dropdown

Feedback

• Dialog - Modal
• AlertDialog - Modal de confirmação
• Toast - Notificações
• Tooltip - Dicas de ferramenta
• Progress - Barra de progresso
• Skeleton - Placeholder de loading

Dados

• Table - Tabela básica
• DataTable - Tabela avançada com sort/filter
• Timeline - Linha do tempo
• StatCard - Cards de métricas
• EmptyState - Estados vazios
• Calendar - Calendário
• Chart - Gráficos

Avançados

• Accordion - Seções colapsáveis
• Collapsible - Colapsável simples
• HoverCard - Card no hover
• Popover - Popover genérico
• ContextMenu - Menu de contexto
• Command - Paleta de comandos
• Sheet - Painel lateral
• Carousel - Carrossel
• Resizable - Painéis redimensionáveis
• Avatar - Avatar de usuário

Design Tokens

import { colors, spacing, typography } from '@revuu/ds/tokens'

Cores do Tema

| Nome | Hex | |------|-----| | Primary (Revuu Orange) | #F59E0B | | Hub Purple | #8600D3 | | Success | #22C55E | | Error | #EF4444 | | Warning | #EAB308 | | Info | #3B82F6 |

Brand Assets

SVG logos e ícones estão disponíveis na pasta assets/:

• LogoRevuu.svg - Logo principal
• LogoHub.svg - Logo do Hub
• LogoOps.svg - Logo do Ops
• IconRevuu.svg - Ícone do app
• FaviconRevuu.svg - Favicon

Desenvolvimento

# Instalar dependências
pnpm install

# Rodar Storybook
pnpm storybook

# Build
pnpm build

# Type check
pnpm typecheck

# Publicar nova versão
pnpm release:patch  # 0.1.0 -> 0.1.1
pnpm release:minor  # 0.1.0 -> 0.2.0
pnpm release:major  # 0.1.0 -> 1.0.0

Publicação

NPM (público)

1. Configure o token NPM:

   npm login
   # ou
   echo "//registry.npmjs.org/:_authToken=YOUR_TOKEN" >> ~/.npmrc

2. Publique:

   pnpm release:patch

GitHub Actions (automático)

O workflow .github/workflows/publish.yml publica automaticamente:

• Ao criar uma release no GitHub
• Manualmente via Actions tab

Configure o secret NPM_TOKEN no repositório.

Links

• GitHub
• Revuu
• Revuu Hub

Licença

MIT © Revuu