Librarindia UI JS

Uma biblioteca de componentes UI moderna e personalizável,com sistema de temas flexível e componentes responsivos.

Características Basicas

• Componentes Modernos: Button, Input, Card e mais
• Sistema de Temas: Tema claro e escuro com transições suaves
• Responsivo: Design adaptável para todos os dispositivos
• Acessível: Suporte completo a navegação por teclado e leitores de tela
• Customizável: Variáveis CSS para personalização fácil
• Leve: Sem dependências externas pesadas
• TypeScript Ready: Preparado para projetos TypeScript

Instalação

npm install librarindia-ui

Ou clone o repositório:

git clone https://github.com/seu-usuario/librarindia-ui.git
cd librarindia-ui
npm install

Build

# Build de produção
npm run build

# Desenvolvimento com hot reload
npm run dev

# Build em modo watch
npm run watch

Uso Básico

Importar a biblioteca

import LibrarindiaUI from 'librarindia-ui';

// Criar instância
const ui = new LibrarindiaUI();

Criar componentes programaticamente

// Botão
const button = ui.createButton({
  variant: 'primary',
  size: 'large',
  text: 'Clique aqui'
});

// Input
const input = ui.createInput({
  type: 'email',
  placeholder: '[email protected]',
  required: true
});

// Card
const card = ui.createCard({
  title: 'Meu Card',
  content: 'Conteúdo do card',
  interactive: true
});

Usar com data attributes

<!-- Botão -->
<button data-librarindia="button" 
        data-variant="primary" 
        data-size="large">
  Botão Automático
</button>

<!-- Input -->
<input data-librarindia="input" 
       data-type="email" 
       data-placeholder="Email"
       data-required="true">

<!-- Card -->
<div data-librarindia="card" 
     data-interactive="true">
  Card interativo
</div>

🎨 Sistema de Temas

Alternar tema

// Obter gerenciador de temas
const themeManager = ui.getThemeManager();

// Alternar entre claro/escuro
themeManager.toggleTheme();

// Definir tema específico
themeManager.setTheme('dark');

// Verificar tema atual
console.log(themeManager.getCurrentTheme());

Temas customizados

// Adicionar tema customizado
themeManager.addCustomTheme('custom', {
  '--primary-500': '#ff6b6b',
  '--secondary-500': '#4ecdc4',
  '--bg-primary': '#2d3436'
});

// Aplicar tema customizado
themeManager.setTheme('custom');

🧩 Componentes

Button

const button = ui.createButton({
  variant: 'primary',     // primary, secondary, success, warning, error, outlined, text
  size: 'medium',         // small, medium, large
  disabled: false,        // true/false
  loading: false,         // true/false
  iconOnly: false         // true/false
});

// Métodos
button.setLoading(true);
button.setDisabled(true);
button.setVariant('secondary');
button.setSize('large');

Input

const input = ui.createInput({
  type: 'text',           // text, email, password, search, tel, url, number
  variant: 'outlined',    // outlined, filled
  size: 'medium',         // small, medium, large
  required: false,        // true/false
  disabled: false,        // true/false
  placeholder: '',        // texto do placeholder
  label: '',             // label flutuante
  icon: '',              // ícone (emoji ou HTML)
  suffix: '',            // sufixo (ícone ou texto)
  maxLength: null,       // número máximo de caracteres
  pattern: null,         // regex para validação
  validation: null       // função de validação customizada
});

// Métodos
input.setValue('novo valor');
input.getValue();
input.setDisabled(true);
input.setRequired(true);
input.focus();
input.validate();

Card

const card = ui.createCard({
  variant: 'default',     // default, elevated, outlined, flat, gradient, rounded
  interactive: false,     // true/false
  loading: false,         // true/false
  media: null,           // objeto com configurações de mídia
  actions: []            // array de ações
});

// Métodos
card.setInteractive(true);
card.setLoading(true);
card.setVariant('elevated');
card.addAction({
  type: 'button',
  text: 'Ação',
  variant: 'primary',
  onClick: () => console.log('Ação clicada')
});

🛠️ Utilitários

Validação

// Validar dados
const isValidEmail = ui.validateEmail('[email protected]');
const isValidPhone = ui.validatePhone('+5511999999999');
const isValidURL = ui.validateURL('https://exemplo.com');

Formatação

