Issue Board

Code

<IssueBoard  issues={issues}  statuses={statuses}  labels={labels}  people={people}  onMove={(id, statusId, index) => moveIssue(id, statusId, index)}  onOpen={(issue) => router.push(`/issues/${issue.key}`)}  onVote={(issue, voted) => vote(issue.id, voted)}  onCreate={() => setCreating(true)}/>

Projects & Work · beta

Live examples and controls: Issue Board in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/issue-board.json

KanbanBoard set up for issues. Each status is a column and each issue an IssueCard: type icon, key, priority, title, labels, due date (red when overdue), votes, comments, attachments and the assignee. Above the board sit a search box, assignee and reporter filters and a header with the count and New issue.

Filtering only hides cards. When a card is dropped into a filtered column, onMove gets its index among all the column's issues, so the hidden ones keep their order.

When to useCopy Anchor Link

• A project's or a product's issue board, a feedback board with voting, a bug triage board.

When not to useCopy Anchor Link

• Cards that are not issues: use KanbanBoard with your own renderCard.
• A long list to sort and edit in bulk: use ProjectView's list tab or DataTable.

ImportCopy Anchor Link

import { IssueBoard, IssueCard } from "@fadymondy/nasaq";

Quick startCopy Anchor Link

<IssueBoard
  issues={issues}
  statuses={statuses}
  labels={labels}
  people={people}
  onMove={(id, statusId, index) => moveIssue(id, statusId, index)}
  onOpen={(issue) => router.push(`/issues/${issue.key}`)}
  onVote={(issue, voted) => vote(issue.id, voted)}
  onCreate={() => setCreating(true)}
/>

AnatomyCopy Anchor Link

• Header: title, "12 of 40 issues", New issue (with onCreate).
• Toolbar: search (key, title, label names), Assignee, Reporter (when issues have a reporterId), Clear filters, your toolbar.
• Board: one column per status; IssueCards inside. Each card has a context menu: Open issue, Copy key, your cardActions.

APICopy Anchor Link

<IssueBoard>Copy Anchor Link

IssueCardCopy Anchor Link

Exported from issue-view. issue, labels, people, votes, voted, onVote(voted), comments, attachments, open (default true; false never shows overdue), now, text. Use it on its own or in KanbanBoard's renderCard.

HelpersCopy Anchor Link

filterIssues(issues, filter, labelName?), isIssueFilterActive(filter), EMPTY_ISSUE_FILTER and boardIndex(all, visibleIds, movedId, toColumn, toIndex). Pure; use them to filter the same way on a server.

ExamplesCopy Anchor Link

Feedback board. Pass votes/voted and onVote, and sort each column by votes before passing issues.

Server-side filtering. Use onFilterChange to refetch; pass the results as issues.

AccessibilityCopy Anchor Link

• The board is a labelled region; drag and drop works from the keyboard (Space to pick up, arrows, Space to drop) with spoken announcements from KanbanBoard.
• The vote button is a toggle (aria-pressed) named with the count. Its keys and presses do not start a drag.
• Priority, overdue and counts have text for screen readers, not only icons or colour.
• Keyboard users open an issue from the card's context menu (Shift+F10 or the Menu key), because Enter picks the card up.

RTL & i18nCopy Anchor Link

English and Arabic strings are built in; override with text. Columns flow right to left in Arabic. Issue keys stay left to right. Search folds Arabic letter forms, so "مراجعه" finds "مراجعة".

Styling & tokensCopy Anchor Link

Cards use bg-card, border-border and rounded-card. A voted button uses bg-nq-selected; overdue dates use text-nq-danger-text, today and soon text-nq-warning-text.

Do / Don'tCopy Anchor Link

• Do pass the full list and let the board filter, or filter on the server and pass the results.
• Don't re-sort cards on every vote while someone is dragging; apply the order after the drop.

RelatedCopy Anchor Link

kanban-board, issue-view, project-view, status-label-manager.

LabCopy Anchor Link

Projects & Work › Issue Board: Default, Feedback votes, Filtered, Arabic.