@object-ui/plugin-timeline 0.3.0 → 0.5.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/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,27 @@ 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: 'plugin',
+  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';