A reusable task management package with Kanban board, story points, and sprint planning
npm install @archeon.ai/taskboard-corebash
npm install @archeon.ai/taskboard-core
or
yarn add @archeon.ai/taskboard-core
`
Quick Start
$3
`tsx
import React from 'react';
import { TaskProvider, TaskBoard } from '@taskboard/core';
function App() {
return (
teamMembers: [
{ id: 'john', name: 'John Doe', capacity_hours_per_week: 40 },
{ id: 'jane', name: 'Jane Smith', capacity_hours_per_week: 40 },
],
projects: [
{ id: 'project1', name: 'Project Alpha' },
{ id: 'project2', name: 'Project Beta' },
],
}}
>
tasks={[]}
onTaskCreate={(data) => console.log('Create task:', data)}
onTaskUpdate={(id, data) => console.log('Update task:', id, data)}
onTaskMove={(data) => console.log('Move task:', data)}
/>
);
}
`
$3
`tsx
import React from 'react';
import { TaskProvider, TaskBoard, SupabaseAdapter } from '@taskboard/core';
const supabaseAdapter = new SupabaseAdapter({
url: 'your-supabase-url',
anonKey: 'your-supabase-anon-key',
});
function App() {
return (
adapter: supabaseAdapter,
teamMembers: [
{ id: 'john', name: 'John Doe' },
{ id: 'jane', name: 'Jane Smith' },
],
}}
>
tasks={[]}
onTaskCreate={(data) => console.log('Create task:', data)}
onTaskUpdate={(id, data) => console.log('Update task:', id, data)}
onTaskMove={(data) => console.log('Move task:', data)}
/>
);
}
`
Components
$3
The main Kanban board component with drag-and-drop functionality.
`tsx
import { TaskBoard } from '@taskboard/core';
tasks={tasks}
onTaskMove={handleTaskMove}
onTaskCreate={handleTaskCreate}
onTaskUpdate={handleTaskUpdate}
onTaskDelete={handleTaskDelete}
onTaskView={handleTaskView}
isAdmin={true}
loading={false}
error={null}
/>;
`
Props:
- project: Project - Project identifier
- tasks: Task[] - Array of tasks
- onTaskMove?: (data: TaskMoveData) => void - Handle task movement
- onTaskCreate?: (data: CreateTaskData) => void - Handle task creation
- onTaskUpdate?: (taskId: string, data: UpdateTaskData) => void - Handle task updates
- onTaskDelete?: (taskId: string) => void - Handle task deletion
- onTaskView?: (task: Task) => void - Handle task viewing
- isAdmin?: boolean - Admin permissions
- loading?: boolean - Loading state
- error?: string - Error message
$3
Individual task display component.
`tsx
import { TaskCard } from '@taskboard/core';
onEdit={handleEdit}
onDelete={handleDelete}
onStatusChange={handleStatusChange}
onView={handleView}
isEditable={true}
showActions={true}
/>;
`
$3
Modal for creating new tasks.
`tsx
import { CreateTaskModal } from '@taskboard/core';
onClose={() => setIsModalOpen(false)}
onCreate={handleCreateTask}
project="exe"
teamMembers={teamMembers}
loading={isCreating}
/>;
`
$3
Sprint planning and capacity calculation widget.
`tsx
import { SprintCalculator } from '@taskboard/core';
teamSize={4}
workingHoursPerWeek={40}
sprintDurationWeeks={2}
onSprintUpdate={handleSprintUpdate}
/>;
`
Hooks
$3
Fetch tasks with filtering and sorting.
`tsx
import { useTasks } from '@taskboard/core';
const {
data: tasks,
isLoading,
error,
} = useTasks({
project: 'exe',
status: 'in_progress',
owner: 'john',
});
`
$3
Create new tasks with optimistic updates.
`tsx
import { useCreateTask } from '@taskboard/core';
const createTask = useCreateTask();
const handleCreate = () => {
createTask.mutate({
title: 'New Task',
description: 'Task description',
owner: 'john',
department: 'tech',
priority_level: 'p2',
hours_needed: 8,
project: 'exe',
});
};
`
$3
Update existing tasks with optimistic updates.
`tsx
import { useUpdateTask } from '@taskboard/core';
const updateTask = useUpdateTask();
const handleUpdate = (taskId: string) => {
updateTask.mutate({
id: taskId,
data: {
status: 'completed',
estimated_completion: 100,
},
});
};
`
$3
Handle drag-and-drop task movement.
`tsx
import { useMoveTask } from '@taskboard/core';
const moveTask = useMoveTask();
const handleMove = (
taskId: string,
newPriority: PriorityLevel,
newOrder: number
) => {
moveTask.mutate({
taskId,
newPriority,
newOrder,
newStatus: 'in_progress',
});
};
`
Configuration
$3
`tsx
interface TaskBoardConfig {
storyPoints: number[]; // [1, 2, 3, 5, 8, 10, 15, 20, 25, 30, 40]
priorities: PriorityLevel[]; // ['p0', 'p1', 'p2', 'p3', 'p4', 'p5']
statuses: TaskStatus[]; // ['backlog', 'in_progress', 'completed', 'cancelled']
teamMembers: TeamMember[]; // Team member definitions
projects: ProjectInfo[]; // Project definitions
workingHoursPerWeek?: number; // Default: 40
sprintDurationWeeks?: number; // Default: 2
}
`
$3
`tsx
const customConfig = {
storyPoints: [1, 2, 5, 8, 13, 21], // Fibonacci sequence
priorities: ['urgent', 'high', 'medium', 'low'],
teamMembers: [
{ id: 'dev1', name: 'Developer 1', capacity_hours_per_week: 40 },
{ id: 'dev2', name: 'Developer 2', capacity_hours_per_week: 35 },
],
projects: [
{ id: 'frontend', name: 'Frontend Development' },
{ id: 'backend', name: 'Backend Development' },
],
workingHoursPerWeek: 40,
sprintDurationWeeks: 2,
};
{/ Your components /} ;
`
Story Points System
The package includes a comprehensive story points system:
- 0.25 Points = 1 hour (micro task)
- 0.5 Points = 2 hours (tiny task)
- 1 Point = 4 hours (half day)
- 2 Points = 8 hours (1 day)
- 3 Points = 12 hours (1.5 days)
- 5 Points = 20 hours (2.5 days)
- 8 Points = 32 hours (4 days)
- 10 Points = 40 hours (1 week)
- 15 Points = 60 hours (1.5 weeks)
- 20 Points = 80 hours (2 weeks)
$3
`tsx
import {
storyPointsToHours,
hoursToStoryPoints,
getStoryPointsDescription,
getStoryPointsColor,
} from '@archeon.ai/taskboard-core';
const hours = storyPointsToHours(5); // 20
const points = hoursToStoryPoints(16); // 4
const description = getStoryPointsDescription(8); // "Tarea grande, casi 1 semana (32h)"
const color = getStoryPointsColor(10); // "#f97316"
`
Priority System
Six priority levels with color coding:
- P0 (Critical) - Red (#ef4444)
- P1 (High) - Orange (#f97316)
- P2 (Medium-High) - Yellow (#eab308)
- P3 (Medium) - Green (#22c55e)
- P4 (Low) - Blue (#3b82f6)
- P5 (Backlog) - Gray (#6b7280)
Database Schema
The package includes a complete PostgreSQL schema with:
- Tasks table with all necessary fields
- Proper indexes for performance
- Row Level Security (RLS) policies
- Audit trail with task history
- Soft delete support
- Automatic timestamp management
See database/schema.sql for the complete schema.
API Integration
$3
`tsx
import { SupabaseAdapter } from '@taskboard/core';
const adapter = new SupabaseAdapter({
url: 'https://your-project.supabase.co',
anonKey: 'your-anon-key',
});
// Use with TaskProvider
{/ Your components /} ;
`
$3
`tsx
import { TaskService } from '@taskboard/core';
const taskService = new TaskService({
baseUrl: 'https://your-api.com',
apiKey: 'your-api-key',
});
// Use with hooks
const { data: tasks } = useTasks();
`
Styling
The package uses Tailwind CSS with custom component classes. Import the styles:
`tsx
import '@taskboard/core/dist/styles.css';
`
$3
You can customize the appearance by overriding CSS variables or using Tailwind's configuration:
`css
/ Override priority colors /
.priority-p0 {
@apply bg-red-600;
}
.priority-p1 {
@apply bg-orange-600;
}
`
TypeScript Support
Full TypeScript support with comprehensive type definitions:
`tsx
import {
Task,
CreateTaskData,
UpdateTaskData,
TaskMoveData,
} from '@taskboard/core';
const task: Task = {
id: 'uuid',
int: 1,
title: 'Task Title',
// ... other properties
};
`
Examples
Check the examples/` directory for complete implementation examples: