@object-ui/plugin-timeline 3.1.5 → 3.3.1

package/src/__tests__/ObjectTimeline.spec-config.test.tsx

@@ -1,232 +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 { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ObjectTimeline } from '../ObjectTimeline';
-
-// Mock dependencies
-vi.mock('@object-ui/react', () => ({
-  useDataScope: () => undefined,
-  useNavigationOverlay: () => ({
-    isOverlay: false,
-    handleClick: vi.fn(),
-    selectedRecord: null,
-    isOpen: false,
-    close: vi.fn(),
-    setIsOpen: vi.fn(),
-    mode: 'page' as const,
-    width: undefined,
-    view: undefined,
-    open: vi.fn(),
-  }),
-}));
-
-vi.mock('@object-ui/components', () => ({
-  NavigationOverlay: () => null,
-}));
-
-vi.mock('@object-ui/mobile', () => ({
-  usePullToRefresh: () => ({
-    ref: { current: null },
-    isRefreshing: false,
-    pullDistance: 0,
-  }),
-}));
-
-// Mock the TimelineRenderer to inspect the schema it receives
-const mockTimelineRenderer = vi.fn(() => <div data-testid="timeline-renderer" />);
-vi.mock('../renderer', () => ({
-  TimelineRenderer: (props: any) => mockTimelineRenderer(props),
-}));
-
-describe('ObjectTimeline Spec Config', () => {
-  beforeEach(() => {
-    mockTimelineRenderer.mockClear();
-  });
-
-  const mockData = [
-    { id: '1', name: 'Event A', start_date: '2024-01-01', end_date: '2024-01-15', category: 'work', priority_color: 'red' },
-    { id: '2', name: 'Event B', start_date: '2024-02-01', end_date: '2024-02-28', category: 'personal', priority_color: 'blue' },
-  ];
-
-  describe('nested timeline config', () => {
-    it('uses timeline.startDateField to resolve start dates', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        timeline: { startDateField: 'start_date', titleField: 'name' },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      expect(mockTimelineRenderer).toHaveBeenCalled();
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].time).toBe('2024-01-01');
-      expect(renderedSchema.items[0].startDate).toBe('2024-01-01');
-    });
-
-    it('uses timeline.titleField to resolve titles', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        timeline: { startDateField: 'start_date', titleField: 'name' },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].title).toBe('Event A');
-      expect(renderedSchema.items[1].title).toBe('Event B');
-    });
-
-    it('uses timeline.endDateField to resolve end dates', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        timeline: { startDateField: 'start_date', endDateField: 'end_date', titleField: 'name' },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].endDate).toBe('2024-01-15');
-    });
-
-    it('uses timeline.groupByField to add group property', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        timeline: { startDateField: 'start_date', titleField: 'name', groupByField: 'category' },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].group).toBe('work');
-      expect(renderedSchema.items[1].group).toBe('personal');
-    });
-
-    it('uses timeline.colorField to add color property', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        timeline: { startDateField: 'start_date', titleField: 'name', colorField: 'priority_color' },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].color).toBe('red');
-      expect(renderedSchema.items[1].color).toBe('blue');
-    });
-
-    it('uses timeline.scale to set timeScale on rendered schema', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        timeline: { startDateField: 'start_date', titleField: 'name', scale: 'month' },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.timeScale).toBe('month');
-    });
-
-    it('timeline.scale supports all valid values', () => {
-      const scales = ['hour', 'day', 'week', 'month', 'quarter', 'year'] as const;
-      scales.forEach((scale) => {
-        mockTimelineRenderer.mockClear();
-        const schema: any = {
-          type: 'timeline' as const,
-          objectName: 'events',
-          timeline: { startDateField: 'start_date', titleField: 'name', scale },
-        };
-        render(<ObjectTimeline schema={schema} data={mockData} />);
-        const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-        expect(renderedSchema.timeScale).toBe(scale);
-      });
-    });
-  });
-
-  describe('backward compatibility', () => {
-    it('falls back to flat startDateField when timeline config is not set', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        startDateField: 'start_date',
-        titleField: 'name',
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].time).toBe('2024-01-01');
-    });
-
-    it('falls back to legacy dateField when startDateField is not set', () => {
-      const data = [{ id: '1', name: 'Event', legacy_date: '2024-03-15' }];
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        dateField: 'legacy_date',
-        titleField: 'name',
-      };
-      render(<ObjectTimeline schema={schema} data={data} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].time).toBe('2024-03-15');
-    });
-
-    it('falls back to flat groupByField when timeline.groupByField is not set', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        startDateField: 'start_date',
-        titleField: 'name',
-        groupByField: 'category',
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].group).toBe('work');
-    });
-
-    it('falls back to flat colorField when timeline.colorField is not set', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        startDateField: 'start_date',
-        titleField: 'name',
-        colorField: 'priority_color',
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].color).toBe('red');
-    });
-
-    it('falls back to flat scale when timeline.scale is not set', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        startDateField: 'start_date',
-        titleField: 'name',
-        scale: 'week',
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.timeScale).toBe('week');
-    });
-
-    it('spec timeline config takes priority over flat props', () => {
-      const schema: any = {
-        type: 'timeline' as const,
-        objectName: 'events',
-        startDateField: 'end_date',      // flat — should be overridden
-        titleField: 'id',                 // flat — should be overridden
-        groupByField: 'priority_color',   // flat — should be overridden
-        timeline: {
-          startDateField: 'start_date',   // spec — takes priority
-          titleField: 'name',             // spec — takes priority
-          groupByField: 'category',       // spec — takes priority
-        },
-      };
-      render(<ObjectTimeline schema={schema} data={mockData} />);
-      const renderedSchema = mockTimelineRenderer.mock.calls[0][0].schema;
-      expect(renderedSchema.items[0].time).toBe('2024-01-01');
-      expect(renderedSchema.items[0].title).toBe('Event A');
-      expect(renderedSchema.items[0].group).toBe('work');
-    });
-  });
-});

