@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -8,10 +8,12 @@ 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 { usePluginOverrides } from '@btst/stack/context';
-import { useTaskMutations, useSearchUsers } from '../../hooks/kanban-hooks.mjs';
-import { PRIORITY_OPTIONS } from '../../../utils.mjs';
+import { useTranslate, usePluginOverrides, CanAccess } from '@btst/stack/context';
+import { useTaskMutations, useTaskForm, useSearchUsers } from '../../hooks/kanban-hooks.mjs';
 
+function firstError(error) {
+  return Array.isArray(error) ? error[0] : error;
+}
 function TaskForm({
   columnId,
   boardId,
@@ -22,17 +24,14 @@ function TaskForm({
   onSuccess,
   onDelete
 }) {
-  const isEditing = !!taskId;
-  const { uploadImage, imagePicker: imagePickerTrigger } = usePluginOverrides("kanban");
+  const t = useTranslate();
   const {
-    createTask,
-    updateTask,
-    moveTask,
-    isCreating,
-    isUpdating,
-    isDeleting,
-    isMoving
-  } = useTaskMutations();
+    uploadImage,
+    imagePicker: imagePickerTrigger,
+    localization
+  } = usePluginOverrides("kanban");
+  const isEditing = !!taskId;
+  const { moveTask, isMoving } = useTaskMutations();
   const [title, setTitle] = useState(task?.title || "");
   const [description, setDescription] = useState(task?.description || "");
   const [priority, setPriority] = useState(
@@ -42,134 +41,209 @@ function TaskForm({
     task?.columnId || columnId
   );
   const [assigneeId, setAssigneeId] = useState(task?.assigneeId || "");
-  const [error, setError] = useState(null);
+  const [titleError, setTitleError] = useState(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const resourceForm = useTaskForm({
+    action: isEditing ? "edit" : "create",
+    record: task ?? null,
+    toCreateVars: (values) => ({
+      title: values.title,
+      description: values.description,
+      priority: values.priority,
+      columnId: values.columnId,
+      assigneeId: values.assigneeId || void 0
+    }),
+    toUpdateVars: (values) => ({
+      id: taskId ?? "",
+      data: {
+        title: values.title,
+        description: values.description,
+        priority: values.priority,
+        ...values.columnId === task?.columnId ? { columnId: values.columnId } : {},
+        assigneeId: values.assigneeId || null
+      }
+    }),
+    onSuccess: async () => {
+      if (isEditing && taskId && selectedColumnId !== task?.columnId) {
+        const targetTasks = columns.find((column) => column.id === selectedColumnId)?.tasks ?? [];
+        const targetOrder = targetTasks.length > 0 ? Math.max(...targetTasks.map((targetTask) => targetTask.order)) + 1 : 0;
+        try {
+          await moveTask(taskId, selectedColumnId, targetOrder);
+        } catch (error) {
+          const message = error instanceof Error ? error.message : localization?.errorGeneric ?? t("kanban.common.errorGeneric", "Something went wrong");
+          const partialErrorTemplate = localization?.taskMovePartialError;
+          throw new Error(
+            partialErrorTemplate ? partialErrorTemplate.replaceAll("{{message}}", message) : t(
+              "kanban.forms.taskMovePartialError",
+              "Task properties were saved, but moving to the new column failed: {{message}}. You can try dragging the task to the desired column.",
+              { message }
+            )
+          );
+        }
+      }
+      onSuccess();
+    }
+  });
   const { data: users = [] } = useSearchUsers("", boardId);
+  const unassigned = localization?.unassigned ?? t("kanban.common.unassigned", "Unassigned");
   const userOptions = [
-    { value: "", label: "Unassigned" },
+    { 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);
+  const priorityOptions = [
+    {
+      value: "LOW",
+      label: localization?.priorityLow ?? t("kanban.common.priorityLow", "Low")
+    },
+    {
+      value: "MEDIUM",
+      label: localization?.priorityMedium ?? t("kanban.common.priorityMedium", "Medium")
+    },
+    {
+      value: "HIGH",
+      label: localization?.priorityHigh ?? t("kanban.common.priorityHigh", "High")
+    },
+    {
+      value: "URGENT",
+      label: localization?.priorityUrgent ?? t("kanban.common.priorityUrgent", "Urgent")
+    }
+  ];
+  const isPending = resourceForm.isSubmitting || isMoving || isDeleting;
+  const serverTitleError = firstError(resourceForm.fieldErrors.title);
+  const serverDescriptionError = firstError(
+    resourceForm.fieldErrors.description
+  );
+  const serverPriorityError = firstError(resourceForm.fieldErrors.priority);
+  const serverColumnError = firstError(resourceForm.fieldErrors.columnId);
+  const serverAssigneeError = firstError(resourceForm.fieldErrors.assigneeId);
+  const topLevelError = resourceForm.error && Object.keys(resourceForm.fieldErrors).length === 0 ? resourceForm.error.message : null;
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    resourceForm.clearErrors();
+    setTitleError(null);
     if (!title.trim()) {
-      setError("Title is required");
+      setTitleError(
+        localization?.titleRequired ?? t("kanban.forms.titleRequired", "Title is required")
+      );
       return;
     }
+    await resourceForm.submit({
+      title,
+      description,
+      priority,
+      columnId: selectedColumnId,
+      assigneeId
+    });
+  };
+  const handleDelete = async () => {
+    if (!onDelete) return;
+    setIsDeleting(true);
     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");
+      await onDelete();
+    } finally {
+      setIsDeleting(false);
     }
   };
   return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-4 overflow-x-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "title", children: "Title *" }),
+      /* @__PURE__ */ jsxs(Label, { htmlFor: "title", children: [
+        localization?.taskTitle ?? t("kanban.forms.taskTitle", "Title"),
+        " *"
+      ] }),
       /* @__PURE__ */ jsx(
         Input,
         {
           id: "title",
           value: title,
-          onChange: (e) => setTitle(e.target.value),
-          placeholder: "e.g., Fix login bug",
-          disabled: isPending
+          onChange: (event) => {
+            setTitle(event.target.value);
+            setTitleError(null);
+          },
+          placeholder: localization?.taskTitlePlaceholder ?? t("kanban.forms.taskTitlePlaceholder", "e.g., Fix login bug"),
+          disabled: isPending,
+          "aria-invalid": !!(titleError || serverTitleError)
         }
-      )
+      ),
+      (titleError || serverTitleError) && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: titleError || serverTitleError })
     ] }),
     /* @__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__ */ jsx(Label, { htmlFor: "priority", children: localization?.taskPriority ?? t("kanban.forms.taskPriority", "Priority") }),
         /* @__PURE__ */ jsxs(
           Select,
           {
             value: priority,
-            onValueChange: (v) => setPriority(v),
+            onValueChange: (value) => setPriority(value),
+            disabled: isPending,
             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__ */ jsx(SelectTrigger, { id: "priority", "aria-invalid": !!serverPriorityError, children: /* @__PURE__ */ jsx(
+                SelectValue,
+                {
+                  placeholder: localization?.selectPriority ?? t("kanban.forms.selectPriority", "Select priority")
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: priorityOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
             ]
           }
-        )
+        ),
+        serverPriorityError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: serverPriorityError })
       ] }),
       /* @__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__ */ jsx(Label, { htmlFor: "column", children: localization?.taskColumn ?? t("kanban.forms.taskColumn", "Column") }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: selectedColumnId,
+            onValueChange: setSelectedColumnId,
+            disabled: isPending,
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { id: "column", "aria-invalid": !!serverColumnError, children: /* @__PURE__ */ jsx(
+                SelectValue,
+                {
+                  placeholder: localization?.selectColumn ?? t("kanban.forms.selectColumn", "Select column")
+                }
+              ) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: columns.map((column) => /* @__PURE__ */ jsx(SelectItem, { value: column.id, children: column.title }, column.id)) })
+            ]
+          }
+        ),
+        serverColumnError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: serverColumnError })
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "assignee", children: "Assignee" }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "assignee", children: localization?.taskAssignee ?? t("kanban.forms.taskAssignee", "Assignee") }),
       /* @__PURE__ */ jsx(
         SearchSelect,
         {
           options: userOptions,
           value: assigneeId,
           onChange: setAssigneeId,
-          placeholder: "Select assignee",
-          emptyMessage: "No users found"
+          placeholder: localization?.selectAssignee ?? t("kanban.forms.selectAssignee", "Select assignee"),
+          emptyMessage: localization?.noUsersFound ?? t("kanban.forms.noUsersFound", "No users found")
         }
-      )
+      ),
+      serverAssigneeError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: serverAssigneeError })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Label, { children: "Description" }),
+      /* @__PURE__ */ jsx(Label, { children: localization?.taskDescription ?? t("kanban.forms.taskDescription", "Description") }),
       /* @__PURE__ */ jsx(
         MinimalTiptapEditor,
         {
           value: description,
           onChange: (value) => setDescription(typeof value === "string" ? value : ""),
           output: "markdown",
-          placeholder: "Describe the task...",
+          placeholder: localization?.taskDescriptionPlaceholder ?? t("kanban.forms.taskDescriptionPlaceholder", "Describe the task..."),
           className: "min-h-[150px]",
           uploader: uploadImage,
           imagePickerTrigger
         }
-      )
+      ),
+      serverDescriptionError && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: serverDescriptionError })
     ] }),
