118 lines
4.0 KiB
Markdown
118 lines
4.0 KiB
Markdown
---
|
|
description: Padrão de Design Aggios App para Páginas de Listagem e Dashboards
|
|
---
|
|
|
|
# Padrão de Design Aggios App
|
|
|
|
Este workflow descreve como construir uma página seguindo o design system da Aggios, utilizando os componentes padronizados na pasta `components/ui`.
|
|
|
|
## 1. Estrutura Básica da Página
|
|
|
|
Toda página deve ser envolvida por um container com padding e largura máxima:
|
|
|
|
```tsx
|
|
<div className="p-6 max-w-[1600px] mx-auto space-y-6">
|
|
{/* Conteúdo aqui */}
|
|
</div>
|
|
```
|
|
|
|
## 2. Cabeçalho (`PageHeader`)
|
|
|
|
Utilize o `PageHeader` para títulos, descrições e ações globais da página.
|
|
|
|
```tsx
|
|
<PageHeader
|
|
title="Título da Página"
|
|
description="Breve descrição da funcionalidade."
|
|
primaryAction={{
|
|
label: "Novo Item",
|
|
icon: <PlusIcon className="w-4 h-4" />,
|
|
onClick: () => handleCreate()
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## 3. Cartões de Estatísticas (`StatsCard`)
|
|
|
|
Para dashboards ou resumos, utilize o grid de stats:
|
|
|
|
```tsx
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<StatsCard
|
|
title="Métrica"
|
|
value="R$ 1.000"
|
|
icon={<CurrencyDollarIcon className="w-6 h-6" />}
|
|
trend={{ value: '10%', label: 'vs ontem', type: 'up' }}
|
|
/>
|
|
</div>
|
|
```
|
|
|
|
## 4. Filtros e Pesquisa (Minimalista Flat)
|
|
|
|
Os filtros não devem ter sombras nem cores de marca no estado inicial/focus. Devem usar um visual "Clean" com contraste sólido.
|
|
|
|
```tsx
|
|
<div className="flex flex-col md:flex-row gap-4 items-center">
|
|
<div className="flex-1 w-full">
|
|
<Input
|
|
placeholder="Pesquisar..."
|
|
leftIcon={<MagnifyingGlassIcon className="w-5 h-5 text-zinc-400" />}
|
|
className="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 focus:border-zinc-400 dark:focus:border-zinc-500"
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-80">
|
|
<DatePicker
|
|
value={dateRange}
|
|
onChange={setDateRange}
|
|
buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 text-zinc-700 dark:text-zinc-300 hover:border-zinc-400"
|
|
/>
|
|
</div>
|
|
<div className="w-full md:w-56">
|
|
<CustomSelect
|
|
value={status}
|
|
onChange={setStatus}
|
|
options={[
|
|
{ label: 'Todos', value: 'all' },
|
|
{ label: 'Ativo', value: 'active', color: 'bg-emerald-500' },
|
|
]}
|
|
buttonClassName="bg-white dark:bg-zinc-900 border-zinc-200 dark:border-zinc-800 hover:border-zinc-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
## 5. Abas e Tabelas (`Tabs` & `DataTable`)
|
|
|
|
Para organizar o conteúdo principal, utilize o componente `Tabs`. Dentro de cada aba, utilize `Card` com `noPadding` para envolver a `DataTable`.
|
|
|
|
```tsx
|
|
<Tabs
|
|
variant="pills" // ou 'underline'
|
|
items={[
|
|
{
|
|
label: 'Listagem',
|
|
icon: <TableIcon />,
|
|
content: (
|
|
<Card noPadding title="Itens" description="Gerenciamento de registros.">
|
|
<DataTable
|
|
columns={COLUMNS}
|
|
data={DATA}
|
|
pagination={{ ... }}
|
|
/>
|
|
</Card>
|
|
)
|
|
}
|
|
]}
|
|
/>
|
|
```
|
|
|
|
## Regras de Estilo e Cores
|
|
- **Botões Primários**: Sempre use `variant="primary"` e aplique o gradiente via style/classe: `style={{ background: 'var(--gradient)' }} className="shadow-lg shadow-brand-500/20"`.
|
|
- **Bordas**: Use `border-zinc-200` para light mode e `dark:border-zinc-800` para dark mode.
|
|
- **Backgrounds**: Use `bg-white` (light) e `dark:bg-zinc-900` (dark) para componentes elevados.
|
|
- **Cards & Containers (Flat Design)**:
|
|
- **Cards:** Fundo branco/zinc-900, bordas sutis (`border-zinc-200` / `dark:border-zinc-800`), **SEM SOMBRAS**.
|
|
- **Border Radius:** Usar `rounded-2xl` (16px) ou `rounded-[32px]` para containers grandes.
|
|
- **StatsCards:** Texto de valor em `font-bold` ou `font-black`, ícones em boxes coloridos com opacidade 10% no dark mode.
|
|
- **Hover:** Apenas transições de cor ou escalas sutis, evitar sombras no hover.
|