Skip to content

Commit d200394

Browse files
committed
json runner
1 parent cc7f2cc commit d200394

File tree

14 files changed

+797
-65
lines changed

14 files changed

+797
-65
lines changed

examples/crm-app/app.json

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"type": "app",
3+
"name": "ObjectCRM",
4+
"title": "Object CRM",
5+
"layout": "sidebar",
6+
"menu": [
7+
{
8+
"label": "Home",
9+
"path": "/",
10+
"icon": "home"
11+
},
12+
{
13+
"label": "Customers",
14+
"path": "/customers",
15+
"icon": "users"
16+
},
17+
{
18+
"label": "Opportunities",
19+
"path": "/opportunities",
20+
"icon": "target"
21+
},
22+
{
23+
"label": "Reports",
24+
"path": "/reports",
25+
"icon": "bar-chart"
26+
}
27+
],
28+
"actions": [
29+
{
30+
"type": "button",
31+
"label": "Notifications"
32+
},
33+
{
34+
"type": "user",
35+
"label": "John Doe"
36+
}
37+
]
38+
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"type": "page",
3+
"title": "Customers",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "flex flex-col gap-6",
8+
"children": [
9+
{
10+
"type": "div",
11+
"className": "flex justify-between items-center",
12+
"children": [
13+
{
14+
"type": "div",
15+
"children": [
16+
{ "type": "html", "html": "<h2 class='text-3xl font-bold'>Customers</h2>" },
17+
{ "type": "html", "html": "<p class='text-muted-foreground'>Manage your customer relationships and accounts.</p>" }
18+
]
19+
},
20+
{
21+
"type": "button",
22+
"label": "Add Customer"
23+
}
24+
]
25+
},
26+
{
27+
"type": "card",
28+
"className": "p-0 overflow-hidden shadow-sm",
29+
"children": [
30+
{
31+
"type": "table",
32+
"columns": [
33+
{ "header": "Name", "accessorKey": "name", "className": "w-[200px]" },
34+
{ "header": "Email", "accessorKey": "email" },
35+
{ "header": "Status", "accessorKey": "status" },
36+
{ "header": "Last Order", "accessorKey": "lastOrder" },
37+
{ "header": "Method", "accessorKey": "method", "className": "text-right" }
38+
],
39+
"data": [
40+
{ "name": "Olivia Martin", "email": "[email protected]", "status": "Active", "lastOrder": "$250.00", "method": "Credit Card" },
41+
{ "name": "Isabella Nguyen", "email": "[email protected]", "status": "Active", "lastOrder": "$450.00", "method": "PayPal" },
42+
{ "name": "Michael Johnson", "email": "[email protected]", "status": "Inactive", "lastOrder": "$150.00", "method": "Bank Transfer" },
43+
{ "name": "Sofia Davis", "email": "[email protected]", "status": "Active", "lastOrder": "$1,250.00", "method": "Credit Card" },
44+
{ "name": "William Kim", "email": "[email protected]", "status": "Active", "lastOrder": "$50.00", "method": "PayPal" }
45+
]
46+
}
47+
]
48+
}
49+
]
50+
}
51+
]
52+
}

examples/crm-app/pages/index.json

