@object-ui/plugin-gantt 2.0.0 → 3.0.0

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

@@ -1 +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"}
+{"version":3,"file":"GanttView.d.ts","sourceRoot":"","sources":["../../src/GanttView.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAmCH,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,2CAqRhB"}

package/dist/src/ObjectGantt.d.ts

@@ -5,6 +5,7 @@ export interface ObjectGanttProps {
     dataSource?: DataSource;
     className?: string;
     onTaskClick?: (record: any) => void;
+    onRowClick?: (record: any) => void;
     onEdit?: (record: any) => void;
     onDelete?: (record: any) => void;
 }

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;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"}
+{"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;AAM5F,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,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,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,CAyMlD,CAAC"}

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

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<{
+        schema: import('@object-ui/core').SchemaNode;
+    } & Record<string, any>, "ref"> & import('react').RefAttributes<any>>;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        schema: {
+            table: {
+                disable: true;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SimpleTimeline: Story;
+//# sourceMappingURL=ObjectGantt.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ObjectGantt.stories.d.ts","sourceRoot":"","sources":["../../src/ObjectGantt.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAUW,CAAC;AAEtB,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAUnC,eAAO,MAAM,OAAO,EAAE,KA+DrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkB5B,CAAC"}

package/package.json

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

package/src/GanttView.tsx

@@ -30,9 +30,15 @@ import {
 } from "@object-ui/components"
 
 const HEADER_HEIGHT = 50;
-const ROW_HEIGHT = 40;
 const COLUMN_WIDTH = 100; // Time column width
 
+function getResponsiveColumnWidth() {
+  const w = typeof window !== 'undefined' ? window.innerWidth : 1024;
+  if (w < 640) return 35;
+  if (w < 1024) return 50;
+  return 60;
+}
+
 export interface GanttTask {
   id: string | number
   title: string
@@ -68,7 +74,19 @@ export function GanttView({
   className
 }: GanttViewProps) {
   const [currentDate, setCurrentDate] = React.useState(new Date());
-  const [columnWidth, setColumnWidth] = React.useState(60);
+  const [rowHeight, setRowHeight] = React.useState(
+    typeof window !== 'undefined' && window.innerWidth < 640 ? 32 : 40
+  );
+  const [columnWidth, setColumnWidth] = React.useState(getResponsiveColumnWidth());
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setRowHeight(window.innerWidth < 640 ? 32 : 40);
+      setColumnWidth(getResponsiveColumnWidth());
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
   
   // Calculate timeline range
   const timelineRange = React.useMemo(() => {
@@ -147,27 +165,28 @@ export function GanttView({
   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 flex-col sm:flex-row items-start sm:items-center justify-between gap-2 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 variant="outline" size="sm" onClick={() => onAddClick?.()} aria-label="Create new task">
+            <Plus className="h-4 w-4 mr-1 sm:mr-2" />
+            <span className="hidden sm:inline">New Task</span>
+            <span className="sm:hidden">New</span>
           </Button>
-          <div className="h-4 w-px bg-border mx-2" />
+          <div className="h-4 w-px bg-border mx-1 sm: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">
+          <span className="font-semibold text-xs sm: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">
+            <SelectTrigger className="w-[100px] sm:w-[120px] h-8">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -178,10 +197,10 @@ export function GanttView({
             </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))}>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.max(15, 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))}>
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setColumnWidth(prev => Math.min(120, prev + 10))}>
               <ZoomIn className="h-3 w-3" />
             </Button>
           </div>
@@ -191,15 +210,15 @@ export function GanttView({
       {/* 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]">
+        <div className="flex border-b bg-muted/30 shrink-0 h-10 sm: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"
+            className="flex items-center font-medium text-xs text-muted-foreground px-2 sm: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 className="w-16 sm:w-20 text-right hidden sm:block">Start</div>
+            <div className="w-16 sm:w-20 text-right hidden sm:block">End</div>
           </div>
           
           {/* Timeline Header */}
@@ -235,21 +254,21 @@ export function GanttView({
             {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 }}
+                className="flex items-center border-b px-2 sm:px-4 hover:bg-accent/50 cursor-pointer transition-colors touch-manipulation"
+                style={{ height: rowHeight }}
                 onClick={() => onTaskClick?.(task)}
               >
-                <div className="flex-1 truncate font-medium text-sm flex items-center gap-2">
+                <div className="flex-1 truncate font-medium text-xs sm:text-sm flex items-center gap-2">
                   <div 
-                    className="w-2 h-2 rounded-full"
+                    className="w-2 h-2 rounded-full shrink-0"
                     style={{ backgroundColor: task.color || '#3b82f6' }} 
                   />
                   {task.title}
                 </div>
-                <div className="w-20 text-right text-xs text-muted-foreground">
+                <div className="w-16 sm:w-20 text-right text-xs text-muted-foreground hidden sm:block">
                   {task.start.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
                 </div>
-                <div className="w-20 text-right text-xs text-muted-foreground">
+                <div className="w-16 sm:w-20 text-right text-xs text-muted-foreground hidden sm:block">
                   {task.end.toLocaleDateString(undefined, { month: 'numeric', day: 'numeric' })}
                 </div>
               </div>
@@ -258,7 +277,7 @@ export function GanttView({
 
           {/* Right Side: Timeline */}
           <div 
-            className="flex-1 overflow-auto bg-background/50 relative" 
+            className="flex-1 overflow-auto bg-background/50 relative [-webkit-overflow-scrolling:touch]" 
             ref={timelineRef}
             onScroll={handleScroll}
           >
@@ -286,10 +305,10 @@ export function GanttView({
                     <div 
                       key={task.id}
                       className="relative border-b hover:bg-black/5"
-                      style={{ height: ROW_HEIGHT }}
+                      style={{ height: rowHeight }}
                     >
                       <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"
+                        className="absolute top-1 sm:top-2 h-[calc(100%-8px)] sm: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,

package/src/ObjectGantt.stories.tsx

@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer, SchemaRendererProvider } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+import { createStorybookDataSource } from '@storybook-config/datasource';
+
+const meta = {
+  title: 'Plugins/ObjectGantt',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const dataSource = createStorybookDataSource();
+
+const renderStory = (args: any) => (
+  <SchemaRendererProvider dataSource={dataSource}>
+    <SchemaRenderer schema={args as unknown as BaseSchema} />
+  </SchemaRendererProvider>
+);
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-gantt',
+    objectName: 'Project',
+    gantt: {
+      startDateField: 'startDate',
+      endDateField: 'endDate',
+      titleField: 'name',
+      progressField: 'progress',
+      dependenciesField: 'dependencies',
+    },
+    tasks: [
+      {
+        id: '1',
+        name: 'Requirements Gathering',
+        startDate: '2024-01-01',
+        endDate: '2024-01-20',
+        progress: 100,
+      },
+      {
+        id: '2',
+        name: 'System Design',
+        startDate: '2024-01-15',
+        endDate: '2024-02-10',
+        progress: 80,
+        dependencies: ['1'],
+      },
+      {
+        id: '3',
+        name: 'Frontend Development',
+        startDate: '2024-02-01',
+        endDate: '2024-04-15',
+        progress: 45,
+        dependencies: ['2'],
+      },
+      {
+        id: '4',
+        name: 'Backend Development',
+        startDate: '2024-02-01',
+        endDate: '2024-04-30',
+        progress: 35,
+        dependencies: ['2'],
+      },
+      {
+        id: '5',
+        name: 'QA Testing',
+        startDate: '2024-04-15',
+        endDate: '2024-05-30',
+        progress: 0,
+        dependencies: ['3', '4'],
+      },
+      {
+        id: '6',
+        name: 'Deployment',
+        startDate: '2024-05-25',
+        endDate: '2024-06-10',
+        progress: 0,
+        dependencies: ['5'],
+      },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+export const SimpleTimeline: Story = {
+  render: renderStory,
+  args: {
+    type: 'object-gantt',
+    objectName: 'Milestone',
+    gantt: {
+      startDateField: 'start',
+      endDateField: 'end',
+      titleField: 'title',
+    },
+    tasks: [
+      { id: '1', title: 'Phase 1: Planning', start: '2024-01-01', end: '2024-02-28' },
+      { id: '2', title: 'Phase 2: Development', start: '2024-03-01', end: '2024-06-30' },
+      { id: '3', title: 'Phase 3: Testing', start: '2024-07-01', end: '2024-08-31' },
+      { id: '4', title: 'Phase 4: Launch', start: '2024-09-01', end: '2024-09-30' },
+    ],
+    className: 'w-full',
+  } as any,
+};

package/src/ObjectGantt.tsx

@@ -25,6 +25,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 { useNavigationOverlay } from '@object-ui/react';
+import { NavigationOverlay } from '@object-ui/components';
 import { GanttView, type GanttTask } from './GanttView';
 
 export interface ObjectGanttProps {
@@ -32,6 +34,7 @@ export interface ObjectGanttProps {
   dataSource?: DataSource;
   className?: string;
   onTaskClick?: (record: any) => void;
+  onRowClick?: (record: any) => void;
   onEdit?: (record: any) => void;
   onDelete?: (record: any) => void;
 }
@@ -128,6 +131,7 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
   dataSource,
   className,
   onTaskClick,
+  onRowClick,
   ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
@@ -180,8 +184,8 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
           } 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;
+             } else if (Array.isArray((result as any).records)) {
+                items = (result as any).records;
              }
           }
           setData(items);
@@ -253,6 +257,12 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
     }).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}>
@@ -290,12 +300,31 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
       <div className="h-[calc(100vh-200px)] min-h-[600px]">
         <GanttView 
           tasks={tasks}
-          onTaskClick={(task) => onTaskClick?.(task.data)}
+          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>
   );
 };