-    error && /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: error }),
+    topLevelError && /* @__PURE__ */ jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: topLevelError }),
     /* @__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: "submit", disabled: isPending, children: resourceForm.isSubmitting || isMoving ? isEditing ? localization?.updating ?? t("kanban.common.updating", "Updating...") : localization?.creating ?? t("kanban.common.creating", "Creating...") : isEditing ? localization?.updateTask ?? t("kanban.forms.updateTask", "Update Task") : localization?.createTask ?? t("kanban.forms.createTask", "Create Task") }),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -177,21 +251,29 @@ function TaskForm({
             variant: "outline",
             onClick: onClose,
             disabled: isPending,
-            children: "Cancel"
+            children: localization?.cancel ?? t("kanban.common.cancel", "Cancel")
           }
         )
       ] }),
-      isEditing && onDelete && /* @__PURE__ */ jsxs(
-        Button,
+      isEditing && onDelete && taskId && /* @__PURE__ */ jsx(
+        CanAccess,
         {
-          type: "button",
-          variant: "destructive",
-          onClick: onDelete,
-          disabled: isPending,
-          children: [
-            /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
-            "Delete"
-          ]
+          resource: "kanban:task",
+          action: "delete",
+          params: { id: taskId, boardId, columnId },
+          children: /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "destructive",
+              onClick: handleDelete,
+              disabled: isPending,
+              children: [
+                /* @__PURE__ */ jsx(Trash2, { className: "mr-2 h-4 w-4" }),
+                isDeleting ? localization?.deleting ?? t("kanban.common.deleting", "Deleting...") : localization?.delete ?? t("kanban.common.delete", "Delete")
+              ]
+            }
+          )
         }
       )
     ] })

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

