Kanban Board

Usage

import { KanbanBoard } from '@wdzyi/ui';

<KanbanBoard
  columns={[
    { id: 'todo', title: 'To do' },
    { id: 'doing', title: 'Doing' },
    { id: 'done', title: 'Done', done: true },
  ]}
  cards={tasks}
  onMove={(cardId, columnId, index) => moveTask(cardId, columnId, index)}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

columnsKanbanBoardColumn[]

Left to right, each with an id and a title. Mark the one for finished work done, and its cards get a green tick.

cardsKanbanBoardCard[]

Every card, with its id, its title, the column it’s in, a meta such as when it’s due, and who has it, drawn as their Pixel Avatar. Within a column they’re shown in the order given.

onMove(cardId: string, columnId: string, index: number) => void

Called when a card lands somewhere new, with its column and its place there, counting from 0.

labelstring = 'Board'

Names the board for screen readers.

classNamestring

Added to the board, for its width. It fills whatever it’s in.

Notes

• Taken, a card rises to 103% and turns 1.5° in 200ms, leaving a gap where it was. The cards in the column it’s over move apart on a 360ms spring, and letting go settles it on a 520ms one, from wherever it was carried, turning square as its shadow shortens.
• Where it lands is worked out from where everything was when it was taken, so the room opening never moves the target. The counts are Number Pop’s, and a card landing in a done column draws its green tick.
• Every card is a button that opens Move to, with the columns and its own ticked. The arrows, Home and End move through them, and Enter moves the card to the top of one, with focus going too. Escape shuts the menu.
• All three columns stay side by side at any width. Under 150px a card drops its meta and avatar and its title takes two lines, which keeps the board legible on a phone.
• With reduced motion, cards change places without gliding or turning.