@meganews-ui/react

Uma biblioteca de componentes React moderna e completa para aplicações enterprise

✨ Características

• 🎨 Design System Completo - Componentes consistentes e bem documentados
• 🛡️ TypeScript First - Tipagem estática completa para melhor DX
• 🚀 Performance Otimizada - Componentes leves e eficientes
• 🎯 Acessibilidade - Seguindo padrões WCAG 2.1
• 🌈 Temas Customizáveis - Sistema de design tokens flexível
• 📱 Responsivo - Funciona perfeitamente em todos os dispositivos
• 🔧 Tree Shaking - Importe apenas o que você precisa
• 📚 Storybook - Documentação interativa e playground

🚀 Instalação

# npm
npm install @meganews-ui/react

# yarn
yarn add @meganews-ui/react

# pnpm
pnpm add @meganews-ui/react

Dependências

# Instale também os tokens (obrigatório)
npm install @meganews-ui/tokens

🎯 Uso Rápido

import React from 'react';
import { 
  MegaButton, 
  MegaInput, 
  MegaSelect, 
  MegaTag,
  MegaProgress 
} from '@meganews-ui/react';

function App() {
  return (
    <div>
      <MegaButton variant="primary" size="medium">
        Clique aqui
      </MegaButton>
      
      <MegaInput 
        label="Nome"
        placeholder="Digite seu nome"
        required
      />
      
      <MegaSelect
        label="Cidade"
        options={[
          { value: 'sp', label: 'São Paulo' },
          { value: 'rj', label: 'Rio de Janeiro' }
        ]}
      />
      
      <MegaTag variant="success">
        Aprovado
      </MegaTag>
      
      <MegaProgress 
        steps={[
          { title: 'Dados', completed: true },
          { title: 'Pagamento', completed: false },
          { title: 'Confirmação', completed: false }
        ]}
        currentStep={1}
      />
    </div>
  );
}

📦 Componentes Disponíveis

🎛️ Formulários

• MegaInput - Campo de entrada com validação
• MegaSelect - Select customizado com busca
• MegaRadio - Botões de rádio agrupados
• MegaTag - Tags para categorização
• MegaFormSection - Seções de formulário organizadas

🎨 Interface

• MegaButton - Botões com múltiplas variantes
• MegaProgress - Barra de progresso com steps
• MegaLoadingMap - Mapa interativo do Brasil
• MegaIcon - Ícones do sistema

🏗️ Layout

• Box - Container flexível
• Divider - Separador visual
• Heading - Títulos tipográficos
• Text - Texto com variantes

🎯 Específicos

• Avatar - Foto de perfil
• CertificateStatus - Status de certificados
• CompanySelection - Seleção de empresas
• CreditCardForm - Formulário de cartão
• ModuleCard - Cards de módulos
• QuickActionCard - Cards de ação rápida
• SupportWidget - Widget de suporte
• Tooltip - Dicas contextuais

🎨 Temas e Customização

import { ThemeProvider } from '@meganews-ui/react';

function App() {
  return (
    <ThemeProvider theme={{
      colors: {
        primary: '#007bff',
        secondary: '#6c757d'
      },
      spacing: {
        sm: '8px',
        md: '16px',
        lg: '24px'
      }
    }}>
      {/* Seus componentes */}
    </ThemeProvider>
  );
}

🔧 Configuração do TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "react-jsx"
  }
}

🌐 Compatibilidade

| | | | | |:---:|:---:|:---:|:---:| | ✅ Last 2 versions | ✅ Last 2 versions | ✅ Last 2 versions | ✅ Last 2 versions |

📚 Documentação Completa

• 📖 Storybook - Documentação interativa
• 🎨 Design Tokens - Sistema de design
• 🚀 Guia de Contribuição
• 🐛 Reportar Bug

🤝 Contribuindo

Contribuições são sempre bem-vindas! Veja nosso guia de contribuição para começar.

Desenvolvimento Local

# Clone o repositório
git clone https://github.com/MegaNewsTech/MegaDesignSystem.git

# Instale as dependências
npm install

# Inicie o desenvolvimento
npm run dev

📄 Licença

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

👥 Equipe

• Marcos Augusto Rodrigues - Desenvolvedor Principal

Feito com ❤️ pela equipe MegaNews