@etus/ui 0.1.0

package/src/components/workflow/Dashboard/Dashboard.variants.ts

@@ -0,0 +1,241 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * Dashboard container variants
+ */
+export const dashboardVariants = cva(
+  [
+    "relative",
+    "bg-background",
+    "text-foreground",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "p-6",
+        dense: "p-4",
+        full: "p-0 min-h-screen",
+        sidebar: "flex",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Dashboard header variants
+ */
+export const dashboardHeaderVariants = cva(
+  [
+    "flex",
+    "items-start",
+    "justify-between",
+    "gap-4",
+    "mb-6",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        dense: "mb-4",
+        full: "px-6 pt-6",
+        sidebar: "",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Dashboard grid variants
+ */
+export const dashboardGridVariants = cva(
+  [
+    "grid",
+    "w-full",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "gap-6",
+        dense: "gap-4",
+        full: "gap-6 px-6 pb-6",
+        sidebar: "gap-6",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Dashboard sidebar variants
+ */
+export const dashboardSidebarVariants = cva(
+  [
+    "shrink-0",
+    "border-r",
+    "border-border",
+    "bg-card",
+  ],
+  {
+    variants: {
+      width: {
+        sm: "w-48",
+        md: "w-64",
+        lg: "w-80",
+      },
+    },
+    defaultVariants: {
+      width: "md",
+    },
+  }
+)
+
+/**
+ * Dashboard content variants
+ */
+export const dashboardContentVariants = cva(
+  [
+    "flex-1",
+    "min-w-0",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        dense: "",
+        full: "",
+        sidebar: "p-6",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Dashboard widget variants
+ */
+export const dashboardWidgetVariants = cva(
+  [
+    "rounded-lg",
+    "border",
+    "border-border",
+    "bg-card",
+    "overflow-hidden",
+    "transition-shadow",
+    "duration-200",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "p-6",
+        dense: "p-4",
+        full: "p-6",
+        sidebar: "p-6",
+      },
+      state: {
+        default: "",
+        dragging: "shadow-lg ring-2 ring-primary/20",
+        resizing: "shadow-md",
+      },
+      interactive: {
+        true: "cursor-pointer hover:shadow-md",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+      state: "default",
+      interactive: false,
+    },
+  }
+)
+
+/**
+ * Dashboard widget header variants
+ */
+export const dashboardWidgetHeaderVariants = cva(
+  [
+    "flex",
+    "items-start",
+    "justify-between",
+    "gap-2",
+    "mb-4",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        dense: "mb-3",
+        full: "",
+        sidebar: "",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Dashboard empty state variants
+ */
+export const dashboardEmptyVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "text-center",
+    "py-16",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        dense: "py-12",
+        full: "min-h-[50vh]",
+        sidebar: "",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Dashboard loading state variants
+ */
+export const dashboardLoadingVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "py-16",
+  ],
+  {
+    variants: {
+      layout: {
+        default: "",
+        dense: "py-12",
+        full: "min-h-[50vh]",
+        sidebar: "",
+      },
+    },
+    defaultVariants: {
+      layout: "default",
+    },
+  }
+)
+
+export type DashboardVariantProps = VariantProps<typeof dashboardVariants>
+export type DashboardWidgetVariantProps = VariantProps<typeof dashboardWidgetVariants>

package/src/components/workflow/Dashboard/README.md

@@ -0,0 +1,445 @@
+# Dashboard
+
+## Visão Geral
+
+O Dashboard e um componente container para criacao de paineis de controle que organiza widgets, metricas e visualizacoes em um layout responsivo. Ele fornece uma estrutura flexivel para exibir informacoes agregadas de forma clara e interativa.
+
+### Classificacao Atomica
+- **Categoria**: Templates
+- **Subcategoria**: Workflow / Data Visualization
+
+### Casos de Uso Comuns
+- Paineis de controle administrativos
+- Dashboards de analytics
+- Visao geral de projetos
+- Monitoramento de KPIs
+- Paineis de operacoes
+
+### Relacao com Outros Componentes
+- **Grid**: Sistema de layout base
+- **Card**: Container para widgets
+- **KPICard**: Metricas destacadas
+- **Chart**: Graficos e visualizacoes
+- **DashboardBuilder**: Editor de dashboards
+
+## Design Specs
+
+### Variantes
+- **Default**: Layout padrao com grid responsivo
+- **Dense**: Layout compacto com menos espacamento
+- **Sidebar**: Layout com barra lateral fixa
+- **Full**: Layout em tela cheia
+
+### Layouts Pre-definidos
+- **Overview**: 4 KPIs + 2 graficos
+- **Analytics**: Foco em graficos e tabelas
+- **Monitoring**: Alertas e status em tempo real
+- **Custom**: Layout definido pelo usuario
+
+### Estados
+- **Loading**: Carregando dados
+- **Empty**: Sem widgets configurados
+- **Error**: Erro ao carregar dados
+- **Ready**: Dados carregados
+
+### Tokens de Design
+
+#### Cores
+- Background: `bg-background`
+- Widget Background: `bg-card`
+- Widget Border: `border-border`
+- Section Divider: `border-muted`
+
+#### Espacamento
+- Container Padding: `p-6`
+- Widget Gap: `gap-4` ou `gap-6`
+- Widget Padding: `p-4` ou `p-6`
+
+#### Tipografia
+- Dashboard Title: `text-2xl font-bold`
+- Widget Title: `text-lg font-semibold`
+- Widget Subtitle: `text-sm text-muted-foreground`
+
+#### Bordas e Arredondamento
+- Widget Cards: `rounded-lg border`
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `title` | `string` | - | Titulo do dashboard |
+| `description` | `string` | - | Descricao do dashboard |
+| `widgets` | `Widget[]` | `[]` | Array de widgets |
+| `layout` | `'default' \| 'dense' \| 'sidebar' \| 'full'` | `'default'` | Variante de layout |
+| `columns` | `number` | `12` | Numero de colunas do grid |
+| `rowHeight` | `number` | `100` | Altura base das linhas em pixels |
+| `isDraggable` | `boolean` | `false` | Permite arrastar widgets |
+| `isResizable` | `boolean` | `false` | Permite redimensionar widgets |
+| `showHeader` | `boolean` | `true` | Exibe cabecalho |
+| `showRefresh` | `boolean` | `true` | Botao de atualizar |
+| `refreshInterval` | `number` | - | Intervalo de atualizacao em ms |
+| `sidebarContent` | `ReactNode` | - | Conteudo da sidebar |
+| `headerActions` | `ReactNode` | - | Acoes no cabecalho |
+| `className` | `string` | `''` | Classes CSS adicionais |
+
+### Eventos
+
+| Evento | Payload | Descricao |
+|--------|---------|-----------|
+| `onLayoutChange` | `LayoutItem[]` | Layout alterado (drag/resize) |
+| `onWidgetAdd` | `Widget` | Widget adicionado |
+| `onWidgetRemove` | `{ widgetId: string }` | Widget removido |
+| `onRefresh` | - | Atualizacao solicitada |
+| `onExport` | `{ format: 'pdf' \| 'png' \| 'csv' }` | Exportacao solicitada |
+
+### Interfaces TypeScript
+
+```typescript
+export interface Widget {
+  id: string;
+  type: WidgetType;
+  title: string;
+  description?: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  minW?: number;
+  minH?: number;
+  maxW?: number;
+  maxH?: number;
+  data?: unknown;
+  config?: WidgetConfig;
+  isStatic?: boolean;
+}
+
+export type WidgetType =
+  | 'kpi'
+  | 'chart'
+  | 'table'
+  | 'list'
+  | 'calendar'
+  | 'map'
+  | 'text'
+  | 'image'
+  | 'custom';
+
+export interface WidgetConfig {
+  refreshable?: boolean;
+  expandable?: boolean;
+  configurable?: boolean;
+  exportable?: boolean;
+  [key: string]: unknown;
+}
+
+export interface LayoutItem {
+  i: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface DashboardProps {
+  title?: string;
+  description?: string;
+  widgets: Widget[];
+  layout?: 'default' | 'dense' | 'sidebar' | 'full';
+  columns?: number;
+  rowHeight?: number;
+  isDraggable?: boolean;
+  isResizable?: boolean;
+  showHeader?: boolean;
+  showRefresh?: boolean;
+  refreshInterval?: number;
+  sidebarContent?: React.ReactNode;
+  headerActions?: React.ReactNode;
+  className?: string;
+  onLayoutChange?: (layout: LayoutItem[]) => void;
+  onWidgetAdd?: (widget: Widget) => void;
+  onWidgetRemove?: (data: { widgetId: string }) => void;
+  onRefresh?: () => void;
+  onExport?: (data: { format: 'pdf' | 'png' | 'csv' }) => void;
+}
+```
+
+### Comparacao com Referencias
+- **Grafana**: Inspiracao para sistema de widgets
+- **Metabase**: Referencia para visualizacoes
+- **Apache Superset**: Modelo para layouts flexiveis
+
+## Acessibilidade (A11y)
+
+### Atributos ARIA
+- `role="main"`: Container principal
+- `aria-label`: Nome do dashboard
+- `aria-describedby`: Descricao
+- `role="region"`: Cada widget
+
+### Navegacao por Teclado
+- `Tab`: Navega entre widgets
+- `Enter`: Expande/interage com widget
+- `Arrow Keys`: Navega dentro de widgets
+- `Escape`: Fecha widget expandido
+
+### Screen Readers
+- Anuncio de titulo e descricao
+- Identificacao de cada widget
+- Valores de metricas anunciados
+
+### Conformidade WCAG
+- Nivel: WCAG 2.1 AA
+- Criterios: 1.3.1, 2.1.1, 4.1.2
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { Dashboard } from '@etus/ui';
+
+const widgets = [
+  {
+    id: '1',
+    type: 'kpi',
+    title: 'Vendas Totais',
+    x: 0, y: 0, w: 3, h: 2,
+    data: { value: 'R$ 150.000', change: '+12%' }
+  },
+  {
+    id: '2',
+    type: 'kpi',
+    title: 'Novos Clientes',
+    x: 3, y: 0, w: 3, h: 2,
+    data: { value: '234', change: '+5%' }
+  },
+  {
+    id: '3',
+    type: 'chart',
+    title: 'Vendas por Mes',
+    x: 0, y: 2, w: 6, h: 4,
+    data: { /* chart data */ }
+  }
+];
+
+export function BasicDashboard() {
+  return (
+    <Dashboard
+      title="Painel de Vendas"
+      description="Visao geral do desempenho comercial"
+      widgets={widgets}
+    />
+  );
+}
+```
+
+### Dashboard Editavel
+
+```tsx
+import { Dashboard } from '@etus/ui';
+import { useState } from 'react';
+
+export function EditableDashboard() {
+  const [widgets, setWidgets] = useState(initialWidgets);
+  const [layout, setLayout] = useState([]);
+
+  return (
+    <Dashboard
+      title="Meu Dashboard"
+      widgets={widgets}
+      isDraggable={true}
+      isResizable={true}
+      onLayoutChange={setLayout}
+      onWidgetRemove={({ widgetId }) => {
+        setWidgets(w => w.filter(widget => widget.id !== widgetId));
+      }}
+    />
+  );
+}
+```
+
+### Com Sidebar
+
+```tsx
+import { Dashboard } from '@etus/ui';
+
+export function DashboardWithSidebar() {
+  return (
+    <Dashboard
+      title="Dashboard de Projetos"
+      widgets={widgets}
+      layout="sidebar"
+      sidebarContent={
+        <nav className="p-4">
+          <h3 className="font-semibold mb-4">Filtros</h3>
+          {/* Filtros aqui */}
+        </nav>
+      }
+    />
+  );
+}
+```
+
+### Com Atualizacao Automatica
+
+```tsx
+import { Dashboard } from '@etus/ui';
+
+export function AutoRefreshDashboard() {
+  const handleRefresh = async () => {
+    // Buscar dados atualizados
+  };
+
+  return (
+    <Dashboard
+      title="Monitoramento"
+      widgets={widgets}
+      showRefresh={true}
+      refreshInterval={30000} // 30 segundos
+      onRefresh={handleRefresh}
+    />
+  );
+}
+```
+
+### Layout Denso
+
+```tsx
+import { Dashboard } from '@etus/ui';
+
+export function DenseDashboard() {
+  return (
+    <Dashboard
+      title="Dashboard Compacto"
+      widgets={widgets}
+      layout="dense"
+      rowHeight={80}
+    />
+  );
+}
+```
+
+### Com Acoes no Cabecalho
+
+```tsx
+import { Dashboard, Button, DropdownMenu } from '@etus/ui';
+import { Download, Settings } from 'lucide-react';
+
+export function DashboardWithActions() {
+  return (
+    <Dashboard
+      title="Analytics"
+      widgets={widgets}
+      headerActions={
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm">
+            <Download className="h-4 w-4 mr-2" />
+            Exportar
+          </Button>
+          <Button variant="outline" size="sm">
+            <Settings className="h-4 w-4" />
+          </Button>
+        </div>
+      }
+    />
+  );
+}
+```
+
+### Tela Cheia
+
+```tsx
+import { Dashboard } from '@etus/ui';
+
+export function FullscreenDashboard() {
+  return (
+    <Dashboard
+      title="Apresentacao"
+      widgets={widgets}
+      layout="full"
+      showHeader={false}
+    />
+  );
+}
+```
+
+## Testes
+
+### Estrategias de Teste
+
+#### Testes Unitarios
+- Renderizacao de widgets
+- Calculo de layout
+- Responsividade
+
+#### Testes de Integracao
+- Drag and drop
+- Redimensionamento
+- Atualizacao de dados
+
+#### Testes de Acessibilidade
+- Navegacao por teclado
+- Screen reader
+
+### Exemplos de Codigo
+
+```typescript
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Dashboard } from './Dashboard';
+
+describe('Dashboard', () => {
+  const mockWidgets = [
+    { id: '1', type: 'kpi', title: 'Widget 1', x: 0, y: 0, w: 3, h: 2 },
+    { id: '2', type: 'kpi', title: 'Widget 2', x: 3, y: 0, w: 3, h: 2 }
+  ];
+
+  it('renders dashboard title', () => {
+    render(<Dashboard title="Test Dashboard" widgets={mockWidgets} />);
+    expect(screen.getByText('Test Dashboard')).toBeInTheDocument();
+  });
+
+  it('renders all widgets', () => {
+    render(<Dashboard widgets={mockWidgets} />);
+    expect(screen.getByText('Widget 1')).toBeInTheDocument();
+    expect(screen.getByText('Widget 2')).toBeInTheDocument();
+  });
+
+  it('calls onRefresh when refresh button is clicked', () => {
+    const onRefresh = vi.fn();
+    render(
+      <Dashboard
+        widgets={mockWidgets}
+        showRefresh={true}
+        onRefresh={onRefresh}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: /atualizar/i }));
+    expect(onRefresh).toHaveBeenCalled();
+  });
+
+  it('applies dense layout class', () => {
+    const { container } = render(
+      <Dashboard widgets={mockWidgets} layout="dense" />
+    );
+    expect(container.firstChild).toHaveClass('gap-2');
+  });
+});
+```
+
+---
+
+## Roadmap / Features Futuras
+
+- Usar react-grid-layout para drag/resize
+- Lazy loading de widgets pesados
+- Cache de dados de widgets
+- Suporte a temas por widget
+
+## Referências
+
+- [Grafana Dashboards](https://grafana.com/docs/grafana/latest/dashboards/)
+- [Metabase](https://www.metabase.com/)
+- [react-grid-layout](https://github.com/react-grid-layout/react-grid-layout)

package/src/components/workflow/Dashboard/index.ts

@@ -0,0 +1,39 @@
+export {
+  Dashboard,
+  dashboardContentVariants,
+  DashboardEmptyState,
+  dashboardEmptyVariants,
+  DashboardErrorState,
+  dashboardGridVariants,
+  DashboardHeader,
+  dashboardHeaderVariants,
+  DashboardLoadingState,
+  dashboardLoadingVariants,
+  dashboardSidebarVariants,
+  dashboardVariants,
+  DashboardWidget,
+  dashboardWidgetHeaderVariants,
+  dashboardWidgetVariants,
+} from "./Dashboard"
+
+export type {
+  DashboardHeaderProps,
+  DashboardProps,
+  DashboardState,
+  DashboardWidgetAddPayload,
+  DashboardWidgetClickPayload,
+  DashboardWidgetConfig,
+  DashboardWidgetData,
+  DashboardWidgetProps,
+  DashboardWidgetRemovePayload,
+  DashboardWidgetType,
+  ExportPayload,
+  LayoutChangePayload,
+  LayoutItem,
+  RefreshPayload,
+} from "./Dashboard.types"
+
+export type {
+  DashboardVariantProps,
+  DashboardWidgetVariantProps,
+} from "./Dashboard.variants"