@object-ui/plugin-timeline 2.0.0 → 3.0.1

package/src/ObjectTimeline.stories.tsx

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/ObjectTimeline',
+  component: SchemaRenderer,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    schema: { table: { disable: true } },
+  },
+} satisfies Meta<any>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const renderStory = (args: any) => <SchemaRenderer schema={args as unknown as BaseSchema} />;
+
+export const Default: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'vertical',
+    dateFormat: 'short',
+    items: [
+      {
+        time: '2024-01-10',
+        title: 'Project Kickoff',
+        description: 'Initial planning and team formation',
+        variant: 'success',
+        icon: '🚀',
+      },
+      {
+        time: '2024-02-15',
+        title: 'Alpha Release',
+        description: 'Internal alpha build delivered',
+        variant: 'info',
+        icon: '📦',
+      },
+      {
+        time: '2024-03-20',
+        title: 'Beta Launch',
+        description: 'Public beta opened to early adopters',
+        variant: 'warning',
+        icon: '⚡',
+      },
+      {
+        time: '2024-05-01',
+        title: 'General Availability',
+        description: 'Official public release',
+        variant: 'success',
+        icon: '🎉',
+      },
+    ],
+  } as any,
+};
+
+export const Horizontal: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'horizontal',
+    dateFormat: 'short',
+    items: [
+      { time: '2024-01-01', title: 'Q1', description: 'Foundation phase', variant: 'default' },
+      { time: '2024-04-01', title: 'Q2', description: 'Growth phase', variant: 'info' },
+      { time: '2024-07-01', title: 'Q3', description: 'Scale phase', variant: 'warning' },
+      { time: '2024-10-01', title: 'Q4', description: 'Optimization phase', variant: 'success' },
+    ],
+  } as any,
+};
+
+export const ActivityFeed: Story = {
+  render: renderStory,
+  args: {
+    type: 'timeline',
+    variant: 'vertical',
+    dateFormat: 'long',
+    items: [
+      {
+        time: '2024-03-15T14:30:00',
+        title: 'Deal Updated',
+        description: 'Stage changed from Proposal to Negotiation',
+        variant: 'info',
+        icon: '📝',
+      },
+      {
+        time: '2024-03-14T10:00:00',
+        title: 'Meeting Logged',
+        description: 'Product demo with stakeholders',
+        variant: 'default',
+        icon: '📅',
+      },
+      {
+        time: '2024-03-12T16:45:00',
+        title: 'Email Sent',
+        description: 'Follow-up proposal sent to client',
+        variant: 'default',
+        icon: '📧',
+      },
+      {
+        time: '2024-03-10T09:00:00',
+        title: 'Deal Created',
+        description: 'New opportunity worth $150,000',
+        variant: 'success',
+        icon: '✨',
+      },
+    ],
+  } as any,
+};

package/src/ObjectTimeline.test.tsx

@@ -4,9 +4,22 @@ import { describe, it, expect, vi } from 'vitest';
 import { ObjectTimeline } from './ObjectTimeline';
 import { DataSource } from '@object-ui/types';
 
