@btst/plugin-form-builder 0.0.0-stage → 1.0.0

package/dist/client/components/pages/form-builder-page.mjs

@@ -0,0 +1,75 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute, PermissionRouteAccess } 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';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { useSuspenseFormForUpdate } from '../../hooks/form-builder-hooks.mjs';
+
+const FormBuilderPage = lazy(
+  () => import('./form-builder-page.internal.mjs').then((m) => ({
+    default: m.FormBuilderPage
+  }))
+);
+function FormBuilderPageComponent({ id }) {
+  const { onRouteError } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  const isNew = !id;
+  const path = isNew ? "/forms/new" : `/forms/${id}/edit`;
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path,
+      PageComponent: AuthorizedFormBuilderPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: FormBuilderSkeleton,
+      NotFoundComponent: NotFoundPage,
+      props: { id },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("formBuilder", error, {
+            path,
+            params: id ? { id } : {},
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+function AuthorizedFormBuilderPage({ id }) {
+  if (!id) {
+    return /* @__PURE__ */ jsx(
+      PermissionRouteAccess,
+      {
+        permission: formBuilderPermissions.form.create(),
+        LoadingComponent: FormBuilderSkeleton,
+        children: /* @__PURE__ */ jsx(FormBuilderPage, {})
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(AuthorizedExistingFormBuilderPage, { id });
+}
+function AuthorizedExistingFormBuilderPage({ id }) {
+  const { form } = useSuspenseFormForUpdate(id);
+  if (!form) return /* @__PURE__ */ jsx(NotFoundPage, {});
+  return /* @__PURE__ */ jsx(
+    PermissionRouteAccess,
+    {
+      permission: formBuilderPermissions.form.update({
+        formId: form.id,
+        ...form.createdBy ? { ownerId: form.createdBy } : {},
+        status: form.status
+      }),
+      LoadingComponent: FormBuilderSkeleton,
+      children: /* @__PURE__ */ jsx(FormBuilderPage, { id })
+    }
+  );
+}
+
+export { FormBuilderPageComponent };

package/dist/client/components/pages/form-list-page.cjs

@@ -0,0 +1,44 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+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 permissions = require('../../../permissions.cjs');
+const constants = require('../../constants.cjs');
+
+const FormListPage = React.lazy(
+  () => import('./form-list-page.internal.cjs').then((m) => ({
+    default: m.FormListPage
+  }))
+);
+function FormListPageComponent() {
+  const { onRouteError } = context.usePluginOverrides(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/forms",
+      permission: permissions.formBuilderPermissions.form.read({ scope: "collection" }),
+      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;

package/dist/client/components/pages/form-list-page.internal.cjs

@@ -0,0 +1,282 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const hooks = require('@btst/stack/client/hooks');
+const button = require('../../../ui/src/components/button.cjs');
+const input = require('../../../ui/src/components/input.cjs');
+const table = require('../../../ui/src/components/table.cjs');
+const dropdownMenu = require('../../../ui/src/components/dropdown-menu.cjs');
+const alertDialog = require('../../../ui/src/components/alert-dialog.cjs');
+const lucideReact = require('lucide-react');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const emptyState = require('../shared/empty-state.cjs');
+const pagination = require('../shared/pagination.cjs');
+const permissions = require('../../../permissions.cjs');
+const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
+const formBuilderHooks = require('../../hooks/form-builder-hooks.cjs');
+
+const LIST_STATE_SCHEMA = {
+  q: { type: "string", default: "", history: "replace" }
+};
+const SEARCH_DEBOUNCE_MS = 300;
+function FormListPage() {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { localization, classNames } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID);
+  const { Link, navigate, resolve } = context.usePluginSiteNavigation(
+    constants.FORM_BUILDER_PLUGIN_ID
+  );
+  const [{ q: search }, setListState] = hooks.useListState(
+    "form-builder-forms",
+    LIST_STATE_SCHEMA
+  );
+  const [searchInput, setSearchInput] = React.useState(search);
+  const lastSyncedSearch = React.useRef(search);
+  React.useEffect(() => {
+    if (search !== lastSyncedSearch.current) {
+      lastSyncedSearch.current = search;
+      setSearchInput(search);
+    }
+  }, [search]);
+  React.useEffect(() => {
+    if (searchInput === search) return;
+    const timeout = setTimeout(() => {
+      lastSyncedSearch.current = searchInput;
+      setListState({ q: searchInput });
+    }, SEARCH_DEBOUNCE_MS);
+    return () => clearTimeout(timeout);
+  }, [searchInput, search, setListState]);
+  const hasSearch = search.trim().length > 0;
+  const defaultList = formBuilderHooks.useSuspenseForms();
+  const searchedList = formBuilderHooks.useForms({ search, enabled: hasSearch });
+  const activeList = hasSearch ? searchedList : defaultList;
+  const { forms, total, hasMore, isLoadingMore, loadMore } = activeList;
+  const isSearchLoading = hasSearch && searchedList.isLoading;
+  const deleteMutation = formBuilderHooks.useDeleteForm();
+  const [deleteId, setDeleteId] = React.useState(null);
+  const LinkComponent = Link || "a";
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+    } catch {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_ERROR ?? t("formBuilder.toasts.error", "An error occurred. Please try again.")
+      );
+      return;
+    }
+    notify.success(
+      localization?.FORM_BUILDER_TOAST_DELETE_SUCCESS ?? t("formBuilder.toasts.deleteSuccess", "Form deleted successfully")
+    );
+    setDeleteId(null);
+  };
+  const getStatusBadge = (status) => {
+    const colors = {
+      active: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
+      inactive: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
+      archived: "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: `px-2 py-1 rounded-full text-xs font-medium ${colors[status] || colors.inactive}`,
+        children: status
+      }
+    );
+  };
+  const newFormButton = /* @__PURE__ */ jsxRuntime.jsx(context.PermissionAccess, { permission: permissions.formBuilderPermissions.form.create(), children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(LinkComponent, { href: resolve("forms", "new").href, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { className: "mr-2 h-4 w-4" }),
+    localization?.FORM_BUILDER_BUTTON_NEW_FORM ?? t("formBuilder.common.buttonNewForm", "New Form")
+  ] }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { testId: "form-list-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: localization?.FORM_BUILDER_LIST_TITLE ?? t("formBuilder.list.title", "Forms") }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_LIST_SUBTITLE ?? t("formBuilder.list.subtitle", "Manage your forms") })
+        ] }),
+        newFormButton
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative max-w-sm", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            "data-testid": "form-builder-list-search",
+            value: searchInput,
+            onChange: (e) => setSearchInput(e.target.value),
+            placeholder: localization?.FORM_BUILDER_LIST_SEARCH_PLACEHOLDER ?? t("formBuilder.list.searchPlaceholder", "Search forms..."),
+            className: "pl-9"
+          }
+        ),
+        isSearchLoading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" })
+      ] }),
+      forms.length === 0 ? isSearchLoading ? null : hasSearch ? /* @__PURE__ */ jsxRuntime.jsx(
+        emptyState.EmptyState,
+        {
+          title: localization?.FORM_BUILDER_LIST_SEARCH_EMPTY ?? t("formBuilder.list.searchEmpty", "No forms match your search"),
+          description: localization?.FORM_BUILDER_LIST_SEARCH_EMPTY_DESCRIPTION ?? t(
+            "formBuilder.list.searchEmptyDescription",
+            "Try a different search term."
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        emptyState.EmptyState,
+        {
+          title: localization?.FORM_BUILDER_LIST_EMPTY ?? t("formBuilder.list.empty", "No forms yet"),
+          description: localization?.FORM_BUILDER_LIST_EMPTY_DESCRIPTION ?? t(
+            "formBuilder.list.emptyDescription",
+            "Create your first form to get started."
+          ),
+          action: newFormButton
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn("rounded-lg border", classNames?.table),
+            "data-testid": "form-builder-list-table",
+            children: /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_NAME ?? t("formBuilder.list.columnName", "Name") }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_SLUG ?? t("formBuilder.list.columnSlug", "Slug") }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_STATUS ?? t("formBuilder.list.columnStatus", "Status") }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.FORM_BUILDER_LIST_COLUMN_CREATED ?? t("formBuilder.list.columnCreated", "Created") }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-12", children: localization?.FORM_BUILDER_LIST_COLUMN_ACTIONS ?? t("formBuilder.list.columnActions", "Actions") })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: forms.map((form) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { className: classNames?.tableRow, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-medium", children: form.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-muted-foreground font-mono text-sm", children: form.slug }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: getStatusBadge(form.status) }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "text-muted-foreground", children: new Date(form.createdAt).toLocaleDateString() }),
+                /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(dropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(button.Button, { variant: "ghost", size: "icon", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoreHorizontal, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: localization?.FORM_BUILDER_LIST_COLUMN_ACTIONS ?? t(
+                      "formBuilder.list.columnActions",
+                      "Actions"
+                    ) })
+                  ] }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(dropdownMenu.DropdownMenuContent, { align: "end", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      context.PermissionAccess,
+                      {
+                        permission: permissions.formBuilderPermissions.form.update({
+                          formId: form.id,
+                          ...form.createdBy ? { ownerId: form.createdBy } : {},
+                          status: form.status
+                        }),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          dropdownMenu.DropdownMenuItem,
+                          {
+                            onClick: () => navigate("forms", form.id, "edit"),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "mr-2 h-4 w-4" }),
+                              localization?.FORM_BUILDER_LIST_ACTION_EDIT ?? t("formBuilder.list.actionEdit", "Edit")
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      context.PermissionAccess,
+                      {
+                        permission: permissions.formBuilderPermissions.submission.read(
+                          {
+                            scope: "collection",
+                            formId: form.id,
+                            formExists: true,
+                            ...form.createdBy ? { ownerId: form.createdBy } : {}
+                          }
+                        ),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          dropdownMenu.DropdownMenuItem,
+                          {
+                            onClick: () => navigate("forms", form.id, "submissions"),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "mr-2 h-4 w-4" }),
+                              localization?.FORM_BUILDER_LIST_ACTION_SUBMISSIONS ?? t(
+                                "formBuilder.list.actionSubmissions",
+                                "Submissions"
+                              )
+                            ]
+                          }
+                        )
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      context.PermissionAccess,
+                      {
+                        permission: permissions.formBuilderPermissions.form.delete({
+                          formId: form.id,
+                          ...form.createdBy ? { ownerId: form.createdBy } : {},
+                          status: form.status
+                        }),
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          dropdownMenu.DropdownMenuItem,
+                          {
+                            className: "text-destructive",
+                            onClick: () => setDeleteId(form.id),
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "mr-2 h-4 w-4" }),
+                              localization?.FORM_BUILDER_LIST_ACTION_DELETE ?? t("formBuilder.list.actionDelete", "Delete")
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                ] }) })
+              ] }, form.id)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          pagination.Pagination,
+          {
+            total,
+            showing: forms.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore,
+            className: classNames?.pagination,
+            labels: {
+              showing: localization?.FORM_BUILDER_LIST_PAGINATION_SHOWING ?? t(
+                "formBuilder.list.paginationShowing",
+                "Showing {count} of {total}"
+              ),
+              next: localization?.FORM_BUILDER_LIST_PAGINATION_NEXT ?? t("formBuilder.list.paginationNext", "Load More"),
+              loading: localization?.FORM_BUILDER_STATUS_LOADING ?? t("formBuilder.common.statusLoading", "Loading...")
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogTitle, { children: localization?.FORM_BUILDER_LIST_DELETE_TITLE ?? t("formBuilder.list.deleteTitle", "Delete Form") }),
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogDescription, { children: localization?.FORM_BUILDER_EDITOR_DELETE_CONFIRM ?? t(
+          "formBuilder.editor.deleteConfirm",
+          "Are you sure you want to delete this form? All submissions will also be deleted."
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(alertDialog.AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(alertDialog.AlertDialogCancel, { children: localization?.FORM_BUILDER_BUTTON_CANCEL ?? t("formBuilder.common.buttonCancel", "Cancel") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          alertDialog.AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? localization?.FORM_BUILDER_STATUS_DELETING ?? t("formBuilder.common.statusDeleting", "Deleting...") : localization?.FORM_BUILDER_BUTTON_DELETE ?? t("formBuilder.common.buttonDelete", "Delete")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+exports.FormListPage = FormListPage;