Skip to content

Commit 349d9d1

Browse files
committed
feat(ui): add new visualization components and widgets
- Introduced ObjectKanbanView and ObjectTimelineView as new view components. - Implemented ObjectView to dynamically render views based on objectName and viewName. - Added ChartAreaInteractive for interactive area chart visualization with responsive design. - Created ChartBarInteractive and ChartDonut as placeholders for bar and donut chart visualizations. - Developed WidgetChart, WidgetHtml, WidgetMetric, and WidgetView for displaying various types of data in card format. - Enhanced overall UI structure with new components and improved layout.
1 parent 314c894 commit 349d9d1

22 files changed

+374
-22
lines changed

docs/guide/ui-framework.md

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,14 +91,21 @@ These "Smart Components" implement the specific logic for each View Type defined
9191
### `ObjectGridView`
9292
**Implements:** `type: list`, `type: grid`
9393

94-
A high-density data table based on **TanStack Table**.
94+
A high-density, interactive data table based on **AG Grid**.
9595

9696
- **Features**:
97-
- **Inline Editing**: Double-click to edit (if `type: grid`).
98-
- **Columns**: Resizable, sortable, toggleable.
99-
- **Selection**: Checkbox row selection for Bulk Actions.
100-
- **Pagination**: Infinite scroll or paged navigation.
101-
- **Config Support**: `columns`, `sort`, `filters`, `row_actions`, `bulk_actions`.
97+
- **Advanced Layout**: Supports Tabs for switching Views (e.g., "Outline", "Summary").
98+
- **Row Drag & Drop**: Manual reordering of records.
99+
- **Selection**: Checkbox selection with "Select All" and Indeterminate states.
100+
- **Cell Rendering**:
101+
- **Status**: Visual badges with icons.
102+
- **User/Reviewer**: User avatars or dropdown assignment.
103+
- **Progress**: visual progress bars or drag handles.
104+
- **Columns**:
105+
- **Visibility Control**: Users can toggle columns via dropdown.
106+
- **Resizing & Sorting**: Built-in AG Grid capabilities.
107+
- **Pagination**: Custom footer with "Rows per page" and navigation controls.
108+
- **Config Support**: `columns`, `sort`, `filters`, `row_actions`, `bulk_actions`, `tabs`.
102109

103110
### `ObjectKanbanView`
104111
**Implements:** `type: kanban`
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
// import { Responsive, WidthProvider } from 'react-grid-layout';
3+
4+
// const ResponsiveGridLayout = WidthProvider(Responsive);
5+
6+
export interface DashboardLayoutProps {
7+
// TODO: Define props based on page spec
8+
components: any[];
9+
}
10+
11+
export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ components }) => {
12+
return (
13+
<div className="grid grid-cols-12 gap-4">
14+
{/* TODO: Implement React Grid Layout or CSS Grid */}
15+
<div className="col-span-12 p-4 border border-dashed rounded bg-muted/50">
16+
Dashboard Layout Placeholder
17+
</div>
18+
</div>
19+
);
20+
};
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
3+
export interface ObjectPageProps {
4+
pageId: string;
5+
context?: Record<string, any>;
6+
}
7+
8+
export const ObjectPage: React.FC<ObjectPageProps> = ({ pageId, context }) => {
9+
// TODO: Load page definition from Metadata Kernel
10+
// TODO: Resolve permissions
11+
// TODO: Inject PageContext
12+
13+
return (
14+
<div className="w-full h-full">
15+
{/* Placeholder for Layout Renderer */}
16+
<div className="p-4">
17+
<h1 className="text-2xl font-bold">Page: {pageId}</h1>
18+
{/* Render Layout based on page config */}
19+
</div>
20+
</div>
21+
);
22+
};
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
export interface SingleColumnLayoutProps {
4+
// TODO: Define props
5+
components: any[];
6+
}
7+
8+
export const SingleColumnLayout: React.FC<SingleColumnLayoutProps> = ({ components }) => {
9+
return (
10+
<div className="max-w-4xl mx-auto space-y-4">
11+
<div className="p-4 border border-dashed rounded bg-muted/50">
12+
Single Column Layout Placeholder
13+
</div>
14+
</div>
15+
);
16+
};
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { Button } from '@/components/ui/button';
3+
4+
export const FilterBuilder = () => {
5+
return (
6+
<div className="p-4 border rounded bg-background">
7+
<div className="flex flex-col gap-2">
8+
<div>Filter Builder Placeholder</div>
9+
<Button size="sm" variant="secondary">Add Filter</Button>
10+
</div>
11+
</div>
12+
);
13+
};
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Button } from '@/components/ui/button';
3+
4+
export interface ViewToolbarProps {
5+
title: string;
6+
actions?: any[];
7+
viewSwitcherOptions?: any[];
8+
}
9+
10+
export const ViewToolbar: React.FC<ViewToolbarProps> = ({ title }) => {
11+
return (
12+
<div className="flex items-center justify-between p-4 border-b">
13+
<h2 className="text-lg font-semibold">{title}</h2>
14+
<div className="flex gap-2">
15+
{/* Breadcrumbs, View Switcher, Actions */}
16+
<Button variant="outline">Actions</Button>
17+
</div>
18+
</div>
19+
);
20+
};
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export const ObjectCalendarView = () => {
4+
return (
5+
<div className="p-4 border border-dashed rounded">
6+
ObjectCalendarView Placeholder
7+
</div>
8+
);
9+
};
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export const ObjectDetailView = () => {
4+
return (
5+
<div className="p-4 border border-dashed rounded">
6+
ObjectDetailView Placeholder
7+
</div>
8+
);
9+
};
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
// import { ObjectConfig } from '@objectql/types';
3+
import { useForm } from 'react-hook-form';
4+
import { Form } from '@/components/ui/form';
5+
6+
export interface ObjectFormViewProps {
7+
objectName: string;
8+
recordId?: string;
9+
}
10+
11+
export const ObjectFormView: React.FC<ObjectFormViewProps> = ({ objectName, recordId }) => {
12+
const form = useForm();
13+
14+
return (
15+
<Form {...form}>
16+
<form className="space-y-8">
17+
<div className="p-4 border border-dashed rounded">
18+
ObjectFormView Placeholder for {objectName}
19+
</div>
20+
</form>
21+
</Form>
22+
);
23+
};
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react';
2+
3+
export const ObjectGalleryView = () => {
4+
return (
5+
<div className="p-4 border border-dashed rounded">
6+
ObjectGalleryView Placeholder
7+
</div>
8+
);
9+
};

0 commit comments

Comments
 (0)