@btst/stack 1.11.0 → 1.12.0

package/src/plugins/kanban/client/components/forms/board-form.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Textarea } from "@workspace/ui/components/textarea";
+import { Label } from "@workspace/ui/components/label";
+import { useBoardMutations } from "../../hooks/kanban-hooks";
+import type { SerializedBoard } from "../../../types";
+
+interface BoardFormProps {
+	board?: SerializedBoard;
+	onClose: () => void;
+	onSuccess: (boardId: string) => void;
+}
+
+export function BoardForm({ board, onClose, onSuccess }: BoardFormProps) {
+	const isEditing = !!board;
+	const { createBoard, updateBoard, isCreating, isUpdating } =
+		useBoardMutations();
+
+	const [name, setName] = useState(board?.name || "");
+	const [description, setDescription] = useState(board?.description || "");
+	const [error, setError] = useState<string | null>(null);
+
+	const isPending = isCreating || isUpdating;
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setError(null);
+
+		if (!name.trim()) {
+			setError("Name is required");
+			return;
+		}
+
+		try {
+			if (isEditing && board) {
+				await updateBoard(board.id, { name, description });
+				onSuccess(board.id);
+			} else {
+				const newBoard = await createBoard({ name, description });
+				if (newBoard?.id) {
+					onSuccess(newBoard.id);
+				}
+			}
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-4">
+			<div className="space-y-2">
+				<Label htmlFor="name">Name *</Label>
+				<Input
+					id="name"
+					value={name}
+					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+						setName(e.target.value)
+					}
+					placeholder="e.g., Project Alpha"
+					disabled={isPending}
+				/>
+			</div>
+
+			<div className="space-y-2">
+				<Label htmlFor="description">Description</Label>
+				<Textarea
+					id="description"
+					value={description}
+					onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+						setDescription(e.target.value)
+					}
+					placeholder="Describe your board..."
+					disabled={isPending}
+					rows={3}
+				/>
+			</div>
+
+			{error && (
+				<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+					{error}
+				</div>
+			)}
+
+			<div className="flex gap-2 pt-2">
+				<Button type="submit" disabled={isPending}>
+					{isPending
+						? isEditing
+							? "Updating..."
+							: "Creating..."
+						: isEditing
+							? "Update Board"
+							: "Create Board"}
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					onClick={onClose}
+					disabled={isPending}
+				>
+					Cancel
+				</Button>
+			</div>
+		</form>
+	);
+}

package/src/plugins/kanban/client/components/forms/column-form.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Label } from "@workspace/ui/components/label";
+import { useColumnMutations } from "../../hooks/kanban-hooks";
+import type { SerializedColumn } from "../../../types";
+
+interface ColumnFormProps {
+	boardId: string;
+	columnId?: string;
+	column?: SerializedColumn;
+	onClose: () => void;
+	onSuccess: () => void;
+}
+
+export function ColumnForm({
+	boardId,
+	columnId,
+	column,
+	onClose,
+	onSuccess,
+}: ColumnFormProps) {
+	const isEditing = !!columnId;
+	const { createColumn, updateColumn, isCreating, isUpdating } =
+		useColumnMutations();
+
+	const [title, setTitle] = useState(column?.title || "");
+	const [error, setError] = useState<string | null>(null);
+
+	const isPending = isCreating || isUpdating;
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setError(null);
+
+		if (!title.trim()) {
+			setError("Title is required");
+			return;
+		}
+
+		try {
+			if (isEditing && columnId) {
+				await updateColumn(columnId, { title });
+			} else {
+				await createColumn({ title, boardId });
+			}
+			onSuccess();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-4">
+			<div className="space-y-2">
+				<Label htmlFor="title">Title *</Label>
+				<Input
+					id="title"
+					value={title}
+					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+						setTitle(e.target.value)
+					}
+					placeholder="e.g., To Do"
+					disabled={isPending}
+				/>
+			</div>
+
+			{error && (
+				<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+					{error}
+				</div>
+			)}
+
+			<div className="flex gap-2 pt-2">
+				<Button type="submit" disabled={isPending}>
+					{isPending
+						? isEditing
+							? "Updating..."
+							: "Creating..."
+						: isEditing
+							? "Update Column"
+							: "Create Column"}
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					onClick={onClose}
+					disabled={isPending}
+				>
+					Cancel
+				</Button>
+			</div>
+		</form>
+	);
+}

