Skip to content

Commit 27fd7c9

Browse files
Copilothuangyiirene
Copilot
and
huangyiirene
committed
Add interactive demos to all plugin documentation
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
1 parent a63e2eb commit 27fd7c9

5 files changed

Lines changed: 325 additions & 1 deletion

File tree

docs/ecosystem/plugins/plugin-charts.md renamed to docs/ecosystem/plugins/plugin-charts.mdx

Lines changed: 63 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: "Plugin Charts"
33
---
44

5+
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
6+
57
Data visualization components powered by Recharts.
68

79
## Installation
@@ -10,6 +12,66 @@ Data visualization components powered by Recharts.
1012
npm install @object-ui/plugin-charts
1113
```
1214

15+
## Interactive Examples
16+
17+
<InteractiveDemo
18+
schema={{
19+
type: "bar-chart",
20+
data: [
21+
{ name: "Jan", value: 400 },
22+
{ name: "Feb", value: 300 },
23+
{ name: "Mar", value: 600 },
24+
{ name: "Apr", value: 800 },
25+
{ name: "May", value: 500 },
26+
{ name: "Jun", value: 700 }
27+
],
28+
dataKey: "value",
29+
xAxisKey: "name",
30+
height: 300,
31+
color: "#8884d8"
32+
}}
33+
title="Bar Chart"
34+
description="Display data as vertical bars"
35+
/>
36+
37+
<InteractiveDemo
38+
schema={{
39+
type: "line-chart",
40+
data: [
41+
{ month: "Jan", revenue: 4000, expenses: 2400 },
42+
{ month: "Feb", revenue: 3000, expenses: 1398 },
43+
{ month: "Mar", revenue: 6000, expenses: 3800 },
44+
{ month: "Apr", revenue: 8000, expenses: 3908 },
45+
{ month: "May", revenue: 5000, expenses: 4800 },
46+
{ month: "Jun", revenue: 7000, expenses: 3800 }
47+
],
48+
lines: [
49+
{ dataKey: "revenue", stroke: "#8884d8", name: "Revenue" },
50+
{ dataKey: "expenses", stroke: "#82ca9d", name: "Expenses" }
51+
],
52+
xAxisKey: "month",
53+
height: 300
54+
}}
55+
title="Multi-Line Chart"
56+
description="Compare multiple metrics over time"
57+
/>
58+
59+
<InteractiveDemo
60+
schema={{
61+
type: "pie-chart",
62+
data: [
63+
{ name: "Desktop", value: 45, fill: "#8884d8" },
64+
{ name: "Mobile", value: 35, fill: "#82ca9d" },
65+
{ name: "Tablet", value: 20, fill: "#ffc658" }
66+
],
67+
dataKey: "value",
68+
nameKey: "name",
69+
height: 300
70+
}}
71+
title="Pie Chart"
72+
description="Show proportional data distribution"
73+
/>
74+
1375
## Usage
1476

1577
### Basic Usage
@@ -57,7 +119,7 @@ const schema = {
57119

58120
| Property | Type | Default | Description |
59121
|----------|------|---------|-------------|
60-
| `data` | Array<Record<string, any>> | `[]` | Array of data objects to visualize |
122+
| `data` | Array of objects | `[]` | Array of data objects to visualize |
61123
| `dataKey` | string | `'value'` | Key in data objects for Y-axis values |
62124
| `xAxisKey` | string | `'name'` | Key in data objects for X-axis labels |
63125
| `height` | number | `400` | Chart height in pixels |

docs/ecosystem/plugins/plugin-editor.md renamed to docs/ecosystem/plugins/plugin-editor.mdx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: "Plugin Editor"
33
---
44

5+
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
6+
57
Code editor component powered by Monaco Editor (VS Code's editor).
68

79
## Installation
@@ -10,6 +12,45 @@ Code editor component powered by Monaco Editor (VS Code's editor).
1012
npm install @object-ui/plugin-editor
1113
```
1214

15+
## Interactive Examples
16+
17+
<InteractiveDemo
18+
schema={{
19+
type: "code-editor",
20+
value: "function greet(name) {\n console.log(`Hello, ${name}!`);\n return `Welcome, ${name}`;\n}\n\ngreet('Developer');",
21+
language: "javascript",
22+
theme: "vs-dark",
23+
height: "300px"
24+
}}
25+
title="JavaScript Editor"
26+
description="Full-featured Monaco editor with syntax highlighting"
27+
/>
28+
29+
<InteractiveDemo
30+
schema={{
31+
type: "code-editor",
32+
value: "def calculate_fibonacci(n):\n if n <= 1:\n return n\n return calculate_fibonacci(n-1) + calculate_fibonacci(n-2)\n\n# Calculate first 10 Fibonacci numbers\nfor i in range(10):\n print(f'F({i}) = {calculate_fibonacci(i)}')",
33+
language: "python",
34+
theme: "vs-dark",
35+
height: "300px"
36+
}}
37+
title="Python Editor"
38+
description="Support for 100+ programming languages"
39+
/>
40+
41+
<InteractiveDemo
42+
schema={{
43+
type: "code-editor",
44+
value: '{\n "name": "objectui-demo",\n "version": "1.0.0",\n "description": "Interactive demo",\n "main": "index.js",\n "dependencies": {\n "@object-ui/core": "latest",\n "@object-ui/react": "latest"\n }\n}',
45+
language: "json",
46+
theme: "vs-dark",
47+
height: "300px",
48+
readOnly: true
49+
}}
50+
title="Read-only JSON Viewer"
51+
description="Perfect for displaying code snippets"
52+
/>
53+
1354
## Usage
1455

