@object-ui/app-shell 6.2.3 → 7.1.0

package/dist/views/metadata-admin/DesignerEditorWrapper.d.ts

@@ -1,68 +0,0 @@
-/**
- * DesignerEditorWrapper — Phase 3d.
- *
- * Generic "load metadata → hand to a controlled designer component →
- * save on commit" wrapper. Lets us plug existing bespoke designers
- * (ObjectViewConfigurator, DashboardEditor, PageDesigner, …) into the
- * unified Setup-app shell without rewriting them.
- *
- * Each designer takes a different prop shape, so we accept a
- * `renderDesigner` callback that gets `(value, onChange, readOnly)`
- * and returns whatever the designer needs.
- *
- * Wiring is dead simple — see `builtinComponents.tsx`:
- *
- *   registerMetadataResource({
- *     type: 'view',
- *     EditPage: (props) => (
- *       <DesignerEditorWrapper
- *         {...props}
- *         renderDesigner={(value, onChange, readOnly) => (
- *           <ObjectViewConfigurator config={value} onChange={onChange} readOnly={readOnly} />
- *         )}
- *       />
- *     ),
- *   });
- *
- * The wrapper handles:
- *   • Initial fetch via `client.layered()` (so admins see overlay vs code).
- *   • Local edit state with Save / Revert.
- *   • Destructive-change confirmation (409 → dialog → retry with force).
- *   • Reset overlay button (DELETE).
- *   • Read-only fallback when the type isn't allowed to override at runtime
- *     (driven by /meta/types#allowOrgOverride).
- *
- * Validation errors (422) are surfaced as an error banner; bespoke
- * designers usually handle their own field-level UX.
- */
-import * as React from 'react';
-export interface DesignerEditorWrapperProps<TValue = any> {
-    type: string;
-    name: string;
-    /**
-     * Render the actual designer. Receives the current draft value, a
-     * setter, and whether the editor must be read-only.
-     */
-    renderDesigner: (value: TValue, onChange: (next: TValue) => void, readOnly: boolean) => React.ReactNode;
-    /**
-     * Optional adapter to normalise the value the server returns into
-     * the shape the designer wants. Defaults to identity.
-     */
-    fromMetadata?: (raw: unknown) => TValue;
-    /**
-     * Optional adapter to turn the designer's value back into the
-     * metadata payload before save. Defaults to identity.
-     */
-    toMetadata?: (value: TValue) => unknown;
-}
-export declare function DesignerEditorWrapper<TValue = any>(props: DesignerEditorWrapperProps<TValue>): import("react/jsx-runtime").JSX.Element;
-/**
- * Embedded variant — same state machine, but no surrounding `PageShell`.
- * Used by `ResourceEditPage` to host the designer inside a tab alongside
- * the generic Form / Layers / References tabs. The action toolbar (Save /
- * Reset / Refresh) is rendered inline at the top of the panel so the tab
- * remains self-sufficient.
- */
-export declare function DesignerEditorBody<TValue = any>({ type, name, renderDesigner, fromMetadata, toMetadata, withChrome, }: DesignerEditorWrapperProps<TValue> & {
-    withChrome?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/views/metadata-admin/DesignerEditorWrapper.js

@@ -1,158 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// Copyright (c) 2025 ObjectStack. Licensed under the Apache-2.0 license.
-/**
- * DesignerEditorWrapper — Phase 3d.
- *
- * Generic "load metadata → hand to a controlled designer component →
- * save on commit" wrapper. Lets us plug existing bespoke designers
- * (ObjectViewConfigurator, DashboardEditor, PageDesigner, …) into the
- * unified Setup-app shell without rewriting them.
- *
- * Each designer takes a different prop shape, so we accept a
- * `renderDesigner` callback that gets `(value, onChange, readOnly)`
- * and returns whatever the designer needs.
- *
- * Wiring is dead simple — see `builtinComponents.tsx`:
- *
- *   registerMetadataResource({
- *     type: 'view',
- *     EditPage: (props) => (
- *       <DesignerEditorWrapper
- *         {...props}
- *         renderDesigner={(value, onChange, readOnly) => (
- *           <ObjectViewConfigurator config={value} onChange={onChange} readOnly={readOnly} />
- *         )}
- *       />
- *     ),
- *   });
- *
- * The wrapper handles:
- *   • Initial fetch via `client.layered()` (so admins see overlay vs code).
- *   • Local edit state with Save / Revert.
- *   • Destructive-change confirmation (409 → dialog → retry with force).
- *   • Reset overlay button (DELETE).
- *   • Read-only fallback when the type isn't allowed to override at runtime
- *     (driven by /meta/types#allowOrgOverride).
- *
- * Validation errors (422) are surfaced as an error banner; bespoke
- * designers usually handle their own field-level UX.
- */
-import * as React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Save, Loader2, RotateCcw, History as HistoryIcon, AlertTriangle, RefreshCw, } from 'lucide-react';
-import { Button } from '@object-ui/components';
-import { Badge } from '@object-ui/components';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '@object-ui/components';
-import { PageShell } from './PageShell';
-import { useMetadataClient, useMetadataTypes } from './useMetadata';
-import { resolveResourceConfig } from './registry';
-import { t, detectLocale } from './i18n';
-export function DesignerEditorWrapper(props) {
-    return _jsx(DesignerEditorBody, { ...props, withChrome: true });
-}
-/**
- * Embedded variant — same state machine, but no surrounding `PageShell`.
- * Used by `ResourceEditPage` to host the designer inside a tab alongside
- * the generic Form / Layers / References tabs. The action toolbar (Save /
- * Reset / Refresh) is rendered inline at the top of the panel so the tab
- * remains self-sufficient.
- */
-export function DesignerEditorBody({ type, name, renderDesigner, fromMetadata, toMetadata, withChrome = false, }) {
-    const navigate = useNavigate();
-    const client = useMetadataClient();
-    const { entries } = useMetadataTypes(client);
-    const entry = entries.find((t) => t.type === type);
-    const resolved = resolveResourceConfig(type, entry);
-    const writable = !!resolved.allowOrgOverride;
-    const locale = detectLocale();
-    const [value, setValue] = React.useState(null);
-    const [original, setOriginal] = React.useState(null);
-    const [loading, setLoading] = React.useState(true);
-    const [saving, setSaving] = React.useState(false);
-    const [error, setError] = React.useState(null);
-    const [destructive, setDestructive] = React.useState(null);
-    const dirty = React.useMemo(() => {
-        try {
-            return JSON.stringify(value) !== JSON.stringify(original);
-        }
-        catch {
-            return true;
-        }
-    }, [value, original]);
-    const load = React.useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const lay = await client.layered(type, name);
-            const raw = (lay.effective ?? lay.code ?? {});
-            const v = (fromMetadata ? fromMetadata(raw) : raw);
-            setValue(v);
-            setOriginal(v);
-        }
-        catch (err) {
-            setError(err?.message ?? String(err));
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [client, type, name, fromMetadata]);
-    React.useEffect(() => {
-        void load();
-    }, [load]);
-    async function doSave(force, pending) {
-        const payload = pending ?? value;
-        if (payload == null)
-            return;
-        setSaving(true);
-        setError(null);
-        try {
-            const body = toMetadata ? toMetadata(payload) : payload;
-            // Ensure `name` is set — designers may not carry it.
-            const finalBody = body && typeof body === 'object'
-                ? { ...body, name: body.name ?? name }
-                : body;
-            await client.save(type, name, finalBody, { force });
-            await load();
-            setDestructive(null);
-        }
-        catch (err) {
-            if (err?.status === 409 && err?.code === 'destructive_change') {
-                const issues = err?.body?.issues ?? [];
-                setDestructive({ issues: Array.isArray(issues) ? issues : [], pending: payload });
-            }
-            else {
-                setError(err?.message ?? String(err));
-            }
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    async function doReset() {
-        if (!confirm(t('engine.edit.resetConfirm', locale).replace('{type}', type).replace('{name}', name)))
-            return;
-        setSaving(true);
-        try {
-            await client.reset(type, name);
-            await load();
-        }
-        catch (err) {
-            setError(err?.message ?? String(err));
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    if (loading || value == null) {
-        const loadingBody = (_jsxs("div", { className: "p-6 text-sm text-muted-foreground flex items-center gap-2", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), " ", t('engine.edit.loading', locale), " ", type, "/", name, "\u2026"] }));
-        return withChrome ? (_jsx(PageShell, { entry: entry, itemName: name, children: loadingBody })) : (loadingBody);
-    }
-    const toolbarButtons = (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: load, disabled: saving, children: [_jsx(RefreshCw, { className: "h-4 w-4 mr-1" }), " ", t('engine.list.refresh', locale)] }), withChrome && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigate(`./history`), children: [_jsx(HistoryIcon, { className: "h-4 w-4 mr-1" }), " ", t('engine.edit.history', locale)] })), writable && (_jsxs(Button, { variant: "ghost", size: "sm", onClick: doReset, disabled: saving, children: [_jsx(RotateCcw, { className: "h-4 w-4 mr-1" }), " ", t('engine.edit.reset', locale)] })), writable && (_jsxs(Button, { size: "sm", onClick: () => doSave(false), disabled: saving || !dirty, children: [saving ? (_jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" })) : (_jsx(Save, { className: "h-4 w-4 mr-1" })), t('engine.edit.save', locale)] }))] }));
-    const banners = (_jsxs(_Fragment, { children: [!writable && (_jsx("div", { className: "mx-6 mt-4 rounded-md border bg-muted/40 px-3 py-2 text-xs text-muted-foreground", children: t('engine.edit.readOnlyHint', locale) })), error && (_jsxs("div", { className: "mx-6 mt-4 rounded-md border border-destructive/40 bg-destructive/5 p-3 text-sm text-destructive flex items-start gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 mt-0.5 shrink-0" }), _jsx("span", { children: error })] })), dirty && writable && (_jsxs("div", { className: "mx-6 mt-3 flex items-center gap-2 rounded-md border border-amber-300/50 bg-amber-50 dark:bg-amber-950/30 px-3 py-1.5 text-xs", children: [_jsx(Badge, { variant: "outline", children: t('engine.edit.unsaved', locale) }), _jsx("span", { children: t('engine.edit.unsavedHint', locale) })] }))] }));
-    const designerArea = (_jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: renderDesigner(value, (next) => setValue(next), !writable) }));
-    const destructiveDialog = (_jsx(Dialog, { open: !!destructive, onOpenChange: (open) => !open && setDestructive(null), children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-amber-500" }), " ", t('engine.edit.destructive', locale)] }), _jsx(DialogDescription, { children: t('engine.edit.destructiveHint', locale) })] }), _jsx("ul", { className: "text-sm space-y-1 max-h-64 overflow-auto", children: destructive?.issues.map((i, idx) => (_jsxs("li", { className: "border-l-2 border-amber-500 pl-2", children: [i.kind && _jsx(Badge, { variant: "outline", className: "mr-2", children: i.kind }), i.message ?? JSON.stringify(i)] }, idx))) }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setDestructive(null), children: t('engine.cancel', locale) }), _jsxs(Button, { variant: "destructive", onClick: () => destructive && doSave(true, destructive.pending), disabled: saving, children: [saving && _jsx(Loader2, { className: "h-4 w-4 mr-1 animate-spin" }), t('engine.edit.forceSave', locale)] })] })] }) }));
-    if (!withChrome) {
-        return (_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [_jsx("div", { className: "flex items-center justify-end gap-1 px-6 pt-3", children: toolbarButtons }), banners, designerArea, destructiveDialog] }));
-    }
-    return (_jsxs(PageShell, { entry: entry ?? { type, label: type }, itemName: name, subtitle: t('engine.edit.bespokeDesigner', locale), actions: toolbarButtons, children: [_jsxs("div", { className: "flex flex-col h-full overflow-hidden", children: [banners, designerArea] }), destructiveDialog] }));
-}