claude-task-master/apps/extension/src/components/ui/shadcn-io/kanban/index.tsx

'use client';

import { Card } from '@/components/ui/card';
import { cn } from '@/lib/utils';
import {
	DndContext,
	DragOverlay,
	MouseSensor,
	TouchSensor,
	rectIntersection,
	useDraggable,
	useDroppable,
	useSensor,
	useSensors
} from '@dnd-kit/core';
import type { DragEndEvent } from '@dnd-kit/core';
import type React from 'react';
import type { ReactNode } from 'react';

export type { DragEndEvent } from '@dnd-kit/core';

export type Status = {
	id: string;
	name: string;
	color: string;
};

export type Feature = {
	id: string;
	name: string;
	startAt: Date;
	endAt: Date;
	status: Status;
};

export type KanbanBoardProps = {
	id: Status['id'];
	children: ReactNode;
	className?: string;
};

export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => {
	const { isOver, setNodeRef } = useDroppable({ id });

	return (
		<div
			className={cn(
				'flex h-full min-h-40 flex-col gap-2 rounded-md border bg-secondary p-2 text-xs shadow-sm outline transition-all',
				isOver ? 'outline-primary' : 'outline-transparent',
				className
			)}
			ref={setNodeRef}
		>
			{children}
		</div>
	);
};

export type KanbanCardProps = Pick<Feature, 'id' | 'name'> & {
	index: number;
	parent: string;
	children?: ReactNode;
	className?: string;
	onClick?: (event: React.MouseEvent) => void;
	onDoubleClick?: (event: React.MouseEvent) => void;
};

export const KanbanCard = ({
	id,
	name,
	index,
	parent,
	children,
	className,
	onClick,
	onDoubleClick
}: KanbanCardProps) => {
	const { attributes, listeners, setNodeRef, transform, isDragging } =
		useDraggable({
			id,
			data: { index, parent }
		});

	return (
		<Card
			className={cn(
				'rounded-md p-3 shadow-sm',
				isDragging && 'cursor-grabbing opacity-0',
				!isDragging && 'cursor-pointer',
				className
			)}
			style={{
				transform: transform
					? `translateX(${transform.x}px) translateY(${transform.y}px)`
					: 'none'
			}}
			{...attributes}
			{...listeners}
			onClick={(e) => !isDragging && onClick?.(e)}
			onDoubleClick={onDoubleClick}
			ref={setNodeRef}
		>
			{children ?? <p className="m-0 font-medium text-sm">{name}</p>}
		</Card>
	);
};

export type KanbanCardsProps = {
	children: ReactNode;
	className?: string;
};

export const KanbanCards = ({ children, className }: KanbanCardsProps) => (
	<div className={cn('flex flex-1 flex-col gap-2', className)}>{children}</div>
);

export type KanbanHeaderProps =
	| {
			children: ReactNode;
	  }
	| {
			name: Status['name'];
			color: Status['color'];
			className?: string;
	  };

export const KanbanHeader = (props: KanbanHeaderProps) =>
	'children' in props ? (
		props.children
	) : (
		<div className={cn('flex shrink-0 items-center gap-2', props.className)}>
			<div
				className="h-2 w-2 rounded-full"
				style={{ backgroundColor: props.color }}
			/>
			<p className="m-0 font-semibold text-sm">{props.name}</p>
		</div>
	);

export type KanbanProviderProps = {
	children: ReactNode;
	onDragEnd: (event: DragEndEvent) => void;
	onDragStart?: (event: DragEndEvent) => void;
	onDragCancel?: () => void;
	className?: string;
	dragOverlay?: ReactNode;
};

export const KanbanProvider = ({
	children,
	onDragEnd,
	onDragStart,
	onDragCancel,
	className,
	dragOverlay
}: KanbanProviderProps) => {
	// Configure sensors with activation constraints to prevent accidental drags
	const sensors = useSensors(
		// Only start a drag if you've moved more than 8px
		useSensor(MouseSensor, {
			activationConstraint: { distance: 8 }
		}),
		// On touch devices, require a short press + small move
		useSensor(TouchSensor, {
			activationConstraint: { delay: 150, tolerance: 5 }
		})
	);

	return (
		<DndContext
			sensors={sensors}
			collisionDetection={rectIntersection}
			onDragEnd={onDragEnd}
			onDragStart={onDragStart}
			onDragCancel={onDragCancel}
		>
			<div
				className={cn(
					'grid w-full auto-cols-fr grid-flow-col gap-4',
					className
				)}
			>
				{children}
			</div>
			<DragOverlay>{dragOverlay}</DragOverlay>
		</DndContext>
	);
};