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

# 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

Registering the Panel

The panel is automatically registered when the package is loaded:

import { panels } from '@principal-ade/kanban-panel';

// Panel metadata
{
  id: 'principal-ade.kanban-panel',
  name: 'Kanban Board',
  icon: '📋',
  version: '0.1.0',
  slices: ['fileTree']
}

Mock Data

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

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.

Migration Plan

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

✅ Phase 1: Foundation (Complete)

• [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

✅ Phase 2: Core Functionality (Complete)

• [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)

📋 Phase 3: Advanced Features

• [ ] Task creation and editing
• [ ] Support for labels, assignees, priority
• [ ] Implement subtask relationships
• [ ] Add task detail modal/panel
• [ ] Handle dependencies visualization

🎨 Phase 4: Polish & Integration

• [ ] Responsive design improvements
• [ ] Error handling and loading states
• [ ] Data persistence (write back to markdown)
• [ ] Panel configuration options
• [ ] Testing and documentation

Scripts

# 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