forlogic-core 2.1.4 → 2.2.0

package/docs/design-system/layout.md

@@ -11,39 +11,39 @@ Header principal da aplicação com título dinâmico, busca global integrada ao
 
 **Uso:**
 ```tsx
-import { AppLayout, usePageMetadata } from 'forlogic-core';
-
-// O AppHeader é renderizado automaticamente pelo AppLayout
-<AppLayout sidebarConfig={sidebarConfig}>
-  <Routes>...</Routes>
-</AppLayout>
-
-// Para configurar título, subtítulo e breadcrumbs
-function UsersPage() {
-  usePageMetadata({
-    title: 'Usuários',
-    subtitle: 'Gerenciamento de usuários do sistema'
-  });
-}
-
-// Com breadcrumbs
-function EditUserPage() {
-  usePageMetadata({
-    title: 'Editar Usuário',
-    subtitle: 'Atualize os dados cadastrais',
-    breadcrumbs: [
-      { label: 'Usuários', href: '/users' },
-      { label: 'João Silva' }
-    ]
-  });
-}
-
-// Subtitle com ReactNode
-function DetailPage() {
-  usePageMetadata({
-    title: 'Detalhes',
-    subtitle: <span>Veja a <Link to="/docs">documentação</Link></span>
-  });
+import { AppLayout, usePageMetadata } from 'forlogic-core';
+
+// O AppHeader é renderizado automaticamente pelo AppLayout
+<AppLayout sidebarConfig={sidebarConfig}>
+  <Routes>...</Routes>
+</AppLayout>
+
+// Para configurar título, subtítulo e breadcrumbs
+function UsersPage() {
+  usePageMetadata({
+    title: 'Usuários',
+    subtitle: 'Gerenciamento de usuários do sistema'
+  });
+}
+
+// Com breadcrumbs
+function EditUserPage() {
+  usePageMetadata({
+    title: 'Editar Usuário',
+    subtitle: 'Atualize os dados cadastrais',
+    breadcrumbs: [
+      { label: 'Usuários', href: '/users' },
+      { label: 'João Silva' }
+    ]
+  });
+}
+
+// Subtitle com ReactNode
+function DetailPage() {
+  usePageMetadata({
+    title: 'Detalhes',
+    subtitle: <span>Veja a <Link to="/docs">documentação</Link></span>
+  });
 }
 ```
 
