@object-ui/plugin-kanban 0.3.0

package/src/index.test.ts

@@ -0,0 +1,104 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { ComponentRegistry } from '@object-ui/core';
+
+describe('Plugin Kanban', () => {
+  // Import all renderers to register them
+  beforeAll(async () => {
+    await import('./index');
+  });
+
+  describe('kanban component', () => {
+    it('should be registered in ComponentRegistry', () => {
+      const kanbanRenderer = ComponentRegistry.get('kanban');
+      expect(kanbanRenderer).toBeDefined();
+    });
+
+    it('should have proper metadata', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      expect(config).toBeDefined();
+      expect(config?.label).toBe('Kanban Board');
+      expect(config?.icon).toBe('LayoutDashboard');
+      expect(config?.category).toBe('plugin');
+      expect(config?.inputs).toBeDefined();
+      expect(config?.defaultProps).toBeDefined();
+    });
+
+    it('should have expected inputs', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      const inputNames = config?.inputs?.map((input: any) => input.name) || [];
+      
+      expect(inputNames).toContain('columns');
+      expect(inputNames).toContain('onCardMove');
+      expect(inputNames).toContain('className');
+    });
+
+    it('should have columns as required input', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      const columnsInput = config?.inputs?.find((input: any) => input.name === 'columns');
+      
+      expect(columnsInput).toBeDefined();
+      expect(columnsInput?.required).toBe(true);
+      expect(columnsInput?.type).toBe('array');
+      expect(columnsInput?.description).toBeDefined();
+    });
+
+    it('should have onCardMove as code input', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      const onCardMoveInput = config?.inputs?.find((input: any) => input.name === 'onCardMove');
+      
+      expect(onCardMoveInput).toBeDefined();
+      expect(onCardMoveInput?.type).toBe('code');
+      expect(onCardMoveInput?.advanced).toBe(true);
+      expect(onCardMoveInput?.description).toBeDefined();
+    });
+
+    it('should have sensible default props', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      const defaults = config?.defaultProps;
+      
+      expect(defaults).toBeDefined();
+      expect(defaults?.columns).toBeDefined();
+      expect(Array.isArray(defaults?.columns)).toBe(true);
+      expect(defaults?.columns.length).toBeGreaterThan(0);
+      expect(defaults?.className).toBe('w-full');
+    });
+
+    it('should have default columns with proper structure', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      const defaults = config?.defaultProps;
+      const columns = defaults?.columns || [];
+      
+      // Verify at least 3 columns exist (todo, in-progress, done)
+      expect(columns.length).toBeGreaterThanOrEqual(3);
+      
+      // Verify each column has required properties
+      columns.forEach((column: any) => {
+        expect(column.id).toBeDefined();
+        expect(column.title).toBeDefined();
+        expect(column.cards).toBeDefined();
+        expect(Array.isArray(column.cards)).toBe(true);
+      });
+      
+      // Verify at least one column has cards
+      const hasCards = columns.some((column: any) => column.cards.length > 0);
+      expect(hasCards).toBe(true);
+    });
+
+    it('should have cards with proper structure', () => {
+      const config = ComponentRegistry.getConfig('kanban');
+      const defaults = config?.defaultProps;
+      const columns = defaults?.columns || [];
+      
+      // Find a column with cards
+      const columnWithCards = columns.find((column: any) => column.cards.length > 0);
+      expect(columnWithCards).toBeDefined();
+      
+      const card = columnWithCards.cards[0];
+      expect(card.id).toBeDefined();
+      expect(card.title).toBeDefined();
+      expect(card.description).toBeDefined();
+      expect(card.badges).toBeDefined();
+      expect(Array.isArray(card.badges)).toBe(true);
+    });
+  });
+});

package/src/index.tsx

