@pixpilot/shadcn-kanban 0.0.0

package/dist/utils/kanban-keyboard-coordinates.cjs

@@ -0,0 +1,64 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let __dnd_kit_core = require("@dnd-kit/core");
+__dnd_kit_core = require_rolldown_runtime.__toESM(__dnd_kit_core);
+
+//#region src/utils/kanban-keyboard-coordinates.ts
+/** Which candidates an arrow key may move onto, relative to the dragged rect. */
+const DIRECTION_FILTERS = {
+	[__dnd_kit_core.KeyboardCode.Down]: (collisionRect, rect) => collisionRect.top < rect.top,
+	[__dnd_kit_core.KeyboardCode.Up]: (collisionRect, rect) => collisionRect.top > rect.top,
+	[__dnd_kit_core.KeyboardCode.Left]: (collisionRect, rect) => collisionRect.left > rect.left,
+	[__dnd_kit_core.KeyboardCode.Right]: (collisionRect, rect) => collisionRect.left < rect.left
+};
+/**
+* Keyboard coordinate getter for the Kanban board, adapted from dnd-kit's
+* multiple-containers example.
+*
+* The stock `sortableKeyboardCoordinates` also targets the dragged card's own
+* column drop zone, whose left edge sits just beside the card, so arrow keys
+* could never leave the column. Here cards target other cards and empty
+* columns only, and column drags target other columns.
+*/
+const kanbanKeyboardCoordinates = (event, { context }) => {
+	const matchesDirection = DIRECTION_FILTERS[event.code];
+	if (!matchesDirection) return void 0;
+	event.preventDefault();
+	const { active, collisionRect, droppableRects, droppableContainers } = context;
+	if (!active || !collisionRect) return void 0;
+	const draggingColumn = active.data.current?.type === "column-sortable";
+	const enabled = droppableContainers.getEnabled();
+	const columnHasCards = (columnId) => enabled.some((entry) => {
+		const data = entry.data.current;
+		return data?.type === "item" && data.item?.columnId === columnId;
+	});
+	const isCandidate = (entry) => {
+		if (entry.id === active.id) return false;
+		const type = entry.data.current?.type;
+		if (draggingColumn) return type === "column-sortable";
+		if (type === "column-sortable") return false;
+		return !(type === "column" && columnHasCards(String(entry.id)));
+	};
+	const candidates = enabled.reduce((accumulator, container) => {
+		const rect = droppableRects.get(container.id);
+		if (rect && isCandidate(container) && matchesDirection(collisionRect, rect)) accumulator.push({
+			container,
+			rect
+		});
+		return accumulator;
+	}, []);
+	const closestId = (0, __dnd_kit_core.getFirstCollision)((0, __dnd_kit_core.closestCenter)({
+		active,
+		collisionRect,
+		droppableRects,
+		droppableContainers: candidates.map(({ container }) => container),
+		pointerCoordinates: null
+	}), "id");
+	const winner = candidates.find(({ container }) => container.id === closestId);
+	return winner ? {
+		x: winner.rect.left,
+		y: winner.rect.top
+	} : void 0;
+};
+
+//#endregion
+exports.kanbanKeyboardCoordinates = kanbanKeyboardCoordinates;

package/dist/utils/kanban-keyboard-coordinates.js

@@ -0,0 +1,62 @@
+import { KeyboardCode, closestCenter, getFirstCollision } from "@dnd-kit/core";
+
+//#region src/utils/kanban-keyboard-coordinates.ts
+/** Which candidates an arrow key may move onto, relative to the dragged rect. */
+const DIRECTION_FILTERS = {
+	[KeyboardCode.Down]: (collisionRect, rect) => collisionRect.top < rect.top,
+	[KeyboardCode.Up]: (collisionRect, rect) => collisionRect.top > rect.top,
+	[KeyboardCode.Left]: (collisionRect, rect) => collisionRect.left > rect.left,
+	[KeyboardCode.Right]: (collisionRect, rect) => collisionRect.left < rect.left
+};
+/**
+* Keyboard coordinate getter for the Kanban board, adapted from dnd-kit's
+* multiple-containers example.
+*
+* The stock `sortableKeyboardCoordinates` also targets the dragged card's own
+* column drop zone, whose left edge sits just beside the card, so arrow keys
+* could never leave the column. Here cards target other cards and empty
+* columns only, and column drags target other columns.
+*/
+const kanbanKeyboardCoordinates = (event, { context }) => {
+	const matchesDirection = DIRECTION_FILTERS[event.code];
+	if (!matchesDirection) return void 0;
+	event.preventDefault();
+	const { active, collisionRect, droppableRects, droppableContainers } = context;
+	if (!active || !collisionRect) return void 0;
+	const draggingColumn = active.data.current?.type === "column-sortable";
+	const enabled = droppableContainers.getEnabled();
+	const columnHasCards = (columnId) => enabled.some((entry) => {
+		const data = entry.data.current;
+		return data?.type === "item" && data.item?.columnId === columnId;
+	});
+	const isCandidate = (entry) => {
+		if (entry.id === active.id) return false;
+		const type = entry.data.current?.type;
+		if (draggingColumn) return type === "column-sortable";
+		if (type === "column-sortable") return false;
+		return !(type === "column" && columnHasCards(String(entry.id)));
+	};
+	const candidates = enabled.reduce((accumulator, container) => {
+		const rect = droppableRects.get(container.id);
+		if (rect && isCandidate(container) && matchesDirection(collisionRect, rect)) accumulator.push({
+			container,
+			rect
+		});
+		return accumulator;
+	}, []);
+	const closestId = getFirstCollision(closestCenter({
+		active,
+		collisionRect,
+		droppableRects,
+		droppableContainers: candidates.map(({ container }) => container),
+		pointerCoordinates: null
+	}), "id");
+	const winner = candidates.find(({ container }) => container.id === closestId);
+	return winner ? {
+		x: winner.rect.left,
+		y: winner.rect.top
+	} : void 0;
+};
+
+//#endregion
+export { kanbanKeyboardCoordinates };

