Skip to content

Commit 62c31e5

Browse files
Copilothotlong
Copilot
and
hotlong
committed
Complete Storybook stories for all 14 plugin components
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
1 parent 215a097 commit 62c31e5

5 files changed

Lines changed: 491 additions & 0 deletions

File tree

‎packages/components/src/stories-json/object-form.stories.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { SchemaRenderer } from '../SchemaRenderer';
3+
import type { BaseSchema } from '@object-ui/types';
4+
5+
const meta = {
6+
title: 'JSON/Plugins/Object Form',
7+
component: SchemaRenderer,
8+
parameters: {
9+
layout: 'centered',
10+
},
11+
tags: ['autodocs'],
12+
argTypes: {
13+
schema: { table: { disable: true } },
14+
},
15+
} satisfies Meta<any>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof meta>;
19+
20+
const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
21+
22+
export const BasicSchema: Story = {
23+
render: renderStory,
24+
args: {
25+
type: 'object-form',
26+
objectName: 'User',
27+
fields: [
28+
{ name: 'firstName', label: 'First Name', type: 'text', required: true },
29+
{ name: 'lastName', label: 'Last Name', type: 'text', required: true },
30+
{ name: 'email', label: 'Email', type: 'email', required: true },
31+
{ name: 'age', label: 'Age', type: 'number' }
32+
],
33+
className: 'w-full max-w-2xl'
34+
} as any,
35+
};
36+
37+
export const WithSections: Story = {
38+
render: renderStory,
39+
args: {
40+
type: 'object-form',
41+
objectName: 'Employee',
42+
sections: [
43+
{
44+
title: 'Personal Information',
45+
fields: [
46+
{ name: 'firstName', label: 'First Name', type: 'text', required: true },
47+
{ name: 'lastName', label: 'Last Name', type: 'text', required: true },
48+
{ name: 'dateOfBirth', label: 'Date of Birth', type: 'date' }
49+
]
50+
},
51+
{
52+
title: 'Contact Details',
53+
fields: [
54+
{ name: 'email', label: 'Email', type: 'email', required: true },
55+
{ name: 'phone', label: 'Phone', type: 'tel' },
56+
{ name: 'address', label: 'Address', type: 'textarea' }
57+
]
58+
}
59+
],
60+
className: 'w-full max-w-2xl'
61+
} as any,
62+
};
63+
64+
export const ComplexFields: Story = {
65+
render: renderStory,
66+
args: {
67+
type: 'object-form',
68+
objectName: 'Product',
69+
fields: [
70+
{ name: 'name', label: 'Product Name', type: 'text', required: true },
71+
{ name: 'category', label: 'Category', type: 'select', options: ['Electronics', 'Clothing', 'Food'], required: true },
72+
{ name: 'price', label: 'Price', type: 'number', required: true },
73+
{ name: 'inStock', label: 'In Stock', type: 'checkbox' },
74+
{ name: 'description', label: 'Description', type: 'textarea', rows: 4 }
75+
],
76+
className: 'w-full max-w-2xl'
77+
} as any,
78+
};

