@erickjonatthan/minha-lib

Biblioteca de componentes React moderna e elegante com suporte ao Bootstrap.

📦 Instalação

npm install @erickjonatthan/minha-lib bootstrap

🚀 Configuração

Esta biblioteca usa o Bootstrap como base. Você precisa importar o CSS do Bootstrap uma vez no seu projeto:

// src/main.tsx ou src/index.tsx (importar apenas uma vez)
import 'bootstrap/dist/css/bootstrap.min.css';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')!).render(<App />);

💡 Uso

import { Button } from '@erickjonatthan/minha-lib';

function App() {
  return (
    <div>
      {/* Variantes Bootstrap */}
      <Button variant="primary">Primary</Button>
      <Button variant="success" size="lg">Success Grande</Button>
      <Button variant="danger">Danger</Button>
    
      {/* Variantes Customizadas da Lib */}
      <Button variant="purple">Purple (Customizado)</Button>
      <Button variant="pink">Pink (Customizado)</Button>
      <Button variant="teal">Teal (Customizado)</Button>
      <Button variant="orange">Orange (Customizado)</Button>
      <Button variant="indigo">Indigo (Customizado)</Button>
      <Button variant="cyan">Cyan (Customizado)</Button>
    
      {/* Com Gradientes Elegantes */}
      <Button variant="primary" gradient>Primary com Gradiente</Button>
      <Button variant="success" gradient>Success com Gradiente</Button>
      <Button variant="purple" gradient>Purple com Gradiente</Button>
      <Button variant="teal" gradient size="lg">Teal Grande com Gradiente</Button>
    </div>
  );
}

🎨 Variantes Disponíveis

A biblioteca oferece 14 variantes no total:

🔷 Variantes Bootstrap (8)

Estilos padrão do Bootstrap:

• primary - Azul
• secondary - Cinza
• success - Verde
• danger - Vermelho
• warning - Amarelo
• info - Azul claro
• light - Claro
• dark - Escuro

🌈 Variantes Customizadas da Lib (6)

Cores exclusivas com estilos personalizados:

• purple - Roxo elegante (#6f42c1)
• pink - Rosa vibrante (#e83e8c)
• teal - Verde água (#20c997)
• orange - Laranja (#fd7e14)
• indigo - Índigo (#6610f2)
• cyan - Ciano (#0dcaf0)

✨ Prop gradient

Adicione gradient={true} para aplicar gradientes elegantes em qualquer variante:

{/* Gradientes nas variantes Bootstrap */}
<Button variant="primary" gradient>Primary com Gradiente Azul</Button>
<Button variant="success" gradient>Success com Gradiente Verde</Button>
<Button variant="danger" gradient>Danger com Gradiente Vermelho</Button>

{/* Gradientes nas variantes customizadas */}
<Button variant="purple" gradient>Purple com Gradiente Roxo</Button>
<Button variant="teal" gradient>Teal com Gradiente Verde Água</Button>
<Button variant="orange" gradient>Orange com Gradiente Laranja</Button>

Cada variante possui seu próprio gradiente harmonioso! 🎨

📏 Tamanhos

Todas as variantes suportam os tamanhos do Bootstrap:

<Button variant="purple" size="sm">Pequeno</Button>
<Button variant="purple">Normal</Button>
<Button variant="purple" size="lg">Grande</Button>

{/* Funciona com gradientes também */}
<Button variant="teal" gradient size="sm">Pequeno com Gradiente</Button>
<Button variant="teal" gradient size="lg">Grande com Gradiente</Button>

⚙️ Props

| Prop | Tipo | Padrão | Descrição | | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------------------- | | variant | 'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'light' \| 'dark' \| 'purple' \| 'pink' \| 'teal' \| 'orange' \| 'indigo' \| 'cyan' | 'primary' | Variante do botão | | size | 'sm' \| 'lg' | - | Tamanho do botão | | gradient | boolean | false | Aplica gradiente elegante | | children | ReactNode | - | Conteúdo do botão | | disabled | boolean | false | Desabilita o botão | | ...props | HTMLButtonElement | - | Props padrão de button |

💡 Exemplos Práticos

// Variantes simples
<Button variant="primary">Botão Azul</Button>
<Button variant="purple">Botão Roxo Customizado</Button>

// Com tamanhos
<Button variant="teal" size="lg">Teal Grande</Button>
<Button variant="pink" size="sm">Pink Pequeno</Button>

// Com gradientes
<Button variant="success" gradient>Verde com Gradiente</Button>
<Button variant="indigo" gradient>Índigo com Gradiente</Button>

// Combinando tudo
<Button variant="orange" gradient size="lg">
  Laranja Grande com Gradiente
</Button>

// Estados
<Button variant="purple" disabled>Desabilitado</Button>
<Button variant="cyan" gradient disabled>Gradiente Desabilitado</Button>

✨ Características

• ✅ 14 Variantes: 8 do Bootstrap + 6 customizadas
• ✅ Gradientes Elegantes: Adicione gradient em qualquer variante
• ✅ Sem Conflitos: Estilos customizados usam prefixo ericklib-
• ✅ Tamanhos Bootstrap: sm e lg funcionam em todas as variantes
• ✅ Leve: Bootstrap não é empacotado (peerDependency)
• ✅ Acessível: Suporte completo a estados e animações
• ✅ TypeScript: Totalmente tipado com IntelliSense

📦 Dependências

• React ^19.1.1
• Bootstrap ^5.3.0 (peerDependency)

📄 Licença

MIT