Skip to content

Commit 306cae3

Browse files
hotlonghotlong
authored
Merge pull request #245 from objectstack-ai/copilot/update-objectstack-and-install-plugin
2 parents 8bff21a + 844d4f3 commit 306cae3

File tree

24 files changed

+1830
-125
lines changed

24 files changed

+1830
-125
lines changed

‎apps/web/package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,13 @@
1212
"test:watch": "vitest"
1313
},
1414
"dependencies": {
15-
"@objectstack/client": "2.0.6",
15+
"@object-ui/components": "^2.0.0",
16+
"@object-ui/core": "^2.0.0",
17+
"@object-ui/data-objectstack": "^2.0.0",
18+
"@object-ui/fields": "^2.0.0",
19+
"@object-ui/layout": "^2.0.0",
20+
"@object-ui/react": "^2.0.0",
21+
"@objectstack/client": "2.0.7",
1622
"@radix-ui/react-dialog": "^1.1.15",
1723
"@radix-ui/react-dropdown-menu": "^2.1.16",
1824
"@radix-ui/react-select": "^2.2.6",

‎apps/web/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const JobsPage = lazy(() => import('./pages/settings/jobs'));
3131
const PluginsPage = lazy(() => import('./pages/settings/plugins'));
3232
const MetricsPage = lazy(() => import('./pages/settings/metrics'));
3333
const NotificationsPage = lazy(() => import('./pages/settings/notifications'));
34+
const ObjectUIDemoPage = lazy(() => import('./pages/settings/objectui-demo'));
3435

3536
// ── Business Apps ─────────────────────────────────────────────
3637
const BusinessAppPage = lazy(() => import('./pages/apps/app'));
@@ -80,6 +81,7 @@ export function App() {
8081
<Route path="/settings/plugins" element={<PluginsPage />} />
8182
<Route path="/settings/metrics" element={<MetricsPage />} />
8283
<Route path="/settings/notifications" element={<NotificationsPage />} />
84+
<Route path="/settings/objectui-demo" element={<ObjectUIDemoPage />} />
8385
<Route path="/settings/account" element={<AccountSettingsPage />} />
8486
<Route path="/settings/security" element={<SecuritySettingsPage />} />
8587
</Route>

‎apps/web/src/components/layouts/SettingsLayout.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Briefcase,
1616
BarChart3,
1717
Bell,
18+
Layers,
1819
} from 'lucide-react';
1920
import {
2021
Sidebar,
@@ -59,6 +60,7 @@ const navSystem = [
5960
{ title: 'Jobs', href: '/settings/jobs', icon: Briefcase },
6061
{ title: 'Metrics', href: '/settings/metrics', icon: BarChart3 },
6162
{ title: 'Notifications', href: '/settings/notifications', icon: Bell },
63+
{ title: 'ObjectUI Demo', href: '/settings/objectui-demo', icon: Layers },
6264
];
6365

6466
const navAccount = [

‎apps/web/src/components/objectui/ObjectUIExample.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* ObjectUI Integration Example
3+
*
4+
* Demonstrates how to use @object-ui components in the ObjectOS console.
5+
* This component uses the SchemaRenderer from @object-ui/react to render
6+
* metadata-driven UI components.
7+
*/
8+
9+
import { SchemaRenderer } from '@object-ui/react';
10+
import { objectUIAdapter } from '@/lib/object-ui-adapter';
11+
12+
interface ObjectUIExampleProps {
13+
/** Object name to render */
14+
objectName: string;
15+
/** View mode: 'form', 'grid', 'detail', 'kanban', etc. */
16+
view?: string;
17+
/** Optional record ID for detail/edit views */
18+
recordId?: string;
19+
}
20+
21+
/**
22+
* Example component showing how to integrate @object-ui components.
23+
*
24+
* The SchemaRenderer will automatically fetch object metadata from the ObjectStack
25+
* backend and render the appropriate view based on the schema definition.
26+
*/
27+
export function ObjectUIExample({
28+
objectName,
29+
view = 'grid',
30+
recordId
31+
}: ObjectUIExampleProps) {
32+
return (
33+
<SchemaRenderer
34+
adapter={objectUIAdapter}
35+
objectName={objectName}
36+
view={view}
37+
recordId={recordId}
38+
/>
39+
);
40+
}
41+
42+
export default ObjectUIExample;

‎apps/web/src/components/objectui/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ export { KanbanBoard } from './KanbanBoard';
1010
export { ChartWidget } from './ChartWidget';
1111
export { ViewSwitcher, findKanbanField } from './ViewSwitcher';
1212
export { LayoutBuilder } from './LayoutBuilder';
13+
export { ObjectUIExample } from './ObjectUIExample';

‎apps/web/src/lib/object-ui-adapter.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/**
2+
* ObjectUI Adapter
3+
*
4+
* Bridges ObjectStack backend with @object-ui React components.
5+
* This adapter provides the data layer for @object-ui using @object-ui/data-objectstack.
6+
*/
7+
8+
import { createObjectStackAdapter } from '@object-ui/data-objectstack';
9+
10+
/**
11+
* Create ObjectStack data adapter for ObjectUI
12+
*
13+
* This adapter allows ObjectUI components to fetch data from the ObjectStack backend
14+
* through the @objectstack/client API.
15+
*
16+
* Note: The adapter uses 'baseUrl' (not 'baseURL') as per the @objectstack/client API.
17+
* This follows Node.js URL conventions where 'baseUrl' is used for configuration.
18+
*/
19+
export const objectUIAdapter = createObjectStackAdapter({
20+
baseUrl: import.meta.env.VITE_API_BASE_URL || '/api/v1',
21+
22+
// Optional: Token for authentication (if not using cookies)
23+
// By default, the adapter uses cookie-based authentication from better-auth
24+
// token: 'your-auth-token',
25+
});
26+
27+
/**
28+
* Export adapter as default for convenience
29+
*/
30+
export default objectUIAdapter;

‎apps/web/src/pages/settings/objectui-demo.tsx‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
/**
2+
* ObjectUI Demo Page
3+
*
4+
* Demonstrates the @object-ui integration in ObjectOS.
5+
* Shows how to use @object-ui/react components with the ObjectStack backend.
6+
*
7+
* Route: /settings/objectui-demo
8+
*/
9+
10+
import { useState } from 'react';
11+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
12+
import { Button } from '@/components/ui/button';
13+
import { Badge } from '@/components/ui/badge';
14+
import { ObjectUIExample } from '@/components/objectui';
15+
import { CheckCircle2 } from 'lucide-react';
16+
17+
export default function ObjectUIDemoPage() {
18+
const [selectedObject, setSelectedObject] = useState('contacts');
19+
const [selectedView, setSelectedView] = useState('grid');
20+
21+
const demoObjects = [
22+
{ name: 'contacts', label: 'Contacts' },
23+
{ name: 'accounts', label: 'Accounts' },
24+
{ name: 'opportunities', label: 'Opportunities' },
25+
];
26+
27+
const views = [
28+
{ name: 'grid', label: 'Grid View' },
29+
{ name: 'form', label: 'Form View' },
30+
{ name: 'kanban', label: 'Kanban View' },
31+
];
32+
33+
return (
34+
<div className="space-y-6">
35+
{/* Header */}
36+
<div>
37+
<h2 className="text-3xl font-bold tracking-tight">ObjectUI Integration</h2>
38+
<p className="text-muted-foreground">
39+
Demonstration of @object-ui components integrated with ObjectStack backend.
40+
</p>
41+
</div>
42+
43+
{/* Installation Status */}
44+
<Card>
45+
<CardHeader>
46+
<CardTitle className="flex items-center gap-2">
47+
<CheckCircle2 className="size-5 text-green-600" />
48+
ObjectUI Packages Installed
49+
</CardTitle>
50+
<CardDescription>
51+
The following @object-ui packages are now available in development:
52+
</CardDescription>
53+
</CardHeader>
54+
<CardContent>
55+
<div className="flex flex-wrap gap-2">
56+
<Badge variant="secondary">@object-ui/core@2.0.0</Badge>
57+
<Badge variant="secondary">@object-ui/react@2.0.0</Badge>
58+
<Badge variant="secondary">@object-ui/components@2.0.0</Badge>
59+
<Badge variant="secondary">@object-ui/layout@2.0.0</Badge>
60+
<Badge variant="secondary">@object-ui/fields@2.0.0</Badge>
61+
<Badge variant="secondary">@object-ui/data-objectstack@2.0.0</Badge>
62+
</div>
63+
</CardContent>
64+
</Card>
65+
66+
{/* Interactive Demo */}
67+
<Card>
68+
<CardHeader>
69+
<CardTitle>Interactive Demo</CardTitle>
70+
<CardDescription>
71+
Select an object and view mode to see the ObjectUI components in action.
72+
</CardDescription>
73+
</CardHeader>
74+
<CardContent className="space-y-4">
75+
{/* Object Selector */}
76+
<div>
77+
<label className="text-sm font-medium mb-2 block">Select Object</label>
78+
<div className="flex gap-2">
79+
{demoObjects.map((obj) => (
80+
<Button
81+
key={obj.name}
82+
variant={selectedObject === obj.name ? 'default' : 'outline'}
83+
onClick={() => setSelectedObject(obj.name)}
84+
size="sm"
85+
>
86+
{obj.label}
87+
</Button>
88+
))}
89+
</div>
90+
</div>
91+
92+
{/* View Selector */}
93+
<div>
94+
<label className="text-sm font-medium mb-2 block">Select View</label>
95+
<div className="flex gap-2">
96+
{views.map((view) => (
97+
<Button
98+
key={view.name}
99+
variant={selectedView === view.name ? 'default' : 'outline'}
100+
onClick={() => setSelectedView(view.name)}
101+
size="sm"
102+
>
103+
{view.label}
104+
</Button>
105+
))}
106+
</div>
107+
</div>
108+
109+
{/* ObjectUI Renderer */}
110+
<div className="border rounded-lg p-4 bg-muted/50">
111+
<ObjectUIExample
112+
objectName={selectedObject}
113+
view={selectedView}
114+
/>
115+
</div>
116+
</CardContent>
117+
</Card>
118+
119+
{/* Documentation */}
120+
<Card>
121+
<CardHeader>
122+
<CardTitle>Usage Guide</CardTitle>
123+
<CardDescription>
124+
How to use @object-ui components in your application
125+
</CardDescription>
126+
</CardHeader>
127+
<CardContent className="prose prose-sm max-w-none">
128+
<h3 className="text-base font-semibold">Basic Usage</h3>
129+
<pre className="bg-muted p-4 rounded-lg overflow-x-auto">
130+
{`import { SchemaRenderer } from '@object-ui/react';
131+
import { objectUIAdapter } from '@/lib/object-ui-adapter';
132+
133+
function MyComponent() {
134+
return (
135+
<SchemaRenderer
136+
adapter={objectUIAdapter}
137+
objectName="contacts"
138+
view="grid"
139+
/>
140+
);
141+
}`}
142+
</pre>
143+
144+
<h3 className="text-base font-semibold mt-4">Available Packages</h3>
145+
<ul className="list-disc list-inside space-y-1">
146+
<li><code>@object-ui/core</code> - Core logic and types</li>
147+
<li><code>@object-ui/react</code> - React components and SchemaRenderer</li>
148+
<li><code>@object-ui/components</code> - Standard UI components (Shadcn-based)</li>
149+
<li><code>@object-ui/layout</code> - Application shell components</li>
150+
<li><code>@object-ui/fields</code> - Field renderers</li>
151+
<li><code>@object-ui/data-objectstack</code> - ObjectStack data adapter</li>
152+
</ul>
153+
</CardContent>
154+
</Card>
155+
</div>
156+
);
157+
}

0 commit comments

Comments
 (0)