@acsrocha/ui 1.0.0

package/README.md

@@ -0,0 +1,132 @@
+# @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
+
+```bash
+npm install @csrocha/ui
+```
+
+### Dependências peer obrigatórias
+
+```bash
+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:
+
+```tsx
+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`:
+
+```js
+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:
+
+```js
+presets: [require('@csrocha/ui/tailwind.preset')],
+```
+
+### 3. ThemeProvider (opcional — para customizar o tema)
+
+```tsx
+import { ThemeProvider } from '@csrocha/ui'
+
+<ThemeProvider theme={{ primary: '217 91% 60%' }}>
+  <App />
+</ThemeProvider>
+```
+
+---
+
+## Uso
+
+```tsx
+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:
+
+```css
+/* 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
+
+```bash
+npm run build:all
+npm publish --access public
+```