Update README with documentation for all new view components

Co-authored-by: xuyushun441-sys <255036401+xuyushun441-sys@users.noreply.github.com>

Author: Copilot

packages/views/README.md

@@ -4,9 +4,13 @@ Core Object UI views package, providing seamless integration with ObjectStack ba
 
 ## Features
 
-- **ObjectTable**: A specialized table component that automatically fetches and displays data from ObjectStack objects
+- **ObjectGrid**: A specialized grid/table component with CRUD operations, search, filters, and pagination
 - **ObjectForm**: A smart form component that generates forms from ObjectStack object schemas
-- **ObjectView**: A complete object management interface combining table and form components
+- **ObjectView**: A complete object management interface combining grid and form components
+- **ObjectKanban**: A kanban board view with drag-and-drop support for organizing data by status
+- **ObjectCalendar**: A calendar view for displaying time-based records as events
+- **ObjectGantt**: A Gantt chart view for project timeline visualization with progress tracking
+- **ObjectMap**: A geographic map view for location-based data visualization
 
 ## Installation
 
@@ -16,10 +20,12 @@ npm install @object-ui/views @object-ui/core
 
 ## Usage
 
-### ObjectTable
+### ObjectGrid
+
+Display data in a table/grid format with sorting, filtering, and pagination.
 
 ```tsx
-import { ObjectTable } from '@object-ui/views';
+import { ObjectGrid } from '@object-ui/views';
 import { createObjectStackAdapter } from '@object-ui/core';
 
 const dataSource = createObjectStackAdapter({
@@ -29,10 +35,13 @@ const dataSource = createObjectStackAdapter({
 
 function UsersTable() {
   return (
-    <ObjectTable 
+    <ObjectGrid 
       schema={{
         type: 'object-grid',
-        objectName: 'users'
+        objectName: 'users',
+        columns: ['name', 'email', 'status'],
+        searchableFields: ['name', 'email'],
+        pagination: { pageSize: 25 }
       }}
       dataSource={dataSource}
     />
@@ -42,6 +51,8 @@ function UsersTable() {
 
 ### ObjectForm
 
+Create or edit records with auto-generated forms.
+
 ```tsx
 import { ObjectForm } from '@object-ui/views';
 import { createObjectStackAdapter } from '@object-ui/core';
@@ -58,6 +69,7 @@ function UserForm() {
         type: 'object-form',
         objectName: 'users',
         mode: 'create',
+        fields: ['name', 'email', 'role'],
         onSuccess: (data) => console.log('Created:', data)
       }}
       dataSource={dataSource}
@@ -68,6 +80,8 @@ function UserForm() {
 
 ### ObjectView
 
+Complete CRUD interface with grid and form integration.
+
 ```tsx
 import { ObjectView } from '@object-ui/views';
 import { createObjectStackAdapter } from '@object-ui/core';
@@ -84,14 +98,175 @@ function UsersView() {
         type: 'object-view',
         objectName: 'users',
         showSearch: true,
-        showFilters: true
+        showFilters: true,
+        layout: 'drawer'
+      }}
+      dataSource={dataSource}
+    />
+  );
+}
+```
+
+### ObjectKanban
+
+Display data as a kanban board grouped by a status field.
+
+```tsx
+import { ObjectKanban } from '@object-ui/views';
+
+function TasksKanban() {
+  return (
+    <ObjectKanban 
+      schema={{
+        type: 'object-grid',
+        objectName: 'tasks',
+        data: { provider: 'object', object: 'tasks' },
+        filter: {
+          kanban: {
+            groupByField: 'status',
+            columns: ['title', 'priority', 'assignee'],
+            summarizeField: 'estimated_hours'
+          }
+        }
+      }}
+      dataSource={dataSource}
+      onCardMove={(cardId, fromColumn, toColumn) => {
+        console.log(`Moved ${cardId} from ${fromColumn} to ${toColumn}`);
+      }}
+    />
+  );
+}
+```
+
+### ObjectCalendar
+
+Display time-based records as calendar events.
+
+```tsx
+import { ObjectCalendar } from '@object-ui/views';
+
+function EventsCalendar() {
+  return (
+    <ObjectCalendar 
+      schema={{
+        type: 'object-grid',
+        objectName: 'events',
+        data: { provider: 'object', object: 'events' },
+        filter: {
+          calendar: {
+            startDateField: 'start_date',
+            endDateField: 'end_date',
+            titleField: 'title',
+            colorField: 'category'
+          }
+        }
+      }}
+      dataSource={dataSource}
+      onEventClick={(event) => console.log('Event clicked:', event)}
+    />
+  );
+}
+```
+
+### ObjectGantt
+
+Visualize project tasks with a Gantt chart timeline.
+
+```tsx
+import { ObjectGantt } from '@object-ui/views';
+
+function ProjectGantt() {
+  return (
+    <ObjectGantt 
+      schema={{
+        type: 'object-grid',
+        objectName: 'tasks',
+        data: { provider: 'object', object: 'tasks' },
+        filter: {
+          gantt: {
+            startDateField: 'start_date',
+            endDateField: 'end_date',
+            titleField: 'title',
+            progressField: 'progress',
+            dependenciesField: 'dependencies'
+          }
+        }
       }}
       dataSource={dataSource}
+      onTaskClick={(task) => console.log('Task clicked:', task)}
     />
   );
 }
 ```
 
+### ObjectMap
+
+Display location-based data on a map.
+
+```tsx
+import { ObjectMap } from '@object-ui/views';
+
+function LocationsMap() {
+  return (
+    <ObjectMap 
+      schema={{
+        type: 'object-grid',
+        objectName: 'locations',
+        data: { provider: 'object', object: 'locations' },
+        filter: {
+          map: {
+            latitudeField: 'latitude',
+            longitudeField: 'longitude',
+            titleField: 'name',
+            descriptionField: 'address'
+          }
+        }
+      }}
+      dataSource={dataSource}
+      onMarkerClick={(location) => console.log('Location clicked:', location)}
+    />
+  );
+}
+```
+
+## Data Providers
+
+All view components support three data provider types:
+
+### 1. Object Provider (ObjectStack)
+Automatically connects to ObjectStack Metadata and Data APIs.
+
+```tsx
+data: {
+  provider: 'object',
+  object: 'users'
+}
+```
+
+### 2. API Provider (Custom REST API)
+Use your own REST endpoints.
+
+```tsx
+data: {
+  provider: 'api',
+  read: { url: '/api/users', method: 'GET' },
+  write: { url: '/api/users', method: 'POST' }
+}
+```
+
+### 3. Value Provider (Static Data)
+Use hardcoded data arrays for demos or testing.
+
+```tsx
+data: {
+  provider: 'value',
+  items: [
+    { id: 1, name: 'John', email: 'john@example.com' },
+    { id: 2, name: 'Jane', email: 'jane@example.com' }
+  ]
+}
+```
+
 ## Schema Integration
 
 All components automatically integrate with ObjectStack's schema system to: