@etus/ui 0.1.1 → 0.1.2

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

@@ -1,447 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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
-}