@object-ui/app-shell 6.0.4 → 6.2.0

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

@@ -0,0 +1,144 @@
+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.
+/**
+ * MetadataResourceListPage — generic list of items for a metadata type
+ * (Phase 3c).
+ *
+ * Reads `/meta/:type`, applies registry-driven columns + search +
+ * source/overlay filters, and renders an ObjectGrid-like table.
+ * Each row links to its EditPage at `./:name?type=…`.
+ *
+ * No virtualisation in MVP — metadata lists are typically < 200 items
+ * per type, well under the threshold where it'd matter.
+ */
+import * as React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Plus, Search, RefreshCw } from 'lucide-react';
+import { Button } from '@object-ui/components';
+import { Input } from '@object-ui/components';
+import { Badge } from '@object-ui/components';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@object-ui/components';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { PageShell } from './PageShell';
+import { useMetadataClient, useMetadataTypes, matchesQuery, } from './useMetadata';
+import { getMetadataResource, resolveResourceConfig, } from './registry';
+import { t, detectLocale } from './i18n';
+export function MetadataResourceListPage({ type }) {
+    const navigate = useNavigate();
+    const client = useMetadataClient();
+    const { entries: typesEntries } = useMetadataTypes(client);
+    const entry = typesEntries.find((t) => t.type === type);
+    const config = resolveResourceConfig(type, entry);
+    // If a fully custom ListPage is registered, render it and bail.
+    const customConfig = getMetadataResource(type);
+    if (customConfig?.ListPage) {
+        const Custom = customConfig.ListPage;
+        return _jsx(Custom, { type: type });
+    }
+    const [items, setItems] = React.useState([]);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(null);
+    const [query, setQuery] = React.useState('');
+    const [sourceFilter, setSourceFilter] = React.useState('all');
+    const [refreshKey, setRefreshKey] = React.useState(0);
+    React.useEffect(() => {
+        let cancelled = false;
+        setLoading(true);
+        setError(null);
+        (async () => {
+            try {
+                const list = await client.list(type);
+                if (cancelled)
+                    return;
+                const rows = (list ?? []).map((raw) => {
+                    const item = (raw && typeof raw === 'object' && 'item' in raw ? raw.item : raw) ?? {};
+                    return {
+                        raw,
+                        item,
+                        source: raw?.source,
+                    };
+                });
+                setItems(rows);
+                setLoading(false);
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err?.message ?? String(err));
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [client, type, refreshKey]);
+    const searchableFields = config.searchableFields ?? ['name', 'label', 'description'];
+    const filtered = items.filter((row) => {
+        if (!matchesQuery(row.item, query, searchableFields))
+            return false;
+        if (sourceFilter !== 'all' && row.source && row.source !== sourceFilter)
+            return false;
+        return true;
+    });
+    // Compute source counts for the filter dropdown.
+    const sourceCounts = React.useMemo(() => {
+        const c = { all: items.length, code: 0, overlay: 0, effective: 0 };
+        for (const r of items) {
+            if (r.source && c[r.source] !== undefined)
+                c[r.source]++;
+        }
+        return c;
+    }, [items]);
+    const columns = config.listColumns ?? defaultColumns(config.primaryKey ?? 'name');
+    const locale = detectLocale();
+    // Localise default column labels — registered columns keep their
+    // hand-authored labels (consumers may want bespoke wording).
+    const localizeColumnLabel = (col) => {
+        const tryKey = `engine.list.col.${col.key}`;
+        const translated = t(tryKey, locale);
+        return translated === tryKey ? col.label : translated;
+    };
+    return (_jsx(PageShell, { entry: entry ?? { type, label: type }, stats: [
+            { label: t('engine.list.items', locale), value: items.length },
+            { label: t('engine.list.filtered', locale), value: filtered.length },
+        ], actions: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setRefreshKey((k) => k + 1), title: t('engine.list.refresh', locale), children: _jsx(RefreshCw, { className: "h-4 w-4" }) }), entry?.allowOrgOverride && (_jsxs(Button, { size: "sm", onClick: () => navigate(`./new?type=${encodeURIComponent(type)}`), children: [_jsx(Plus, { className: "h-4 w-4 mr-1" }), t('engine.list.create', locale)] }))] }), children: _jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [_jsxs("div", { className: "relative flex-1 min-w-[200px] max-w-md", children: [_jsx(Search, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" }), _jsx(Input, { className: "pl-8", placeholder: t('engine.list.search', locale), value: query, onChange: (e) => setQuery(e.target.value) })] }), _jsxs(Select, { value: sourceFilter, onValueChange: setSourceFilter, children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsxs(SelectItem, { value: "all", children: [t('engine.list.allSources', locale), " (", sourceCounts.all, ")"] }), _jsxs(SelectItem, { value: "code", children: ["Code (", sourceCounts.code, ")"] }), _jsxs(SelectItem, { value: "overlay", children: ["Overlay (", sourceCounts.overlay, ")"] }), _jsxs(SelectItem, { value: "effective", children: ["Effective (", sourceCounts.effective, ")"] })] })] })] }), loading && (_jsxs("div", { className: "text-sm text-muted-foreground", children: [t('engine.edit.loading', locale), " ", type, "\u2026"] })), error && (_jsx("div", { className: "text-sm text-destructive border border-destructive/30 rounded p-3 bg-destructive/5", children: error })), !loading && !error && filtered.length === 0 && (_jsxs(Empty, { children: [_jsx(EmptyTitle, { children: items.length === 0
+                                ? `No ${type} items registered`
+                                : `No matches for "${query}"` }), _jsx(EmptyDescription, { children: config.emptyStateHint ??
+                                (entry?.allowOrgOverride
+                                    ? `Click "New" above to create the first ${type}.`
+                                    : `This type is read-only — instances are defined by code artifacts in packages.`) })] })), !loading && filtered.length > 0 && (_jsx("div", { className: "border rounded-lg overflow-hidden", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { className: "bg-muted/40 text-xs uppercase tracking-wider text-muted-foreground", children: _jsxs("tr", { children: [columns.map((c) => (_jsx("th", { className: "px-3 py-2 text-left font-medium", style: c.width ? { width: c.width } : undefined, children: localizeColumnLabel(c) }, c.key))), _jsx("th", { className: "px-3 py-2 text-right font-medium w-[80px]", children: t('engine.list.col.source', locale) })] }) }), _jsx("tbody", { className: "divide-y", children: filtered.map((row, i) => {
+                                    const pk = config.primaryKey ?? 'name';
+                                    const name = String(row.item[pk] ?? `(unnamed-${i})`);
+                                    return (_jsxs("tr", { className: "hover:bg-accent/50", children: [columns.map((c, ci) => {
+                                                const value = row.item[c.key];
+                                                const cell = c.render ? c.render(value, row.item) : defaultCell(value);
+                                                return (_jsx("td", { className: "px-3 py-2 align-top", children: ci === 0 ? (_jsx(Link, { to: `./${encodeURIComponent(name)}?type=${encodeURIComponent(type)}`, className: "text-primary hover:underline font-mono", children: cell })) : (cell) }, c.key));
+                                            }), _jsx("td", { className: "px-3 py-2 text-right align-top", children: row.source ? (_jsx(Badge, { variant: "outline", className: 'text-[10px] ' +
+                                                        (row.source === 'overlay'
+                                                            ? 'border-emerald-500 text-emerald-700'
+                                                            : ''), children: row.source })) : (_jsx("span", { className: "text-muted-foreground text-xs", children: "\u2014" })) })] }, name + i));
+                                }) })] }) }))] }) }));
+}
+function defaultColumns(primaryKey) {
+    return [
+        { key: primaryKey, label: primaryKey, width: '30%' },
+        { key: 'label', label: 'Label', width: '30%' },
+        { key: 'description', label: 'Description' },
+    ];
+}
+function defaultCell(value) {
+    if (value == null || value === '') {
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    }
+    if (typeof value === 'boolean')
+        return value ? '✓' : '✗';
+    if (typeof value === 'object') {
+        try {
+            return (_jsx("code", { className: "font-mono text-xs", children: JSON.stringify(value).slice(0, 60) }));
+        }
+        catch {
+            return String(value);
+        }
+    }
+    return String(value);
+}

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

