diff --git a/examples/byo-backend-console/README.md b/examples/byo-backend-console/README.md index aa706a88a1..6a0cdfcc10 100644 --- a/examples/byo-backend-console/README.md +++ b/examples/byo-backend-console/README.md @@ -8,7 +8,8 @@ This example demonstrates how third-party systems can integrate ObjectUI compone - ✅ Custom routing with React Router - ✅ Custom data adapter (mock REST API, not ObjectStack) -- ✅ Using `@object-ui/app-shell` for rendering +- ✅ Using `@object-ui/app-shell` for the page shell +- ✅ Using `@object-ui/plugin-view` for object views (`ObjectView`) - ✅ Using `@object-ui/providers` for context - ✅ No console dependencies - ✅ ~100 lines of integration code @@ -57,10 +58,13 @@ const mockDataSource = { ### 2. App Shell (`src/App.tsx`) -Uses `@object-ui/app-shell` components: +Uses `@object-ui/app-shell` for the shell and `@object-ui/plugin-view` for the +object view: ```tsx -import { AppShell, ObjectRenderer } from '@object-ui/app-shell'; +import { Routes, Route, useParams } from 'react-router-dom'; +import { AppShell } from '@object-ui/app-shell'; +import { ObjectView } from '@object-ui/plugin-view'; import { ThemeProvider, DataSourceProvider } from '@object-ui/providers'; function App() { @@ -69,13 +73,27 @@ function App() { }> - } /> + } /> ); } + +// `ObjectView` takes the object name in its schema, not from the router, and +// its `dataSource` prop is required by the type. So a route renders a small +// component of your own, not the view directly. +function ObjectPage() { + const { objectName } = useParams<{ objectName: string }>(); + + return ( + + ); +} ``` ### 3. Custom Routing (`src/router.tsx`) @@ -83,12 +101,31 @@ function App() { Full control over routes - no predefined structure: ```tsx - - } /> - } /> - } /> - {/* Your custom routes */} - +import { useDataSource } from '@object-ui/providers'; + +function AppRoutes() { + return ( + + } /> + } /> + } /> + {/* Your custom routes */} + + ); +} + +// One small component per object. Inside `DataSourceProvider`, `useDataSource()` +// supplies the data source that `ObjectView` requires. +function ObjectListPage({ objectName }: { objectName: string }) { + const dataSource = useDataSource(); + + return ( + + ); +} ``` ## Customization Examples @@ -99,15 +136,24 @@ Full control over routes - no predefined structure: // app/layout.tsx import { AppShell } from '@object-ui/app-shell'; -export default function RootLayout({ children }) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return }>{children}; } // app/[object]/page.tsx -import { ObjectRenderer } from '@object-ui/app-shell'; +'use client'; +import { ObjectView } from '@object-ui/plugin-view'; +import { useDataSource } from '@object-ui/providers'; + +export default function ObjectPage({ params }: { params: { object: string } }) { + const dataSource = useDataSource(); -export default function ObjectPage({ params }) { - return ; + return ( + + ); } ```