@object-ui/plugin-calendar 0.3.1 → 2.0.0

package/src/ObjectCalendar.msw.test.tsx

@@ -0,0 +1,100 @@
+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://localhost';
+
+// --- Mock Data ---
+
+// Create a stable date at noon to avoid day-spanning issues when tests run late at night
+const todayAtNoon = new Date();
+todayAtNoon.setHours(12, 0, 0, 0);
+
+const mockEvents = {
+  value: [
+    { 
+      _id: '1', 
+      title: 'Meeting with Client', 
+      start: todayAtNoon.toISOString(), 
+      end: new Date(todayAtNoon.getTime() + 3600000).toISOString(),
+      type: 'business'
+    },
+    { 
+      _id: '2', 
+      title: 'Team Lunch', 
+      start: new Date(todayAtNoon.getTime() + 86400000).toISOString(), // Tomorrow
+      type: 'personal'
+    }
+  ]
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  http.options('*', () => {
+    return new HttpResponse(null, { status: 200 });
+  }),
+
+  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);
+  }),
+
+  // Metadata Query
+  http.get(`${BASE_URL}/api/v1/metadata/object/events`, () => {
+    return HttpResponse.json({ fields: {} });
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectCalendar with MSW', () => {
+  beforeAll(() => server.listen());
+  afterEach(() => server.resetHandlers());
+  afterAll(() => server.close());
+
+  it('fetches events and renders them', async () => {
+    const dataSource = new ObjectStackAdapter({
+      baseUrl: BASE_URL,
+    });
+
+    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.
+  });
+});

package/src/ObjectCalendar.tsx

@@ -24,26 +24,42 @@
 
 import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData, CalendarConfig } from '@object-ui/types';
+import { CalendarView, type CalendarEvent } from './CalendarView';
+
+export interface CalendarSchema {
+  type: 'calendar';
+  objectName?: string;
+  dateField?: string;
+  endField?: string;
+  titleField?: string;
+  colorField?: string;
+  filter?: any;
+  sort?: any;
+  /** Initial view mode */
+  defaultView?: 'month' | 'week' | 'day';
+}
 
 export interface ObjectCalendarProps {
-  schema: ObjectGridSchema;
+  schema: ObjectGridSchema | CalendarSchema;
   dataSource?: DataSource;
   className?: string;
   onEventClick?: (record: any) => void;
   onDateClick?: (date: Date) => void;
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
+  onNavigate?: (date: Date) => void;
+  onViewChange?: (view: 'month' | 'week' | 'day') => void;
 }
 
 /**
  * Helper to get data configuration from schema
  */
