Kanban

import { KanbanBoard } from '@hanzo/ui'

export function Default() {
  const [board, setBoard] = useState(seed)
  return (
    <YStack width="100%" height={520}>
      <KanbanBoard board={board} onUpdateBoard={setBoard} />
    </YStack>
  )
}

export function ColumnLimit() {
  const [board, setBoard] = useState<KanbanBoardData>(() => {
    const next = seed()
    next.columns[0].limit = 1
    return next
  })
  return (
    <YStack width="100%" height={420}>
      <KanbanBoard board={board} onUpdateBoard={setBoard} />
    </YStack>
  )
}

export function Empty() {
  const [board, setBoard] = useState<KanbanBoardData>({
    id: 'board-2',
    title: 'New Board',
    labels: [],
    columns: [
      { id: 'todo', title: 'To Do', cards: [] },
      { id: 'doing', title: 'In Progress', cards: [] },
      { id: 'done', title: 'Done', cards: [] },
    ],
  })
  return (
    <YStack width="100%" height={420}>
      <KanbanBoard board={board} onUpdateBoard={setBoard} />
    </YStack>
  )
}

Types

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

export type KanbanPriority = 'low' | 'medium' | 'high' | 'urgent'

export interface KanbanCard {
  id: string
  title: string
  description?: string
  labels?: KanbanLabel[]
  priority?: KanbanPriority
  assignee?: string
  dueDate?: string
  createdAt: string
  updatedAt: string
}

export interface KanbanColumn {
  id: string
  title: string
  cards: KanbanCard[]
  limit?: number
}

export interface KanbanBoardData {
  id: string
  title: string
  columns: KanbanColumn[]
  labels: KanbanLabel[]
}

export type KanbanBoardProps = {
  board: KanbanBoardData
  onUpdateBoard: (board: KanbanBoardData) => void
  className?: string
}

Exports