shadcn.io is not affiliated with official shadcn/ui
QA Workflow Kanban Block for Solid
A QA board with Awaiting QA, In testing, Passed and Failed columns, Pass and Fail buttons on each build under test, and a gate that only takes a verdict from In testing.
Installation
Overview
Run a test pass with this QA board for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four columns, Awaiting QA, In testing, Passed and Failed, and ten builds under test. Each card shows what is being tested, its build number in code, an outline Badge, and the tester's initials; the header sentence counts the builds waiting and in testing and works out the pass rate from the verdicts so far. Cards in In testing carry a Pass and a Fail Button that record the verdict. The gate is the rule: a card reaches Passed or Failed only from In testing, so a build nobody has tested can't be waved through, and the refusal says where the card is and what to do. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a verdict can be sent back to In testing to run again. A polite status line reports each move and Reset restores the board. On a phone the columns scroll sideways in one named region. For release testing, acceptance checks and any pass or fail queue.
FAQ
How do I fill it with my own builds?
Edit COLUMNS and START. A card has an id, the column it starts in, a title, a build (shown in code) and a tester whose initials are drawn. The pass rate is worked out from how many cards are in Passed and Failed, so it needs no field of its own. Builds and testers in the demo are made up.
Why can't I drop a card into Passed or Failed?
A verdict is recorded from In testing only. refusalOf refuses a card entering Passed or Failed from any other column, from the drag, the keyboard or the menu, and the message names the column the card is in. Move it to In testing first, then press Pass or Fail, or drag it on. Sending a verdict back to In testing is always allowed.
What do Pass and Fail do?
They call the same move a drop makes, so the gate, the counts, the status line and focus behave the same. Each button is named with the build ("Pass: Team invite by link"). After the move, focus lands on the card in its new column. To store the result, send the card and its verdict from put.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column, and swap in right-to-left languages), Home and End jump to the ends, Space drops it and Escape puts it back. The rule applies to every step, and each step is announced in the status line.
What stays in the demo?
Everything: the verdicts live in the component's state, nothing is saved, and a reload or Reset restores the starting run. To keep results, save them from put and load them into START; enforce the gate on your server too.
How does it look on a phone?
The columns scroll sideways with the next column showing, each column scrolls inside the board's fixed height, and nothing changes size when a card moves or a move is refused. Touch drags from the grip only, so the board still scrolls; the card's menu is the other way to move it.