@object-ui/plugin-gantt 0.3.0 → 0.5.0

package/dist/src/GanttView.d.ts

@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+export interface GanttTask {
+    id: string | number;
+    title: string;
+    start: Date;
+    end: Date;
+    progress: number;
+    color?: string;
+    data?: any;
+    dependencies?: (string | number)[];
+}
+export type GanttViewMode = 'day' | 'week' | 'month' | 'quarter';
+export interface GanttViewProps {
+    tasks: GanttTask[];
+    viewMode?: GanttViewMode;
+    startDate?: Date;
+    endDate?: Date;
+    onTaskClick?: (task: GanttTask) => void;
+    onViewChange?: (view: GanttViewMode) => void;
+    onAddClick?: () => void;
+    className?: string;
+}
+export declare function GanttView({ tasks, viewMode, startDate, endDate, onTaskClick, onViewChange, onAddClick, className }: GanttViewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GanttView.d.ts.map

package/dist/src/GanttView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GanttView.d.ts","sourceRoot":"","sources":["../../src/GanttView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA6BH,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,IAAI,CAAA;IACX,GAAG,EAAE,IAAI,CAAA;IACT,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,GAAG,CAAA;IACV,YAAY,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CACnC;AAED,MAAM,MAAM,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,SAAS,EAAE,CAAA;IAClB,QAAQ,CAAC,EAAE,aAAa,CAAA;IACxB,SAAS,CAAC,EAAE,IAAI,CAAA;IAChB,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAkB,EAClB,SAAS,EACT,OAAO,EACP,WAAW,EACX,YAAY,EACZ,UAAU,EACV,SAAS,EACV,EAAE,cAAc,2CAwQhB"}

package/dist/src/ObjectGantt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ObjectGantt.d.ts","sourceRoot":"","sources":["../../src/ObjectGantt.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAyB,MAAM,kBAAkB,CAAC;AAE5F,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAuED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA8SlD,CAAC"}
+{"version":3,"file":"ObjectGantt.d.ts","sourceRoot":"","sources":["../../src/ObjectGantt.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAuC,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAyB,MAAM,kBAAkB,CAAC;AAI5F,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACpC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;CAClC;AAyFD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+KlD,CAAC"}

package/dist/src/index.d.ts

@@ -1,4 +1,10 @@
+import { default as React } from 'react';
 import { ObjectGantt, ObjectGanttProps } from './ObjectGantt';
 export { ObjectGantt };
 export type { ObjectGanttProps };
+export { GanttView } from './GanttView';
+export type { GanttViewProps, GanttTask, GanttViewMode } from './GanttView';
+export declare const ObjectGanttRenderer: React.FC<{
+    schema: any;
+}>;
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEtD,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,YAAY,EAAE,gBAAgB,EAAE,CAAC;AAEjC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAG5E,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,MAAM,EAAE,GAAG,CAAA;CAAE,CAGzD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-gantt",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "MIT",
   "description": "Gantt chart plugin for Object UI",
@@ -24,21 +24,22 @@
     }
   },
   "dependencies": {
+    "@objectstack/spec": "^0.9.2",
     "lucide-react": "^0.563.0",
-    "@object-ui/components": "0.3.0",
-    "@object-ui/core": "0.3.0",
-    "@object-ui/fields": "0.3.0",
-    "@object-ui/react": "0.3.0",
-    "@object-ui/types": "0.3.0"
+    "@object-ui/components": "0.5.0",
+    "@object-ui/fields": "0.5.0",
+    "@object-ui/react": "0.5.0",
+    "@object-ui/core": "0.5.0",
+    "@object-ui/types": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^5.1.3",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/GanttView.tsx

@@ -0,0 +1,333 @@
+/**
+ * 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.
+ */
+
+"use client"
+
+import * as React from "react"
+import { 
+  ChevronLeft, 
+  ChevronRight, 
+  ZoomIn, 
+  ZoomOut, 
+  Calendar as CalendarIcon,
+  MoreHorizontal,
+  Plus
+} from "lucide-react"
+import { 
+  cn, 
+  Button, 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue,
+  Separator
+} from "@object-ui/components"
+
+const HEADER_HEIGHT = 50;
+const ROW_HEIGHT = 40;
+const COLUMN_WIDTH = 100; // Time column width
+
+export interface GanttTask {
+  id: string | number
+  title: string
+  start: Date
+  end: Date
+  progress: number
+  color?: string
+  data?: any
+  dependencies?: (string | number)[]
+}
+
+export type GanttViewMode = 'day' | 'week' | 'month' | 'quarter';
+
+export interface GanttViewProps {
+  tasks: GanttTask[]
+  viewMode?: GanttViewMode
+  startDate?: Date
+  endDate?: Date
+  onTaskClick?: (task: GanttTask) => void
+  onViewChange?: (view: GanttViewMode) => void
+  onAddClick?: () => void
+  className?: string
+}
+
+export function GanttView({
+  tasks,
+  viewMode = 'month',
+  startDate,
+  endDate,
+  onTaskClick,
+  onViewChange,
+  onAddClick,
+  className
+}: GanttViewProps) {
+  const [currentDate, setCurrentDate] = React.useState(new Date());
+  const [columnWidth, setColumnWidth] = React.useState(60);
+  
+  // Calculate timeline range
+  const timelineRange = React.useMemo(() => {
+    let start = startDate ? new Date(startDate) : new Date();
+    let end = endDate ? new Date(endDate) : new Date();
+    
+    if (!startDate && tasks.length > 0) {
+      // Find min start date
+      start = new Date(Math.min(...tasks.map(t => t.start.getTime())));
+      // Add padding
+      start.setDate(start.getDate() - 7);
+    }
+    
+    if (!endDate && tasks.length > 0) {
+      // Find max end date
+      end = new Date(Math.max(...tasks.map(t => t.end.getTime())));
+      // Add padding
+      end.setDate(end.getDate() + 14);
+    }
+    
+    // Normalize to start of day
+    start.setHours(0,0,0,0);
+    end.setHours(23,59,59,999);
+    
+    return { start, end };
+  }, [startDate, endDate, tasks]);
+
+  // Generate timeline columns
+  const timeColumns = React.useMemo(() => {
+    const cols: { date: Date; label: string; isWeekend: boolean }[] = [];
+    const current = new Date(timelineRange.start);
+    
+    while (current <= timelineRange.end) {
+      cols.push({
+        date: new Date(current),
+        label: current.getDate().toString(),
+        isWeekend: current.getDay() === 0 || current.getDay() === 6
+      });
+      current.setDate(current.getDate() + 1);
+    }
+    
+    return cols;
+  }, [timelineRange]);
+
+  const taskListWidth = 300;
+  
+  const headerRef = React.useRef<HTMLDivElement>(null);
+  const listRef = React.useRef<HTMLDivElement>(null);
+  const timelineRef = React.useRef<HTMLDivElement>(null);
+
+  const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    // Sync horizontal scroll to header
+    if (headerRef.current) {
+        headerRef.current.scrollLeft = e.currentTarget.scrollLeft;
+    }
+    // Sync vertical scroll to task list
+    if (listRef.current) {
+        listRef.current.scrollTop = e.currentTarget.scrollTop;
+    }
+  };
+
+  const getTaskStyle = (task: GanttTask) => {
+    const totalDuration = timelineRange.end.getTime() - timelineRange.start.getTime();
+    const tickWidth = columnWidth; // px per day
+    const msPerDay = 1000 * 60 * 60 * 24;
+    
+    const startOffsetMs = task.start.getTime() - timelineRange.start.getTime();
+    const durationMs = task.end.getTime() - task.start.getTime();
+    
+    const left = (startOffsetMs / msPerDay) * tickWidth;
+    const width = Math.max((durationMs / msPerDay) * tickWidth, tickWidth); // Min 1 day width
+    
+    return { left, width };
+  };
+
+  return (
+    <div className={cn("flex flex-col h-full bg-background border rounded-lg overflow-hidden", className)}>
+      {/* Toolbar */}
+      <div className="flex items-center justify-between p-2 border-b bg-card">
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm" onClick={() => onAddClick?.()}>
+            <Plus className="h-4 w-4 mr-2" />
+            New Task
+          </Button>
+          <div className="h-4 w-px bg-border mx-2" />
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="h-8 w-8">
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <span className="font-semibold text-sm">
+            {timelineRange.start.toLocaleDateString(undefined, { month: 'long', year: 'numeric' })}
+          </span>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <Select value={viewMode} onValueChange={(v) => onViewChange?.(v as GanttViewMode)}>
+            <SelectTrigger className="w-[120px] h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="day">Day View</SelectItem>
+              <SelectItem value="week">Week View</SelectItem>
+              <SelectItem value="month">Month View</SelectItem>
+              <SelectItem value="quarter">Quarter View</SelectItem>
+            </SelectContent>
+          </Select>
+          <div className="flex bg-muted rounded-md p-1">
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.max(20, prev - 10))}>
+              <ZoomOut className="h-3 w-3" />
+            </Button>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.min(100, prev + 10))}>
+              <ZoomIn className="h-3 w-3" />
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Gantt Body */}
+      <div className="flex flex-col flex-1 overflow-hidden">
+        {/* Headers Row */}
+        <div className="flex border-b bg-muted/30 shrink-0 h-[50px]">
+          {/* List Header */}
+          <div 
+            className="flex items-center font-medium text-xs text-muted-foreground px-4 border-r bg-card z-20 shadow-sm"
+            style={{ width: taskListWidth, minWidth: taskListWidth }}
+          >
+            <div className="flex-1">Task Name</div>
+            <div className="w-20 text-right">Start</div>
+            <div className="w-20 text-right">End</div>
+          </div>
+          
+          {/* Timeline Header */}
+          <div className="flex-1 overflow-hidden" ref={headerRef}>
+            <div className="flex h-full" style={{ width: timeColumns.length * columnWidth }}>
+              {timeColumns.map((col, i) => (
+                <div 
+                  key={i}
+                  className={cn(
+                    "flex flex-col items-center justify-center border-r text-xs text-muted-foreground h-full",
+                    col.isWeekend && "bg-muted/50"
+                  )}
+                  style={{ width: columnWidth, minWidth: columnWidth }}
+                >
+                  <span className="font-medium text-foreground">{col.label}</span>
+                  <span className="text-[10px] opacity-70">
+                    {col.date.toLocaleDateString(undefined, { weekday: 'narrow' })}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Content Row */}
+        <div className="flex flex-1 overflow-hidden">
+          {/* Left Side: Task List (Grid) */}
+          <div 
+            className="overflow-hidden border-r bg-card z-10 shadow-sm"
+            ref={listRef}
+            style={{ width: taskListWidth, minWidth: taskListWidth }}
+          >
+            {tasks.map((task) => (
+              <div 
+                key={task.id}
+                className="flex items-center border-b px-4 hover:bg-accent/50 cursor-pointer transition-colors"
+                style={{ height: ROW_HEIGHT }}
+                onClick={() => onTaskClick?.(task)}
+              >
+                <div className="flex-1 truncate font-medium text-sm flex items-center gap-2">
+                  <div 
+                    className="w-2 h-2 rounded-full"
+                    style={{ backgroundColor: task.color || '#3b82f6' }} 
+                  />
+                  {task.title}
+                </div>
+                <div className="w-20 text-right text-xs text-muted-foreground">
+                  {task.start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
+                </div>
+                <div className="w-20 text-right text-xs text-muted-foreground">
+                  {task.end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Right Side: Timeline */}
+          <div 
+            className="flex-1 overflow-auto bg-background/50 relative" 
+            ref={timelineRef}
+            onScroll={handleScroll}
+          >
+            <div style={{ width: timeColumns.length * columnWidth }}>
+              {/* Timeline Task Rows */}
+              <div className="relative">
+                {/* Background Grid */}
+                <div className="absolute inset-0 flex pointer-events-none z-0">
+                   {timeColumns.map((col, i) => (
+                    <div 
+                      key={i}
+                      className={cn(
+                        "border-r h-full",
+                        col.isWeekend && "bg-muted/20"
+                      )}
+                      style={{ width: columnWidth, minWidth: columnWidth }}
+                    />
+                  ))}
+                </div>
+
+                {/* Task Bars */}
+                {tasks.map((task) => {
+                   const style = getTaskStyle(task);
+                   return (
+                    <div 
+                      key={task.id}
+                      className="relative border-b hover:bg-black/5"
+                      style={{ height: ROW_HEIGHT }}
+                    >
+                      <div 
+                        className="absolute top-2 h-[calc(100%-16px)] rounded-sm bg-primary border border-primary-foreground/20 shadow-sm cursor-pointer hover:brightness-110 flex items-center px-2 group"
+                        style={{ 
+                          left: style.left, 
+                          width: style.width,
+                          backgroundColor: task.color || '#3b82f6'
+                        }}
+                        onClick={() => onTaskClick?.(task)}
+                      >
+                        {/* Progress Filter */}
+                        {task.progress > 0 && (
+                          <div 
+                            className="absolute left-0 top-0 bottom-0 bg-black/20 rounded-l-sm"
+                            style={{ width: `${task.progress}%` }}
+                          />
+                        )}
+                        
+                        {/* Hover Details */}
+                        <span className="text-[10px] text-white font-medium truncate opacity-0 group-hover:opacity-100 transition-opacity">
+                          {Math.round(task.progress)}%
+                        </span>
+                      </div>
+                    </div>
+                   )
+                })}
+                
+                {/* Current Time Indicator */}
+                <div 
+                  className="absolute top-0 bottom-0 w-px bg-red-500 z-20 pointer-events-none"
+                  style={{ 
+                    left: (new Date().getTime() - timelineRange.start.getTime()) / (1000 * 60 * 60 * 24) * columnWidth 
+                  }}
+                >
+                  <div className="w-2 h-2 rounded-full bg-red-500 -ml-[3px]" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ObjectGantt.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ObjectGantt } from './ObjectGantt';
+import { DataSource } from '@object-ui/types';
+
+// Mock GanttView to avoid complex rendering in tests
+vi.mock('./GanttView', () => ({
+  GanttView: ({ tasks }: any) => (
+    <div data-testid="gantt-view">
+      {tasks.map((t: any) => (
+        <div key={t.id} data-testid="gantt-task">{t.title}</div>
+      ))}
+    </div>
+  ),
+}));
+
+const mockData = [
+  { id: '1', name: 'Task 1', start_date: '2024-01-01', end_date: '2024-01-05', progress: 50 },
+  { id: '2', name: 'Task 2', start_date: '2024-01-06', end_date: '2024-01-10', progress: 0 },
+];
+
+const mockDataSource: DataSource = {
+  find: vi.fn(),
+  findOne: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+  getObjectSchema: vi.fn().mockResolvedValue({
+    fields: {
+       name: { type: 'text' },
+       start_date: { type: 'date' },
+       end_date: { type: 'date' }
+    }
+  }),
+};
+
+describe('ObjectGantt', () => {
+  it('renders with static value provider', async () => {
+    const schema: any = {
+      type: 'gantt',
+      gantt: {
+        titleField: 'name',
+        startDateField: 'start_date',
+        endDateField: 'end_date',
+      },
+      data: {
+        provider: 'value',
+        items: mockData,
+      },
+    };
+
+    render(<ObjectGantt schema={schema} />);
+    
+    // Check loading first if needed, or wait for tasks
+    await waitFor(() => {
+        expect(screen.getByTestId('gantt-view')).toBeDefined();
+    });
+    
+    expect(screen.getAllByTestId('gantt-task')).toHaveLength(2);
+    expect(screen.getByText('Task 1')).toBeDefined();
+  });
+
+  it('renders with object provider', async () => {
+    (mockDataSource.find as any).mockResolvedValue({ data: mockData });
+
+    const schema: any = {
+      type: 'gantt',
+      gantt: {
+        titleField: 'name',
+        startDateField: 'start_date',
+        endDateField: 'end_date',
+      },
+      data: {
+        provider: 'object',
+        object: 'tasks',
+      },
+    };
+
+    render(<ObjectGantt schema={schema} dataSource={mockDataSource} />);
+
+    await waitFor(() => {
+      expect(mockDataSource.find).toHaveBeenCalledWith('tasks', expect.any(Object));
+    });
+    
+    expect(screen.getAllByTestId('gantt-task')).toHaveLength(2);
+  });
+});