@btst/stack 1.11.0 → 1.12.0

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { BoardsListSkeleton } from "../loading/boards-list-skeleton";
+import { NotFoundPage } from "./404-page";
+
+const BoardsListPage = lazy(() =>
+	import("./boards-list-page.internal").then((m) => ({
+		default: m.BoardsListPage,
+	})),
+);
+
+export function BoardsListPageComponent() {
+	return (
+		<ComposedRoute
+			path="/kanban"
+			PageComponent={BoardsListPage}
+			ErrorComponent={DefaultError}
+			LoadingComponent={BoardsListSkeleton}
+			NotFoundComponent={NotFoundPage}
+			onError={(error) => console.error("BoardsListPage error:", error)}
+		/>
+	);
+}

package/src/plugins/kanban/client/components/pages/new-board-page.internal.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { ArrowLeft } from "lucide-react";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardHeader,
+	CardTitle,
+} from "@workspace/ui/components/card";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { KanbanPluginOverrides } from "../../overrides";
+import { BoardForm } from "../forms/board-form";
+import { PageWrapper } from "../shared/page-wrapper";
+
+export function NewBoardPage() {
+	const { Link: OverrideLink, navigate: overrideNavigate } =
+		usePluginOverrides<KanbanPluginOverrides>("kanban");
+	const navigate =
+		overrideNavigate ||
+		((path: string) => {
+			window.location.href = path;
+		});
+	const Link = OverrideLink || "a";
+
+	const handleSuccess = (boardId: string) => {
+		navigate(`/pages/kanban/${boardId}`);
+	};
+
+	return (
+		<PageWrapper data-testid="new-board-page">
+			<div className="flex items-center gap-4 mb-8">
+				<Link
+					href="/pages/kanban"
+					className="text-muted-foreground hover:text-foreground"
+				>
+					<ArrowLeft className="h-5 w-5" />
+				</Link>
+				<div>
+					<h1 className="text-3xl font-bold" data-testid="page-header">
+						Create New Board
+					</h1>
+					<p className="text-muted-foreground mt-1">
+						Set up a new kanban board for your project
+					</p>
+				</div>
+			</div>
+
+			<Card className="max-w-2xl">
+				<CardHeader>
+					<CardTitle>Board Details</CardTitle>
+					<CardDescription>
+						Enter the details for your new kanban board.
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<BoardForm
+						onClose={() => navigate("/pages/kanban")}
+						onSuccess={handleSuccess}
+					/>
+				</CardContent>
+			</Card>
+		</PageWrapper>
+	);
+}

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

@@ -0,0 +1,26 @@
+"use client";
+
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { BoardsListSkeleton } from "../loading/boards-list-skeleton";
+import { NotFoundPage } from "./404-page";
+
+const NewBoardPage = lazy(() =>
+	import("./new-board-page.internal").then((m) => ({
+		default: m.NewBoardPage,
+	})),
+);
+
+export function NewBoardPageComponent() {
+	return (
+		<ComposedRoute
+			path="/kanban/new"
+			PageComponent={NewBoardPage}
+			ErrorComponent={DefaultError}
+			LoadingComponent={BoardsListSkeleton}
+			NotFoundComponent={NotFoundPage}
+			onError={(error) => console.error("NewBoardPage error:", error)}
+		/>
+	);
+}

