Advanced

Power-user components — Kanban, Gantt, Rich Editor, Command Bar, Filters, Bulk Actions.

Advanced components are the largest, most opinionated pieces in the library. They're the ones you'd otherwise build over a sprint and then maintain forever. Each one ships with keyboard shortcuts, accessibility, theming, and saved-state hooks.

`CommandBar`

⌘K palette. Searchable, groupable, with shortcut hints + recent items.

import { CommandBar } from '@otfdashkit/ui'

<CommandBar
  open={open}
  onOpenChange={setOpen}
  placeholder="Search or run command..."
  groups={[
    {
      heading: 'Navigation',
      items: [
        { label: 'Dashboard', shortcut: 'g d', onSelect: () => router.push('/dashboard') },
        { label: 'Projects',  shortcut: 'g p', onSelect: () => router.push('/projects') },
      ],
    },
    {
      heading: 'Actions',
      items: [
        { label: 'New issue', shortcut: 'c',   onSelect: openNewIssue },
        { label: 'Invite teammate',           onSelect: openInvite },
      ],
    },
  ]}
/>

Bind ⌘K globally:

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault()
      setOpen((o) => !o)
    }
  }
  window.addEventListener('keydown', onKey)
  return () => window.removeEventListener('keydown', onKey)
}, [])

`Filters`

Linear-style filter chips bar — add/remove filters, autocomplete values, save filter sets.

<Filters
  fields={[
    { id: 'status',   label: 'Status',   type: 'enum',  options: ['Open', 'In progress', 'Done'] },
    { id: 'assignee', label: 'Assignee', type: 'user' },
    { id: 'priority', label: 'Priority', type: 'enum',  options: ['Low', 'Medium', 'High'] },
  ]}
  value={filters}
  onChange={setFilters}
/>

`BulkActions`

Sticky bottom bar that appears when one or more rows are selected. Designed to be wired into DataTable.

<BulkActions
  count={selectedIds.length}
  actions={[
    { label: 'Assign',   icon: <UserPlus />, onClick: openAssignSheet },
    { label: 'Tag',      icon: <Tag />,      onClick: openTagSheet },
    { label: 'Archive',  icon: <Archive />,  onClick: archiveSelected, tone: 'destructive' },
  ]}
  onClear={() => setSelectedIds([])}
/>

`Kanban`

Five-column board with drag-reorder, group-by switching, optional WIP limits. Backed by @dnd-kit/core.

<Kanban
  columns={[
    { id: 'backlog', title: 'Backlog' },
    { id: 'todo',    title: 'To do' },
    { id: 'doing',   title: 'In progress' },
    { id: 'review',  title: 'Review' },
    { id: 'done',    title: 'Done' },
  ]}
  cards={cards}
  onCardMove={(cardId, toCol, toIndex) => updateCardPosition(cardId, toCol, toIndex)}
  renderCard={(card) => <TaskCard {...card} />}
/>

`Gantt`

Time-grid Gantt with day/week/month zoom, drag-resize, dependency lines.

<Gantt
  tasks={tasks}
  zoom="week"
  onTaskUpdate={updateTask}
  onTaskCreate={createTask}
/>

`RichEditor`

ProseMirror-based rich-text editor with bold / italic / lists / links / code / image. Slot-based toolbar — extend or trim as needed.

<RichEditor
  value={doc}
  onChange={setDoc}
  toolbar={['bold', 'italic', 'h1', 'h2', 'list-ul', 'list-ol', 'link', 'code']}
  placeholder="Write something..."
/>