Kanban Board

import { KanbanBoard } from 'fluxo-ui';
import type { KanbanCardData, KanbanColumnData } from 'fluxo-ui';

const columns: KanbanColumnData[] = [
  { id: 'backlog', title: 'Backlog', color: '#94a3b8' },
  { id: 'todo', title: 'To Do', color: '#3b82f6' },
  { id: 'in-progress', title: 'In Progress', color: '#f59e0b', limit: 3 },
  { id: 'review', title: 'Review', color: '#8b5cf6' },
  { id: 'done', title: 'Done', color: '#10b981' },
];

const cards: KanbanCardData[] = [
  {
    id: '1',
    title: 'Design landing page mockup',
    columnId: 'backlog',
    order: 0,
    priority: 'medium',
    labels: [{ id: 'design', text: 'Design', color: '#8b5cf6' }],
    assignee: { id: 'a1', name: 'Alice Martin' },
  },
  // ...more cards
];

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  showCardCount
  showColumnLimit
  showSearch
  allowCollapse
/>

<KanbanBoard
  columns={columns}
  cards={cards}
  cardSize="detailed"
  draggable
  showCardCount
  showColumnLimit
  allowCollapse
/>

// Card data for detailed view includes:
const card: KanbanCardData = {
  id: 'd1',
  title: 'Redesign dashboard',
  columnId: 'todo',
  order: 0,
  description: 'Update all components to match new brand.',
  priority: 'high',
  labels: [
    { id: 'design', text: 'Design', color: '#8b5cf6' },
    { id: 'frontend', text: 'Frontend', color: '#3b82f6' },
  ],
  assignees: [
    { id: 'a1', name: 'Alice Martin' },
    { id: 'a2', name: 'Bob Chen' },
  ],
  dueDate: new Date('2025-04-15'),
  progress: 30,
  subtaskCount: 12,
  subtaskCompleted: 4,
  commentCount: 8,
  attachmentCount: 3,
};

<KanbanBoard
  columns={columns}
  cards={cards}
  cardSize="compact"
  draggable
  showCardCount
  columnWidth={240}
/>

const columns: KanbanColumnData[] = [
  { id: 'todo', title: 'To Do', color: '#3b82f6' },
  { id: 'dev', title: 'Development', color: '#f59e0b', limit: 2 },
  { id: 'qa', title: 'QA', color: '#8b5cf6', limit: 2 },
  { id: 'done', title: 'Done', color: '#10b981' },
];

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  showCardCount
  showColumnLimit
/>

import { KanbanBoard } from 'fluxo-ui';
import type { KanbanColumnData, KanbanCardData, KanbanColumnId } from 'fluxo-ui';

const columns: KanbanColumnData[] = [
  { id: 'backlog', title: 'Backlog', color: '#94a3b8' },
  { id: 'todo', title: 'To Do', color: '#3b82f6' },
  { id: 'in-progress', title: 'In Progress', color: '#f59e0b' },
  { id: 'review', title: 'Code Review', color: '#8b5cf6', collapsed: true },
  { id: 'done', title: 'Done', color: '#10b981' },
];

// Set collapsed: true on a column to have it collapsed by default.
// Enable allowCollapse to show collapse/expand toggle in column headers.
// Collapsed columns shrink to ~40px with a vertically rotated title.
// Click on a collapsed column to expand it.

<KanbanBoard
  columns={columns}
  cards={cards}
  allowCollapse
  showCardCount
  onColumnCollapse={(columnId, collapsed) => {
    console.log(columnId, collapsed ? 'collapsed' : 'expanded');
  }}
/>

const cards: KanbanCardData[] = [
  {
    id: 'b1',
    title: 'Implement SSO integration',
    columnId: 'in-progress',
    order: 0,
    priority: 'high',
    blocked: true,
    color: '#ef4444',
    description: 'Blocked: Waiting for IdP credentials.',
  },
  {
    id: 'b2',
    title: 'Mobile push notifications',
    columnId: 'in-progress',
    order: 1,
    priority: 'medium',
    blocked: true,
  },
  // non-blocked cards...
];

<KanbanBoard
  columns={columns}
  cards={cards}
  cardSize="detailed"
  draggable
  showCardCount
/>