‎packages/components/src/stories-json/object-gantt.stories.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { SchemaRenderer } from '../SchemaRenderer';
3+
import type { BaseSchema } from '@object-ui/types';
4+
5+
const meta = {
6+
title: 'JSON/Plugins/Object Gantt',
7+
component: SchemaRenderer,
8+
parameters: {
9+
layout: 'padded',
10+
},
11+
tags: ['autodocs'],
12+
argTypes: {
13+
schema: { table: { disable: true } },
14+
},
15+
} satisfies Meta<any>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof meta>;
19+
20+
const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
21+
22+
export const ProjectSchedule: Story = {
23+
render: renderStory,
24+
args: {
25+
type: 'object-gantt',
26+
objectName: 'Task',
27+
gantt: {
28+
startDateField: 'startDate',
29+
endDateField: 'endDate',
30+
titleField: 'name',
31+
progressField: 'progress',
32+
dependenciesField: 'dependencies'
33+
},
34+
tasks: [
35+
{
36+
id: '1',
37+
name: 'Project Planning',
38+
startDate: '2024-01-01',
39+
endDate: '2024-01-15',
40+
progress: 100
41+
},
42+
{
43+
id: '2',
44+
name: 'Design Phase',
45+
startDate: '2024-01-10',
46+
endDate: '2024-02-15',
47+
progress: 75,
48+
dependencies: ['1']
49+
},
50+
{
51+
id: '3',
52+
name: 'Development',
53+
startDate: '2024-02-01',
54+
endDate: '2024-04-30',
55+
progress: 30,
56+
dependencies: ['2']
57+
},
58+
{
59+
id: '4',
60+
name: 'Testing',
61+
startDate: '2024-04-15',
62+
endDate: '2024-05-15',
63+
progress: 0,
64+
dependencies: ['3']
65+
}
66+
],
67+
className: 'w-full'
68+
} as any,
69+
};
70+
71+
export const SimpleGantt: Story = {
72+
render: renderStory,
73+
args: {
74+
type: 'object-gantt',
75+
objectName: 'Milestone',
76+
gantt: {
77+
startDateField: 'start',
78+
endDateField: 'end',
79+
titleField: 'title'
80+
},
81+
tasks: [
82+
{
83+
id: '1',
84+
title: 'Q1 Goals',
85+
start: '2024-01-01',
86+
end: '2024-03-31'
87+
},
88+
{
89+
id: '2',
90+
title: 'Q2 Goals',
91+
start: '2024-04-01',
92+
end: '2024-06-30'
93+
},
94+
{
95+
id: '3',
96+
title: 'Q3 Goals',
97+
start: '2024-07-01',
98+
end: '2024-09-30'
99+
}
100+
],
101+
className: 'w-full'
102+
} as any,
103+
};

‎packages/components/src/stories-json/object-grid.stories.tsx‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { SchemaRenderer } from '../SchemaRenderer';
3+
import type { BaseSchema } from '@object-ui/types';
4+
5+
const meta = {
6+
title: 'JSON/Plugins/Object Grid',
7+
component: SchemaRenderer,
8+
parameters: {
9+
layout: 'padded',
10+
},
11+
tags: ['autodocs'],
12+
argTypes: {
13+
schema: { table: { disable: true } },
14+
},
15+
} satisfies Meta<any>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof meta>;
19+
20+
const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
21+
22+
export const UserGrid: Story = {
23+
render: renderStory,
24+
args: {
25+
type: 'object-grid',
26+
objectName: 'User',
27+
columns: [
28+
{ field: 'id', header: 'ID', width: 80 },
29+
{ field: 'name', header: 'Name', sortable: true, filterable: true },
30+
{ field: 'email', header: 'Email', sortable: true, filterable: true },
31+
{ field: 'role', header: 'Role', sortable: true },
32+
{ field: 'status', header: 'Status', sortable: true }
33+
],
34+
data: [
35+
{ id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
36+
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'Active' },
37+
{ id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'Inactive' }
38+
],
39+
pagination: true,
40+
pageSize: 10,
41+
className: 'w-full'
42+
} as any,
43+
};
44+
45+
export const ProductGrid: Story = {
46+
render: renderStory,
47+
args: {
48+
type: 'object-grid',
49+
objectName: 'Product',
50+
columns: [
51+
{ field: 'sku', header: 'SKU', width: 120 },
52+
{ field: 'name', header: 'Product Name', sortable: true, filterable: true },
53+
{ field: 'category', header: 'Category', sortable: true, filterable: true },
54+
{ field: 'price', header: 'Price', sortable: true, type: 'currency' },
55+
{ field: 'stock', header: 'In Stock', sortable: true, type: 'number' }
56+
],
57+
data: [
58+
{ sku: 'PROD-001', name: 'Laptop', category: 'Electronics', price: 1299.99, stock: 15 },
59+
{ sku: 'PROD-002', name: 'Mouse', category: 'Electronics', price: 29.99, stock: 120 },
60+
{ sku: 'PROD-003', name: 'Desk Chair', category: 'Furniture', price: 249.99, stock: 8 },
61+
{ sku: 'PROD-004', name: 'Monitor', category: 'Electronics', price: 399.99, stock: 22 }
62+
],
63+
pagination: true,
64+
pageSize: 5,
65+
className: 'w-full'
66+
} as any,
67+
};
68+
69+
export const WithActions: Story = {
70+
render: renderStory,
71+
args: {
72+
type: 'object-grid',
73+
objectName: 'Order',
74+
columns: [
75+
{ field: 'orderId', header: 'Order ID', width: 120 },
76+
{ field: 'customer', header: 'Customer', sortable: true },
77+
{ field: 'date', header: 'Order Date', sortable: true, type: 'date' },
78+
{ field: 'total', header: 'Total', sortable: true, type: 'currency' },
79+
{ field: 'status', header: 'Status', sortable: true }
80+
],
81+
actions: [
82+
{ label: 'View', action: 'view' },
83+
{ label: 'Edit', action: 'edit' },
84+
{ label: 'Delete', action: 'delete', variant: 'destructive' }
85+
],
86+
data: [
87+
{ orderId: 'ORD-1001', customer: 'Alice Brown', date: '2024-01-15', total: 159.99, status: 'Completed' },
88+
{ orderId: 'ORD-1002', customer: 'Charlie Davis', date: '2024-01-18', total: 89.50, status: 'Processing' },
89+
{ orderId: 'ORD-1003', customer: 'Eve Wilson', date: '2024-01-20', total: 299.99, status: 'Shipped' }
90+
],
91+
pagination: true,
92+
pageSize: 10,
93+
className: 'w-full'
94+
} as any,
95+
};

