forlogic-core 2.1.4 → 2.2.0

package/docs/design-system/data-display.md

@@ -11,11 +11,11 @@ Um elemento de imagem com fallback para representar o usuário.
 
 **Uso:**
 ```tsx
-import { Avatar, AvatarImage, AvatarFallback } from "forlogic-core"
-
-<Avatar>
-  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-  <AvatarFallback>CN</AvatarFallback>
+import { Avatar, AvatarImage, AvatarFallback } from "forlogic-core"
+
+<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+  <AvatarFallback>CN</AvatarFallback>
 </Avatar>
 ```
 
@@ -27,12 +27,12 @@ import { Avatar, AvatarImage, AvatarFallback } from "forlogic-core"
 
 **Exemplos:**
 ```tsx
-<Avatar>
+<Avatar>
   <AvatarImage src=
 ```
 ```tsx
-<Avatar>
-  <AvatarFallback>JD</AvatarFallback>
+<Avatar>
+  <AvatarFallback>JD</AvatarFallback>
 </Avatar>
 ```
 
@@ -41,7 +41,7 @@ import { Avatar, AvatarImage, AvatarFallback } from "forlogic-core"
 - Fallback garante que o conteúdo seja sempre exibido
 - Estrutura HTML semântica
 
-> Fonte: `src\design-system\docs\components\AvatarDoc.tsx`
+> Fonte: `src/design-system/docs/components/AvatarDoc.tsx`
 
 ---
 
@@ -51,25 +51,30 @@ Exibe um badge ou um componente que se parece com um badge.
 
 **Uso:**
 ```tsx
-import { Badge } from "forlogic-core"
-
-<Badge>Badge</Badge>
-<Badge variant="secondary">Secondary</Badge>
-<Badge variant="info">Info</Badge>
-<Badge variant="success">Success</Badge>
-<Badge variant="warning">Warning</Badge>
-<Badge variant="danger">Danger</Badge>
-<Badge variant="outline">Outline</Badge>
-<Badge variant="sharp">Sharp</Badge>
+import { Badge, StatusBadge, createStatusConfig } from "forlogic-core"
+
+// Badge genérico
+<Badge>Badge</Badge>
+<Badge variant="success">Aprovado</Badge>
+
+// Status Badge — uso direto
+<StatusBadge label="Em Execução" color="#2E7D5B" icon={Play} />
+
+// Status Badge — com createStatusConfig
+const getStatus = createStatusConfig({
+  pending: { label: 'Pendente', color: '#8B7355', icon: Clock },
+  approved: { label: 'Aprovado', color: '#3D7A40', icon: CheckCircle2 },
+});
+<StatusBadge {...getStatus('pending')} />
 ```
 
 **Exemplos:**
 ```tsx
-<Badge>Default</Badge>
+<Badge>Default</Badge>
 <Badge variant=
 ```
 ```tsx
-<Badge variant=
+import { StatusBadge, createStatusConfig } from
 ```
 ```tsx
 <Badge variant=
@@ -86,7 +91,7 @@ import { Badge } from "forlogic-core"
 - Funciona com leitores de tela
 - Pode ser tornado interativo com labels ARIA adequadas se necessário
 
-> Fonte: `src\design-system\docs\components\BadgeDoc.tsx`
+> Fonte: `src/design-system/docs/components/BadgeDoc.tsx`
 
 ---
 
@@ -96,19 +101,19 @@ Exibe um card com cabeçalho, conteúdo e rodapé.
 
 **Uso:**
 ```tsx
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "forlogic-core"
-
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content</p>
-  </CardContent>
-  <CardFooter>
-    <p>Card Footer</p>
-  </CardFooter>
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "forlogic-core"
+
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
 </Card>
 ```
 
@@ -123,7 +128,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
 - Contraste de cores acessível
 - Funciona com leitores de tela
 
-> Fonte: `src\design-system\docs\components\CardDoc.tsx`
+> Fonte: `src/design-system/docs/components/CardDoc.tsx`
 
 ---
 
@@ -133,18 +138,18 @@ Sistema de lista de dados com composição de componentes. Ideal para exibir inf
 
 **Uso:**
 ```tsx
-import { DataList, Badge } from "forlogic-core"
-
-<DataList.Root>
-  <DataList.Item onClick={() => console.log('clicked')}>
-    <DataList.Field label="Nome" value="João Silva" />
-    <DataList.Field label="Email" value="joao@exemplo.com" />
-    <DataList.Field label="Status" value={<Badge>Ativo</Badge>} />
-  </DataList.Item>
-  <DataList.Item>
-    <DataList.Field label="Nome" value="Maria Santos" />
-    <DataList.Field label="Email" value="maria@exemplo.com" />
-  </DataList.Item>
+import { DataList, Badge } from "forlogic-core"
+
+<DataList.Root>
+  <DataList.Item onClick={() => console.log('clicked')}>
+    <DataList.Field label="Nome" value="João Silva" />
+    <DataList.Field label="Email" value="joao@exemplo.com" />
+    <DataList.Field label="Status" value={<Badge>Ativo</Badge>} />
+  </DataList.Item>
+  <DataList.Item>
+    <DataList.Field label="Nome" value="Maria Santos" />
+    <DataList.Field label="Email" value="maria@exemplo.com" />
+  </DataList.Item>
 </DataList.Root>
 ```
 
@@ -167,7 +172,7 @@ import { DataList, Badge } from "forlogic-core"
 - 💡 Field.value aceita ReactNode - use Badge, Button, etc.
 - 💡 onClick em Item adiciona hover state automaticamente
 
-> Fonte: `src\design-system\docs\components\DataListDoc.tsx`
+> Fonte: `src/design-system/docs/components/DataListDoc.tsx`
 
 ---
 
@@ -177,40 +182,40 @@ Componente para exibir estados vazios com ícone, mensagem e ação opcional.
 
 **Uso:**
 ```tsx
