@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/form-builder/client/components/pages/form-builder-page.internal.cjs

@@ -9,11 +9,9 @@ const input = require('../../../../../../../ui/src/components/input.cjs');
 const label = require('../../../../../../../ui/src/components/label.cjs');
 const select = require('../../../../../../../ui/src/components/select.cjs');
 const LucideIcons = require('lucide-react');
-const sonner = require('sonner');
-const index$1 = require('../../../../../../../ui/src/components/form-builder/index.cjs');
-const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
-const index = require('../../localization/index.cjs');
+const index = require('../../../../../../../ui/src/components/form-builder/index.cjs');
 const utils = require('../../../utils.cjs');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
 
 function FormBuilderPage({ id }) {
   if (id) {
@@ -32,14 +30,12 @@ function FormBuilderPageContent({
   id,
   existingForm
 }) {
-  const { navigate, Link, localization } = context.usePluginOverrides("form-builder", {
-    localization: index.FORM_BUILDER_LOCALIZATION
-  });
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization } = context.usePluginOverrides("form-builder");
+  const { router } = context.useStack();
   const basePath = context.useBasePath();
-  const createMutation = formBuilderHooks.useCreateForm();
-  const updateMutation = formBuilderHooks.useUpdateForm();
-  const loc = localization || index.FORM_BUILDER_LOCALIZATION;
-  const LinkComponent = Link || "a";
+  const LinkComponent = router?.Link ?? "a";
   const [name, setName] = React.useState(existingForm?.name || "");
   const [slug, setSlug] = React.useState(existingForm?.slug || "");
   const [status, setStatus] = React.useState(
@@ -64,69 +60,82 @@ function FormBuilderPageContent({
   const handleSchemaChange = React.useCallback((newSchema) => {
     setSchema(newSchema);
   }, []);
+  const resourceForm = formBuilderHooks.useFormBuilderForm({
+    action: id ? "edit" : "create",
+    record: id ? existingForm ?? null : null,
+    successMessage: (_result, action) => action === "create" ? localization?.FORM_BUILDER_TOAST_CREATE_SUCCESS ?? t("formBuilder.toasts.createSuccess", "Form created successfully") : localization?.FORM_BUILDER_TOAST_UPDATE_SUCCESS ?? t("formBuilder.toasts.updateSuccess", "Form updated successfully"),
+    errorMessage: (error) => error.statusCode === 409 ? localization?.FORM_BUILDER_TOAST_DUPLICATE_SLUG ?? t(
+      "formBuilder.toasts.duplicateSlug",
+      "A form with this slug already exists"
+    ) : localization?.FORM_BUILDER_TOAST_ERROR ?? t(
+      "formBuilder.toasts.error",
+      "An error occurred. Please try again."
+    ),
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({
+      id: id ?? "",
+      data: {
+        name: values.name,
+        schema: values.schema,
+        status: values.status
+      }
+    }),
+    redirect: (result, action) => action === "create" && result ? `${basePath}/forms/${result.id}/edit` : false
+  });
   const handleSave = async () => {
     if (!name.trim()) {
-      sonner.toast.error("Name is required");
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_NAME_REQUIRED ?? t("formBuilder.toasts.nameRequired", "Name is required")
+      );
       return;
     }
     if (!slug.trim()) {
-      sonner.toast.error("Slug is required");
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SLUG_REQUIRED ?? t("formBuilder.toasts.slugRequired", "Slug is required")
+      );
       return;
     }
     if (!schema) {
-      sonner.toast.error("Please add at least one field to the form");
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SCHEMA_REQUIRED ?? t(
+          "formBuilder.toasts.schemaRequired",
+          "Please add at least one field to the form"
+        )
+      );
       return;
     }
-    try {
-      const schemaStr = JSON.stringify(schema);
-      if (id) {
-        await updateMutation.mutateAsync({
-          id,
-          data: {
-            name,
-            schema: schemaStr,
-            status
-          }
-        });
-        sonner.toast.success(loc.FORM_BUILDER_TOAST_UPDATE_SUCCESS);
-      } else {
-        const newForm = await createMutation.mutateAsync({
-          name,
-          slug,
-          schema: schemaStr,
-          status
-        });
-        sonner.toast.success(loc.FORM_BUILDER_TOAST_CREATE_SUCCESS);
-        navigate?.(`${basePath}/forms/${newForm.id}/edit`);
-      }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Unknown error";
-      if (message.includes("slug already exists")) {
-        sonner.toast.error(loc.FORM_BUILDER_TOAST_DUPLICATE_SLUG);
-      } else {
-        sonner.toast.error(loc.FORM_BUILDER_TOAST_ERROR);
-      }
-    }
+    await resourceForm.submit({
+      name,
+      slug,
+      status,
+      schema: JSON.stringify(schema)
+    });
+  };
+  const isSaving = resourceForm.isSubmitting;
+  const fieldError = (field) => {
+    const error = resourceForm.fieldErrors[field];
+    if (!error) return void 0;
+    return Array.isArray(error) ? error[0] : error;
   };
-  const isSaving = createMutation.isPending || updateMutation.isPending;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-page", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
       /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(LinkComponent, { href: `${basePath}/forms`, children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ArrowLeft, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "form-name", className: "text-xs text-muted-foreground", children: loc.FORM_BUILDER_LABEL_NAME }),
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "form-name", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_NAME ?? t("formBuilder.common.labelName", "Name") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           input.Input,
           {
             id: "form-name",
             value: name,
             onChange: (e) => setName(e.target.value),
-            placeholder: loc.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER,
+            placeholder: localization?.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER ?? t("formBuilder.editor.namePlaceholder", "Enter form name"),
             className: "h-8 w-48"
           }
-        )
+        ),
+        fieldError("name") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: fieldError("name") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "form-slug", className: "text-xs text-muted-foreground", children: loc.FORM_BUILDER_LABEL_SLUG }),
+        /* @__PURE__ */ jsxRuntime.jsx(label.Label, { htmlFor: "form-slug", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_SLUG ?? t("formBuilder.common.labelSlug", "Slug") }),
         /* @__PURE__ */ jsxRuntime.jsx(
           input.Input,
           {
@@ -136,11 +145,12 @@ function FormBuilderPageContent({
               setSlug(e.target.value);
               setAutoSlug(false);
             },
-            placeholder: loc.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER,
+            placeholder: localization?.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER ?? t("formBuilder.editor.slugPlaceholder", "enter-form-slug"),
             className: "h-8 w-48 font-mono text-sm",
             disabled: !!id
           }
-        )
+        ),
+        fieldError("slug") && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: fieldError("slug") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -148,7 +158,7 @@ function FormBuilderPageContent({
           {
             htmlFor: "form-status",
             className: "text-xs text-muted-foreground",
-            children: loc.FORM_BUILDER_LABEL_STATUS
+            children: localization?.FORM_BUILDER_LABEL_STATUS ?? t("formBuilder.common.labelStatus", "Status")
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs(
@@ -159,9 +169,9 @@ function FormBuilderPageContent({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { className: "h-8 w-28", children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
               /* @__PURE__ */ jsxRuntime.jsxs(select.SelectContent, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "active", children: loc.FORM_BUILDER_STATUS_ACTIVE }),
-                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "inactive", children: loc.FORM_BUILDER_STATUS_INACTIVE }),
-                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "archived", children: loc.FORM_BUILDER_STATUS_ARCHIVED })
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "active", children: localization?.FORM_BUILDER_STATUS_ACTIVE ?? t("formBuilder.common.statusActive", "Active") }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "inactive", children: localization?.FORM_BUILDER_STATUS_INACTIVE ?? t("formBuilder.common.statusInactive", "Inactive") }),
+                /* @__PURE__ */ jsxRuntime.jsx(select.SelectItem, { value: "archived", children: localization?.FORM_BUILDER_STATUS_ARCHIVED ?? t("formBuilder.common.statusArchived", "Archived") })
               ] })
             ]
           }
