@object-ui/plugin-timeline 3.1.5 → 3.3.1

package/src/ObjectTimeline.msw.test.tsx

@@ -1,80 +0,0 @@
-import { describe, it, expect, beforeAll, afterAll, afterEach } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-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://localhost';
-
-// --- 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.options('*', () => {
-    return new HttpResponse(null, { status: 200 });
-  }),
-  
-  http.get(`${BASE_URL}/api/v1`, () => {
-    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
-  }),
-
-  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-expect-error - Mock schema type mismatch with TimelineSchema
-                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();
-    });
-});

package/src/ObjectTimeline.stories.tsx

@@ -1,113 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SchemaRenderer } from '@object-ui/react';
-import type { BaseSchema } from '@object-ui/types';
-
-const meta = {
-  title: 'Plugins/ObjectTimeline',
-  component: SchemaRenderer,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    schema: { table: { disable: true } },
-  },
-} satisfies Meta<any>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
-
-export const Default: Story = {
-  render: renderStory,
-  args: {
-    type: 'timeline',
-    variant: 'vertical',
-    dateFormat: 'short',
-    items: [
-      {
-        time: '2024-01-10',
-        title: 'Project Kickoff',
-        description: 'Initial planning and team formation',
-        variant: 'success',
-        icon: '🚀',
-      },
-      {
-        time: '2024-02-15',
-        title: 'Alpha Release',
-        description: 'Internal alpha build delivered',
-        variant: 'info',
-        icon: '📦',
-      },
-      {
-        time: '2024-03-20',
-        title: 'Beta Launch',
-        description: 'Public beta opened to early adopters',
-        variant: 'warning',
-        icon: '⚡',
-      },
-      {
-        time: '2024-05-01',
-        title: 'General Availability',
-        description: 'Official public release',
-        variant: 'success',
-        icon: '🎉',
-      },
-    ],
-  } as any,
-};
-
-export const Horizontal: Story = {
-  render: renderStory,
-  args: {
-    type: 'timeline',
-    variant: 'horizontal',
-    dateFormat: 'short',
-    items: [
-      { time: '2024-01-01', title: 'Q1', description: 'Foundation phase', variant: 'default' },
-      { time: '2024-04-01', title: 'Q2', description: 'Growth phase', variant: 'info' },
-      { time: '2024-07-01', title: 'Q3', description: 'Scale phase', variant: 'warning' },
-      { time: '2024-10-01', title: 'Q4', description: 'Optimization phase', variant: 'success' },
-    ],
-  } as any,
-};
-
-export const ActivityFeed: Story = {
-  render: renderStory,
-  args: {
-    type: 'timeline',
-    variant: 'vertical',
-    dateFormat: 'long',
-    items: [
-      {
-        time: '2024-03-15T14:30:00',
-        title: 'Deal Updated',
-        description: 'Stage changed from Proposal to Negotiation',
-        variant: 'info',
-        icon: '📝',
-      },
-      {
-        time: '2024-03-14T10:00:00',
-        title: 'Meeting Logged',
-        description: 'Product demo with stakeholders',
-        variant: 'default',
-        icon: '📅',
-      },
-      {
-        time: '2024-03-12T16:45:00',
-        title: 'Email Sent',
-        description: 'Follow-up proposal sent to client',
-        variant: 'default',
-        icon: '📧',
-      },
-      {
-        time: '2024-03-10T09:00:00',
-        title: 'Deal Created',
-        description: 'New opportunity worth $150,000',
-        variant: 'success',
-        icon: '✨',
-      },
-    ],
-  } as any,
-};

