@object-ui/plugin-gantt 0.3.1 → 2.0.0

package/src/ObjectGantt.tsx

@@ -24,6 +24,8 @@
 
 import React, { useEffect, useState, useMemo } from 'react';
 import type { ObjectGridSchema, DataSource, ViewData, GanttConfig } from '@object-ui/types';
+import { GanttConfigSchema } from '@objectstack/spec/ui';
+import { GanttView, type GanttTask } from './GanttView';
 
 export interface ObjectGanttProps {
   schema: ObjectGridSchema;
@@ -89,15 +91,33 @@ function convertSortToQueryParams(sort: string | any[] | undefined): Record<stri
 /**
  * Helper to get gantt configuration from schema
  */
-function getGanttConfig(schema: ObjectGridSchema): GanttConfig | null {
-  // Check if schema has gantt configuration
-  if (schema.filter && typeof schema.filter === 'object' && 'gantt' in schema.filter) {
-    return (schema.filter as any).gantt as GanttConfig;
-  }
+function getGanttConfig(schema: ObjectGridSchema | any): GanttConfig | null {
+  let config: GanttConfig | null = null;
   
-  // For backward compatibility, check if schema has gantt config at root
-  if ((schema as any).gantt) {
-    return (schema as any).gantt as GanttConfig;
+  // 1. Check top-level properties (ObjectGanttSchema style)
+  if (schema.startDateField && schema.endDateField) {
+      config = {
+          startDateField: schema.startDateField,
+          endDateField: schema.endDateField,
+          titleField: schema.titleField || 'name',
+          progressField: schema.progressField,
+          dependenciesField: schema.dependenciesField || schema.dependencyField,
+          colorField: schema.colorField
+      };
+      return config;
+  }
+
+  // 2. Check schema.gantt (ObjectGridSchema style)
+  if (schema.gantt) {
+    config = schema.gantt as GanttConfig;
+  }
+
+  if (config) {
+    const result = GanttConfigSchema.safeParse(config);
+    if (!result.success) {
+      console.warn(`[ObjectGantt] Invalid gantt configuration:`, result.error.format());
+    }
+    return config;
   }
   
   return null;
@@ -108,13 +128,19 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
   dataSource,
   className,
   onTaskClick,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
 
-  const dataConfig = getDataConfig(schema);
+  const rawDataConfig = getDataConfig(schema);
+  // Memoize dataConfig using deep comparison to prevent infinite loops
+  const dataConfig = useMemo(() => {
+    return rawDataConfig;
+  }, [JSON.stringify(rawDataConfig)]);
+
   const ganttConfig = getGanttConfig(schema);
   const hasInlineData = dataConfig?.provider === 'value';
 
@@ -123,6 +149,13 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
     const fetchData = async () => {
       try {
         setLoading(true);
+        // 1. Check for data prop (Unified ListView)
+        if ((rest as any).data && Array.isArray((rest as any).data)) {
+            setData((rest as any).data);
+            setLoading(false);
+            return;
+        }
+
         
         if (hasInlineData && dataConfig?.provider === 'value') {
           setData(dataConfig.items as any[]);
@@ -140,7 +173,18 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
             $filter: schema.filter,
             $orderby: convertSortToQueryParams(schema.sort),
           });
-          setData(result?.data || []);
+          
+          let items: any[] = [];
+          if (Array.isArray(result)) {
+            items = result;
+          } else if (result && typeof result === 'object') {
+             if (Array.isArray((result as any).data)) {
+                items = (result as any).data; 
+             } else if (Array.isArray((result as any).value)) {
+                items = (result as any).value;
+             }
+          }
+          setData(items);
         } else if (dataConfig?.provider === 'api') {
           console.warn('API provider not yet implemented for ObjectGantt');
           setData([]);
@@ -186,7 +230,7 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
       return [];
     }
 
-    const { startDateField, endDateField, titleField, progressField, dependenciesField } = ganttConfig;
+    const { startDateField, endDateField, titleField, progressField, dependenciesField, colorField } = ganttConfig;
 
     return data.map((record, index) => {
       const startDate = record[startDateField];
@@ -194,6 +238,7 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
       const title = record[titleField] || 'Untitled Task';
       const progress = progressField ? record[progressField] : 0;
       const dependencies = dependenciesField ? record[dependenciesField] : [];
+      const color = colorField ? record[colorField] : undefined;
 
       return {
         id: record.id || record._id || `task-${index}`,
@@ -202,58 +247,12 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
         end: endDate ? new Date(endDate) : new Date(),
         progress: Math.min(100, Math.max(0, progress || 0)), // Clamp between 0-100
         dependencies: Array.isArray(dependencies) ? dependencies : [],
+        color,
         data: record,
       };
     }).filter(task => !isNaN(task.start.getTime()) && !isNaN(task.end.getTime()));
   }, [data, ganttConfig]);
 
-  // Calculate timeline range
-  const timelineRange = useMemo(() => {
-    if (!tasks.length) {
-      const now = new Date();
-      return {
-        start: new Date(now.getFullYear(), now.getMonth(), 1),
-        end: new Date(now.getFullYear(), now.getMonth() + 3, 0),
-      };
-    }
-
-    const allDates = tasks.flatMap(task => [task.start, task.end]);
-    const minDate = new Date(Math.min(...allDates.map(d => d.getTime())));
-    const maxDate = new Date(Math.max(...allDates.map(d => d.getTime())));
-
-    // Add some padding
-    minDate.setDate(minDate.getDate() - 7);
-    maxDate.setDate(maxDate.getDate() + 7);
-
-    return { start: minDate, end: maxDate };
-  }, [tasks]);
-
-  // Generate month headers
-  const months = useMemo(() => {
-    const result = [];
-    const current = new Date(timelineRange.start);
-    current.setDate(1);
-
-    while (current <= timelineRange.end) {
-      result.push(new Date(current));
-      current.setMonth(current.getMonth() + 1);
-    }
-
-    return result;
-  }, [timelineRange]);
-
-  // Calculate task bar position and width
-  const getTaskPosition = (task: any) => {
-    const totalDays = (timelineRange.end.getTime() - timelineRange.start.getTime()) / (1000 * 60 * 60 * 24);
-    const taskStart = (task.start.getTime() - timelineRange.start.getTime()) / (1000 * 60 * 60 * 24);
-    const taskDuration = (task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24);
-
-    return {
-      left: `${(taskStart / totalDays) * 100}%`,
-      width: `${(taskDuration / totalDays) * 100}%`,
-    };
-  };
-
   if (loading) {
     return (
       <div className={className}>
@@ -286,122 +285,16 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
     );
   }
 
-  const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-
   return (
     <div className={className}>
-      <div className="border rounded-lg bg-background overflow-hidden">
-        <div className="flex">
-          {/* Task List */}
-          <div className="w-64 border-r flex-shrink-0">
-            <div className="border-b p-3 font-semibold bg-muted">Tasks</div>
-            <div>
-              {tasks.map(task => (
-                <div
-                  key={task.id}
-                  className="border-b p-3 hover:bg-muted/50 cursor-pointer"
-                  onClick={() => onTaskClick?.(task.data)}
-                >
-                  <div className="font-medium text-sm truncate">{task.title}</div>
-                  <div className="text-xs text-muted-foreground mt-1">
-                    {task.start.toLocaleDateString()} - {task.end.toLocaleDateString()}
-                  </div>
-                  {task.progress > 0 && (
-                    <div className="mt-2">
-                      <div className="flex justify-between text-xs mb-1">
-                        <span>Progress</span>
-                        <span>{task.progress}%</span>
-                      </div>
-                      <div className="h-1.5 bg-muted rounded-full overflow-hidden">
-                        <div
-                          className="h-full bg-primary"
-                          style={{ width: `${task.progress}%` }}
-                        />
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Timeline */}
-          <div className="flex-1 overflow-x-auto">
-            {/* Month Headers */}
-            <div className="border-b bg-muted sticky top-0 z-10">
-              <div className="flex">
-                {months.map((month, index) => {
-                  const daysInMonth = new Date(
-                    month.getFullYear(),
-                    month.getMonth() + 1,
-                    0
-                  ).getDate();
-                  
-                  return (
-                    <div
-                      key={index}
-                      className="border-r p-3 text-center font-semibold text-sm"
-                      style={{ minWidth: `${daysInMonth * 20}px` }}
-                    >
-                      {monthNames[month.getMonth()]} {month.getFullYear()}
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-
-            {/* Task Bars */}
-            <div className="relative">
-              {tasks.map((task) => {
-                const position = getTaskPosition(task);
-                
-                return (
-                  <div
-                    key={task.id}
-                    className="border-b relative"
-                    style={{ height: '60px' }}
-                  >
-                    {/* Month grid lines */}
-                    <div className="absolute inset-0 flex pointer-events-none">
-                      {months.map((month, idx) => {
-                        const daysInMonth = new Date(
-                          month.getFullYear(),
-                          month.getMonth() + 1,
-                          0
-                        ).getDate();
-                        
-                        return (
-                          <div
-                            key={idx}
-                            className="border-r"
-                            style={{ minWidth: `${daysInMonth * 20}px` }}
-                          />
-                        );
-                      })}
-                    </div>
-
-                    {/* Task Bar */}
-                    <div
-                      className="absolute top-1/2 -translate-y-1/2 h-8 bg-primary/80 rounded cursor-pointer hover:bg-primary transition-colors flex items-center px-2 text-white text-xs font-medium overflow-hidden"
-                      style={position}
-                      onClick={() => onTaskClick?.(task.data)}
-                    >
-                      {/* Progress overlay */}
-                      {task.progress > 0 && (
-                        <div
-                          className="absolute inset-0 bg-primary-foreground/20"
-                          style={{ width: `${task.progress}%` }}
-                        />
-                      )}
-                      <span className="relative z-10 truncate">{task.title}</span>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-        </div>
+      <div className="h-[calc(100vh-200px)] min-h-[600px]">
+        <GanttView 
+          tasks={tasks}
+          onTaskClick={(task) => onTaskClick?.(task.data)}
+          onAddClick={() => {
+            // Placeholder for add action
+          }}
+        />
       </div>
     </div>
   );

package/src/index.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { ObjectGanttRenderer } from './index';
+
+// Mock dependencies
+vi.mock('@object-ui/react', () => ({
+  useSchemaContext: vi.fn(() => ({ dataSource: { type: 'mock-datasource' } })),
+}));
+
+vi.mock('./ObjectGantt', () => ({
+  ObjectGantt: ({ dataSource }: any) => (
+    <div data-testid="gantt-mock">
+        {dataSource ? `DataSource: ${dataSource.type}` : 'No DataSource'}
+    </div>
+  )
+}));
+
+describe('Plugin Gantt Registration', () => {
+  it('renderer passes dataSource from context', () => {
+    // Note: We test the renderer directly to avoid singleton issues with ComponentRegistry in tests
+    render(<ObjectGanttRenderer schema={{}} />);
+    expect(screen.getByTestId('gantt-mock')).toHaveTextContent('DataSource: mock-datasource');
+  });
+});

package/src/index.tsx

@@ -8,22 +8,38 @@
 
 import React from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import { useSchemaContext } from '@object-ui/react';
 import { ObjectGantt } from './ObjectGantt';
 import type { ObjectGanttProps } from './ObjectGantt';
 
 export { ObjectGantt };
 export type { ObjectGanttProps };
 
+export { GanttView } from './GanttView';
+export type { GanttViewProps, GanttTask, GanttViewMode } from './GanttView';
+
 // Register component
-const ObjectGanttRenderer: React.FC<{ schema: any }> = ({ schema }) => {
-  return <ObjectGantt schema={schema} dataSource={null as any} />;
+export const ObjectGanttRenderer: React.FC<{ schema: any }> = ({ schema }) => {
+  const { dataSource } = useSchemaContext();
+  return <ObjectGantt schema={schema} dataSource={dataSource} />;
 };
 
 ComponentRegistry.register('object-gantt', ObjectGanttRenderer, {
+  namespace: 'plugin-gantt',
   label: 'Object Gantt',
-  category: 'plugin',
+  category: 'view',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'gantt', type: 'object', label: 'Gantt Config', description: 'startDateField, endDateField, titleField, progressField, percentageField, colorField, dependenciesField' },
+  ],
+});
+
+ComponentRegistry.register('gantt', ObjectGanttRenderer, {
+  namespace: 'view',
+  label: 'Gantt View',
+  category: 'view',
   inputs: [
     { name: 'objectName', type: 'string', label: 'Object Name', required: true },
-    { name: 'gantt', type: 'object', label: 'Gantt Config', description: 'startDateField, endDateField, titleField, progressField, dependenciesField' },
+    { name: 'gantt', type: 'object', label: 'Gantt Config', description: 'startDateField, endDateField, titleField, progressField, percentageField, colorField, dependenciesField' },
   ],
 });

package/vite.config.ts

@@ -47,4 +47,7 @@ export default defineConfig({
       },
     },
   },
+  test: {
+    passWithNoTests: true,
+  },
 });

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';