@object-ui/plugin-kanban 0.3.0 → 0.5.0

package/src/ObjectKanban.msw.test.tsx

@@ -0,0 +1,91 @@
+import { describe, it, expect, vi, beforeAll, afterAll, afterEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ObjectKanban } from './ObjectKanban';
+import { ObjectStackAdapter } from '@object-ui/data-objectstack';
+import { setupServer } from 'msw/node';
+import { http, HttpResponse } from 'msw';
+import React from 'react';
+
+// Register layout components (if needed by cards)
+// registerLayout();
+
+const BASE_URL = 'http://localhost';
+
+// --- Mock Data ---
+
+const mockTasks = {
+  value: [
+    { _id: '1', title: 'Task 1', status: 'todo', description: 'Description 1' },
+    { _id: '2', title: 'Task 2', status: 'done', description: 'Description 2' },
+    { _id: '3', title: 'Task 3', status: 'todo', description: 'Description 3' }
+  ]
+};
+
+// --- MSW Setup ---
+
+const handlers = [
+  // OPTIONS handler for CORS preflight checks
+  http.options('*', () => {
+    return new HttpResponse(null, { status: 200 });
+  }),
+
+  // Health check
+  http.get(`${BASE_URL}/api/v1`, () => {
+    return HttpResponse.json({ status: 'ok', version: '1.0.0' });
+  }),
+
+  // Data Query: GET /api/v1/data/tasks
+  http.get(`${BASE_URL}/api/v1/data/tasks`, () => {
+    return HttpResponse.json(mockTasks);
+  })
+];
+
+const server = setupServer(...handlers);
+
+// --- Test Suite ---
+
+describe('ObjectKanban with MSW', () => {
+  if (!process.env.OBJECTSTACK_API_URL) {
+    beforeAll(() => server.listen());
+    afterEach(() => server.resetHandlers());
+    afterAll(() => server.close());
+  }
+
+  const dataSource = new ObjectStackAdapter({
+    baseUrl: BASE_URL,
+  });
+
+  it('fetches tasks and renders them in columns based on groupBy', async () => {
+    render(
+      <ObjectKanban
+        schema={{
+          type: 'kanban',
+          objectName: 'tasks',
+          groupBy: 'status',
+          columns: [
+            { id: 'todo', title: 'To Do', cards: [] },
+            { id: 'done', title: 'Done', cards: [] }
+          ]
+        }}
+        dataSource={dataSource}
+      />
+    );
+
+    // Initial state might show Skeleton, wait for data
+    await waitFor(() => {
+        expect(screen.getByText('Task 1')).toBeInTheDocument();
+    }, { timeout: 10000 });
+
+    // Check classification
+    // Task 1 (todo) and Task 3 (todo) should be in To Do column.
+    // Task 2 (done) should be in Done column.
+    
+    // We can verify "Task 1" is present.
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+    expect(screen.getByText('Task 3')).toBeInTheDocument();
+    
+    // Check descriptions
+    expect(screen.getByText('Description 1')).toBeInTheDocument();
+  });
+});

package/src/ObjectKanban.tsx