@@ -0,0 +1,10 @@
+/**
+ * Props forwarded by `ComponentNavView` — it merges URL query-string
+ * into props, so we accept both `type` (from `?type=…`) and route
+ * nav `params: { type: 'object' }` style.
+ */
+export interface MetadataResourceRouterProps {
+    /** Singular metadata type, e.g. 'view'. */
+    type?: string;
+}
+export declare function MetadataResourceRouter({ type }: MetadataResourceRouterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { Empty, EmptyTitle, EmptyDescription } from '@object-ui/components';
+import { MetadataResourceListPage } from './ResourceListPage';
+import { MetadataResourceEditPage } from './ResourceEditPage';
+import { MetadataResourceHistoryPage } from './ResourceHistoryPage';
+export function MetadataResourceRouter({ type }) {
+    const location = useLocation();
+    const [search] = useSearchParams();
+    const resolvedType = type ?? search.get('type') ?? '';
+    if (!resolvedType) {
+        return (_jsx("div", { className: "p-8 h-full flex items-center justify-center", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "Missing metadata type" }), _jsxs(EmptyDescription, { children: ["This page expects a ", _jsx("code", { className: "font-mono", children: "?type=" }), " query param (e.g. ", _jsx("code", { className: "font-mono", children: "?type=view" }), ") or a nav-metadata ", _jsxs("code", { className: "font-mono", children: ["params: ", `{ type: 'view' }`] }), "."] })] }) }));
+    }
+    // Parse the trailing wildcard. The parent route consumed
+    // `/apps/:appName/component/metadata/resource`, so what's left in
+    // location.pathname AFTER that prefix is our sub-path. We don't have
+    // the prefix exactly, but we can find `/resource/` and slice — it's
+    // unambiguous because `:ns/:name` are colon-joined → "metadata/resource".
+    const subPath = extractSubPath(location.pathname);
+    const segments = subPath.split('/').filter(Boolean);
+    // No sub-path → list page.
+    if (segments.length === 0) {
+        return _jsx(MetadataResourceListPage, { type: resolvedType });
+    }
+    // /new → create page.
+    if (segments[0] === 'new' && segments.length === 1) {
+        return (_jsx(MetadataResourceEditPage, { type: resolvedType, name: "", createMode: true }, `${resolvedType}:__new__`));
+    }
+    // /:name/history → history.
+    if (segments.length === 2 && segments[1] === 'history') {
+        return (_jsx(MetadataResourceHistoryPage, { type: resolvedType, name: decodeURIComponent(segments[0]) }));
+    }
+    // /:name → edit.
+    if (segments.length === 1) {
+        return (_jsx(MetadataResourceEditPage, { type: resolvedType, name: decodeURIComponent(segments[0]) }, `${resolvedType}:${segments[0]}`));
+    }
+    // Unknown sub-path.
+    return (_jsx("div", { className: "p-8 h-full flex items-center justify-center", children: _jsxs(Empty, { children: [_jsx(EmptyTitle, { children: "Unknown sub-path" }), _jsxs(EmptyDescription, { children: ["The path ", _jsx("code", { className: "font-mono", children: subPath }), " isn't recognized. Valid forms are ", _jsx("code", { className: "font-mono", children: "/" }), " (list),", ' ', _jsx("code", { className: "font-mono", children: "/new" }), " (create),", ' ', _jsx("code", { className: "font-mono", children: "/:name" }), " (edit),", ' ', _jsx("code", { className: "font-mono", children: "/:name/history" }), "."] })] }) }));
+}
+function extractSubPath(pathname) {
+    // Find the literal `/metadata/resource` prefix and return what follows.
+    const marker = '/metadata/resource';
+    const idx = pathname.indexOf(marker);
+    if (idx === -1)
+        return '';
+    return pathname.slice(idx + marker.length); // includes leading '/' if any
+}

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

