@csrocha/ui

Biblioteca de componentes React reutilizáveis por Carlos Rocha.

Construída sobre Tailwind CSS + shadcn/ui primitivos, com componentes de alto nível para sistemas de gestão.

Instalação

npm install @csrocha/ui

Dependências peer obrigatórias

npm install react react-dom framer-motion @tanstack/react-query

Configuração

1. Importar o CSS do tema

No main.tsx ou App.tsx do projeto consumidor:

import '@csrocha/ui/theme.css'

2. Configurar o Tailwind (obrigatório)

No tailwind.config.js do projeto consumidor, adicionar o path do pacote no content:

content: [
  './src/**/*.{js,ts,jsx,tsx}',
  './node_modules/@csrocha/ui/dist/**/*.js', // ← adicionar esta linha
],

E opcionalmente usar o preset para herdar as cores e tokens:

presets: [require('@csrocha/ui/tailwind.preset')],

3. ThemeProvider (opcional — para customizar o tema)

import { ThemeProvider } from '@csrocha/ui'

<ThemeProvider theme={{ primary: '217 91% 60%' }}>
  <App />
</ThemeProvider>

Uso

import { PageLayout, PageHeader, StatCard, DataTable, CardView, SmartFilterPanel } from '@csrocha/ui'
import { Users } from 'lucide-react'

function MinhaPage() {
  return (
    <PageLayout
      header={
        <PageHeader
          title="Usuários"
          icon={Users}
          onRefresh={() => refetch()}
        />
      }
      stats={[
        { label: 'Total', value: 120, accentColor: 'blue' },
        { label: 'Ativos', value: 98, accentColor: 'green' },
      ]}
      viewMode="table"
      tableContent={<DataTable columns={columns} data={data} total={120} />}
    />
  )
}

Componentes

| Componente | Descrição | |---|---| | PageLayout | Container padrão de páginas com header + stats + conteúdo | | PageHeader | Cabeçalho com título, ações, tabs e seletor de view mode | | StatCard | Card de métrica com suporte a accent colors e dark mode | | DataTable | Tabela completa com paginação, filtros, seleção e ordenação | | CardView | Grid de cards com react-query integrado, filtros e drawer | | SmartFilterPanel | Painel de filtros com badges, presets, histórico e URL sync | | ConfirmDialog | Dialog de confirmação com tipos (delete, edit, create, danger) | | Toast | Notificação flutuante com progress bar | | ThemeProvider | Injeta variáveis CSS de tema no :root |

Primitivos UI

Button · Badge · Card · Input · Table · Checkbox · Dialog

Tema

O pacote usa variáveis CSS HSL. Você pode sobrescrever qualquer token:

/* No CSS do seu projeto */
@import '@csrocha/ui/theme.css';

:root {
  --primary: 217 91% 60%; /* azul em vez de verde */
  --radius: 0.5rem;
}

Publicação

npm run build:all
npm publish --access public