diff --git a/content/docs/guide/objectos-integration.mdx b/content/docs/guide/objectos-integration.mdx index 0ef687d42..5e6d47f21 100644 --- a/content/docs/guide/objectos-integration.mdx +++ b/content/docs/guide/objectos-integration.mdx @@ -325,22 +325,26 @@ const schema = { ### Custom Data Hooks +`@object-ui/data-objectstack` ships the *adapter*, not hooks. Reads and writes +go through `useViewData` from `@object-ui/react`, which resolves the adapter +from context and hands back both the rows and the `DataSource` to write with. + ```typescript -// Implement custom hooks for data operations -import { useObjectQuery, useObjectMutation } from '@object-ui/data-objectstack'; +import { useViewData } from '@object-ui/react'; function ContactList() { - const { data, loading, error } = useObjectQuery('contact', { - filter: { field: 'status', operator: 'eq', value: 'active' }, - sort: [{ field: 'name', order: 'asc' }], - page: 1, - pageSize: 20 + const { data, loading, error, dataSource, refresh } = useViewData({ + resource: 'contact', + params: { + $filter: { status: 'active' }, + $orderby: [{ field: 'name', order: 'asc' }], + $top: 20, + }, }); - const { mutate: createContact } = useObjectMutation('contact', 'create'); - - const handleCreate = async (formData: any) => { - await createContact(formData); + const handleCreate = async (formData: Record) => { + await dataSource?.create('contact', formData); + await refresh(); }; if (loading) return
Loading...
; @@ -350,7 +354,7 @@ function ContactList() { diff --git a/packages/app-shell/README.md b/packages/app-shell/README.md index 37144b305..21e7f5b14 100644 --- a/packages/app-shell/README.md +++ b/packages/app-shell/README.md @@ -8,7 +8,8 @@ A lightweight, framework-agnostic rendering engine that enables third-party syst This package provides the essential building blocks for rendering ObjectUI schemas: - Basic layout components (AppShell, Sidebar, Main) -- Renderer components for objects, dashboards, pages, and forms +- Route-level views for objects, dashboards, pages and records + (`ObjectView`, `DashboardView`, `PageView`, `RecordDetailView`) - Zero console-specific dependencies - Bring-your-own-router design @@ -23,15 +24,18 @@ pnpm add @object-ui/app-shell ### Basic Setup ```tsx -import { AppShell, ObjectRenderer } from '@object-ui/app-shell'; +import { AppShell } from '@object-ui/app-shell'; +import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react'; +import type { ObjectViewSchema } from '@object-ui/types'; + +const contactView: ObjectViewSchema = { type: 'object-view', objectName: 'contact' }; function MyCustomConsole() { return ( }> - + + + ); } @@ -39,8 +43,11 @@ function MyCustomConsole() { ### With Dashboard +`DashboardRenderer` ships from `@object-ui/plugin-dashboard` — this package's +own `DashboardView` imports it from there. + ```tsx -import { DashboardRenderer } from '@object-ui/app-shell'; +import { DashboardRenderer } from '@object-ui/plugin-dashboard'; function MyDashboard() { return ( @@ -103,40 +110,38 @@ Basic layout container with sidebar support. ``` -### ObjectRenderer +### ObjectView -Renders object views (Grid, Kanban, List, etc.). +The route-level object surface (Grid, Kanban, List, etc.). It resolves the +object and view from the host's route, so it takes no `objectName` prop — +mount it on a route that supplies them, as the console does with +`/apps/:appName/:objectName` and `/apps/:appName/:objectName/view/:viewId`. ```tsx - navigate(`/detail/${record.id}`)} -/> + ``` -### DashboardRenderer +To render an object view from a schema instead of from a route, use +`SchemaRenderer` from `@object-ui/react` — see [Basic Setup](#basic-setup). + +### DashboardView / PageView -Renders dashboard layouts from schema. +`DashboardView` and `PageView` are the route-level equivalents for dashboards +and custom pages; like `ObjectView` they resolve their target from the route +(`dashboardName` / `pageName`) rather than from a `schema` prop. ```tsx - + ``` -### PageRenderer - -Renders custom page schemas. - ```tsx - + ``` +The schema-driven renderers live elsewhere: `DashboardRenderer` in +`@object-ui/plugin-dashboard`, and everything else through `SchemaRenderer` in +`@object-ui/react`, which resolves `type` against the component registry. + ### ActionParamDialog Collects user input for a declared action's `params` before execution. Every diff --git a/packages/components/README.md b/packages/components/README.md index 464d88f79..cf691dc7c 100644 --- a/packages/components/README.md +++ b/packages/components/README.md @@ -70,20 +70,24 @@ entry goes on generating the classes your own source uses, as it always did. ### 2. Register Components ```tsx -import { registerDefaultRenderers } from '@object-ui/components' +import { initializeComponents } from '@object-ui/components' -registerDefaultRenderers() +initializeComponents() ``` +Importing the package already registers its components as a side effect; +`initializeComponents()` is the explicit call for bundlers that would otherwise +tree-shake that import away. + ## Usage ### With SchemaRenderer ```tsx import { SchemaRenderer } from '@object-ui/react' -import { registerDefaultRenderers } from '@object-ui/components' +import { initializeComponents } from '@object-ui/components' -registerDefaultRenderers() +initializeComponents() const schema = { type: 'card', @@ -200,16 +204,20 @@ All components accept `className` for Tailwind classes: Register your own components: ```tsx -import { registerRenderer } from '@object-ui/react' +import { ComponentRegistry } from '@object-ui/core' import { Button } from '@object-ui/components' -function CustomButton(props) { +function CustomButton(props: Record) { return