@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/kanban/client/components/forms/board-form.cjs

@@ -7,75 +7,95 @@ const button = require('../../../../../../../ui/src/components/button.cjs');
 const input = require('../../../../../../../ui/src/components/input.cjs');
 const textarea = require('../../../../../../../ui/src/components/textarea.cjs');
 const label = require('../../../../../../../ui/src/components/label.cjs');
+const context = require('@btst/stack/context');
 const kanbanHooks = require('../../hooks/kanban-hooks.cjs');
 
+function firstError(error) {
+  return Array.isArray(error) ? error[0] : error;
+}
 function BoardForm({ board, onClose, onSuccess }) {
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("kanban");
   const isEditing = !!board;
-  const { createBoard, updateBoard, isCreating, isUpdating } = kanbanHooks.useBoardMutations();
   const [name, setName] = React.useState(board?.name || "");
   const [description, setDescription] = React.useState(board?.description || "");
-  const [error, setError] = React.useState(null);
-  const isPending = isCreating || isUpdating;
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
+  const [nameError, setNameError] = React.useState(null);
+  const resourceForm = kanbanHooks.useBoardForm({
+    action: isEditing ? "edit" : "create",
+    record: board ?? null,
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({ id: board?.id ?? "", data: values }),
+    onSuccess: (savedBoard) => onSuccess(savedBoard.id)
+  });
+  const serverNameError = firstError(resourceForm.fieldErrors.name);
+  const serverDescriptionError = firstError(
+    resourceForm.fieldErrors.description
+  );
+  const topLevelError = resourceForm.error && Object.keys(resourceForm.fieldErrors).length === 0 ? resourceForm.error.message : null;
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    resourceForm.clearErrors();
+    setNameError(null);
     if (!name.trim()) {
-      setError("Name is required");
+      setNameError(
+        localization?.nameRequired ?? t("kanban.forms.nameRequired", "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");
-    }
+    await resourceForm.submit({ name, description });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4 overflow-x-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "name", children: "Name *" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { htmlFor: "name", children: [
+        localization?.boardName ?? t("kanban.forms.boardName", "Name"),
+        " *"
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         input.Input,
         {
           id: "name",
           value: name,
-          onChange: (e) => setName(e.target.value),
-          placeholder: "e.g., Project Alpha",
-          disabled: isPending
+          onChange: (event) => {
+            setName(event.target.value);
+            setNameError(null);
+          },
+          placeholder: localization?.boardNamePlaceholder ?? t("kanban.forms.boardNamePlaceholder", "e.g., Project Alpha"),
+          disabled: resourceForm.isSubmitting,
+          "aria-invalid": !!(nameError || serverNameError)
         }
-      )
+      ),
+      (nameError || serverNameError) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: nameError || serverNameError })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "description", children: "Description" }),
+      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "description", children: localization?.boardDescription ?? t("kanban.forms.boardDescription", "Description") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         textarea.Textarea,
         {
           id: "description",
           value: description,
-          onChange: (e) => setDescription(e.target.value),
-          placeholder: "Describe your board...",
-          disabled: isPending,
-          rows: 3
+          onChange: (event) => setDescription(event.target.value),
+          placeholder: localization?.boardDescriptionPlaceholder ?? t(
+            "kanban.forms.boardDescriptionPlaceholder",
+            "Describe your board..."
+          ),
+          disabled: resourceForm.isSubmitting,
+          rows: 3,
+          "aria-invalid": !!serverDescriptionError
         }
-      )
+      ),
+      serverDescriptionError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: serverDescriptionError })
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: error }),
+    topLevelError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: topLevelError }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: isPending, children: isPending ? isEditing ? "Updating..." : "Creating..." : isEditing ? "Update Board" : "Create Board" }),
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: resourceForm.isSubmitting, children: resourceForm.isSubmitting ? isEditing ? localization?.updating ?? t("kanban.common.updating", "Updating...") : localization?.creating ?? t("kanban.common.creating", "Creating...") : isEditing ? localization?.updateBoard ?? t("kanban.forms.updateBoard", "Update Board") : localization?.createBoard ?? t("kanban.forms.createBoard", "Create Board") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         button.Button,
         {
           type: "button",
           variant: "outline",
           onClick: onClose,
-          disabled: isPending,
-          children: "Cancel"
+          disabled: resourceForm.isSubmitting,
+          children: localization?.cancel ?? t("kanban.common.cancel", "Cancel")
         }
       )
     ] })

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

@@ -5,75 +5,95 @@ import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Input } from '../../../../../../../ui/src/components/input.mjs';
 import { Textarea } from '../../../../../../../ui/src/components/textarea.mjs';
 import { Label } from '../../../../../../../ui/src/components/label.mjs';
-import { useBoardMutations } from '../../hooks/kanban-hooks.mjs';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
+import { useBoardForm } from '../../hooks/kanban-hooks.mjs';
 