package/src/plugins/kanban/client/components/shared/column-content.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import { memo } from "react";
+import { GripVertical, MoreVertical, Pencil, Plus, Trash2 } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import { Badge } from "@workspace/ui/components/badge";
+import * as Kanban from "@workspace/ui/components/kanban";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@workspace/ui/components/dropdown-menu";
+import { TaskCard } from "./task-card";
+import type { SerializedColumn, SerializedTask } from "../../../types";
+
+interface ColumnContentProps {
+	column: SerializedColumn & { tasks: SerializedTask[] };
+	onAddTask: () => void;
+	onEditTask: (taskId: string) => void;
+	onEditColumn: () => void;
+	onDeleteColumn: () => void;
+}
+
+function ColumnContentComponent({
+	column,
+	onAddTask,
+	onEditTask,
+	onEditColumn,
+	onDeleteColumn,
+}: ColumnContentProps) {
+	const hasTasks = column.tasks && column.tasks.length > 0;
+
+	return (
+		<Kanban.Column key={column.id} value={column.id}>
+			<div className="flex items-center">
+				<Kanban.ColumnHandle asChild>
+					<Button variant="ghost" size="icon">
+						<GripVertical className="h-4 w-4" />
+					</Button>
+				</Kanban.ColumnHandle>
+				<div className="flex items-center gap-2 flex-1">
+					<span className="font-bold text-lg line-clamp-1 flex-1 text-left">
+						{column.title}
+					</span>
+					<Badge variant="outline" className="pointer-events-none rounded-sm">
+						{column.tasks?.length || 0}
+					</Badge>
+				</div>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button variant="ghost" size="icon">
+							<MoreVertical className="h-4 w-4" />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end">
+						<DropdownMenuItem onClick={onEditColumn}>
+							<Pencil className="mr-2 h-4 w-4" />
+							Edit Column
+						</DropdownMenuItem>
+						<DropdownMenuItem onClick={onAddTask}>
+							<Plus className="mr-2 h-4 w-4" />
+							Add Task
+						</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem
+							onClick={onDeleteColumn}
+							className="text-red-600 focus:text-red-600"
+						>
+							<Trash2 className="mr-2 h-4 w-4" />
+							Delete Column
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+			<div className="p-0.5 space-y-2">
+				{hasTasks ? (
+					column.tasks.map((task) => (
+						<TaskCard
+							key={task.id}
+							task={task}
+							onClick={() => onEditTask(task.id)}
+						/>
+					))
+				) : (
+					<div className="flex flex-col items-center justify-center py-1 md:py-8 text-center">
+						<div className="rounded-full bg-muted p-4 mb-3 hidden md:block">
+							<Plus className="h-5 w-5 text-muted-foreground" />
+						</div>
+						<div className="space-y-1 mb-2 md:space-y-2 md:mb-4">
+							<p className="text-sm text-muted-foreground">No tasks yet</p>
+							<p className="text-xs text-muted-foreground">
+								Add a task to get started
+							</p>
+						</div>
+						<Button onClick={onAddTask} size="sm">
+							<Plus className="mr-2 h-4 w-4" />
+							Add Task
+						</Button>
+					</div>
+				)}
+			</div>
+		</Kanban.Column>
+	);
+}
+
+export const ColumnContent = memo(ColumnContentComponent);

package/src/plugins/kanban/client/components/shared/default-error.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { AlertCircle, RefreshCw } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+
+interface DefaultErrorProps {
+	error?: Error;
+	reset?: () => void;
+}
+
+export function DefaultError({ error, reset }: DefaultErrorProps) {
+	return (
+		<div
+			className="flex flex-col items-center justify-center py-12 text-center"
+			data-testid="error-placeholder"
+		>
+			<div className="rounded-full bg-destructive/10 p-6 mb-4">
+				<AlertCircle className="h-8 w-8 text-destructive" />
+			</div>
+			<h3 className="text-lg font-semibold mb-2">Something went wrong</h3>
+			<p className="text-muted-foreground max-w-md mb-4">
+				{error?.message || "An unexpected error occurred. Please try again."}
+			</p>
+			{reset && (
+				<Button onClick={reset} variant="outline">
+					<RefreshCw className="mr-2 h-4 w-4" />
+					Try Again
+				</Button>
+			)}
+		</div>
+	);
+}

package/src/plugins/kanban/client/components/shared/empty-state.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@workspace/ui/lib/utils";
+
+interface EmptyStateProps {
+	title: string;
+	description?: string;
+	action?: ReactNode;
+	icon?: ReactNode;
+	className?: string;
+}
+
+export function EmptyState({
+	title,
+	description,
+	action,
+	icon,
+	className,
+}: EmptyStateProps) {
+	return (
+		<div
+			className={cn(
+				"flex flex-col items-center justify-center py-12 text-center",
+				className,
+			)}
+			data-testid="empty-state"
+		>
+			{icon && <div className="rounded-full bg-muted p-6 mb-4">{icon}</div>}
+			<h3 className="text-lg font-semibold mb-2">{title}</h3>
+			{description && (
+				<p className="text-muted-foreground max-w-md mb-4">{description}</p>
+			)}
+			{action && <div>{action}</div>}
+		</div>
+	);
+}

