@object-ui/plugin-calendar 3.1.5 → 3.3.1

package/src/ObjectCalendar.msw.test.tsx

@@ -1,100 +0,0 @@
-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.stories.tsx

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-import { createStorybookDataSource } from '@storybook-config/datasource';
-
-const meta = {
-  title: 'Plugins/ObjectCalendar',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const dataSource = createStorybookDataSource();
-
-const renderStory = (args: any) => (
-  <SchemaRendererProvider dataSource={dataSource}>
-    <SchemaRenderer schema={args as unknown as BaseSchema} />
-  </SchemaRendererProvider>
-);
-
-export const Default: Story = {
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Event',
-    viewType: 'calendar',
-    calendar: {
-      startDateField: 'startDate',
-      endDateField: 'endDate',
-      titleField: 'title',
-    },
-    columns: [
-      { field: 'title', header: 'Title' },
-      { field: 'startDate', header: 'Start Date' },
-      { field: 'endDate', header: 'End Date' },
-      { field: 'category', header: 'Category' },
-    ],
-    data: [
-      { id: 1, title: 'Team Standup', startDate: '2024-03-04T09:00:00', endDate: '2024-03-04T09:30:00', category: 'Meeting' },
-      { id: 2, title: 'Sprint Planning', startDate: '2024-03-05T10:00:00', endDate: '2024-03-05T12:00:00', category: 'Meeting' },
-      { id: 3, title: 'Design Review', startDate: '2024-03-06T14:00:00', endDate: '2024-03-06T15:00:00', category: 'Review' },
-      { id: 4, title: 'Product Demo', startDate: '2024-03-07T16:00:00', endDate: '2024-03-07T17:00:00', category: 'Demo' },
-      { id: 5, title: 'Retrospective', startDate: '2024-03-08T11:00:00', endDate: '2024-03-08T12:00:00', category: 'Meeting' },
-    ],
-    className: 'w-full',
-  } as any,
-};
-
-export const MonthlyEvents: Story = {
-  render: renderStory,
-  args: {
-    type: 'object-grid',
-    objectName: 'Appointment',
-    viewType: 'calendar',
-    calendar: {
-      startDateField: 'date',
-      titleField: 'name',
-    },
-    columns: [
-      { field: 'name', header: 'Name' },
-      { field: 'date', header: 'Date' },
-      { field: 'type', header: 'Type' },
-    ],
-    data: [
-      { id: 1, name: 'Board Meeting', date: '2024-03-01T10:00:00', type: 'Corporate' },
-      { id: 2, name: 'Client Call', date: '2024-03-05T14:00:00', type: 'Sales' },
-      { id: 3, name: 'Team Lunch', date: '2024-03-12T12:00:00', type: 'Social' },
-      { id: 4, name: 'Quarterly Review', date: '2024-03-15T09:00:00', type: 'Corporate' },
-      { id: 5, name: 'Workshop', date: '2024-03-20T13:00:00', type: 'Training' },
-      { id: 6, name: 'Release Day', date: '2024-03-25T08:00:00', type: 'Engineering' },
-    ],
-    className: 'w-full',
-  } as any,
-};

package/src/ObjectCalendar.tsx

