Kanban Panel for Industry Theme Framework

A Kanban board panel extension for visualizing Backlog.md tasks in the Principal ADE industry-themed panel framework.

Features

- 📋 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

Installation

``bash


Install dependencies

bun install

Build the panel

bun run build

Run in development mode with watch

bun run dev

Run Storybook for component development

bun run storybook
`

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 declarations

Development

bun run dev # Watch mode for development
bun run typecheck # Type checking without emit
bun run storybook # Component development environment

Code 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 formatting

Testing

bun run test # Run tests
bun run test:watch # Watch mode for tests
``

Dependencies

- @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

License

MIT - See LICENSE file for details

Contributing

See CONTRIBUTING.md for development guidelines.

Documentation

- Design Document - Detailed design and implementation plan
- Quick Start - Get started quickly
- Project Structure - Codebase organization