-// Mock useDataScope
+// Mock useDataScope and useNavigationOverlay
 vi.mock('@object-ui/react', () => ({
   useDataScope: () => undefined,
+  useNavigationOverlay: () => ({
+    isOverlay: false,
+    handleClick: vi.fn(),
+    selectedRecord: null,
+    isOpen: false,
+    close: vi.fn(),
+    setIsOpen: vi.fn(),
+    mode: 'overlay',
+  }),
+}));
+
+vi.mock('@object-ui/components', () => ({
+  NavigationOverlay: () => null,
 }));
 
 vi.mock('./renderer', () => ({
@@ -47,7 +60,7 @@ describe('ObjectTimeline', () => {
     });
 
     it('fetches data when objectName is provided', async () => {
-        (mockDataSource.find as any).mockResolvedValue({ value: mockData });
+        (mockDataSource.find as any).mockResolvedValue(mockData);
         
         const schema: any = {
             type: 'timeline',

package/src/ObjectTimeline.tsx

@@ -6,9 +6,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useCallback } from 'react';
 import type { DataSource, TimelineSchema } from '@object-ui/types';
-import { useDataScope } from '@object-ui/react';
+import { useDataScope, useNavigationOverlay } from '@object-ui/react';
+import { NavigationOverlay } from '@object-ui/components';
+import { usePullToRefresh } from '@object-ui/mobile';
 import { z } from 'zod';
 import { TimelineRenderer } from './renderer';
 
@@ -43,17 +45,22 @@ export interface ObjectTimelineProps {
   };
   dataSource?: DataSource;
   className?: string;
+  onRowClick?: (record: any) => void;
+  onItemClick?: (record: any) => void;
 }
 
 export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   schema,
   dataSource,
   className,
+  onRowClick,
+  onItemClick,
   ...props
 }) => {
   const [fetchedData, setFetchedData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
+  const [refreshKey, setRefreshKey] = useState(0);
 
   useEffect(() => {
     const result = TimelineExtensionSchema.safeParse(schema);
@@ -73,8 +80,8 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
                 options: { $top: 100 }
             });
             let data = results;
-            if ((results as any).value) {
-                data = (results as any).value;
+            if ((results as any).records) {
+                data = (results as any).records;
             } else if ((results as any).data) {
                 data = (results as any).data;
             }
@@ -93,7 +100,7 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
     if (schema.objectName && !boundData && !schema.items && !(props as any).data) {
         fetchData();
     }
-  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data]);
+  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data, refreshKey]);
 
   const rawData = (props as any).data || boundData || fetchedData;
 
@@ -119,10 +126,30 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
       }));
   }
 
+  const handleRefresh = useCallback(async () => {
+    setRefreshKey(k => k + 1);
+  }, []);
+
+  const { ref: pullRef, isRefreshing, pullDistance } = usePullToRefresh<HTMLDivElement>({
+    onRefresh: handleRefresh,
+    enabled: !!schema.objectName && !!dataSource,
+  });
+
+  const navigation = useNavigationOverlay({
+    navigation: (schema as any).navigation,
+    objectName: schema.objectName,
+    onRowClick: onRowClick ?? onItemClick,
+  });
+
   const effectiveSchema = {
       ...schema,
       items: effectiveItems || [],
-      className: className || schema.className
+      className: className || schema.className,
+      onItemClick: (item: any) => {
+        const record = item._data || item;
+        navigation.handleClick(record);
+        onItemClick?.(record);
+      },
   };
 
   if (error) {
@@ -133,5 +160,33 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
       );
   }
 
