Agro-E-UI

Uma biblioteca de componentes UI moderna e responsiva, desenvolvida especificamente para projetos do setor agropecuário. Oferece componentes React reutilizáveis com design consistente e acessibilidade integrada.

🚀 Características

• Design System Consistente: Componentes com visual unificado e profissional
• Responsivo: Funciona perfeitamente em dispositivos móveis e desktop
• Acessível: Segue as melhores práticas de acessibilidade (WCAG)
• TypeScript: Totalmente tipado para melhor experiência de desenvolvimento
• Customizável: Fácil personalização através de props e CSS
• Performance: Componentes otimizados e leves

📦 Instalação

Pré-requisitos

Esta biblioteca requer as seguintes dependências:

npm install bootstrap@^5.0.0 bootstrap-icons@^1.0.0 react@^16.8.0 react-dom@^16.8.0

Instalar a biblioteca

npm install agro-e-ui

🔧 Configuração

1. Importar CSS da biblioteca

IMPORTANTE: Você DEVE importar o CSS da biblioteca para que os estilos funcionem corretamente.

// No seu arquivo principal (App.tsx, index.tsx, main.tsx)
import 'agro-e-ui/dist/index.css';

2. Importar Bootstrap (se ainda não estiver usando)

// Se você não estiver usando Bootstrap em outro lugar
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

🎯 Uso

Importar componentes

import { AgroButton } from 'agro-e-ui';

Exemplo básico

import React from 'react';
import { AgroButton } from 'agro-e-ui';
import 'agro-e-ui/dist/index.css';

function App() {
  return (
    <div>
      <AgroButton 
        text="Clique aqui" 
        variant="primary" 
        onClick={() => alert('Botão clicado!')} 
      />
    </div>
  );
}

🎨 Componentes Disponíveis

AgroButton

Botão versátil com múltiplas variantes (primary, secondary, light, warning, outline), suporte a ícones, estados de loading e totalmente customizável.

Documentação completa: Storybook ou execute npm run storybook localmente.

Mais componentes em desenvolvimento...

• AgroInput - Campos de entrada customizados
• AgroCard - Cards informativos
• AgroModal - Modais responsivos
• AgroTable - Tabelas de dados
• AgroForm - Formulários completos

🎨 Personalização

CSS Customizado

Todos os componentes seguem um padrão de nomenclatura consistente. Você pode sobrescrever estilos usando CSS customizado:

/* Exemplo: Customizar border-radius de todos os botões */
.custom-btn {
  border-radius: 20px !important;
}

/* Exemplo: Customizar cores de variantes */
.custom-btn-primary {
  background: linear-gradient(to right, #ff6b6b, #ee5a24) !important;
}

Sistema de Classes

Os componentes usam classes CSS semânticas e consistentes:

• Base: .custom-btn, .custom-input, .custom-card
• Variantes: .custom-btn-primary, .custom-input-error
• Estados: .custom-btn-disabled, .custom-input-focus

Dica: Use o DevTools para inspecionar as classes CSS disponíveis em cada componente.

🚨 Solução de Problemas

Estilos não estão funcionando?

1. Verifique se importou o CSS:

   import 'agro-e-ui/dist/index.css';

2. Verifique se Bootstrap está instalado:

   npm list bootstrap bootstrap-icons

3. Limpe cache e reinstale:

   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install

4. Verifique se não há CSS conflitante sobrescrevendo os estilos

Componente não renderiza?

1. Verifique se React está instalado:

   npm list react react-dom

2. Verifique se TypeScript está configurado (se estiver usando)

🔧 Desenvolvimento

Estrutura do projeto

agro-e-ui/
├── src/
│   ├── components/
│   │   └── AgroButton/
│   │       ├── AgroButton.tsx
│   │       ├── AgroButton.css
│   │       └── index.ts
│   └── index.ts
├── dist/           # Arquivos compilados
├── stories/        # Storybook
└── package.json

Scripts disponíveis

npm run build          # Compilar para produção
npm run dev            # Compilar em modo watch
npm run storybook      # Iniciar Storybook
npm run build-storybook # Build do Storybook
npm run test           # Executar testes
npm run lint           # Verificar código
npm run lint:fix       # Corrigir problemas de lint

Build

npm run build

O build gera:

• dist/index.js - Versão CommonJS
• dist/index.esm.js - Versão ES Modules
• dist/index.css - CSS compilado
• dist/index.d.ts - Tipos TypeScript

📚 Exemplos Completos

Formulário de cadastro

import React, { useState } from 'react';
import { AgroButton } from 'agro-e-ui';
import 'agro-e-ui/dist/index.css';

function CadastroForm() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    setLoading(true);
    // Simular envio
    await new Promise(resolve => setTimeout(resolve, 2000));
    setLoading(false);
  };

  return (
    <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
      <div className="mb-3">
        <label className="form-label">Nome</label>
        <input type="text" className="form-control" />
      </div>
      
      <div className="mb-3">
        <label className="form-label">Email</label>
        <input type="email" className="form-control" />
      </div>
      
      <AgroButton 
        text="Cadastrar" 
        type="submit" 
        variant="primary" 
        loading={loading} 
        loadingText="Cadastrando..." 
        iconName="person-plus" 
      />
    </form>
  );
}

Dashboard com múltiplos botões

import React from 'react';
import { AgroButton } from 'agro-e-ui';
import 'agro-e-ui/dist/index.css';

function Dashboard() {
  return (
    <div className="container">
      <h1>Dashboard Agro</h1>
      
      <div className="row g-3">
        <div className="col-md-6">
          <AgroButton 
            text="Relatórios" 
            variant="primary" 
            iconName="file-earmark-text" 
            className="w-100" 
          />
        </div>
        
        <div className="col-md-6">
          <AgroButton 
            text="Configurações" 
            variant="secondary" 
            iconName="gear" 
            className="w-100" 
          />
        </div>
        
        <div className="col-md-6">
          <AgroButton 
            text="Alertas" 
            variant="warning" 
            iconName="exclamation-triangle" 
            className="w-100" 
          />
        </div>
        
        <div className="col-md-6">
          <AgroButton 
            text="Sair" 
            variant="outline" 
            iconName="box-arrow-right" 
            className="w-100" 
          />
        </div>
      </div>
    </div>
  );
}

🔄 Changelog