Kanban board panel for visualizing Backlog.md tasks in the industry-themed panel framework
npm install @industry-theme/backlogmd-kanban-panelA Kanban board panel extension for visualizing Backlog.md tasks in the Principal ADE industry-themed panel framework.
- ๐ Kanban Board View - Visual task organization across status columns (To Do, In Progress, Done)
- ๐จ Industry Theme Integration - Fully styled with industry theme colors and typography
- ๐ท๏ธ Task Metadata - Display task labels, assignees, and priority indicators
- ๐ฏ Priority Color Coding - Visual priority indication with colored borders
- ๐ Task Descriptions - Truncated descriptions with full task details
- ๐งช Mock Data Support - Built-in mock data generator for testing
``bashInstall dependencies
bun install
Project Structure
`
src/
โโโ panels/
โ โโโ KanbanPanel.tsx # Main panel component
โ โโโ kanban/
โ โโโ backlog-types/ # Copied from Backlog.md
โ โ โโโ index.ts # Task type definitions
โ โ โโโ README.md # Attribution
โ โโโ backlog-utils/ # Copied from Backlog.md
โ โ โโโ board.ts # Board utilities
โ โ โโโ README.md # Attribution
โ โโโ components/ # Copied from Backlog.md
โ โ โโโ Board.tsx # Board component
โ โ โโโ TaskCard.tsx # Task card component
โ โ โโโ TaskColumn.tsx # Column component
โ โ โโโ README.md # Attribution
โ โโโ hooks/ # Custom hooks (future)
โ โโโ mocks/
โ โโโ mockData.ts # Mock data generator
โโโ index.tsx # Panel registration
โโโ types/
โโโ index.ts # Type re-exports
`Usage
$3
The panel is automatically registered when the package is loaded:
`typescript
import { panels } from '@principal-ade/kanban-panel';// Panel metadata
{
id: 'principal-ade.kanban-panel',
name: 'Kanban Board',
icon: '๐',
version: '0.1.0',
slices: ['fileTree']
}
`$3
The panel currently uses mock data for testing. The mock data generator creates sample tasks with:
- Different statuses (To Do, In Progress, Done)
- Priority levels (high, medium, low)
- Labels and assignees
- Descriptions and acceptance criteria
- Task dependencies
`typescript
import { generateMockTasks } from './panels/kanban/mocks/mockData';const tasks = generateMockTasks();
`Attribution
This panel incorporates code from Backlog.md:
- Source commit: 9b2b4aa4ce7c9dc454215419413109f3efb04708
- Source date: 2025-11-15
- License: MIT
- Author: Alex Gavrilescu (@MrLesk)
See individual README files in each directory for specific attribution details.
$3
The copied code is temporary. Once Backlog.md publishes
@backlog/core or similar packages, we will migrate to using the official packages. See KANBAN_PANEL_DESIGN.md for details.Development Roadmap
$3
- [x] Set up panel structure and basic layout
- [x] Create mock data generator for testing
- [x] Implement basic board component with static columns
- [x] Create task card component with basic styling
- [x] Adapt to industry theme colors and typography
$3
- [x] Add data fetching hook (
useKanbanData)
- [x] Implement task sorting and filtering (by priority, ordinal, date)
- [x] Create reusable KanbanColumn component
- [x] Integrate with industry theme system
- [x] Add error handling and loading states
- [x] Create Storybook stories for testing
- [ ] Implement Backlog.md markdown parser (Future)
- [ ] Add drag-and-drop functionality (Future)
- [ ] Handle status updates with file writes (Future)$3
- [ ] Task creation and editing
- [ ] Support for labels, assignees, priority
- [ ] Implement subtask relationships
- [ ] Add task detail modal/panel
- [ ] Handle dependencies visualization
$3
- [ ] Responsive design improvements
- [ ] Error handling and loading states
- [ ] Data persistence (write back to markdown)
- [ ] Panel configuration options
- [ ] Testing and documentation
Scripts
`bash
Build
bun run build # Full build (clean + bundle + types)
bun run build:panel # Build panel bundle only
bun run build:types # Generate TypeScript declarationsDevelopment
bun run dev # Watch mode for development
bun run typecheck # Type checking without emit
bun run storybook # Component development environmentCode Quality
bun run lint # Run ESLint
bun run lint:fix # Auto-fix ESLint issues
bun run format # Format with Prettier
bun run format:check # Check formattingTesting
bun run test # Run tests
bun run test:watch # Watch mode for tests
``- @principal-ade/panel-framework-core - Panel framework integration
- @principal-ade/industry-theme - Industry theme system
- React 19 - UI library
- TypeScript - Type safety
- lucide-react - Icon library
MIT - See LICENSE file for details
See CONTRIBUTING.md for development guidelines.
- Design Document - Detailed design and implementation plan
- Quick Start - Get started quickly
- Project Structure - Codebase organization