@object-ui/app-shell 4.0.0 → 4.0.3

package/dist/views/RecordFormPage.js

@@ -0,0 +1,171 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * RecordFormPage Component
+ *
+ * Renders a full-screen create or edit page for a record. This is the
+ * page-mode counterpart to the global `ModalForm` mounted by `AppContent`
+ * for objects whose metadata declares `editMode: 'page'`.
+ *
+ * Routes (mounted by `AppContent`):
+ *   - `/apps/:appName/:objectName/new`              — create mode
+ *   - `/apps/:appName/:objectName/record/:recordId/edit` — edit mode
+ *
+ * Behavior:
+ *   - Resolves the object definition via `useMetadata()`. While metadata is
+ *     still loading the page renders a `SkeletonDetail` to avoid a flash of
+ *     "Object Not Found".
+ *   - Delegates form rendering and data fetching to `<ObjectForm>` from
+ *     `@object-ui/plugin-form` with `formType: 'simple'`. ObjectForm itself
+ *     fetches the existing record (in edit mode) via `dataSource.findOne`,
+ *     so this page does not need to manage its own loading state for
+ *     record data.
+ *   - On success / cancel, navigates back if the user has history, otherwise
+ *     falls back to a sensible parent route (record detail in edit mode,
+ *     object list in create mode). Cancel always navigates back without a
+ *     toast.
+ *   - Wraps the form in a sticky page header (back button + title) for a
+ *     consistent full-screen chrome.
+ *
+ * @module views/RecordFormPage
+ */
+import { useCallback, useMemo } from 'react';
+import { useParams, useNavigate, Link } from 'react-router-dom';
+import { ObjectForm } from '@object-ui/plugin-form';
+import { Button, Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { ArrowLeft, Database } from 'lucide-react';
+import { toast } from 'sonner';
+import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
+import { useMetadata } from '../providers/MetadataProvider';
+import { useAdapter } from '../providers/AdapterProvider';
+import { ExpressionProvider, evaluateVisibility } from '../providers/ExpressionProvider';
+import { SkeletonDetail } from '../skeletons';
+import { useAuth } from '@object-ui/auth';
+import { ExpressionEvaluator } from '@object-ui/core';
+/**
+ * Full-screen record create/edit page.
+ *
+ * Reads `:objectName` (and `:recordId` when editing) from the URL and
+ * resolves the object definition. Renders an `<ObjectForm>` configured with
+ * `formType: 'simple'` (i.e. a flat in-page form), wrapped in a page header
+ * that mirrors the look of `RecordDetailView`.
+ */
+export function RecordFormPage({ mode }) {
+    const { appName, objectName, recordId } = useParams();
+    const navigate = useNavigate();
+    const dataSource = useAdapter();
+    const { objects, loading: metadataLoading } = useMetadata();
+    const { t } = useObjectTranslation();
+    const { objectLabel } = useObjectLabel();
+    const { user } = useAuth();
+    const objectDef = useMemo(() => objects.find((o) => o.name === objectName), [objects, objectName]);
+    const baseUrl = `/apps/${appName}`;
+    const objectListUrl = `${baseUrl}/${objectName}`;
+    const recordDetailUrl = mode === 'edit' && recordId
+        ? `${baseUrl}/${objectName}/record/${encodeURIComponent(recordId)}`
+        : objectListUrl;
+    /**
+     * Navigate back to the most relevant location.
+     * Prefer `history.back()` so users return to the exact list/view they came
+     * from (preserving filters, scroll position, etc.). Fall back to the
+     * record detail (edit mode) or list (create mode) when there is no
+     * history entry — happens on direct/refreshed loads of the URL.
+     */
+    const goBack = useCallback(() => {
+        if (typeof window !== 'undefined' && window.history.length > 1) {
+            navigate(-1);
+        }
+        else {
+            navigate(recordDetailUrl, { replace: true });
+        }
+    }, [navigate, recordDetailUrl]);
+    const label = objectDef ? objectLabel(objectDef) : objectName ?? '';
+    const pageTitle = mode === 'create'
+        ? t('form.createTitle', { object: label, defaultValue: `New ${label}` })
+        : t('form.editTitle', { object: label, defaultValue: `Edit ${label}` });
+    const handleSuccess = useCallback(() => {
+        toast.success(mode === 'create'
+            ? t('form.createSuccess', {
+                object: label,
+                defaultValue: `${label} created successfully`,
+            })
+            : t('form.updateSuccess', {
+                object: label,
+                defaultValue: `${label} updated successfully`,
+            }));
+        goBack();
+    }, [mode, t, label, goBack]);
+    const handleCancel = useCallback(() => {
+        goBack();
+    }, [goBack]);
+    // Authenticated-user descriptor — shared by the ExpressionEvaluator (used
+    // for field-visibility expression evaluation) and the ExpressionProvider
+    // wrapping the form (which exposes the same descriptor to descendant
+    // expression consumers). Memoised on the underlying user identity so a
+    // re-render that doesn't change the user does not invalidate downstream
+    // memoisations.
+    const expressionUser = useMemo(() => user
+        ? { name: user.name, email: user.email, role: user.role ?? 'user' }
+        : { name: 'Anonymous', email: '', role: 'guest' }, [user]);
+    // Build expression evaluator for field-visibility expressions, mirroring
+    // the global ModalForm setup in AppContent.
+    const expressionEvaluator = useMemo(() => new ExpressionEvaluator({
+        // expressionUser already handles the anonymous fallback, so we can
+        // pass it through unconditionally.
+        user: expressionUser,
+        app: { name: appName },
+        data: {},
+    }), [expressionUser, appName]);
+    // Resolve the field list using the same visibility-aware logic as the
+    // ModalForm in AppContent so page-mode and modal-mode show the same
+    // fields for a given user.
+    const fields = useMemo(() => {
+        if (!objectDef?.fields)
+            return [];
+        if (Array.isArray(objectDef.fields)) {
+            return objectDef.fields
+                .filter((f) => {
+                if (typeof f === 'string')
+                    return true;
+                return evaluateVisibility(f.visible, expressionEvaluator);
+            })
+                .map((f) => (typeof f === 'string' ? f : f.name));
+        }
+        return Object.entries(objectDef.fields)
+            .filter(([, f]) => evaluateVisibility(f.visible, expressionEvaluator))
+            .map(([key]) => key);
+    }, [objectDef, expressionEvaluator]);
+    // Show skeleton while metadata is still loading rather than the
+    // "Object Not Found" empty state — otherwise direct/refreshed loads of
+    // the URL flash an error before the metadata resolves.
+    if (metadataLoading) {
+        return _jsx(SkeletonDetail, {});
+    }
+    if (!objectDef) {
+        return (_jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(Database, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: "Object Not Found" }), _jsxs(EmptyDescription, { children: ["Object \"", objectName, "\" definition missing. Check your configuration or navigate back to select a valid object."] }), _jsx("div", { className: "mt-4", children: _jsxs(Button, { variant: "outline", onClick: () => navigate(baseUrl), children: [_jsx(ArrowLeft, { className: "mr-2 h-4 w-4" }), "Back"] }) })] }) }));
+    }
+    return (_jsx(ExpressionProvider, { user: expressionUser, app: { name: appName }, data: {}, children: _jsxs("div", { className: "flex flex-col h-full overflow-hidden bg-background", "data-testid": "record-form-page", "data-mode": mode, children: [_jsxs("header", { className: "sticky top-0 z-10 flex items-center gap-3 border-b bg-background px-4 py-3 sm:px-6", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: goBack, "data-testid": "record-form-page-back", "aria-label": t('common.back', { defaultValue: 'Back' }), children: _jsx(ArrowLeft, { className: "h-4 w-4" }) }), _jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Link, { to: objectListUrl, className: "hover:text-foreground transition-colors", children: label }), _jsx("span", { "aria-hidden": "true", children: "/" }), _jsx("span", { className: "text-foreground font-medium", "data-testid": "record-form-page-title", children: pageTitle })] })] }), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: _jsx("div", { className: "mx-auto max-w-4xl", children: _jsx(ObjectForm, { schema: {
+                                type: 'object-form',
+                                formType: 'simple',
+                                objectName: objectDef.name,
+                                mode,
+                                recordId: mode === 'edit' ? recordId : undefined,
+                                title: pageTitle,
+                                description: mode === 'create'
+                                    ? t('form.createDescription', {
+                                        object: label,
+                                        defaultValue: `Create a new ${label}.`,
+                                    })
+                                    : t('form.editDescription', {
+                                        object: label,
+                                        defaultValue: `Edit this ${label}.`,
+                                    }),
+                                layout: 'vertical',
+                                fields,
+                                onSuccess: handleSuccess,
+                                onCancel: handleCancel,
+                                showSubmit: true,
+                                showCancel: true,
+                                submitText: t('form.saveRecord', { defaultValue: 'Save' }),
+                                cancelText: t('common.cancel', { defaultValue: 'Cancel' }),
+                            }, dataSource: dataSource ?? undefined }, `${mode}:${objectName}:${recordId ?? 'new'}`) }) })] }) }));
+}