-function getDataConfig(schema: ObjectGridSchema): ViewData | null {
-  if (schema.data) {
+function getDataConfig(schema: ObjectGridSchema | CalendarSchema): ViewData | null {
+  if ('data' in schema && schema.data) {
     return schema.data;
   }
   
-  if (schema.staticData) {
+  if ('staticData' in schema && schema.staticData) {
     return {
       provider: 'value',
       items: schema.staticData,
@@ -90,9 +106,9 @@ function convertSortToQueryParams(sort: string | any[] | undefined): Record<stri
 /**
  * Helper to get calendar configuration from schema
  */
-function getCalendarConfig(schema: ObjectGridSchema): CalendarConfig | null {
+function getCalendarConfig(schema: ObjectGridSchema | CalendarSchema): CalendarConfig | null {
   // Check if schema has calendar configuration
-  if (schema.filter && typeof schema.filter === 'object' && 'calendar' in schema.filter) {
+  if ('filter' in schema && schema.filter && typeof schema.filter === 'object' && 'calendar' in schema.filter) {
     return (schema.filter as any).calendar as CalendarConfig;
   }
   
@@ -101,6 +117,17 @@ function getCalendarConfig(schema: ObjectGridSchema): CalendarConfig | null {
     return (schema as any).calendar as CalendarConfig;
   }
   
+  // Check for flat properties (used by ObjectView)
+  if ((schema as any).startDateField || (schema as any).dateField) {
+      return {
+          startDateField: (schema as any).startDateField || (schema as any).dateField,
+          endDateField: (schema as any).endDateField || (schema as any).endField,
+          titleField: (schema as any).titleField || 'name',
+          colorField: (schema as any).colorField,
+          allDayField: (schema as any).allDayField
+      } as CalendarConfig;
+  }
+
   return null;
 }
 
@@ -110,6 +137,9 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   className,
   onEventClick,
   onDateClick,
+  onNavigate,
+  onViewChange,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -118,22 +148,47 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   const [currentDate, setCurrentDate] = useState(new Date());
   const [view, setView] = useState<'month' | 'week' | 'day'>('month');
 
-  const dataConfig = getDataConfig(schema);
-  const calendarConfig = getCalendarConfig(schema);
+  const dataConfig = useMemo(() => getDataConfig(schema), [
+    (schema as any).data,
+    (schema as any).staticData,
+    schema.objectName,
+  ]);
+  const calendarConfig = useMemo(() => getCalendarConfig(schema), [
+    schema.filter,
+    (schema as any).calendar,
+    (schema as any).dateField,
+    (schema as any).endField,
+    (schema as any).titleField,
+    (schema as any).colorField
+  ]);
   const hasInlineData = dataConfig?.provider === 'value';
 
   // Fetch data based on provider
   useEffect(() => {
+    let isMounted = true;
     const fetchData = async () => {
       try {
+        if (!isMounted) return;
         setLoading(true);
         
         if (hasInlineData && dataConfig?.provider === 'value') {
-          setData(dataConfig.items as any[]);
-          setLoading(false);
+          if (isMounted) {
+            setData(dataConfig.items as any[]);
+            setLoading(false);
+          }
           return;
         }
 
+        // Prioritize data passed from parent (ListView)
+        if ((schema as any).data || (rest as any).data) {
+            const passedData = (schema as any).data || (rest as any).data;
+            if (Array.isArray(passedData)) {
+                setData(passedData);
+                setLoading(false);
+                return;
+            }
+        }
+
         if (!dataSource) {
           throw new Error('DataSource required for object/api providers');
         }
@@ -144,20 +199,39 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
             $filter: schema.filter,
             $orderby: convertSortToQueryParams(schema.sort),
           });
-          setData(result?.data || []);
+          
+          let items: any[] = [];
+          
+          if (Array.isArray(result)) {
+            items = result;
+          } else if (result && typeof result === 'object') {
+            if (Array.isArray((result as any).data)) {
+              items = (result as any).data;
+            } else if (Array.isArray((result as any).value)) {
+              items = (result as any).value;
+            }
+          }
+          
+          if (isMounted) {
+            setData(items);
+          }
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectCalendar');
-          setData([]);
+          if (isMounted) setData([]);
         }
         
-        setLoading(false);
+        if (isMounted) setLoading(false);
       } catch (err) {
-        setError(err as Error);
-        setLoading(false);
+        console.error('[ObjectCalendar] Error fetching data:', err);
+        if (isMounted) {
+          setError(err as Error);
+          setLoading(false);
+        }
       }
     };
 
     fetchData();
+    return () => { isMounted = false; };
   }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort]);
 
   // Fetch object schema for field metadata
@@ -210,50 +284,13 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
     }).filter(event => !isNaN(event.start.getTime())); // Filter out invalid dates
   }, [data, calendarConfig]);
 
-  // Get days in current month view
-  const calendarDays = useMemo(() => {
-    const year = currentDate.getFullYear();
-    const month = currentDate.getMonth();
-    
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-    const startDay = new Date(firstDay);
-    startDay.setDate(startDay.getDate() - startDay.getDay()); // Start from Sunday
-    
-    const days: Date[] = [];
-    const current = new Date(startDay);
-    
-    // Get 6 weeks worth of days
-    for (let i = 0; i < 42; i++) {
-      days.push(new Date(current));
-      current.setDate(current.getDate() + 1);
-    }
-    
-    return days;
-  }, [currentDate]);
-
-  // Get events for a specific day
-  const getEventsForDay = useCallback((day: Date) => {
-    return events.filter(event => {
-      const eventStart = new Date(event.start);
-      eventStart.setHours(0, 0, 0, 0);
-      const eventEnd = event.end ? new Date(event.end) : eventStart;
-      eventEnd.setHours(23, 59, 59, 999);
-      
-      const checkDay = new Date(day);
-      checkDay.setHours(0, 0, 0, 0);
-      
-      return checkDay >= eventStart && checkDay <= eventEnd;
-    });
-  }, [events]);
-
-  const navigateMonth = useCallback((direction: 'prev' | 'next') => {
-    setCurrentDate(prev => {
-      const newDate = new Date(prev);
-      newDate.setMonth(newDate.getMonth() + (direction === 'next' ? 1 : -1));
-      return newDate;
-    });
-  }, []);
+  // Get days in current month view - REMOVED (Handled by CalendarView)
+  
+  const handleCreate = useCallback(() => {
+    // Standard "Create" action trigger
+    const today = new Date();
+    onDateClick?.(today);
+  }, [onDateClick]);
 
   if (loading) {
     return (
@@ -287,98 +324,25 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
     );
   }
 