@@ -6,8 +6,10 @@ 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) => {
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("kanban");
+  const { router } = context.useStack();
+  const navigate = router?.navigate || ((path) => {
     window.location.href = path;
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -16,9 +18,12 @@ function NotFoundPage() {
       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" })
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-bold mb-2", children: localization?.pageNotFound ?? t("kanban.common.pageNotFound", "Page Not Found") }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mb-6", children: localization?.pageNotFoundDescription ?? t(
+          "kanban.common.pageNotFoundDescription",
+          "The page you're looking for doesn't exist."
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: () => navigate("/pages/kanban"), children: localization?.backToBoards ?? t("kanban.common.backToBoards", "Back to Boards") })
       ]
     }
   );

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

@@ -1,11 +1,13 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
-import { usePluginOverrides } from '@btst/stack/context';
+import { useTranslate, usePluginOverrides, useStack } from '@btst/stack/context';
 
 function NotFoundPage() {
-  const { navigate: overrideNavigate } = usePluginOverrides("kanban");
-  const navigate = overrideNavigate || ((path) => {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("kanban");
+  const { router } = useStack();
+  const navigate = router?.navigate || ((path) => {
     window.location.href = path;
   });
   return /* @__PURE__ */ jsxs(
@@ -14,9 +16,12 @@ function NotFoundPage() {
       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" })
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold mb-2", children: localization?.pageNotFound ?? t("kanban.common.pageNotFound", "Page Not Found") }),
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: localization?.pageNotFoundDescription ?? t(
+          "kanban.common.pageNotFoundDescription",
+          "The page you're looking for doesn't exist."
+        ) }),
+        /* @__PURE__ */ jsx(Button, { onClick: () => navigate("/pages/kanban"), children: localization?.backToBoards ?? t("kanban.common.backToBoards", "Back to Boards") })
       ]
     }
   );

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

@@ -18,6 +18,11 @@ function BoardPageComponent({ boardId }) {
     components.ComposedRoute,
     {
       path: `/kanban/${boardId}`,
+      permission: {
+        resource: "kanban:board",
+        action: "read",
+        params: { id: boardId }
+      },
       PageComponent: BoardPage,
       ErrorComponent: defaultError.DefaultError,
       LoadingComponent: boardSkeleton.BoardSkeleton,