package/src/__tests__/renderer.test.tsx

@@ -1,295 +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 from 'react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { ComponentRegistry } from '@object-ui/core';
-
-// Import renderer to trigger registration
-import '../renderer';
-
-// Mock renderChildren used by the renderer, preserving cn and other exports
-vi.mock('@object-ui/components', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('@object-ui/components')>();
-  return {
-    ...actual,
-    renderChildren: vi.fn(() => null),
-  };
-});
-
-describe('Timeline Renderer (ComponentRegistry)', () => {
-  let TimelineComponent: any;
-
-  beforeEach(() => {
-    TimelineComponent = ComponentRegistry.get('timeline');
-  });
-
-  it('is registered in ComponentRegistry as "timeline"', () => {
-    expect(TimelineComponent).toBeDefined();
-  });
-
-  // --- Vertical variant ---
-
-  it('renders in vertical variant by default', () => {
-    const schema: any = {
-      type: 'timeline',
-      items: [
-        { time: '2024-01-15', title: 'First Event', description: 'Description one' },
-      ],
-    };
-
-    const { container } = render(<TimelineComponent schema={schema} />);
-    // Vertical uses an <ol> element
-    expect(container.querySelector('ol')).toBeInTheDocument();
-    expect(screen.getByText('First Event')).toBeInTheDocument();
-    expect(screen.getByText('Description one')).toBeInTheDocument();
-  });
-
-  it('renders items with titles and descriptions in vertical variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'vertical',
-      items: [
-        { time: '2024-01-15', title: 'Alpha Release', description: 'Initial alpha' },
-        { time: '2024-02-01', title: 'Beta Release', description: 'Public beta' },
-        { time: '2024-03-10', title: 'GA Launch', description: 'General availability' },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('Alpha Release')).toBeInTheDocument();
-    expect(screen.getByText('Initial alpha')).toBeInTheDocument();
-    expect(screen.getByText('Beta Release')).toBeInTheDocument();
-    expect(screen.getByText('Public beta')).toBeInTheDocument();
-    expect(screen.getByText('GA Launch')).toBeInTheDocument();
-    expect(screen.getByText('General availability')).toBeInTheDocument();
-  });
-
-  it('handles empty items array in vertical variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'vertical',
-      items: [],
-    };
-
-    const { container } = render(<TimelineComponent schema={schema} />);
-    // Should render the <ol> wrapper but no <li> items
-    expect(container.querySelector('ol')).toBeInTheDocument();
-    expect(container.querySelectorAll('li')).toHaveLength(0);
-  });
-
-  it('formats dates correctly with short format', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'vertical',
-      dateFormat: 'short',
-      items: [
-        { time: '2024-06-15', title: 'Event' },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    // short format uses toLocaleDateString()
-    const expected = new Date('2024-06-15').toLocaleDateString();
-    expect(screen.getByText(expected)).toBeInTheDocument();
-  });
-
-  it('formats dates correctly with long format', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'vertical',
-      dateFormat: 'long',
-      items: [
-        { time: '2024-06-15', title: 'Event' },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    const expected = new Date('2024-06-15').toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-    expect(screen.getByText(expected)).toBeInTheDocument();
-  });
-
-  it('formats dates correctly with iso (default) format', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'vertical',
-      dateFormat: 'iso',
-      items: [
-        { time: '2024-06-15', title: 'Event' },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('2024-06-15')).toBeInTheDocument();
-  });
-
-  // --- Horizontal variant ---
-
-  it('renders in horizontal variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'horizontal',
-      items: [
-        { time: '2024-01-01', title: 'Q1', description: 'First quarter' },
-        { time: '2024-04-01', title: 'Q2', description: 'Second quarter' },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('Q1')).toBeInTheDocument();
-    expect(screen.getByText('First quarter')).toBeInTheDocument();
-    expect(screen.getByText('Q2')).toBeInTheDocument();
-    expect(screen.getByText('Second quarter')).toBeInTheDocument();
-  });
-
-  it('handles empty items array in horizontal variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'horizontal',
-      items: [],
-    };
-
-    const { container } = render(<TimelineComponent schema={schema} />);
-    // Horizontal wraps in a div, should have no child items
-    expect(container.firstChild).toBeInTheDocument();
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  // --- Gantt variant ---
-
-  it('renders in gantt variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'gantt',
-      timeScale: 'month',
-      items: [
-        {
-          label: 'Backend',
-          items: [
-            { title: 'API Design', startDate: '2024-01-01', endDate: '2024-02-01' },
-          ],
-        },
-        {
-          label: 'Frontend',
-          items: [
-            { title: 'UI Build', startDate: '2024-02-01', endDate: '2024-03-01' },
-          ],
-        },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('Backend')).toBeInTheDocument();
-    expect(screen.getByText('Frontend')).toBeInTheDocument();
-    expect(screen.getByText('API Design')).toBeInTheDocument();
-    expect(screen.getByText('UI Build')).toBeInTheDocument();
-  });
-
-  it('handles rows with no sub-items in gantt variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'gantt',
-      minDate: '2024-01-01',
-      maxDate: '2024-03-01',
-      items: [
-        { label: 'Empty Row', items: [] },
-        {
-          label: 'Has Items',
-          items: [
-            { title: 'Task', startDate: '2024-01-15', endDate: '2024-02-15' },
-          ],
-        },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('Empty Row')).toBeInTheDocument();
-    expect(screen.getByText('Has Items')).toBeInTheDocument();
-  });
-
-  it('gantt variant calculates date ranges from items', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'gantt',
-      timeScale: 'month',
-      items: [
-        {
-          label: 'Project A',
-          items: [
-            { title: 'Task 1', startDate: '2024-01-01', endDate: '2024-01-31' },
-            { title: 'Task 2', startDate: '2024-02-01', endDate: '2024-03-31' },
-          ],
-        },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    // Gantt header should contain month labels spanning the range
-    expect(screen.getByText('Project A')).toBeInTheDocument();
-    expect(screen.getByText('Task 1')).toBeInTheDocument();
-    expect(screen.getByText('Task 2')).toBeInTheDocument();
-  });
-
-  it('gantt variant uses custom rowLabel', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'gantt',
-      rowLabel: 'Projects',
-      minDate: '2024-01-01',
-      maxDate: '2024-03-01',
-      items: [
-        {
-          label: 'My Project',
-          items: [
-            { title: 'Work', startDate: '2024-01-15', endDate: '2024-02-15' },
-          ],
-        },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('Projects')).toBeInTheDocument();
-  });
-
-  it('gantt variant defaults rowLabel to "Items"', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'gantt',
-      minDate: '2024-01-01',
-      maxDate: '2024-03-01',
-      items: [
-        {
-          label: 'Row',
-          items: [
-            { title: 'Bar', startDate: '2024-01-10', endDate: '2024-02-10' },
-          ],
-        },
-      ],
-    };
-
-    render(<TimelineComponent schema={schema} />);
-    expect(screen.getByText('Items')).toBeInTheDocument();
-  });
-
-  it('returns null for unknown variant', () => {
-    const schema: any = {
-      type: 'timeline',
-      variant: 'unknown',
-      items: [],
-    };
-
-    const { container } = render(<TimelineComponent schema={schema} />);
-    expect(container.innerHTML).toBe('');
-  });
-});

