@object-ui/plugin-gantt 3.3.0 → 3.3.1

package/src/ObjectGantt.tsx

@@ -1,324 +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.
- */
-
-/**
- * ObjectGantt Component
- * 
- * A specialized Gantt chart component that works with ObjectQL data sources.
- * Displays tasks with date ranges, progress, and dependencies.
- * Implements the gantt view type from @objectstack/spec view.zod ListView schema.
- * 
- * Features:
- * - Gantt chart timeline visualization
- * - Task progress tracking (0-100%)
- * - Task dependencies visualization
- * - Date range display
- * - Auto-scrolling timeline
- * - Works with object/api/value data providers
- */
-
-import React, { useEffect, useState, useMemo } from 'react';
-import type { ObjectGridSchema, DataSource, ViewData, GanttConfig } from '@object-ui/types';
-import { GanttConfigSchema } from '@objectstack/spec/ui';
-import { useNavigationOverlay } from '@object-ui/react';
-import { NavigationOverlay } from '@object-ui/components';
-import { extractRecords, buildExpandFields } from '@object-ui/core';
-import { GanttView, type GanttTask } from './GanttView';
-
-export interface ObjectGanttProps {
-  schema: ObjectGridSchema;
-  dataSource?: DataSource;
-  className?: string;
-  onTaskClick?: (record: any) => void;
-  onRowClick?: (record: any) => void;
-  onEdit?: (record: any) => void;
-  onDelete?: (record: any) => void;
-}
-
-/**
- * Helper to get data configuration from schema
- */
-function getDataConfig(schema: ObjectGridSchema): ViewData | null {
-  if (schema.data) {
-    return schema.data;
-  }
-  
-  if (schema.staticData) {
-    return {
-      provider: 'value',
-      items: schema.staticData,
-    };
-  }
-  
-  if (schema.objectName) {
-    return {
-      provider: 'object',
-      object: schema.objectName,
-    };
-  }
-  
-  return null;
-}
-
-/**
- * Helper to convert sort config to QueryParams format
- */
-function convertSortToQueryParams(sort: string | any[] | undefined): Record<string, 'asc' | 'desc'> | undefined {
-  if (!sort) return undefined;
-  
-  // If it's a string like "name desc"
-  if (typeof sort === 'string') {
-    const parts = sort.split(' ');
-    const field = parts[0];
-    const order = (parts[1]?.toLowerCase() === 'desc' ? 'desc' : 'asc') as 'asc' | 'desc';
-    return { [field]: order };
-  }
-  
-  // If it's an array of SortConfig objects
-  if (Array.isArray(sort)) {
-    return sort.reduce((acc, item) => {
-      if (item.field && item.order) {
-        acc[item.field] = item.order;
-      }
-      return acc;
-    }, {} as Record<string, 'asc' | 'desc'>);
-  }
-  
-  return undefined;
-}
-
-/**
- * Helper to get gantt configuration from schema
- */
-function getGanttConfig(schema: ObjectGridSchema | any): GanttConfig | null {
-  let config: GanttConfig | null = null;
-  
-  // 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;
-}
-
-export const ObjectGantt: React.FC<ObjectGanttProps> = ({
-  schema,
-  dataSource,
-  className,
-  onTaskClick,
-  onRowClick,
-  ...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 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';
-
-  // Fetch data based on provider
-  useEffect(() => {
-    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[]);
-          setLoading(false);
-          return;
-        }
-
-        if (!dataSource || typeof dataSource.find !== 'function') {
-          throw new Error('DataSource required for object/api providers');
-        }
-
-        if (dataConfig?.provider === 'object') {
-          const objectName = dataConfig.object;
-          // Auto-inject $expand for lookup/master_detail fields
-          const expand = buildExpandFields(objectSchema?.fields);
-          const result = await dataSource.find(objectName, {
-            $filter: schema.filter,
-            $orderby: convertSortToQueryParams(schema.sort),
-            ...(expand.length > 0 ? { $expand: expand } : {}),
-          });
-          let items: any[] = extractRecords(result);
-          setData(items);
-        } else if (dataConfig?.provider === 'api') {
-          console.warn('API provider not yet implemented for ObjectGantt');
-          setData([]);
-        }
-        
-        setLoading(false);
-      } catch (err) {
-        setError(err as Error);
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, [dataConfig, dataSource, hasInlineData, schema.filter, schema.sort, objectSchema]);
-
-  // Fetch object schema for field metadata
-  useEffect(() => {
-    const fetchObjectSchema = async () => {
-      try {
-        if (!dataSource) return;
-        
-        const objectName = dataConfig?.provider === 'object' 
-          ? dataConfig.object 
-          : schema.objectName;
-          
-        if (!objectName) return;
-        
-        const schemaData = await dataSource.getObjectSchema(objectName);
-        setObjectSchema(schemaData);
-      } catch (err) {
-        console.error('Failed to fetch object schema:', err);
-      }
-    };
-
-    if (!hasInlineData && dataSource) {
-      fetchObjectSchema();
-    }
-  }, [schema.objectName, dataSource, hasInlineData, dataConfig]);
-
-  // Transform data to gantt tasks
-  const tasks = useMemo(() => {
-    if (!ganttConfig || !data.length) {
-      return [];
-    }
-
-    const { startDateField, endDateField, titleField, progressField, dependenciesField, colorField } = ganttConfig;
-
-    return data.map((record, index) => {
-      const startDate = record[startDateField];
-      const endDate = record[endDateField];
-      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}`,
-        title,
-        start: startDate ? new Date(startDate) : new Date(),
-        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]);
-
-  const navigation = useNavigationOverlay({
-    navigation: (schema as any).navigation,
-    objectName: schema.objectName,
-    onRowClick,
-  });
-
-  if (loading) {
-    return (
-      <div className={className}>
-        <div className="flex items-center justify-center h-96">
-          <div className="text-muted-foreground">Loading Gantt chart...</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className={className}>
-        <div className="flex items-center justify-center h-96">
-          <div className="text-destructive">Error: {error.message}</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (!ganttConfig) {
-    return (
-      <div className={className}>
-        <div className="flex items-center justify-center h-96">
-          <div className="text-muted-foreground">
-            Gantt configuration required. Please specify startDateField, endDateField, and titleField.
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={className}>
-      <div className="h-[calc(100vh-200px)] min-h-[600px]">
-        <GanttView 
-          tasks={tasks}
-          onTaskClick={(task) => {
-            navigation.handleClick(task.data);
-            onTaskClick?.(task.data);
-          }}
-          onAddClick={() => {
-            // Placeholder for add action
-          }}
-        />
-      </div>
-      {navigation.isOverlay && (
-        <NavigationOverlay {...navigation} title="Task Details">
-          {(record) => (
-            <div className="space-y-3">
-              {Object.entries(record).map(([key, value]) => (
-                <div key={key} className="flex flex-col">
-                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
-                    {key.replace(/_/g, ' ')}
-                  </span>
-                  <span className="text-sm">{String(value ?? '—')}</span>
-                </div>
-              ))}
-            </div>
-          )}
-        </NavigationOverlay>
-      )}
-    </div>
-  );
-};

package/src/__tests__/GanttView.test.tsx

@@ -1,69 +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, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import { GanttView, type GanttTask } from '../GanttView';
-
-const mockTasks: GanttTask[] = [
-  {
-    id: '1',
-    title: 'Design Phase',
-    start: new Date('2024-01-15'),
-    end: new Date('2024-02-15'),
-    progress: 75,
-  },
-  {
-    id: '2',
-    title: 'Development',
-    start: new Date('2024-02-01'),
-    end: new Date('2024-03-15'),
-    progress: 30,
-  },
-];
-
-describe('GanttView accessibility', () => {
-  it('renders aria-label on navigation buttons', () => {
-    render(<GanttView tasks={mockTasks} />);
-    expect(screen.getByLabelText('Previous period')).toBeInTheDocument();
-    expect(screen.getByLabelText('Next period')).toBeInTheDocument();
-  });
-
-  it('renders aria-label on zoom buttons', () => {
-    render(<GanttView tasks={mockTasks} />);
-    expect(screen.getByLabelText('Zoom out')).toBeInTheDocument();
-    expect(screen.getByLabelText('Zoom in')).toBeInTheDocument();
-  });
-
-  it('renders aria-label on create button', () => {
-    render(<GanttView tasks={mockTasks} />);
-    expect(screen.getByLabelText('Create new task')).toBeInTheDocument();
-  });
-});
-
-describe('GanttView mobile date badge', () => {
-  it('renders date range text below task title', () => {
-    render(<GanttView tasks={mockTasks} />);
-    // The mobile date badge shows start → end dates
-    const startDate = mockTasks[0].start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
-    const endDate = mockTasks[0].end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
-    const dateText = `${startDate} → ${endDate}`;
-    expect(screen.getByText(dateText)).toBeInTheDocument();
-  });
-
-  it('renders mobile date badge with sm:hidden class', () => {
-    render(<GanttView tasks={mockTasks} />);
-    const startDate = mockTasks[0].start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
-    const endDate = mockTasks[0].end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' });
-    const dateText = `${startDate} → ${endDate}`;
-    const badge = screen.getByText(dateText);
-    expect(badge.className).toContain('sm:hidden');
-  });
-});

package/src/index.test.tsx

@@ -1,25 +0,0 @@
-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

@@ -1,45 +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 { 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
-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: '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, percentageField, colorField, dependenciesField' },
-  ],
-});

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "dist",
-    "jsx": "react-jsx",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
-    "noEmit": false,
-    "declaration": true,
-    "composite": true,
-    "declarationMap": true,
-    "skipLibCheck": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx", "**/*.stories.tsx"]
-}

package/vite.config.ts

@@ -1,54 +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 { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
-import dts from 'vite-plugin-dts';
-import { resolve } from 'path';
-
-export default defineConfig({
-  plugins: [
-    react(),
-    dts({
-      insertTypesEntry: true,
-      compilerOptions: { rootDir: resolve(__dirname, '../..') },
-      include: ['src'],
-      exclude: ['**/*.test.ts', '**/*.test.tsx', 'node_modules'],
-      skipDiagnostics: true,
-    }),
-  ],
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
-    },
-  },
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.tsx'),
-      name: 'ObjectUIPluginGantt',
-      fileName: 'index',
-    },
-    rollupOptions: {
-      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', '@object-ui/types', 'lucide-react'],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          '@object-ui/components': 'ObjectUIComponents',
-          '@object-ui/core': 'ObjectUICore',
-          '@object-ui/react': 'ObjectUIReact',
-          '@object-ui/types': 'ObjectUITypes',
-          'lucide-react': 'LucideReact',
-        },
-      },
-    },
-  },
-  test: {
-    passWithNoTests: true,
-  },
-});

package/vitest.config.ts

@@ -1,13 +0,0 @@
-/// <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

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