Ecom UI - Biblioteca de Componentes React

Uma biblioteca moderna de componentes React com design system completo, otimizada para projetos Next.js e aplicações React.

🚀 Instalação Rápida

npm install [email protected]

// Importe os estilos no seu _app.js ou layout.js
import 'grupoecom-ecom-ui/dist/index.css';

// Use os componentes
import { Button, Badge, Card } from 'grupoecom-ecom-ui';

✨ Características

• 🎨 Design System Completo - Tokens de design consistentes
• 🌙 Tema Escuro/Claro - Suporte automático baseado na preferência do sistema
• 📱 Totalmente Responsivo - Otimizado para mobile, tablet e desktop
• ⚡ Otimizado para Performance - Tree-shaking e bundle otimizado
• 🔧 TypeScript - Tipagem completa incluída
• 🎯 Acessibilidade - Componentes seguem padrões WCAG
• 📚 Storybook - Documentação interativa dos componentes

📦 Componentes Disponíveis

Componentes Básicos

• Button - Botões com múltiplas variações (solid, outline, ghost, link)
• Badge - Etiquetas e indicadores de status
• Card - Containers de conteúdo estruturado
• Alert - Mensagens de alerta e notificações

Componentes de Formulário

• Input - Campos de entrada com estados e ícones
• Textarea - Área de texto redimensionável
• Select - Seletor dropdown customizável
• Checkbox - Caixas de seleção com estados
• Radio - Botões de rádio
• RadioGroup - Grupos de radio buttons

Componentes de Layout

• Grid - Sistema de grid flexível e responsivo
• Sidebar - Barra lateral colapsível
• Navbar - Barra de navegação
• ProfileCard - Cartão de perfil de usuário

Componentes Avançados

• Table - Tabelas de dados com ordenação
• Calendar - Calendário interativo
• ProgressBar - Barras de progresso animadas
• Notification - Sistema de notificações
• Rating - Sistema de avaliação por estrelas

🎯 Exemplo de Uso

import { Button, Card, Input, Badge } from 'grupoecom-ecom-ui';

function App() {
  return (
    <Card variant="default" padding="lg">
      <Card.Header>
        <h2>Formulário de Contato</h2>
        <Badge variant="solid" color="primary">Novo</Badge>
      </Card.Header>
      
      <Card.Body>
        <div className="space-y-4">
          <Input 
            placeholder="Seu nome" 
            size="md"
          />
          <Input 
            type="email" 
            placeholder="Seu email" 
            size="md"
          />
        </div>
      </Card.Body>
      
      <Card.Footer>
        <Button variant="solid" color="primary" size="md">
          Enviar
        </Button>
        <Button variant="outline" color="secondary" size="md">
          Cancelar
        </Button>
      </Card.Footer>
    </Card>
  );
}

📖 Documentação Completa

Para Next.js

Consulte o Guia de Instalação para Next.js para instruções detalhadas.

Storybook

Execute o Storybook para ver todos os componentes em ação:

npm run storybook

🎨 Personalização

Variáveis CSS

A biblioteca usa variáveis CSS que podem ser personalizadas:

:root {
  --ecom-color-primary-600: #2563eb;
  --ecom-color-neutral-950: #030712;
  --ecom-color-success-500: #10b981;
  /* ... mais variáveis */
}

Temas

Suporte para temas escuro e claro:

<!-- Tema escuro -->
<div data-theme="dark">
  <!-- Seus componentes -->
</div>

<!-- Tema claro -->
<div data-theme="light">
  <!-- Seus componentes -->
</div>

🔧 Desenvolvimento

Scripts Disponíveis

# Desenvolvimento
npm run dev          # Inicia Storybook
npm run storybook    # Inicia Storybook

# Build
npm run build        # Gera build de produção
npm run build-storybook  # Gera build do Storybook

# Testes
npm run test         # Executa testes
npm run test:watch   # Executa testes em modo watch

# Linting
npm run lint         # Executa ESLint
npm run lint:fix     # Corrige problemas do ESLint

Estrutura do Projeto

src/
├── components/          # Componentes React
│   ├── Button/
│   ├── Badge/
│   └── ...
├── tokens/             # Design tokens
│   ├── colors.css
│   ├── colors.ts
│   └── typography.ts
├── utils/              # Utilitários
└── index.ts           # Ponto de entrada principal

🚀 Últimas Atualizações (v0.1.2)

✅ Correções Implementadas

1. CSS Variables Incluídas no Build

   • Corrigido problema onde variáveis CSS não eram incluídas no dist/index.css
   • Adicionado import das variáveis CSS no ponto de entrada principal
   • Criado arquivo src/styles.css para garantir inclusão das variáveis

2. Configuração de Build Otimizada

   • Atualizado package.json com exports corretos para CSS
   • Configurado Rollup para extrair CSS corretamente
   • Melhorada compatibilidade com Next.js e outros bundlers

3. Documentação Completa

   • Criado guia detalhado de instalação para Next.js
   • Exemplos práticos de uso de todos os componentes
   • Instruções de personalização e temas

🔧 Problemas Resolvidos

• ❌ Antes: Estilos não apareciam quando biblioteca era instalada

• ✅ Depois: Todos os estilos e variáveis CSS funcionam corretamente

• ❌ Antes: Variações de componentes não funcionavam

• ✅ Depois: Todas as variações (cores, tamanhos, estados) funcionam

• ❌ Antes: Falta de documentação de instalação

• ✅ Depois: Guia completo com exemplos práticos

📋 Compatibilidade

• React: 17.0.0+
• Next.js: 12.0.0+
• TypeScript: 4.5.0+
• Node.js: 16.0.0+

🤝 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 (git push origin feature/AmazingFeature)
5. Abra um Pull Request

📄 Licença

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

📞 Suporte

• Documentação: Consulte este README e o guia do Next.js
• Storybook: Execute npm run storybook para ver exemplos
• Issues: Reporte problemas no repositório do projeto

Desenvolvido por Grupo ECOM | Versão: 0.1.2 | Última atualização: Janeiro 2025