@@ -56,21 +56,21 @@ function DetailPage() {
 
 **Exemplos:**
 ```tsx
-// Áreas do AppHeader
-// 1. Título: Título da página + Subtítulo + Badge do módulo
-// 2. Busca: Input de busca global (visível quando habilitado)
-// 3. Ações: Botões customizáveis via PageMetadataContext
-// 4. Perfil: UserInfo com dropdown de usuário
-
+// Áreas do AppHeader
+// 1. Título: Título da página + Subtítulo + Badge do módulo
+// 2. Busca: Input de busca global (visível quando habilitado)
+// 3. Ações: Botões customizáveis via PageMetadataContext
+// 4. Perfil: UserInfo com dropdown de usuário
+
 // Altura fixa: 56px (h-14 no Tailwind)
 ```
 ```tsx
-// UserInfo com variantes
+// UserInfo com variantes
 <UserInfo variant=
 ```
 ```tsx
-// Configurar campos pesquisáveis no service
-const userService = createSimpleService({
+// Configurar campos pesquisáveis no service
+const userService = createSimpleService({
   tableName:
 ```
 
@@ -94,7 +94,7 @@ const userService = createSimpleService({
 - ❌ Não use mais de 3 botões de ação
 - ❌ Não esconda o UserInfo em páginas autenticadas
 
-> Fonte: `src\design-system\docs\components\layout\AppHeaderDoc.tsx`
+> Fonte: `src/design-system/docs/components/layout/AppHeaderDoc.tsx`
 
 ---
 
@@ -104,63 +104,63 @@ Sidebar de navegação principal da aplicação com suporte a pin/unpin, permiss
 
 **Uso:**
 ```tsx
-import { AppLayout } from 'forlogic-core';
-import type { SidebarConfig } from 'forlogic-core';
-import { Home, Users, Settings, Shield, Plus, FileText, Folder } from 'lucide-react';
-
-const sidebarConfig: SidebarConfig = {
-  appName: 'Minha Aplicação',
-
-  // Ações do módulo (opcional)
-  moduleActions: {
-    triggerLabel: 'Criar',
-    triggerIcon: Plus,
-    actions: [
-      { id: 'new-doc', label: 'Novo Documento', icon: FileText, onClick: () => {} },
-      { id: 'new-folder', label: 'Nova Pasta', icon: Folder, onClick: () => {} },
-    ],
-  },
-
-  // Navegação (com suporte a hierarquia e separadores)
-  navigation: [
-    { label: 'Início', path: '/', icon: Home },
-    { label: 'Usuários', path: '/users', icon: Users },
-    { label: '', path: '', type: 'separator' },  // Linha horizontal separadora
-    {
-      label: 'Configurações',
-      path: '/settings',
-      icon: Settings,
-      children: [
-        { label: 'Perfil', path: '/settings/profile', icon: Users },
-        { label: 'Segurança', path: '/settings/security', icon: Shield },
-      ],
-    },
-  ],
-};
-
-// Uso via AppLayout (recomendado)
-<AppLayout sidebarConfig={sidebarConfig}>
-  <Routes>...</Routes>
-</AppLayout>
-
-// Uso direto (casos avançados)
-<AppSidebar
-  config={sidebarConfig}
-  resizable={true}
-  minWidth={224}
-  maxWidth={384}
+import { AppLayout } from 'forlogic-core';
+import type { SidebarConfig } from 'forlogic-core';
+import { Home, Users, Settings, Shield, Plus, FileText, Folder } from 'lucide-react';
+
+const sidebarConfig: SidebarConfig = {
+  appName: 'Minha Aplicação',
+
+  // Ações do módulo (opcional)
+  moduleActions: {
+    triggerLabel: 'Criar',
+    triggerIcon: Plus,
+    actions: [
+      { id: 'new-doc', label: 'Novo Documento', icon: FileText, onClick: () => {} },
+      { id: 'new-folder', label: 'Nova Pasta', icon: Folder, onClick: () => {} },
+    ],
+  },
+
+  // Navegação (com suporte a hierarquia e separadores)
+  navigation: [
+    { label: 'Início', path: '/', icon: Home },
+    { label: 'Usuários', path: '/users', icon: Users },
+    { label: '', path: '', type: 'separator' },  // Linha horizontal separadora
+    {
+      label: 'Configurações',
+      path: '/settings',
+      icon: Settings,
+      children: [
+        { label: 'Perfil', path: '/settings/profile', icon: Users },
+        { label: 'Segurança', path: '/settings/security', icon: Shield },
+      ],
+    },
+  ],
+};
+
+// Uso via AppLayout (recomendado)
+<AppLayout sidebarConfig={sidebarConfig}>
+  <Routes>...</Routes>
+</AppLayout>
+
+// Uso direto (casos avançados)
+<AppSidebar
+  config={sidebarConfig}
+  resizable={true}
+  minWidth={224}
+  maxWidth={384}
 />
 ```
 
 **Exemplos:**
 ```tsx
-// Estrutura do AppSidebar
+// Estrutura do AppSidebar
 <Sidebar collapsible=
 ```
 ```tsx
-// Matching de rota ativa (hierárquico)
-const isActive = (path: string) =>
-  location.pathname === path ||
+// Matching de rota ativa (hierárquico)
+const isActive = (path: string) =>
+  location.pathname === path ||
   location.pathname.startsWith(path +
 ```
 
@@ -187,7 +187,7 @@ const isActive = (path: string) =>
 - ❌ Não misture ícones de bibliotecas diferentes
 - ❌ Não use labels com mais de 20 caracteres
 
-> Fonte: `src\design-system\docs\components\layout\AppSidebarDoc.tsx`
+> Fonte: `src/design-system/docs/components/layout/AppSidebarDoc.tsx`
 
 ---
 
@@ -197,28 +197,28 @@ Container principal de página com breadcrumb, background neutro e suporte a mú
 
 **Uso:**
 ```tsx
-import { BodyContent, ContentContainer } from 'forlogic-core';
-
-<BodyContent
-  breadcrumbs={[
-    { label: 'Módulo', href: '/modulo' },
-    { label: 'Seção', href: '/modulo/secao' },
-    { label: 'Página Atual' }, // Sem href = página atual
-  ]}
->
-  <ContentContainer 
-    title="Título do Container" 
-    subtitle="Subtítulo com informações adicionais"
-  >
-    <p>Conteúdo principal aqui...</p>
-  </ContentContainer>
+import { BodyContent, ContentContainer } from 'forlogic-core';
+
+<BodyContent
+  breadcrumbs={[
+    { label: 'Módulo', href: '/modulo' },
+    { label: 'Seção', href: '/modulo/secao' },
+    { label: 'Página Atual' }, // Sem href = página atual
+  ]}
+>
+  <ContentContainer 
+    title="Título do Container" 
+    subtitle="Subtítulo com informações adicionais"
+  >
+    <p>Conteúdo principal aqui...</p>
+  </ContentContainer>
 </BodyContent>
 ```
 
 **Exemplos:**
 ```tsx
-<BodyContent
-  breadcrumbs={[
+<BodyContent
+  breadcrumbs={[
     { label:
 ```
 
@@ -226,9 +226,9 @@ import { BodyContent, ContentContainer } from 'forlogic-core';
 - O breadcrumb usa a tag nav com aria-label=
 -  para identificação por leitores de tela
 - A página atual no breadcrumb é marcada com aria-current=
-- ,
+- ,
         
-- ,
+- ,
         
 - true
 
@@ -240,15 +240,63 @@ import { BodyContent, ContentContainer } from 'forlogic-core';
 - Para integração com React Router, use asChild=true e passe o Link como children
 - O espaçamento entre containers segue o padrão do Design System (space-y-6)
 
-> Fonte: `src\design-system\docs\components\layout\BodyContentDoc.tsx`
+> Fonte: `src/design-system/docs/components/layout/BodyContentDoc.tsx`
 
 ---
 
-### CrudGrid
+### Grid & Stack
 
-Componente para exibir dados em formato de grade (cards) com todas as funcionalidades CRUD. Alternativa visual ao CrudTable para listagens com layout mais visual.
+Sistema de layout com Grid responsivo e Stack flexível para organização de conteúdo.
 
-> Fonte: `src\design-system\docs\components\crud\CrudGridDoc.tsx`
+**Uso:**
+```tsx
+import { Grid, Stack, Card } from "forlogic-core"
+
+// Grid com 3 colunas fixas
+<Grid cols="3" gap="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Grid>
+
+// Stack vertical
+<Stack direction="column" gap="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Stack>
+```
+
+**Props:**
+| Prop | Tipo | Padrão | Descrição |
+|------|------|--------|-----------|
+| `Stack.wrap` | `boolean` | false | Permite quebra de linha. |
+
+**Exemplos:**
+```tsx
+<Stack direction=
+```
+```tsx
+<Stack direction=
+```
+```tsx
+<Stack direction=
+```
+```tsx
+<Stack direction=
+```
+
+**Acessibilidade:**
+- Layout responsivo automático
+- Suporte a grid fixo e adaptativo
+- Espaçamentos padronizados
+- Props intuitivas e type-safe
+
+**Notas:**
+- **Grid** é ideal para layouts de cards, galerias e grids de conteúdo
+- **Stack** é ideal para listas, formulários e layouts flexíveis
+- Ambos suportam espaçamentos padronizados (xs, sm, md, lg, xl)
+
+> Fonte: `src/design-system/docs/components/GridDoc.tsx`
 
 ---
 
@@ -258,24 +306,24 @@ Painéis redimensionáveis para criar layouts flexíveis e adaptáveis. Baseado
 
 **Uso:**
 ```tsx
-import { 
-  ResizablePanelGroup, 
-  ResizablePanel, 
-  ResizableHandle 
-} from 'forlogic-core/modular';
-
-function ResizableLayout() {
-  return (
-    <ResizablePanelGroup direction="horizontal" className="min-h-[200px]">
-      <ResizablePanel defaultSize={25}>
-        <div className="p-4">Painel Esquerdo</div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
-        <div className="p-4">Painel Direito</div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  );
+import { 
+  ResizablePanelGroup, 
+  ResizablePanel, 
+  ResizableHandle 
+} from 'forlogic-core/modular';
+
+function ResizableLayout() {
+  return (
+    <ResizablePanelGroup direction="horizontal" className="min-h-[200px]">
+      <ResizablePanel defaultSize={25}>
+        <div className="p-4">Painel Esquerdo</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={75}>
+        <div className="p-4">Painel Direito</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
 }
 ```
 
@@ -292,7 +340,7 @@ function ResizableLayout() {
 - A soma de defaultSize dos painéis deve ser 100.
 - Combine com hooks de resize (useColumnResize, useSidebarResize) para casos específicos.
 
-> Fonte: `src\design-system\docs\components\ResizableDoc.tsx`
+> Fonte: `src/design-system/docs/components/ResizableDoc.tsx`
 
 ---
 
@@ -302,24 +350,24 @@ function ResizableLayout() {
 
 **Uso:**
 ```tsx
-import { ScrollArea, ScrollBar } from "forlogic-core"
-
-<ScrollArea className="h-72 w-48 rounded-md border">
-  <div className="p-4">
-    {items.map((item) => (
-      <div key={item.id}>{item.content}</div>
-    ))}
-  </div>
-</ScrollArea>
-
-// Scroll horizontal:
-<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
-  <div className="flex w-max space-x-4 p-4">
-    {items.map((item) => (
-      <div key={item.id} className="w-[150px] shrink-0">{item.content}</div>
-    ))}
-  </div>
-  <ScrollBar orientation="horizontal" />
+import { ScrollArea, ScrollBar } from "forlogic-core"
+
+<ScrollArea className="h-72 w-48 rounded-md border">
+  <div className="p-4">
+    {items.map((item) => (
+      <div key={item.id}>{item.content}</div>
+    ))}
+  </div>
+</ScrollArea>
+
+// Scroll horizontal:
+<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+  <div className="flex w-max space-x-4 p-4">
+    {items.map((item) => (
+      <div key={item.id} className="w-[150px] shrink-0">{item.content}</div>
+    ))}
+  </div>
+  <ScrollBar orientation="horizontal" />
 </ScrollArea>
 ```
 
@@ -346,6 +394,6 @@ import { ScrollArea, ScrollBar } from "forlogic-core"
 - Usado internamente pela DesignSystemSidebar, AppSidebar, e outros componentes com overflow.
 - Mantém bordas arredondadas do container pai (rounded-[inherit]).
 
-> Fonte: `src\design-system\docs\components\ScrollAreaDoc.tsx`
+> Fonte: `src/design-system/docs/components/ScrollAreaDoc.tsx`
 
 ---