Skip to content

Commit bc9485c

Browse files
hotlonghotlong
committed
feat: add ViewSwitcher, FilterUI, and SortUI components with documentation
- Introduced ViewSwitcher component for toggling between multiple view configurations. - Added FilterUI component for advanced filtering with various input types. - Implemented SortUI component for configuring sorting options. - Updated meta.json to include new components. - Enhanced schema-overview documentation with links to new components. - Created dedicated documentation files for FilterUI and SortUI. - Updated README for plugin-view to reflect new features and components. - Registered new components in the component registry. - Added class-variance-authority for styling variations.
1 parent 9cd03fc commit bc9485c

File tree

13 files changed

+1212
-7
lines changed

13 files changed

+1212
-7
lines changed

‎content/docs/components/complex/filter-ui.mdx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
---
2+
title: "Filter UI"
3+
description: "Build flexible filter panels for list and view toolbars"
4+
---
5+
6+
import { ComponentDemo } from '@/app/components/ComponentDemo';
7+
8+
The Filter UI component renders configurable filters with text, select, date, and boolean inputs.
9+
10+
## JSON Configuration
11+
12+
```plaintext
13+
{
14+
type: 'filter-ui',
15+
layout: 'popover',
16+
showApply: true,
17+
showClear: true,
18+
filters: [
19+
{ field: 'name', label: 'Name', type: 'text', placeholder: 'Search name' },
20+
{ field: 'status', label: 'Status', type: 'select', options: [
21+
{ label: 'Open', value: 'open' },
22+
{ label: 'Closed', value: 'closed' }
23+
] },
24+
{ field: 'created_at', label: 'Created', type: 'date-range' }
25+
]
26+
}
27+
```
28+
29+
## Basic Usage
30+
31+
<ComponentDemo
32+
schema={{
33+
type: 'filter-ui',
34+
layout: 'popover',
35+
showApply: true,
36+
showClear: true,
37+
filters: [
38+
{ field: 'name', label: 'Name', type: 'text', placeholder: 'Search name' },
39+
{
40+
field: 'status',
41+
label: 'Status',
42+
type: 'select',
43+
options: [
44+
{ label: 'Open', value: 'open' },
45+
{ label: 'Closed', value: 'closed' },
46+
{ label: 'In Progress', value: 'in_progress' }
47+
]
48+
},
49+
{ field: 'priority', label: 'Priority', type: 'number' },
50+
{ field: 'created_at', label: 'Created', type: 'date-range' }
51+
]
52+
}}
53+
title="Filter UI"
54+
description="Popover-based filters with apply and clear actions."
55+
/>
56+
57+
## Schema
58+
59+
```plaintext
60+
interface FilterUISchema {
61+
type: 'filter-ui';
62+
filters: Array<{
63+
field: string;
64+
label?: string;
65+
type: 'text' | 'number' | 'select' | 'date' | 'date-range' | 'boolean';
66+
operator?: 'equals' | 'contains' | 'startsWith' | 'gt' | 'lt' | 'between' | 'in';
67+
options?: Array<{ label: string; value: any }>;
68+
placeholder?: string;
69+
}>;
70+
values?: Record<string, any>;
71+
onChange?: string;
72+
showClear?: boolean;
73+
showApply?: boolean;
74+
layout?: 'inline' | 'popover' | 'drawer';
75+
}
76+
```

‎content/docs/components/complex/meta.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@
66
"carousel",
77
"scroll-area",
88
"resizable",
9-
"filter-builder"
9+
"filter-builder",
10+
"view-switcher",
11+
"filter-ui",
12+
"sort-ui"
1013
]
1114
}

‎content/docs/components/complex/sort-ui.mdx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: "Sort UI"
3+
description: "Configure sorting with dropdowns or button toggles"
4+
---
5+
6+
import { ComponentDemo } from '@/app/components/ComponentDemo';
7+
8+
The Sort UI component exposes single or multi-field sorting controls.
9+
10+
## JSON Configuration
11+
12+
```plaintext
13+
{
14+
type: 'sort-ui',
15+
variant: 'dropdown',
16+
multiple: true,
17+
fields: [
18+
{ field: 'name', label: 'Name' },
19+
{ field: 'created_at', label: 'Created At' }
20+
],
21+
sort: [{ field: 'name', direction: 'asc' }]
22+
}
23+
```
24+
25+
## Basic Usage
26+
27+
<ComponentDemo
28+
schema={{
29+
type: 'sort-ui',
30+
variant: 'dropdown',
31+
multiple: true,
32+
fields: [
33+
{ field: 'name', label: 'Name' },
34+
{ field: 'created_at', label: 'Created At' },
35+
{ field: 'status', label: 'Status' }
36+
],
37+
sort: [{ field: 'name', direction: 'asc' }]
38+
}}
39+
title="Sort UI"
40+
description="Multi-field sorting with a dropdown builder."
41+
/>
42+
43+
## Schema
44+
45+
```plaintext
46+
interface SortUISchema {
47+
type: 'sort-ui';
48+
fields: Array<{
49+
field: string;
50+
label?: string;
51+
}>;
52+
sort?: Array<{
53+
field: string;
54+
direction: 'asc' | 'desc';
55+
}>;
56+
onChange?: string;
57+
multiple?: boolean;
58+
variant?: 'dropdown' | 'buttons';
59+
}
60+
```