Lines changed: 117 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,127 @@
11
{
22
"type": "page",
3-
"title": "CRM Home",
4-
"className": "flex h-screen items-center justify-center bg-slate-100",
5-
"body": {
6-
"type": "card",
7-
"className": "w-full max-w-md p-6 text-center shadow-lg",
8-
"title": "Welcome to Object CRM",
9-
"description": "Select a module to continue",
10-
"body": {
3+
"title": "Dashboard",
4+
"className": "bg-slate-50/50",
5+
"body": [
6+
{
117
"type": "div",
12-
"className": "grid grid-cols-2 gap-4 mt-6",
13-
"body": [
8+
"className": "flex flex-col gap-6",
9+
"children": [
1410
{
15-
"type": "button",
16-
"label": "View Customers",
17-
"className": "h-24 flex-col gap-2 bg-blue-50 text-blue-700 hover:bg-blue-100 border-blue-200",
18-
"onClick": "navigate('/customers')"
11+
"type": "div",
12+
"className": "flex justify-between items-center",
13+
"children": [
14+
{
15+
"type": "html",
16+
"html": "<h2 class='text-3xl font-bold tracking-tight'>Dashboard</h2>"
17+
},
18+
{
19+
"type": "button",
20+
"label": "Download Report",
21+
"variant": "outline",
22+
"className": "h-9"
23+
}
24+
]
1925
},
2026
{
21-
"type": "button",
22-
"label": "System Settings",
23-
"className": "h-24 flex-col gap-2 bg-slate-50 text-slate-700 hover:bg-slate-100 border-slate-200",
24-
"onClick": "navigate('/settings')"
27+
"type": "grid",
28+
"className": "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
29+
"children": [
30+
{
31+
"type": "card",
32+
"className": "p-6 shadow-sm",
33+
"children": [
34+
{
35+
"type": "html",
36+
"html": "<div class='text-sm font-medium text-muted-foreground'>Total Revenue</div><div class='text-2xl font-bold mt-2'>$45,231.89</div><div class='text-xs text-green-600 mt-1'>+20.1% from last month</div>"
37+
}
38+
]
39+
},
40+
{
41+
"type": "card",
42+
"className": "p-6 shadow-sm",
43+
"children": [
44+
{
45+
"type": "html",
46+
"html": "<div class='text-sm font-medium text-muted-foreground'>Subscriptions</div><div class='text-2xl font-bold mt-2'>+2350</div><div class='text-xs text-green-600 mt-1'>+180.1% from last month</div>"
47+
}
48+
]
49+
},
50+
{
51+
"type": "card",
52+
"className": "p-6 shadow-sm",
53+
"children": [
54+
{
55+
"type": "html",
56+
"html": "<div class='text-sm font-medium text-muted-foreground'>Sales</div><div class='text-2xl font-bold mt-2'>+12,234</div><div class='text-xs text-green-600 mt-1'>+19% from last month</div>"
57+
}
58+
]
59+
},
60+
{
61+
"type": "card",
62+
"className": "p-6 shadow-sm",
63+
"children": [
64+
{
65+
"type": "html",
66+
"html": "<div class='text-sm font-medium text-muted-foreground'>Active Now</div><div class='text-2xl font-bold mt-2'>+573</div><div class='text-xs text-blue-600 mt-1'>+201 since last hour</div>"
67+
}
68+
]
69+
}
70+
]
71+
},
72+
{
73+
"type": "grid",
74+
"className": "grid-cols-1 lg:grid-cols-7 gap-4",
75+
"children": [
76+
{
77+
"type": "card",
78+
"className": "lg:col-span-4 p-6 shadow-sm border rounded-xl bg-white text-card-foreground",
79+
"children": [
80+
{
81+
"type": "html",
82+
"html": "<div class='flex flex-col space-y-1.5 p-6'><h3 class='font-semibold leading-none tracking-tight'>Overview</h3><p class='text-sm text-muted-foreground'>Monthly View</p></div><div class='p-6 pt-0 pl-2'><div class='h-[250px] w-full bg-slate-100 flex items-center justify-center text-slate-400 border border-dashed rounded'>Chart Placeholder</div></div>"
83+
}
84+
]
85+
},
86+
{
87+
"type": "card",
88+
"className": "lg:col-span-3 p-0 shadow-sm overflow-hidden",
89+
"children": [
90+
{
91+
"type": "html",
92+
"html": "<div class='p-6 pb-2'><h3 class='font-semibold text-lg'>Recent Sales</h3><p class='text-sm text-muted-foreground'>You made 265 sales this month.</p></div>"
93+
},
94+
{
95+
"type": "div",
96+
"className": "p-6 pt-0 space-y-6",
97+
"children": [
98+
{
99+
"type": "html",
100+
"html": "<div class='flex items-center'><span class='relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full mr-4 bg-slate-200'></span><div class='space-y-1'><p class='text-sm font-medium leading-none'>Olivia Martin</p><p class='text-sm text-muted-foreground'>[email protected]</p></div><div class='ml-auto font-medium'>+$1,999.00</div></div>"
101+
},
102+
{
103+
"type": "html",
104+
"html": "<div class='flex items-center'><span class='relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full mr-4 bg-slate-200'></span><div class='space-y-1'><p class='text-sm font-medium leading-none'>Jackson Lee</p><p class='text-sm text-muted-foreground'>[email protected]</p></div><div class='ml-auto font-medium'>+$39.00</div></div>"
105+
},
106+
{
107+
"type": "html",
108+
"html": "<div class='flex items-center'><span class='relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full mr-4 bg-slate-200'></span><div class='space-y-1'><p class='text-sm font-medium leading-none'>Isabella Nguyen</p><p class='text-sm text-muted-foreground'>[email protected]</p></div><div class='ml-auto font-medium'>+$299.00</div></div>"
109+
},
110+
{
111+
"type": "html",
112+
"html": "<div class='flex items-center'><span class='relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full mr-4 bg-slate-200'></span><div class='space-y-1'><p class='text-sm font-medium leading-none'>William Kim</p><p class='text-sm text-muted-foreground'>[email protected]</p></div><div class='ml-auto font-medium'>+$99.00</div></div>"
113+
},
114+
{
115+
"type": "html",
116+
"html": "<div class='flex items-center'><span class='relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full mr-4 bg-slate-200'></span><div class='space-y-1'><p class='text-sm font-medium leading-none'>Sofia Davis</p><p class='text-sm text-muted-foreground'>[email protected]</p></div><div class='ml-auto font-medium'>+$39.00</div></div>"
117+
}
118+
]
119+
}
120+
]
121+
}
122+
]
25123
}
26124
]
27125
}
28-
}
126+
]
29127
}
Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
{
2+
"type": "page",
3+
"title": "Opportunities",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "flex flex-col gap-6 h-[calc(100vh-140px)]",
8+
"children": [
9+
{
10+
"type": "div",
11+
"className": "flex justify-between items-center",
12+
"children": [
13+
{ "type": "html", "html": "<h2 class='text-3xl font-bold'>Pipeline</h2>" },
14+
{ "type": "button", "label": "New Deal" }
15+
]
16+
},
17+
{
18+
"type": "grid",
19+
"className": "grid-cols-1 md:grid-cols-3 gap-6 h-full overflow-hidden",
20+
"children": [
21+
{
22+
"type": "div",
23+
"className": "flex flex-col gap-4 bg-slate-100/50 p-4 rounded-xl border border-dashed",
24+
"children": [
25+
{ "type": "html", "html": "<div class='font-semibold text-slate-500 mb-2 flex justify-between'><span>Leads</span><span class='bg-slate-200 text-xs px-2 py-0.5 rounded-full'>3</span></div>" },
26+
{
27+
"type": "card",
28+
"className": "p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white",
29+
"children": [
30+
{ "type": "html", "html": "<div class='text-sm text-slate-500 mb-1'>Acme Corp</div><div class='font-semibold'>Enterprise License</div><div class='mt-3 flex justify-between items-center text-xs text-slate-400'><span>$12,000</span><span>2d ago</span></div>" }
31+
]
32+
},
33+
{
34+
"type": "card",
35+
"className": "p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white",
36+
"children": [
37+
{ "type": "html", "html": "<div class='text-sm text-slate-500 mb-1'>Stark Ind</div><div class='font-semibold'>Consulting Project</div><div class='mt-3 flex justify-between items-center text-xs text-slate-400'><span>$5,000</span><span>4h ago</span></div>" }
38+
]
39+
},
40+
{
41+
"type": "card",
42+
"className": "p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white",
43+
"children": [
44+
{ "type": "html", "html": "<div class='text-sm text-slate-500 mb-1'>Globex</div><div class='font-semibold'>Q4 Renewal</div><div class='mt-3 flex justify-between items-center text-xs text-slate-400'><span>$34,000</span><span>1w ago</span></div>" }
45+
]
46+
}
47+
]
48+
},
49+
{
50+
"type": "div",
51+
"className": "flex flex-col gap-4 bg-slate-100/50 p-4 rounded-xl border border-dashed",
52+
"children": [
53+
{ "type": "html", "html": "<div class='font-semibold text-blue-500 mb-2 flex justify-between'><span>In Negotiation</span><span class='bg-blue-100 text-xs px-2 py-0.5 rounded-full'>2</span></div>" },
54+
{
55+
"type": "card",
56+
"className": "p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white border-l-4 border-l-blue-400",
57+
"children": [
58+
{ "type": "html", "html": "<div class='text-sm text-slate-500 mb-1'>Massive Dynamic</div><div class='font-semibold'>Global Rollout</div><div class='mt-3 flex justify-between items-center text-xs text-slate-400'><span>$150,000</span><span>Today</span></div>" }
59+
]
60+
},
61+
{
62+
"type": "card",
63+
"className": "p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white",
64+
"children": [
65+
{ "type": "html", "html": "<div class='text-sm text-slate-500 mb-1'>Cyberdyne</div><div class='font-semibold'>Security Audit</div><div class='mt-3 flex justify-between items-center text-xs text-slate-400'><span>$2,500</span><span>5d ago</span></div>" }
66+
]
67+
}
68+
]
69+
},
70+
{
71+
"type": "div",
72+
"className": "flex flex-col gap-4 bg-slate-100/50 p-4 rounded-xl border border-dashed",
73+
"children": [
74+
{ "type": "html", "html": "<div class='font-semibold text-green-600 mb-2 flex justify-between'><span>Closed Won</span><span class='bg-green-100 text-xs px-2 py-0.5 rounded-full'>1</span></div>" },
75+
{
76+
"type": "card",
77+
"className": "p-4 shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white opacity-80",
78+
"children": [
79+
{ "type": "html", "html": "<div class='text-sm text-slate-500 mb-1'>Wayne Ent</div><div class='font-semibold'>Private Cloud</div><div class='mt-3 flex justify-between items-center text-xs text-green-600 font-bold'><span>$500,000</span><span>Done</span></div>" }
80+
]
81+
}
82+
]
83+
}
84+
]
85+
}
86+
]
87+
}
88+
]
89+
}
Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"type": "page",
3+
"title": "Reports",
4+
"body": [
5+
{
6+
"type": "div",
7+
"className": "flex flex-col gap-6",
8+
"children": [
9+
{
10+
"type": "div",
11+
"className": "flex justify-between items-center",
12+
"children": [
13+
{ "type": "html", "html": "<h2 class='text-3xl font-bold'>Reports</h2>" },
14+
{
15+
"type": "div",
16+
"className": "flex gap-2",
17+
"children": [
18+
{ "type": "button", "label": "Export PDF", "variant": "outline" },
19+
{ "type": "button", "label": "Share" }
20+
]
21+
}
22+
]
23+
},
24+
{
25+
"type": "grid",
26+
"className": "grid-cols-2 gap-4",
27+
"children": [
28+
{
29+
"type": "card",
30+
"className": "col-span-1 p-6 h-[300px] flex items-center justify-center border-dashed bg-slate-50",
31+
"children": [{ "type": "html", "html": "<span class='text-slate-400'>Sales Trend Chart Placeholder</span>" }]
32+
},
33+
{
34+
"type": "card",
35+
"className": "col-span-1 p-6 h-[300px] flex items-center justify-center border-dashed bg-slate-50",
36+
"children": [{ "type": "html", "html": "<span class='text-slate-400'>User Acquisition Chart Placeholder</span>" }]
37+
},
38+
{
39+
"type": "card",
40+
"className": "col-span-2 p-6 h-[200px] flex items-center justify-center border-dashed bg-slate-50",
41+
"children": [{ "type": "html", "html": "<span class='text-slate-400'>Geographic Distribution Map Placeholder</span>" }]
42+
}
43+
]
44+
}
45+
]
46+
}
47+
]
48+
}

packages/components/src/renderers/basic/div.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { renderChildren } from '../../lib/utils';
55
ComponentRegistry.register('div',
66
({ schema, className, ...props }: { schema: DivSchema; className?: string; [key: string]: any }) => (
77
<div className={className} {...props}>
8-
{renderChildren(schema.body)}
8+
{renderChildren(schema.children || schema.body)}
99
</div>
1010
),
1111
{

0 commit comments

Comments
 (0)