Issue View
One issue as a page or a quick-view drawer with an inline title, a rich description, a properties sidebar, checklist, sub-issues, linked pull requests, comments, activity, time and AI cost.
Code
<IssueView issue={issue} statuses={statuses} labels={labels} people={people} projects={projects} onUpdate={async (patch) => save(issue.id, patch)} thread={{ comments, onSubmit }}/>Projects & Work · beta
Live examples and controls: Issue View in the lab.
Install
npx shadcn@latest add https://docs.nasaqui.com/r/issue-view.jsonEverything about one issue in one place. It is presentational: you own the data and every change awaits your callback.
When to use
- The page for an issue, or the drawer opened from a board card or table row.
When not to use
- A list of issues: use
ProjectVieworDataTable.
Import
import { IssueView, IssueQuickView } from "@fadymondy/nasaq/web";Quick start
<IssueView
issue={issue}
statuses={statuses}
labels={labels}
people={people}
projects={projects}
onUpdate={async (patch) => save(issue.id, patch)}
thread={{ comments, onSubmit }}
/>Anatomy
IssueView data-slot="issue-view", a container query
├─ header key with copy, inline title, back button
├─ description RichTextEditor, saved on blur
├─ checklist, sub-issues, linked pull requests and commits
├─ tabs Comments, Activity, Time, AI cost (only the ones with data)
└─ properties status, priority, type, assignee, labels, estimate, due, project, parent
IssueQuickView a Sheet around IssueView variant="drawer"API
| Prop | Type | Default | Description |
|---|---|---|---|
issue | Issue | required | The issue. |
statuses / labels / people / projects | arrays | required | The choices for the properties. |
parentOptions | IssueRef[] | none | The issue and its descendants are left out. |
onUpdate | (patch) => Promise<...> | none | Save a property, the title or the description. Omit for read-only. |
checklist | { items, onToggle, onAdd, onRemove } | none | Shows the checklist. |
subIssues / onAddSubIssue / onOpenIssue | none | Sub-issues and opening one. | |
development | { repo, pulls, commits, runs } | none | Linked pull requests. |
thread | CommentThreadProps | none | Shows Comments. |
activity | { items, onSubmit, onToggleTask, onDelete } | none | Shows Activity. |
time | { entries, running, onStart, onStop, ... } | none | Shows Time. |
ai | { days, byModel, byProduct, byRun, run? } | none | Shows AI cost. |
variant | "page" | "drawer" | page | Sidebar beside the content, or stacked. |
onBack | () => void | none | Back button. |
labelsText | IssueViewLabels | en / ar | Every string. |
open / onOpenChange / onOpenFull | none | IssueQuickView only. |
IssueCard (also exported here) shows one issue as a board card: type, key, priority, title, labels, due date,
votes (a toggle with onVote), comments, attachments and the assignee. Props: issue, labels, people,
votes, voted, onVote(voted), comments, attachments, open, now, text. IssueBoard and
ProjectView's board use it.
Examples
- Drawer:
IssueQuickViewopened from a board card.
Accessibility
The title is a heading that becomes an input on click; Enter saves and Escape cancels. Property pickers are labelled selects; errors use role="alert". The drawer traps focus and returns it on close.
RTL & i18n
English and Arabic built in. Keys, dates and numbers stay left-to-right; the layout mirrors with logical classes.
Styling & tokens
Semantic tokens only. Overdue dates use the danger tokens.
Do / Don't
- Do return
{ error }so a failed change shows next to the field. - Do not pass tabs you cannot fill: leave the prop out and the tab is hidden.
Related
Lab
https://docs.nasaqui.com/?path=/docs/components-projects-work-issue-view--docs
Issue Board
A ready-made issue kanban. Issue cards with type, key, priority, labels, due date, votes, comments, attachments and assignee; search and assignee / reporter filters; a header with the count and New issue.
KanbanBoard
Controlled board of columns and draggable cards (dnd-kit sortable) with keyboard moves, localised announcements and RTL column flow.