Skip to content

Commit e0a0b2a

Browse files
hotlonghotlong
committed
refactor: update story titles to use 'Templates/' prefix for consistency
feat: add CRMApp story with SidebarNav and layout structure
1 parent 53369bb commit e0a0b2a

4 files changed

Lines changed: 159 additions & 3 deletions

File tree

‎packages/components/src/stories-json/dashboard.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { SchemaRenderer } from '../SchemaRenderer';
33
import type { BaseSchema } from '@object-ui/types';
44

55
const meta = {
6-
title: 'Views/Dashboard',
6+
title: 'Templates/Dashboard',
77
component: SchemaRenderer,
88
parameters: {
99
layout: 'padded',

‎packages/components/src/stories-json/page.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
22
import { SchemaRenderer } from '../SchemaRenderer';
33

44
const meta: Meta = {
5-
title: 'Components/Page',
5+
title: 'Templates/Page',
66
component: SchemaRenderer,
77
parameters: { layout: 'fullscreen' },
88
tags: ['autodocs'],

‎packages/components/src/stories-json/sidebar.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
22
import { SchemaRenderer } from '../SchemaRenderer';
33

44
const meta: Meta = {
5-
title: 'Components/Sidebar',
5+
title: 'Templates/Sidebar',
66
component: SchemaRenderer,
77
tags: ['autodocs'],
88
argTypes: {

‎packages/components/src/stories/CRMApp.stories.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import React, { useState, useEffect } from 'react';
4+
import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
5+
import { PageSchema } from '@object-ui/types';
6+
import { SidebarProvider } from '../ui/sidebar';
7+
8+
// Mock Component for SidebarNav since we can't easily import the one from examples/crm-app
9+
// In a real monorepo scenario, this component should probably live in a shared package or be defined here.
10+
const SidebarNav = () => {
11+
return (
12+
<SchemaRenderer schema={{
13+
type: "sidebar",
14+
props: { collapsible: "icon" },
15+
children: [
16+
{
17+
type: "sidebar:header",
18+
children: [
19+
{
20+
type: "div",
21+
className: "flex items-center gap-2 px-2 py-3",
22+
children: [
23+
{ type: "icon", props: { name: "GalleryVerticalEnd", className: "size-4" } },
24+
{ type: "text", content: "Object UI", className: "font-semibold" }
25+
]
26+
}
27+
]
28+
},
29+
{
30+
type: "sidebar:content",
31+
children: [
32+
{
33+
type: "sidebar:group",
34+
children: [
35+
{ type: "sidebar:group-label", content: "Platform" },
36+
{
37+
type: "sidebar:menu",
38+
children: [
39+
{ type: "sidebar:menu-button", props: { isActive: true }, children: [{type:"text", content:"Dashboard"}] },
40+
{ type: "sidebar:menu-button", children: [{type:"text", content:"Contacts"}] },
41+
{ type: "sidebar:menu-button", children: [{type:"text", content:"Opportunities"}] },
42+
{ type: "sidebar:menu-button", children: [{type:"text", content:"Accounts"}] },
43+
]
44+
}
45+
]
46+
}
47+
]
48+
},
49+
{
50+
type: "sidebar:footer",
51+
children: [
52+
{
53+
type: "sidebar:menu-button",
54+
children: [
55+
{ type: "avatar", props: { src: "https://github.com/shadcn.png" }, className: "h-8 w-8 rounded-lg" },
56+
{ type: "text", content: "Admin User", className: "ml-2 text-sm" }
57+
]
58+
}
59+
]
60+
}
61+
]
62+
}} />
63+
);
64+
};
65+
66+
67+
const CRMAppPreview = () => {
68+
return (
69+
<SidebarProvider>
70+
<div className="flex h-screen w-full bg-sidebar-background">
71+
{/* We simulate the generic layout structure here since SidebarProvider relies on context */}
72+
{/* In a real integration, we'd use the actual Providers. For Storybook, we might need a decorator */}
73+
{/* But here we use SchemaRenderer to render the Sidebar using the JSON we defined above */}
74+
<div className="w-[250px] border-r bg-background h-full hidden md:block">
75+
<SidebarNav />
76+
</div>
77+
78+
<div className="flex flex-1 flex-col h-full overflow-hidden">
79+
<header className="flex h-16 shrink-0 items-center gap-2 border-b px-4 bg-background">
80+
<div className="flex items-center gap-2">
81+
<span className="font-semibold">CRM Demo App</span>
82+
</div>
83+
</header>
84+
<div className="flex-1 overflow-y-auto p-4 md:p-8 bg-gray-50/50">
85+
<SchemaRenderer schema={{
86+
type: "page",
87+
props: { title: "Dashboard" },
88+
children: [
89+
{
90+
type: "grid",
91+
props: { cols: 3, gap: 4, className: "mb-8" },
92+
children: [
93+
{ type: "card", props: { title: "Total Revenue", description: "+20.1% from last month" }, children: [{type: "text", content: "$45,231.89", className: "text-2xl font-bold"}] },
94+
{ type: "card", props: { title: "Subscriptions", description: "+180.1% from last month" }, children: [{type: "text", content: "+2350", className: "text-2xl font-bold"}] },
95+
{ type: "card", props: { title: "Sales", description: "+19% from last month" }, children: [{type: "text", content: "+12,234", className: "text-2xl font-bold"}] },
96+
]
97+
},
98+
{
99+
type: "grid",
100+
props: { cols: 7, gap: 4 },
101+
children: [
102+
{
103+
type: "card",
104+
props: { title: "Overview", className: "col-span-4" },
105+
children: [{ type: "chart:bar", props: {
106+
data: [
107+
{ name: "Jan", total: 1200 }, { name: "Feb", total: 1500 }, { name: "Mar", total: 1300 },
108+
{ name: "Apr", total: 1800 }, { name: "May", total: 2200 }, { name: "Jun", total: 2600 }
109+
],
110+
index: "name",
111+
categories: ["total"]
112+
}}]
113+
},
114+
{
115+
type: "card",
116+
props: { title: "Recent Sales", description: "You made 265 sales this month.", className: "col-span-3" },
117+
children: [
118+
{ type: "view:simple", children: [
119+
{ type: "div", className: "flex items-center justify-between py-2 border-b", children: [
120+
{ type: "div", className: "flex items-center gap-2", children: [{type:"avatar", props:{fallback:"OM"}}, {type:"div", children:[{type:"text", content:"Olivia Martin", className:"font-medium"}, {type:"text", content:"olivia.martin@email.com", className:"text-xs text-muted-foreground"}]}] },
121+
{ type: "text", content: "+$1,999.00", className: "font-medium" }
122+
]},
123+
{ type: "div", className: "flex items-center justify-between py-2 border-b", children: [
124+
{ type: "div", className: "flex items-center gap-2", children: [{type:"avatar", props:{fallback:"JL"}}, {type:"div", children:[{type:"text", content:"Jackson Lee", className:"font-medium"}, {type:"text", content:"jackson.lee@email.com", className:"text-xs text-muted-foreground"}]}] },
125+
{ type: "text", content: "+$39.00", className: "font-medium" }
126+
]},
127+
{ type: "div", className: "flex items-center justify-between py-2", children: [
128+
{ type: "div", className: "flex items-center gap-2", children: [{type:"avatar", props:{fallback:"IN"}}, {type:"div", children:[{type:"text", content:"Isabella Nguyen", className:"font-medium"}, {type:"text", content:"isabella.nguyen@email.com", className:"text-xs text-muted-foreground"}]}] },
129+
{ type: "text", content: "+$299.00", className: "font-medium" }
130+
]},
131+
]}
132+
]
133+
}
134+
]
135+
}
136+
]
137+
}} />
138+
</div>
139+
</div>
140+
</div>
141+
</SidebarProvider>
142+
);
143+
}
144+
145+
146+
const meta: Meta = {
147+
title: 'Apps/CRM',
148+
component: CRMAppPreview,
149+
parameters: {
150+
layout: 'fullscreen',
151+
},
152+
};
153+
154+
export default meta;
155+
156+
export const Default: StoryObj = {};

0 commit comments

Comments
 (0)