@object-ui/plugin-calendar 0.3.0

package/src/ObjectCalendar.tsx

@@ -0,0 +1,385 @@
+/**
+ * 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.
+ */
+
+/**
+ * ObjectCalendar Component
+ * 
+ * A specialized calendar component that works with ObjectQL data sources.
+ * Displays records as calendar events based on date field configuration.
+ * Implements the calendar view type from @objectstack/spec view.zod ListView schema.
+ * 
+ * Features:
+ * - Month/week/day calendar views
+ * - Auto-mapping of records to calendar events
+ * - Date range filtering
+ * - Event click handling
+ * - Color coding support
+ * - Works with object/api/value data providers
+ */
+
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
+import type { ObjectGridSchema, DataSource, ViewData, CalendarConfig } from '@object-ui/types';
+
+export interface ObjectCalendarProps {
+  schema: ObjectGridSchema;
+  dataSource?: DataSource;
+  className?: string;
+  onEventClick?: (record: any) => void;
+  onDateClick?: (date: Date) => void;
+  onEdit?: (record: any) => void;
+  onDelete?: (record: any) => void;
+}
+
+/**
+ * Helper to get data configuration from schema
+ */
+function getDataConfig(schema: ObjectGridSchema): ViewData | null {
+  if (schema.data) {
+    return schema.data;
+  }
+  
+  if (schema.staticData) {
+    return {
+      provider: 'value',
+      items: schema.staticData,
+    };
+  }
+  
+  if (schema.objectName) {
+    return {
+      provider: 'object',
+      object: schema.objectName,
+    };
+  }
+  
+  return null;
+}
+
+/**
+ * Helper to convert sort config to QueryParams format
+ */
+function convertSortToQueryParams(sort: string | any[] | undefined): Record<string, 'asc' | 'desc'> | undefined {
+  if (!sort) return undefined;
+  
+  // If it's a string like "name desc"
+  if (typeof sort === 'string') {
+    const parts = sort.split(' ');
+    const field = parts[0];
+    const order = (parts[1]?.toLowerCase() === 'desc' ? 'desc' : 'asc') as 'asc' | 'desc';
+    return { [field]: order };
+  }
+  
+  // If it's an array of SortConfig objects
+  if (Array.isArray(sort)) {
+    return sort.reduce((acc, item) => {
+      if (item.field && item.order) {
+        acc[item.field] = item.order;
+      }
+      return acc;
+    }, {} as Record<string, 'asc' | 'desc'>);
+  }
+  
+  return undefined;
+}
+
+/**
+ * Helper to get calendar configuration from schema
+ */
+function getCalendarConfig(schema: ObjectGridSchema): CalendarConfig | null {
+  // Check if schema has calendar configuration
+  if (schema.filter && typeof schema.filter === 'object' && 'calendar' in schema.filter) {
+    return (schema.filter as any).calendar as CalendarConfig;
+  }
+  
+  // For backward compatibility, check if schema has calendar config at root
+  if ((schema as any).calendar) {
+    return (schema as any).calendar as CalendarConfig;
+  }
+  
+  return null;
+}
+
+export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
+  schema,
+  dataSource,
+  className,
+  onEventClick,
+  onDateClick,
+}) => {
+  const [data, setData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+  const [objectSchema, setObjectSchema] = useState<any>(null);
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [view, setView] = useState<'month' | 'week' | 'day'>('month');
+
+  const dataConfig = getDataConfig(schema);
+  const calendarConfig = getCalendarConfig(schema);
+  const hasInlineData = dataConfig?.provider === 'value';
+
+  // Fetch data based on provider
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        
+        if (hasInlineData && dataConfig?.provider === 'value') {
+          setData(dataConfig.items as any[]);
+          setLoading(false);
+          return;
+        }
+
+        if (!dataSource) {
+          throw new Error('DataSource required for object/api providers');
+        }
+
+        if (dataConfig?.provider === 'object') {
+          const objectName = dataConfig.object;
+          const result = await dataSource.find(objectName, {
+            $filter: schema.filter,
+            $orderby: convertSortToQueryParams(schema.sort),
+          });
+          setData(result?.data || []);
+        } else if (dataConfig?.provider === 'api') {
+          console.warn('API provider not yet implemented for ObjectCalendar');
+          setData([]);
+        }
+        
+        setLoading(false);
+      } catch (err) {
+        setError(err as Error);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort]);
+
+  // Fetch object schema for field metadata
+  useEffect(() => {
+    const fetchObjectSchema = async () => {
+      try {
+        if (!dataSource) return;
+        
+        const objectName = dataConfig?.provider === 'object' 
+          ? dataConfig.object 
+          : schema.objectName;
+          
+        if (!objectName) return;
+        
+        const schemaData = await dataSource.getObjectSchema(objectName);
+        setObjectSchema(schemaData);
+      } catch (err) {
+        console.error('Failed to fetch object schema:', err);
+      }
+    };
+
+    if (!hasInlineData && dataSource) {
+      fetchObjectSchema();
+    }
+  }, [schema.objectName, dataSource, hasInlineData, dataConfig]);
+
+  // Transform data to calendar events
+  const events = useMemo(() => {
+    if (!calendarConfig || !data.length) {
+      return [];
+    }
+
+    const { startDateField, endDateField, titleField, colorField } = calendarConfig;
+
+    return data.map((record, index) => {
+      const startDate = record[startDateField];
+      const endDate = endDateField ? record[endDateField] : null;
+      const title = record[titleField] || 'Untitled';
+      const color = colorField ? record[colorField] : undefined;
+
+      return {
+        id: record.id || record._id || `event-${index}`,
+        title,
+        start: startDate ? new Date(startDate) : new Date(),
+        end: endDate ? new Date(endDate) : undefined,
+        color,
+        allDay: !endDate, // If no end date, treat as all-day event
+        data: record,
+      };
+    }).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;
+    });
+  }, []);
+
+  if (loading) {
+    return (
+      <div className={className}>
+        <div className="flex items-center justify-center h-96">
+          <div className="text-muted-foreground">Loading calendar...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={className}>
+        <div className="flex items-center justify-center h-96">
+          <div className="text-destructive">Error: {error.message}</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!calendarConfig) {
+    return (
+      <div className={className}>
+        <div className="flex items-center justify-center h-96">
+          <div className="text-muted-foreground">
+            Calendar configuration required. Please specify startDateField and titleField.
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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>
+    </div>
+  );
+};

package/src/calendar-view-renderer.tsx

@@ -0,0 +1,231 @@
+/**
+ * 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 { ComponentRegistry } from '@object-ui/core';
+import type { CalendarViewSchema, CalendarEvent } from '@object-ui/types';
+import { CalendarView } from './CalendarView';
+import React from 'react';
+
+// Calendar View Renderer - Airtable-style calendar for displaying records as events
+ComponentRegistry.register('calendar-view', 
+  ({ schema, className, onAction, ...props }: { schema: CalendarViewSchema; className?: string; onAction?: (action: any) => void; [key: string]: any }) => {
+    // Transform schema data to CalendarEvent format
+    const events = React.useMemo(() => {
+      if (!schema.data || !Array.isArray(schema.data)) return [];
+      
+      return schema.data.map((record: any, index: number) => {
+        /** Field name to use for event title display */
+        const titleField = schema.titleField || 'title';
+        /** Field name containing the event start date/time */
+        const startField = schema.startDateField || 'start';
+        /** Field name containing the event end date/time (optional) */
+        const endField = schema.endDateField || 'end';
+        /** Field name to determine event color or color category */
+        const colorField = schema.colorField || 'color';
+        /** 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,
+          data: record,
+        };
+      });
+    }, [schema.data, schema.titleField, schema.startDateField, schema.endDateField, schema.colorField, schema.allDayField, schema.colorMapping]);
+
+    const handleEventClick = React.useCallback((event: any) => {
+      if (onAction) {
+        onAction({
+          type: 'event_click',
+          payload: { event: event.data, eventId: event.id }
+        });
+      }
+      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 }
+        });
+      }
+      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';
+
+    return (
+      <CalendarView
+        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}
+        {...props}
+      />
+    );
+  },
+  {
+    label: 'Calendar View',
+    inputs: [
+      { 
+        name: 'data', 
+        type: 'array', 
+        label: 'Data',
+        description: 'Array of record objects to display as events'
+      },
+      { 
+        name: 'titleField', 
+        type: 'string', 
+        label: 'Title Field',
+        defaultValue: 'title',
+        description: 'Field name to use for event title'
+      },
+      { 
+        name: 'startDateField', 
+        type: 'string', 
+        label: 'Start Date Field',
+        defaultValue: 'start',
+        description: 'Field name for event start date'
+      },
+      { 
+        name: 'endDateField', 
+        type: 'string', 
+        label: 'End Date Field',
+        defaultValue: 'end',
+        description: 'Field name for event end date (optional)'
+      },
+      { 
+        name: 'allDayField', 
+        type: 'string', 
+        label: 'All Day Field',
+        defaultValue: 'allDay',
+        description: 'Field name for all-day flag'
+      },
+      { 
+        name: 'colorField', 
+        type: 'string', 
+        label: 'Color Field',
+        defaultValue: 'color',
+        description: 'Field name for event color'
+      },
+      {
+        name: 'colorMapping',
+        type: 'object',
+        label: 'Color Mapping',
+        description: 'Map field values to colors (e.g., {meeting: "blue", deadline: "red"})'
+      },
+      { 
+        name: 'view', 
+        type: 'enum', 
+        enum: ['month', 'week', 'day'], 
+        defaultValue: 'month', 
+        label: 'View Mode',
+        description: 'Calendar view mode (month, week, or day)'
+      },
+      {
+        name: 'currentDate',
+        type: 'string',
+        label: 'Current Date',
+        description: 'ISO date string for initial calendar date'
+      },
+      { 
+        name: 'allowCreate', 
+        type: 'boolean', 
+        label: 'Allow Create',
+        defaultValue: false,
+        description: 'Allow creating events by clicking on dates'
+      },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      view: 'month',
+      titleField: 'title',
+      startDateField: 'start',
+      endDateField: 'end',
+      allDayField: 'allDay',
+      colorField: 'color',
+      allowCreate: false,
+      data: [
+        {
+          id: 1,
+          title: 'Team Meeting',
+          start: new Date(new Date().setHours(10, 0, 0, 0)).toISOString(),
+          end: new Date(new Date().setHours(11, 0, 0, 0)).toISOString(),
+          color: '#3b82f6',
+          allDay: false
+        },
+        {
+          id: 2,
+          title: 'Project Deadline',
+          start: new Date(new Date().setDate(new Date().getDate() + 3)).toISOString(),
+          color: '#ef4444',
+          allDay: true
+        },
+        {
+          id: 3,
+          title: 'Conference',
+          start: new Date(new Date().setDate(new Date().getDate() + 7)).toISOString(),
+          end: new Date(new Date().setDate(new Date().getDate() + 9)).toISOString(),
+          color: '#10b981',
+          allDay: true
+        }
+      ],
+      className: 'h-[600px] border rounded-lg'
+    }
+  }
+);

package/src/index.tsx

@@ -0,0 +1,37 @@
+/**
+ * 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 from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { ObjectCalendar } from './ObjectCalendar';
+import type { ObjectCalendarProps } from './ObjectCalendar';
+
+// Export ObjectCalendar component
+export { ObjectCalendar };
+export type { ObjectCalendarProps };
+
+// Export CalendarView component (merged from plugin-calendar-view)
+export { CalendarView } from './CalendarView';
+export type { CalendarViewProps, CalendarEvent } from './CalendarView';
+
+// Import and register calendar-view renderer
+import './calendar-view-renderer';
+
+// Register object-calendar component
+const ObjectCalendarRenderer: React.FC<{ schema: any }> = ({ schema }) => {
+  return <ObjectCalendar schema={schema} dataSource={null as any} />;
+};
+
+ComponentRegistry.register('object-calendar', ObjectCalendarRenderer, {
+  label: 'Object Calendar',
+  category: 'plugin',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'calendar', type: 'object', label: 'Calendar Config', description: 'startDateField, endDateField, titleField, colorField' },
+  ],
+});

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "noEmit": false,
+    "declaration": true,
+    "composite": true,
+    "declarationMap": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}