Planning · Youj

Installation & usage

npx @youj/cli add app-task-board

Also installs alert, app-page, avatar, avatar-stack, badge, button, icon-calendar, icon-list-checks, icon-message, icon-plus, kanban, segmented-meter, share-bar, skeleton, youj-ui-core.

The CLI copies the block to blocks/app/task-board.tsx with every component it uses, so it’s yours to edit.

Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:

taskBoard-view.tsx

'use client'

import { TaskBoard, type TaskBoardProps } from '@/blocks/app/task-board'

export function TaskBoardView({ columns, tasks, labelTones }: Pick<TaskBoardProps, 'columns' | 'tasks' | 'labelTones'>) {
  return (
    <TaskBoard
      columns={columns}
      tasks={tasks}
      labelTones={labelTones}
      copy={{ newTask: 'New task' }}
      onMove={async (move, tasks) => {
        // await your API here; the block shows progress until it settles
      }}
      onOpen={(task) => {
        // your code
      }}
      onCreate={() => {
        // your code
      }}
    />
  )
}

Reference

Props17 props, 2 types

Props

TaskBoard props
Prop	Type	Default
`embedded`	`boolean` A page in your app's frame: the shared page header (AppPage) and the frame's gutter, across the whole width. default true	`true`
`title`	`string` The page's heading. default 'My tasks'	`'My tasks'`
`headingLevel`	`1 \| 2 \| 3` The heading's level. default 1	`1`
`classNames`	`Partial<Record<'header' \| 'content', string>>` Extra classes for the header and the board.	–
`columns`	`KanbanColumn[]` The columns, left to right; a `limit` warns past it. default Backlog, In progress (4), In review and Done	`Backlog, In progress (4), In review and Done`
`tasks`	`BoardTask[]` The cards, each placed by its `column`. A new array replaces them. default Northwind's fifteen	`Northwind's fifteen`
`labelTones`	`Record<string, BoardTone>` Tints for your own labels, by label: a task's own `labelTone` still wins. Default: every label in one quiet neutral pill.	–
`sprint`	`BoardSprint \| null` The sprint over the board; null leaves it out. default Northwind's Sprint 14	`Northwind's Sprint 14`
`onMove`	`(move: KanbanMove<BoardTask>, tasks: BoardTask[]) => Promise<unknown> \| unknown` A card moved; receives the move and every task after it. Return a promise to put the card back if it rejects.	–
`onOpen`	`(task: BoardTask) => void` Enter, or a click, on a card.	–
`onCreate`	`() => void` The New task button.	–
`actions`	`ReactNode` The header's buttons, in place of New task.	–
`loading`	`boolean` Shows skeleton columns in place of the board. default false	`false`
`error`	`ReactNode` A load error, shown in place of the board with `onRetry`.	–
`onRetry`	`() => void` The error's "Try again".	–
`empty`	`ReactNode` Replaces the board when there are no tasks at all. Default: the board's empty columns.	–
`copy`	`Partial<BoardCopy>` Any of the page's strings, to rewrite or translate.	–

`BoardSprint`

BoardSprint props
Prop	Type	Default
`name`Required	`string`	–
`dates`Required	`string` "28 Sep – 9 Oct"	–
`goal`	`string`	–
`daysLeft`	`number`	–

`BoardTask`

BoardTask props
Prop	Type	Default
`key`	`string` The issue key, "ATL-142".	–
`project`	`string`	–
`label`	`string` The kind of work, as a tinted badge.	–
`labelTone`	`BoardTone` `'danger''default''secondary''warning''success'` The label's tint. Default: every label in one quiet neutral pill.	–
`assignee`	`string`	–
`priority`	`BoardPriority` `'urgent''high''medium''low'`	–
`due`	`string` "Today", "Tomorrow" or a date.	–
`points`	`number` Its estimate, in points: a chip on the card, and the sprint's progress counts them.	–
`subtasks`	`{ done: number; total: number }` Its checklist: a bar of cells and "3/5" on the card.	–
`comments`	`number` How many comments it has.	–
`people`	`string[]` Others working on it, beside the assignee.	–
`id`Required	`string`	–
`column`Required	`string`	–
`lane`	`string`	–
`title`Required	`string` Used in announcements ("Picked up 'Fix login'…").	–

Strings20 keys for copy

Built from10 components

Accessibilitylandmarks, keyboard, live regions

#Installation & usage

#Description

#Code

#Reference

Props

BoardSprint

BoardTask

Strings

Built from

Components used

#Accessibility

Installation & usage

Description

Code

Reference

`BoardSprint`

`BoardTask`

Accessibility