@xjur-ui/react

Biblioteca de componentes React para o XJur Design System, construída com foco em acessibilidade usando primitivos do Radix UI e estilizada com TailwindCSS.

Instalação

npm install @xjur-ui/react

Dependências Obrigatórias (Peer Dependencies)

Certifique-se de ter as dependências necessárias instaladas:

npm install react react-dom

Plugins do Tailwind Opcionais (recomendado)

Para suporte aprimorado a scrollbar e animações:

npm install tailwind-scrollbar tailwind-scrollbar-hide tw-animate-css

Uso

Configuração Básica

Importe os estilos base na sua aplicação:

import '@xjur-ui/react/styles'
// ou use apenas os estilos essenciais (bundle menor)
import '@xjur-ui/react/essential'

Uso dos Componentes

Os componentes podem ser importados individualmente para melhor tree-shaking:

import { Button } from '@xjur-ui/react/button'
import { Input } from '@xjur-ui/react/input'
import { Calendar } from '@xjur-ui/react/calendar'

function App() {
  return (
    <div>
      <Button variant="primary">Clique aqui</Button>
      <Input placeholder="Digite aqui..." />
      <Calendar />
    </div>
  )
}

Componentes Disponíveis

| Componente | Import | Tamanho | Descrição | |------------|--------|---------|-----------| | Avatar | @xjur-ui/react/avatar | ~2KB | Fotos de perfil de usuário | | Avatar Group | @xjur-ui/react/avatar-group | ~1.5KB | Exibição de múltiplos avatars | | Badge | @xjur-ui/react/badge | ~1.5KB | Indicadores de status | | Button | @xjur-ui/react/button | ~3KB | Botões interativos | | Calendar | @xjur-ui/react/calendar | ~18KB | Seleção de datas | | Checkbox | @xjur-ui/react/checkbox | ~2.5KB | Caixas de seleção | | Chip | @xjur-ui/react/chip | ~2KB | Tags removíveis | | Collapsible | @xjur-ui/react/collapsible | ~3KB | Conteúdo expansível | | Date Picker | @xjur-ui/react/date-picker | ~20KB | Campo de data com calendário | | Divider | @xjur-ui/react/divider | ~1KB | Separadores de conteúdo | | Dropdown Menu | @xjur-ui/react/dropdown-menu | ~8KB | Menus de contexto | | Icon | @xjur-ui/react/icon | ~1.5KB | Ícones SVG | | Input | @xjur-ui/react/input | ~8KB | Campos de formulário | | List | @xjur-ui/react/list | ~3KB | Listas estruturadas | | Logo | @xjur-ui/react/logo | ~1KB | Logos da XJur (carregamento lazy) | | OTP Input | @xjur-ui/react/otp-input | ~4KB | Campo para código de verificação | | Radio | @xjur-ui/react/radio | ~3KB | Grupos de botões radio | | Rich Editor | @xjur-ui/react/rich-editor | ~45KB | Editor de texto WYSIWYG | | Search Input | @xjur-ui/react/search-input | ~6KB | Busca com sugestões | | Select | @xjur-ui/react/select | ~12KB | Seleções dropdown | | Sheet | @xjur-ui/react/sheet | ~6KB | Painéis laterais/modais | | Skeleton | @xjur-ui/react/skeleton | ~1.5KB | Placeholders de carregamento | | Status | @xjur-ui/react/status | ~2KB | Indicadores de status | | Switch | @xjur-ui/react/switch | ~2.5KB | Interruptores toggle | | Table | @xjur-ui/react/table | ~8KB | Tabelas de dados | | Tabs | @xjur-ui/react/tabs | ~4KB | Navegação por abas | | Tag | @xjur-ui/react/tag | ~2.5KB | Etiquetas e tags | | Tooltip | @xjur-ui/react/tooltip | ~4KB | Tooltips contextuais | | Typography | @xjur-ui/react/typography | ~2KB | Componentes de texto |

Hooks

Hooks utilitários estão disponíveis separadamente:

import { useTheme } from '@xjur-ui/react/hooks'

Otimização de Bundle

• Imports individuais: Cada componente é exportado separadamente para tree-shaking otimizado
• Carregamento lazy: Componentes pesados como Logo usam React.lazy automaticamente
• Bundle mínimo: Bundle CSS essencial disponível para menor footprint
• Dependências externas: React, React-DOM e Radix UI são externalizados

Suporte ao TypeScript

Suporte completo ao TypeScript com definições de tipos exportadas. Componentes incluem tipagem adequada para todas as props e variantes.

import type { ButtonProps } from '@xjur-ui/react/button'

const CustomButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />
}

Desenvolvimento

# Instalar dependências
npm install

# Iniciar servidor de desenvolvimento
npm run dev

# Build do pacote
npm run build

# Verificar tamanhos de bundle
npm run test:size

Performance

Este pacote foi otimizado para performance com:

• Bundle size total reduzido em 88% (de 436KB para 52.3KB)
• Todos os 29 componentes dentro dos limites de tamanho
• Lazy loading para componentes pesados
• Tree-shaking eficiente para importações individuais

Licença

Licenciado sob a Licença MIT.