@bimetal/kanban-react-components

The default React Kanban board for BIMETAL — a thin binding over the canonical @bimetal/kanban-headless controller. Every interaction decision (drag thresholds, drop indices, WIP rejection, undo) lives in the headless controller; this package owns only the DOM: hit-testing pointer drags, normalising keyboard events, and rendering.

Features

• Real drag-and-drop — pointer drag across and within columns, with a live drop-gap indicator. No per-card move buttons.
• Keyboard a11y — pick a card up with Space, move it with the arrow keys (←/→ across columns, ↑/↓ within), drop with Space/Enter, cancel with Esc. aria-grabbed reflects the held card.
• Columns — add, rename inline, reorder, delete (cards cascade), with per-column WIP limits that reject over-limit moves as an undo toast.
• Cards — title, description, labels; fully custom card bodies via renderCard while the drag/focus wrapper stays owned by the component.
• Filter, undo, theming — text filter over title/description/labels, a one-click undo toast, and a light/dark token set from @bimetal/kanban-themes.

Built on event sourcing: the whole board is one aggregate, every change is an event, and undo + full history come for free.

Usage

import { Kanban } from '@bimetal/kanban-react-components';
import { createKanbanStore } from '@bimetal/kanban-data';

const store = createKanbanStore();
// …seed the board…

function App() {
  return <Kanban store={store} boardId="board-1" />;
}

Custom card bodies:

<Kanban
  store={store}
  boardId="board-1"
  darkMode
  renderCard={(card) => <MyCard card={card} />}
/>

Props

| Prop | Type | Notes | |---|---|---| | store | KanbanStore | The board store. Immutable after mount. | | boardId | string | Which board to render. Immutable after mount. | | config | KanbanConfigInput? | Locale overrides, merged with defaults. | | darkMode | boolean? | Apply the dark token set. | | showFilter | boolean? | Show the toolbar filter (default true). | | renderCard | (card: Card) => ReactNode | Custom card body. | | onError | (err: unknown) => void | Infrastructure errors (a WIP rejection is an undo toast, not an error). |

License

Apache-2.0