@etus/ui 0.1.0

package/src/components/workflow/Dashboard/Dashboard.tsx

@@ -0,0 +1,447 @@
+import type {
+  DashboardHeaderProps,
+  DashboardProps,
+  DashboardWidgetData,
+  DashboardWidgetProps,
+} from "./Dashboard.types"
+import type { KeyboardEvent } from "react"
+
+import { LayoutGrid, Loader2, RefreshCw, X } from "lucide-react"
+import { useCallback, useEffect, useId, useRef } from "react"
+
+import { cn } from "../../../lib/utils"
+import { Button } from "../../primitives/Button"
+import {
+  dashboardContentVariants,
+  dashboardEmptyVariants,
+  dashboardGridVariants,
+  dashboardHeaderVariants,
+  dashboardLoadingVariants,
+  dashboardSidebarVariants,
+  dashboardVariants,
+  dashboardWidgetHeaderVariants,
+  dashboardWidgetVariants,
+} from "./Dashboard.variants"
+
+/**
+ * Get icon for widget type
+ */
+function getWidgetIcon(_type: DashboardWidgetData["type"]) {
+  // For now, return a generic icon - can be extended per type
+  return <LayoutGrid className="h-4 w-4 text-muted-foreground" />
+}
+
+/**
+ * DashboardHeader displays the dashboard title and actions
+ */
+function DashboardHeader({
+  title,
+  description,
+  showRefresh = true,
+  onRefresh,
+  actions,
+}: DashboardHeaderProps) {
+  return (
+    <div className={dashboardHeaderVariants()} data-slot="dashboard-header">
+      <div className="space-y-1">
+        {title && (
+          <h1
+            className="text-2xl font-bold tracking-tight"
+            data-slot="dashboard-title"
+          >
+            {title}
+          </h1>
+        )}
+        {description && (
+          <p
+            className="text-sm text-muted-foreground"
+            data-slot="dashboard-description"
+          >
+            {description}
+          </p>
+        )}
+      </div>
+      <div className="flex items-center gap-2" data-slot="dashboard-actions">
+        {showRefresh && onRefresh && (
+          <Button
+            aria-label="Refresh dashboard"
+            size="sm"
+            variant="outline"
+            onClick={onRefresh}
+          >
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Atualizar
+          </Button>
+        )}
+        {actions}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * DashboardWidget renders a single widget card
+ */
+function DashboardWidget({
+  widget,
+  columns = 12,
+  rowHeight = 100,
+  isDraggable = false,
+  isResizable = false,
+  onClick,
+  onRemove,
+  className,
+  ...props
+}: DashboardWidgetProps) {
+  const widgetId = useId()
+
+  // Calculate grid span and position styles
+  const gridStyle = {
+    gridColumn: `span ${String(Math.min(widget.w, columns))}`,
+    minHeight: `${String(widget.h * rowHeight)}px`,
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      onClick?.()
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        dashboardWidgetVariants({
+          interactive: Boolean(onClick),
+        }),
+        className
+      )}
+      aria-label={widget.title}
+      data-draggable={isDraggable || undefined}
+      data-resizable={isResizable || undefined}
+      data-slot="dashboard-widget"
+      data-widget-id={widget.id}
+      data-widget-type={widget.type}
+      id={widgetId}
+      role={onClick ? "button" : "region"}
+      style={gridStyle}
+      tabIndex={onClick ? 0 : undefined}
+      onClick={onClick}
+      onKeyDown={onClick ? handleKeyDown : undefined}
+      {...props}
+    >
+      <div className={dashboardWidgetHeaderVariants()} data-slot="dashboard-widget-header">
+        <div className="flex items-center gap-2 min-w-0">
+          {getWidgetIcon(widget.type)}
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold truncate">{widget.title}</h2>
+            {widget.description && (
+              <p className="text-sm text-muted-foreground truncate">
+                {widget.description}
+              </p>
+            )}
+          </div>
+        </div>
+        {onRemove && (
+          <Button
+            aria-label={`Remove ${widget.title}`}
+            className="shrink-0"
+            size="icon"
+            variant="ghost"
+            onClick={(e) => {
+              e.stopPropagation()
+              onRemove()
+            }}
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+      <div className="flex-1" data-slot="dashboard-widget-content">
+        {/* Widget content would be rendered here based on type */}
+        {widget.type === "kpi" &&
+          widget.data !== null &&
+          widget.data !== undefined &&
+          typeof widget.data === "object" &&
+          "value" in widget.data &&
+          (typeof (widget.data as Record<string, unknown>)["value"] === "string" ||
+            typeof (widget.data as Record<string, unknown>)["value"] === "number") && (
+            <div className="text-3xl font-bold">
+              {String((widget.data as Record<string, unknown>)["value"])}
+            </div>
+          )}
+        {widget.type === "text" &&
+          widget.data !== null &&
+          widget.data !== undefined &&
+          typeof widget.data === "string" && (
+            <div className="text-sm text-muted-foreground">{widget.data}</div>
+          )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * DashboardEmptyState displays when no widgets are configured
+ */
+function DashboardEmptyState({ layout }: { layout?: "default" | "dense" | "full" | "sidebar" | null }) {
+  return (
+    <div className={dashboardEmptyVariants({ layout })} data-slot="dashboard-empty">
+      <LayoutGrid className="h-12 w-12 text-muted-foreground mb-4" />
+      <h3 className="text-lg font-semibold mb-2">Nenhum widget configurado</h3>
+      <p className="text-sm text-muted-foreground max-w-md">
+        Adicione widgets para visualizar dados e métricas neste dashboard.
+      </p>
+    </div>
+  )
+}
+
+/**
+ * DashboardLoadingState displays while data is loading
+ */
+function DashboardLoadingState({ layout }: { layout?: "default" | "dense" | "full" | "sidebar" | null }) {
+  return (
+    <div className={dashboardLoadingVariants({ layout })} data-slot="dashboard-loading">
+      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+    </div>
+  )
+}
+
+/**
+ * DashboardErrorState displays when an error occurs
+ */
+function DashboardErrorState({ layout }: { layout?: "default" | "dense" | "full" | "sidebar" | null }) {
+  return (
+    <div className={dashboardEmptyVariants({ layout })} data-slot="dashboard-error">
+      <div className="rounded-full bg-destructive/10 p-3 mb-4">
+        <X className="h-8 w-8 text-destructive" />
+      </div>
+      <h3 className="text-lg font-semibold mb-2">Erro ao carregar dashboard</h3>
+      <p className="text-sm text-muted-foreground max-w-md">
+        Ocorreu um erro ao carregar os dados. Tente novamente mais tarde.
+      </p>
+    </div>
+  )
+}
+
+/**
+ * Dashboard component for creating control panels with widgets, metrics, and visualizations.
+ *
+ * @example
+ * ```tsx
+ * const widgets = [
+ *   { id: '1', type: 'kpi', title: 'Total Sales', x: 0, y: 0, w: 3, h: 2, data: { value: 'R$ 150.000' } },
+ *   { id: '2', type: 'chart', title: 'Sales by Month', x: 3, y: 0, w: 6, h: 4 },
+ * ]
+ *
+ * <Dashboard
+ *   title="Sales Dashboard"
+ *   description="Overview of commercial performance"
+ *   widgets={widgets}
+ *   onRefresh={() => console.log('Refresh')}
+ * />
+ * ```
+ */
+function Dashboard({
+  "aria-label": ariaLabel = "Dashboard",
+  className,
+  title,
+  description,
+  widgets,
+  layout = "default",
+  columns = 12,
+  rowHeight = 100,
+  isDraggable = false,
+  isResizable = false,
+  showHeader = true,
+  showRefresh = true,
+  refreshInterval,
+  sidebarContent,
+  headerActions,
+  state = "ready",
+  onLayoutChange,
+  onWidgetAdd: _onWidgetAdd,
+  onWidgetRemove,
+  onRefresh,
+  onExport: _onExport,
+  onWidgetClick,
+  ...props
+}: DashboardProps) {
+  const dashboardId = useId()
+  const refreshTimerRef = useRef<null | ReturnType<typeof setInterval>>(null)
+
+  // Normalize layout
+  const normalizedLayout = layout ?? "default"
+
+  // Handle refresh
+  const handleRefresh = useCallback(() => {
+    onRefresh?.({ timestamp: Date.now() })
+  }, [onRefresh])
+
+  // Handle widget remove
+  const handleWidgetRemove = useCallback(
+    (widgetId: string) => {
+      onWidgetRemove?.({ widgetId, timestamp: Date.now() })
+      // Notify layout change
+      const updatedLayout = widgets
+        .filter((w) => w.id !== widgetId)
+        .map((w) => ({ i: w.id, x: w.x, y: w.y, w: w.w, h: w.h }))
+      onLayoutChange?.({ layout: updatedLayout, timestamp: Date.now() })
+    },
+    [widgets, onWidgetRemove, onLayoutChange]
+  )
+
+  // Handle widget click
+  const handleWidgetClick = useCallback(
+    (widget: DashboardWidgetData) => {
+      onWidgetClick?.({ widget, timestamp: Date.now() })
+    },
+    [onWidgetClick]
+  )
+
+  // Set up auto-refresh
+  useEffect(() => {
+    if (refreshInterval && refreshInterval > 0 && onRefresh) {
+      refreshTimerRef.current = setInterval(() => {
+        onRefresh({ timestamp: Date.now() })
+      }, refreshInterval)
+    }
+
+    return () => {
+      if (refreshTimerRef.current) {
+        clearInterval(refreshTimerRef.current)
+      }
+    }
+  }, [refreshInterval, onRefresh])
+
+  // Generate grid template columns
+  const gridTemplateColumns = `repeat(${String(columns)}, minmax(0, 1fr))`
+
+  // Render content based on state
+  const renderContent = () => {
+    switch (state) {
+      case "loading":
+        return <DashboardLoadingState layout={normalizedLayout} />
+      case "error":
+        return <DashboardErrorState layout={normalizedLayout} />
+      case "empty":
+        return <DashboardEmptyState layout={normalizedLayout} />
+      case "ready":
+      default:
+        if (widgets.length === 0) {
+          return <DashboardEmptyState layout={normalizedLayout} />
+        }
+        return (
+          <div
+            className={dashboardGridVariants({ layout: normalizedLayout })}
+            data-slot="dashboard-grid"
+            style={{ gridTemplateColumns }}
+          >
+            {widgets.map((widget) => (
+              <DashboardWidget
+                key={widget.id}
+                columns={columns}
+                isDraggable={isDraggable && !widget.isStatic}
+                isResizable={isResizable && !widget.isStatic}
+                rowHeight={rowHeight}
+                widget={widget}
+                onClick={
+                  onWidgetClick ? () => { handleWidgetClick(widget); } : undefined
+                }
+                onRemove={
+                  onWidgetRemove
+                    ? () => { handleWidgetRemove(widget.id); }
+                    : undefined
+                }
+              />
+            ))}
+          </div>
+        )
+    }
+  }
+
+  // Sidebar layout
+  if (normalizedLayout === "sidebar") {
+    return (
+      <div
+        aria-label={ariaLabel}
+        className={cn(dashboardVariants({ layout: normalizedLayout }), className)}
+        data-layout={normalizedLayout}
+        data-slot="dashboard"
+        data-state={state}
+        id={dashboardId}
+        role="main"
+        {...props}
+      >
+        {sidebarContent && (
+          <aside
+            className={dashboardSidebarVariants()}
+            data-slot="dashboard-sidebar"
+          >
+            {sidebarContent}
+          </aside>
+        )}
+        <div className={dashboardContentVariants({ layout: normalizedLayout })}>
+          {showHeader && (title ?? description ?? headerActions) && (
+            <DashboardHeader
+              actions={headerActions}
+              description={description}
+              showRefresh={showRefresh}
+              title={title}
+              onRefresh={onRefresh ? handleRefresh : undefined}
+            />
+          )}
+          {renderContent()}
+        </div>
+      </div>
+    )
+  }
+
+  // Default, dense, and full layouts
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn(dashboardVariants({ layout: normalizedLayout }), className)}
+      data-layout={normalizedLayout}
+      data-slot="dashboard"
+      data-state={state}
+      id={dashboardId}
+      role="main"
+      {...props}
+    >
+      {showHeader && (title ?? description ?? headerActions) && (
+        <DashboardHeader
+          actions={headerActions}
+          description={description}
+          showRefresh={showRefresh}
+          title={title}
+          onRefresh={onRefresh ? handleRefresh : undefined}
+        />
+      )}
+      {renderContent()}
+    </div>
+  )
+}
+
+export {
+  Dashboard,
+  dashboardContentVariants,
+  DashboardEmptyState,
+  dashboardEmptyVariants,
+  DashboardErrorState,
+  dashboardGridVariants,
+  DashboardHeader,
+  dashboardHeaderVariants,
+  DashboardLoadingState,
+  dashboardLoadingVariants,
+  dashboardSidebarVariants,
+  dashboardVariants,
+  DashboardWidget,
+  dashboardWidgetHeaderVariants,
+  dashboardWidgetVariants,
+}
+export type {
+  DashboardHeaderProps,
+  DashboardProps,
+  DashboardWidgetProps,
+}

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

@@ -0,0 +1,232 @@
+import type { dashboardVariants } from "./Dashboard.variants"
+import type { VariantProps } from "class-variance-authority"
+import type { ReactNode } from "react"
+
+/**
+ * Widget types available in the dashboard
+ */
+export type DashboardWidgetType =
+  | "calendar"
+  | "chart"
+  | "custom"
+  | "image"
+  | "kpi"
+  | "list"
+  | "map"
+  | "table"
+  | "text"
+
+/**
+ * Widget configuration options
+ */
+export interface DashboardWidgetConfig {
+  /** Additional configuration */
+  [key: string]: unknown
+  /** Widget can be configured */
+  configurable?: boolean
+  /** Widget can be expanded */
+  expandable?: boolean
+  /** Widget can be exported */
+  exportable?: boolean
+  /** Widget can be refreshed */
+  refreshable?: boolean
+}
+
+/**
+ * Widget data structure
+ */
+export interface DashboardWidgetData {
+  /** Widget configuration */
+  config?: DashboardWidgetConfig
+  /** Widget data */
+  data?: unknown
+  /** Optional description */
+  description?: string
+  /** Height in grid units */
+  h: number
+  /** Unique identifier */
+  id: string
+  /** Whether widget is static (cannot be moved/resized) */
+  isStatic?: boolean
+  /** Maximum height */
+  maxH?: number
+  /** Maximum width */
+  maxW?: number
+  /** Minimum height */
+  minH?: number
+  /** Minimum width */
+  minW?: number
+  /** Widget title */
+  title: string
+  /** Widget type */
+  type: DashboardWidgetType
+  /** Width in grid units */
+  w: number
+  /** X position in grid */
+  x: number
+  /** Y position in grid */
+  y: number
+}
+
+/**
+ * Layout item for grid positioning
+ */
+export interface LayoutItem {
+  /** Height in grid units */
+  h: number
+  /** Widget ID */
+  i: string
+  /** Width in grid units */
+  w: number
+  /** X position */
+  x: number
+  /** Y position */
+  y: number
+}
+
+/**
+ * Dashboard state
+ */
+export type DashboardState = "empty" | "error" | "loading" | "ready"
+
+/**
+ * Payload for onLayoutChange event
+ */
+export interface LayoutChangePayload {
+  /** Updated layout items */
+  layout: LayoutItem[]
+  /** Timestamp of the event */
+  timestamp: number
+}
+
+/**
+ * Payload for onWidgetAdd event
+ */
+export interface DashboardWidgetAddPayload {
+  /** Timestamp of the event */
+  timestamp: number
+  /** Widget that was added */
+  widget: DashboardWidgetData
+}
+
+/**
+ * Payload for onWidgetRemove event
+ */
+export interface DashboardWidgetRemovePayload {
+  /** Timestamp of the event */
+  timestamp: number
+  /** ID of the removed widget */
+  widgetId: string
+}
+
+/**
+ * Payload for onRefresh event
+ */
+export interface RefreshPayload {
+  /** Timestamp of the event */
+  timestamp: number
+}
+
+/**
+ * Payload for onExport event
+ */
+export interface ExportPayload {
+  /** Export format */
+  format: "csv" | "pdf" | "png"
+  /** Timestamp of the event */
+  timestamp: number
+}
+
+/**
+ * Payload for onWidgetClick event
+ */
+export interface DashboardWidgetClickPayload {
+  /** Timestamp of the event */
+  timestamp: number
+  /** Widget that was clicked */
+  widget: DashboardWidgetData
+}
+
+/**
+ * Props for Dashboard component
+ */
+export interface DashboardProps
+  extends Omit<React.ComponentProps<"div">, "children">,
+    VariantProps<typeof dashboardVariants> {
+  /** Additional CSS classes */
+  className?: string
+  /** Number of columns in the grid @default 12 */
+  columns?: number
+  /** Optional description */
+  description?: string
+  /** Actions to display in the header */
+  headerActions?: ReactNode
+  /** Enable widget dragging @default false */
+  isDraggable?: boolean
+  /** Enable widget resizing @default false */
+  isResizable?: boolean
+  /** Called when export is requested */
+  onExport?: (payload: ExportPayload) => void
+  /** Called when layout changes */
+  onLayoutChange?: (payload: LayoutChangePayload) => void
+  /** Called when refresh is requested */
+  onRefresh?: (payload: RefreshPayload) => void
+  /** Called when a widget is added */
+  onWidgetAdd?: (payload: DashboardWidgetAddPayload) => void
+  /** Called when a widget is clicked */
+  onWidgetClick?: (payload: DashboardWidgetClickPayload) => void
+  /** Called when a widget is removed */
+  onWidgetRemove?: (payload: DashboardWidgetRemovePayload) => void
+  /** Auto-refresh interval in milliseconds */
+  refreshInterval?: number
+  /** Height of each row in pixels @default 100 */
+  rowHeight?: number
+  /** Show header section @default true */
+  showHeader?: boolean
+  /** Show refresh button @default true */
+  showRefresh?: boolean
+  /** Content for sidebar (only for sidebar layout) */
+  sidebarContent?: ReactNode
+  /** Current state of the dashboard @default 'ready' */
+  state?: DashboardState
+  /** Dashboard title */
+  title?: string
+  /** Array of widgets to display */
+  widgets: DashboardWidgetData[]
+}
+
+/**
+ * Props for DashboardHeader component
+ */
+export interface DashboardHeaderProps {
+  /** Header actions */
+  actions?: ReactNode
+  /** Description */
+  description?: string
+  /** Called when refresh is clicked */
+  onRefresh?: () => void
+  /** Show refresh button */
+  showRefresh?: boolean
+  /** Title */
+  title?: string
+}
+
+/**
+ * Props for DashboardWidget component
+ */
+export interface DashboardWidgetProps extends React.ComponentProps<"div"> {
+  /** Number of columns for grid */
+  columns?: number
+  /** Enable dragging */
+  isDraggable?: boolean
+  /** Enable resizing */
+  isResizable?: boolean
+  /** Called when widget is clicked */
+  onClick?: () => void
+  /** Called when remove is clicked */
+  onRemove?: () => void
+  /** Row height */
+  rowHeight?: number
+  /** Widget data */
+  widget: DashboardWidgetData
+}