package/dist/utils/move-kanban-item.cjs

@@ -0,0 +1,28 @@
+
+//#region src/utils/move-kanban-item.ts
+/**
+* Returns a new item list with one card placed relative to the current drop target.
+* The input is never mutated, so previews and final drops can use the same drag snapshot.
+*/
+function moveKanbanItem({ items, activeId, overId, targetColumnId, insertAfter, overIsColumn }) {
+	const activeItem = items.find((item) => item.id === activeId);
+	if (!activeItem) return items;
+	const next = items.filter((item) => item.id !== activeId);
+	const movedItem = {
+		...activeItem,
+		columnId: targetColumnId
+	};
+	if (!overIsColumn) {
+		const overIndex = next.findIndex((item) => item.id === overId);
+		if (overIndex !== -1) {
+			next.splice(overIndex + Number(insertAfter), 0, movedItem);
+			return next;
+		}
+	}
+	const lastIndexInColumn = next.reduce((last, item, index) => item.columnId === targetColumnId ? index : last, -1);
+	next.splice(lastIndexInColumn === -1 ? next.length : lastIndexInColumn + 1, 0, movedItem);
+	return next;
+}
+
+//#endregion
+exports.moveKanbanItem = moveKanbanItem;

package/dist/utils/move-kanban-item.js

@@ -0,0 +1,27 @@
+//#region src/utils/move-kanban-item.ts
+/**
+* Returns a new item list with one card placed relative to the current drop target.
+* The input is never mutated, so previews and final drops can use the same drag snapshot.
+*/
+function moveKanbanItem({ items, activeId, overId, targetColumnId, insertAfter, overIsColumn }) {
+	const activeItem = items.find((item) => item.id === activeId);
+	if (!activeItem) return items;
+	const next = items.filter((item) => item.id !== activeId);
+	const movedItem = {
+		...activeItem,
+		columnId: targetColumnId
+	};
+	if (!overIsColumn) {
+		const overIndex = next.findIndex((item) => item.id === overId);
+		if (overIndex !== -1) {
+			next.splice(overIndex + Number(insertAfter), 0, movedItem);
+			return next;
+		}
+	}
+	const lastIndexInColumn = next.reduce((last, item, index) => item.columnId === targetColumnId ? index : last, -1);
+	next.splice(lastIndexInColumn === -1 ? next.length : lastIndexInColumn + 1, 0, movedItem);
+	return next;
+}
+
+//#endregion
+export { moveKanbanItem };

package/dist/utils/replace-state.cjs

@@ -0,0 +1,15 @@
+
+//#region src/utils/replace-state.ts
+/**
+* Reducer for controlled values that are replaced wholesale.
+*
+* Used with `useReducer` instead of `useState` so prop mirroring happens via a
+* dispatch, which React treats as an ordinary update even when triggered from
+* an effect during a drag.
+*/
+function replaceState(_current, next) {
+	return next;
+}
+
+//#endregion
+exports.replaceState = replaceState;

package/dist/utils/replace-state.js

@@ -0,0 +1,14 @@
+//#region src/utils/replace-state.ts
+/**
+* Reducer for controlled values that are replaced wholesale.
+*
+* Used with `useReducer` instead of `useState` so prop mirroring happens via a
+* dispatch, which React treats as an ordinary update even when triggered from
+* an effect during a drag.
+*/
+function replaceState(_current, next) {
+	return next;
+}
+
+//#endregion
+export { replaceState };

package/dist/utils/resolve-column-id.cjs

