@moontra/moonui-pro/src/components/kanban/types.ts

Premium React components for MoonUI - Advanced UI library with 50+ pro components including performance, interactive, and gesture components

export interface KanbanAssignee {
  id: string
  name: string
  avatar?: string
  email?: string
}

export interface KanbanLabel {
  id: string
  name: string
  color: string
}

export interface KanbanChecklist {
  id: string
  title: string
  items: {
    id: string
    text: string
    completed: boolean
  }[]
}

export interface KanbanActivity {
  id: string
  user: KanbanAssignee
  action: string
  timestamp: Date
  details?: string
}

export interface KanbanCard {
  id: string
  title: string
  description?: string
  coverImage?: string
  assignees?: KanbanAssignee[]
  dueDate?: Date
  startDate?: Date
  priority?: 'low' | 'medium' | 'high' | 'urgent'
  tags?: string[]
  labels?: KanbanLabel[]
  attachments?: {
    id: string
    name: string
    type: string
    url: string
    size: number
  }[]
  comments?: number
  completed?: boolean
  progress?: number
  checklist?: KanbanChecklist
  activities?: KanbanActivity[]
  customFields?: Record<string, any>
  position: number
}

export interface KanbanColumn {
  id: string
  title: string
  color?: string
  cards: KanbanCard[]
  limit?: number
  collapsed?: boolean
  locked?: boolean
  template?: 'todo' | 'inProgress' | 'done' | 'custom'
}

export interface KanbanFilter {
  id: string
  name: string
  query: string
  assignees?: string[]
  labels?: string[]
  priority?: string[]
  tags?: string[]
  dueDate?: {
    from?: Date
    to?: Date
  }
}

export interface KanbanProps {
  columns: KanbanColumn[]
  onCardMove?: (cardId: string, fromColumn: string, toColumn: string, newPosition: number) => void
  onCardClick?: (card: KanbanCard) => void
  onCardEdit?: (card: KanbanCard) => void
  onCardDelete?: (card: KanbanCard) => void
  onCardUpdate?: (card: KanbanCard) => void
  onAddCard?: (columnId: string, card?: Partial<KanbanCard>) => void
  onAddColumn?: (column?: Partial<KanbanColumn>) => void
  onColumnUpdate?: (column: KanbanColumn) => void
  onColumnDelete?: (columnId: string) => void
  onBulkAction?: (action: string, cardIds: string[]) => void
  onExport?: (format: 'json' | 'csv') => void
  className?: string
  showAddColumn?: boolean
  showCardDetails?: boolean
  showFilters?: boolean
  showSearch?: boolean
  enableKeyboardShortcuts?: boolean
  cardTemplates?: Partial<KanbanCard>[]
  columnTemplates?: Partial<KanbanColumn>[]
  filters?: KanbanFilter[]
  defaultFilter?: string
  loading?: boolean
  disabled?: boolean
  labels?: KanbanLabel[]
  users?: KanbanAssignee[]
  
  // Card Render Customization
  renderCard?: (card: KanbanCard, column: KanbanColumn, provided: any) => React.ReactNode
  renderCardPreview?: (card: KanbanCard) => React.ReactNode
  renderCardBadge?: (card: KanbanCard) => React.ReactNode
  renderCardActions?: (card: KanbanCard) => React.ReactNode
  cardCompactMode?: boolean
  cardShowCoverImage?: boolean
  cardShowAssignees?: boolean
  cardShowLabels?: boolean
  cardShowProgress?: boolean
  cardDateFormat?: string
  cardMaxAssigneesToShow?: number
  
  // Add Card Customization
  renderAddCardButton?: (columnId: string) => React.ReactNode
  renderAddCardForm?: (columnId: string, onAdd: (card: Partial<KanbanCard>) => void, onCancel: () => void) => React.ReactNode
  addCardButtonText?: string | ((columnId: string) => string)
  addCardPosition?: 'top' | 'bottom'
  allowQuickAdd?: boolean
  quickAddFields?: ('title' | 'description' | 'assignee' | 'priority')[]
  validateCard?: (card: Partial<KanbanCard>) => { valid: boolean; errors?: string[] }
  onBeforeCardAdd?: (card: Partial<KanbanCard>) => Partial<KanbanCard> | false
  
  // Column Customization
  renderColumnHeader?: (column: KanbanColumn) => React.ReactNode
  renderColumnFooter?: (column: KanbanColumn) => React.ReactNode
  renderEmptyColumn?: (column: KanbanColumn) => React.ReactNode
  columnMenuActions?: Array<{
    label: string
    icon?: React.ReactNode
    action: (column: KanbanColumn) => void
    visible?: (column: KanbanColumn) => boolean
  }>
  allowColumnReorder?: boolean
  columnColorOptions?: string[]
  columnDefaultColor?: string
  
  // Drag & Drop Enhancement
  dragDisabled?: boolean | ((card: KanbanCard) => boolean)
  dropDisabled?: boolean | ((column: KanbanColumn) => boolean)
  dragPreview?: 'card' | 'compact' | 'custom'
  renderDragPreview?: (card: KanbanCard) => React.ReactNode
  canDrop?: (card: KanbanCard, targetColumn: KanbanColumn, position: number) => boolean
  onDragStart?: (card: KanbanCard, column: KanbanColumn) => void
  onDragEnd?: (card: KanbanCard, column: KanbanColumn) => void
  
  // UI/UX Customization
  theme?: 'default' | 'compact' | 'modern' | 'minimal'
  cardVariant?: 'default' | 'bordered' | 'elevated' | 'flat'
  enableAnimations?: boolean
  animationDuration?: number
  columnWidth?: number | 'auto'
  columnGap?: number
  cardGap?: number
  showTooltips?: boolean
  tooltipDelay?: number
}