+function firstError(error) {
+  return Array.isArray(error) ? error[0] : error;
+}
 function BoardForm({ board, onClose, onSuccess }) {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("kanban");
   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(null);
-  const isPending = isCreating || isUpdating;
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
+  const [nameError, setNameError] = useState(null);
+  const resourceForm = useBoardForm({
+    action: isEditing ? "edit" : "create",
+    record: board ?? null,
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({ id: board?.id ?? "", data: values }),
+    onSuccess: (savedBoard) => onSuccess(savedBoard.id)
+  });
+  const serverNameError = firstError(resourceForm.fieldErrors.name);
+  const serverDescriptionError = firstError(
+    resourceForm.fieldErrors.description
+  );
+  const topLevelError = resourceForm.error && Object.keys(resourceForm.fieldErrors).length === 0 ? resourceForm.error.message : null;
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    resourceForm.clearErrors();
+    setNameError(null);
     if (!name.trim()) {
-      setError("Name is required");
+      setNameError(
+        localization?.nameRequired ?? t("kanban.forms.nameRequired", "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");
-    }
+    await resourceForm.submit({ name, description });
   };
   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: "name", children: "Name *" }),
+      /* @__PURE__ */ jsxs(Label, { htmlFor: "name", children: [
+        localization?.boardName ?? t("kanban.forms.boardName", "Name"),
+        " *"
+      ] }),
       /* @__PURE__ */ jsx(
         Input,
         {
           id: "name",
           value: name,
-          onChange: (e) => setName(e.target.value),
-          placeholder: "e.g., Project Alpha",
-          disabled: isPending
+          onChange: (event) => {
+            setName(event.target.value);
+            setNameError(null);
+          },
+          placeholder: localization?.boardNamePlaceholder ?? t("kanban.forms.boardNamePlaceholder", "e.g., Project Alpha"),
+          disabled: resourceForm.isSubmitting,
+          "aria-invalid": !!(nameError || serverNameError)
         }
-      )
+      ),
+      (nameError || serverNameError) && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: nameError || serverNameError })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: "description", children: "Description" }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: "description", children: localization?.boardDescription ?? t("kanban.forms.boardDescription", "Description") }),
       /* @__PURE__ */ jsx(
         Textarea,
         {
           id: "description",
           value: description,
-          onChange: (e) => setDescription(e.target.value),
-          placeholder: "Describe your board...",
-          disabled: isPending,
-          rows: 3
+          onChange: (event) => setDescription(event.target.value),
+          placeholder: localization?.boardDescriptionPlaceholder ?? t(
+            "kanban.forms.boardDescriptionPlaceholder",
+            "Describe your board..."
+          ),
+          disabled: resourceForm.isSubmitting,
+          rows: 3,
+          "aria-invalid": !!serverDescriptionError
         }
-      )
+      ),
+      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 gap-2 pt-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isPending, children: isPending ? isEditing ? "Updating..." : "Creating..." : isEditing ? "Update Board" : "Create Board" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: resourceForm.isSubmitting, children: resourceForm.isSubmitting ? isEditing ? localization?.updating ?? t("kanban.common.updating", "Updating...") : localization?.creating ?? t("kanban.common.creating", "Creating...") : isEditing ? localization?.updateBoard ?? t("kanban.forms.updateBoard", "Update Board") : localization?.createBoard ?? t("kanban.forms.createBoard", "Create Board") }),
       /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           variant: "outline",
           onClick: onClose,
-          disabled: isPending,
-          children: "Cancel"
+          disabled: resourceForm.isSubmitting,
+          children: localization?.cancel ?? t("kanban.common.cancel", "Cancel")
         }
       )
     ] })

package/dist/packages/stack/src/plugins/kanban/client/components/forms/column-form.cjs

@@ -6,8 +6,12 @@ const React = require('react');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const input = require('../../../../../../../ui/src/components/input.cjs');
 const label = require('../../../../../../../ui/src/components/label.cjs');
+const context = require('@btst/stack/context');
 const kanbanHooks = require('../../hooks/kanban-hooks.cjs');
 
+function firstError(error) {
+  return Array.isArray(error) ? error[0] : error;
+}
 function ColumnForm({
   boardId,
   columnId,
@@ -15,54 +19,66 @@ function ColumnForm({
   onClose,
   onSuccess
 }) {
+  const t = context.useTranslate();
+  const { localization } = context.usePluginOverrides("kanban");
   const isEditing = !!columnId;
-  const { createColumn, updateColumn, isCreating, isUpdating } = kanbanHooks.useColumnMutations();
   const [title, setTitle] = React.useState(column?.title || "");
-  const [error, setError] = React.useState(null);
-  const isPending = isCreating || isUpdating;
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
+  const [titleError, setTitleError] = React.useState(null);
+  const resourceForm = kanbanHooks.useColumnForm({
+    action: isEditing ? "edit" : "create",
+    record: column ?? null,
+    toCreateVars: (values) => ({ ...values, boardId }),
+    toUpdateVars: (values) => ({ id: columnId ?? "", data: values }),
+    onSuccess
+  });
+  const serverTitleError = firstError(resourceForm.fieldErrors.title);
+  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;
     }
-    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");
-    }
+    await resourceForm.submit({ title });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "space-y-4", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "title", children: "Title *" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(label.Label, { htmlFor: "title", children: [
+        localization?.columnTitle ?? t("kanban.forms.columnTitle", "Title"),
+        " ",
+        "*"
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         input.Input,
         {
           id: "title",
           value: title,
-          onChange: (e) => setTitle(e.target.value),
-          placeholder: "e.g., To Do",
-          disabled: isPending
+          onChange: (event) => {
+            setTitle(event.target.value);
+            setTitleError(null);
+          },
+          placeholder: localization?.columnTitlePlaceholder ?? t("kanban.forms.columnTitlePlaceholder", "e.g., To Do"),
+          disabled: resourceForm.isSubmitting,
+          "aria-invalid": !!(titleError || serverTitleError)
         }
-      )
+      ),
+      (titleError || serverTitleError) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: titleError || serverTitleError })
     ] }),