@@ -169,11 +179,11 @@ function FormBuilderPageContent({
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { onClick: handleSave, disabled: isSaving, children: [
         /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Save, { className: "mr-2 h-4 w-4" }),
-        isSaving ? loc.FORM_BUILDER_STATUS_SAVING : id ? loc.FORM_BUILDER_BUTTON_SAVE : loc.FORM_BUILDER_BUTTON_CREATE
+        isSaving ? localization?.FORM_BUILDER_STATUS_SAVING ?? t("formBuilder.common.statusSaving", "Saving...") : id ? localization?.FORM_BUILDER_BUTTON_SAVE ?? t("formBuilder.common.buttonSave", "Save") : localization?.FORM_BUILDER_BUTTON_CREATE ?? t("formBuilder.common.buttonCreate", "Create")
       ] }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.FormBuilder,
+      index.FormBuilder,
       {
         value: schema,
         onChange: handleSchemaChange,

package/dist/packages/stack/src/plugins/form-builder/client/components/pages/form-builder-page.internal.mjs

@@ -1,17 +1,15 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, useCallback } from 'react';
-import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { useTranslate, useNotify, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
 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 { ArrowLeft, Save } from 'lucide-react';
-import { toast } from 'sonner';
 import { FormBuilder } from '../../../../../../../ui/src/components/form-builder/index.mjs';
-import { useSuspenseFormById, useCreateForm, useUpdateForm } from '../../hooks/form-builder-hooks.mjs';
-import { FORM_BUILDER_LOCALIZATION } from '../../localization/index.mjs';
 import { slugify } from '../../../utils.mjs';
+import { useSuspenseFormById, useFormBuilderForm } from '../../hooks/form-builder-hooks.mjs';
 
 function FormBuilderPage({ id }) {
   if (id) {
@@ -30,14 +28,12 @@ function FormBuilderPageContent({
   id,
   existingForm
 }) {
-  const { navigate, Link, localization } = usePluginOverrides("form-builder", {
-    localization: FORM_BUILDER_LOCALIZATION
-  });
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization } = usePluginOverrides("form-builder");
+  const { router } = useStack();
   const basePath = useBasePath();
-  const createMutation = useCreateForm();
-  const updateMutation = useUpdateForm();
-  const loc = localization || FORM_BUILDER_LOCALIZATION;
-  const LinkComponent = Link || "a";
+  const LinkComponent = router?.Link ?? "a";
   const [name, setName] = useState(existingForm?.name || "");
   const [slug, setSlug] = useState(existingForm?.slug || "");
   const [status, setStatus] = useState(
@@ -62,69 +58,82 @@ function FormBuilderPageContent({
   const handleSchemaChange = useCallback((newSchema) => {
     setSchema(newSchema);
   }, []);
+  const resourceForm = useFormBuilderForm({
+    action: id ? "edit" : "create",
+    record: id ? existingForm ?? null : null,
+    successMessage: (_result, action) => action === "create" ? localization?.FORM_BUILDER_TOAST_CREATE_SUCCESS ?? t("formBuilder.toasts.createSuccess", "Form created successfully") : localization?.FORM_BUILDER_TOAST_UPDATE_SUCCESS ?? t("formBuilder.toasts.updateSuccess", "Form updated successfully"),
+    errorMessage: (error) => error.statusCode === 409 ? localization?.FORM_BUILDER_TOAST_DUPLICATE_SLUG ?? t(
+      "formBuilder.toasts.duplicateSlug",
+      "A form with this slug already exists"
+    ) : localization?.FORM_BUILDER_TOAST_ERROR ?? t(
+      "formBuilder.toasts.error",
+      "An error occurred. Please try again."
+    ),
+    toCreateVars: (values) => values,
+    toUpdateVars: (values) => ({
+      id: id ?? "",
+      data: {
+        name: values.name,
+        schema: values.schema,
+        status: values.status
+      }
+    }),
+    redirect: (result, action) => action === "create" && result ? `${basePath}/forms/${result.id}/edit` : false
+  });
   const handleSave = async () => {
     if (!name.trim()) {
-      toast.error("Name is required");
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_NAME_REQUIRED ?? t("formBuilder.toasts.nameRequired", "Name is required")
+      );
       return;
     }
     if (!slug.trim()) {
-      toast.error("Slug is required");
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SLUG_REQUIRED ?? t("formBuilder.toasts.slugRequired", "Slug is required")
+      );
       return;
     }
     if (!schema) {
-      toast.error("Please add at least one field to the form");
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_SCHEMA_REQUIRED ?? t(
+          "formBuilder.toasts.schemaRequired",
+          "Please add at least one field to the form"
+        )
+      );
       return;
     }
-    try {
-      const schemaStr = JSON.stringify(schema);
-      if (id) {
-        await updateMutation.mutateAsync({
-          id,
-          data: {
-            name,
-            schema: schemaStr,
-            status
-          }
-        });
-        toast.success(loc.FORM_BUILDER_TOAST_UPDATE_SUCCESS);
-      } else {
-        const newForm = await createMutation.mutateAsync({
-          name,
-          slug,
-          schema: schemaStr,
-          status
-        });
-        toast.success(loc.FORM_BUILDER_TOAST_CREATE_SUCCESS);
-        navigate?.(`${basePath}/forms/${newForm.id}/edit`);
-      }
-    } catch (error) {
-      const message = error instanceof Error ? error.message : "Unknown error";
-      if (message.includes("slug already exists")) {
-        toast.error(loc.FORM_BUILDER_TOAST_DUPLICATE_SLUG);
-      } else {
-        toast.error(loc.FORM_BUILDER_TOAST_ERROR);
-      }
-    }
+    await resourceForm.submit({
+      name,
+      slug,
+      status,
+      schema: JSON.stringify(schema)
+    });
+  };
+  const isSaving = resourceForm.isSubmitting;
+  const fieldError = (field) => {
+    const error = resourceForm.fieldErrors[field];
+    if (!error) return void 0;
+    return Array.isArray(error) ? error[0] : error;
   };
-  const isSaving = createMutation.isPending || updateMutation.isPending;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", "data-testid": "form-builder-page", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 border-b p-4", children: [
       /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: `${basePath}/forms`, children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "form-name", className: "text-xs text-muted-foreground", children: loc.FORM_BUILDER_LABEL_NAME }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form-name", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_NAME ?? t("formBuilder.common.labelName", "Name") }),
         /* @__PURE__ */ jsx(
           Input,
           {
             id: "form-name",
             value: name,
             onChange: (e) => setName(e.target.value),
-            placeholder: loc.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER,
+            placeholder: localization?.FORM_BUILDER_EDITOR_NAME_PLACEHOLDER ?? t("formBuilder.editor.namePlaceholder", "Enter form name"),
             className: "h-8 w-48"
           }
-        )
+        ),
+        fieldError("name") && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: fieldError("name") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "form-slug", className: "text-xs text-muted-foreground", children: loc.FORM_BUILDER_LABEL_SLUG }),
+        /* @__PURE__ */ jsx(Label, { htmlFor: "form-slug", className: "text-xs text-muted-foreground", children: localization?.FORM_BUILDER_LABEL_SLUG ?? t("formBuilder.common.labelSlug", "Slug") }),
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -134,11 +143,12 @@ function FormBuilderPageContent({
               setSlug(e.target.value);
               setAutoSlug(false);
             },
-            placeholder: loc.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER,
+            placeholder: localization?.FORM_BUILDER_EDITOR_SLUG_PLACEHOLDER ?? t("formBuilder.editor.slugPlaceholder", "enter-form-slug"),
             className: "h-8 w-48 font-mono text-sm",
             disabled: !!id
           }
-        )
+        ),
+        fieldError("slug") && /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: fieldError("slug") })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
         /* @__PURE__ */ jsx(
@@ -146,7 +156,7 @@ function FormBuilderPageContent({
           {
             htmlFor: "form-status",
             className: "text-xs text-muted-foreground",
-            children: loc.FORM_BUILDER_LABEL_STATUS
+            children: localization?.FORM_BUILDER_LABEL_STATUS ?? t("formBuilder.common.labelStatus", "Status")
           }
         ),
         /* @__PURE__ */ jsxs(
@@ -157,9 +167,9 @@ function FormBuilderPageContent({
             children: [
               /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-28", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
               /* @__PURE__ */ jsxs(SelectContent, { children: [
-                /* @__PURE__ */ jsx(SelectItem, { value: "active", children: loc.FORM_BUILDER_STATUS_ACTIVE }),
-                /* @__PURE__ */ jsx(SelectItem, { value: "inactive", children: loc.FORM_BUILDER_STATUS_INACTIVE }),
-                /* @__PURE__ */ jsx(SelectItem, { value: "archived", children: loc.FORM_BUILDER_STATUS_ARCHIVED })
+                /* @__PURE__ */ jsx(SelectItem, { value: "active", children: localization?.FORM_BUILDER_STATUS_ACTIVE ?? t("formBuilder.common.statusActive", "Active") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "inactive", children: localization?.FORM_BUILDER_STATUS_INACTIVE ?? t("formBuilder.common.statusInactive", "Inactive") }),
+                /* @__PURE__ */ jsx(SelectItem, { value: "archived", children: localization?.FORM_BUILDER_STATUS_ARCHIVED ?? t("formBuilder.common.statusArchived", "Archived") })
               ] })
             ]
           }
@@ -167,7 +177,7 @@ function FormBuilderPageContent({
       ] }),
       /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxs(Button, { onClick: handleSave, disabled: isSaving, children: [
         /* @__PURE__ */ jsx(Save, { className: "mr-2 h-4 w-4" }),
-        isSaving ? loc.FORM_BUILDER_STATUS_SAVING : id ? loc.FORM_BUILDER_BUTTON_SAVE : loc.FORM_BUILDER_BUTTON_CREATE
+        isSaving ? localization?.FORM_BUILDER_STATUS_SAVING ?? t("formBuilder.common.statusSaving", "Saving...") : id ? localization?.FORM_BUILDER_BUTTON_SAVE ?? t("formBuilder.common.buttonSave", "Save") : localization?.FORM_BUILDER_BUTTON_CREATE ?? t("formBuilder.common.buttonCreate", "Create")
       ] }) })
     ] }),
     /* @__PURE__ */ jsx(

package/dist/packages/stack/src/plugins/form-builder/client/components/pages/form-builder-page.mjs

@@ -1,9 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { Suspense, lazy } from 'react';
-import { FormBuilderSkeleton } from '../loading/form-builder-skeleton.mjs';
-import { ErrorBoundary } from 'react-error-boundary';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
 import { DefaultError } from '../shared/default-error.mjs';
+import { FormBuilderSkeleton } from '../loading/form-builder-skeleton.mjs';
+import { NotFoundPage } from './404-page.mjs';
 
 const FormBuilderPage = lazy(
   () => import('./form-builder-page.internal.mjs').then((m) => ({
@@ -11,7 +13,30 @@ const FormBuilderPage = lazy(
   }))
 );
 function FormBuilderPageComponent({ id }) {
-  return /* @__PURE__ */ jsx(ErrorBoundary, { FallbackComponent: DefaultError, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(FormBuilderSkeleton, {}), children: /* @__PURE__ */ jsx(FormBuilderPage, { id }) }) });
+  const { onRouteError } = usePluginOverrides("form-builder");
+  const isNew = !id;
+  const path = isNew ? "/forms/new" : `/forms/${id}/edit`;
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path,
+      PageComponent: FormBuilderPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: FormBuilderSkeleton,
+      NotFoundComponent: NotFoundPage,
+      permission: isNew ? { resource: "form-builder:form", action: "create" } : { resource: "form-builder:form", action: "update", params: { id } },
+      props: { id },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("formBuilder", error, {
+            path,
+            params: id ? { id } : {},
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
 }
 
 export { FormBuilderPageComponent };

package/dist/packages/stack/src/plugins/form-builder/client/components/pages/form-list-page.cjs

@@ -3,9 +3,11 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const formListSkeleton = require('../loading/form-list-skeleton.cjs');
-const reactErrorBoundary = require('react-error-boundary');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
 const defaultError = require('../shared/default-error.cjs');
+const formListSkeleton = require('../loading/form-list-skeleton.cjs');
+const _404Page = require('./404-page.cjs');
 
 const FormListPage = React.lazy(
   () => import('./form-list-page.internal.cjs').then((m) => ({
@@ -13,7 +15,25 @@ const FormListPage = React.lazy(
   }))
 );
 function FormListPageComponent() {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { FallbackComponent: defaultError.DefaultError, children: /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx(formListSkeleton.FormListSkeleton, {}), children: /* @__PURE__ */ jsxRuntime.jsx(FormListPage, {}) }) });
+  const { onRouteError } = context.usePluginOverrides("form-builder");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/forms",
+      PageComponent: FormListPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: formListSkeleton.FormListSkeleton,
+      NotFoundComponent: _404Page.NotFoundPage,
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("formList", error, {
+            path: "/forms",
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
 }
 
 exports.FormListPageComponent = FormListPageComponent;