🎨 DevScout Design System

Um sistema de design moderno e flexível para aplicações DevScout, construído com React, TypeScript e TailwindCSS.

✨ Características

• 🎯 Componentes Prontos: Biblioteca completa de componentes React reutilizáveis
• 🎨 Multi-Tema: Suporte nativo para temas Recruiter e Candidate
• 🚀 TypeScript First: Tipagem completa para melhor experiência de desenvolvimento
• 📱 Responsivo: Design mobile-first com breakpoints consistentes
• ⚡ Performance: Otimizado com tree-shaking e bundle splitting
• 🧪 Testado: Cobertura de testes com Vitest
• 📚 Storybook: Documentação interativa dos componentes
• 🎭 Acessibilidade: Componentes acessíveis baseados no Radix UI

📦 Instalação

Pré-requisitos

# Versões mínimas necessárias
React >= 19.0.0
React DOM >= 19.0.0
TailwindCSS >= 4.1.11

Instalar o pacote

# npm
npm install @devscout/ui

# yarn
yarn add @devscout/ui

# pnpm
pnpm add @devscout/ui

Dependências opcionais

Para funcionalidades completas de formulários e validação:

# npm
npm install react-hook-form zod

# yarn
yarn add react-hook-form zod

# pnpm
pnpm add react-hook-form zod

⚙️ Configuração

1. Configurar TailwindCSS

Adicione o design system ao seu tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@devscout/ui/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

2. Importar estilos

Importe os estilos base em seu arquivo CSS principal:

/* src/index.css ou src/App.css */
@import '@devscout/ui/styles.css';

3. Configurar Provider (Opcional)

Para funcionalidades de tema e toast:

import { DesignSystemProvider } from '@devscout/ui';

function App() {
  return (
    <DesignSystemProvider theme="recruiter">
      {/* Sua aplicação */}
    </DesignSystemProvider>
  );
}

🚀 Uso Básico

import { Button, Input, Toast } from '@devscout/ui';

function MyComponent() {
  return (
    <div className="space-y-4">
      <Button variant="default" size="lg">
        Botão Padrão
      </Button>

      <Button variant="cta-primary" size="lg">
        Call to Action
      </Button>

      <Input
        placeholder="Digite aqui..."
        className="w-full"
      />
    </div>
  );
}

🎨 Sistema de Temas

O design system suporta dois temas principais:

Tema Recruiter (Padrão)

<div className="theme-recruiter">
  <Button variant="cta-primary">
    Botão Recruiter
  </Button>
</div>

Tema Candidate

<div className="theme-candidate">
  <Button variant="cta-primary">
    Botão Candidate
  </Button>
</div>

Variáveis CSS Disponíveis

:root {
  /* Cores do tema */ 
  --theme-brand-primary: var(--recruiter-primary);
  --theme-brand-secondary: var(--recruiter-secondary);
  --theme-brand-tertiary: var(--recruiter-tertiary);
  --theme-brand-gradient: var(--recruiter-gradient);
}

📋 Componentes Disponíveis

Formulários

• Button - Botões com múltiplas variantes
• Input - Campos de entrada
• Label - Rótulos para formulários
• Select - Seletores dropdown
• Checkbox - Caixas de seleção
• Radio / RadioGroup - Botões de opção
• Switch - Interruptores toggle
• Combobox - Campo de busca com autocomplete

Layout

• Dialog / AlertDialog - Modais e diálogos
• Toast / Toaster - Notificações
• Tooltip - Dicas contextuais
• Separator - Divisores visuais
• Skeleton - Carregamento esqueleto

Navegação

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

Feedback

• ProgressBar - Barras de progresso
• LoadingSpinner - Indicadores de carregamento
• Badge - Etiquetas e status

Tipografia

• Heading - Títulos hierárquicos
• Text - Texto com variantes

Dados

• Table - Tabelas de dados
• TableReport - Tabelas de relatório
• Charts - Componentes de gráficos

🛠️ Desenvolvimento

Scripts Disponíveis

# Desenvolvimento com Storybook
pnpm dev

# Build da biblioteca
pnpm build

# Testes
pnpm test
pnpm test:watch
pnpm test:coverage

# Linting e formatação
pnpm lint
pnpm format
pnpm lint:format:sort:fix

# Verificação de tipos
pnpm typecheck

Executar Localmente

# Clonar o repositório
git clone <repo-url>
cd design-system

# Instalar dependências
pnpm install

# Iniciar Storybook
pnpm dev

# Build da biblioteca
pnpm build

📚 Storybook

Acesse a documentação interativa dos componentes:

pnpm dev

Depois abra: http://localhost:6006

🧪 Testes

Execute os testes unitários:

# Executar todos os testes
pnpm test

# Modo watch
pnpm test:watch

# Com cobertura
pnpm test:coverage

📦 Build e Publicação

O design system é buildado com:

• tsup - Para bundling otimizado
• TypeScript - Para geração de types
• Tree-shaking - Para bundles menores
• Multiple formats - ESM e CJS

Estrutura de Exports

// Componentes principais
import { Button, Input } from '@devscout/ui';

// Utilitários
import { cn } from '@devscout/ui/utils';

// Core (funcionalidades especiais)
import { sendFeedback } from '@devscout/ui/core';

// Estilos
import '@devscout/ui/styles.css';

🤝 Contribuição

Diretrizes de Commit

Este projeto usa Conventional Commits:

# Commit com commitizen
pnpm commit

# Tipos disponíveis:
# feat: nova funcionalidade
# fix: correção de bug
# docs: documentação
# style: formatação
# refactor: refatoração
# test: testes
# chore: manutenção

Fluxo de Desenvolvimento

1. Fork do repositório
2. Crie uma branch: git checkout -b feature/nova-funcionalidade
3. Desenvolva e teste suas mudanças
4. Execute: pnpm lint:format:sort:fix
5. Commit: pnpm commit
6. Push: git push origin feature/nova-funcionalidade
7. Abra um Pull Request

Estrutura do Projeto

src/
├── components/          # Componentes React
│   ├── button/
│   │   ├── button.tsx
│   │   └── index.ts
│   └── ...
├── hooks/              # Custom hooks
├── providers/          # Context providers
├── styles/             # Estilos globais
├── utils/              # Funções utilitárias
└── types/              # Definições de tipos

📄 Licença

Este projeto está sob a licença ISC. Veja o arquivo LICENSE para detalhes.

🆘 Suporte

• 💬 Comunidade DevScout no WhatsApp