@@ -1,420 +0,0 @@
-/**
- * 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, useRef } from 'react';
-import type { ObjectGridSchema, DataSource, ViewData, CalendarConfig } from '@object-ui/types';
-import { CalendarView, type CalendarEvent } from './CalendarView';
-import { usePullToRefresh } from '@object-ui/mobile';
-import { useNavigationOverlay } from '@object-ui/react';
-import { NavigationOverlay } from '@object-ui/components';
-import { extractRecords, buildExpandFields } from '@object-ui/core';
-
-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 | CalendarSchema;
-  dataSource?: DataSource;
-  className?: string;
-  /** Pre-fetched records passed by a parent (e.g. ObjectView). When provided, skips internal data fetching. */
-  data?: any[];
-  /** Loading state propagated from a parent. Respected only when `data` is also provided. */
-  loading?: boolean;
-  onEventClick?: (record: any) => void;
-  onRowClick?: (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;
-  onEventDrop?: (record: any, newStart: Date, newEnd?: Date) => void;
-  locale?: string;
-}
-
-/**
- * Helper to get data configuration from schema
- */
-function getDataConfig(schema: ObjectGridSchema | CalendarSchema): ViewData | null {
-  if ('data' in schema && schema.data) {
-    return schema.data;
-  }
-  
-  if ('staticData' in schema && 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 | CalendarSchema): CalendarConfig | null {
-  // Check if schema has calendar configuration
-  if ('filter' in schema && 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;
-  }
-  
-  // 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;
-}
-
-export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
-  schema,
-  dataSource,
-  className,
-  data: externalData,
-  loading: externalLoading,
-  onEventClick,
-  onRowClick,
-  onDateClick,
-  onNavigate,
-  onViewChange,
-  onEventDrop,
-  locale,
-}) => {
-  // When the parent (e.g. ObjectView) pre-fetches data and passes it via the `data` prop,
-  // we must not trigger a second fetch. Detect external data by checking for an array.
-  const hasExternalData = Array.isArray(externalData);
-
-  const [data, setData] = useState<any[]>(hasExternalData ? externalData! : []);
-  const [loading, setLoading] = useState(hasExternalData ? (externalLoading ?? false) : 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 [refreshKey, setRefreshKey] = useState(0);
-
-  const handlePullRefresh = useCallback(async () => {
-    setRefreshKey(k => k + 1);
-  }, []);
-
-  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
-    onRefresh: handlePullRefresh,
-    enabled: !!dataSource && !!schema.objectName,
-  });
-
-  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';
-
-  // Use ref for objectSchema to avoid double-fetch on mount
-  const objectSchemaRef = useRef<any>(null);
-  objectSchemaRef.current = objectSchema;
-
-  // Sync external data/loading changes from parent (e.g. ObjectView re-fetches after filter change)
-  useEffect(() => {
-    if (hasExternalData) {
-      setData(externalData!);
-    }
-  }, [externalData, hasExternalData]);
-
-  useEffect(() => {
-    if (hasExternalData && externalLoading !== undefined) {
-      setLoading(externalLoading);
-    }
-  }, [externalLoading, hasExternalData]);
-
-  // Fetch data based on provider
-  useEffect(() => {
-    // Skip internal fetch when data is managed by a parent component
-    if (hasExternalData) return;
-
-    let isMounted = true;
-    const fetchData = async () => {
-      try {
-        if (!isMounted) return;
-        setLoading(true);
-        
-        if (hasInlineData && dataConfig?.provider === 'value') {
-          if (isMounted) {
-            setData(dataConfig.items as any[]);
-            setLoading(false);
-          }
-          return;
-        }
-
-        if (!dataSource || typeof dataSource.find !== 'function') {
-          throw new Error('DataSource required for object/api providers');
-        }
-
-        if (dataConfig?.provider === 'object') {
-          const objectName = dataConfig.object;
-          // Auto-inject $expand for lookup/master_detail fields
-          const expand = buildExpandFields(objectSchemaRef.current?.fields);
-          const result = await dataSource.find(objectName, {
-            $filter: schema.filter,
-            $orderby: convertSortToQueryParams(schema.sort),
-            ...(expand.length > 0 ? { $expand: expand } : {}),
-          });
-          
-          let items: any[] = extractRecords(result);
-          
-          if (isMounted) {
-            setData(items);
-          }
-        } else if (dataConfig?.provider === 'api') {
-          console.warn('API provider not yet implemented for ObjectCalendar');
-          if (isMounted) setData([]);
-        }
-        
-        if (isMounted) setLoading(false);
-      } catch (err) {
-        console.error('[ObjectCalendar] Error fetching data:', err);
-        if (isMounted) {
-          setError(err as Error);
-          setLoading(false);
-        }
-      }
-    };
-
-    fetchData();
-    return () => { isMounted = false; };
-  }, [hasExternalData, dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, refreshKey]);
-
-  // 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 - REMOVED (Handled by CalendarView)
-  
-  const handleCreate = useCallback(() => {
-    // Standard "Create" action trigger
-    const today = new Date();
-    onDateClick?.(today);
-  }, [onDateClick]);
-
-  // --- NavigationConfig support ---
-  // Must be called before any early returns to satisfy React hooks rules
-  const navigation = useNavigationOverlay({
-    navigation: (schema as any).navigation,
-    objectName: schema.objectName,
-    onRowClick,
-  });
-
-  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>
-    );
-  }
-
-  return (
-    <div ref={pullRef} className={className}>
-      {pullDistance > 0 && (
-        <div
-          className="flex items-center justify-center text-xs text-muted-foreground"
-          style={{ height: pullDistance }}
-        >
-          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
-        </div>
-      )}
-      <div className="border rounded-lg bg-background h-[calc(100vh-120px)] sm:h-[calc(100vh-160px)] md:h-[calc(100vh-200px)] min-h-[400px] sm:min-h-[600px]">
-        <CalendarView
-          events={events}
-          currentDate={currentDate}
-          view={(schema as any).defaultView || 'month'}
-          locale={locale}
-          onEventClick={(event) => {
-            navigation.handleClick(event.data);
-            onEventClick?.(event.data);
-          }}
-          onDateClick={onDateClick}
-          onNavigate={(date) => {
-            setCurrentDate(date);
-            onNavigate?.(date);
-          }}
-          onViewChange={(v) => {
-            setView(v);
-            onViewChange?.(v);
-          }}
-          onAddClick={undefined}
-          onEventDrop={onEventDrop ? (event, newStart, newEnd) => {
-            onEventDrop(event.data, newStart, newEnd);
-          } : undefined}
-        />
-      </div>
-      {navigation.isOverlay && (
-        <NavigationOverlay {...navigation} title="Event Details">
-          {(record) => (
-            <div className="space-y-3">
-              {Object.entries(record).map(([key, value]) => (
-                <div key={key} className="flex flex-col">
-                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                    {key.replace(/_/g, ' ')}
-                  </span>
-                  <span className="text-sm">{String(value ?? '—')}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </NavigationOverlay>
-      )}
-    </div>
-  );
-};