package/src/__tests__/timeline-variants.test.tsx

@@ -1,150 +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 from 'react';
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import {
-  Timeline,
-  TimelineItem,
-  TimelineMarker,
-  timelineItemVariants,
-  timelineMarkerVariants,
-} from '../index';
-
-describe('TimelineItem density variants', () => {
-  it('renders with default density (mb-10)', () => {
-    const { container } = render(
-      <Timeline>
-        <TimelineItem data-testid="item">Content</TimelineItem>
-      </Timeline>
-    );
-    const item = container.querySelector('li');
-    expect(item?.className).toContain('mb-10');
-    expect(item?.className).toContain('ml-6');
-  });
-
-  it('renders with compact density (mb-3)', () => {
-    const { container } = render(
-      <Timeline>
-        <TimelineItem density="compact">Content</TimelineItem>
-      </Timeline>
-    );
-    const item = container.querySelector('li');
-    expect(item?.className).toContain('mb-3');
-    expect(item?.className).toContain('ml-6');
-  });
-
-  it('renders with comfortable density (mb-6)', () => {
-    const { container } = render(
-      <Timeline>
-        <TimelineItem density="comfortable">Content</TimelineItem>
-      </Timeline>
-    );
-    const item = container.querySelector('li');
-    expect(item?.className).toContain('mb-6');
-    expect(item?.className).toContain('ml-6');
-  });
-
-  it('allows className override', () => {
-    const { container } = render(
-      <Timeline>
-        <TimelineItem density="compact" className="custom-class">Content</TimelineItem>
-      </Timeline>
-    );
-    const item = container.querySelector('li');
-    expect(item?.className).toContain('custom-class');
-    expect(item?.className).toContain('mb-3');
-  });
-
-  it('cva function produces expected classes', () => {
-    expect(timelineItemVariants({ density: 'default' })).toContain('mb-10');
-    expect(timelineItemVariants({ density: 'compact' })).toContain('mb-3');
-    expect(timelineItemVariants({ density: 'comfortable' })).toContain('mb-6');
-  });
-});
-
-describe('TimelineMarker semantic color variants', () => {
-  it('renders with default variant', () => {
-    const { container } = render(<TimelineMarker />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-blue-200');
-    expect(marker.className).toContain('border-blue-400');
-  });
-
-  it('renders with success variant', () => {
-    const { container } = render(<TimelineMarker variant="success" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-emerald-200');
-    expect(marker.className).toContain('border-emerald-500');
-  });
-
-  it('renders with warning variant', () => {
-    const { container } = render(<TimelineMarker variant="warning" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-amber-200');
-    expect(marker.className).toContain('border-amber-500');
-  });
-
-  it('renders with danger variant', () => {
-    const { container } = render(<TimelineMarker variant="danger" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-red-200');
-    expect(marker.className).toContain('border-red-500');
-  });
-
-  it('renders with info variant', () => {
-    const { container } = render(<TimelineMarker variant="info" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-purple-200');
-    expect(marker.className).toContain('border-purple-500');
-  });
-
-  it('renders with todo status variant', () => {
-    const { container } = render(<TimelineMarker variant="todo" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-slate-200');
-    expect(marker.className).toContain('border-slate-400');
-  });
-
-  it('renders with in-progress status variant', () => {
-    const { container } = render(<TimelineMarker variant="in-progress" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-blue-200');
-    expect(marker.className).toContain('border-blue-500');
-  });
-
-  it('renders with done status variant', () => {
-    const { container } = render(<TimelineMarker variant="done" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('bg-emerald-200');
-    expect(marker.className).toContain('border-emerald-500');
-  });
-
-  it('cva function produces expected classes for status variants', () => {
-    expect(timelineMarkerVariants({ variant: 'todo' })).toContain('bg-slate-200');
-    expect(timelineMarkerVariants({ variant: 'in-progress' })).toContain('bg-blue-200');
-    expect(timelineMarkerVariants({ variant: 'done' })).toContain('bg-emerald-200');
-  });
-
-  it('applies common base classes', () => {
-    const { container } = render(<TimelineMarker variant="default" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('rounded-full');
-    expect(marker.className).toContain('border-2');
-    expect(marker.className).toContain('absolute');
-  });
-
-  it('allows className override', () => {
-    const { container } = render(<TimelineMarker variant="success" className="extra-class" />);
-    const marker = container.firstChild as HTMLElement;
-    expect(marker.className).toContain('extra-class');
-    expect(marker.className).toContain('bg-emerald-200');
-  });
-});