kanban

1"use client";
2 
3import type {
4  Announcements,
5  DndContextProps,
6  DragEndEvent,
7  DragOverEvent,
8  DragStartEvent,
9} from "@dnd-kit/core";
10import {
11  closestCenter,
12  DndContext,
13  DragOverlay,
14  KeyboardSensor,
15  MouseSensor,
16  TouchSensor,
17  useDroppable,
18  useSensor,
19  useSensors,
20} from "@dnd-kit/core";
21import { arrayMove, SortableContext, useSortable } from "@dnd-kit/sortable";
22import { CSS } from "@dnd-kit/utilities";
23import {
24  createContext,
25  type HTMLAttributes,
26  type ReactNode,
27  useContext,
28  useState,
29} from "react";
30import { createPortal } from "react-dom";
31import tunnel from "tunnel-rat";
32import { Card } from "@/components/ui/card";
33import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
34import { cn } from "@/lib/utils";
35 
36const t = tunnel();
37 
38export type { DragEndEvent } from "@dnd-kit/core";
39 
40type KanbanItemProps = {
41  id: string;
42  name: string;
43  column: string;
44} & Record<string, unknown>;
45 
46type KanbanColumnProps = {
47  id: string;
48  name: string;
49} & Record<string, unknown>;
50 
51type KanbanContextProps<
52  T extends KanbanItemProps = KanbanItemProps,
53  C extends KanbanColumnProps = KanbanColumnProps,
54> = {
55  columns: C[];
56  data: T[];
57  activeCardId: string | null;
58};
59 
60const KanbanContext = createContext<KanbanContextProps>({
61  columns: [],
62  data: [],
63  activeCardId: null,
64});
65 
66export type KanbanBoardProps = {
67  id: string;
68  children: ReactNode;
69  className?: string;
70};
71 
72export const KanbanBoard = ({ id, children, className }: KanbanBoardProps) => {
73  const { isOver, setNodeRef } = useDroppable({
74    id,
75  });
76 
77  return (
78    <div
79      className={cn(
80        "flex size-full min-h-40 flex-col divide-y overflow-hidden rounded-md border bg-secondary text-xs shadow-sm ring-2 transition-all",
81        isOver ? "ring-primary" : "ring-transparent",
82        className
83      )}
84      ref={setNodeRef}
85    >
86      {children}
87    </div>
88  );
89};
90 
91export type KanbanCardProps<T extends KanbanItemProps = KanbanItemProps> = T & {
92  children?: ReactNode;
93  className?: string;
94};
95 
96export const KanbanCard = <T extends KanbanItemProps = KanbanItemProps>({
97  id,
98  name,
99  children,
100  className,
101}: KanbanCardProps<T>) => {
102  const {
103    attributes,
104    listeners,
105    setNodeRef,
106    transition,
107    transform,
108    isDragging,
109  } = useSortable({
110    id,
111  });
112  const { activeCardId } = useContext(KanbanContext) as KanbanContextProps;
113 
114  const style = {
115    transition,
116    transform: CSS.Transform.toString(transform),
117  };
118 
119  return (
120    <>
121// … truncated