@btst/stack 1.11.0 → 2.0.0

package/dist/packages/stack/src/plugins/kanban/client/components/forms/task-form.mjs

@@ -0,0 +1,198 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Trash2 } from 'lucide-react';
+import { Button } from '../../../../../../../ui/src/components/button.mjs';
+import { Input } from '../../../../../../../ui/src/components/input.mjs';
+import { Label } from '../../../../../../../ui/src/components/label.mjs';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../../../../../../../ui/src/components/select.mjs';
+import { MinimalTiptapEditor } from '../../../../../../../ui/src/components/minimal-tiptap/minimal-tiptap.mjs';
+import SearchSelect from '../../../../../../../ui/src/components/search-select.mjs';
+import { useTaskMutations, useSearchUsers } from '../../hooks/kanban-hooks.mjs';
+import { PRIORITY_OPTIONS } from '../../../utils.mjs';
+
+function TaskForm({
+  columnId,
+  boardId,
+  taskId,
+  task,
+  columns,
+  onClose,
+  onSuccess,
+  onDelete
+}) {
+  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(
+    task?.priority || "MEDIUM"
+  );
+  const [selectedColumnId, setSelectedColumnId] = useState(
+    task?.columnId || columnId
+  );
+  const [assigneeId, setAssigneeId] = useState(task?.assigneeId || "");
+  const [error, setError] = useState(null);
+  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) => {
+    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) {
+          await updateTask(taskId, {
+            title,
+            description,
+            priority,
+            assigneeId: assigneeId || null
+          });
+          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) {
+            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.`
+            );
+            return;
+          }
+        } else {
+          await updateTask(taskId, {
+            title,
+            description,
+            priority,
+            columnId: selectedColumnId,
+            assigneeId: assigneeId || null
+          });
+        }
+      } else {
+        await createTask({
+          title,
+          description,
+          priority,
+          columnId: selectedColumnId,
+          assigneeId: assigneeId || void 0
+        });
+      }
+      onSuccess();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "An error occurred");
+    }
+  };
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title *" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "title",
+          value: title,
+          onChange: (e) => setTitle(e.target.value),
+          placeholder: "e.g., Fix login bug",
+          disabled: isPending
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "priority", children: "Priority" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: priority,
+            onValueChange: (v) => setPriority(v),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select priority" }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: PRIORITY_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: "column", children: "Column" }),
+        /* @__PURE__ */ jsxs(Select, { value: selectedColumnId, onValueChange: setSelectedColumnId, children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select column" }) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: columns.map((col) => /* @__PURE__ */ jsx(SelectItem, { value: col.id, children: col.title }, col.id)) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: "assignee", children: "Assignee" }),
+      /* @__PURE__ */ jsx(
+        SearchSelect,
+        {
+          options: userOptions,
+          value: assigneeId,
+          onChange: setAssigneeId,
+          placeholder: "Select assignee",
+          emptyMessage: "No users found"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Label, { children: "Description" }),
+      /* @__PURE__ */ jsx(
+        MinimalTiptapEditor,
+        {
+          value: description,
+          onChange: (value) => setDescription(typeof value === "string" ? value : ""),
+          output: "markdown",
+          placeholder: "Describe the task...",
+          editable: !isPending,
+          className: "min-h-[150px]"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: error }),
+    /* @__PURE__ */ jsxs("div", { className: "flex justify-between pt-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isPending, children: isPending ? isEditing ? "Updating..." : "Creating..." : isEditing ? "Update Task" : "Create Task" }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: onClose,
+            disabled: isPending,
+            children: "Cancel"
+          }
+        )
+      ] }),
+      isEditing && onDelete && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "destructive",
+          onClick: onDelete,
+          disabled: isPending,
+          children: [
+            /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+            "Delete"
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+export { TaskForm };

package/dist/packages/stack/src/plugins/kanban/client/components/loading/board-skeleton.cjs

@@ -0,0 +1,47 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+
+function BoardSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto py-8 px-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-5" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-48" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-64 mt-2" })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-28" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4 md:grid-cols-3", children: Array.from({ length: 3 }).map((_, colIdx) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rounded-lg border bg-zinc-100 dark:bg-zinc-900 p-2.5",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-8" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-24" }),
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-8" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: Array.from({ length: 3 }).map((_2, taskIdx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-md border bg-card p-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-6" }),
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 flex-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-16" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-20" }),
+              /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16" })
+            ] })
+          ] }, taskIdx)) })
+        ]
+      },
+      colIdx
+    )) })
+  ] });
+}
+
+exports.BoardSkeleton = BoardSkeleton;

package/dist/packages/stack/src/plugins/kanban/client/components/loading/board-skeleton.mjs

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

package/dist/packages/stack/src/plugins/kanban/client/components/loading/boards-list-skeleton.cjs

@@ -0,0 +1,30 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+const card = require('../../../../../../../ui/src/components/card.cjs');
+
+function BoardsListSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto py-8 px-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center justify-between mb-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-9 w-48" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-64 mt-2" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-32" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(card.CardHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-6 w-3/4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-full mt-2" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-20" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-24" })
+      ] }) })
+    ] }, i)) })
+  ] });
+}
+
+exports.BoardsListSkeleton = BoardsListSkeleton;

package/dist/packages/stack/src/plugins/kanban/client/components/loading/boards-list-skeleton.mjs

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

package/dist/packages/stack/src/plugins/kanban/client/components/pages/404-page.cjs

@@ -0,0 +1,27 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../../../../../../../ui/src/components/button.cjs');
+const context = require('@btst/stack/context');
+
+function NotFoundPage() {
+  const { navigate: overrideNavigate } = context.usePluginOverrides("kanban");
+  const navigate = overrideNavigate || ((path) => {
+    window.location.href = path;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex min-h-[400px] flex-col items-center justify-center text-center",
+      "data-testid": "empty-state",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold mb-2", children: "Page Not Found" }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-6", children: "The page you're looking for doesn't exist." }),
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => navigate("/pages/kanban"), children: "Back to Boards" })
+      ]
+    }
+  );
+}
+
+exports.NotFoundPage = NotFoundPage;

package/dist/packages/stack/src/plugins/kanban/client/components/pages/404-page.mjs

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

package/dist/packages/stack/src/plugins/kanban/client/components/pages/board-page.cjs

@@ -0,0 +1,31 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const boardSkeleton = require('../loading/board-skeleton.cjs');
+const _404Page = require('./404-page.cjs');
+
+const BoardPage = React.lazy(
+  () => import('./board-page.internal.cjs').then((m) => ({
+    default: m.BoardPage
+  }))
+);
+function BoardPageComponent({ boardId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: `/kanban/${boardId}`,
+      PageComponent: BoardPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: boardSkeleton.BoardSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { boardId },
+      onError: (error) => console.error("BoardPage error:", error)
+    }
+  );
+}
+
+exports.BoardPageComponent = BoardPageComponent;