1556
### Basic Usage

docs/ecosystem/plugins/plugin-kanban.md renamed to docs/ecosystem/plugins/plugin-kanban.mdx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: "Plugin Kanban"
33
---
44

5+
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
6+
57
Kanban board component with drag-and-drop powered by @dnd-kit.
68

79
## Installation
@@ -10,6 +12,96 @@ Kanban board component with drag-and-drop powered by @dnd-kit.
1012
npm install @object-ui/plugin-kanban
1113
```
1214

15+
## Interactive Examples
16+
17+
<InteractiveDemo
18+
schema={{
19+
type: "kanban",
20+
columns: [
21+
{
22+
id: "todo",
23+
title: "To Do",
24+
cards: [
25+
{ id: "1", title: "Design new feature", description: "Create mockups and wireframes" },
26+
{ id: "2", title: "Write documentation", description: "Update API docs" }
27+
]
28+
},
29+
{
30+
id: "inprogress",
31+
title: "In Progress",
32+
cards: [
33+
{ id: "3", title: "Implement feature", description: "Code the new component", badges: [{ label: "High Priority", variant: "destructive" }] }
34+
]
35+
},
36+
{
37+
id: "done",
38+
title: "Done",
39+
cards: [
40+
{ id: "4", title: "Setup project", description: "Initialize repository" }
41+
]
42+
}
43+
]
44+
}}
45+
title="Basic Kanban Board"
46+
description="Drag and drop cards between columns"
47+
/>
48+
49+
<InteractiveDemo
50+
schema={{
51+
type: "kanban",
52+
columns: [
53+
{
54+
id: "backlog",
55+
title: "Backlog",
56+
cards: [
57+
{
58+
id: "1",
59+
title: "User Authentication",
60+
description: "Implement OAuth2.0",
61+
badges: [
62+
{ label: "Backend", variant: "secondary" },
63+
{ label: "High", variant: "destructive" }
64+
]
65+
},
66+
{
67+
id: "2",
68+
title: "Dark Mode",
69+
description: "Add theme switcher",
70+
badges: [{ label: "UI", variant: "outline" }]
71+
}
72+
]
73+
},
74+
{
75+
id: "wip",
76+
title: "Work In Progress",
77+
limit: 3,
78+
cards: [
79+
{
80+
id: "3",
81+
title: "API Integration",
82+
description: "Connect to backend services",
83+
badges: [{ label: "In Progress", variant: "default" }]
84+
}
85+
]
86+
},
87+
{
88+
id: "review",
89+
title: "Code Review",
90+
cards: []
91+
},
92+
{
93+
id: "completed",
94+
title: "Completed",
95+
cards: [
96+
{ id: "4", title: "Project Setup", description: "Repository initialized" }
97+
]
98+
}
99+
]
100+
}}
101+
title="Advanced Kanban with Badges and Limits"
102+
description="Features WIP limits and card badges for status/priority"
103+
/>
104+
13105
## Usage
14106

15107
### Basic Usage

docs/ecosystem/plugins/plugin-markdown.md renamed to docs/ecosystem/plugins/plugin-markdown.mdx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
title: "Plugin Markdown"
33
---
44

5+
import { InteractiveDemo } from '@/app/components/InteractiveDemo';
6+
57
Markdown renderer with GitHub Flavored Markdown support.
68

79
## Installation
@@ -25,6 +27,35 @@ const schema = {
2527
}
2628
```
2729

30+
## Interactive Examples
31+
32+
<InteractiveDemo
33+
schema={{
34+
type: "markdown",
35+
content: "# Hello Markdown\n\nThis is **bold** text and this is *italic* text.\n\nYou can also add [links](https://objectui.dev) and more!"
36+
}}
37+
title="Basic Markdown"
38+
description="Simple markdown text with formatting"
39+
/>
40+
41+
<InteractiveDemo
42+
schema={{
43+
type: "markdown",
44+
content: "## Task List\n\n- [x] Completed task\n- [ ] Pending task\n- [ ] Another pending task\n\n## Code Block\n\n```javascript\nfunction greet(name) {\n console.log(`Hello, ${name}!`);\n}\n```"
45+
}}
46+
title="Advanced Features"
47+
description="Task lists and code blocks with syntax highlighting"
48+
/>
49+
50+
<InteractiveDemo
51+
schema={{
52+
type: "markdown",
53+
content: "| Feature | Supported | Notes |\n|---------|-----------|-------|\n| Tables | ✅ | GitHub Flavored |\n| Task Lists | ✅ | Interactive |\n| Code Highlight | ✅ | Auto-detect |\n| XSS Protection | ✅ | Sanitized |"
54+
}}
55+
title="Markdown Tables"
56+
description="Beautiful table rendering"
57+
/>
58+
2859
## Features
2960

3061
- **GitHub Flavored Markdown** (tables, task lists, strikethrough)

0 commit comments

Comments
 (0)