@@ -0,0 +1,188 @@
+/**
+ * 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, { useEffect, useState, useMemo } from 'react';
+import type { DataSource } from '@object-ui/types';
+import { useDataScope } from '@object-ui/react';
+import { KanbanRenderer } from './index';
+import { KanbanSchema } from './types';
+
+export interface ObjectKanbanProps {
+  schema: KanbanSchema;
+  dataSource?: DataSource;
+  className?: string; // Allow override
+}
+
+export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
+  schema,
+  dataSource,
+  className,
+  ...props
+}) => {
+  const [fetchedData, setFetchedData] = useState<any[]>([]);
+  const [objectDef, setObjectDef] = useState<any>(null);
+  // loading state
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Resolve bound data if 'bind' property exists
+  const boundData = useDataScope(schema.bind);
+
+  // Fetch object definition for metadata (labels, options)
+  useEffect(() => {
+    let isMounted = true;
+    const fetchMeta = async () => {
+        if (!dataSource || !schema.objectName) return;
+        try {
+            const def = await dataSource.getObjectSchema(schema.objectName);
+            if (isMounted) setObjectDef(def);
+        } catch (e) {
+            console.warn("Failed to fetch object def", e);
+        }
+    };
+    fetchMeta();
+    return () => { isMounted = false; };
+  }, [schema.objectName, dataSource]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const fetchData = async () => {
+        if (!dataSource || !schema.objectName) return;
+        if (isMounted) setLoading(true);
+        try {
+            const results = await dataSource.find(schema.objectName, {
+                options: { $top: 100 },
+                $filter: schema.filter
+            });
+            
+            // Handle { value: [] } OData shape or { data: [] } shape or direct array
+            let data: any[] = [];
+            if (Array.isArray(results)) {
+                data = results;
+            } else if (results && typeof results === 'object') {
+                if (Array.isArray((results as any).value)) {
+                    data = (results as any).value;
+                } else if (Array.isArray((results as any).data)) {
+                    data = (results as any).data;
+                }
+            }
+
+            console.log(`[ObjectKanban] Extracted data (length: ${data.length})`);
+
+            if (isMounted) {
+                setFetchedData(data);
+            }
+        } catch (e) {
+            console.error('[ObjectKanban] Fetch error:', e);
+            if (isMounted) setError(e as Error);
+        } finally {
+            if (isMounted) setLoading(false);
+        }
+    };
+
+    // Trigger fetch if we have an objectName AND verify no inline/bound data overrides it
+    // And NO props.data passed from ListView
+    if (schema.objectName && !boundData && !schema.data && !(props as any).data) {
+        fetchData();
+    }
+    return () => { isMounted = false; };
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, (props as any).data]);
+
+  // Determine which data to use: props.data -> bound -> inline -> fetched
+  const rawData = (props as any).data || boundData || schema.data || fetchedData;
+
+  // Enhance data with title mapping and ensure IDs
+  const effectiveData = useMemo(() => {
+    if (!Array.isArray(rawData)) return [];
+    
+    // Support cardTitle property from schema (passed by ObjectView)
+    // Fallback to legacy titleField for backwards compatibility
+    let titleField = schema.cardTitle || (schema as any).titleField;
+
+    // Fallback: Try to infer from object definition
+    if (!titleField && objectDef) {
+       // 1. Check for titleFormat like "{subject}" first (Higher priority for Cards)
+       if (objectDef.titleFormat) {
+           const match = /\{(.+?)\}/.exec(objectDef.titleFormat);
+           if (match) titleField = match[1];
+       }
+       // 2. Check for standard NAME_FIELD_KEY
+       if (!titleField && objectDef.NAME_FIELD_KEY) {
+           titleField = objectDef.NAME_FIELD_KEY;
+       } 
+    }
+
+    // Default to 'name'
+    const finalTitleField = titleField || 'name';
+    
+    return rawData.map(item => ({
+      ...item,
+      // Ensure id exists
+      id: item.id || item._id,
+      // Map title
+      title: item[finalTitleField] || item.title || 'Untitled',
+    }));
+  }, [rawData, schema, objectDef]);
+
+  // Generate columns if missing but groupBy is present
+  const effectiveColumns = useMemo(() => {
+    // If columns exist, returns them (normalized)
+    if (schema.columns && schema.columns.length > 0) {
+        // If columns is array of strings, normalize to objects
+        if (typeof schema.columns[0] === 'string') {
+             // If grouping is active, assume string columns are meant for data display, not lanes
+             if (!schema.groupBy) {
+                 return (schema.columns as unknown as string[]).map(val => ({
+                     id: val,
+                     title: val
+                 }));
+             }
+        } else {
+             return schema.columns;
+        }
+    }
+
+    // Try to get options from metadata
+    if (schema.groupBy && objectDef?.fields?.[schema.groupBy]?.options) {
+        return objectDef.fields[schema.groupBy].options.map((opt: any) => ({
+            id: opt.value,
+            title: opt.label
+        }));
+    }
+
+    // If no columns, but we have groupBy and data, generate from data
+    if (schema.groupBy && effectiveData.length > 0) {
+        const groups = new Set(effectiveData.map(item => item[schema.groupBy!]));
+        return Array.from(groups).map(g => ({
+            id: String(g),
+            title: String(g)
+        }));
+    }
+
+    return [];
+  }, [schema.columns, schema.groupBy, effectiveData, objectDef]);
+
+  // Clone schema to inject data and className
+  const effectiveSchema = {
+      ...schema,
+      data: effectiveData,
+      columns: effectiveColumns,
+      className: className || schema.className
+  };
+
+  if (error) {
+      return (
+        <div className="p-4 border border-destructive/50 rounded bg-destructive/10 text-destructive">
+            Error loading kanban data: {error.message}
+        </div>
+      );
+  }
+
+  // Pass through to the renderer
+  return <KanbanRenderer schema={effectiveSchema} />;
+}

package/src/__tests__/KanbanEnhanced.test.tsx

@@ -0,0 +1,259 @@
+/**
+ * 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 { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { KanbanEnhanced, type KanbanColumn } from '../KanbanEnhanced';
+
+// Mock @tanstack/react-virtual
+vi.mock('@tanstack/react-virtual', () => ({
+  useVirtualizer: () => ({
+    getTotalSize: () => 1000,
+    getVirtualItems: () => [],
+    measureElement: vi.fn(),
+  }),
+}));
+
+// Mock @dnd-kit/core and utilities
+vi.mock('@dnd-kit/core', () => ({
+  DndContext: ({ children }: any) => <div data-testid="dnd-context">{children}</div>,
+  DragOverlay: ({ children }: any) => <div data-testid="drag-overlay">{children}</div>,
+  PointerSensor: vi.fn(),
+  useSensor: vi.fn(),
+  useSensors: () => [],
+  closestCorners: vi.fn(),
+}));
+
+vi.mock('@dnd-kit/sortable', () => ({
+  SortableContext: ({ children }: any) => <div data-testid="sortable-context">{children}</div>,
+  useSortable: () => ({
+    attributes: {},
+    listeners: {},
+    setNodeRef: vi.fn(),
+    transform: null,
+    transition: null,
+    isDragging: false,
+  }),
+  arrayMove: (array: any[], from: number, to: number) => {
+    const newArray = [...array];
+    newArray.splice(to, 0, newArray.splice(from, 1)[0]);
+    return newArray;
+  },
+  verticalListSortingStrategy: vi.fn(),
+}));
+
+vi.mock('@dnd-kit/utilities', () => ({
+  CSS: {
+    Transform: {
+      toString: () => '',
+    },
+  },
+}));
+
+describe('KanbanEnhanced', () => {
+  const mockColumns: KanbanColumn[] = [
+    {
+      id: 'todo',
+      title: 'To Do',
+      cards: [
+        {
+          id: 'card-1',
+          title: 'Task 1',
+          description: 'Description 1',
+          badges: [{ label: 'High', variant: 'destructive' }],
+        },
+        {
+          id: 'card-2',
+          title: 'Task 2',
+          description: 'Description 2',
+        },
+      ],
+    },
+    {
+      id: 'in-progress',
+      title: 'In Progress',
+      limit: 3,
+      cards: [
+        {
+          id: 'card-3',
+          title: 'Task 3',
+        },
+      ],
+    },
+    {
+      id: 'done',
+      title: 'Done',
+      cards: [],
+    },
+  ];
+
+  it('should render without crashing', () => {
+    const { container } = render(<KanbanEnhanced columns={mockColumns} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render all columns', () => {
+    render(<KanbanEnhanced columns={mockColumns} />);
+    
+    expect(screen.getByText('To Do')).toBeInTheDocument();
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+    expect(screen.getByText('Done')).toBeInTheDocument();
+  });
+
+  it('should render all cards', () => {
+    render(<KanbanEnhanced columns={mockColumns} />);
+    
+    expect(screen.getByText('Task 1')).toBeInTheDocument();
+    expect(screen.getByText('Task 2')).toBeInTheDocument();
+    expect(screen.getByText('Task 3')).toBeInTheDocument();
+  });
+
+  it('should display card count for each column', () => {
+    render(<KanbanEnhanced columns={mockColumns} />);
+    
+    // Columns should show card counts in the format "count" or "count / limit"
+    expect(screen.getByText('To Do')).toBeInTheDocument();
+    expect(screen.getByText('In Progress')).toBeInTheDocument();
+    expect(screen.getByText('1 / 3')).toBeInTheDocument(); // In Progress has 1 card with limit 3
+  });
+
+  it('should display column limit warning when at 80% capacity', () => {
+    const columnsNearLimit: KanbanColumn[] = [
+      {
+        id: 'limited',
+        title: 'Limited Column',
+        limit: 5,
+        cards: Array(4).fill(null).map((_, i) => ({
+          id: `card-${i}`,
+          title: `Task ${i}`,
+        })),
+      },
+    ];
+    
+    const { container } = render(<KanbanEnhanced columns={columnsNearLimit} />);
+    
+    // Should show warning indicator (80% of 5 = 4) - AlertTriangle icon with yellow color
+    expect(container.querySelector('.text-yellow-500')).toBeTruthy();
+  });
+
+  it('should collapse/expand columns when toggle button is clicked', () => {
+    render(<KanbanEnhanced columns={mockColumns} enableCollapse={true} />);
+    
+    // Find collapse toggle button (chevron icons)
+    const toggleButtons = screen.getAllByRole('button');
+    const collapseButton = toggleButtons.find(btn => 
+      btn.querySelector('svg') !== null
+    );
+    
+    if (collapseButton) {
+      fireEvent.click(collapseButton);
+      // After clicking, the column state would change
+      // In a real test with proper DOM, we would verify:
+      // - Column content is hidden
+      // - Icon changes from ChevronDown to ChevronRight
+      expect(collapseButton).toBeTruthy();
+    }
+  });
+
+  it('should call onCardMove when a card is moved', () => {
+    const onCardMove = vi.fn();
+    render(<KanbanEnhanced columns={mockColumns} onCardMove={onCardMove} />);
+    
+    // In our mocked environment with mocked dnd-kit,
+    // we can't easily simulate the full drag and drop interaction.
+    // In a real integration test, this would verify:
+    // - Dragging a card from one column to another
+    // - onCardMove is called with correct parameters (cardId, fromColumn, toColumn)
+    expect(onCardMove).toBeDefined();
+    
+    // Example of what the callback would receive:
+    // expect(onCardMove).toHaveBeenCalledWith('card-1', 'todo', 'in-progress');
+  });
+
+  it('should call onColumnToggle when a column is collapsed', () => {
+    const onColumnToggle = vi.fn();
+    render(
+      <KanbanEnhanced
+        columns={mockColumns}
+        enableCollapse={true}
+        onColumnToggle={onColumnToggle}
+      />
+    );
+    
+    expect(onColumnToggle).toBeDefined();
+  });
+
+  it('should render card badges', () => {
+    render(<KanbanEnhanced columns={mockColumns} />);
+    
+    expect(screen.getByText('High')).toBeInTheDocument();
+  });
+
+  it('should render card descriptions', () => {
+    render(<KanbanEnhanced columns={mockColumns} />);
+    
+    expect(screen.getByText('Description 1')).toBeInTheDocument();
+    expect(screen.getByText('Description 2')).toBeInTheDocument();
+  });
+
+  it('should apply custom className', () => {
+    const { container } = render(
+      <KanbanEnhanced columns={mockColumns} className="custom-class" />
+    );
+    
+    const kanbanContainer = container.querySelector('.custom-class');
+    expect(kanbanContainer).toBeTruthy();
+  });
+
+  it('should render empty columns', () => {
+    render(<KanbanEnhanced columns={mockColumns} />);
+    
+    // "Done" column has 0 cards
+    expect(screen.getByText('Done')).toBeInTheDocument();
+  });
+
+  it('should enable virtual scrolling when specified', () => {
+    render(<KanbanEnhanced columns={mockColumns} enableVirtualScrolling={true} />);
+    
+    // Virtual scrolling should be active
+    const { container } = render(<KanbanEnhanced columns={mockColumns} enableVirtualScrolling={true} />);
+    expect(container).toBeTruthy();
+  });
+
+  it('should render drag overlay when dragging', () => {
+    const { container } = render(<KanbanEnhanced columns={mockColumns} />);
+    
+    const dragOverlay = container.querySelector('[data-testid="drag-overlay"]');
+    expect(dragOverlay).toBeTruthy();
+  });
+
+  it('should show error state when column is over limit', () => {
+    const columnsOverLimit: KanbanColumn[] = [
+      {
+        id: 'limited',
+        title: 'Over Limit',
+        limit: 3,
+        cards: Array(4).fill(null).map((_, i) => ({
+          id: `card-${i}`,
+          title: `Task ${i}`,
+        })),
+      },
+    ];
+    
+    render(<KanbanEnhanced columns={columnsOverLimit} />);
+    
+    // Should show error indicator (over 100% of limit)
+    const { container } = render(<KanbanEnhanced columns={columnsOverLimit} />);
+    expect(container.querySelector('[class*="destructive"]')).toBeTruthy();
+  });
+
+  it('should handle empty columns array', () => {
+    const { container } = render(<KanbanEnhanced columns={[]} />);
+    expect(container).toBeTruthy();
+  });
+});

package/src/index.test.ts

@@ -1,3 +1,11 @@
+/**
+ * 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 { describe, it, expect, beforeAll } from 'vitest';
 import { ComponentRegistry } from '@object-ui/core';
 
@@ -5,7 +13,7 @@ describe('Plugin Kanban', () => {
   // Import all renderers to register them
   beforeAll(async () => {
     await import('./index');
-  });
+  }, 15000); // Increase timeout to 15 seconds for async import
 
   describe('kanban component', () => {
     it('should be registered in ComponentRegistry', () => {

package/src/index.tsx

@@ -1,13 +1,25 @@
+/**
+ * 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, { Suspense } from 'react';
 import { ComponentRegistry } from '@object-ui/core';
+import { useSchemaContext } from '@object-ui/react';
 import { Skeleton } from '@object-ui/components';
+import { ObjectKanban } from './ObjectKanban';
 
 // Export types for external use
 export type { KanbanSchema, KanbanCard, KanbanColumn } from './types';
+export { ObjectKanban };
+export type { ObjectKanbanProps } from './ObjectKanban';
 
-// 🚀 Lazy load the implementation file
-// This ensures @dnd-kit is only loaded when the component is actually rendered
+// 🚀 Lazy load the implementation files
 const LazyKanban = React.lazy(() => import('./KanbanImpl'));
+const LazyKanbanEnhanced = React.lazy(() => import('./KanbanEnhanced'));
 
 export interface KanbanRendererProps {
   schema: {
@@ -70,6 +82,7 @@ ComponentRegistry.register(
   'kanban',
   KanbanRenderer,
   {
+    namespace: 'plugin-kanban',
     label: 'Kanban Board',
     icon: 'LayoutDashboard',
     category: 'plugin',
@@ -165,4 +178,82 @@ ComponentRegistry.register(
 // Standard Export Protocol - for manual integration
 export const kanbanComponents = {
   'kanban': KanbanRenderer,
+  'kanban-enhanced': LazyKanbanEnhanced,
+  'object-kanban': ObjectKanban,
 };
+
+// Register enhanced Kanban
+ComponentRegistry.register(
+  'kanban-enhanced',
+  ({ schema }: { schema: any }) => {
+    const processedColumns = React.useMemo(() => {
+      const { columns = [], data, groupBy } = schema;
+      if (data && groupBy && Array.isArray(data)) {
+        const groups = data.reduce((acc, item) => {
+          const key = item[groupBy];
+          if (!acc[key]) acc[key] = [];
+          acc[key].push(item);
+          return acc;
+        }, {} as Record<string, any[]>);
+        return columns.map((col: any) => ({
+          ...col,
+          cards: [...(col.cards || []), ...(groups[col.id] || [])]
+        }));
+      }
+      return columns;
+    }, [schema]);
+
+    return (
+      <Suspense fallback={<Skeleton className="w-full h-[600px]" />}>
+        <LazyKanbanEnhanced
+          columns={processedColumns}
+          onCardMove={schema.onCardMove}
+          onColumnToggle={schema.onColumnToggle}
+          enableVirtualScrolling={schema.enableVirtualScrolling}
+          virtualScrollThreshold={schema.virtualScrollThreshold}
+          className={schema.className}
+        />
+      </Suspense>
+    );
+  },
+  {
+    namespace: 'plugin-kanban',
+    label: 'Kanban Board (Enhanced)',
+    icon: 'LayoutGrid',
+    category: 'plugin',
+    inputs: [
+      { name: 'columns', type: 'array', label: 'Columns', required: true },
+      { name: 'enableVirtualScrolling', type: 'boolean', label: 'Virtual Scrolling', defaultValue: false },
+      { name: 'virtualScrollThreshold', type: 'number', label: 'Virtual Scroll Threshold', defaultValue: 50 },
+      { name: 'onCardMove', type: 'code', label: 'On Card Move', advanced: true },
+      { name: 'onColumnToggle', type: 'code', label: 'On Column Toggle', advanced: true },
+      { name: 'className', type: 'string', label: 'CSS Class' }
+    ],
+    defaultProps: {
+      columns: [],
+      enableVirtualScrolling: false,
+      virtualScrollThreshold: 50,
+      className: 'w-full'
+    }
+  }
+);
+
+// Register object-kanban for ListView integration
+export const ObjectKanbanRenderer: React.FC<{ schema: any; [key: string]: any }> = ({ schema, ...props }) => {
+  const { dataSource } = useSchemaContext() || {};
+  return <ObjectKanban schema={schema} dataSource={dataSource} {...props} />;
+};
+
+ComponentRegistry.register(
+  'object-kanban',
+  ObjectKanbanRenderer,
+  {
+    namespace: 'plugin-kanban',
+    label: 'Object Kanban',
+    category: 'plugin',
+    inputs: [
+      { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+      { name: 'columns', type: 'array', label: 'Columns' }
+    ]
+  }
+);