@object-ui/react 16.0.0 → 17.1.0

package/dist/utils/error-message.d.ts

@@ -0,0 +1,52 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Pull a clean, human-readable message out of a failed write. Strips noisy
+ * backend prefixes (`[Security] `, `PERMISSION_DENIED: `) so it reads well in a
+ * toast — mirrors `plugin-detail`'s `cleanError`. Returns `null` when nothing
+ * usable can be extracted, so callers fall back to a generic localized string.
+ */
+export declare function extractWriteErrorMessage(err: unknown): string | null;
+/** One field the server rejected, normalised for `form.setError`. */
+export interface WriteFieldError {
+    /** Field name, matching the form control's `name`. */
+    field: string;
+    /** Human-readable reason, already localized by the server when it can be. */
+    message: string;
+}
+/**
+ * Per-field errors from a rejected write, or `null` when the failure was not
+ * field-scoped.
+ *
+ * The server has always sent these. `@objectstack/objectql`'s validators throw
+ * `{ code: 'VALIDATION_FAILED', fields: [{ field, code, message }] }`, and both
+ * the REST layer and the runtime dispatcher serve that as a 400 with `fields[]`
+ * intact. What was missing was the last hop: every form caught the rejection,
+ * showed one generic toast, and dropped `fields[]` on the floor — so a user told
+ * "Validation failed" had to guess WHICH input was wrong, on a surface that
+ * already knows how to mark it.
+ *
+ * Reads three shapes, because the error can arrive from either side of the
+ * adapter boundary:
+ *   - `validationErrors` — a `ValidationError` from `@object-ui/data-objectstack`;
+ *   - `details.fields` — the raw `@objectstack/client` error, whose `details`
+ *     falls back to the whole response body;
+ *   - `fields` — a hand-rolled error of the same shape (the server duck-types
+ *     these identically, so we do too).
+ *
+ * Entries without a usable `field` are dropped rather than guessed at: a wrong
+ * mark on an innocent input is worse than the generic toast we already show.
+ */
+export declare function extractFieldErrors(err: unknown): WriteFieldError[] | null;
+/**
+ * True when a failed write was rejected for authorization reasons (HTTP 403 /
+ * `PERMISSION_DENIED` / `FORBIDDEN` / a row-level-security denial). Lets a
+ * caller show a friendly "you don't have permission" toast rather than dumping
+ * the raw server text.
+ */
+export declare function isPermissionError(err: unknown): boolean;

package/dist/utils/error-message.js

