Skip to main content

Introdução

Bem-vindo à documentação do Luminus UI! Este é um guia completo para ajudar você a entender e utilizar nossa biblioteca de componentes.

O que é o Luminus UI?​

Luminus UI é uma biblioteca de componentes React moderna e flexível, projetada especificamente para criar interfaces de usuário mobile. Nossa biblioteca oferece uma ampla gama de componentes pré-construídos que podem ser facilmente personalizados para atender às suas necessidades.

Stack Tecnológico​

O Luminus 2 foi desenvolvido utilizando:

  • React como framework base
  • Tailwind CSS 3 como parte fundamental do sistema de estilização
  • DaisyUI 4 como base de componentes
  • TypeScript para tipagem estática

Evolução do Luminus​

O Luminus 2 representa uma evolução significativa em relação à sua versão anterior. Foi projetado para oferecer uma experiência de desenvolvimento mais intuitiva e próxima do desenvolvimento web tradicional, mantendo seu foco principal em interfaces mobile. Esta nova versão traz melhorias significativas em termos de usabilidade e familiaridade para desenvolvedores web.

Características Principais​

  • Componentes React modernos e reutilizáveis
  • Design system consistente e acessível
  • Suporte a temas personalizados
  • Documentação detalhada e exemplos práticos
  • Tipagem TypeScript completa
  • Foco em desenvolvimento mobile-first
  • Sistema de estilização baseado em Tailwind CSS
  • Componentes base construídos sobre DaisyUI

Luminus UI

Conceitos Básicos​

Tailwind CSS​

O Tailwind CSS é um framework CSS utilitário que permite criar designs personalizados diretamente no seu HTML/JSX. Alguns conceitos fundamentais incluem:

  • Classes Utilitárias: Classes predefinidas para estilização rápida (ex: flex, p-4, text-center)
  • Responsividade: Prefixos como sm:, md:, lg: para diferentes breakpoints
  • Modificadores: Estados como hover:, focus:, active: para interatividade

DaisyUI​

DaisyUI é uma biblioteca de componentes que estende o Tailwind CSS com componentes pré-estilizados. Conceitos importantes:

  • Componentes Base: Elementos como btn, card, modal com estilos predefinidos
  • Variantes: Modificadores para personalizar a aparência (ex: btn-primary, btn-secondary)
  • Acessibilidade: Componentes construídos com foco em acessibilidade

Flexibilidade de Componentes​

O Luminus 2 oferece duas abordagens principais para construção de interfaces:

  1. Componentes Encapsulados: Alguns componentes do DaisyUI são encapsulados em componentes React específicos como Button, Badge, List, etc. Estes componentes oferecem uma API mais amigável e tipada, mantendo a consistência do design system.

  2. Componentes Personalizados: Para casos mais específicos, você pode utilizar componentes básicos como View e aplicar diretamente as classes do Tailwind CSS e DaisyUI. Isso oferece total flexibilidade para criar componentes customizados mantendo a consistência visual do sistema.

Esta dualidade permite que você escolha a abordagem mais adequada para cada caso, seja usando componentes prontos para agilidade ou criando componentes personalizados para necessidades específicas.

Componentes Específicos​

Além dos componentes baseados no DaisyUI, o Luminus 2 oferece componentes específicos para necessidades mobile:

  • View: Componente base para construção de layouts, similar ao div do web, mas otimizado para mobile
  • Lottie: Componente para renderização de animações Lottie, facilitando a implementação de animações complexas

Estes componentes são projetados especificamente para resolver desafios comuns no desenvolvimento mobile, oferecendo uma experiência mais fluida e consistente.

Estes conceitos são fundamentais para entender e trabalhar com o Luminus 2, pois formam a base do nosso sistema de design.