-  const monthNames = ['January', 'February', 'March', 'April', 'May', 'June',
-    'July', 'August', 'September', 'October', 'November', 'December'];
-  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
   return (
     <div className={className}>
-      <div className="border rounded-lg bg-background">
-        {/* Calendar Header */}
-        <div className="flex items-center justify-between p-4 border-b">
-          <h2 className="text-xl font-semibold">
-            {monthNames[currentDate.getMonth()]} {currentDate.getFullYear()}
-          </h2>
-          <div className="flex gap-2">
-            <button
-              onClick={() => navigateMonth('prev')}
-              className="px-3 py-1 border rounded hover:bg-muted"
-            >
-              Previous
-            </button>
-            <button
-              onClick={() => setCurrentDate(new Date())}
-              className="px-3 py-1 border rounded hover:bg-muted"
-            >
-              Today
-            </button>
-            <button
-              onClick={() => navigateMonth('next')}
-              className="px-3 py-1 border rounded hover:bg-muted"
-            >
-              Next
-            </button>
-          </div>
-        </div>
-
-        {/* Calendar Grid */}
-        <div className="p-4">
-          {/* Day Headers */}
-          <div className="grid grid-cols-7 gap-px mb-px">
-            {dayNames.map(day => (
-              <div
-                key={day}
-                className="text-center text-sm font-medium text-muted-foreground py-2"
-              >
-                {day}
-              </div>
-            ))}
-          </div>
-
-          {/* Calendar Days */}
-          <div className="grid grid-cols-7 gap-px bg-border">
-            {calendarDays.map((day, index) => {
-              const dayEvents = getEventsForDay(day);
-              const isCurrentMonth = day.getMonth() === currentDate.getMonth();
-              const isToday = 
-                day.getDate() === new Date().getDate() &&
-                day.getMonth() === new Date().getMonth() &&
-                day.getFullYear() === new Date().getFullYear();
-
-              return (
-                <div
-                  key={index}
-                  className={`min-h-24 bg-background p-2 ${
-                    !isCurrentMonth ? 'text-muted-foreground bg-muted/30' : ''
-                  } ${isToday ? 'ring-2 ring-primary' : ''}`}
-                  onClick={() => onDateClick?.(day)}
-                >
-                  <div className="text-sm font-medium mb-1">{day.getDate()}</div>
-                  <div className="space-y-1">
-                    {dayEvents.slice(0, 3).map(event => (
-                      <div
-                        key={event.id}
-                        className="text-xs px-1 py-0.5 rounded bg-primary/10 hover:bg-primary/20 cursor-pointer truncate"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onEventClick?.(event.data);
-                        }}
-                        style={event.color ? { borderLeft: `3px solid ${event.color}` } : undefined}
-                      >
-                        {event.title}
-                      </div>
-                    ))}
-                    {dayEvents.length > 3 && (
-                      <div className="text-xs text-muted-foreground">
-                        +{dayEvents.length - 3} more
-                      </div>
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
-        </div>
+      <div className="border rounded-lg bg-background h-[calc(100vh-200px)] min-h-[600px]">
+        <CalendarView
+          events={events}
+          currentDate={currentDate}
+          view={(schema as any).defaultView || 'month'}
+          onEventClick={(event) => onEventClick?.(event.data)}
+          onDateClick={onDateClick}
+          onNavigate={(date) => {
+            setCurrentDate(date);
+            onNavigate?.(date);
+          }}
+          onViewChange={(v) => {
+            setView(v);
+            onViewChange?.(v);
+          }}
+          onAddClick={handleCreate}
+        />
       </div>
     </div>
   );

package/src/calendar-view-renderer.tsx

@@ -7,8 +7,8 @@
  */
 
 import { ComponentRegistry } from '@object-ui/core';
-import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
-import { CalendarView } from './CalendarView';
+import type { CalendarViewSchema } from '@object-ui/types';
+import { CalendarView, type CalendarEvent } from './CalendarView';
 import React from 'react';
 
 // Calendar View Renderer - Airtable-style calendar for displaying records as events
@@ -30,96 +30,52 @@ ComponentRegistry.register('calendar-view',
         /** Field name indicating if event is all-day */
         const allDayField = schema.allDayField || 'allDay';
         
-        const title = record[titleField] || 'Untitled';
-        const start = record[startField] ? new Date(record[startField]) : new Date();
-        const end = record[endField] ? new Date(record[endField]) : undefined;
-        const allDay = record[allDayField] !== undefined ? record[allDayField] : false;
-        
-        // Handle color mapping
-        let color = record[colorField];
-        if (color && schema.colorMapping && schema.colorMapping[color]) {
-          color = schema.colorMapping[color];
-        }
-        
         return {
-          id: String(record.id || record._id || index),
-          title,
-          start,
-          end,
-          allDay,
-          color,
+          id: record._id || record.id || index,
+          title: record[titleField] || 'Untitled Event',
+          start: new Date(record[startField]),
+          end: record[endField] ? new Date(record[endField]) : undefined,
+          allDay: record[allDayField],
+          color: record[colorField],
           data: record,
         };
       });
-    }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField, schema.colorMapping]);
+    }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField]);
 