package/src/plugins/kanban/client/components/shared/kanban-board.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { memo, useMemo } from "react";
+import * as Kanban from "@workspace/ui/components/kanban";
+import { cn } from "@workspace/ui/lib/utils";
+import { ColumnContent } from "./column-content";
+import type { SerializedColumn, SerializedTask } from "../../../types";
+
+interface KanbanBoardProps {
+	columns: (SerializedColumn & { tasks: SerializedTask[] })[];
+	kanbanState: Record<string, SerializedTask[]>;
+	onKanbanChange: (newData: Record<string, SerializedTask[]>) => void;
+	onAddTask: (columnId: string) => void;
+	onEditTask: (columnId: string, taskId: string) => void;
+	onEditColumn: (columnId: string) => void;
+	onDeleteColumn: (columnId: string) => void;
+}
+
+function KanbanBoardComponent({
+	columns,
+	kanbanState,
+	onKanbanChange,
+	onAddTask,
+	onEditTask,
+	onEditColumn,
+	onDeleteColumn,
+}: KanbanBoardProps) {
+	const orderedColumns = useMemo(() => {
+		const columnMap = new Map(columns.map((c) => [c.id, c]));
+		return Object.keys(kanbanState)
+			.map((columnId) => {
+				const column = columnMap.get(columnId);
+				if (!column) return null;
+				return {
+					...column,
+					tasks: kanbanState[columnId] || [],
+				};
+			})
+			.filter(
+				(c): c is SerializedColumn & { tasks: SerializedTask[] } => c !== null,
+			);
+	}, [columns, kanbanState]);
+
+	const mdClass = useMemo(() => {
+		const gridClassMap: Record<number, string> = {
+			1: "md:grid-cols-1",
+			2: "md:grid-cols-2",
+			3: "md:grid-cols-3",
+			4: "md:grid-cols-4",
+			5: "md:grid-cols-5",
+			6: "md:grid-cols-6",
+		};
+		return gridClassMap[orderedColumns.length] || "md:grid-cols-6";
+	}, [orderedColumns.length]);
+
+	return (
+		<Kanban.Root
+			orientation="horizontal"
+			value={kanbanState}
+			onValueChange={onKanbanChange}
+			getItemValue={(item: SerializedTask) => item.id}
+		>
+			<Kanban.Board
+				className={cn(
+					"flex flex-col gap-4 md:auto-rows-fr md:grid-cols-1 md:grid min-h-[400px]",
+					mdClass,
+				)}
+			>
+				{orderedColumns.map((column) => (
+					<ColumnContent
+						key={column.id}
+						column={column}
+						onAddTask={() => onAddTask(column.id)}
+						onEditTask={(taskId) => onEditTask(column.id, taskId)}
+						onEditColumn={() => onEditColumn(column.id)}
+						onDeleteColumn={() => onDeleteColumn(column.id)}
+					/>
+				))}
+			</Kanban.Board>
+			<Kanban.Overlay>
+				<div className="size-full rounded-md bg-primary/10" />
+			</Kanban.Overlay>
+		</Kanban.Root>
+	);
+}
+
+export const KanbanBoard = memo(KanbanBoardComponent);

package/src/plugins/kanban/client/components/shared/page-wrapper.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { ReactNode, HTMLAttributes } from "react";
+import { cn } from "@workspace/ui/lib/utils";
+
+interface PageWrapperProps extends HTMLAttributes<HTMLDivElement> {
+	children: ReactNode;
+}
+
+export function PageWrapper({
+	children,
+	className,
+	...props
+}: PageWrapperProps) {
+	return (
+		<div className={cn("container mx-auto py-8 px-4", className)} {...props}>
+			{children}
+		</div>
+	);
+}