package/src/ObjectTimeline.test.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { ObjectTimeline } from './ObjectTimeline';
-import { DataSource } from '@object-ui/types';
-
-// Mock useDataScope and useNavigationOverlay
-vi.mock('@object-ui/react', () => ({
-  useDataScope: () => undefined,
-  useNavigationOverlay: () => ({
-    isOverlay: false,
-    handleClick: vi.fn(),
-    selectedRecord: null,
-    isOpen: false,
-    close: vi.fn(),
-    setIsOpen: vi.fn(),
-    mode: 'overlay',
-    view: undefined,
-  }),
-}));
-
-vi.mock('@object-ui/components', () => ({
-  NavigationOverlay: () => null,
-}));
-
-vi.mock('./renderer', () => ({
-  TimelineRenderer: ({ schema }: any) => (
-    <div data-testid="timeline-view">
-      {schema.items?.map((t: any, idx: number) => (
-        <div key={idx} data-testid="timeline-item">{t.title}</div>
-      ))}
-    </div>
-  ),
-}));
-
-const mockData = [
-  { id: '1', name: 'Event 1', date: '2024-01-01', description: 'Desc 1' },
-];
-
-const mockDataSource: DataSource = {
-  find: vi.fn(),
-  findOne: vi.fn(),
-  create: vi.fn(),
-  update: vi.fn(),
-  delete: vi.fn(),
-  getObjectSchema: vi.fn(),
-};
-
-describe('ObjectTimeline', () => {
-    it('renders with static items', async () => {
-        const schema: any = {
-            type: 'timeline',
-            items: [
-                { title: 'Static Event', date: '2024-01-01' }
-            ]
-        };
-        render(<ObjectTimeline schema={schema} />);
-        await waitFor(() => {
-            expect(screen.getByText('Static Event')).toBeDefined();
-        });
-    });
-
-    it('fetches data when objectName is provided', async () => {
-        (mockDataSource.find as any).mockResolvedValue(mockData);
-        
-        const schema: any = {
-            type: 'timeline',
-            objectName: 'events',
-            titleField: 'name',
-            dateField: 'date' // Backward-compat: legacy dateField still works
-        };
-
-        render(<ObjectTimeline schema={schema} dataSource={mockDataSource} />);
-
-        await waitFor(() => {
-             expect(mockDataSource.find).toHaveBeenCalled();
-        });
-
-        await waitFor(() => {
-            expect(screen.getByText('Event 1')).toBeDefined();
-        });
-    });
-
-    it('uses spec-compliant startDateField property', async () => {
-        const dataWithDates = [
-            { id: '1', name: 'Sprint 1', start_date: '2024-01-01', end_date: '2024-01-14', team: 'Alpha' },
-        ];
-        (mockDataSource.find as any).mockResolvedValue(dataWithDates);
-
-        const schema: any = {
-            type: 'timeline',
-            objectName: 'sprints',
-            titleField: 'name',
-            startDateField: 'start_date',
-            endDateField: 'end_date',
-        };
-
-        render(<ObjectTimeline schema={schema} dataSource={mockDataSource} />);
-
-        await waitFor(() => {
-            expect(screen.getByText('Sprint 1')).toBeDefined();
-        });
-    });
-
-    it('supports groupByField and colorField properties', async () => {
-        const dataWithGroups = [
-            { id: '1', name: 'Task A', start_date: '2024-01-01', team: 'Alpha', priority: 'high' },
-        ];
-        (mockDataSource.find as any).mockResolvedValue(dataWithGroups);
-
-        const schema: any = {
-            type: 'timeline',
-            objectName: 'tasks',
-            titleField: 'name',
-            startDateField: 'start_date',
-            groupByField: 'team',
-            colorField: 'priority',
-        };
-
-        render(<ObjectTimeline schema={schema} dataSource={mockDataSource} />);
-
-        await waitFor(() => {
-            expect(screen.getByText('Task A')).toBeDefined();
-        });
-    });
-
-    it('supports scale property', () => {
-        const schema: any = {
-            type: 'timeline',
-            items: [
-                { title: 'Weekly Event', date: '2024-01-01' }
-            ],
-            scale: 'week',
-        };
-        render(<ObjectTimeline schema={schema} />);
-        expect(screen.getByText('Weekly Event')).toBeDefined();
-    });
-});

package/src/ObjectTimeline.tsx