@@ -0,0 +1,168 @@
+import React, { Suspense } from 'react';
+import { ComponentRegistry } from '@object-ui/core';
+import { Skeleton } from '@object-ui/components';
+
+// Export types for external use
+export type { KanbanSchema, KanbanCard, KanbanColumn } from './types';
+
+// 🚀 Lazy load the implementation file
+// This ensures @dnd-kit is only loaded when the component is actually rendered
+const LazyKanban = React.lazy(() => import('./KanbanImpl'));
+
+export interface KanbanRendererProps {
+  schema: {
+    type: string;
+    id?: string;
+    className?: string;
+    columns?: Array<any>;
+    data?: Array<any>;
+    groupBy?: string;
+    onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
+  };
+}
+
+/**
+ * KanbanRenderer - The public API for the kanban board component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export const KanbanRenderer: React.FC<KanbanRendererProps> = ({ schema }) => {
+  // ⚡️ Adapter: Map flat 'data' + 'groupBy' to nested 'cards' structure
+  const processedColumns = React.useMemo(() => {
+    const { columns = [], data, groupBy } = schema;
+    
+    // If we have flat data and a grouping key, distribute items into columns
+    if (data && groupBy && Array.isArray(data)) {
+      // 1. Group data by key
+      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[]>);
+
+      // 2. Inject into columns
+      return columns.map((col: any) => ({
+        ...col,
+        cards: [
+           ...(col.cards || []),     // Preserve static cards
+           ...(groups[col.id] || []) // Add dynamic cards
+        ]
+      }));
+    }
+    
+    // Default: Return columns as-is (assuming they have 'cards' inside)
+    return columns;
+  }, [schema]);
+
+  return (
+    <Suspense fallback={<Skeleton className="w-full h-[600px]" />}>
+      <LazyKanban
+        columns={processedColumns}
+        onCardMove={schema.onCardMove}
+        className={schema.className}
+      />
+    </Suspense>
+  );
+};
+
+// Register the component with the ComponentRegistry
+ComponentRegistry.register(
+  'kanban',
+  KanbanRenderer,
+  {
+    label: 'Kanban Board',
+    icon: 'LayoutDashboard',
+    category: 'plugin',
+    inputs: [
+      { 
+        name: 'columns', 
+        type: 'array', 
+        label: 'Columns',
+        description: 'Array of { id, title, cards, limit, className }',
+        required: true
+      },
+      { 
+        name: 'onCardMove', 
+        type: 'code',
+        label: 'On Card Move',
+        description: 'Callback when a card is moved',
+        advanced: true
+      },
+      { 
+        name: 'className', 
+        type: 'string', 
+        label: 'CSS Class' 
+      }
+    ],
+    defaultProps: {
+      columns: [
+        {
+          id: 'todo',
+          title: 'To Do',
+          cards: [
+            {
+              id: 'card-1',
+              title: 'Task 1',
+              description: 'This is the first task',
+              badges: [
+                { label: 'High Priority', variant: 'destructive' },
+                { label: 'Feature', variant: 'default' }
+              ]
+            },
+            {
+              id: 'card-2',
+              title: 'Task 2',
+              description: 'This is the second task',
+              badges: [
+                { label: 'Bug', variant: 'destructive' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 'in-progress',
+          title: 'In Progress',
+          limit: 3,
+          cards: [
+            {
+              id: 'card-3',
+              title: 'Task 3',
+              description: 'Currently working on this',
+              badges: [
+                { label: 'In Progress', variant: 'default' }
+              ]
+            }
+          ]
+        },
+        {
+          id: 'done',
+          title: 'Done',
+          cards: [
+            {
+              id: 'card-4',
+              title: 'Task 4',
+              description: 'This task is completed',
+              badges: [
+                { label: 'Completed', variant: 'outline' }
+              ]
+            },
+            {
+              id: 'card-5',
+              title: 'Task 5',
+              description: 'Another completed task',
+              badges: [
+                { label: 'Completed', variant: 'outline' }
+              ]
+            }
+          ]
+        }
+      ],
+      className: 'w-full'
+    }
+  }
+);
+
+// Standard Export Protocol - for manual integration
+export const kanbanComponents = {
+  'kanban': KanbanRenderer,
+};

package/src/types.ts

@@ -0,0 +1,47 @@
+import type { BaseSchema } from '@object-ui/types';
+
+/**
+ * Kanban card interface.
+ */
+export interface KanbanCard {
+  id: string;
+  title: string;
+  description?: string;
+  badges?: Array<{ label: string; variant?: "default" | "secondary" | "destructive" | "outline" }>;
+  [key: string]: any;
+}
+
+/**
+ * Kanban column interface.
+ */
+export interface KanbanColumn {
+  id: string;
+  title: string;
+  cards: KanbanCard[];
+  limit?: number;
+  className?: string;
+}
+
+/**
+ * Kanban Board component schema.
+ * Renders a drag-and-drop kanban board for task management.
+ */
+export interface KanbanSchema extends BaseSchema {
+  type: 'kanban';
+  
+  /**
+   * Array of columns to display in the kanban board.
+   * Each column contains an array of cards.
+   */
+  columns?: KanbanColumn[];
+  
+  /**
+   * Callback function when a card is moved between columns or reordered.
+   */
+  onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void;
+  
+  /**
+   * Optional CSS class name to apply custom styling.
+   */
+  className?: string;
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "composite": true,
+    "declarationMap": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}

package/vite.config.ts

@@ -0,0 +1,38 @@
+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,
+      include: ['src'],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, './src'),
+    },
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.tsx'),
+      name: 'ObjectUIPluginKanban',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@object-ui/components', '@object-ui/core', '@object-ui/react'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          '@object-ui/components': 'ObjectUIComponents',
+          '@object-ui/core': 'ObjectUICore',
+          '@object-ui/react': 'ObjectUIReact',
+        },
+      },
+    },
+  },
+});