package/src/plugins/kanban/client/components/shared/task-card.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { memo } from "react";
+import { GripVertical } from "lucide-react";
+import { Button } from "@workspace/ui/components/button";
+import { Badge } from "@workspace/ui/components/badge";
+import * as Kanban from "@workspace/ui/components/kanban";
+import { format } from "date-fns";
+import type { SerializedTask } from "../../../types";
+import { getPriorityConfig } from "../../../utils";
+import { useResolveUser } from "../../hooks/kanban-hooks";
+import { UserAvatar } from "./user-avatar";
+
+interface TaskCardProps {
+	task: SerializedTask;
+	onClick: () => void;
+}
+
+function TaskCardComponent({ task, onClick }: TaskCardProps) {
+	const priorityConfig = getPriorityConfig(task.priority);
+	const { data: assignee } = useResolveUser(task.assigneeId);
+
+	return (
+		<Kanban.Item value={task.id} asChild>
+			<div
+				className="rounded-md border bg-card p-3 shadow-xs cursor-pointer hover:shadow-md transition-shadow"
+				onClick={onClick}
+			>
+				<div className="flex flex-col gap-2">
+					<div className="flex items-center gap-2">
+						<Kanban.ItemHandle asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								className="h-6 w-6"
+								onClick={(e: React.MouseEvent) => e.stopPropagation()}
+							>
+								<GripVertical className="h-3 w-3" />
+							</Button>
+						</Kanban.ItemHandle>
+						<span
+							className="line-clamp-1 font-medium text-base flex-1 text-left cursor-pointer hover:text-primary"
+							title={task.title}
+						>
+							{task.title}
+						</span>
+						<Badge
+							variant={priorityConfig.variant}
+							className={`pointer-events-none h-5 rounded-sm px-1.5 text-[11px] capitalize ${priorityConfig.className}`}
+						>
+							{priorityConfig.label}
+						</Badge>
+					</div>
+
+					<div className="flex items-center justify-between text-muted-foreground text-xs">
+						{task.assigneeId ? (
+							<div className="flex items-center gap-1.5">
+								<UserAvatar user={assignee ?? null} size="sm" />
+								<span className="line-clamp-1">
+									{assignee?.name || "Assigned"}
+								</span>
+							</div>
+						) : (
+							<div className="flex items-center gap-1.5">
+								<UserAvatar user={null} size="sm" />
+								<span className="line-clamp-1">Unassigned</span>
+							</div>
+						)}
+						<time className="tabular-nums">
+							{format(new Date(task.createdAt), "MMM d")}
+						</time>
+					</div>
+				</div>
+			</div>
+		</Kanban.Item>
+	);
+}
+
+export const TaskCard = memo(TaskCardComponent);

package/src/plugins/kanban/client/components/shared/user-avatar.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { memo } from "react";
+import { User } from "lucide-react";
+import {
+	Avatar,
+	AvatarImage,
+	AvatarFallback,
+} from "@workspace/ui/components/avatar";
+import type { KanbanUser } from "../../overrides";
+
+interface UserAvatarProps {
+	user: KanbanUser | null;
+	size?: "sm" | "default" | "lg";
+	className?: string;
+}
+
+/**
+ * Get initials from a user's name
+ */
+function getInitials(name: string): string {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length === 1) {
+		return parts[0]?.charAt(0).toUpperCase() || "";
+	}
+	return (
+		(parts[0]?.charAt(0) || "") + (parts[parts.length - 1]?.charAt(0) || "")
+	).toUpperCase();
+}
+
+/**
+ * UserAvatar component displays a user's avatar or initials fallback
+ * Uses the shadcn Avatar component with Radix primitives
+ */
+function UserAvatarComponent({
+	user,
+	size = "sm",
+	className,
+}: UserAvatarProps) {
+	// No user - show placeholder icon
+	if (!user) {
+		return (
+			<Avatar size={size} className={className} title="Unassigned">
+				<AvatarFallback>
+					<User className="size-3 group-data-[size=default]/avatar:size-4 group-data-[size=lg]/avatar:size-5" />
+				</AvatarFallback>
+			</Avatar>
+		);
+	}
+
+	const initials = getInitials(user.name);
+
+	return (
+		<Avatar size={size} className={className} title={user.name}>
+			{user.avatarUrl && <AvatarImage src={user.avatarUrl} alt={user.name} />}
+			<AvatarFallback className="bg-primary/10 text-primary font-medium">
+				{initials}
+			</AvatarFallback>
+		</Avatar>
+	);
+}
+
+export const UserAvatar = memo(UserAvatarComponent);

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

@@ -0,0 +1,11 @@
+export {
+	useBoards,
+	useSuspenseBoards,
+	useBoard,
+	useSuspenseBoard,
+	useBoardMutations,
+	useColumnMutations,
+	useTaskMutations,
+	useResolveUser,
+	useSearchUsers,
+} from "./kanban-hooks";