Skip to content

Commit 769b52b

Browse files
Copilothotlong
Copilot
and
hotlong
committed
feat: Add enhanced Storybook stories for Dashboard and Kanban with advanced features
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent c0c1ef2 commit 769b52b

2 files changed

Lines changed: 239 additions & 0 deletions

File tree

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -205,3 +205,114 @@ export const WithChartsAndMetrics: Story = {
205205
]
206206
} as any,
207207
};
208+
209+
export const WithGridLayout: Story = {
210+
render: renderStory,
211+
args: {
212+
type: 'dashboard',
213+
name: 'sales_dashboard',
214+
title: 'Sales Analytics Dashboard',
215+
enableGridLayout: true,
216+
persistLayout: true,
217+
widgets: [
218+
{
219+
id: 'total-revenue',
220+
type: 'metric-card',
221+
title: 'Total Revenue',
222+
value: '$142,892',
223+
change: '+12.5%',
224+
trend: 'up',
225+
layout: { x: 0, y: 0, w: 3, h: 2 },
226+
},
227+
{
228+
id: 'new-customers',
229+
type: 'metric-card',
230+
title: 'New Customers',
231+
value: '847',
232+
change: '+8.2%',
233+
trend: 'up',
234+
layout: { x: 3, y: 0, w: 3, h: 2 },
235+
},
236+
{
237+
id: 'conversion-rate',
238+
type: 'metric-card',
239+
title: 'Conversion Rate',
240+
value: '3.24%',
241+
change: '-0.5%',
242+
trend: 'down',
243+
layout: { x: 6, y: 0, w: 3, h: 2 },
244+
},
245+
{
246+
id: 'revenue-chart',
247+
type: 'bar',
248+
title: 'Monthly Revenue',
249+
data: [
250+
{ month: 'Jan', revenue: 12000 },
251+
{ month: 'Feb', revenue: 15000 },
252+
{ month: 'Mar', revenue: 18000 },
253+
{ month: 'Apr', revenue: 14000 },
254+
{ month: 'May', revenue: 20000 },
255+
{ month: 'Jun', revenue: 22000 },
256+
],
257+
xAxisKey: 'month',
258+
series: [{ dataKey: 'revenue' }],
259+
layout: { x: 0, y: 2, w: 6, h: 4 },
260+
},
261+
{
262+
id: 'top-products',
263+
type: 'table',
264+
title: 'Top Products',
265+
columns: ['Product', 'Sales', 'Revenue'],
266+
data: [
267+
{ Product: 'Product A', Sales: 245, Revenue: '$12,450' },
268+
{ Product: 'Product B', Sales: 189, Revenue: '$9,450' },
269+
{ Product: 'Product C', Sales: 156, Revenue: '$7,800' },
270+
],
271+
layout: { x: 6, y: 2, w: 3, h: 4 },
272+
},
273+
],
274+
} as any,
275+
};
276+
277+
export const EditableLayout: Story = {
278+
render: renderStory,
279+
args: {
280+
type: 'dashboard',
281+
name: 'custom_dashboard',
282+
title: 'Customizable Dashboard',
283+
enableGridLayout: true,
284+
enableEditMode: true,
285+
persistLayout: true,
286+
widgets: [
287+
{
288+
id: 'widget-1',
289+
type: 'metric-card',
290+
title: 'Metric 1',
291+
value: '1,234',
292+
layout: { x: 0, y: 0, w: 3, h: 2 },
293+
},
294+
{
295+
id: 'widget-2',
296+
type: 'metric-card',
297+
title: 'Metric 2',
298+
value: '5,678',
299+
layout: { x: 3, y: 0, w: 3, h: 2 },
300+
},
301+
{
302+
id: 'widget-3',
303+
type: 'line',
304+
title: 'Trend Chart',
305+
data: [
306+
{ date: 'Mon', value: 100 },
307+
{ date: 'Tue', value: 150 },
308+
{ date: 'Wed', value: 130 },
309+
{ date: 'Thu', value: 180 },
310+
{ date: 'Fri', value: 200 },
311+
],
312+
xAxisKey: 'date',
313+
series: [{ dataKey: 'value' }],
314+
layout: { x: 0, y: 2, w: 6, h: 3 },
315+
},
316+
],
317+
} as any,
318+
};

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

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -165,3 +165,131 @@ export const ProjectManagement: Story = {
165165
className: 'w-full'
166166
} as any,
167167
};
168+
169+
export const WithVirtualScrolling: Story = {
170+
render: renderStory,
171+
args: {
172+
type: 'kanban',
173+
enableVirtualScrolling: true,
174+
columns: [
175+
{
176+
id: 'backlog',
177+
title: 'Backlog',
178+
cards: Array.from({ length: 100 }, (_, i) => ({
179+
id: `card-${i}`,
180+
title: `Task ${i + 1}`,
181+
description: `Description for task ${i + 1}`,
182+
badges: [
183+
{ label: i % 3 === 0 ? 'Bug' : i % 2 === 0 ? 'Feature' : 'Enhancement', variant: 'default' }
184+
]
185+
}))
186+
},
187+
{
188+
id: 'in-progress',
189+
title: 'In Progress',
190+
limit: 5,
191+
cards: []
192+
},
193+
{
194+
id: 'done',
195+
title: 'Done',
196+
cards: []
197+
}
198+
],
199+
className: 'w-full'
200+
} as any,
201+
};
202+
203+
export const WithColumnLimits: Story = {
204+
render: renderStory,
205+
args: {
206+
type: 'kanban',
207+
columns: [
208+
{
209+
id: 'todo',
210+
title: 'To Do',
211+
cards: [
212+
{ id: '1', title: 'Task 1', badges: [{ label: 'P1', variant: 'destructive' }] },
213+
{ id: '2', title: 'Task 2', badges: [{ label: 'P2', variant: 'default' }] },
214+
]
215+
},
216+
{
217+
id: 'in-progress',
218+
title: 'In Progress (80% Full)',
219+
limit: 5,
220+
cards: [
221+
{ id: '3', title: 'Task 3', description: 'Working on this' },
222+
{ id: '4', title: 'Task 4', description: 'Almost done' },
223+
{ id: '5', title: 'Task 5', description: 'In review' },
224+
{ id: '6', title: 'Task 6', description: 'Testing' },
225+
]
226+
},
227+
{
228+
id: 'blocked',
229+
title: 'Blocked (Over Limit)',
230+
limit: 2,
231+
cards: [
232+
{ id: '7', title: 'Task 7', description: 'Waiting for API', badges: [{ label: 'Blocked', variant: 'destructive' }] },
233+
{ id: '8', title: 'Task 8', description: 'Dependency issue', badges: [{ label: 'Blocked', variant: 'destructive' }] },
234+
{ id: '9', title: 'Task 9', description: 'Needs approval', badges: [{ label: 'Blocked', variant: 'destructive' }] },
235+
]
236+
},
237+
{
238+
id: 'done',
239+
title: 'Done',
240+
cards: [
241+
{ id: '10', title: 'Task 10', badges: [{ label: 'Completed', variant: 'outline' }] },
242+
]
243+
}
244+
],
245+
className: 'w-full'
246+
} as any,
247+
};
248+
249+
export const WithCollapsibleColumns: Story = {
250+
render: renderStory,
251+
args: {
252+
type: 'kanban',
253+
enableCollapse: true,
254+
columns: [
255+
{
256+
id: 'backlog',
257+
title: 'Backlog',
258+
collapsed: false,
259+
cards: [
260+
{ id: '1', title: 'Feature Request 1', description: 'Add dark mode support' },
261+
{ id: '2', title: 'Feature Request 2', description: 'Export to PDF' },
262+
{ id: '3', title: 'Bug Fix 1', description: 'Fix login issue' },
263+
]
264+
},
265+
{
266+
id: 'todo',
267+
title: 'To Do',
268+
collapsed: false,
269+
cards: [
270+
{ id: '4', title: 'Update documentation', badges: [{ label: 'Docs', variant: 'secondary' }] },
271+
{ id: '5', title: 'Write tests', badges: [{ label: 'Testing', variant: 'default' }] },
272+
]
273+
},
274+
{
275+
id: 'in-progress',
276+
title: 'In Progress',
277+
collapsed: false,
278+
cards: [
279+
{ id: '6', title: 'Implement API', description: 'RESTful endpoints' },
280+
]
281+
},
282+
{
283+
id: 'done',
284+
title: 'Done',
285+
collapsed: true,
286+
cards: [
287+
{ id: '7', title: 'Setup project', badges: [{ label: 'Done', variant: 'outline' }] },
288+
{ id: '8', title: 'Configure CI/CD', badges: [{ label: 'Done', variant: 'outline' }] },
289+
{ id: '9', title: 'Deploy to staging', badges: [{ label: 'Done', variant: 'outline' }] },
290+
]
291+
}
292+
],
293+
className: 'w-full'
294+
} as any,
295+
};

0 commit comments

Comments
 (0)