// Formatar dados
const currency = ui.formatCurrency(1234.56, 'BRL', 'pt-BR');
const date = ui.formatDate(new Date(), 'pt-BR');
const number = ui.formatNumber(1234567.89, 'pt-BR');

Animações

// Animar elementos
ui.fadeIn(element, 300);
ui.fadeOut(element, 300);
ui.slideDown(element, 300);
ui.slideUp(element, 300);

Notificações

// Mostrar notificações
ui.showNotification('Operação realizada com sucesso!', 'success', 5000);
ui.showNotification('Ocorreu um erro!', 'error', 0); // 0 = não auto-remover

Modais

// Mostrar modal
ui.showModal(`
  <p>Conteúdo do modal</p>
  <button>Botão</button>
`, {
  title: 'Título do Modal',
  footer: `
    <button>Cancelar</button>
    <button>Confirmar</button>
  `
});

🎨 Customização

Variáveis CSS

:root {
  /* Cores primárias */
  --primary-500: #2196f3;
  --primary-600: #1e88e5;
  
  /* Cores secundárias */
  --secondary-500: #9c27b0;
  
  /* Tipografia */
  --font-family-primary: 'Roboto', sans-serif;
  --font-size-md: 1rem;
  
  /* Espaçamentos */
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  
  /* Bordas e sombras */
  --border-radius-md: 0.5rem;
  --shadow-md: 0 3px 6px rgba(0,0,0,0.16);
}

Estilos customizados

/* Sobrescrever estilos */
.librarindia-btn--primary {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  border: none;
}

.librarindia-card {
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

Responsividade

A biblioteca é totalmente responsiva e se adapta automaticamente a diferentes tamanhos de tela:

• Mobile First: Design otimizado para dispositivos móveis
• Grid Flexível: Layouts que se adaptam ao espaço disponível
• Breakpoints: Sistema de breakpoints consistente
• Touch Friendly: Otimizado para interações touch

♿ Acessibilidade

• Navegação por teclado: Suporte completo a Tab, Enter, Espaço
• ARIA Labels: Atributos de acessibilidade automáticos
• Focus Management: Gerenciamento inteligente de foco
• Screen Readers: Compatível com leitores de tela
• High Contrast: Suporte a temas de alto contraste

Configuração

// Configurar biblioteca
ui.configure({
  theme: 'dark',           // tema inicial
  transitions: true        // habilitar transições suaves
});

// Configurar tema
const themeManager = ui.getThemeManager();
themeManager.enableSmoothTransitions();
themeManager.setThemePreference('system'); // seguir preferência do sistema

Eventos

A biblioteca emite eventos customizados para integração:

// Eventos disponíveis
document.addEventListener('librarindia:init', (event) => {
  console.log('Biblioteca inicializada:', event.detail.library);
});

document.addEventListener('librarindia:theme:change', (event) => {
  console.log('Tema alterado:', event.detail.theme);
});

document.addEventListener('librarindia:button:click', (event) => {
  console.log('Botão clicado:', event.detail.button);
});

document.addEventListener('librarindia:input:change', (event) => {
  console.log('Input alterado:', event.detail.value);
});

document.addEventListener('librarindia:card:click', (event) => {
  console.log('Card clicado:', event.detail.card);
});

Testes

# Executar testes
npm test

# Testes com coverage
npm run test:coverage

# Testes em modo watch
npm run test:watch

Exemplos

Veja a pasta examples/ para exemplos completos de uso:

• Basic: Uso básico dos componentes
• Themes: Demonstração do sistema de temas
• Forms: Formulários complexos
• Dashboard: Interface de dashboard completa

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á licenciado sob a Licença MIT - veja o arquivo LICENSE para detalhes.

Suporte

• Documentação: docs.librarindia-ui.com
• Issues: GitHub Issues
• Discord: Comunidade Discord
• Email: [email protected]

🗺️ Roadmap

• [ ] Componente DataTable
• [ ] Componente DatePicker
• [ ] Componente Select com busca
• [ ] Componente TreeView
• [ ] Componente Carousel
• [ ] Componente Timeline
• [ ] Suporte a TypeScript
• [ ] Testes E2E
• [ ] Storybook
• [ ] Plugin para Vue.js
• [ ] Plugin para React

Librarindia UI - Construindo interfaces modernas e acessíveis 🚀