forlogic-core 2.2.6 → 2.2.8

package/docs/design-system/crud.md

@@ -41,7 +41,7 @@ const NotesPage = createCrudPage({
 - Nível Médio: CrudTable/CrudGrid — componentes compostos para layouts customizados
 - Nível Baixo: Primitives (DataTable, DataPagination, DataFilterBar) — controle total
 
-> Fonte: `src/design-system/docs/components/crud/CrudOverviewDoc.tsx`
+> Fonte: `src\design-system\docs\components\crud\CrudOverviewDoc.tsx`
 
 ---
 
@@ -49,7 +49,7 @@ const NotesPage = createCrudPage({
 
 Factory de alto nível que gera uma página CRUD completa com ~15 linhas de configuração declarativa.
 
-> Fonte: `src/design-system/docs/components/crud/CreateCrudPageDoc.tsx`
+> Fonte: `src\design-system\docs\components\crud\CreateCrudPageDoc.tsx`
 
 ---
 
@@ -57,153 +57,93 @@ Factory de alto nível que gera uma página CRUD completa com ~15 linhas de conf
 
 Barra de ações unificada usada por todos os componentes CRUD (CrudTable, CrudGrid, createCrudPage) para garantir UX consistente.
 
-> Fonte: `src/design-system/docs/components/crud/CrudActionBarDoc.tsx`
+> Fonte: `src\design-system\docs\components\crud\CrudActionBarDoc.tsx`
 
 ---
 
-### Table
+### CrudTable
 
-Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.
+Componente de tabela CRUD completo com ordenação, seleção, resize de colunas, ações em massa e paginação integrada com useCrud.
 
-**Uso:**
-```tsx
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableResizeHandle,
-  TruncatedCell,
-} from "forlogic-core"
-
-<Table>
-  <TableCaption>Lista de usuários</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Nome</TableHead>
-      <TableHead>Email</TableHead>
-      <TableHead>Status</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>João Silva</TableCell>
-      <TableCell>joao@example.com</TableCell>
-      <TableCell>Ativo</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
-```
+> Fonte: `src\design-system\docs\components\crud\CrudTableDoc.tsx`
 
-**Props:**
-| Prop | Tipo | Padrão | Descrição |
-|------|------|--------|-----------|
-| `className` | `string` | - | Classes CSS adicionais para a tabela. |
-| `TableResizeHandle.onMouseDown` | `(e: MouseEvent) => void` | - | Handler para iniciar o redimensionamento. |
-| `TableResizeHandle.isDragging` | `boolean` | false | Se o handle está sendo arrastado (altera visual). |
-| `TruncatedCell.children` | `ReactNode` | - | Conteúdo a ser truncado. |
-| `TruncatedCell.className` | `string` | - | Classes CSS adicionais. |
+---
 
-**Acessibilidade:**
-- Usa elementos HTML semânticos de tabela
-- Suporta navegação por teclado
-- TableCaption fornece contexto para leitores de tela
-- TableHeader define cabeçalhos de coluna apropriados
-- TruncatedCell mostra tooltip acessível com conteúdo completo
-- TableResizeHandle suporta interação via teclado
-- Funciona com leitores de tela
+### CrudGrid
 
-**Notas:**
-- TableResizeHandle deve ser posicionado dentro de um TableHead com position: relative.
-- TruncatedCell detecta automaticamente se o texto está truncado e exibe tooltip apenas quando necessário.
-- Use larguras fixas (w-[Xpx]) nos TableHead para melhor controle do layout.
-- TruncatedCell usa CSS text-overflow: ellipsis internamente.
+Componente para exibir dados em formato de grade (cards) com todas as funcionalidades CRUD. Alternativa visual ao CrudTable para listagens com layout mais visual.
 
-> Fonte: `src/design-system/docs/components/TableDoc.tsx`
+> Fonte: `src\design-system\docs\components\crud\CrudGridDoc.tsx`
 
 ---
 
-### CrudGrid
+### CRUD Primitives
 
-Componente para exibir dados em formato de grade (cards) com todas as funcionalidades CRUD. Alternativa visual ao CrudTable para listagens com layout mais visual.
+Componentes de baixo nível para interfaces CRUD totalmente customizadas com controle total sobre layout e comportamento. Aliases disponíveis: DataTable, DataFilterBar, DataPagination.
 
-> Fonte: `src/design-system/docs/components/crud/CrudGridDoc.tsx`
+> Fonte: `src\design-system\docs\components\crud\CrudPrimitivesDoc.tsx`
 
 ---
 
-### Table
+### Pagination
 
-Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.
+Barra de paginação completa com seletor de itens por página e controles de navegação.
 
 **Uso:**
 ```tsx
-import {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  TableResizeHandle,
-  TruncatedCell,
-} from "forlogic-core"
-
-<Table>
-  <TableCaption>Lista de usuários</TableCaption>
-  <TableHeader>
-    <TableRow>
-      <TableHead>Nome</TableHead>
-      <TableHead>Email</TableHead>
-      <TableHead>Status</TableHead>
-    </TableRow>
-  </TableHeader>
-  <TableBody>
-    <TableRow>
-      <TableCell>João Silva</TableCell>
-      <TableCell>joao@example.com</TableCell>
-      <TableCell>Ativo</TableCell>
-    </TableRow>
-  </TableBody>
-</Table>
+import { Pagination } from "forlogic-core/crud"
+
+<Pagination
+  currentPage={1}
+  totalPages={10}
+  totalItems={100}
+  itemsPerPage={10}
+  onPageChange={(page) => setPage(page)}
+  onItemsPerPageChange={(limit) => setLimit(limit)}
+  variant="full"
+/>
 ```
 
 **Props:**
 | Prop | Tipo | Padrão | Descrição |
 |------|------|--------|-----------|
-| `className` | `string` | - | Classes CSS adicionais para a tabela. |
-| `TableResizeHandle.onMouseDown` | `(e: MouseEvent) => void` | - | Handler para iniciar o redimensionamento. |
-| `TableResizeHandle.isDragging` | `boolean` | false | Se o handle está sendo arrastado (altera visual). |
-| `TruncatedCell.children` | `ReactNode` | - | Conteúdo a ser truncado. |
-| `TruncatedCell.className` | `string` | - | Classes CSS adicionais. |
+| `currentPage` | `number` | - | Página atual (1-indexed) |
+| `totalPages` | `number` | - | Número total de páginas |
+| `totalItems` | `number` | - | Número total de itens |
+| `itemsPerPage` | `number` | - | Quantidade de itens por página |
+| `onPageChange` | `(page: number) => void` | - | Callback ao mudar de página |
+| `onItemsPerPageChange` | `(limit: number) => void` | - | Callback ao mudar itens por página |
 
-**Acessibilidade:**
-- Usa elementos HTML semânticos de tabela
-- Suporta navegação por teclado
-- TableCaption fornece contexto para leitores de tela
-- TableHeader define cabeçalhos de coluna apropriados
-- TruncatedCell mostra tooltip acessível com conteúdo completo
-- TableResizeHandle suporta interação via teclado
-- Funciona com leitores de tela
-
-**Notas:**
-- TableResizeHandle deve ser posicionado dentro de um TableHead com position: relative.
-- TruncatedCell detecta automaticamente se o texto está truncado e exibe tooltip apenas quando necessário.
-- Use larguras fixas (w-[Xpx]) nos TableHead para melhor controle do layout.
-- TruncatedCell usa CSS text-overflow: ellipsis internamente.
-
-> Fonte: `src/design-system/docs/components/TableDoc.tsx`
-
----
-
-### Pagination
+**Exemplos:**
+```tsx
+<Pagination
+  currentPage={1}
+  totalPages={2}
+  totalItems={15}
+  itemsPerPage={10}
+  onPageChange={setPage}
+  onItemsPerPageChange={setItemsPerPage}
+  variant=
+```
+```tsx
+<Pagination
+  currentPage={3}
+  totalPages={25}
+  totalItems={250}
+  itemsPerPage={10}
+  onPageChange={setPage}
+  onItemsPerPageChange={setItemsPerPage}
+  variant=
+```
 
-Componente de paginação padronizado com layout de 3 colunas, seletor de itens por página e navegação completa.
+**Acessibilidade:**
+- Navegável por teclado
+- Labels ARIA apropriados
+- Indicação visual da página atual
+- Botões desabilitados quando não aplicável
+- Amigável para leitores de tela
 
-> Fonte: `src/design-system/docs/components/crud/PaginationDoc.tsx`
+> Fonte: `src\design-system\docs\components\PaginationDoc.tsx`
 
 ---
 
@@ -213,55 +153,55 @@ Construindo formulários com React Hook Form e Zod.
 
 **Uso:**
 ```tsx
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import * as z from "zod"
-import {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "forlogic-core"
-
-const formSchema = z.object({
-  username: z.string().min(2).max(50),
-})
-
-function MyForm() {
-  const form = useForm<z.infer<typeof formSchema>>({
-    resolver: zodResolver(formSchema),
-  })
-
-  function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values)
-  }
-
-  return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <FormField
-          control={form.control}
-          name="username"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>Username</FormLabel>
-              <FormControl>
-                <Input placeholder="shadcn" {...field} />
-              </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Submit</Button>
-      </form>
-    </Form>
-  )
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "forlogic-core"
+
+const formSchema = z.object({
+  username: z.string().min(2).max(50),
+})
+
+function MyForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
 }
 ```
 
@@ -280,13 +220,13 @@ function MyForm() {
 
 **Exemplos:**
 ```tsx
-<FormField
-  control={form.control}
+<FormField
+  control={form.control}
   name=
 ```
 ```tsx
-const formSchema = z.object({
-  username: z.string().min(3, {
+const formSchema = z.object({
+  username: z.string().min(3, {
     message:
 ```
 
@@ -298,6 +238,6 @@ const formSchema = z.object({
 - Usa React Hook Form para gerenciamento de estado de formulário
 - Integra com Zod para validação de schema
 
-> Fonte: `src/design-system/docs/components/FormDoc.tsx`
+> Fonte: `src\design-system\docs\components\FormDoc.tsx`
 
 ---