Skip to content

Commit ac6fcd7

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Add ChatbotDemo and update prototype app to showcase the component
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent 4493647 commit ac6fcd7

3 files changed

Lines changed: 205 additions & 391 deletions

File tree

‎examples/prototype/src/App.tsx‎

Lines changed: 3 additions & 390 deletions
Original file line numberDiff line numberDiff line change
@@ -1,396 +1,9 @@
11
import { SchemaRenderer } from '@object-ui/react';
22
import '@object-ui/components';
3-
4-
const schema = {
5-
type: 'sidebar-provider',
6-
body: [
7-
{
8-
type: 'sidebar',
9-
body: [
10-
{
11-
type: 'sidebar-header',
12-
body: [
13-
{
14-
type: 'div',
15-
className: 'px-4 py-4 font-bold text-xl flex items-center gap-2',
16-
body: [
17-
{
18-
type: 'image',
19-
src: '/logo.svg',
20-
className: 'size-8 rounded-lg',
21-
alt: 'Object UI Logo'
22-
},
23-
{
24-
type: 'text',
25-
content: 'Object UI'
26-
}
27-
]
28-
}
29-
]
30-
},
31-
{
32-
type: 'sidebar-content',
33-
body: [
34-
{
35-
type: 'sidebar-group',
36-
label: 'Platform',
37-
body: [
38-
{
39-
type: 'sidebar-menu',
40-
body: [
41-
{
42-
type: 'sidebar-menu-item',
43-
body: {
44-
type: 'sidebar-menu-button',
45-
active: true,
46-
body: [
47-
{ type: 'icon', name: 'SquareTerminal' },
48-
{ type: 'span', body: { type: 'text', content: 'Dashboard' } }
49-
]
50-
}
51-
},
52-
{
53-
type: 'sidebar-menu-item',
54-
body: {
55-
type: 'sidebar-menu-button',
56-
body: [
57-
{ type: 'icon', name: 'Frame' },
58-
{ type: 'span', body: { type: 'text', content: 'Projects' } }
59-
]
60-
}
61-
},
62-
{
63-
type: 'sidebar-menu-item',
64-
body: {
65-
type: 'sidebar-menu-button',
66-
body: [
67-
{ type: 'icon', name: 'Map' },
68-
{ type: 'span', body: { type: 'text', content: 'Tasks' } }
69-
]
70-
}
71-
}
72-
]
73-
}
74-
]
75-
},
76-
{
77-
type: 'sidebar-group',
78-
label: 'Settings',
79-
body: [
80-
{
81-
type: 'sidebar-menu',
82-
body: [
83-
{
84-
type: 'sidebar-menu-item',
85-
body: {
86-
type: 'sidebar-menu-button',
87-
body: [
88-
{ type: 'icon', name: 'User' },
89-
{ type: 'span', body: { type: 'text', content: 'Profile' } }
90-
]
91-
}
92-
},
93-
{
94-
type: 'sidebar-menu-item',
95-
body: {
96-
type: 'sidebar-menu-button',
97-
body: [
98-
{ type: 'icon', name: 'CreditCard' },
99-
{ type: 'span', body: { type: 'text', content: 'Billing' } }
100-
]
101-
}
102-
}
103-
]
104-
}
105-
]
106-
}
107-
]
108-
},
109-
{
110-
type: 'sidebar-footer',
111-
body: {
112-
type: 'sidebar-menu',
113-
body: {
114-
type: 'sidebar-menu-item',
115-
body: {
116-
type: 'sidebar-menu-button',
117-
size: 'lg',
118-
className: 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground',
119-
body: {
120-
type: 'div',
121-
className: 'flex items-center gap-2 text-left leading-tight',
122-
body: [
123-
{
124-
type: 'avatar',
125-
src: 'https://github.com/shadcn.png',
126-
alt: '@shadcn',
127-
fallback: 'SC',
128-
className: 'h-8 w-8 rounded-lg'
129-
},
130-
{
131-
type: 'div',
132-
className: 'grid flex-1 text-left text-sm leading-tight',
133-
body: [
134-
{ type: 'span', className: 'truncate font-semibold', body: {type: 'text', content: 'Troy Su'} },
135-
{ type: 'span', className: 'truncate text-xs', body: {type: 'text', content: 'troy@object-ui.com'} }
136-
]
137-
}
138-
]
139-
}
140-
}
141-
}
142-
}
143-
}
144-
]
145-
},
146-
{
147-
type: 'sidebar-inset',
148-
body: [
149-
{
150-
type: 'header-bar',
151-
className: 'border-b px-6 py-3',
152-
crumbs: [
153-
{ label: 'Platform', href: '#' },
154-
{ label: 'Dashboard' }
155-
]
156-
},
157-
{
158-
type: 'div',
159-
className: 'flex flex-1 flex-col gap-6 p-8 bg-muted/10 min-h-[calc(100vh-4rem)]',
160-
body: [
161-
{
162-
type: 'div',
163-
className: 'flex items-center justify-between',
164-
body: [
165-
{
166-
type: 'div',
167-
className: 'space-y-1',
168-
body: [
169-
{ type: 'div', className: 'text-2xl font-bold tracking-tight', body: { type: 'text', content: 'Dashboard' } },
170-
{ type: 'div', className: 'text-sm text-muted-foreground', body: { type: 'text', content: 'Overview of your project performance and metrics.' } }
171-
]
172-
},
173-
{
174-
type: 'div',
175-
className: 'flex items-center gap-2',
176-
body: [
177-
{ type: 'button', label: 'Download', variant: 'outline', size: 'sm' },
178-
{ type: 'button', label: 'Create New', size: 'sm' }
179-
]
180-
}
181-
]
182-
},
183-
{
184-
type: 'div',
185-
className: 'grid gap-6 md:grid-cols-2 lg:grid-cols-4',
186-
body: [
187-
{
188-
type: 'card',
189-
className: 'shadow-sm hover:shadow-md transition-shadow',
190-
body: [
191-
{
192-
type: 'div',
193-
className: 'p-6 pb-2',
194-
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Total Revenue' } }
195-
},
196-
{
197-
type: 'div',
198-
className: 'p-6 pt-0',
199-
body: [
200-
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '$45,231.89' } },
201-
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+20.1% from last month' } }
202-
]
203-
}
204-
]
205-
},
206-
{
207-
type: 'card',
208-
className: 'shadow-sm hover:shadow-md transition-shadow',
209-
body: [
210-
{
211-
type: 'div',
212-
className: 'p-6 pb-2',
213-
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Subscriptions' } }
214-
},
215-
{
216-
type: 'div',
217-
className: 'p-6 pt-0',
218-
body: [
219-
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '+2,350' } },
220-
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+180.1% from last month' } }
221-
]
222-
}
223-
]
224-
},
225-
{
226-
type: 'card',
227-
className: 'shadow-sm hover:shadow-md transition-shadow',
228-
body: [
229-
{
230-
type: 'div',
231-
className: 'p-6 pb-2',
232-
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Sales' } }
233-
},
234-
{
235-
type: 'div',
236-
className: 'p-6 pt-0',
237-
body: [
238-
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '+12,234' } },
239-
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+19% from last month' } }
240-
]
241-
}
242-
]
243-
},
244-
{
245-
type: 'card',
246-
className: 'shadow-sm hover:shadow-md transition-shadow',
247-
body: [
248-
{
249-
type: 'div',
250-
className: 'p-6 pb-2',
251-
body: { type: 'div', className: 'text-sm font-medium text-muted-foreground', body: { type: 'text', content: 'Active Now' } }
252-
},
253-
{
254-
type: 'div',
255-
className: 'p-6 pt-0',
256-
body: [
257-
{ type: 'div', className: 'text-2xl font-bold', body: { type: 'text', content: '+573' } },
258-
{ type: 'div', className: 'text-xs text-muted-foreground mt-1', body: { type: 'text', content: '+201 since last hour' } }
259-
]
260-
}
261-
]
262-
}
263-
]
264-
},
265-
{
266-
type: 'tabs',
267-
defaultValue: 'overview',
268-
className: 'space-y-6',
269-
items: [
270-
{
271-
value: 'overview',
272-
label: 'Overview',
273-
body: [
274-
{
275-
type: 'div',
276-
className: 'grid gap-6 md:grid-cols-2 lg:grid-cols-7',
277-
body: [
278-
{
279-
type: 'card',
280-
className: 'col-span-4 shadow-sm',
281-
title: 'Interactive Chart',
282-
body: {
283-
type: 'div',
284-
className: 'p-6',
285-
body: {
286-
type: 'chart',
287-
chartType: 'bar',
288-
className: "aspect-auto h-[350px] w-full",
289-
data: [
290-
{ month: "January", desktop: 186, mobile: 80 },
291-
{ month: "February", desktop: 305, mobile: 200 },
292-
{ month: "March", desktop: 237, mobile: 120 },
293-
{ month: "April", desktop: 73, mobile: 190 },
294-
{ month: "May", desktop: 209, mobile: 130 },
295-
{ month: "June", desktop: 214, mobile: 140 },
296-
],
297-
config: {
298-
desktop: {
299-
label: "Desktop",
300-
color: "hsl(var(--primary))",
301-
},
302-
mobile: {
303-
label: "Mobile",
304-
color: "hsl(var(--primary)/0.5)",
305-
},
306-
},
307-
xAxisKey: "month",
308-
series: [
309-
{ dataKey: "desktop" },
310-
{ dataKey: "mobile" }
311-
]
312-
}
313-
}
314-
},
315-
{
316-
type: 'card',
317-
className: 'col-span-3 shadow-sm',
318-
title: 'Quick Access',
319-
description: 'Common actions and forms.',
320-
body: [
321-
{
322-
type: 'div',
323-
className: 'p-6 pt-0 space-y-4',
324-
body: [
325-
{
326-
type: 'input',
327-
label: 'Email Address',
328-
id: 'email',
329-
inputType: 'email',
330-
placeholder: 'm@example.com'
331-
},
332-
{
333-
type: 'input',
334-
label: 'Workspace Name',
335-
id: 'workspace',
336-
placeholder: 'Acme Inc.'
337-
},
338-
{
339-
type: 'button',
340-
label: 'Save Preferences',
341-
className: 'w-full mt-2'
342-
}
343-
]
344-
}
345-
]
346-
}
347-
]
348-
},
349-
{
350-
type: 'card',
351-
className: 'shadow-sm mt-6',
352-
title: 'Recent Activity',
353-
description: 'Your recent component usage history.',
354-
body: {
355-
type: 'div',
356-
className: 'p-6 pt-0',
357-
body: [
358-
{ type: 'div', className: 'text-sm', body: { type: 'text', content: 'User updated the schema at 10:42 AM' } },
359-
{ type: 'div', className: 'text-sm text-muted-foreground', body: { type: 'text', content: 'User created a new component at 09:15 AM' } }
360-
]
361-
}
362-
}
363-
]
364-
},
365-
{
366-
value: 'analytics',
367-
label: 'Analytics',
368-
body: { type: 'text', content: 'Analytics Content' }
369-
},
370-
{
371-
value: 'reports',
372-
label: 'Reports',
373-
body: { type: 'text', content: 'Reports Content' }
374-
},
375-
{
376-
value: 'notifications',
377-
label: 'Notifications',
378-
body: { type: 'text', content: 'Notifications Content' }
379-
}
380-
]
381-
}
382-
]
383-
}
384-
]
385-
}
386-
]
387-
};
3+
import ChatbotDemo from './ChatbotDemo';
3884

3895
function App() {
390-
return (
391-
<SchemaRenderer schema={schema} />
392-
)
6+
return <ChatbotDemo />;
3937
}
3948

395-
export default App
396-
9+
export default App;

0 commit comments

Comments
 (0)