eai-frontend-components

EAI Design System Components

Biblioteca de componentes UI reutilizáveis baseada em shadcn/ui e Radix UI para projetos EAI.

Instalação

# NPM
npm install eai-frontend-components

# Yarn
yarn add eai-frontend-components

# PNPM
pnpm add eai-frontend-components

Por que usar eai-frontend-components?

• Performático: Tree-shaking otimizado, apenas importe o que usar
• Personalizável: Baseado em Tailwind CSS com tokens de design
• Acessível: Construído com Radix UI primitives (WCAG 2.1)
• TypeScript: Totalmente tipado para melhor DX
• Dark Mode: Suporte nativo a múltiplos temas
• Responsivo: Mobile-first e totalmente adaptativo
• Moderno: React 18+, ESM, e as melhores práticas

Release Automático

Este projeto usa Semantic Release para publicação automática no NPM:

• feat: → Nova funcionalidade (versão minor)
• fix: → Correção de bug (versão patch)
• feat!: → Breaking change (versão major)

Exemplo:

git commit -m "feat: adicionar componente DatePicker"
git push origin master
# → Versão 2.0.4 vira 2.1.0 automaticamente! 🎉

Documentação Adicional

• Guia de Publicação - Como funciona o release automático
• Conventional Commits - Padrão de commits obrigatório

Características

• Performance: Componentes otimizados com Tree-shaking
• Customizável: Sistema de design tokens com Tailwind CSS
• Acessível: Construído com Radix UI primitives
• TypeScript: Totalmente tipado
• Modular: Importe apenas o que você precisa
• Dark Mode: Suporte nativo a temas

Instalação

npm install eai-frontend-components
# ou
yarn add eai-frontend-components

Configuração

1. Adicione os estilos CSS

Importe os estilos globais no seu projeto:

// src/main.tsx ou src/App.tsx
import 'eai-frontend-components/dist/styles.css';

2. Configure o Tailwind CSS

Adicione o conteúdo da biblioteca no seu tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/eai-frontend-components/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ... resto da configuração
}

3. Configure as variáveis CSS

Adicione as variáveis de tema no seu CSS:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  /* ... outras variáveis */
}

Uso Básico

import { Button, Card, Input } from 'eai-frontend-components';

function App() {
  return (
    <Card className="p-6">
      <Input placeholder="Digite algo..." />
      <Button onClick={() => alert('Clicou!')}>
        Clique aqui
      </Button>
    </Card>
  );
}

Componentes Disponíveis

Layouts

• Card - Cartões com header, content e footer
• Sheet - Painel lateral deslizante
• Dialog - Modais e dialogs
• Accordion - Conteúdo expansível

Formulários

• Button - Botões com múltiplas variantes
• Input - Campos de texto
• Select - Seletor dropdown
• Checkbox - Caixas de seleção
• RadioGroup - Grupos de radio buttons
• Textarea - Área de texto
• Switch - Interruptores
• Slider - Controles deslizantes

Navegação

• Tabs - Abas navegáveis
• Breadcrumb - Navegação hierárquica
• Pagination - Paginação de dados
• Command - Paleta de comandos

Feedback

• Alert - Alertas e notificações
• Toast - Notificações temporárias
• Progress - Barras de progresso
• Badge - Etiquetas e tags
• Skeleton - Loading states

Exibição de Dados

• Table - Tabelas estruturadas
• Avatar - Imagens de perfil
• Calendar - Seletor de datas
• Tooltip - Dicas contextuais

Customização

Variantes de Componentes

<Button variant="default">Padrão</Button>
<Button variant="outline">Contorno</Button>
<Button variant="ghost">Fantasma</Button>
<Button variant="destructive">Destrutivo</Button>

Tamanhos

<Button size="sm">Pequeno</Button>
<Button size="default">Padrão</Button>
<Button size="lg">Grande</Button>

Classes Customizadas

<Button className="bg-purple-600 hover:bg-purple-700">
  Customizado
</Button>

Dark Mode

Configure o dark mode adicionando a classe dark ao elemento raiz:

// Exemplo com context
const [theme, setTheme] = useState('light');

return (
  <div className={theme === 'dark' ? 'dark' : ''}>
    <App />
  </div>
);

Storybook

Execute o Storybook para visualizar todos os componentes:

yarn dev

Desenvolvimento

# Instale as dependências
yarn install

# Desenvolvimento com watch
yarn build:watch

# Build de produção
yarn build

# Lint
yarn lint

Exemplos

Formulário Completo

import { 
  Card, 
  CardContent, 
  CardHeader, 
  CardTitle,
  Button,
  Input,
  Label,
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from 'eai-frontend-components';

function ContactForm() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>Contato</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div>
          <Label htmlFor="name">Nome</Label>
          <Input id="name" placeholder="Seu nome" />
        </div>
        
        <div>
          <Label htmlFor="type">Tipo</Label>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Selecione..." />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="comercial">Comercial</SelectItem>
              <SelectItem value="suporte">Suporte</SelectItem>
            </SelectContent>
          </Select>
        </div>
        
        <Button className="w-full">Enviar</Button>
      </CardContent>
    </Card>
  );
}

Contribuição

1. Faça o fork do projeto
2. Crie uma branch para sua feature (git checkout -b feature/nova-feature)
3. Commit suas mudanças (git commit -m 'feat: adiciona nova feature')
4. Push para a branch (git push origin feature/nova-feature)
5. Abra um Pull Request

Licença

MIT EAI Team

Links

• Documentação Radix UI
• Tailwind CSS
• shadcn/ui