-import { EmptyState } from "forlogic-core"
-
-// Estado vazio padrão
-<EmptyState
-  title="Nenhum item encontrado"
-  description="Adicione seu primeiro item para começar"
-  action={{
-    label: "Adicionar Item",
-    onClick: () => handleAddItem()
-  }}
-/>
-
-// Sem resultados de busca
-<EmptyState
-  variant="search"
-  title="Nenhum resultado encontrado"
-  description="Tente ajustar sua busca"
-/>
-
-// Estado de erro
-<EmptyState
-  variant="error"
-  title="Erro ao carregar dados"
-  description="Não foi possível carregar as informações"
-  action={{
-    label: "Tentar Novamente",
-    onClick: () => refetch()
-  }}
-/>
-
-// Ícone customizado
-<EmptyState
-  icon={<Package className="h-8 w-8" />}
-  title="Sem produtos"
+import { EmptyState } from "forlogic-core"
+
+// Estado vazio padrão
+<EmptyState
+  title="Nenhum item encontrado"
+  description="Adicione seu primeiro item para começar"
+  action={{
+    label: "Adicionar Item",
+    onClick: () => handleAddItem()
+  }}
+/>
+
+// Sem resultados de busca
+<EmptyState
+  variant="search"
+  title="Nenhum resultado encontrado"
+  description="Tente ajustar sua busca"
+/>
+
+// Estado de erro
+<EmptyState
+  variant="error"
+  title="Erro ao carregar dados"
+  description="Não foi possível carregar as informações"
+  action={{
+    label: "Tentar Novamente",
+    onClick: () => refetch()
+  }}
+/>
+
+// Ícone customizado
+<EmptyState
+  icon={<Package className="h-8 w-8" />}
+  title="Sem produtos"
 />
 ```
 
@@ -229,7 +234,7 @@ import { EmptyState } from "forlogic-core"
 - Centralizado e responsivo
 - Suporte a ícone customizado
 
-> Fonte: `src\design-system\docs\components\EmptyStateDoc.tsx`
+> Fonte: `src/design-system/docs/components/EmptyStateDoc.tsx`
 
 ---
 
@@ -239,9 +244,9 @@ Separa visual ou semanticamente o conteúdo.
 
 **Uso:**
 ```tsx
-import { Separator } from "forlogic-core"
-
-<Separator />
+import { Separator } from "forlogic-core"
+
+<Separator />
 <Separator orientation="vertical" />
 ```
 
@@ -263,7 +268,7 @@ import { Separator } from "forlogic-core"
 - Pode ser decorativo ou estrutural
 - Atributos ARIA adequados
 
-> Fonte: `src\design-system\docs\components\SeparatorDoc.tsx`
+> Fonte: `src/design-system/docs/components/SeparatorDoc.tsx`
 
 ---
 
@@ -273,8 +278,8 @@ Exibe um indicador mostrando o progresso de conclusão de uma tarefa, tipicament
 
 **Uso:**
 ```tsx
-import { Progress } from "forlogic-core"
-
+import { Progress } from "forlogic-core"
+
 <Progress value={60} />
 ```
 
@@ -301,7 +306,7 @@ import { Progress } from "forlogic-core"
 - Ajuste a altura via className (h-1, h-2, h-4) para diferentes contextos
 - Para uploads, mostre tamanho atual e total junto com o percentual
 
-> Fonte: `src\design-system\docs\components\ProgressDoc.tsx`
+> Fonte: `src/design-system/docs/components/ProgressDoc.tsx`
 
 ---
 
@@ -311,17 +316,17 @@ Componentes para estados de carregamento: Skeleton (placeholders), Spinner (indi
 
 **Uso:**
 ```tsx
-import { Skeleton, Spinner, LoadingState } from "forlogic-core"
-
-// Skeleton básico
-<Skeleton className="h-4 w-[200px]" />
-
-// Spinner
-<Spinner size="md" />
-
-// LoadingState declarativo
-<LoadingState isLoading={isLoading} type="spinner">
-  <div>Conteúdo carregado</div>
+import { Skeleton, Spinner, LoadingState } from "forlogic-core"
+
+// Skeleton básico
+<Skeleton className="h-4 w-[200px]" />
+
+// Spinner
+<Spinner size="md" />
+
+// LoadingState declarativo
+<LoadingState isLoading={isLoading} type="spinner">
+  <div>Conteúdo carregado</div>
 </LoadingState>
 ```
 
@@ -355,6 +360,6 @@ import { Skeleton, Spinner, LoadingState } from "forlogic-core"
 - **type=
 - **: Mostra um placeholder animado no lugar dos children.
 
-> Fonte: `src\design-system\docs\components\SkeletonDoc.tsx`
+> Fonte: `src/design-system/docs/components/SkeletonDoc.tsx`
 
 ---