‎packages/components/src/stories-json/object-map.stories.tsx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { SchemaRenderer } from '../SchemaRenderer';
3+
import type { BaseSchema } from '@object-ui/types';
4+
5+
const meta = {
6+
title: 'JSON/Plugins/Object Map',
7+
component: SchemaRenderer,
8+
parameters: {
9+
layout: 'padded',
10+
},
11+
tags: ['autodocs'],
12+
argTypes: {
13+
schema: { table: { disable: true } },
14+
},
15+
} satisfies Meta<any>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof meta>;
19+
20+
const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
21+
22+
export const StoreLocations: Story = {
23+
render: renderStory,
24+
args: {
25+
type: 'object-map',
26+
objectName: 'Store',
27+
map: {
28+
latitudeField: 'latitude',
29+
longitudeField: 'longitude',
30+
titleField: 'name',
31+
descriptionField: 'address'
32+
},
33+
locations: [
34+
{
35+
id: '1',
36+
name: 'Downtown Store',
37+
address: '123 Main St',
38+
latitude: 40.7128,
39+
longitude: -74.0060
40+
},
41+
{
42+
id: '2',
43+
name: 'Uptown Branch',
44+
address: '456 Park Ave',
45+
latitude: 40.7589,
46+
longitude: -73.9851
47+
},
48+
{
49+
id: '3',
50+
name: 'Suburban Location',
51+
address: '789 Oak Rd',
52+
latitude: 40.6782,
53+
longitude: -73.9442
54+
}
55+
],
56+
center: {
57+
latitude: 40.7128,
58+
longitude: -74.0060
59+
},
60+
zoom: 12,
61+
className: 'w-full h-[500px]'
62+
} as any,
63+
};
64+
65+
export const DeliveryRoutes: Story = {
66+
render: renderStory,
67+
args: {
68+
type: 'object-map',
69+
objectName: 'Delivery',
70+
map: {
71+
latitudeField: 'lat',
72+
longitudeField: 'lng',
73+
titleField: 'address'
74+
},
75+
locations: [
76+
{
77+
id: '1',
78+
address: 'Customer A - 100 First St',
79+
lat: 37.7749,
80+
lng: -122.4194,
81+
status: 'Delivered'
82+
},
83+
{
84+
id: '2',
85+
address: 'Customer B - 200 Second Ave',
86+
lat: 37.7849,
87+
lng: -122.4094,
88+
status: 'In Transit'
89+
},
90+
{
91+
id: '3',
92+
address: 'Customer C - 300 Third Blvd',
93+
lat: 37.7649,
94+
lng: -122.4294,
95+
status: 'Pending'
96+
}
97+
],
98+
center: {
99+
latitude: 37.7749,
100+
longitude: -122.4194
101+
},
102+
zoom: 13,
103+
className: 'w-full h-[500px]'
104+
} as any,
105+
};

0 commit comments

Comments
 (0)