@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.1.4 → 0.1.6

package/src/components/ui/data-display/types.ts

@@ -0,0 +1,536 @@
+// Data Display Components - Shared Types
+// Comprehensive type definitions for all data display components
+
+import React from 'react';
+
+// ============================================================================
+// COMMON INTERFACES
+// ============================================================================
+
+export interface DataDisplayBaseProps {
+  className?: string;
+  theme?: 'stan-design' | 'enterprise' | 'harvey';
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'striped';
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface SortableColumn {
+  key: string;
+  label: string;
+  sortable?: boolean;
+  width?: string | number;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface SortConfig {
+  key: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface PaginationConfig {
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  pageSizeOptions?: number[];
+}
+
+export interface FilterConfig {
+  key: string;
+  value: string | number | boolean;
+  operator: 'equals' | 'contains' | 'starts_with' | 'ends_with' | 'greater_than' | 'less_than';
+}
+
+// ============================================================================
+// TABLE COMPONENT
+// ============================================================================
+
+export interface TableProps extends DataDisplayBaseProps {
+  columns: SortableColumn[];
+  data: Record<string, any>[];
+  sortable?: boolean;
+  selectable?: boolean;
+  expandable?: boolean;
+  onSort?: (config: SortConfig) => void;
+  onSelectionChange?: (selectedKeys: string[]) => void;
+  onRowClick?: (row: Record<string, any>, index: number) => void;
+  onRowExpand?: (row: Record<string, any>, expanded: boolean) => void;
+  selectedKeys?: string[];
+  expandedKeys?: string[];
+  sortConfig?: SortConfig;
+  pagination?: PaginationConfig;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  filters?: FilterConfig[];
+  onFiltersChange?: (filters: FilterConfig[]) => void;
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  rowKey?: string | ((row: Record<string, any>) => string);
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface TableRowProps {
+  row: Record<string, any>;
+  index: number;
+  columns: SortableColumn[];
+  selected: boolean;
+  expanded: boolean;
+  onSelect: (checked: boolean) => void;
+  onExpand: () => void;
+  onClick: () => void;
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped' | 'compact';
+}
+
+// ============================================================================
+// DATA GRID COMPONENT
+// ============================================================================
+
+export interface DataGridProps extends DataDisplayBaseProps {
+  columns: SortableColumn[];
+  data: Record<string, any>[];
+  sortable?: boolean;
+  filterable?: boolean;
+  groupable?: boolean;
+  resizable?: boolean;
+  reorderable?: boolean;
+  onSort?: (config: SortConfig) => void;
+  onFiltersChange?: (filters: FilterConfig[]) => void;
+  onGroupChange?: (groups: string[]) => void;
+  onColumnResize?: (columnKey: string, newWidth: number) => void;
+  onColumnReorder?: (fromIndex: number, toIndex: number) => void;
+  sortConfig?: SortConfig;
+  filters?: FilterConfig[];
+  groups?: string[];
+  columnWidths?: Record<string, number>;
+  columnOrder?: string[];
+  pagination?: PaginationConfig;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  rowKey?: string | ((row: Record<string, any>) => string);
+  selectable?: boolean;
+  onSelectionChange?: (selectedKeys: string[]) => void;
+  selectedKeys?: string[];
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface DataGridColumnProps {
+  column: SortableColumn;
+  index: number;
+  onSort: () => void;
+  onResize: (width: number) => void;
+  sortConfig?: SortConfig;
+  theme: 'stan-design' | 'enterprise' | 'harvey';
+  size: 'sm' | 'md' | 'lg';
+  resizable: boolean;
+}
+
+// ============================================================================
+// LIST COMPONENT
+// ============================================================================
+
+export interface ListProps extends DataDisplayBaseProps {
+  items: ListItem[];
+  selectable?: boolean;
+  multiSelect?: boolean;
+  onSelectionChange?: (selectedKeys: string[]) => void;
+  selectedKeys?: string[];
+  onClick?: (item: ListItem, index: number) => void;
+  onItemClick?: (item: ListItem, index: number) => void;
+  onItemAction?: (action: string, item: ListItem) => void;
+  actions?: ListAction[];
+  itemRenderer?: (item: ListItem, index: number) => React.ReactNode;
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filterable?: boolean;
+  filters?: ListFilter[];
+  onFiltersChange?: (filters: ListFilter[]) => void;
+  sortable?: boolean;
+  sortConfig?: SortConfig;
+  onSort?: (config: SortConfig) => void;
+  pagination?: PaginationConfig;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  showDividers?: boolean;
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface ListItem {
+  id: string;
+  key?: string;
+  title: string;
+  description?: string;
+  subtitle?: string;
+  avatar?: string | React.ReactNode;
+  icon?: React.ReactNode;
+  metadata?: {
+    timestamp?: string;
+    status?: 'active' | 'inactive' | 'warning' | 'error';
+    badge?: string;
+    [key: string]: any;
+  };
+  actions?: ListAction[];
+  disabled?: boolean;
+  selected?: boolean;
+}
+
+export interface ListAction {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick: (item: ListItem) => void;
+  disabled?: boolean;
+  variant?: 'default' | 'primary' | 'secondary' | 'danger';
+}
+
+export interface ListFilter {
+  key: string;
+  label: string;
+  type: 'text' | 'select' | 'checkbox' | 'date';
+  options?: { value: string; label: string }[];
+  value?: any;
+}
+
+// ============================================================================
+// TREE COMPONENT
+// ============================================================================
+
+export interface TreeProps extends DataDisplayBaseProps {
+  data: TreeNode[];
+  expandedKeys?: string[];
+  selectedKeys?: string[];
+  onExpandedKeysChange?: (expandedKeys: string[]) => void;
+  onSelectedKeysChange?: (selectedKeys: string[]) => void;
+  onNodeClick?: (node: TreeNode, event: React.MouseEvent) => void;
+  selectable?: boolean;
+  expandable?: boolean;
+  draggable?: boolean;
+  onDragStart?: (node: TreeNode, event: React.DragEvent) => void;
+  onDragEnd?: (node: TreeNode, event: React.DragEvent) => void;
+  onDrop?: (dragNode: TreeNode, dropNode: TreeNode, event: React.DragEvent) => void;
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filterable?: boolean;
+  filters?: TreeFilter[];
+  onFiltersChange?: (filters: TreeFilter[]) => void;
+  showLines?: boolean;
+  showIcons?: boolean;
+  expandAll?: boolean;
+  collapseAll?: boolean;
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface TreeNode {
+  id: string;
+  key?: string;
+  label: string;
+  description?: string;
+  children?: TreeNode[];
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  selectable?: boolean;
+  expandable?: boolean;
+  metadata?: {
+    count?: number;
+    status?: 'active' | 'inactive' | 'warning' | 'error';
+    [key: string]: any;
+  };
+  data?: Record<string, any>;
+}
+
+export interface TreeItemProps {
+  node: TreeNode;
+  level?: number;
+  expandedKeys: string[];
+  selectedKeys: string[];
+  selectable?: boolean;
+  expandable?: boolean;
+  onToggleExpand?: (nodeId: string, expanded: boolean) => void;
+  onSelectionChange?: (nodeId: string, selected: boolean) => void;
+  onClick?: (node: TreeNode, event: React.MouseEvent) => void;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped';
+  draggable?: boolean;
+  onDragStart?: (node: TreeNode, event: React.DragEvent) => void;
+  onDragEnd?: (node: TreeNode, event: React.DragEvent) => void;
+  onDrop?: (dragNode: TreeNode, dropNode: TreeNode, event: React.DragEvent) => void;
+  showLines?: boolean;
+  showIcons?: boolean;
+}
+
+export interface TreeFilter {
+  key: string;
+  label: string;
+  type: 'text' | 'select' | 'checkbox' | 'date';
+  options?: { value: string; label: string }[];
+  value?: any;
+}
+
+// ============================================================================
+// TIMELINE COMPONENT
+// ============================================================================
+
+export interface TimelineProps extends DataDisplayBaseProps {
+  items: TimelineItem[];
+  mode?: 'left' | 'right' | 'alternate';
+  reverse?: boolean;
+  actions?: TimelineAction[];
+  onItemClick?: (item: TimelineItem) => void;
+  searchable?: boolean;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filterable?: boolean;
+  filters?: TimelineFilter[];
+  onFiltersChange?: (filters: TimelineFilter[]) => void;
+  showConnector?: boolean;
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface TimelineItem {
+  id: string;
+  title: string;
+  description?: string;
+  timestamp: string;
+  type?: 'event' | 'task' | 'user' | 'system';
+  status?: 'success' | 'warning' | 'error' | 'info' | 'pending' | 'processing' | 'completed';
+  icon?: React.ReactNode;
+  content?: React.ReactNode;
+  metadata?: {
+    author?: string;
+    category?: string;
+    tags?: string[];
+    [key: string]: any;
+  };
+  actions?: TimelineAction[];
+  disabled?: boolean;
+  data?: Record<string, any>;
+}
+
+export interface TimelineAction {
+  key: string;
+  label: string;
+  icon?: React.ReactNode;
+  onClick: (item: TimelineItem) => void;
+  disabled?: boolean;
+  variant?: 'default' | 'primary' | 'secondary' | 'danger';
+}
+
+export interface TimelineItemProps {
+  item: TimelineItem;
+  position: 'left' | 'right';
+  isLast: boolean;
+  mode: 'left' | 'right' | 'alternate';
+  actions: TimelineAction[];
+  onClick?: (item: TimelineItem) => void;
+  theme: string;
+  size: 'sm' | 'md' | 'lg';
+  variant: 'default' | 'bordered' | 'striped';
+  showConnector: boolean;
+}
+
+export interface TimelineFilter {
+  key: string;
+  label: string;
+  type: 'text' | 'select' | 'checkbox' | 'date';
+  options?: { value: string; label: string }[];
+  value?: any;
+}
+
+// ============================================================================
+// CHART COMPONENT
+// ============================================================================
+
+export interface ChartProps extends DataDisplayBaseProps {
+  type?: 'line' | 'bar' | 'pie' | 'doughnut' | 'area';
+  data: ChartData;
+  options?: ChartOptions;
+  height?: number | string;
+  width?: number | string;
+  responsive?: boolean;
+  showLegend?: boolean;
+  showValues?: boolean;
+  showGrid?: boolean;
+  animate?: boolean;
+  onDataPointClick?: (point: ChartDataPoint, index: number) => void;
+  onLegendClick?: (legend: ChartLegend, index: number) => void;
+  loading?: boolean;
+  error?: string | null;
+  emptyMessage?: string;
+}
+
+export interface ChartData {
+  labels: string[];
+  datasets: ChartDataset[];
+}
+
+export interface ChartDataset {
+  label: string;
+  data: (number | ChartDataPoint)[];
+  color?: string;
+  backgroundColor?: string | string[];
+  borderColor?: string | string[];
+  borderWidth?: number;
+  fill?: boolean;
+  tension?: number;
+  pointRadius?: number;
+  pointHoverRadius?: number;
+  pointBackgroundColor?: string | string[];
+  pointBorderColor?: string | string[];
+  pointBorderWidth?: number;
+  pointStyle?: string;
+  hidden?: boolean;
+}
+
+export interface ChartDataPoint {
+  label: string;
+  value: number;
+  datasetIndex: number;
+  index: number;
+  x: number;
+  y: number;
+}
+
+export interface ChartLegend {
+  text: string;
+  fillStyle: string;
+  strokeStyle: string;
+  lineWidth: number;
+  hidden: boolean;
+  index: number;
+}
+
+export interface ChartOptions {
+  title?: string;
+  subtitle?: string;
+  showPoints?: boolean;
+  showLabels?: boolean;
+  responsive?: boolean;
+  maintainAspectRatio?: boolean;
+  plugins?: {
+    title?: {
+      display?: boolean;
+      text?: string;
+      color?: string;
+      font?: {
+        family?: string;
+        size?: number;
+        weight?: string;
+      };
+    };
+    legend?: {
+      display?: boolean;
+      position?: 'top' | 'left' | 'bottom' | 'right';
+      labels?: {
+        color?: string;
+        font?: {
+          family?: string;
+          size?: number;
+          weight?: string;
+        };
+        usePointStyle?: boolean;
+        padding?: number;
+      };
+    };
+    tooltip?: {
+      enabled?: boolean;
+      mode?: 'index' | 'dataset' | 'point' | 'nearest' | 'x' | 'y';
+      intersect?: boolean;
+      backgroundColor?: string;
+      titleColor?: string;
+      bodyColor?: string;
+      borderColor?: string;
+      borderWidth?: number;
+    };
+  };
+  scales?: {
+    x?: {
+      display?: boolean;
+      title?: {
+        display?: boolean;
+        text?: string;
+        color?: string;
+        font?: {
+          family?: string;
+          size?: number;
+          weight?: string;
+        };
+      };
+      grid?: {
+        display?: boolean;
+        color?: string;
+        borderColor?: string;
+        borderWidth?: number;
+      };
+      ticks?: {
+        color?: string;
+        font?: {
+          family?: string;
+          size?: number;
+          weight?: string;
+        };
+      };
+    };
+    y?: {
+      display?: boolean;
+      title?: {
+        display?: boolean;
+        text?: string;
+        color?: string;
+        font?: {
+          family?: string;
+          size?: number;
+          weight?: string;
+        };
+      };
+      grid?: {
+        display?: boolean;
+        color?: string;
+        borderColor?: string;
+        borderWidth?: number;
+      };
+      ticks?: {
+        color?: string;
+        font?: {
+          family?: string;
+          size?: number;
+          weight?: string;
+        };
+      };
+    };
+  };
+  animation?: {
+    duration?: number;
+    easing?: string;
+  };
+  interaction?: {
+    mode?: 'nearest' | 'index' | 'dataset' | 'point' | 'x' | 'y';
+    intersect?: boolean;
+    axis?: 'x' | 'y';
+  };
+}
+
+// ============================================================================
+// EXPORT ALL TYPES
+// ============================================================================
+
+// All interfaces are already exported above, no need for additional export type