\n\t\t\t
\n\t);\n}\n\n/**\n * Default error component for PageRenderer\n */\nfunction DefaultErrorComponent({ error }: { error: unknown }): ReactNode {\n\treturn (\n\t\t\n\t\t\t\t{uiBuilderLocalization.pageRenderer.loading}\n\t\t\t
\n\t\t\n\t\t\t
\n\t);\n}\n\n/**\n * Default not found component for PageRenderer\n */\nfunction DefaultNotFoundComponent(): ReactNode {\n\treturn (\n\t\t\n\t\t\t\t{uiBuilderLocalization.pageRenderer.error}\n\t\t\t
\n\t\t\t\n\t\t\t\t{error instanceof Error ? error.message : String(error)}\n\t\t\t
\n\t\t\n\t\t\t
\n\t);\n}\n\nexport interface PageRendererProps {\n\t/** URL slug of the UI Builder page to render */\n\tslug: string;\n\t/** Component registry to use for rendering (defaults to defaultComponentRegistry) */\n\tcomponentRegistry?: ComponentRegistry;\n\t/** Runtime variable values to override defaults */\n\tvariableValues?: Record\n\t\t\t\t{uiBuilderLocalization.pageRenderer.notFound}\n\t\t\t
\n\t\t\n\t\t\t
\n\t);\n}\n\n/**\n * Default error component for PageRenderer\n */\nfunction DefaultErrorComponent({ error }: { error: unknown }): ReactNode {\n\tconst t = useTranslate();\n\tconst { localization } =\n\t\tusePluginOverrides\n\t\t\t\t{localization?.pageRenderer?.loading ??\n\t\t\t\t\tt(\n\t\t\t\t\t\t\"uiBuilder.pageRenderer.loading\",\n\t\t\t\t\t\tuiBuilderLocalization.pageRenderer.loading,\n\t\t\t\t\t)}\n\t\t\t
\n\t\t\n\t\t\t
\n\t);\n}\n\n/**\n * Default not found component for PageRenderer\n */\nfunction DefaultNotFoundComponent(): ReactNode {\n\tconst t = useTranslate();\n\tconst { localization } =\n\t\tusePluginOverrides\n\t\t\t\t{localization?.pageRenderer?.error ??\n\t\t\t\t\tt(\n\t\t\t\t\t\t\"uiBuilder.pageRenderer.error\",\n\t\t\t\t\t\tuiBuilderLocalization.pageRenderer.error,\n\t\t\t\t\t)}\n\t\t\t
\n\t\t\t\n\t\t\t\t{error instanceof Error ? error.message : String(error)}\n\t\t\t
\n\t\t\n\t\t\t
\n\t);\n}\n\nexport interface PageRendererProps {\n\t/** URL slug of the UI Builder page to render */\n\tslug: string;\n\t/** Component registry to use for rendering (defaults to defaultComponentRegistry) */\n\tcomponentRegistry?: ComponentRegistry;\n\t/** Runtime variable values to override defaults */\n\tvariableValues?: Record\n\t\t\t\t{localization?.pageRenderer?.notFound ??\n\t\t\t\t\tt(\n\t\t\t\t\t\t\"uiBuilder.pageRenderer.notFound\",\n\t\t\t\t\t\tuiBuilderLocalization.pageRenderer.notFound,\n\t\t\t\t\t)}\n\t\t\t
\n\t\t\n\t\t\t\t{isMobile && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t {\n\t\t\t\t\t\tsetSlug(e.target.value);\n\t\t\t\t\t\tsetAutoSlug(false);\n\t\t\t\t\t}}\n\t\t\t\t\tplaceholder={loc.pageBuilder.slugPlaceholder}\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisMobile ? \"h-9 font-mono text-sm\" : \"h-8 w-48 font-mono text-sm\"\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={!!id}\n\t\t\t\t/>\n\t\t\t
\n\n\t\t\t\n\t\t\t\t{isMobile && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t setStatus(v as typeof status)}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{loc.pageBuilder.statusOptions.draft}\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{loc.pageBuilder.statusOptions.published}\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{loc.pageBuilder.statusOptions.archived}\n\t\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n\n\t// NavBar left children - back button, mobile popover, desktop inline fields\n\tconst navLeftChildren = (\n\t\t\n\t\t\t\n\n\t\t\t{/* Mobile: Popover with settings */}\n\t\t\t
\n\t);\n\n\t// NavBar right children - save button (icon only on mobile, with text on desktop)\n\tconst navRightChildren = (\n\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t \n\t\t\t
\n\n\t\t\t{/* Desktop: Inline fields */}\n\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{pageSettingsFields(true)}\n\t\t\t\t\t\tPage Settings
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tConfigure page slug and status\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t{pageSettingsFields(false)}\n\t\t\t
\n\t\t\n\t\t\t 0 ? existingLayers : undefined}\n\t\t\t\tonChange={handleLayersChange}\n\t\t\t\tinitialVariables={\n\t\t\t\t\texistingVariables.length > 0 ? existingVariables : undefined\n\t\t\t\t}\n\t\t\t\tonVariablesChange={handleVariablesChange}\n\t\t\t\tcomponentRegistry={componentRegistry}\n\t\t\t\tfunctionRegistry={functionRegistry}\n\t\t\t\tpersistLayerStore={false}\n\t\t\t\tallowVariableEditing={true}\n\t\t\t\tallowPagesCreation={false}\n\t\t\t\tallowPagesDeletion={false}\n\t\t\t\tshowExport={false}\n\t\t\t\tnavLeftChildren={navLeftChildren}\n\t\t\t\tnavRightChildren={navRightChildren}\n\t\t\t/>\n\t\t
\n\t);\n}\n",
+ "content": "\"use client\";\n\nimport { useState, useCallback } from \"react\";\nimport {\n\tuseBasePath,\n\tuseNotify,\n\tusePluginOverrides,\n\tuseTranslate,\n} from \"@btst/stack/context\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"@/components/ui/select\";\nimport {\n\tPopover,\n\tPopoverContent,\n\tPopoverTrigger,\n} from \"@/components/ui/popover\";\nimport { Label } from \"@/components/ui/label\";\nimport { ArrowLeft, Save, Settings2 } from \"lucide-react\";\nimport UIBuilder from \"@/components/ui/ui-builder\";\nimport type {\n\tComponentLayer,\n\tComponentRegistry,\n\tVariable,\n} from \"@/components/ui/ui-builder/types\";\n\nimport { useLayerStore } from \"@/lib/ui-builder/store/layer-store\";\nimport { useRegisterPageAIContext } from \"@btst/stack/plugins/ai-chat/client/context\";\nimport {\n\tuseSuspenseUIBuilderPage,\n\tuseUIBuilderPageForm,\n} from \"@btst/stack/plugins/ui-builder/client/hooks\";\nimport type { UIBuilderPluginOverrides } from \"../../overrides\";\nimport { uiBuilderLocalization } from \"../../localization\";\nimport { defaultComponentRegistry } from \"../../registry\";\nimport type { SerializedUIBuilderPage } from \"../../../types\";\n\nexport interface PageBuilderPageProps {\n\tid?: string;\n}\n\n/**\n * Generate a concise AI-readable description of the available components\n * in the component registry, including their prop names.\n */\nfunction buildRegistryDescription(registry: ComponentRegistry): string {\n\tconst lines: string[] = [];\n\tfor (const [name, entry] of Object.entries(registry) as [\n\t\tstring,\n\t\t{ schema?: unknown },\n\t][]) {\n\t\tlet propsLine = \"\";\n\t\ttry {\n\t\t\tconst shape = (entry.schema as any)?.shape as\n\t\t\t\t| Record\n\t\t\t\t{isMobile && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t {\n\t\t\t\t\t\tsetSlug(e.target.value);\n\t\t\t\t\t\tsetAutoSlug(false);\n\t\t\t\t\t\tpageForm.clearErrors();\n\t\t\t\t\t}}\n\t\t\t\t\tplaceholder={loc.pageBuilder.slugPlaceholder}\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisMobile ? \"h-9 font-mono text-sm\" : \"h-8 w-48 font-mono text-sm\"\n\t\t\t\t\t}\n\t\t\t\t\tdisabled={!!id}\n\t\t\t\t\taria-invalid={!!slugErrorMessage}\n\t\t\t\t/>\n\t\t\t\t{slugErrorMessage && (\n\t\t\t\t\t
\n\n\t\t\t\n\t\t\t\t\t\t{slugErrorMessage}\n\t\t\t\t\t
\n\t\t\t\t)}\n\t\t\t\n\t\t\t\t{isMobile && (\n\t\t\t\t\t\n\t\t\t\t)}\n\t\t\t\t setStatus(v as typeof status)}\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{loc.pageBuilder.statusOptions.draft}\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{loc.pageBuilder.statusOptions.published}\n\t\t\t\t\t\t \n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{loc.pageBuilder.statusOptions.archived}\n\t\t\t\t\t\t \n\t\t\t\t\t \n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n\n\t// NavBar left children - back button, mobile popover, desktop inline fields\n\tconst navLeftChildren = (\n\t\t\n\t\t\t\n\n\t\t\t{/* Mobile: Popover with settings */}\n\t\t\t
\n\t);\n\n\t// NavBar right children - save button (icon only on mobile, with text on desktop)\n\tconst navRightChildren = (\n\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t \n\t\t\t\t\t\n\t\t\t\t\t\t \n\t\t\t\t \n\t\t\t
\n\n\t\t\t{/* Desktop: Inline fields */}\n\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t{pageSettingsFields(true)}\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{loc.pageBuilder.settingsTitle}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t{loc.pageBuilder.settingsDescription}\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t{pageSettingsFields(false)}\n\t\t\t
\n\t\t\n\t\t\t 0 ? existingLayers : undefined}\n\t\t\t\tonChange={handleLayersChange}\n\t\t\t\tinitialVariables={\n\t\t\t\t\texistingVariables.length > 0 ? existingVariables : undefined\n\t\t\t\t}\n\t\t\t\tonVariablesChange={handleVariablesChange}\n\t\t\t\tcomponentRegistry={componentRegistry}\n\t\t\t\tfunctionRegistry={functionRegistry}\n\t\t\t\tpersistLayerStore={false}\n\t\t\t\tallowVariableEditing={true}\n\t\t\t\tallowPagesCreation={false}\n\t\t\t\tallowPagesDeletion={false}\n\t\t\t\tshowExport={false}\n\t\t\t\tnavLeftChildren={navLeftChildren}\n\t\t\t\tnavRightChildren={navRightChildren}\n\t\t\t/>\n\t\t
\n\t);\n}\n",
"target": "src/components/btst/ui-builder/client/components/pages/page-builder-page.internal.tsx"
},
{
"path": "btst/ui-builder/client/components/pages/page-builder-page.tsx",
"type": "registry:page",
- "content": "\"use client\";\n\nimport { lazy, Suspense } from \"react\";\nimport { PageBuilderSkeleton } from \"../loading/page-builder-skeleton\";\nimport { ErrorBoundary } from \"react-error-boundary\";\nimport { DefaultError } from \"../shared/default-error\";\n\nconst PageBuilderPageInternal = lazy(() =>\n\timport(\"./page-builder-page.internal\").then((m) => ({\n\t\tdefault: m.PageBuilderPage,\n\t})),\n);\n\nexport interface PageBuilderPageProps {\n\tid?: string;\n}\n\nexport function PageBuilderPage({ id }: PageBuilderPageProps) {\n\treturn (\n\t\t\n\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t \n\t\t\t\t\t\t\t\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t
\n\n\t\t\t{/* Delete confirmation dialog */}\n\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t{pages.length === 0 ? (\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t{loc.pageList.title}
\n\t\t\t\t\t\t{loc.pageList.description}
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t\t\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t
\n\n\t\t\t{/* Delete confirmation dialog */}\n\t\t\t\n\t\t\t\t\t
\n\n\t\t\t\t{pages.length === 0 ? (\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t{createButton}\n\t\t\t\t\n\t\t\t\t\t\t\t{localization?.pageList?.title ??\n\t\t\t\t\t\t\t\tt(\n\t\t\t\t\t\t\t\t\t\"uiBuilder.pageList.title\",\n\t\t\t\t\t\t\t\t\tuiBuilderLocalization.pageList.title,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t{localization?.pageList?.description ??\n\t\t\t\t\t\t\t\tt(\n\t\t\t\t\t\t\t\t\t\"uiBuilder.pageList.description\",\n\t\t\t\t\t\t\t\t\tuiBuilderLocalization.pageList.description,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\n\t\t\t\t\t\t\n\t\t\t
\n\t);\n}\n",
+ "content": "\"use client\";\n\nimport { AlertCircle } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { usePluginOverrides, useTranslate } from \"@btst/stack/context\";\nimport type { UIBuilderPluginOverrides } from \"../../overrides\";\nimport { uiBuilderLocalization } from \"../../localization\";\n\ninterface DefaultErrorProps {\n\terror: unknown;\n\tresetErrorBoundary?: () => void;\n}\n\nexport function DefaultError({ error, resetErrorBoundary }: DefaultErrorProps) {\n\tconst t = useTranslate();\n\tconst { localization } =\n\t\tusePluginOverrides\n\t\t\t\t
\n\t\t\t\n\t\t\t\tSomething went wrong\n\t\t\t
\n\t\t\t\n\t\t\t\t{(error instanceof Error ? error.message : undefined) ||\n\t\t\t\t\t\"An unexpected error occurred\"}\n\t\t\t
\n\t\t\t{resetErrorBoundary && (\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t\t\t
\n\t);\n}\n",
"target": "src/components/btst/ui-builder/client/components/shared/default-error.tsx"
},
{
@@ -100,19 +100,19 @@
{
"path": "btst/ui-builder/client/components/shared/pagination.tsx",
"type": "registry:component",
- "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronRight } from \"lucide-react\";\n\ninterface PaginationProps {\n\ttotal: number;\n\tshowing: number;\n\thasMore: boolean;\n\tisLoadingMore: boolean;\n\tonLoadMore: () => void;\n\tlabels?: {\n\t\tshowing?: string;\n\t\tprevious?: string;\n\t\tnext?: string;\n\t};\n}\n\nexport function Pagination({\n\ttotal,\n\tshowing,\n\thasMore,\n\tisLoadingMore,\n\tonLoadMore,\n\tlabels = {},\n}: PaginationProps) {\n\tconst {\n\t\tshowing: showingLabel = \"Showing {count} of {total}\",\n\t\tnext = \"Load More\",\n\t} = labels;\n\n\tconst showingText = showingLabel\n\t\t.replace(\"{count}\", String(showing))\n\t\t.replace(\"{total}\", String(total));\n\n\treturn (\n\t\t\n\t\t\t\t
\n\t\t\t{title}
\n\t\t\t\n\t\t\t\t{(error instanceof Error ? error.message : undefined) ||\n\t\t\t\t\tunexpectedError}\n\t\t\t
\n\t\t\t{resetErrorBoundary && (\n\t\t\t\t\n\t\t\t)}\n\t\t\n\t\t\t\n\t\t\t\t\t{isLoadingMore ? \"Loading...\" : next}\n\t\t\t\t\t
\n\t);\n}\n",
+ "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { ChevronRight } from \"lucide-react\";\n\ninterface PaginationProps {\n\ttotal: number;\n\tshowing: number;\n\thasMore: boolean;\n\tisLoadingMore: boolean;\n\tonLoadMore: () => void;\n\tlabels?: {\n\t\tshowing?: string;\n\t\tprevious?: string;\n\t\tnext?: string;\n\t\tloading?: string;\n\t};\n}\n\nexport function Pagination({\n\ttotal,\n\tshowing,\n\thasMore,\n\tisLoadingMore,\n\tonLoadMore,\n\tlabels = {},\n}: PaginationProps) {\n\tconst {\n\t\tshowing: showingLabel = \"Showing {count} of {total}\",\n\t\tnext = \"Load More\",\n\t\tloading = \"Loading...\",\n\t} = labels;\n\n\tconst showingText = showingLabel\n\t\t.replace(\"{count}\", String(showing))\n\t\t.replace(\"{total}\", String(total));\n\n\treturn (\n\t\t{showingText}
\n\t\t\t{hasMore && (\n\t\t\t\t\n\t\t\t\n\t\t\t\t\t{isLoadingMore ? loading : next}\n\t\t\t\t\t
\n\t);\n}\n",
"target": "src/components/btst/ui-builder/client/components/shared/pagination.tsx"
},
{
"path": "btst/ui-builder/client/localization/index.ts",
"type": "registry:lib",
- "content": "/**\n * UI Builder plugin localization strings\n */\nexport const uiBuilderLocalization = {\n\tpageList: {\n\t\ttitle: \"UI Builder Pages\",\n\t\tdescription:\n\t\t\t\"Create and manage visual pages with the drag-and-drop builder\",\n\t\tcreateButton: \"Create Page\",\n\t\temptyState: {\n\t\t\ttitle: \"No pages yet\",\n\t\t\tdescription: \"Create your first page with the visual builder\",\n\t\t},\n\t\tcolumns: {\n\t\t\tname: \"Name\",\n\t\t\tslug: \"Slug\",\n\t\t\tstatus: \"Status\",\n\t\t\tupdatedAt: \"Updated\",\n\t\t\tactions: \"Actions\",\n\t\t},\n\t\tactions: {\n\t\t\tedit: \"Edit\",\n\t\t\tdelete: \"Delete\",\n\t\t},\n\t\tdeleteDialog: {\n\t\t\ttitle: \"Delete Page\",\n\t\t\tdescription:\n\t\t\t\t\"Are you sure you want to delete this page? This action cannot be undone.\",\n\t\t\tcancel: \"Cancel\",\n\t\t\tconfirm: \"Delete\",\n\t\t},\n\t},\n\tpageBuilder: {\n\t\tnewPage: \"New Page\",\n\t\teditPage: \"Edit Page\",\n\t\tbackToList: \"Back to Pages\",\n\t\tsave: \"Save\",\n\t\tsaving: \"Saving...\",\n\t\tsaved: \"Saved\",\n\t\tsaveError: \"Failed to save\",\n\t\tslugLabel: \"Page Slug\",\n\t\tslugPlaceholder: \"my-page-slug\",\n\t\tslugDescription: \"URL-friendly identifier for this page\",\n\t\tstatusLabel: \"Status\",\n\t\tstatusOptions: {\n\t\t\tdraft: \"Draft\",\n\t\t\tpublished: \"Published\",\n\t\t\tarchived: \"Archived\",\n\t\t},\n\t\tvalidation: {\n\t\t\tslugRequired: \"Slug is required\",\n\t\t\tslugFormat:\n\t\t\t\t\"Slug must contain only lowercase letters, numbers, and hyphens\",\n\t\t\tlayersRequired: \"Page must have at least one component\",\n\t\t},\n\t},\n\tpageRenderer: {\n\t\tloading: \"Loading page...\",\n\t\tnotFound: \"Page not found\",\n\t\terror: \"Failed to load page\",\n\t},\n} as const;\n\nexport type UIBuilderLocalization = typeof uiBuilderLocalization;\n",
+ "content": "export interface UIBuilderLocalization {\n\tpageList: {\n\t\ttitle: string;\n\t\tdescription: string;\n\t\tcreateButton: string;\n\t\temptyState: { title: string; description: string };\n\t\tcolumns: {\n\t\t\tname: string;\n\t\t\tslug: string;\n\t\t\tstatus: string;\n\t\t\tupdatedAt: string;\n\t\t\tactions: string;\n\t\t};\n\t\tactions: { label: string; edit: string; delete: string };\n\t\tdeleteDialog: {\n\t\t\ttitle: string;\n\t\t\tdescription: string;\n\t\t\tcancel: string;\n\t\t\tconfirm: string;\n\t\t\tdeleting: string;\n\t\t};\n\t\tpagination: {\n\t\t\tshowing: string;\n\t\t\tloadMore: string;\n\t\t\tloading: string;\n\t\t};\n\t\tdeleteSuccess: string;\n\t\tdeleteError: string;\n\t};\n\tpageBuilder: {\n\t\tnewPage: string;\n\t\teditPage: string;\n\t\tbackToList: string;\n\t\tsave: string;\n\t\tsaving: string;\n\t\tsaved: string;\n\t\tsaveError: string;\n\t\tduplicateSlug: string;\n\t\tslugLabel: string;\n\t\tslugPlaceholder: string;\n\t\tslugDescription: string;\n\t\tstatusLabel: string;\n\t\tsettingsTitle: string;\n\t\tsettingsDescription: string;\n\t\tstatusOptions: {\n\t\t\tdraft: string;\n\t\t\tpublished: string;\n\t\t\tarchived: string;\n\t\t};\n\t\tvalidation: {\n\t\t\tslugRequired: string;\n\t\t\tslugFormat: string;\n\t\t\tlayersRequired: string;\n\t\t};\n\t};\n\tpageRenderer: { loading: string; notFound: string; error: string };\n\tcommon: {\n\t\terrorTitle: string;\n\t\tunexpectedError: string;\n\t\ttryAgain: string;\n\t};\n}\n\ntype DeepPartial{showingText}
\n\t\t\t{hasMore && (\n\t\t\t\t\n
\n \n *
\n * My Page
\n *\n
\n \n
\n \n {codeBlocks.variables!=='[]' && (\n
\n \n \n
\n )}\n \n
\n \n \n
\n \n
\n \n {children}\n \n );\n },\n };\n }, []);\n\n const remarkPlugins = useMemo(() => {\n return [remarkGfm, remarkMath];\n }, []);\n\n return (\n \n {funcDef.name}\n {funcDef.description && (\n \n {funcDef.description}\n \n )}\n
\n \n {isCurrentlyBound && boundVariable ? (\n // Bound state - show variable info and unbind button\n
\n );\n}\n\nexport function FormFieldWrapper({\n label,\n isRequired,\n fieldConfigItem,\n children,\n}: {\n label: string;\n isRequired?: boolean;\n fieldConfigItem?: { description?: React.ReactNode };\n children: React.ReactNode;\n}) {\n return (\n \n \n
\n ) : (\n // Unbound state - show normal field with bind button\n <>\n \n \n \n \n \n {!isImmutable && (\n \n \n \n \n Unbind Variable \n \n )}\n
\n \n \n
\n \n
\n \n {boundVariable.name}\n \n {boundVariable.type}\n \n {isImmutable && (\n \n \n )}\n
\n \n {getFunctionDisplayValue(boundVariable)}\n \n {children}
\n \n \n \n \n \n \n \n \n {tooltipLabel} \n \n \n handleBindToVariable(variable.id)}\n className=\"flex flex-col items-start p-3\"\n >\n \n \n
\n \n )}\n \n {bindLabel}\n
\n {filteredVariables.length > 0 ? (\n filteredVariables.map((variable) => (\n \n \n
\n \n ))\n ) : (\n \n
\n \n {variable.name}\n \n {variable.type}\n \n
\n \n {getFunctionDisplayValue(variable)}\n \n \n {emptyMessage}\n
\n )}\n \n {isCurrentlyBound && boundVariable ? (\n // Bound state - show variable info and unbind button\n
\n );\n}\n",
- "target": "src/lib/ui-builder/registry/form-field-overrides.tsx"
- },
- {
- "path": "ui/lib/ui-builder/store/layer-utils.ts",
- "type": "registry:lib",
- "content": "import type { LayerStore } from \"@/lib/ui-builder/store/layer-store\";\nimport type { ComponentLayer, ComponentRegistry } from '@workspace/ui/components/ui-builder/types';\nimport { getDefaultProps } from '@/lib/ui-builder/store/schema-utils';\nimport { TAILWIND_V4_COLOR_KEYS } from '@workspace/ui/components/ui-builder/internal/utils/base-colors';\n\n/**\n * Recursively visits each layer in the layer tree and applies the provided visitor function to each layer.\n * The visitor function can modify the layer and its children as needed.\n *\n * @param layer - The current layer to visit.\n * @param visitor - A function that takes a layer and returns a modified layer.\n * @returns The modified layer after applying the visitor function.\n */\nexport const visitLayer = (layer: ComponentLayer, parentLayer: ComponentLayer | null, visitor: (layer: ComponentLayer, parentLayer: ComponentLayer | null) => ComponentLayer): ComponentLayer => {\n // Apply the visitor to the current layer\n const updatedLayer = visitor(layer, parentLayer);\n\n // Recursively traverse and update children if they exist\n if (hasLayerChildren(updatedLayer)) {\n const updatedChildren = updatedLayer.children.map((child) =>\n visitLayer(child, updatedLayer, visitor)\n );\n return { ...updatedLayer, children: updatedChildren };\n }\n\n return updatedLayer;\n};\n\nexport const countLayers = (layers: ComponentLayer['children']): number => {\n if (typeof layers === 'string' || !Array.isArray(layers)) {\n // String or VariableReference\n return 0;\n }\n return layers.reduce((count, layer) => {\n if (hasLayerChildren(layer)) {\n return count + 1 + countLayers(layer.children);\n }\n return count + 1;\n }, 0);\n};\n\nexport const addLayer = (layers: ComponentLayer[], newLayer: ComponentLayer, parentId?: string, parentPosition?: number): ComponentLayer[] => {\n const updatedPages = layers.map((page) =>\n visitLayer(page, null, (layer) => {\n if (layer.id === parentId) {\n // Handle both layers with existing children and those with undefined/null children\n let updatedChildren: ComponentLayer[] = [];\n \n if (hasLayerChildren(layer)) {\n updatedChildren = [...layer.children];\n } else if (layer.children === undefined || layer.children === null || (Array.isArray(layer.children) && layer.children.length === 0)) {\n // Initialize children array for layers with undefined/null children or empty arrays\n updatedChildren = [];\n } else {\n // For layers with string children or other non-array types, we can't add children\n return layer;\n }\n\n if (parentPosition !== undefined) {\n if (parentPosition < 0) {\n // If parentPosition is negative, insert at the beginning\n updatedChildren = [newLayer, ...updatedChildren];\n } else if (parentPosition >= updatedChildren.length) {\n // If parentPosition is greater than or equal to the length, append to the end\n updatedChildren = [...updatedChildren, newLayer];\n } else {\n // Insert at the specified position\n updatedChildren = [\n ...updatedChildren.slice(0, parentPosition),\n newLayer,\n ...updatedChildren.slice(parentPosition)\n ];\n }\n } else {\n // If parentPosition is undefined, append to the end\n updatedChildren = [...updatedChildren, newLayer];\n }\n\n return { ...layer, children: updatedChildren };\n }\n\n return layer;\n })\n );\n return updatedPages;\n}\n\nexport const findAllParentLayersRecursive = (layers: ComponentLayer[], layerId: string): ComponentLayer[] => {\n const parents: ComponentLayer[] = [];\n\n const findParents = (layers: ComponentLayer[], targetId: string): boolean => {\n for (const layer of layers) {\n if (hasLayerChildren(layer)) {\n if (layer.children.some(child => child.id === targetId)) {\n parents.push(layer);\n // Continue searching upwards\n findParents(layers, layer.id);\n return true;\n }\n\n if (findParents(layer.children, targetId)) {\n parents.push(layer);\n return true;\n }\n }\n }\n return false;\n };\n\n findParents(layers, layerId);\n return parents;\n};\n\nexport const findLayerRecursive = (layers: ComponentLayer[], layerId: string): ComponentLayer | undefined => {\n for (const layer of layers) {\n if (layer.id === layerId) {\n return layer;\n }\n if (hasLayerChildren(layer)) {\n const foundInChildren = findLayerRecursive(layer.children, layerId);\n if (foundInChildren) {\n return foundInChildren;\n }\n }\n }\n return undefined;\n};\n\nexport const duplicateWithNewIdsAndName = (layer: ComponentLayer, addCopySuffix: boolean = true): ComponentLayer => {\n const newLayer: ComponentLayer = { ...layer, id: createId() };\n if (layer.name) {\n newLayer.name = `${ layer.name }${ addCopySuffix ? ' (Copy)' : ''}`;\n }\n if (hasLayerChildren(newLayer) && hasLayerChildren(layer)) {\n newLayer.children = layer.children.map(child => duplicateWithNewIdsAndName(child, false));\n }\n return newLayer;\n };\n\n\nexport function createId(): string {\n const ALPHABET = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';\n const ID_LENGTH = 7;\n let result = '';\n const alphabetLength = ALPHABET.length;\n\n for (let i = 0; i < ID_LENGTH; i++) {\n const randomIndex = Math.floor(Math.random() * alphabetLength);\n result += ALPHABET.charAt(randomIndex);\n }\n\n return result;\n}\n\n/**\n * Checks if a layer has ComponentLayer[] children (not string or VariableReference)\n * Note: VariableReference is an object (not an array), so Array.isArray returns false for it\n */\nexport const hasLayerChildren = (layer: ComponentLayer): layer is ComponentLayer & { children: ComponentLayer[] } => {\n return Array.isArray(layer.children) && typeof layer.children !== 'string';\n};\n\nexport function migrateV1ToV2(persistedState: unknown): LayerStore {\n type TextLayer = {\n id: string;\n name?: string;\n type: '_text_';\n \n props: Record\n \n
\n ) : (\n // Unbound state - show normal field with bind button\n <>\n \n \n \n \n \n {!isImmutable && (\n \n \n \n \n Unbind Variable \n \n )}\n
\n \n \n
\n \n
\n \n {boundVariable.name}\n \n {boundVariable.type}\n \n {isImmutable && (\n \n \n )}\n
\n \n {String(boundVariable.defaultValue)}\n \n {children}
\n \n \n \n \n \n \n \n \n Bind Children to Variable \n \n \n handleBindToVariable(variable.id)}\n className=\"flex flex-col items-start p-3\"\n >\n \n \n
\n \n )}\n \n Bind Children to Variable\n
\n {variables.filter(v => v.type === 'string').length > 0 ? (\n variables\n .filter(v => v.type === 'string')\n .map((variable) => (\n \n \n
\n \n ))\n ) : (\n \n
\n \n {variable.name}\n \n {variable.type}\n \n
\n \n {String(variable.defaultValue)}\n \n \n No string variables defined\n
\n )}\n
+ {navLeftChildren}
+ {navRightChildren}
+
+
+ ),
+}));
+
+const page: SerializedUIBuilderPage = {
+ id: "page-1",
+ contentTypeId: "type-1",
+ slug: "home",
+ data: JSON.stringify({
+ layers: "[]",
+ variables: "[]",
+ status: "draft",
+ }),
+ createdAt: new Date("2024-01-01").toISOString(),
+ updatedAt: new Date("2024-01-02").toISOString(),
+ parsedData: { layers: "[]", variables: "[]", status: "draft" },
+};
+
+let container: HTMLDivElement;
+let root: Root;
+let queryClient: QueryClient;
+
+beforeEach(() => {
+ container = document.createElement("div");
+ document.body.appendChild(container);
+ root = createRoot(container);
+ queryClient = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+ });
+
+ hooks.useSuspenseUIBuilderPages.mockReturnValue({
+ pages: [page],
+ total: 1,
+ loadMore: vi.fn(),
+ hasMore: false,
+ isLoadingMore: false,
+ refetch: vi.fn(),
+ });
+ hooks.useDeleteUIBuilderPage.mockReturnValue({
+ mutateAsync: vi.fn().mockResolvedValue({ success: true }),
+ isPending: false,
+ });
+ hooks.useSuspenseUIBuilderPage.mockReturnValue({ page, refetch: vi.fn() });
+ hooks.useUIBuilderPageForm.mockReturnValue({
+ action: "create",
+ record: null,
+ isLoadingRecord: false,
+ recordError: null,
+ defaultValues: undefined,
+ submit: vi.fn().mockResolvedValue(page),
+ isSubmitting: false,
+ error: null,
+ fieldErrors: {},
+ clearErrors: vi.fn(),
+ });
+});
+
+afterEach(async () => {
+ await act(async () => root.unmount());
+ container.remove();
+ document.body.innerHTML = "";
+ queryClient.clear();
+ vi.clearAllMocks();
+});
+
+function createMockRouter() {
+ return {
+ navigate: vi.fn(),
+ getSearchParams: () => new URLSearchParams(),
+ setSearchParams: vi.fn(),
+ };
+}
+
+function overrides() {
+ return {
+ apiBaseURL: "http://test.local",
+ apiBasePath: "/api/data",
+ queryClient,
+ navigate: vi.fn(),
+ componentRegistry: {},
+ };
+}
+
+async function renderPage(
+ pageNode: ReactNode,
+ options: {
+ auth?: StackAuthProvider;
+ i18n?: StackI18nProvider;
+ notify?: {
+ success: ReturnType
- {uiBuilderLocalization.pageRenderer.loading}
+ {localization?.pageRenderer?.loading ??
+ t(
+ "uiBuilder.pageRenderer.loading",
+ uiBuilderLocalization.pageRenderer.loading,
+ )}
- {uiBuilderLocalization.pageRenderer.error}
+ {localization?.pageRenderer?.error ??
+ t(
+ "uiBuilder.pageRenderer.error",
+ uiBuilderLocalization.pageRenderer.error,
+ )}
{error instanceof Error ? error.message : String(error)}
@@ -46,10 +62,17 @@ function DefaultErrorComponent({ error }: { error: unknown }): ReactNode {
* Default not found component for PageRenderer
*/
function DefaultNotFoundComponent(): ReactNode {
+ const t = useTranslate();
+ const { localization } =
+ usePluginOverrides("ui-builder");
return (
);
diff --git a/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.tsx b/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.tsx
index adefb390..9a049fad 100644
--- a/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.tsx
+++ b/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.internal.tsx
@@ -1,7 +1,12 @@
"use client";
import { useState, useCallback } from "react";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+ useBasePath,
+ useNotify,
+ usePluginOverrides,
+ useTranslate,
+} from "@btst/stack/context";
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import {
@@ -18,7 +23,6 @@ import {
} from "@workspace/ui/components/popover";
import { Label } from "@workspace/ui/components/label";
import { ArrowLeft, Save, Settings2 } from "lucide-react";
-import { toast } from "sonner";
import UIBuilder from "@workspace/ui/components/ui-builder";
import type {
ComponentLayer,
@@ -30,8 +34,7 @@ import { useLayerStore } from "@workspace/ui/lib/ui-builder/store/layer-store";
import { useRegisterPageAIContext } from "@btst/stack/plugins/ai-chat/client/context";
import {
useSuspenseUIBuilderPage,
- useCreateUIBuilderPage,
- useUpdateUIBuilderPage,
+ useUIBuilderPageForm,
} from "../../hooks/ui-builder-hooks";
import type { UIBuilderPluginOverrides } from "../../overrides";
import { uiBuilderLocalization } from "../../localization";
@@ -186,6 +189,13 @@ interface PageBuilderPageContentProps {
existingPage?: SerializedUIBuilderPage | null;
}
+interface PageBuilderFormValues {
+ slug: string;
+ layers: ComponentLayer[];
+ variables: Variable[];
+ status: "published" | "draft" | "archived";
+}
+
/**
* Parse JSON strings safely
*/
@@ -211,20 +221,93 @@ function PageBuilderPageContent({
id,
existingPage,
}: PageBuilderPageContentProps) {
+ const t = useTranslate();
+ const notify = useNotify();
const {
- navigate,
Link,
componentRegistry: customRegistry,
functionRegistry,
+ localization,
} = usePluginOverrides("ui-builder");
const basePath = useBasePath();
-
- const createMutation = useCreateUIBuilderPage();
- const updateMutation = useUpdateUIBuilderPage();
-
- const loc = uiBuilderLocalization;
const LinkComponent = Link || "a";
const componentRegistry = customRegistry || defaultComponentRegistry;
+ const localized = (
+ override: string | undefined,
+ key: string,
+ fallback: string,
+ ) => override ?? t(key, fallback);
+ const savedMessage = localized(
+ localization?.pageBuilder?.saved,
+ "uiBuilder.pageBuilder.saved",
+ uiBuilderLocalization.pageBuilder.saved,
+ );
+ const saveErrorMessage = localized(
+ localization?.pageBuilder?.saveError,
+ "uiBuilder.pageBuilder.saveError",
+ uiBuilderLocalization.pageBuilder.saveError,
+ );
+ const duplicateSlugMessage = localized(
+ localization?.pageBuilder?.duplicateSlug,
+ "uiBuilder.pageBuilder.duplicateSlug",
+ uiBuilderLocalization.pageBuilder.duplicateSlug,
+ );
+ const loc = {
+ pageBuilder: {
+ slugLabel: localized(
+ localization?.pageBuilder?.slugLabel,
+ "uiBuilder.pageBuilder.slugLabel",
+ uiBuilderLocalization.pageBuilder.slugLabel,
+ ),
+ slugPlaceholder: localized(
+ localization?.pageBuilder?.slugPlaceholder,
+ "uiBuilder.pageBuilder.slugPlaceholder",
+ uiBuilderLocalization.pageBuilder.slugPlaceholder,
+ ),
+ statusLabel: localized(
+ localization?.pageBuilder?.statusLabel,
+ "uiBuilder.pageBuilder.statusLabel",
+ uiBuilderLocalization.pageBuilder.statusLabel,
+ ),
+ settingsTitle: localized(
+ localization?.pageBuilder?.settingsTitle,
+ "uiBuilder.pageBuilder.settingsTitle",
+ uiBuilderLocalization.pageBuilder.settingsTitle,
+ ),
+ settingsDescription: localized(
+ localization?.pageBuilder?.settingsDescription,
+ "uiBuilder.pageBuilder.settingsDescription",
+ uiBuilderLocalization.pageBuilder.settingsDescription,
+ ),
+ save: localized(
+ localization?.pageBuilder?.save,
+ "uiBuilder.pageBuilder.save",
+ uiBuilderLocalization.pageBuilder.save,
+ ),
+ saving: localized(
+ localization?.pageBuilder?.saving,
+ "uiBuilder.pageBuilder.saving",
+ uiBuilderLocalization.pageBuilder.saving,
+ ),
+ statusOptions: {
+ draft: localized(
+ localization?.pageBuilder?.statusOptions?.draft,
+ "uiBuilder.pageBuilder.statusOptions.draft",
+ uiBuilderLocalization.pageBuilder.statusOptions.draft,
+ ),
+ published: localized(
+ localization?.pageBuilder?.statusOptions?.published,
+ "uiBuilder.pageBuilder.statusOptions.published",
+ uiBuilderLocalization.pageBuilder.statusOptions.published,
+ ),
+ archived: localized(
+ localization?.pageBuilder?.statusOptions?.archived,
+ "uiBuilder.pageBuilder.statusOptions.archived",
+ uiBuilderLocalization.pageBuilder.statusOptions.archived,
+ ),
+ },
+ },
+ };
// Parse existing page data
const existingLayers = parseLayers(existingPage?.parsedData?.layers);
@@ -237,6 +320,27 @@ function PageBuilderPageContent({
);
const [layers, setLayers] = useState(existingLayers);
const [variables, setVariables] = useState(existingVariables);
+ const pageForm = useUIBuilderPageForm({
+ action: id ? "edit" : "create",
+ id,
+ record: existingPage,
+ toCreateVars: (values) => values,
+ toUpdateVars: (values) => ({
+ id: id!,
+ data: {
+ layers: values.layers,
+ variables: values.variables,
+ status: values.status,
+ },
+ }),
+ successMessage: savedMessage,
+ errorMessage: (error) =>
+ error.message.includes("slug already exists")
+ ? duplicateSlugMessage
+ : saveErrorMessage,
+ redirect: (page, action) =>
+ action === "create" ? `${basePath}/ui-builder/${page.id}/edit` : false,
+ });
// Auto-generate slug from first page name
const [autoSlug, setAutoSlug] = useState(!id);
@@ -292,52 +396,46 @@ function PageBuilderPageContent({
const handleSave = async () => {
if (!slug.trim()) {
- toast.error(loc.pageBuilder.validation.slugRequired);
+ notify.error(
+ localized(
+ localization?.pageBuilder?.validation?.slugRequired,
+ "uiBuilder.pageBuilder.validation.slugRequired",
+ uiBuilderLocalization.pageBuilder.validation.slugRequired,
+ ),
+ );
return;
}
if (!/^[a-z0-9-]+$/.test(slug)) {
- toast.error(loc.pageBuilder.validation.slugFormat);
+ notify.error(
+ localized(
+ localization?.pageBuilder?.validation?.slugFormat,
+ "uiBuilder.pageBuilder.validation.slugFormat",
+ uiBuilderLocalization.pageBuilder.validation.slugFormat,
+ ),
+ );
return;
}
if (layers.length === 0) {
- toast.error(loc.pageBuilder.validation.layersRequired);
+ notify.error(
+ localized(
+ localization?.pageBuilder?.validation?.layersRequired,
+ "uiBuilder.pageBuilder.validation.layersRequired",
+ uiBuilderLocalization.pageBuilder.validation.layersRequired,
+ ),
+ );
return;
}
- try {
- if (id) {
- await updateMutation.mutateAsync({
- id,
- data: {
- layers,
- variables,
- status,
- },
- });
- toast.success(loc.pageBuilder.saved);
- } else {
- const newPage = await createMutation.mutateAsync({
- slug,
- layers,
- variables,
- status,
- });
- toast.success(loc.pageBuilder.saved);
- navigate?.(`${basePath}/ui-builder/${newPage.id}/edit`);
- }
- } catch (error) {
- const message = error instanceof Error ? error.message : "Unknown error";
- if (message.includes("slug already exists")) {
- toast.error("A page with this slug already exists");
- } else {
- toast.error(loc.pageBuilder.saveError);
- }
- }
+ await pageForm.submit({ slug, layers, variables, status });
};
- const isSaving = createMutation.isPending || updateMutation.isPending;
+ const isSaving = pageForm.isSubmitting;
+ const slugFieldError = pageForm.fieldErrors.slug;
+ const slugErrorMessage = Array.isArray(slugFieldError)
+ ? slugFieldError[0]
+ : slugFieldError;
// Shared form fields - used in both mobile popover and desktop inline
const pageSettingsFields = (isMobile: boolean) => (
@@ -356,13 +454,20 @@ function PageBuilderPageContent({
onChange={(e) => {
setSlug(e.target.value);
setAutoSlug(false);
+ pageForm.clearErrors();
}}
placeholder={loc.pageBuilder.slugPlaceholder}
className={
isMobile ? "h-9 font-mono text-sm" : "h-8 w-48 font-mono text-sm"
}
disabled={!!id}
+ aria-invalid={!!slugErrorMessage}
/>
+ {slugErrorMessage && (
+
- {uiBuilderLocalization.pageRenderer.notFound}
+ {localization?.pageRenderer?.notFound ??
+ t(
+ "uiBuilder.pageRenderer.notFound",
+ uiBuilderLocalization.pageRenderer.notFound,
+ )}
+ {slugErrorMessage} +
+ )}
@@ -417,9 +522,11 @@ function PageBuilderPageContent({
("ui-builder");
+ const path = id ? `/ui-builder/${id}/edit` : "/ui-builder/new";
+
return (
-
-
+ null}
+ props={{ id }}
+ onError={(error) => {
+ onRouteError?.("pageBuilder", error, {
+ path,
+ params: id ? { id } : {},
+ isSSR: typeof window === "undefined",
+ });
+ }}
+ />
);
}
diff --git a/packages/stack/src/plugins/ui-builder/client/components/pages/page-list-page.internal.tsx b/packages/stack/src/plugins/ui-builder/client/components/pages/page-list-page.internal.tsx
index aca1f77f..34d621b5 100644
--- a/packages/stack/src/plugins/ui-builder/client/components/pages/page-list-page.internal.tsx
+++ b/packages/stack/src/plugins/ui-builder/client/components/pages/page-list-page.internal.tsx
@@ -1,7 +1,13 @@
"use client";
import { useState } from "react";
-import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import {
+ CanAccess,
+ useBasePath,
+ useNotify,
+ usePluginOverrides,
+ useTranslate,
+} from "@btst/stack/context";
import { Button } from "@workspace/ui/components/button";
import {
Table,
@@ -28,7 +34,6 @@ import {
AlertDialogTitle,
} from "@workspace/ui/components/alert-dialog";
import { MoreHorizontal, Plus, Pencil, Trash2 } from "lucide-react";
-import { toast } from "sonner";
import {
useSuspenseUIBuilderPages,
@@ -41,16 +46,17 @@ import { EmptyState } from "../shared/empty-state";
import { Pagination } from "../shared/pagination";
export function PageListPage() {
- const { navigate, Link } =
+ const t = useTranslate();
+ const notify = useNotify();
+ const { navigate, Link, localization } =
usePluginOverrides("ui-builder");
const basePath = useBasePath();
- const { pages, total, hasMore, isLoadingMore, loadMore, refetch } =
+ const { pages, total, hasMore, isLoadingMore, loadMore } =
useSuspenseUIBuilderPages();
const deleteMutation = useDeleteUIBuilderPage();
const [deleteId, setDeleteId] = useState(null);
- const loc = uiBuilderLocalization;
const LinkComponent = Link || "a";
const handleDelete = async () => {
@@ -58,12 +64,24 @@ export function PageListPage() {
try {
await deleteMutation.mutateAsync(deleteId);
- toast.success("Page deleted successfully");
- setDeleteId(null);
- await refetch();
} catch {
- toast.error("Failed to delete page");
+ notify.error(
+ localization?.pageList?.deleteError ??
+ t(
+ "uiBuilder.pageList.deleteError",
+ uiBuilderLocalization.pageList.deleteError,
+ ),
+ );
+ return;
}
+ notify.success(
+ localization?.pageList?.deleteSuccess ??
+ t(
+ "uiBuilder.pageList.deleteSuccess",
+ uiBuilderLocalization.pageList.deleteSuccess,
+ ),
+ );
+ setDeleteId(null);
};
const getStatusBadge = (status: string) => {
@@ -78,41 +96,74 @@ export function PageListPage() {
- {loc.pageBuilder.statusOptions[
- status as keyof typeof loc.pageBuilder.statusOptions
- ] || status}
+ {localization?.pageBuilder?.statusOptions?.[
+ status as keyof typeof uiBuilderLocalization.pageBuilder.statusOptions
+ ] ??
+ t(
+ `uiBuilder.pageBuilder.statusOptions.${status}`,
+ uiBuilderLocalization.pageBuilder.statusOptions[
+ status as keyof typeof uiBuilderLocalization.pageBuilder.statusOptions
+ ] ?? status,
+ )}
);
};
+ const createButton = (
+
+
+
+ );
+
return (
-
-
{pageSettingsFields(true)}
diff --git a/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.tsx b/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.tsx
index 575c4ec9..1bb37010 100644
--- a/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.tsx
+++ b/packages/stack/src/plugins/ui-builder/client/components/pages/page-builder-page.tsx
@@ -1,9 +1,11 @@
"use client";
-import { lazy, Suspense } from "react";
+import { lazy } from "react";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { usePluginOverrides } from "@btst/stack/context";
import { PageBuilderSkeleton } from "../loading/page-builder-skeleton";
-import { ErrorBoundary } from "react-error-boundary";
import { DefaultError } from "../shared/default-error";
+import type { UIBuilderPluginOverrides } from "../../overrides";
const PageBuilderPageInternal = lazy(() =>
import("./page-builder-page.internal").then((m) => ({
@@ -16,11 +18,30 @@ export interface PageBuilderPageProps {
}
export function PageBuilderPage({ id }: PageBuilderPageProps) {
+ const { onRouteError } =
+ usePluginOverridesPage Settings
++ {loc.pageBuilder.settingsTitle} +
- Configure page slug and status + {loc.pageBuilder.settingsDescription}
+
{pages.length === 0 ? (
-
-
-
+ title={
+ localization?.pageList?.emptyState?.title ??
+ t(
+ "uiBuilder.pageList.emptyState.title",
+ uiBuilderLocalization.pageList.emptyState.title,
+ )
+ }
+ description={
+ localization?.pageList?.emptyState?.description ??
+ t(
+ "uiBuilder.pageList.emptyState.description",
+ uiBuilderLocalization.pageList.emptyState.description,
+ )
}
+ action={createButton}
/>
) : (
<>
@@ -120,11 +171,33 @@ export function PageListPage() {
-
-
+ {createButton}
{loc.pageList.title}
-{loc.pageList.description}
++ {localization?.pageList?.title ?? + t( + "uiBuilder.pageList.title", + uiBuilderLocalization.pageList.title, + )} +
++ {localization?.pageList?.description ?? + t( + "uiBuilder.pageList.description", + uiBuilderLocalization.pageList.description, + )} +