-  return <TimelineRenderer schema={effectiveSchema} />;
+  return (
+    <div ref={pullRef} className="relative overflow-auto h-full">
+      {pullDistance > 0 && (
+        <div
+          className="flex items-center justify-center text-xs text-muted-foreground"
+          style={{ height: pullDistance }}
+        >
+          {isRefreshing ? 'Refreshing…' : 'Pull to refresh'}
+        </div>
+      )}
+      <TimelineRenderer schema={effectiveSchema} />
+      {navigation.isOverlay && (
+        <NavigationOverlay {...navigation} title="Timeline Item">
+          {(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/renderer.tsx

@@ -27,7 +27,7 @@ import {
   TimelineGanttBar,
   TimelineGanttBarContent,
 } from './index';
-import { renderChildren } from '@object-ui/components';
+import { renderChildren, cn } from '@object-ui/components';
 
 // Constants
 const MILLISECONDS_PER_WEEK = 7 * 24 * 60 * 60 * 1000;
@@ -98,7 +98,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
       return (
         <Timeline className={className} {...props}>
           {items.map((item: any, index: number) => (
-            <TimelineItem key={index} className={item.className}>
+            <TimelineItem key={index} className={cn(item.className, onItemClick && 'cursor-pointer')} onClick={() => onItemClick?.(item)}>
               <TimelineMarker variant={item.variant || 'default'}>
                 {item.icon && <span className="text-xs">{item.icon}</span>}
               </TimelineMarker>
@@ -110,7 +110,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
                 )}
                 {item.title && <TimelineTitle>{item.title}</TimelineTitle>}
                 {item.description && (
-                  <TimelineDescription>{item.description}</TimelineDescription>
+                  <TimelineDescription className="line-clamp-2 sm:line-clamp-none">{item.description}</TimelineDescription>
                 )}
                 {item.content && renderChildren(item.content)}
               </TimelineContent>
@@ -123,9 +123,9 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
     // Horizontal Timeline
     if (variant === 'horizontal') {
       return (
-        <TimelineHorizontal className={className} {...props}>
+        <TimelineHorizontal className={cn("overflow-x-auto [-webkit-overflow-scrolling:touch]", className)} {...props}>
           {items.map((item: any, index: number) => (
-            <TimelineHorizontalItem key={index} className={item.className}>
+            <TimelineHorizontalItem key={index} className={cn(item.className, onItemClick && 'cursor-pointer')} onClick={() => onItemClick?.(item)}>
               <div className="flex flex-col items-center">
                 <TimelineMarker variant={item.variant || 'default'}>
                   {item.icon && <span className="text-xs">{item.icon}</span>}
@@ -138,7 +138,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
                   )}
                   {item.title && <TimelineTitle>{item.title}</TimelineTitle>}
                   {item.description && (
-                    <TimelineDescription className="text-center">
+                    <TimelineDescription className="text-center line-clamp-2 sm:line-clamp-none">
                       {item.description}
                     </TimelineDescription>
                   )}
@@ -208,11 +208,11 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
       const timeHeaders = generateTimeHeaders();
 
       return (
-        <TimelineGantt className={className} {...props}>
+        <TimelineGantt className={cn("overflow-x-auto [-webkit-overflow-scrolling:touch]", className)} {...props}>
           {/* Header */}
           <TimelineGanttHeader>
-            <TimelineGanttRowLabels className="flex items-center px-4 py-3">
-              <span className="font-semibold text-sm">
+            <TimelineGanttRowLabels className="flex items-center px-2 sm:px-4 py-2 sm:py-3">
+              <span className="font-semibold text-xs sm:text-sm">
                 {schema.rowLabel || 'Items'}
               </span>
             </TimelineGanttRowLabels>
@@ -221,7 +221,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
                 {timeHeaders.map((header, index) => (
                   <div
                     key={index}
-                    className="flex-1 px-2 py-3 border-r text-xs font-medium text-center"
+                    className="flex-1 px-1 sm:px-2 py-2 sm:py-3 border-r text-xs font-medium text-center"
                   >
                     {header}
                   </div>
@@ -236,7 +236,7 @@ export const TimelineRenderer = ({ schema, className, ...props }: { schema: Time
               <TimelineGanttRowLabels>
                 {items.map((row: any, rowIndex: number) => (
                   <TimelineGanttRow key={rowIndex}>
-                    <TimelineGanttLabel title={row.label}>
+                    <TimelineGanttLabel title={row.label} className="truncate">
                       {row.label}
                     </TimelineGanttLabel>
                   </TimelineGanttRow>

package/vite.config.ts

@@ -29,6 +29,7 @@ export default defineConfig({
       '@object-ui/react': resolve(__dirname, '../react/src'),
       '@object-ui/components': resolve(__dirname, '../components/src'),
       '@object-ui/fields': resolve(__dirname, '../fields/src'),
+      '@object-ui/mobile': resolve(__dirname, '../mobile/src'),
       '@object-ui/plugin-dashboard': resolve(__dirname, '../plugin-dashboard/src'),
       '@object-ui/plugin-grid': resolve(__dirname, '../plugin-grid/src'),
     },
@@ -40,7 +41,7 @@ export default defineConfig({
       fileName: 'index',
     },
     rollupOptions: {
-      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react'],
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react', '@object-ui/mobile'],
       output: {
         globals: {
           react: 'React',
@@ -48,6 +49,7 @@ export default defineConfig({
           '@object-ui/components': 'ObjectUIComponents',
           '@object-ui/core': 'ObjectUICore',
           '@object-ui/react': 'ObjectUIReact',
+          '@object-ui/mobile': 'ObjectUIMobile',
         },
       },
     },