const columns: KanbanColumnData[] = [
  { id: 'new', title: 'New', color: '#3b82f6' },
  { id: 'active', title: 'Active', color: '#f59e0b' },
  { id: 'archived', title: 'Archived', color: '#94a3b8', locked: true },
];

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  allowAddCard
  showCardCount
/>

<KanbanBoard
  columns={columns}
  cards={cards}
  layout="vertical"
  draggable
  showCardCount
  allowCollapse
/>

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  showCardCount
  stickyColumnHeaders
  maxColumnHeight={300}
/>

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  showCardCount
  columnWidth={260}
  cardTemplate={(card) => (
    <div className="flex items-center gap-3 p-2">
      <span
        className={cn('w-2 h-2 rounded-full shrink-0', {
          'bg-red-500': card.priority === 'high' || card.priority === 'critical',
          'bg-yellow-500': card.priority === 'medium',
          'bg-green-500': card.priority === 'low',
        })}
      />
      <span className="text-sm font-medium truncate">
        {card.title}
      </span>
    </div>
  )}
/>

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  columnHeaderTemplate={(column, cardCount) => (
    <div className="flex items-center gap-2 px-3 py-2">
      <span
        className="w-3 h-3 rounded-full"
        style={{ backgroundColor: column.color }}
      />
      <span className="text-sm font-semibold flex-1">
        {column.title}
      </span>
      <span className="text-xs px-2 py-0.5 rounded-full bg-gray-100">
        {cardCount}
      </span>
    </div>
  )}
  emptyColumnTemplate={(column) => (
    <div className="text-center py-8 text-sm text-gray-400 italic">
      No items in {column.title}
    </div>
  )}
/>

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  showCardCount
  cardActionsTemplate={(card, column) => (
    <div className="flex items-center gap-1">
      <button
        className="px-2 py-0.5 text-xs rounded hover:bg-gray-100"
        onClick={() => console.log('Edit:', card.title)}
      >
        Edit
      </button>
      <button
        className="px-2 py-0.5 text-xs rounded hover:bg-gray-100"
        onClick={() => console.log('Archive:', card.title)}
      >
        Archive
      </button>
    </div>
  )}
/>

const [cards, setCards] = useState<KanbanCardData[]>(initialCards);
const [columns, setColumns] = useState<KanbanColumnData[]>(initialColumns);

<KanbanBoard
  columns={columns}
  cards={cards}
  draggable
  columnDraggable
  allowAddCard
  allowAddColumn
  allowDeleteCard
  allowDeleteColumn
  allowEditColumn
  allowCollapse
  showCardCount
  showColumnLimit
  showSearch
  onCardMove={(e) => {
    setCards(prev => {
      const without = prev.filter(c => c.id !== e.cardId);
      const target = without
        .filter(c => c.columnId === e.toColumnId)
        .sort((a, b) => a.order - b.order);
      const others = without.filter(c => c.columnId !== e.toColumnId);
      const moved = { ...e.card, columnId: e.toColumnId, order: e.toIndex };
      target.splice(e.toIndex, 0, moved);
      return [...others, ...target.map((c, i) => ({ ...c, order: i }))];
    });
  }}
  onCardReorder={(e) => {
    setCards(prev => {
      const other = prev.filter(c => c.columnId !== e.columnId);
      return [...other, ...e.cards.map((c, i) => ({ ...c, order: i }))];
    });
  }}
  onCardCreate={(e) => {
    setCards(prev => [...prev, {
      id: `new-${Date.now()}`,
      title: e.title,
      columnId: e.columnId,
      order: prev.filter(c => c.columnId === e.columnId).length,
    }]);
  }}
  onCardDelete={(e) => setCards(prev => prev.filter(c => c.id !== e.card.id))}
  onColumnCreate={(e) => setColumns(prev => [...prev, { id: `col-${Date.now()}`, title: e.title }])}
  onColumnDelete={(e) => {
    setColumns(prev => prev.filter(c => c.id !== e.column.id));
    setCards(prev => prev.filter(c => c.columnId !== e.column.id));
  }}
  onColumnUpdate={(e) => setColumns(prev =>
    prev.map(c => c.id === e.column.id ? { ...c, [e.field]: e.value } : c)
  )}
  onColumnReorder={(e) => setColumns(e.columns)}
/>