@@ -0,0 +1,25 @@
+const require_column_sortable_id = require('./column-sortable-id.cjs');
+
+//#region src/utils/resolve-column-id.ts
+/** Whether an id addresses a column as a whole rather than a single card. */
+function isColumnDroppableId(id, columnIds) {
+	return columnIds.has(String(id)) || require_column_sortable_id.isColumnSortableId(id);
+}
+/**
+* Resolves any droppable id — a card, a column drop zone, or a column-sortable
+* handle — to the column it belongs to. Returns `undefined` for ids that match
+* nothing on the board (e.g. a card that was removed mid-drag).
+*/
+function resolveColumnId(id, columnIds, items) {
+	const key = String(id);
+	if (columnIds.has(key)) return key;
+	if (require_column_sortable_id.isColumnSortableId(id)) {
+		const columnId = require_column_sortable_id.extractColumnId(id);
+		return columnIds.has(columnId) ? columnId : void 0;
+	}
+	return items.find((item) => item.id === id)?.columnId;
+}
+
+//#endregion
+exports.isColumnDroppableId = isColumnDroppableId;
+exports.resolveColumnId = resolveColumnId;

package/dist/utils/resolve-column-id.js

@@ -0,0 +1,24 @@
+import { extractColumnId, isColumnSortableId } from "./column-sortable-id.js";
+
+//#region src/utils/resolve-column-id.ts
+/** Whether an id addresses a column as a whole rather than a single card. */
+function isColumnDroppableId(id, columnIds) {
+	return columnIds.has(String(id)) || isColumnSortableId(id);
+}
+/**
+* Resolves any droppable id — a card, a column drop zone, or a column-sortable
+* handle — to the column it belongs to. Returns `undefined` for ids that match
+* nothing on the board (e.g. a card that was removed mid-drag).
+*/
+function resolveColumnId(id, columnIds, items) {
+	const key = String(id);
+	if (columnIds.has(key)) return key;
+	if (isColumnSortableId(id)) {
+		const columnId = extractColumnId(id);
+		return columnIds.has(columnId) ? columnId : void 0;
+	}
+	return items.find((item) => item.id === id)?.columnId;
+}
+
+//#endregion
+export { isColumnDroppableId, resolveColumnId };

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "@pixpilot/shadcn-kanban",
+  "type": "module",
+  "version": "0.0.0",
+  "packageManager": "pnpm@10.33.0",
+  "description": "Accessible drag-and-drop Kanban board built with shadcn/ui and dnd-kit.",
+  "author": "m.doaie <m.doaie@hotmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/pixpilot/shadcn-components",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/pixpilot/shadcn-components.git",
+    "directory": "packages/shadcn-kanban"
+  },
+  "bugs": {
+    "url": "https://github.com/pixpilot/shadcn-components/issues"
+  },
+  "keywords": [
+    "kanban",
+    "board",
+    "drag-and-drop",
+    "dnd-kit",
+    "shadcn",
+    "react"
+  ],
+  "sideEffects": false,
+  "exports": "./src/index.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "exports": {
+      ".": {
+        "types": "./dist/index.d.ts",
+        "import": "./dist/index.js",
+        "require": "./dist/index.cjs"
+      }
+    },
+    "main": "./dist/index.cjs",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts"
+  },
+  "scripts": {
+    "prepublishOnly": "pnpm run clean && pnpm run build",
+    "clean": "git clean -xdf .cache .turbo dist",
+    "clean:all": "pnpm clean && git clean -xdf node_modules",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
+    "test": "vitest --run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test:ui": "vitest --ui --watch",
+    "test:ui:coverage": "vitest --ui --coverage --watch --hookTimeout=30000 --coverage.thresholds.lines=0 --coverage.thresholds.functions=0 --coverage.thresholds.branches=0 --coverage.thresholds.statements=0",
+    "test:coverage": "vitest --coverage",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint",
+    "format": "prettier --check . --ignore-path ../../.gitignore --ignore-path ../../.prettierignore"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@pixpilot/shadcn-ui": "workspace:*",
+    "@tanstack/react-virtual": "^3.13.23",
+    "lucide-react": "catalog:prod"
+  },
+  "devDependencies": {
+    "@internal/eslint-config": "workspace:*",
+    "@internal/prettier-config": "workspace:*",
+    "@internal/tsconfig": "workspace:*",
+    "@internal/tsdown-config": "workspace:*",
+    "@internal/vitest-config": "workspace:*",
+    "@storybook/react": "catalog:dev",
+    "@testing-library/jest-dom": "catalog:dev",
+    "@testing-library/react": "catalog:dev",
+    "@types/node": "catalog:dev",
+    "@types/react": "catalog:dev",
+    "@types/react-dom": "catalog:dev",
+    "@vitest/coverage-v8": "catalog:dev",
+    "@vitest/ui": "catalog:dev",
+    "eslint": "catalog:dev",
+    "jsdom": "catalog:dev",
+    "postcss": "catalog:dev",
+    "react": "catalog:prod",
+    "react-dom": "catalog:prod",
+    "tailwindcss": "catalog:dev",
+    "tsdown": "catalog:dev",
+    "typescript": "catalog:dev",
+    "typescript-eslint": "catalog:dev",
+    "vitest": "catalog:dev"
+  },
+  "prettier": "@internal/prettier-config"
+}