@@ -0,0 +1,138 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Helpers for turning a failed data-source write into user-facing feedback.
+ *
+ * Different DataSource adapters throw differently shaped errors:
+ *   - the ObjectStack adapter (`@object-ui/data-objectstack`) decorates the
+ *     thrown Error with `httpStatus` + a machine-readable `code` and puts the
+ *     server text on `.message` (sometimes also a parsed body on `.details`);
+ *   - `ApiDataSource` appends the raw JSON response body as a tail on the
+ *     message string (`… — {"error":…,"code":…}`).
+ *
+ * These helpers normalise across both so a caller's `catch` can surface the
+ * real reason (e.g. a row-level-security denial) instead of swallowing it.
+ */
+function firstString(...vals) {
+    for (const v of vals) {
+        if (typeof v === 'string' && v.trim())
+            return v;
+    }
+    return null;
+}
+/**
+ * Pull a clean, human-readable message out of a failed write. Strips noisy
+ * backend prefixes (`[Security] `, `PERMISSION_DENIED: `) so it reads well in a
+ * toast — mirrors `plugin-detail`'s `cleanError`. Returns `null` when nothing
+ * usable can be extracted, so callers fall back to a generic localized string.
+ */
+export function extractWriteErrorMessage(err) {
+    const e = err;
+    // 1) Structured server body, when the adapter attaches one.
+    let msg = e && typeof e === 'object'
+        ? firstString(e.details?.error, e.details?.message, e.error)
+        : null;
+    // 2) Otherwise the Error message itself. ApiDataSource embeds the raw JSON
+    //    response body as a tail — parse it out when present.
+    if (!msg) {
+        const raw = err instanceof Error
+            ? err.message
+            : typeof err === 'string'
+                ? err
+                : typeof e?.message === 'string'
+                    ? e.message
+                    : '';
+        const brace = raw.indexOf('{');
+        if (brace >= 0) {
+            try {
+                const body = JSON.parse(raw.slice(brace));
+                msg = firstString(body?.error, body?.message);
+            }
+            catch {
+                /* tail wasn't JSON — fall through to the raw message */
+            }
+        }
+        if (!msg && raw.trim())
+            msg = raw;
+    }
+    if (!msg)
+        return null;
+    const clean = msg
+        .replace(/^\[[^\]]+\]\s*/, '')
+        .replace(/^[A-Z][A-Z0-9_]+:\s*/, '')
+        .trim();
+    return clean || null;
+}
+/**
+ * Per-field errors from a rejected write, or `null` when the failure was not
+ * field-scoped.
+ *
+ * The server has always sent these. `@objectstack/objectql`'s validators throw
+ * `{ code: 'VALIDATION_FAILED', fields: [{ field, code, message }] }`, and both
+ * the REST layer and the runtime dispatcher serve that as a 400 with `fields[]`
+ * intact. What was missing was the last hop: every form caught the rejection,
+ * showed one generic toast, and dropped `fields[]` on the floor — so a user told
+ * "Validation failed" had to guess WHICH input was wrong, on a surface that
+ * already knows how to mark it.
+ *
+ * Reads three shapes, because the error can arrive from either side of the
+ * adapter boundary:
+ *   - `validationErrors` — a `ValidationError` from `@object-ui/data-objectstack`;
+ *   - `details.fields` — the raw `@objectstack/client` error, whose `details`
+ *     falls back to the whole response body;
+ *   - `fields` — a hand-rolled error of the same shape (the server duck-types
+ *     these identically, so we do too).
+ *
+ * Entries without a usable `field` are dropped rather than guessed at: a wrong
+ * mark on an innocent input is worse than the generic toast we already show.
+ */
+export function extractFieldErrors(err) {
+    const e = err;
+    if (!e || typeof e !== 'object')
+        return null;
+    const raw = (Array.isArray(e.validationErrors) && e.validationErrors) ||
+        (Array.isArray(e.details?.fields) && e.details.fields) ||
+        (Array.isArray(e.fields) && e.fields) ||
+        null;
+    if (!raw || !Array.isArray(raw))
+        return null;
+    const out = [];
+    for (const entry of raw) {
+        if (!entry || typeof entry !== 'object')
+            continue;
+        const rec = entry;
+        const field = firstString(rec.field, rec.name, rec.path);
+        if (!field)
+            continue;
+        // `code` is the machine enum (`required`, `invalid_option`, …). It is a
+        // last resort only: the server builds `message` to be shown verbatim, and
+        // an untranslated enum in the UI reads as a bug.
+        const message = firstString(rec.message, rec.error, rec.code) ?? '';
+        out.push({ field, message });
+    }
+    return out.length > 0 ? out : null;
+}
+/**
+ * True when a failed write was rejected for authorization reasons (HTTP 403 /
+ * `PERMISSION_DENIED` / `FORBIDDEN` / a row-level-security denial). Lets a
+ * caller show a friendly "you don't have permission" toast rather than dumping
+ * the raw server text.
+ */
+export function isPermissionError(err) {
+    const e = err;
+    if (!e || typeof e !== 'object')
+        return false;
+    const status = e.httpStatus ?? e.status ?? e.statusCode;
+    if (status === 403)
+        return true;
+    const code = firstString(e.code, e.details?.code) ?? '';
+    if (code === 'PERMISSION_DENIED' || code === 'FORBIDDEN')
+        return true;
+    const text = `${typeof e.message === 'string' ? e.message : ''} ${e.details?.error ?? e.error ?? ''}`;
+    return /row-level security|access denied|permission denied|not permitted/i.test(text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/react",
-  "version": "16.0.0",
+  "version": "17.1.0",
   "type": "module",
   "license": "MIT",
   "description": "React bindings and SchemaRenderer component for Object UI",
@@ -24,12 +24,12 @@
     }
   },
   "dependencies": {
-    "@objectstack/spec": "^15.1.1",
-    "react-hook-form": "^7.81.0",
-    "@object-ui/core": "16.0.0",
-    "@object-ui/data-objectstack": "16.0.0",
-    "@object-ui/i18n": "16.0.0",
-    "@object-ui/types": "16.0.0"
+    "@objectstack/spec": "^17.0.0-rc.0",
+    "react-hook-form": "^7.83.0",
+    "@object-ui/core": "17.1.0",
+    "@object-ui/data-objectstack": "17.1.0",
+    "@object-ui/i18n": "17.1.0",
+    "@object-ui/types": "17.1.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/dist/hooks/useColumnSummary.d.ts

@@ -1,38 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-/** Summary function types aligned with ColumnSummarySchema */
-export type SummaryFunction = 'sum' | 'avg' | 'count' | 'min' | 'max' | 'distinct';
-export interface ColumnSummaryConfig {
-    /** The field/column to aggregate */
-    field: string;
-    /** The aggregation function */
-    function: SummaryFunction;
-    /** Optional label for the summary */
-    label?: string;
-    /** Number format options */
-    format?: Intl.NumberFormatOptions;
-}
-export interface ColumnSummaryResult {
-    /** The computed value */
-    value: number;
-    /** Formatted display string */
-    formatted: string;
-    /** The label */
-    label: string;
-}
-/**
- * Hook for computing column-level summaries (SUM, AVG, COUNT, MIN, MAX, DISTINCT).
- * Implements ColumnSummarySchema from @objectstack/spec v2.0.7.
- *
- * @example
- * ```tsx
- * const summary = useColumnSummary(data, { field: 'amount', function: 'sum', label: 'Total' });
- * // summary.formatted => "$12,345.67"
- * ```
- */
-export declare function useColumnSummary(data: Record<string, unknown>[], config: ColumnSummaryConfig, locale?: string): ColumnSummaryResult;

package/dist/hooks/useColumnSummary.js

@@ -1,54 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { useMemo } from 'react';
-/**
- * Hook for computing column-level summaries (SUM, AVG, COUNT, MIN, MAX, DISTINCT).
- * Implements ColumnSummarySchema from @objectstack/spec v2.0.7.
- *
- * @example
- * ```tsx
- * const summary = useColumnSummary(data, { field: 'amount', function: 'sum', label: 'Total' });
- * // summary.formatted => "$12,345.67"
- * ```
- */
-export function useColumnSummary(data, config, locale) {
-    return useMemo(() => {
-        const values = data
-            .map((row) => {
-            const val = row[config.field];
-            return typeof val === 'number' ? val : Number(val);
-        })
-            .filter((v) => !isNaN(v));
-        let value;
-        switch (config.function) {
-            case 'sum':
-                value = values.reduce((acc, v) => acc + v, 0);
-                break;
-            case 'avg':
-                value = values.length > 0 ? values.reduce((acc, v) => acc + v, 0) / values.length : 0;
-                break;
-            case 'count':
-                value = data.length;
-                break;
-            case 'min':
-                value = values.length > 0 ? Math.min(...values) : 0;
-                break;
-            case 'max':
-                value = values.length > 0 ? Math.max(...values) : 0;
-                break;
-            case 'distinct':
-                value = new Set(data.map((row) => row[config.field])).size;
-                break;
-            default:
-                value = 0;
-        }
-        const formatted = new Intl.NumberFormat(locale, config.format).format(value);
-        const label = config.label ?? config.function.toUpperCase();
-        return { value, formatted, label };
-    }, [data, config.field, config.function, config.label, config.format, locale]);
-}

package/dist/spec-bridge/bridges/dashboard.d.ts

@@ -1,81 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import type { BridgeFn } from '../types';
-interface DashboardWidget {
-    title?: string;
-    description?: string;
-    type?: string;
-    chartConfig?: any;
-    colorVariant?: string;
-    actionUrl?: string;
-    actionType?: string;
-    actionIcon?: string;
-    object?: string;
-    filter?: any;
-    categoryField?: string;
-    valueField?: string;
-    aggregate?: string;
-    measures?: any[];
-    layout?: any;
-    options?: any;
-    responsive?: any;
-    aria?: {
-        ariaLabel?: string;
-        ariaDescribedBy?: string;
-        role?: string;
-    };
-}
-interface DashboardHeader {
-    showTitle?: boolean;
-    showDescription?: boolean;
-    actions?: Array<{
-        label: string;
-        actionUrl?: string;
-        actionType?: string;
-        icon?: string;
-    }>;
-    [key: string]: any;
-}
-interface GlobalFilter {
-    field: string;
-    label?: string;
-    type?: string;
-    options?: string[];
-    optionsFrom?: {
-        object: string;
-        valueField: string;
-        labelField?: string;
-        filter?: any;
-    };
-    defaultValue?: any;
-    scope?: string;
-    targetWidgets?: string[];
-}
-interface DashboardSpec {
-    name?: string;
-    label?: string;
-    description?: string;
-    widgets?: DashboardWidget[];
-    globalFilters?: GlobalFilter[];
-    header?: DashboardHeader;
-    refreshInterval?: number;
-    dateRange?: {
-        field?: string;
-        defaultRange?: string;
-        allowCustomRange?: boolean;
-    };
-    aria?: {
-        ariaLabel?: string;
-        ariaDescribedBy?: string;
-        role?: string;
-    };
-    performance?: any;
-}
-/** Transforms a Dashboard spec into a dashboard layout SchemaNode */
-export declare const bridgeDashboard: BridgeFn<DashboardSpec>;
-export {};

package/dist/spec-bridge/bridges/dashboard.js

@@ -1,121 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function mapWidget(widget, index) {
-    const node = {
-        type: widget.type ?? 'chart',
-        id: `widget-${index}`,
-    };
-    if (widget.title)
-        node.title = widget.title;
-    if (widget.description)
-        node.description = widget.description;
-    if (widget.chartConfig)
-        node.chartConfig = widget.chartConfig;
-    if (widget.colorVariant)
-        node.colorVariant = widget.colorVariant;
-    if (widget.actionUrl)
-        node.actionUrl = widget.actionUrl;
-    if (widget.actionType)
-        node.actionType = widget.actionType;
-    if (widget.actionIcon)
-        node.actionIcon = widget.actionIcon;
-    if (widget.object)
-        node.object = widget.object;
-    if (widget.filter)
-        node.filter = widget.filter;
-    if (widget.categoryField)
-        node.categoryField = widget.categoryField;
-    if (widget.valueField)
-        node.valueField = widget.valueField;
-    if (widget.aggregate)
-        node.aggregate = widget.aggregate;
-    if (widget.measures)
-        node.measures = widget.measures;
-    if (widget.layout)
-        node.layout = widget.layout;
-    if (widget.options)
-        node.options = widget.options;
-    if (widget.responsive)
-        node.responsive = widget.responsive;
-    if (widget.aria)
-        node.aria = widget.aria;
-    return node;
-}
-function mapGlobalFilters(filters) {
-    return {
-        type: 'filter-bar',
-        id: 'dashboard-filters',
-        filters: filters.map((f) => {
-            const mapped = { field: f.field };
-            if (f.label)
-                mapped.label = f.label;
-            if (f.type)
-                mapped.type = f.type;
-            if (f.options)
-                mapped.options = f.options;
-            if (f.optionsFrom)
-                mapped.optionsFrom = f.optionsFrom;
-            if (f.defaultValue != null)
-                mapped.defaultValue = f.defaultValue;
-            if (f.scope)
-                mapped.scope = f.scope;
-            if (f.targetWidgets)
-                mapped.targetWidgets = f.targetWidgets;
-            return mapped;
-        }),
-    };
-}
-function mapHeader(header) {
-    const node = {
-        type: 'dashboard-header',
-        id: 'dashboard-header',
-        ...header,
-    };
-    return node;
-}
-/** Transforms a Dashboard spec into a dashboard layout SchemaNode */
-export const bridgeDashboard = (spec, _context) => {
-    const widgetNodes = (spec.widgets ?? []).map(mapWidget);
-    const bodyChildren = [];
-    if (spec.header) {
-        bodyChildren.push(mapHeader(spec.header));
-    }
-    if (spec.globalFilters && spec.globalFilters.length > 0) {
-        bodyChildren.push(mapGlobalFilters(spec.globalFilters));
-    }
-    // P1.3 — Date range filter
-    if (spec.dateRange) {
-        bodyChildren.push({
-            type: 'date-range-filter',
-            id: 'dashboard-date-range',
-            ...spec.dateRange,
-        });
-    }
-    bodyChildren.push({
-        type: 'widget-grid',
-        id: 'dashboard-widgets',
-        body: widgetNodes,
-    });
-    const node = {
-        type: 'dashboard',
-        id: spec.name,
-        body: bodyChildren,
-    };
-    if (spec.label)
-        node.label = spec.label;
-    if (spec.description)
-        node.description = spec.description;
-    if (spec.refreshInterval != null)
-        node.refreshInterval = spec.refreshInterval;
-    // P1.6 — i18n & ARIA
-    if (spec.aria)
-        node.aria = spec.aria;
-    if (spec.performance)
-        node.performance = spec.performance;
-    return node;
-};

package/dist/spec-bridge/bridges/page.d.ts

@@ -1,58 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import type { BridgeFn } from '../types';
-interface PageComponent {
-    type: string;
-    id?: string;
-    label?: string;
-    properties?: Record<string, any>;
-    events?: Record<string, any>;
-    style?: Record<string, any>;
-    responsiveStyles?: Record<string, any>;
-    className?: string;
-    /** Canonical conditional-visibility predicate (ADR-0089). */
-    visibleWhen?: string;
-    /** @deprecated ADR-0089 → `visibleWhen`. */
-    visibility?: string;
-    dataSource?: any;
-    responsive?: any;
-    aria?: Record<string, string>;
-}
-interface PageRegion {
-    name?: string;
-    width?: string;
-    components?: PageComponent[];
-}
-interface PageVariable {
-    name: string;
-    type?: string;
-    defaultValue?: any;
-    source?: string;
-}
-interface PageSpec {
-    name?: string;
-    label?: string;
-    description?: string;
-    icon?: string;
-    type?: string;
-    variables?: PageVariable[];
-    regions?: PageRegion[];
-    template?: string;
-    object?: string;
-    isDefault?: boolean;
-    assignedProfiles?: string[];
-    interfaceConfig?: any;
-    aria?: {
-        ariaLabel?: string;
-        ariaDescribedBy?: string;
-        role?: string;
-    };
-}
-/** Transforms a Page spec into a page layout SchemaNode */
-export declare const bridgePage: BridgeFn<PageSpec>;
-export {};

package/dist/spec-bridge/bridges/page.js

@@ -1,101 +0,0 @@
-/**
- * ObjectUI
- * Copyright (c) 2024-present ObjectStack Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-function mapComponent(component) {
-    const node = {
-        type: component.type,
-        id: component.id,
-    };
-    if (component.label)
-        node.label = component.label;
-    if (component.className)
-        node.className = component.className;
-    if (component.style)
-        node.style = component.style;
-    // ADR-0065 scoped per-breakpoint styles — declared on the page-spec
-    // component (sibling of className/style) but previously dropped here
-    // before reaching SchemaRenderer, so a layout override like
-    // `{ large: { display: 'grid', gridTemplateColumns: '...' } }` never
-    // compiled to CSS and the node fell back to its default layout.
-    if (component.responsiveStyles)
-        node.responsiveStyles = component.responsiveStyles;
-    if (component.properties) {
-        // Avoid overwriting the component dispatch keys (`type`/`id`) with inner
-        // renderer-specific props. E.g. PageTabsProps.properties.type is the tab
-        // visual style ('line'|'card'|'pill'), NOT the component type.
-        for (const [k, v] of Object.entries(component.properties)) {
-            if (k === 'type' || k === 'id')
-                continue;
-            node[k] = v;
-        }
-        // Preserve the original `properties` bag so renderers can still read
-        // collision-prone keys via `schema.properties.<key>`.
-        node.properties = component.properties;
-    }
-    if (component.events)
-        node.events = component.events;
-    // ADR-0089: `visibleWhen` is the canonical conditional-visibility predicate;
-    // the spec folds the deprecated `visibility` alias into it at parse, so prefer
-    // it and fall back to `visibility` for raw / un-normalized metadata. SchemaRenderer
-    // reads `visibleWhen` first (show-when-truthy).
-    const visiblePredicate = component.visibleWhen ?? component.visibility;
-    if (visiblePredicate)
-        node.visibleWhen = visiblePredicate;
-    if (component.dataSource)
-        node.dataSource = component.dataSource;
-    if (component.responsive)
-        node.responsive = component.responsive;
-    if (component.aria)
-        node.aria = component.aria;
-    return node;
-}
-function mapRegion(region) {
-    const children = (region.components ?? []).map(mapComponent);
-    const node = {
-        type: 'page-region',
-        id: region.name,
-        body: children,
-    };
-    if (region.width)
-        node.width = region.width;
-    return node;
-}
-/** Transforms a Page spec into a page layout SchemaNode */
-export const bridgePage = (spec, _context) => {
-    const regions = (spec.regions ?? []).map(mapRegion);
-    const node = {
-        type: 'page',
-        id: spec.name,
-        body: regions,
-    };
-    if (spec.label)
-        node.label = spec.label;
-    if (spec.description)
-        node.description = spec.description;
-    if (spec.icon)
-        node.icon = spec.icon;
-    if (spec.type)
-        node.pageType = spec.type;
-    if (spec.variables)
-        node.variables = spec.variables;
-    if (spec.template)
-        node.template = spec.template;
-    if (spec.object)
-        node.object = spec.object;
-    // Additional page properties (blankLayout/recordReview dropped — their page
-    // types have no renderer and were removed from @objectstack/spec, framework#2265)
-    if (spec.isDefault != null)
-        node.isDefault = spec.isDefault;
-    if (spec.assignedProfiles)
-        node.assignedProfiles = spec.assignedProfiles;
-    if (spec.interfaceConfig)
-        node.interfaceConfig = spec.interfaceConfig;
-    // P1.6 — i18n & ARIA
-    if (spec.aria)
-        node.aria = spec.aria;
-    return node;
-};