Skip to content

Commit 3183ea8

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Fix playground component schemas and add ObjectUIProvider
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 5d2cffd commit 3183ea8

2 files changed

Lines changed: 87 additions & 119 deletions

File tree

‎apps/site/app/playground/page.tsx‎

Lines changed: 84 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,45 @@ import React, { useState, useEffect } from 'react';
44
import { SchemaRenderer } from '@object-ui/react';
55
import type { SchemaNode } from '@object-ui/core';
66
import dynamic from 'next/dynamic';
7+
import { ObjectUIProvider } from '@/app/components/ObjectUIProvider';
78

89
// Dynamically import Monaco Editor to avoid SSR issues
910
const Editor = dynamic(() => import('@monaco-editor/react'), { ssr: false });
1011

11-
// Load plugins
12-
const pluginsLoading = typeof window !== 'undefined'
13-
? Promise.all([
14-
import('@object-ui/plugin-editor'),
15-
import('@object-ui/plugin-charts'),
16-
import('@object-ui/plugin-kanban'),
17-
import('@object-ui/plugin-markdown'),
18-
import('@object-ui/plugin-object'),
19-
])
20-
: Promise.resolve([]);
21-
2212
// Default example schema
2313
const DEFAULT_SCHEMA = {
24-
type: "container",
14+
type: "div",
2515
className: "space-y-4",
2616
children: [
2717
{
28-
type: "heading",
29-
level: 2,
30-
children: "Welcome to ObjectUI Playground"
18+
type: "text",
19+
content: "Welcome to ObjectUI Playground",
20+
className: "text-2xl font-bold"
3121
},
3222
{
3323
type: "text",
34-
children: "Edit the JSON schema on the left to see live updates here."
24+
content: "Edit the JSON schema on the left to see live updates here."
3525
},
3626
{
3727
type: "card",
3828
className: "p-6",
39-
children: {
40-
type: "container",
41-
className: "space-y-4",
42-
children: [
43-
{
44-
type: "heading",
45-
level: 3,
46-
children: "Quick Example"
47-
},
48-
{
49-
type: "text",
50-
children: "Try changing the text or adding new components!"
51-
},
52-
{
53-
type: "button",
54-
variant: "default",
55-
children: "Click me"
56-
}
57-
]
58-
}
29+
children: [
30+
{
31+
type: "text",
32+
content: "Quick Example",
33+
className: "text-xl font-semibold mb-2"
34+
},
35+
{
36+
type: "text",
37+
content: "Try changing the text or adding new components!",
38+
className: "mb-4"
39+
},
40+
{
41+
type: "button",
42+
variant: "default",
43+
label: "Click me"
44+
}
45+
]
5946
}
6047
]
6148
};
@@ -64,13 +51,13 @@ const DEFAULT_SCHEMA = {
6451
const EXAMPLE_SCHEMAS = {
6552
basic: DEFAULT_SCHEMA,
6653
form: {
67-
type: "container",
54+
type: "div",
6855
className: "space-y-4 max-w-md",
6956
children: [
7057
{
71-
type: "heading",
72-
level: 2,
73-
children: "Contact Form"
58+
type: "text",
59+
content: "Contact Form",
60+
className: "text-2xl font-bold mb-4"
7461
},
7562
{
7663
type: "input",
@@ -80,7 +67,7 @@ const EXAMPLE_SCHEMAS = {
8067
{
8168
type: "input",
8269
name: "email",
83-
type: "email",
70+
inputType: "email",
8471
placeholder: "your@email.com"
8572
},
8673
{
@@ -92,18 +79,18 @@ const EXAMPLE_SCHEMAS = {
9279
{
9380
type: "button",
9481
variant: "default",
95-
children: "Submit"
82+
label: "Submit"
9683
}
9784
]
9885
},
9986
dashboard: {
100-
type: "container",
87+
type: "div",
10188
className: "space-y-6",
10289
children: [
10390
{
104-
type: "heading",
105-
level: 1,
106-
children: "Dashboard"
91+
type: "text",
92+
content: "Dashboard",
93+
className: "text-3xl font-bold"
10794
},
10895
{
10996
type: "grid",
@@ -113,82 +100,70 @@ const EXAMPLE_SCHEMAS = {
113100
{
114101
type: "card",
115102
className: "p-6",
116-
children: {
117-
type: "container",
118-
className: "space-y-2",
119-
children: [
120-
{
121-
type: "text",
122-
className: "text-sm text-muted-foreground",
123-
children: "Total Users"
124-
},
125-
{
126-
type: "heading",
127-
level: 2,
128-
children: "1,234"
129-
}
130-
]
131-
}
103+
children: [
104+
{
105+
type: "text",
106+
content: "Total Users",
107+
className: "text-sm text-muted-foreground"
108+
},
109+
{
110+
type: "text",
111+
content: "1,234",
112+
className: "text-2xl font-bold mt-2"
113+
}
114+
]
132115
},
133116
{
134117
type: "card",
135118
className: "p-6",
136-
children: {
137-
type: "container",
138-
className: "space-y-2",
139-
children: [
140-
{
141-
type: "text",
142-
className: "text-sm text-muted-foreground",
143-
children: "Revenue"
144-
},
145-
{
146-
type: "heading",
147-
level: 2,
148-
children: "$12,345"
149-
}
150-
]
151-
}
119+
children: [
120+
{
121+
type: "text",
122+
content: "Revenue",
123+
className: "text-sm text-muted-foreground"
124+
},
125+
{
126+
type: "text",
127+
content: "$12,345",
128+
className: "text-2xl font-bold mt-2"
129+
}
130+
]
152131
},
153132
{
154133
type: "card",
155134
className: "p-6",
156-
children: {
157-
type: "container",
158-
className: "space-y-2",
159-
children: [
160-
{
161-
type: "text",
162-
className: "text-sm text-muted-foreground",
163-
children: "Active Projects"
164-
},
165-
{
166-
type: "heading",
167-
level: 2,
168-
children: "42"
169-
}
170-
]
171-
}
135+
children: [
136+
{
137+
type: "text",
138+
content: "Active Projects",
139+
className: "text-sm text-muted-foreground"
140+
},
141+
{
142+
type: "text",
143+
content: "42",
144+
className: "text-2xl font-bold mt-2"
145+
}
146+
]
172147
}
173148
]
174149
}
175150
]
176151
},
177152
list: {
178-
type: "container",
153+
type: "div",
179154
className: "space-y-4 max-w-2xl",
180155
children: [
181156
{
182-
type: "heading",
183-
level: 2,
184-
children: "Task List"
157+
type: "text",
158+
content: "Task List",
159+
className: "text-2xl font-bold mb-4"
185160
},
186161
{
187162
type: "card",
188163
className: "divide-y",
189164
children: [
190165
{
191-
type: "container",
166+
type: "div",
192167
className: "p-4 flex items-center gap-3",
193168
children: [
194169
{
@@ -197,12 +172,12 @@ const EXAMPLE_SCHEMAS = {
197172
},
198173
{
199174
type: "text",
200-
children: "Complete documentation"
175+
content: "Complete documentation"
201176
}
202177
]
203178
},
204179
{
205-
type: "container",
180+
type: "div",
206181
className: "p-4 flex items-center gap-3",
207182
children: [
208183
{
@@ -211,12 +186,12 @@ const EXAMPLE_SCHEMAS = {
211186
},
212187
{
213188
type: "text",
214-
children: "Review pull requests"
189+
content: "Review pull requests"
215190
}
216191
]
217192
},
218193
{
219-
type: "container",
194+
type: "div",
220195
className: "p-4 flex items-center gap-3",
221196
children: [
222197
{
@@ -225,7 +200,7 @@ const EXAMPLE_SCHEMAS = {
225200
},
226201
{
227202
type: "text",
228-
children: "Deploy to production"
203+
content: "Deploy to production"
229204
}
230205
]
231206
}
@@ -239,16 +214,8 @@ export default function PlaygroundPage() {
239214
const [schema, setSchema] = useState<SchemaNode>(DEFAULT_SCHEMA);
240215
const [editorValue, setEditorValue] = useState(JSON.stringify(DEFAULT_SCHEMA, null, 2));
241216
const [error, setError] = useState<string | null>(null);
242-
const [pluginsLoaded, setPluginsLoaded] = useState(false);
243217
const [selectedExample, setSelectedExample] = useState<keyof typeof EXAMPLE_SCHEMAS>('basic');
244218

245-
useEffect(() => {
246-
// Wait for plugins to load before rendering
247-
pluginsLoading.then(() => {
248-
setPluginsLoaded(true);
249-
});
250-
}, []);
251-
252219
const handleEditorChange = (value: string | undefined) => {
253220
if (!value) return;
254221

@@ -272,7 +239,8 @@ export default function PlaygroundPage() {
272239
};
273240

274241
return (
275-
<div className="flex flex-col h-screen bg-fd-background">
242+
<ObjectUIProvider>
243+
<div className="flex flex-col h-screen bg-fd-background">
276244
{/* Header */}
277245
<div className="border-b border-fd-border bg-fd-card">
278246
<div className="container mx-auto px-4 py-4">
@@ -340,11 +308,7 @@ export default function PlaygroundPage() {
340308
<h2 className="text-sm font-semibold text-fd-foreground">Live Preview</h2>
341309
</div>
342310
<div className="flex-1 overflow-auto p-6">
343-
{!pluginsLoaded ? (
344-
<div className="flex items-center justify-center h-full text-fd-muted-foreground">
345-
Loading plugins...
346-
</div>
347-
) : error ? (
311+
{error ? (
348312
<div className="flex items-center justify-center h-full">
349313
<div className="text-center space-y-2">
350314
<div className="text-4xl">⚠️</div>
@@ -359,6 +323,7 @@ export default function PlaygroundPage() {
359323
</div>
360324
</div>
361325
</div>
362-
</div>
326+
</div>
327+
</ObjectUIProvider>
363328
);
364329
}

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)