feat: add ObjectKanban and ObjectTimeline components with data fetching and rendering capabilities; include MSW tests for calendar and kanban plugins

Author: hotlong

packages/plugin-calendar/package.json

@@ -46,6 +46,7 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.2.1",
+    "@object-ui/data-objectstack": "workspace:*",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

packages/plugin-calendar/src/ObjectCalendar.msw.test.tsx

@@ -0,0 +1,89 @@
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectCalendar } from './ObjectCalendar';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+import React from 'react';
+
+const BASE_URL = 'http://test-api.com';
+
+// --- Mock Data ---
+
+const mockEvents = {
+  value: [
+    { 
+      _id: '1', 
+      title: 'Meeting with Client', 
+      start: new Date().toISOString(), 
+      end: new Date(Date.now() + 3600000).toISOString(),
+      type: 'business'
+    },
+    { 
+      _id: '2', 
+      title: 'Team Lunch', 
+      start: new Date(Date.now() + 86400000).toISOString(), // Tomorrow
+      type: 'personal'
+    }
+  ]
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  http.get(`${BASE_URL}/api/v1`, () => {
+    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
+  }),
+
+  // Data Query: GET /api/v1/data/events
+  http.get(`${BASE_URL}/api/v1/data/events`, () => {
+    return HttpResponse.json(mockEvents);
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectCalendar with MSW', () => {
+  if (!process.env.OBJECTSTACK_API_URL) {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+  }
+
+  const dataSource = new ObjectStackAdapter({
+    baseUrl: BASE_URL,
+  });
+
+  it('fetches events and renders them', async () => {
+    render(
+      <ObjectCalendar
+        schema={{
+          type: 'calendar',
+          objectName: 'events',
+          // Calendar specific config usually goes into 'calendar' prop or implicit mapping
+          calendar: {
+             dateField: 'start',
+             endDateField: 'end',
+             titleField: 'title'
+          }
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    // Verify events appear
+    await waitFor(() => {
+        expect(screen.getByText('Meeting with Client')).toBeInTheDocument();
+    });
+    
+    // Check subsequent events (might need navigation depending on view, 
+    // but default month view usually shows current month dates)
+    // Note: If today is near end of month, tomorrow might be in next month view.
+    // However, the test event is "now", so it should be visible.
+    
+    // We can just assert the first event for now.
+  });
+});

packages/plugin-kanban/package.json

@@ -47,6 +47,7 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.2.1",
+    "@object-ui/data-objectstack": "workspace:*",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

packages/plugin-kanban/src/ObjectKanban.msw.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectKanban } from './ObjectKanban';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+import React from 'react';
+
+// Register layout components (if needed by cards)
+// registerLayout();
+
+const BASE_URL = 'http://localhost';
+
+// --- Mock Data ---
+
+const mockTasks = {
+  value: [
+    { _id: '1', title: 'Task 1', status: 'todo', description: 'Description 1' },
+    { _id: '2', title: 'Task 2', status: 'done', description: 'Description 2' },
+    { _id: '3', title: 'Task 3', status: 'todo', description: 'Description 3' }
+  ]
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  // OPTIONS handler for CORS preflight checks
+  http.options('*', () => {
+    return new HttpResponse(null, { status: 200 });
+  }),
+
+  // Health check
+  http.get(`${BASE_URL}/api/v1`, () => {
+    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
+  }),
+
+  // Data Query: GET /api/v1/data/tasks
+  http.get(`${BASE_URL}/api/v1/data/tasks`, () => {
+    return HttpResponse.json(mockTasks);
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectKanban with MSW', () => {
+  if (!process.env.OBJECTSTACK_API_URL) {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+  }
+
+  const dataSource = new ObjectStackAdapter({
+    baseUrl: BASE_URL,
+  });
+
+  it('fetches tasks and renders them in columns based on groupBy', async () => {
+    render(
+      <ObjectKanban
+        schema={{
+          type: 'kanban',
+          objectName: 'tasks',
+          groupBy: 'status',
+          columns: [
+            { id: 'todo', title: 'To Do', cards: [] },
+            { id: 'done', title: 'Done', cards: [] }
+          ]
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    // Initial state might show Skeleton, wait for data
+    await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+    });
+
+    // Check classification
+    // Task 1 (todo) and Task 3 (todo) should be in To Do column.
+    // Task 2 (done) should be in Done column.
+    
+    // We can verify "Task 1" is present.
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+    expect(screen.getByText('Task 3')).toBeInTheDocument();
+    
+    // Check descriptions
+    expect(screen.getByText('Description 1')).toBeInTheDocument();
+  });
+});

packages/plugin-kanban/src/ObjectKanban.tsx

@@ -0,0 +1,85 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useState } from 'react';
+import type { DataSource } from '@object-ui/types';
+import { useDataScope } from '@object-ui/react';
+import { KanbanRenderer } from './index';
+import { KanbanSchema } from './types';
+
+export interface ObjectKanbanProps {
+  schema: KanbanSchema;
+  dataSource?: DataSource;
+  className?: string; // Allow override
+}
+
+export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
+  schema,
+  dataSource,
+  className,
+}) => {
+  const [fetchedData, setFetchedData] = useState<any[]>([]);
+  // loading state
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Resolve bound data if 'bind' property exists
+  const boundData = useDataScope(schema.bind);
+
+  useEffect(() => {
+    const fetchData = async () => {
+        if (!dataSource || !schema.objectName) return;
+        setLoading(true);
+        try {
+            // Simple find for now, usually we might want filters
+            // Using a large limit or pagination would be needed for real apps,
+            // for now, we assume a reasonable default.
+            const results = await dataSource.find(schema.objectName, {
+                options: { $top: 100 } // Fetch up to 100 cards
+            });
+            // Handle { value: [] } OData shape or direct array
+            const data = (results as any).value || results;
+            console.log("ObjectKanban fetched:", JSON.stringify(data));
+            if (Array.isArray(data)) {
+                setFetchedData(data);
+            }
+        } catch (e) {
+            console.error(e);
+            setError(e as Error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Trigger fetch if we have an objectName AND verify no inline/bound data overrides it
+    if (schema.objectName && !boundData && !schema.data) {
+        fetchData();
+    }
+  }, [schema.objectName, dataSource, boundData, schema.data]);
+
+  // Determine which data to use: bound -> inline -> fetched
+  const effectiveData = boundData || schema.data || fetchedData;
+
+  // Clone schema to inject data and className
+  const effectiveSchema = {
+      ...schema,
+      data: effectiveData,
+      className: className || schema.className
+  };
+
+  if (error) {
+      return (
+        <div className="p-4 border border-destructive/50 rounded bg-destructive/10 text-destructive">
+            Error loading kanban data: {error.message}
+        </div>
+      );
+  }
+
+  // Pass through to the renderer
+  return <KanbanRenderer schema={effectiveSchema} />;
+}

packages/plugin-kanban/src/types.ts

@@ -37,6 +37,21 @@ export interface KanbanColumn {
 export interface KanbanSchema extends BaseSchema {
   type: 'kanban';
 
+  /**
+   * Object name to fetch data from.
+   */
+  objectName?: string;
+
+  /**
+   * Field to group records by (maps to column IDs).
+   */
+  groupBy?: string;
+
+  /**
+   * Static data or bound data.
+   */
+  data?: any[];
+
   /**
    * Array of columns to display in the kanban board.
    * Each column contains an array of cards.

packages/plugin-timeline/package.json

@@ -44,6 +44,7 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.2.1",
+    "@object-ui/data-objectstack": "workspace:*",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

packages/plugin-timeline/src/ObjectTimeline.msw.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectTimeline } from './ObjectTimeline';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+import React from 'react';
+
+const BASE_URL = 'http://test-api.com';
+
+// --- Mock Data ---
+
+const mockMilestones = {
+  value: [
+    { _id: '1', title: 'Start Project', due_date: '2023-01-01', description: 'Initial Kickoff' },
+    { _id: '2', title: 'Beta Launch', due_date: '2023-06-01', description: 'Public Beta' },
+    { _id: '3', title: 'Release', due_date: '2023-12-01', description: 'v1.0 Release' }
+  ]
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  http.get(`${BASE_URL}/api/v1/data/milestones`, () => {
+    return HttpResponse.json(mockMilestones);
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectTimeline with MSW', () => {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+
+    it('fetches and renders timeline items from object data', async () => {
+        const adapter = new ObjectStackAdapter({
+            baseUrl: BASE_URL,
+            bucket: 'test-bucket'
+        });
+
+        const schema = {
+            type: 'timeline',
+            objectName: 'milestones',
+            variant: 'vertical',
+            titleField: 'title',
+            dateField: 'due_date',
+            descriptionField: 'description'
+        };
+
+        render(
+            <ObjectTimeline 
+                // @ts-ignore
+                schema={schema}
+                dataSource={adapter}
+            />
+        );
+
+        // Wait for items to appear
+        await waitFor(() => {
+            expect(screen.getByText('Start Project')).toBeInTheDocument();
+        });
+
+        expect(screen.getByText('Beta Launch')).toBeInTheDocument();
+        expect(screen.getByText('Release')).toBeInTheDocument();
+        
+        // Check descriptions if rendered
+        expect(screen.getByText('Initial Kickoff')).toBeInTheDocument();
+    });
+});