package/dist/views/index.d.ts

@@ -1,5 +1,7 @@
 export { ObjectView } from './ObjectView';
 export { RecordDetailView } from './RecordDetailView';
+export { RecordFormPage } from './RecordFormPage';
+export type { RecordFormPageProps } from './RecordFormPage';
 export { DashboardView } from './DashboardView';
 export { PageView } from './PageView';
 export { ReportView } from './ReportView';

package/dist/views/index.js

@@ -1,5 +1,6 @@
 export { ObjectView } from './ObjectView';
 export { RecordDetailView } from './RecordDetailView';
+export { RecordFormPage } from './RecordFormPage';
 export { DashboardView } from './DashboardView';
 export { PageView } from './PageView';
 export { ReportView } from './ReportView';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/app-shell",
-  "version": "4.0.0",
+  "version": "4.0.3",
   "type": "module",
   "license": "MIT",
   "description": "Minimal application shell for ObjectUI - framework-agnostic rendering engine",
@@ -27,34 +27,34 @@
   "dependencies": {
     "lucide-react": "^1.14.0",
     "sonner": "^2.0.7",
-    "@object-ui/auth": "3.4.0",
-    "@object-ui/collaboration": "3.4.0",
-    "@object-ui/components": "3.4.0",
-    "@object-ui/core": "3.4.0",
-    "@object-ui/data-objectstack": "3.4.0",
-    "@object-ui/fields": "3.4.0",
-    "@object-ui/i18n": "3.4.0",
-    "@object-ui/layout": "3.4.0",
-    "@object-ui/permissions": "3.4.0",
-    "@object-ui/react": "3.4.0",
-    "@object-ui/types": "3.4.0"
+    "@object-ui/auth": "4.0.3",
+    "@object-ui/collaboration": "4.0.3",
+    "@object-ui/components": "4.0.3",
+    "@object-ui/core": "4.0.3",
+    "@object-ui/data-objectstack": "4.0.3",
+    "@object-ui/fields": "4.0.3",
+    "@object-ui/i18n": "4.0.3",
+    "@object-ui/layout": "4.0.3",
+    "@object-ui/permissions": "4.0.3",
+    "@object-ui/react": "4.0.3",
+    "@object-ui/types": "4.0.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@object-ui/plugin-calendar": "3.4.0",
-    "@object-ui/plugin-charts": "3.4.0",
-    "@object-ui/plugin-chatbot": "3.4.0",
-    "@object-ui/plugin-dashboard": "3.4.0",
-    "@object-ui/plugin-designer": "3.4.0",
-    "@object-ui/plugin-detail": "3.4.0",
-    "@object-ui/plugin-form": "3.4.0",
-    "@object-ui/plugin-grid": "3.4.0",
-    "@object-ui/plugin-kanban": "3.4.0",
-    "@object-ui/plugin-list": "3.4.0",
-    "@object-ui/plugin-report": "3.4.0",
-    "@object-ui/plugin-view": "3.4.0"
+    "@object-ui/plugin-calendar": "4.0.3",
+    "@object-ui/plugin-charts": "4.0.3",
+    "@object-ui/plugin-chatbot": "4.0.3",
+    "@object-ui/plugin-dashboard": "4.0.3",
+    "@object-ui/plugin-designer": "4.0.3",
+    "@object-ui/plugin-detail": "4.0.3",
+    "@object-ui/plugin-form": "4.0.3",
+    "@object-ui/plugin-grid": "4.0.3",
+    "@object-ui/plugin-kanban": "4.0.3",
+    "@object-ui/plugin-list": "4.0.3",
+    "@object-ui/plugin-report": "4.0.3",
+    "@object-ui/plugin-view": "4.0.3"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",