@@ -1,241 +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.
- */
-
-import React, { useEffect, useState, useCallback } from 'react';
-import type { DataSource, TimelineSchema, TimelineConfig } from '@object-ui/types';
-import { useDataScope, useNavigationOverlay } from '@object-ui/react';
-import { NavigationOverlay } from '@object-ui/components';
-import { extractRecords, buildExpandFields } from '@object-ui/core';
-import { usePullToRefresh } from '@object-ui/mobile';
-import { z } from 'zod';
-import { TimelineRenderer } from './renderer';
-
-const TimelineMappingSchema = z.object({
-  title: z.string().optional(),
-  date: z.string().optional(),
-  description: z.string().optional(),
-  variant: z.string().optional(),
-});
-
-const TimelineExtensionSchema = z.object({
-   mapping: TimelineMappingSchema.optional(),
-   objectName: z.string().optional(),
-   titleField: z.string().optional(),
-   /** @deprecated Use startDateField instead */
-   dateField: z.string().optional(),
-   startDateField: z.string().optional(),
-   endDateField: z.string().optional(),
-   descriptionField: z.string().optional(),
-   groupByField: z.string().optional(),
-   colorField: z.string().optional(),
-   scale: z.enum(['hour', 'day', 'week', 'month', 'quarter', 'year']).optional(),
-});
-
-export interface ObjectTimelineProps {
-  schema: TimelineSchema & {
-    objectName?: string;
-    /** Spec-compliant nested timeline config */
-    timeline?: TimelineConfig;
-    /** @deprecated Use timeline.titleField instead */
-    titleField?: string;
-    /** @deprecated Use timeline.startDateField instead */
-    dateField?: string;
-    /** @deprecated Use timeline.startDateField instead */
-    startDateField?: string;
-    /** @deprecated Use timeline.endDateField instead */
-    endDateField?: string;
-    descriptionField?: string;
-    /** @deprecated Use timeline.groupByField instead */
-    groupByField?: string;
-    /** @deprecated Use timeline.colorField instead */
-    colorField?: string;
-    /** @deprecated Use timeline.scale instead */
-    scale?: 'hour' | 'day' | 'week' | 'month' | 'quarter' | 'year';
-    // Map data fields to timeline item properties
-    mapping?: {
-      title?: string;
-      date?: string;
-      description?: string;
-      variant?: string;
-    }
-  };
-  dataSource?: DataSource;
-  className?: string;
-  onRowClick?: (record: any) => void;
-  onItemClick?: (record: any) => void;
-}
-
-export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
-  schema,
-  dataSource,
-  className,
-  onRowClick,
-  onItemClick,
-  ...props
-}) => {
-  const [fetchedData, setFetchedData] = useState<any[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const [refreshKey, setRefreshKey] = useState(0);
-  const [objectDef, setObjectDef] = useState<any>(null);
-
-  // Resolve nested TimelineConfig (spec-compliant)
-  const timelineConfig = schema.timeline;
-
-  useEffect(() => {
-    const result = TimelineExtensionSchema.safeParse(schema);
-    if (!result.success) {
-      console.warn(`[ObjectTimeline] Invalid timeline configuration:`, result.error.format());
-    }
-  }, [schema]);
-
-  const boundData = useDataScope(schema.bind);
-
-  // Fetch object definition for metadata
-  useEffect(() => {
-    let isMounted = true;
-    const fetchMeta = async () => {
-      if (!dataSource || typeof dataSource.getObjectSchema !== 'function' || !schema.objectName) return;
-      try {
-        const def = await dataSource.getObjectSchema(schema.objectName);
-        if (isMounted) setObjectDef(def);
-      } catch (e) {
-        console.warn('Failed to fetch object def for ObjectTimeline', e);
-      }
-    };
-    fetchMeta();
-    return () => { isMounted = false; };
-  }, [schema.objectName, dataSource]);
-
-  useEffect(() => {
-    const fetchData = async () => {
-        if (!dataSource || typeof dataSource.find !== 'function' || !schema.objectName) return;
-        setLoading(true);
-        try {
-            // Auto-inject $expand for lookup/master_detail fields
-            const expand = buildExpandFields(objectDef?.fields);
-            const results = await dataSource.find(schema.objectName, {
-                options: { $top: 100 },
-                ...(expand.length > 0 ? { $expand: expand } : {}),
-            });
-            const data = extractRecords(results);
-            setFetchedData(data);
-        } catch (e) {
-            console.error(e);
-            setError(e as Error);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    if (schema.objectName && !boundData && !schema.items && !(props as any).data) {
-        fetchData();
-    }
-  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data, refreshKey, objectDef]);
-
-  const rawData = (props as any).data || boundData || fetchedData;
-
-  // Transform data to items if we have raw data and no explicit items
-  let effectiveItems = schema.items;
-  
-  if (!effectiveItems && rawData && Array.isArray(rawData)) {
-      // Resolve TimelineConfig with backwards-compatible fallbacks
-      const titleField = timelineConfig?.titleField ?? schema.mapping?.title ?? schema.titleField ?? 'name';
-      // Spec-compliant: prefer timeline.startDateField, fallback to flat props
-      const startDateField = timelineConfig?.startDateField ?? schema.mapping?.date ?? schema.startDateField ?? schema.dateField ?? 'date';
-      const endDateField = timelineConfig?.endDateField ?? schema.endDateField ?? startDateField;
-      const descField = schema.mapping?.description ?? schema.descriptionField ?? 'description';
-      const variantField = schema.mapping?.variant ?? 'variant';
-      const groupByField = timelineConfig?.groupByField ?? schema.groupByField;
-      const colorField = timelineConfig?.colorField ?? schema.colorField;
-
-      effectiveItems = rawData.map(item => ({
-          title: item[titleField],
-          // Support both 'time' (vertical) and 'startDate' (gantt)
-          time: item[startDateField],
-          startDate: item[startDateField], 
-          endDate: item[endDateField],
-          description: item[descField],
-          variant: item[variantField] || 'default',
-          // Spec-compliant: group and color support
-          ...(groupByField ? { group: item[groupByField] } : {}),
-          ...(colorField ? { color: item[colorField] } : {}),
-          // Pass original item for click handlers
-          _data: item
-      }));
-  }
-
-  const handleRefresh = useCallback(async () => {
-    setRefreshKey(k => k + 1);
-  }, []);
-
-  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
-    onRefresh: handleRefresh,
-    enabled: !!schema.objectName && !!dataSource,
-  });
-
-  const navigation = useNavigationOverlay({
-    navigation: (schema as any).navigation,
-    objectName: schema.objectName,
-    onRowClick: onRowClick ?? onItemClick,
-  });
-
-  // Resolve scale: spec timeline.scale takes priority over flat schema.scale
-  const resolvedScale = timelineConfig?.scale ?? schema.scale;
-
-  const effectiveSchema = {
-      ...schema,
-      items: effectiveItems || [],
-      className: className || schema.className,
-      // Map spec 'scale' to renderer 'timeScale' (used by gantt variant)
-      ...(resolvedScale ? { timeScale: resolvedScale } : {}),
-      onItemClick: (item: any) => {
-        const record = item._data || item;
-        navigation.handleClick(record);
-        onItemClick?.(record);
-      },
-  };
-
-  if (error) {
-      return (
-        <div className="p-4 text-red-500">
-            Error loading timeline: {error.message}
-        </div>
-      );
-  }
-
-  return (
-    <div ref={pullRef} className="relative overflow-auto h-full min-w-0">
-      {pullDistance > 0 && (
-        <div
-          className="flex items-center justify-center text-xs text-muted-foreground"
-          style={{ height: pullDistance }}
-        >
-          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
-        </div>
-      )}
-      <TimelineRenderer schema={effectiveSchema} />
-      {navigation.isOverlay && (
-        <NavigationOverlay {...navigation} title="Timeline Item">
-          {(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>
-  );
-}