-    const handleEventClick = React.useCallback((event: any) => {
-      if (onAction) {
-        onAction({
-          type: 'event_click',
-          payload: { event: event.data, eventId: event.id }
-        });
-      }
+    const handleEventClick = (event: CalendarEvent) => {
       if (schema.onEventClick) {
-        schema.onEventClick(event.data);
-      }
-    }, [onAction, schema]);
-
-    const handleDateClick = React.useCallback((date: Date) => {
-      if (onAction) {
-        onAction({
-          type: 'date_click',
-          payload: { date }
-        });
-      }
-      if (schema.onDateClick) {
-        schema.onDateClick(date);
-      }
-    }, [onAction, schema]);
-
-    const handleViewChange = React.useCallback((view: "month" | "week" | "day") => {
-      if (onAction) {
-        onAction({
-          type: 'view_change',
-          payload: { view }
-        });
-      }
-      if (schema.onViewChange) {
-        schema.onViewChange(view);
-      }
-    }, [onAction, schema]);
-
-    const handleNavigate = React.useCallback((date: Date) => {
-      if (onAction) {
-        onAction({
-          type: 'navigate',
-          payload: { date }
+        // Dispatch configured action
+        // This would use the action runner in a real implementation
+        // For now we just call onAction if provided
+        onAction?.({ 
+          type: 'event-click',
+          payload: event 
         });
       }
-      if (schema.onNavigate) {
-        schema.onNavigate(date);
-      }
-    }, [onAction, schema]);
-
-    const validView = (schema.view && ['month', 'week', 'day'].includes(schema.view)) 
-      ? (schema.view as "month" | "week" | "day")
-      : 'month';
+    };
+    
+    const handleAddClick = () => {
+       // Standard "Create" action trigger
+       onAction?.({
+         type: 'create',
+         payload: {}
+       });
+    };
 
     return (
-      <CalendarView
+      <CalendarView 
+        className={className}
         events={events}
-        view={validView}
-        currentDate={schema.currentDate ? new Date(schema.currentDate) : undefined}
         onEventClick={handleEventClick}
-        onDateClick={schema.allowCreate || schema.onDateClick ? handleDateClick : undefined}
-        onViewChange={handleViewChange}
-        onNavigate={handleNavigate}
-        className={className}
+        onAddClick={handleAddClick}
+        // Pass validation or other props
         {...props}
       />
     );
-  },
+  }
+,
   {
+    namespace: 'plugin-calendar',
     label: 'Calendar View',
     inputs: [
       { 

package/src/index.tsx

@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import { useSchemaContext } from '@object-ui/react';
 import { ObjectCalendar } from './ObjectCalendar';
 import type { ObjectCalendarProps } from './ObjectCalendar';
 
@@ -23,13 +24,25 @@ export type { CalendarViewProps, CalendarEvent } from './CalendarView';
 import './calendar-view-renderer';
 
 // Register object-calendar component
-const ObjectCalendarRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <ObjectCalendar schema={schema} dataSource={null as any} />;
+export const ObjectCalendarRenderer: React.FC<{ schema: any }> = ({ schema }) => {
+  const { dataSource } = useSchemaContext();
+  return <ObjectCalendar schema={schema} dataSource={dataSource} />;
 };
 
 ComponentRegistry.register('object-calendar', ObjectCalendarRenderer, {
+  namespace: 'plugin-calendar',
   label: 'Object Calendar',
-  category: 'plugin',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'calendar', type: 'object', label: 'Calendar Config', description: 'startDateField, endDateField, titleField, colorField' },
+  ],
+});
+
+ComponentRegistry.register('calendar', ObjectCalendarRenderer, {
+  namespace: 'view',
+  label: 'Calendar View',
+  category: 'view',
   inputs: [
     { name: 'objectName', type: 'string', label: 'Object Name', required: true },
     { name: 'calendar', type: 'object', label: 'Calendar Config', description: 'startDateField, endDateField, titleField, colorField' },

package/src/registration.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ObjectCalendarRenderer } from './index';
+
+// Mock dependencies
+vi.mock('@object-ui/react', () => ({
+  useSchemaContext: vi.fn(() => ({ dataSource: { type: 'mock-datasource' } })),
+}));
+
+// Mock the implementation
+vi.mock('./ObjectCalendar', () => ({
+  ObjectCalendar: ({ dataSource }: any) => (
+    <div data-testid="calendar-mock">
+        {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
+    </div>
+  )
+}));
+
+describe('Plugin Calendar Registration', () => {
+  it('renderer passes dataSource from context', () => {
+    render(<ObjectCalendarRenderer schema={{ type: 'object-calendar' }} />);
+    expect(screen.getByTestId('calendar-mock')).toHaveTextContent('DataSource: mock-datasource');
+  });
+});