@@ -0,0 +1,99 @@
+import { type WidgetContext } from './widgets';
+type JsonSchema = Record<string, any>;
+/**
+ * Lightweight shape of the spec `FormView` we consume. We deliberately
+ * accept `any` for forward compatibility — the spec evolves faster than
+ * we want this admin engine to break.
+ */
+export interface FormViewSpec {
+    type?: 'simple' | 'tabbed' | 'wizard' | 'split' | 'drawer' | 'modal';
+    sections?: FormSectionSpec[];
+}
+export interface FormSectionSpec {
+    label?: string;
+    description?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    columns?: 1 | 2 | 3 | 4;
+    visibleOn?: string | {
+        dialect?: string;
+        source: string;
+    };
+    fields: Array<string | FormFieldSpec>;
+}
+export interface FormFieldSpec {
+    field: string;
+    type?: string;
+    options?: Array<{
+        label: string;
+        value: string;
+        color?: string;
+    }>;
+    reference?: string;
+    maxLength?: number;
+    minLength?: number;
+    min?: number;
+    max?: number;
+    precision?: number;
+    scale?: number;
+    multiple?: boolean;
+    label?: string;
+    placeholder?: string;
+    helpText?: string;
+    readonly?: boolean;
+    /**
+     * When true, the field is editable on create but locked once the
+     * record exists (e.g. immutable `name` machine identifiers). Combined
+     * with `SchemaFormProps.createMode` at render time.
+     */
+    immutable?: boolean;
+    required?: boolean;
+    hidden?: boolean;
+    colSpan?: 1 | 2 | 3 | 4;
+    widget?: string;
+    /** For `type: 'code'` — syntax highlighting language (e.g. 'javascript', 'sql', 'json'). */
+    language?: string;
+    visibleOn?: string | {
+        dialect?: string;
+        source: string;
+    };
+    /** Sub-fields for `composite` (single embedded object) and `repeater`
+     * (array of embedded objects) types. Recursive. */
+    fields?: Array<string | FormFieldSpec>;
+}
+export interface SchemaFormIssue {
+    path: string;
+    message: string;
+}
+export interface SchemaFormProps {
+    /** JSONSchema for the root object. */
+    schema: JsonSchema | undefined;
+    /**
+     * Optional FormView layout (sections, tabs, widget hints, visibleOn)
+     * shipped by the framework alongside `schema`. When present, fields
+     * are grouped into sections and visibility predicates are honoured.
+     */
+    form?: FormViewSpec;
+    /** Current form value. */
+    value: Record<string, unknown> | undefined;
+    /** Called with the next full value on every change. */
+    onChange: (next: Record<string, unknown>) => void;
+    /** Inline validation errors, keyed by JSON path. */
+    issues?: SchemaFormIssue[];
+    /** Field keys to hide (still preserved on save). */
+    hiddenFields?: string[];
+    /** Preferred top-level field order. */
+    fieldOrder?: string[];
+    /** Disable all inputs (e.g. when env-var write lock is off). */
+    readOnly?: boolean;
+    /**
+     * True when rendering the "new record" form (no existing item).
+     * Used by per-field `immutable: true` flag to allow editing on
+     * create but lock the value once the record exists.
+     */
+    createMode?: boolean;
+    /** Out-of-band data widgets need (object list, etc). */
+    widgetContext?: WidgetContext;
+}
+export declare function SchemaForm({ schema, form, value, onChange, issues, hiddenFields, fieldOrder, readOnly, createMode, widgetContext, }: SchemaFormProps): import("react/jsx-runtime").JSX.Element;
+export {};