A Kanban board is a react app used for managing tasks using the drag-and-drop functionality provided by the @dnd-kit library. The Kanban board consists of columns and tasks, and users can drag tasks between columns.
Various components, libraries, and utilities are imported at the beginning of the file, including icons, React hooks (useMemo and useState), types (Column, Id, and Task), and several modules from the @dnd-kit/core and @dnd-kit/sortable libraries. Default Columns and Tasks:
The code defines default columns (defaultCols) and tasks (defaultTasks) for initializing the Kanban board. KanbanBoard Component:
The KanbanBoard component is a functional React component that uses the state hook (useState) to manage the columns, tasks, active column, and active task. It sets up the drag-and-drop context using the DndContext component provided by @dnd-kit/core. It also uses several related components such as DragOverlay, SortableContext, and PointerSensor for drag-and-drop functionality. Render Method:
The render method returns JSX that represents the structure of the Kanban board. Inside the DndContext, it maps over the columns and renders a ColumnContainer for each column. It also renders a button to add a new column. The DragOverlay is used to display a visual representation of the dragged column or task while dragging. Column and Task Manipulation Functions:
The component defines several functions for manipulating columns and tasks, such as creating, updating, and deleting them. Drag-and-Drop Event Handlers:
Event handlers (onDragStart, onDragEnd, and onDragOver) are defined to handle drag-and-drop events. These functions update the state of the columns and tasks based on the drag-and-drop interactions. generateId Function:
The generateId function is a utility function that generates a random ID for tasks and columns. Export:
The KanbanBoard component is exported as the default export of the module. Overall, this code sets up a basic Kanban board with drag-and-drop functionality, allowing users to manage tasks by moving them between columns. The @dnd-kit library is used for handling drag-and-drop interactions seamlessly.