Skip to content

Commit 7662995

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Update playground to use new plugins and add demo examples
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent f84564d commit 7662995

7 files changed

Lines changed: 494 additions & 23 deletions

File tree

‎apps/playground/package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@
2020
"lucide-react": "^0.469.0",
2121
"react": "^18.3.1",
2222
"react-dom": "^18.3.1",
23-
"react-router-dom": "^7.12.0"
23+
"react-router-dom": "^7.12.0",
24+
"@object-ui/plugin-markdown": "workspace:*",
25+
"@object-ui/plugin-kanban": "workspace:*"
2426
},
2527
"devDependencies": {
2628
"@eslint/js": "^9.39.1",

‎apps/playground/src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import '@object-ui/components';
66
// Import lazy-loaded plugins
77
import '@object-ui/plugin-editor';
88
import '@object-ui/plugin-charts';
9+
import '@object-ui/plugin-markdown';
10+
import '@object-ui/plugin-kanban';
911

1012
// Import core styles
1113
import './index.css';

‎apps/playground/src/data/examples/plugins.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import codeEditorDemo from './plugins/code-editor-demo.json';
22
import chartsDemo from './plugins/charts-demo.json';
3+
import markdownDemo from './plugins/markdown-demo.json';
4+
import kanbanDemo from './plugins/kanban-demo.json';
35
import pluginsShowcase from './plugins/plugins-showcase.json';
46

57
export const plugins = {
68
'code-editor-demo': JSON.stringify(codeEditorDemo, null, 2),
79
'charts-demo': JSON.stringify(chartsDemo, null, 2),
10+
'markdown-demo': JSON.stringify(markdownDemo, null, 2),
11+
'kanban-demo': JSON.stringify(kanbanDemo, null, 2),
812
'plugins-showcase': JSON.stringify(pluginsShowcase, null, 2)
913
};

‎apps/playground/src/data/examples/plugins/kanban-demo.json‎

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
{
2+
"type": "div",
3+
"className": "p-8 space-y-8",
4+
"children": [
5+
{
6+
"type": "div",
7+
"className": "space-y-2",
8+
"children": [
9+
{
10+
"type": "text",
11+
"className": "text-4xl font-bold",
12+
"content": "Kanban Board Demo"
13+
},
14+
{
15+
"type": "text",
16+
"className": "text-muted-foreground text-lg",
17+
"content": "Lazy-loaded drag-and-drop kanban board powered by @dnd-kit"
18+
}
19+
]
20+
},
21+
{
22+
"type": "div",
23+
"className": "space-y-6",
24+
"children": [
25+
{
26+
"type": "div",
27+
"className": "space-y-4",
28+
"children": [
29+
{
30+
"type": "text",
31+
"className": "text-2xl font-semibold",
32+
"content": "📋 Project Management Board"
33+
},
34+
{
35+
"type": "kanban",
36+
"className": "border rounded-lg bg-card",
37+
"columns": [
38+
{
39+
"id": "backlog",
40+
"title": "📝 Backlog",
41+
"cards": [
42+
{
43+
"id": "task-1",
44+
"title": "User Authentication",
45+
"description": "Implement OAuth 2.0 login flow",
46+
"badges": [
47+
{"label": "Feature", "variant": "default"},
48+
{"label": "High Priority", "variant": "destructive"}
49+
]
50+
},
51+
{
52+
"id": "task-2",
53+
"title": "API Documentation",
54+
"description": "Write comprehensive API docs",
55+
"badges": [
56+
{"label": "Documentation", "variant": "secondary"}
57+
]
58+
},
59+
{
60+
"id": "task-3",
61+
"title": "Performance Optimization",
62+
"description": "Optimize bundle size and lazy loading",
63+
"badges": [
64+
{"label": "Enhancement", "variant": "default"}
65+
]
66+
}
67+
]
68+
},
69+
{
70+
"id": "todo",
71+
"title": "📌 To Do",
72+
"cards": [
73+
{
74+
"id": "task-4",
75+
"title": "Design System Updates",
76+
"description": "Update color palette and typography",
77+
"badges": [
78+
{"label": "Design", "variant": "default"}
79+
]
80+
},
81+
{
82+
"id": "task-5",
83+
"title": "Unit Tests",
84+
"description": "Add tests for new plugin components",
85+
"badges": [
86+
{"label": "Testing", "variant": "secondary"}
87+
]
88+
}
89+
]
90+
},
91+
{
92+
"id": "in-progress",
93+
"title": "🚀 In Progress",
94+
"limit": 3,
95+
"cards": [
96+
{
97+
"id": "task-6",
98+
"title": "Plugin Architecture",
99+
"description": "Implement lazy-loaded plugin system",
100+
"badges": [
101+
{"label": "In Progress", "variant": "default"},
102+
{"label": "Critical", "variant": "destructive"}
103+
]
104+
},
105+
{
106+
"id": "task-7",
107+
"title": "Component Library",
108+
"description": "Build reusable UI components",
109+
"badges": [
110+
{"label": "Development", "variant": "default"}
111+
]
112+
}
113+
]
114+
},
115+
{
116+
"id": "review",
117+
"title": "👀 Review",
118+
"cards": [
119+
{
120+
"id": "task-8",
121+
"title": "Code Review PR #42",
122+
"description": "Review plugin-markdown implementation",
123+
"badges": [
124+
{"label": "Review", "variant": "secondary"}
125+
]
126+
}
127+
]
128+
},
129+
{
130+
"id": "done",
131+
"title": "✅ Done",
132+
"cards": [
133+
{
134+
"id": "task-9",
135+
"title": "Create Plugin Packages",
136+
"description": "Set up plugin-charts, plugin-editor, plugin-markdown, plugin-kanban",
137+
"badges": [
138+
{"label": "Completed", "variant": "outline"}
139+
]
140+
},
141+
{
142+
"id": "task-10",
143+
"title": "Documentation Site",
144+
"description": "Launch docs.objectui.org",
145+
"badges": [
146+
{"label": "Completed", "variant": "outline"}
147+
]
148+
},
149+
{
150+
"id": "task-11",
151+
"title": "Initial Release",
152+
"description": "Publish v0.1.0 to npm",
153+
"badges": [
154+
{"label": "Completed", "variant": "outline"},
155+
{"label": "Milestone", "variant": "default"}
156+
]
157+
}
158+
]
159+
}
160+
]
161+
}
162+
]
163+
},
164+
{
165+
"type": "div",
166+
"className": "border rounded-lg p-6 bg-muted/50",
167+
"children": [
168+
{
169+
"type": "text",
170+
"className": "text-lg font-semibold mb-2",
171+
"content": "🎯 Features"
172+
},
173+
{
174+
"type": "div",
175+
"className": "grid grid-cols-2 gap-4",
176+
"children": [
177+
{
178+
"type": "div",
179+
"children": [
180+
{
181+
"type": "text",
182+
"className": "font-medium",
183+
"content": "✨ Drag and Drop"
184+
},
185+
{
186+
"type": "text",
187+
"className": "text-sm text-muted-foreground",
188+
"content": "Move cards between columns"
189+
}
190+
]
191+
},
192+
{
193+
"type": "div",
194+
"children": [
195+
{
196+
"type": "text",
197+
"className": "font-medium",
198+
"content": "🎨 Customizable"
199+
},
200+
{
201+
"type": "text",
202+
"className": "text-sm text-muted-foreground",
203+
"content": "Full Tailwind styling support"
204+
}
205+
]
206+
},
207+
{
208+
"type": "div",
209+
"children": [
210+
{
211+
"type": "text",
212+
"className": "font-medium",
213+
"content": "📦 Lazy Loaded"
214+
},
215+
{
216+
"type": "text",
217+
"className": "text-sm text-muted-foreground",
218+
"content": "Only loads when rendered"
219+
}
220+
]
221+
},
222+
{
223+
"type": "div",
224+
"children": [
225+
{
226+
"type": "text",
227+
"className": "font-medium",
228+
"content": "♿ Accessible"
229+
},
230+
{
231+
"type": "text",
232+
"className": "text-sm text-muted-foreground",
233+
"content": "Keyboard navigation support"
234+
}
235+
]
236+
}
237+
]
238+
}
239+
]
240+
}
241+
]
242+
}
243+
]
244+
}

‎apps/playground/src/data/examples/plugins/markdown-demo.json‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"type": "div",
3+
"className": "p-8 space-y-8",
4+
"children": [
5+
{
6+
"type": "div",
7+
"className": "space-y-2",
8+
"children": [
9+
{
10+
"type": "text",
11+
"className": "text-4xl font-bold",
12+
"content": "Markdown Component Demo"
13+
},
14+
{
15+
"type": "text",
16+
"className": "text-muted-foreground text-lg",
17+
"content": "Lazy-loaded markdown renderer with GitHub Flavored Markdown support"
18+
}
19+
]
20+
},
21+
{
22+
"type": "div",
23+
"className": "grid gap-6",
24+
"children": [
25+
{
26+
"type": "div",
27+
"className": "space-y-4",
28+
"children": [
29+
{
30+
"type": "text",
31+
"className": "text-2xl font-semibold",
32+
"content": "📝 Documentation Example"
33+
},
34+
{
35+
"type": "markdown",
36+
"className": "border rounded-lg p-6 bg-card",
37+
"content": "# Getting Started with Object UI\n\nObject UI is a **universal, schema-driven UI engine** built on React + Tailwind + Shadcn.\n\n## Installation\n\n```bash\npnpm add @object-ui/components @object-ui/core @object-ui/react\n```\n\n## Quick Start\n\n1. Install the packages\n2. Import the components\n3. Define your schema\n4. Render with `<SchemaRenderer>`\n\n### Example Schema\n\n```json\n{\n \"type\": \"div\",\n \"className\": \"p-4\",\n \"children\": [\n {\n \"type\": \"text\",\n \"content\": \"Hello World\"\n }\n ]\n}\n```\n\n## Features\n\n- ✅ **Tailwind Native** - Full control over styling\n- ✅ **Type Safe** - TypeScript support out of the box\n- ✅ **Lazy Loading** - Automatic code splitting\n- ✅ **Plugin System** - Extend with custom components\n\n> **Note:** All plugin components are lazy-loaded by default!"
38+
}
39+
]
40+
},
41+
{
42+
"type": "div",
43+
"className": "space-y-4",
44+
"children": [
45+
{
46+
"type": "text",
47+
"className": "text-2xl font-semibold",
48+
"content": "📋 Advanced Markdown"
49+
},
50+
{
51+
"type": "markdown",
52+
"className": "border rounded-lg p-6 bg-card",
53+
"content": "# GitHub Flavored Markdown\n\n## Tables\n\n| Package | Version | Status |\n|---------|---------|--------|\n| @object-ui/core | 0.1.0 | ✅ Active |\n| @object-ui/components | 0.1.0 | ✅ Active |\n| @object-ui/plugin-markdown | 0.1.0 | 🆕 New |\n| @object-ui/plugin-kanban | 0.1.0 | 🆕 New |\n\n## Task Lists\n\n- [x] Create plugin-markdown package\n- [x] Implement lazy loading\n- [x] Add TypeScript types\n- [x] Write documentation\n- [ ] Add more examples\n\n## Code Blocks with Syntax\n\n```typescript\nimport { ComponentRegistry } from '@object-ui/core';\nimport '@object-ui/plugin-markdown';\n\nconst schema = {\n type: 'markdown',\n content: '# Hello World'\n};\n```\n\n## Emphasis\n\n*Italic text* and **bold text** and ***bold italic***\n\n~~Strikethrough~~ is also supported!\n\n---\n\n> Blockquotes look great!\n> \n> They support multiple lines."
54+
}
55+
]
56+
}
57+
]
58+
}
59+
]
60+
}

0 commit comments

Comments
 (0)