forlogic-core 2.1.4 → 2.2.0

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,93 +57,153 @@ 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`
 
 ---
 
-### CrudTable
+### Table
 
-Componente de tabela CRUD completo com ordenação, seleção, resize de colunas, ações em massa e paginação integrada com useCrud.
+Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.
 
-> Fonte: `src\design-system\docs\components\crud\CrudTableDoc.tsx`
+**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>
+```
 
----
+**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. |
 
-### CrudGrid
+**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
 
-Componente para exibir dados em formato de grade (cards) com todas as funcionalidades CRUD. Alternativa visual ao CrudTable para listagens com layout mais visual.
+**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\crud\CrudGridDoc.tsx`
+> Fonte: `src/design-system/docs/components/TableDoc.tsx`
 
 ---
 
-### CRUD Primitives
+### CrudGrid
 
-Componentes de baixo nível para interfaces CRUD totalmente customizadas com controle total sobre layout e comportamento. Aliases disponíveis: DataTable, DataFilterBar, DataPagination.
+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\crud\CrudPrimitivesDoc.tsx`
+> Fonte: `src/design-system/docs/components/crud/CrudGridDoc.tsx`
 
 ---
 
-### Pagination
+### Table
 
-Barra de paginação completa com seletor de itens por página e controles de navegação.
+Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.
 
 **Uso:**
 ```tsx
-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"
-/>
+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>
 ```
 
 **Props:**
 | Prop | Tipo | Padrão | Descrição |
 |------|------|--------|-----------|
-| `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 |
-
-**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=
-```
+| `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:**
-- 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
+- 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
+
+Componente de paginação padronizado com layout de 3 colunas, seletor de itens por página e navegação completa.
 
-> Fonte: `src\design-system\docs\components\PaginationDoc.tsx`
+> Fonte: `src/design-system/docs/components/crud/PaginationDoc.tsx`
 
 ---
 
@@ -153,55 +213,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>
+  )
 }
 ```
 
@@ -220,13 +280,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:
 ```
 
@@ -238,6 +298,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`
 
 ---