@object-ui/plugin-timeline 0.3.1 → 2.0.0

package/src/ObjectTimeline.tsx

@@ -0,0 +1,137 @@
+/**
+ * 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 } from 'react';
+import type { DataSource, TimelineSchema } from '@object-ui/types';
+import { useDataScope } from '@object-ui/react';
+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(),
+   dateField: z.string().optional(),
+   descriptionField: z.string().optional(),
+});
+
+export interface ObjectTimelineProps {
+  schema: TimelineSchema & {
+    objectName?: string;
+    titleField?: string;
+    dateField?: string;
+    descriptionField?: string;
+    // Map data fields to timeline item properties
+    mapping?: {
+      title?: string;
+      date?: string;
+      description?: string;
+      variant?: string;
+    }
+  };
+  dataSource?: DataSource;
+  className?: string;
+}
+
+export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
+  schema,
+  dataSource,
+  className,
+  ...props
+}) => {
+  const [fetchedData, setFetchedData] = useState<any[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    const result = TimelineExtensionSchema.safeParse(schema);
+    if (!result.success) {
+      console.warn(`[ObjectTimeline] Invalid timeline configuration:`, result.error.format());
+    }
+  }, [schema]);
+
+  const boundData = useDataScope(schema.bind);
+
+  useEffect(() => {
+    const fetchData = async () => {
+        if (!dataSource || !schema.objectName) return;
+        setLoading(true);
+        try {
+            const results = await dataSource.find(schema.objectName, {
+                options: { $top: 100 }
+            });
+            let data = results;
+            if ((results as any).value) {
+                data = (results as any).value;
+            } else if ((results as any).data) {
+                data = (results as any).data;
+            }
+
+            if (Array.isArray(data)) {
+                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]);
+
+  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)) {
+      const titleField = schema.mapping?.title || schema.titleField || 'name';
+      const dateField = schema.mapping?.date || schema.dateField || 'date';
+      const descField = schema.mapping?.description || schema.descriptionField || 'description';
+      const variantField = schema.mapping?.variant || 'variant';
+
+      effectiveItems = rawData.map(item => ({
+          title: item[titleField],
+          // Support both 'time' (vertical) and 'startDate' (gantt)
+          time: item[dateField],
+          startDate: item[dateField], 
+          endDate: item[dateField], // Default single point
+          description: item[descField],
+          variant: item[variantField] || 'default',
+          // Pass original item for click handlers
+          _data: item
+      }));
+  }
+
+  const effectiveSchema = {
+      ...schema,
+      items: effectiveItems || [],
+      className: className || schema.className
+  };
+
+  if (error) {
+      return (
+        <div className="p-4 text-red-500">
+            Error loading timeline: {error.message}
+        </div>
+      );
+  }
+
+  return <TimelineRenderer schema={effectiveSchema} />;
+}

package/src/__tests__/renderer.test.tsx

@@ -0,0 +1,295 @@
+/**
+ * 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/index.test.tsx

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

package/src/index.tsx

@@ -275,3 +275,37 @@ export {
 
 // Export renderer to register the component with ObjectUI
 export * from './renderer';
+
+// Export ObjectTimeline
+export { ObjectTimeline } from './ObjectTimeline';
+export type { ObjectTimelineProps } from './ObjectTimeline';
+
+import { ComponentRegistry } from '@object-ui/core';
+import { ObjectTimeline } from './ObjectTimeline';
+import { useSchemaContext } from '@object-ui/react';
+
+// Register object-timeline component
+export const ObjectTimelineRenderer: React.FC<any> = ({ schema, ...props }) => {
+  const { dataSource } = useSchemaContext();
+  return <ObjectTimeline schema={schema} dataSource={dataSource} {...props} />;
+};
+
+ComponentRegistry.register('object-timeline', ObjectTimelineRenderer, {
+  namespace: 'plugin-timeline',
+  label: 'Object Timeline',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'variant', type: 'enum', enum: ['vertical', 'horizontal', 'gantt'], defaultValue: 'vertical' },
+  ]
+});
+
+ComponentRegistry.register('timeline', ObjectTimelineRenderer, {
+  namespace: 'view',
+  label: 'Timeline View',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'variant', type: 'enum', enum: ['vertical', 'horizontal', 'gantt'], defaultValue: 'vertical' },
+  ]
+});

package/src/renderer.tsx

@@ -85,9 +85,7 @@ function formatDate(dateString: string, format?: string): string {
   return date.toISOString().split('T')[0];
 }
 
-ComponentRegistry.register(
-  'timeline',
-  ({ schema, className, ...props }: { schema: TimelineSchema; className?: string; [key: string]: any }) => {
+export const TimelineRenderer = ({ schema, className, ...props }: { schema: TimelineSchema; className?: string; [key: string]: any }) => {
     const {
       variant = 'vertical',
       items = [],
@@ -280,8 +278,13 @@ ComponentRegistry.register(
     }
 
     return null;
-  },
+  };
+
+ComponentRegistry.register(
+  'timeline', 
+  TimelineRenderer,
   {
+    namespace: 'plugin-timeline',
     label: 'Timeline',
     category: 'data-display',
     inputs: [

package/vite.config.ts

@@ -24,6 +24,13 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': resolve(__dirname, './src'),
+      '@object-ui/core': resolve(__dirname, '../core/src'),
+      '@object-ui/types': resolve(__dirname, '../types/src'),
+      '@object-ui/react': resolve(__dirname, '../react/src'),
+      '@object-ui/components': resolve(__dirname, '../components/src'),
+      '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
+      '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
   },
   build: {
@@ -45,4 +52,10 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    setupFiles: ['../../vitest.setup.tsx'],
+    passWithNoTests: true,
+    globals: true,
+    environment: 'jsdom',
+  },
 });

package/vitest.config.ts

@@ -0,0 +1,13 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'happy-dom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+});

package/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';