Add Kanban board component with drag-and-drop support

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

packages/components/package.json

@@ -18,6 +18,9 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@object-ui/core": "workspace:*",
     "@object-ui/react": "workspace:*",
     "@radix-ui/react-accordion": "^1.2.12",

packages/components/src/renderers/complex/index.ts

@@ -1,4 +1,5 @@
 import './carousel';
+import './kanban';
 import './scroll-area';
 import './resizable';
 import './table';

packages/components/src/renderers/complex/kanban.tsx

@@ -0,0 +1,130 @@
+import { ComponentRegistry } from '@object-ui/core';
+import { KanbanBoard, type KanbanColumn, type KanbanCard } from '@/ui';
+import React from 'react';
+
+ComponentRegistry.register('kanban', 
+  ({ schema, className, ...props }) => {
+    const [columns, setColumns] = React.useState<KanbanColumn[]>(schema.columns || []);
+
+    React.useEffect(() => {
+      if (schema.columns) {
+        setColumns(schema.columns);
+      }
+    }, [schema.columns]);
+
+    const handleCardMove = (
+      cardId: string,
+      fromColumnId: string,
+      toColumnId: string,
+      newIndex: number
+    ) => {
+      // This is where you would handle the card move event
+      // For example, you could call an API or trigger an action
+      console.log('Card moved:', { cardId, fromColumnId, toColumnId, newIndex });
+      
+      // If there's an onCardMove callback in schema, call it
+      if (schema.onCardMove) {
+        schema.onCardMove({ cardId, fromColumnId, toColumnId, newIndex });
+      }
+    };
+
+    return (
+      <KanbanBoard 
+        columns={columns}
+        onCardMove={schema.onCardMove ? handleCardMove : undefined}
+        className={className}
+        {...props}
+      />
+    );
+  },
+  {
+    label: 'Kanban Board',
+    icon: 'LayoutDashboard',
+    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'
+    }
+  }
+);

packages/components/src/ui/index.ts

@@ -26,6 +26,7 @@ export * from './input-group';
 export * from './input-otp';
 export * from './input';
 export * from './item';
+export * from './kanban';
 export * from './kbd';
 export * from './label';
 export * from './menubar';