‎content/docs/components/complex/view-switcher.mdx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: "View Switcher"
3+
description: "Switch between multiple view configurations in one container"
4+
---
5+
6+
import { ComponentDemo } from '@/app/components/ComponentDemo';
7+
8+
The View Switcher component renders a selector and the active view schema in one place.
9+
10+
## JSON Configuration
11+
12+
```plaintext
13+
{
14+
type: 'view-switcher',
15+
variant: 'tabs',
16+
position: 'top',
17+
defaultView: 'grid',
18+
views: [
19+
{
20+
type: 'grid',
21+
label: 'Grid',
22+
schema: { type: 'text', content: 'Grid content' }
23+
},
24+
{
25+
type: 'kanban',
26+
label: 'Kanban',
27+
schema: { type: 'text', content: 'Kanban content' }
28+
}
29+
]
30+
}
31+
```
32+
33+
## Basic Usage
34+
35+
<ComponentDemo
36+
schema={{
37+
type: 'view-switcher',
38+
variant: 'tabs',
39+
position: 'top',
40+
defaultView: 'grid',
41+
views: [
42+
{
43+
type: 'grid',
44+
label: 'Grid',
45+
schema: { type: 'text', content: 'Grid content' }
46+
},
47+
{
48+
type: 'kanban',
49+
label: 'Kanban',
50+
schema: { type: 'text', content: 'Kanban content' }
51+
},
52+
{
53+
type: 'calendar',
54+
label: 'Calendar',
55+
schema: { type: 'text', content: 'Calendar content' }
56+
}
57+
]
58+
}}
59+
title="View Switcher"
60+
description="Switch between multiple view schemas using tabs."
61+
/>
62+
63+
## Schema
64+
65+
```plaintext
66+
interface ViewSwitcherSchema {
67+
type: 'view-switcher';
68+
views: Array<{
69+
type: 'list' | 'detail' | 'grid' | 'kanban' | 'calendar' | 'timeline' | 'map';
70+
label?: string;
71+
icon?: string;
72+
schema?: SchemaNode;
73+
}>;
74+
defaultView?: string;
75+
activeView?: string;
76+
variant?: 'tabs' | 'buttons' | 'dropdown';
77+
position?: 'top' | 'bottom' | 'left' | 'right';
78+
onViewChange?: string;
79+
persistPreference?: boolean;
80+
storageKey?: string;
81+
}
82+
```

‎content/docs/guide/schema-overview.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -173,13 +173,13 @@ ObjectUI also includes enhanced view components:
173173
### [Detail View](/docs/components/detail-view)
174174
Rich detail pages with sections, tabs, and related records.
175175

176-
### [View Switcher](/docs/components/view-switcher)
176+
### [View Switcher](/docs/components/complex/view-switcher)
177177
Toggle between list, grid, kanban, calendar, timeline, and map views.
178178

179-
### [Filter UI](/docs/components/filter-ui)
179+
### [Filter UI](/docs/components/complex/filter-ui)
180180
Advanced filtering interface with multiple field types.
181181

182-
### [Sort UI](/docs/components/sort-ui)
182+
### [Sort UI](/docs/components/complex/sort-ui)
183183
Sort configuration with multiple fields.
184184

185185
## Installation & Setup

‎packages/components/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import './renderers';
1414
// Export utils
1515
export { cn } from './lib/utils';
1616
export { renderChildren } from './lib/utils';
17+
export { cva } from 'class-variance-authority';
1718

1819
// Export placeholder registration
1920
export { registerPlaceholders } from './renderers/placeholders';

‎packages/plugin-view/README.md‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Object View plugin for Object UI - Unified component for displaying and managing
1111
- **Field Mapping** - Automatic field type detection
1212
- **Validation** - Schema-based validation
1313
- **ObjectQL Integration** - Native ObjectStack support
14+
- **View Controls** - View switcher, filter UI, and sort UI components
1415

1516
## Installation
1617

@@ -66,6 +67,63 @@ Unified view component for ObjectQL objects:
6667
}
6768
```
6869

70+
### ViewSwitcher
71+
72+
Toggle between multiple view configurations:
73+
74+
```typescript
75+
{
76+
type: 'view-switcher',
77+
views: [
78+
{ type: 'grid', label: 'Grid', schema: { type: 'text', content: 'Grid content' } },
79+
{ type: 'kanban', label: 'Kanban', schema: { type: 'text', content: 'Kanban content' } }
80+
],
81+
defaultView: 'grid',
82+
variant: 'tabs',
83+
position: 'top',
84+
persistPreference: true,
85+
storageKey: 'my-view-switcher'
86+
}
87+
```
88+
89+
### FilterUI
90+
91+
Render a filter toolbar with multiple field types:
92+
93+
```typescript
94+
{
95+
type: 'filter-ui',
96+
layout: 'popover',
97+
showApply: true,
98+
showClear: true,
99+
filters: [
100+
{ field: 'name', label: 'Name', type: 'text', placeholder: 'Search name' },
101+
{ field: 'status', label: 'Status', type: 'select', options: [
102+
{ label: 'Open', value: 'open' },
103+
{ label: 'Closed', value: 'closed' }
104+
] },
105+
{ field: 'created_at', label: 'Created', type: 'date-range' }
106+
]
107+
}
108+
```
109+
110+
### SortUI
111+
112+
Configure sorting with dropdowns or buttons:
113+
114+
```typescript
115+
{
116+
type: 'sort-ui',
117+
variant: 'dropdown',
118+
multiple: true,
119+
fields: [
120+
{ field: 'name', label: 'Name' },
121+
{ field: 'created_at', label: 'Created At' }
122+
],
123+
sort: [{ field: 'name', direction: 'asc' }]
124+
}
125+
```
126+
69127
## Examples
70128

71129
### Grid View

‎packages/plugin-view/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@object-ui/plugin-grid": "workspace:*",
2727
"@object-ui/react": "workspace:*",
2828
"@object-ui/types": "workspace:*",
29+
"class-variance-authority": "^0.7.1",
2930
"lucide-react": "^0.563.0"
3031
},
3132
"peerDependencies": {

0 commit comments

Comments
 (0)