-    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: error }),
+    topLevelError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md", children: topLevelError }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-2", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: isPending, children: isPending ? isEditing ? "Updating..." : "Creating..." : isEditing ? "Update Column" : "Create Column" }),
+      /* @__PURE__ */ jsxRuntime.jsx(button.Button, { type: "submit", disabled: resourceForm.isSubmitting, children: resourceForm.isSubmitting ? isEditing ? localization?.updating ?? t("kanban.common.updating", "Updating...") : localization?.creating ?? t("kanban.common.creating", "Creating...") : isEditing ? localization?.updateColumn ?? t("kanban.forms.updateColumn", "Update Column") : localization?.createColumn ?? t("kanban.forms.createColumn", "Create Column") }),
       /* @__PURE__ */ jsxRuntime.jsx(
         button.Button,
         {
           type: "button",
           variant: "outline",
           onClick: onClose,
-          disabled: isPending,
-          children: "Cancel"
+          disabled: resourceForm.isSubmitting,
+          children: localization?.cancel ?? t("kanban.common.cancel", "Cancel")
         }
       )
     ] })

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

@@ -4,8 +4,12 @@ import { useState } from '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 { useColumnMutations } from '../../hooks/kanban-hooks.mjs';
+import { useTranslate, usePluginOverrides } from '@btst/stack/context';
+import { useColumnForm } from '../../hooks/kanban-hooks.mjs';
 
+function firstError(error) {
+  return Array.isArray(error) ? error[0] : error;
+}
 function ColumnForm({
   boardId,
   columnId,
@@ -13,54 +17,66 @@ function ColumnForm({
   onClose,
   onSuccess
 }) {
+  const t = useTranslate();
+  const { localization } = usePluginOverrides("kanban");
   const isEditing = !!columnId;
-  const { createColumn, updateColumn, isCreating, isUpdating } = useColumnMutations();
   const [title, setTitle] = useState(column?.title || "");
-  const [error, setError] = useState(null);
-  const isPending = isCreating || isUpdating;
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError(null);
+  const [titleError, setTitleError] = useState(null);
+  const resourceForm = useColumnForm({
+    action: isEditing ? "edit" : "create",
+    record: column ?? null,
+    toCreateVars: (values) => ({ ...values, boardId }),
+    toUpdateVars: (values) => ({ id: columnId ?? "", data: values }),
+    onSuccess
+  });
+  const serverTitleError = firstError(resourceForm.fieldErrors.title);
+  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;
     }
-    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");
-    }
+    await resourceForm.submit({ title });
   };
   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__ */ jsxs(Label, { htmlFor: "title", children: [
+        localization?.columnTitle ?? t("kanban.forms.columnTitle", "Title"),
+        " ",
+        "*"
+      ] }),
       /* @__PURE__ */ jsx(
         Input,
         {
           id: "title",
           value: title,
-          onChange: (e) => setTitle(e.target.value),
-          placeholder: "e.g., To Do",
-          disabled: isPending
+          onChange: (event) => {
+            setTitle(event.target.value);
+            setTitleError(null);
+          },
+          placeholder: localization?.columnTitlePlaceholder ?? t("kanban.forms.columnTitlePlaceholder", "e.g., To Do"),
+          disabled: resourceForm.isSubmitting,
+          "aria-invalid": !!(titleError || serverTitleError)
         }
-      )
+      ),
+      (titleError || serverTitleError) && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: titleError || serverTitleError })
     ] }),
-    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 gap-2 pt-2", children: [
-      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: isPending, children: isPending ? isEditing ? "Updating..." : "Creating..." : isEditing ? "Update Column" : "Create Column" }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", disabled: resourceForm.isSubmitting, children: resourceForm.isSubmitting ? isEditing ? localization?.updating ?? t("kanban.common.updating", "Updating...") : localization?.creating ?? t("kanban.common.creating", "Creating...") : isEditing ? localization?.updateColumn ?? t("kanban.forms.updateColumn", "Update Column") : localization?.createColumn ?? t("kanban.forms.createColumn", "Create Column") }),
       /* @__PURE__ */ jsx(
         Button,
         {
           type: "button",
           variant: "outline",
           onClick: onClose,
-          disabled: isPending,
-          children: "Cancel"
+          disabled: resourceForm.isSubmitting,
+          children: localization?.cancel ?? t("kanban.common.cancel", "Cancel")
         }
       )
     ] })