package/src/plugins/kanban/client/components/forms/task-form.tsx

@@ -0,0 +1,274 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2 } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import { Input } from "@workspace/ui/components/input";
+import { Label } from "@workspace/ui/components/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@workspace/ui/components/select";
+import { MinimalTiptapEditor } from "@workspace/ui/components/minimal-tiptap";
+import SearchSelect from "@workspace/ui/components/search-select";
+import { useTaskMutations, useSearchUsers } from "../../hooks/kanban-hooks";
+import { PRIORITY_OPTIONS } from "../../../utils";
+import type {
+	SerializedColumn,
+	SerializedTask,
+	Priority,
+} from "../../../types";
+
+interface TaskFormProps {
+	columnId: string;
+	boardId: string;
+	taskId?: string;
+	task?: SerializedTask;
+	columns: SerializedColumn[];
+	onClose: () => void;
+	onSuccess: () => void;
+	onDelete?: () => void;
+}
+
+export function TaskForm({
+	columnId,
+	boardId,
+	taskId,
+	task,
+	columns,
+	onClose,
+	onSuccess,
+	onDelete,
+}: TaskFormProps) {
+	const isEditing = !!taskId;
+	const {
+		createTask,
+		updateTask,
+		moveTask,
+		isCreating,
+		isUpdating,
+		isDeleting,
+		isMoving,
+	} = useTaskMutations();
+
+	const [title, setTitle] = useState(task?.title || "");
+	const [description, setDescription] = useState(task?.description || "");
+	const [priority, setPriority] = useState<Priority>(
+		task?.priority || "MEDIUM",
+	);
+	const [selectedColumnId, setSelectedColumnId] = useState(
+		task?.columnId || columnId,
+	);
+	const [assigneeId, setAssigneeId] = useState<string>(task?.assigneeId || "");
+	const [error, setError] = useState<string | null>(null);
+
+	// Fetch available users for assignment
+	const { data: users = [] } = useSearchUsers("", boardId);
+	const userOptions = [
+		{ value: "", label: "Unassigned" },
+		...users.map((user) => ({ value: user.id, label: user.name })),
+	];
+
+	const isPending = isCreating || isUpdating || isDeleting || isMoving;
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		setError(null);
+
+		if (!title.trim()) {
+			setError("Title is required");
+			return;
+		}
+
+		try {
+			if (isEditing && taskId) {
+				const isColumnChanging =
+					task?.columnId && selectedColumnId !== task.columnId;
+
+				if (isColumnChanging) {
+					// When changing columns, we need two operations:
+					// 1. Update task properties (title, description, priority, assigneeId)
+					// 2. Move task to new column with proper order calculation
+					//
+					// To avoid partial failure confusion, we attempt both operations
+					// but provide clear messaging if one succeeds and the other fails.
+
+					// First update the task properties (title, description, priority, assigneeId)
+					// If this fails, nothing is saved and the outer catch handles it
+					await updateTask(taskId, {
+						title,
+						description,
+						priority,
+						assigneeId: assigneeId || null,
+					});
+
+					// Then move the task to the new column with calculated order
+					// Place at the end of the destination column
+					try {
+						const targetColumn = columns.find((c) => c.id === selectedColumnId);
+						const targetTasks = targetColumn?.tasks || [];
+						const targetOrder =
+							targetTasks.length > 0
+								? Math.max(...targetTasks.map((t) => t.order)) + 1
+								: 0;
+
+						await moveTask(taskId, selectedColumnId, targetOrder);
+					} catch (moveErr) {
+						// Properties were saved but column move failed
+						// Provide specific error message about partial success
+						const moveErrorMsg =
+							moveErr instanceof Error ? moveErr.message : "Unknown error";
+						setError(
+							`Task properties were saved, but moving to the new column failed: ${moveErrorMsg}. ` +
+								`You can try dragging the task to the desired column.`,
+						);
+						// Don't call onSuccess since the operation wasn't fully completed
+						// but also don't throw - we want to show the specific error
+						return;
+					}
+				} else {
+					// Same column - just update the task properties
+					await updateTask(taskId, {
+						title,
+						description,
+						priority,
+						columnId: selectedColumnId,
+						assigneeId: assigneeId || null,
+					});
+				}
+			} else {
+				await createTask({
+					title,
+					description,
+					priority,
+					columnId: selectedColumnId,
+					assigneeId: assigneeId || undefined,
+				});
+			}
+			onSuccess();
+		} catch (err) {
+			setError(err instanceof Error ? err.message : "An error occurred");
+		}
+	};
+
+	return (
+		<form onSubmit={handleSubmit} className="space-y-4">
+			<div className="space-y-2">
+				<Label htmlFor="title">Title *</Label>
+				<Input
+					id="title"
+					value={title}
+					onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+						setTitle(e.target.value)
+					}
+					placeholder="e.g., Fix login bug"
+					disabled={isPending}
+				/>
+			</div>
+
+			<div className="grid grid-cols-2 gap-4">
+				<div className="space-y-2">
+					<Label htmlFor="priority">Priority</Label>
+					<Select
+						value={priority}
+						onValueChange={(v: string) => setPriority(v as Priority)}
+					>
+						<SelectTrigger>
+							<SelectValue placeholder="Select priority" />
+						</SelectTrigger>
+						<SelectContent>
+							{PRIORITY_OPTIONS.map((option) => (
+								<SelectItem key={option.value} value={option.value}>
+									{option.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div className="space-y-2">
+					<Label htmlFor="column">Column</Label>
+					<Select value={selectedColumnId} onValueChange={setSelectedColumnId}>
+						<SelectTrigger>
+							<SelectValue placeholder="Select column" />
+						</SelectTrigger>
+						<SelectContent>
+							{columns.map((col) => (
+								<SelectItem key={col.id} value={col.id}>
+									{col.title}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+			</div>
+
+			<div className="space-y-2">
+				<Label htmlFor="assignee">Assignee</Label>
+				<SearchSelect
+					options={userOptions}
+					value={assigneeId}
+					onChange={setAssigneeId}
+					placeholder="Select assignee"
+					emptyMessage="No users found"
+				/>
+			</div>
+
+			<div className="space-y-2">
+				<Label>Description</Label>
+				<MinimalTiptapEditor
+					value={description}
+					onChange={(value) =>
+						setDescription(typeof value === "string" ? value : "")
+					}
+					output="markdown"
+					placeholder="Describe the task..."
+					editable={!isPending}
+					className="min-h-[150px]"
+				/>
+			</div>
+
+			{error && (
+				<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md">
+					{error}
+				</div>
+			)}
+
+			<div className="flex justify-between pt-2">
+				<div className="flex gap-2">
+					<Button type="submit" disabled={isPending}>
+						{isPending
+							? isEditing
+								? "Updating..."
+								: "Creating..."
+							: isEditing
+								? "Update Task"
+								: "Create Task"}
+					</Button>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={onClose}
+						disabled={isPending}
+					>
+						Cancel
+					</Button>
+				</div>
+				{isEditing && onDelete && (
+					<Button
+						type="button"
+						variant="destructive"
+						onClick={onDelete}
+						disabled={isPending}
+					>
+						<Trash2 className="mr-2 h-4 w-4" />
+						Delete
+					</Button>
+				)}
+			</div>
+		</form>
+	);
+}

package/src/plugins/kanban/client/components/index.tsx

@@ -0,0 +1,21 @@
+// Pages
+export { BoardsListPageComponent } from "./pages/boards-list-page";
+export { BoardPageComponent } from "./pages/board-page";
+export { NewBoardPageComponent } from "./pages/new-board-page";
+export { NotFoundPage } from "./pages/404-page";
+
+// Shared
+export { PageWrapper } from "./shared/page-wrapper";
+export { EmptyState } from "./shared/empty-state";
+export { DefaultError } from "./shared/default-error";
+export { KanbanBoard } from "./shared/kanban-board";
+export { ColumnContent } from "./shared/column-content";
+export { TaskCard } from "./shared/task-card";
+
+// Forms
+export { BoardForm } from "./forms/board-form";
+export { ColumnForm } from "./forms/column-form";
+export { TaskForm } from "./forms/task-form";
+
+// Loading
+export { BoardsListSkeleton, BoardSkeleton } from "./loading";

package/src/plugins/kanban/client/components/loading/board-skeleton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function BoardSkeleton() {
+	return (
+		<div className="container mx-auto py-8 px-4">
+			<div className="w-full flex items-center justify-between mb-8">
+				<div className="flex items-center gap-4">
+					<Skeleton className="h-5 w-5" />
+					<div>
+						<Skeleton className="h-9 w-48" />
+						<Skeleton className="h-5 w-64 mt-2" />
+					</div>
+				</div>
+				<Skeleton className="h-10 w-28" />
+			</div>
+			<div className="grid gap-4 md:grid-cols-3">
+				{Array.from({ length: 3 }).map((_, colIdx) => (
+					<div
+						key={colIdx}
+						className="rounded-lg border bg-zinc-100 dark:bg-zinc-900 p-2.5"
+					>
+						<div className="flex items-center gap-2 mb-4">
+							<Skeleton className="h-8 w-8" />
+							<Skeleton className="h-6 w-24" />
+							<Skeleton className="h-5 w-8" />
+						</div>
+						<div className="space-y-2">
+							{Array.from({ length: 3 }).map((_, taskIdx) => (
+								<div key={taskIdx} className="rounded-md border bg-card p-3">
+									<div className="flex items-center gap-2 mb-2">
+										<Skeleton className="h-6 w-6" />
+										<Skeleton className="h-5 flex-1" />
+										<Skeleton className="h-5 w-16" />
+									</div>
+									<div className="flex items-center justify-between">
+										<Skeleton className="h-4 w-20" />
+										<Skeleton className="h-4 w-16" />
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/plugins/kanban/client/components/loading/boards-list-skeleton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { Skeleton } from "@workspace/ui/components/skeleton";
+import { Card, CardContent, CardHeader } from "@workspace/ui/components/card";
+
+export function BoardsListSkeleton() {
+	return (
+		<div className="container mx-auto py-8 px-4">
+			<div className="w-full flex items-center justify-between mb-8">
+				<div>
+					<Skeleton className="h-9 w-48" />
+					<Skeleton className="h-5 w-64 mt-2" />
+				</div>
+				<Skeleton className="h-10 w-32" />
+			</div>
+			<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+				{Array.from({ length: 6 }).map((_, i) => (
+					<Card key={i}>
+						<CardHeader>
+							<Skeleton className="h-6 w-3/4" />
+							<Skeleton className="h-4 w-full mt-2" />
+						</CardHeader>
+						<CardContent>
+							<div className="flex items-center justify-between">
+								<Skeleton className="h-4 w-20" />
+								<Skeleton className="h-4 w-24" />
+							</div>
+						</CardContent>
+					</Card>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/plugins/kanban/client/components/loading/index.tsx

@@ -0,0 +1,2 @@
+export { BoardsListSkeleton } from "./boards-list-skeleton";
+export { BoardSkeleton } from "./board-skeleton";

package/src/plugins/kanban/client/components/pages/404-page.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { Button } from "@workspace/ui/components/button";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { KanbanPluginOverrides } from "../../overrides";
+
+export function NotFoundPage() {
+	const { navigate: overrideNavigate } =
+		usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const navigate =
+		overrideNavigate ||
+		((path: string) => {
+			window.location.href = path;
+		});
+
+	return (
+		<div
+			className="flex min-h-[400px] flex-col items-center justify-center text-center"
+			data-testid="empty-state"
+		>
+			<h2 className="text-2xl font-bold mb-2">Page Not Found</h2>
+			<p className="text-muted-foreground mb-6">
+				The page you're looking for doesn't exist.
+			</p>
+			<Button onClick={() => navigate("/pages/kanban")}>Back to Boards</Button>
+		</div>
+	);
+}