@object-ui/plugin-kanban 0.5.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-kanban",
-  "version": "0.5.0",
+  "version": "3.0.0",
   "type": "module",
   "license": "MIT",
   "description": "Kanban board plugin for Object UI, powered by dnd-kit",
@@ -27,25 +27,25 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@tanstack/react-virtual": "^3.10.8",
+    "@tanstack/react-virtual": "^3.13.18",
     "lucide-react": "^0.563.0",
-    "@object-ui/components": "0.5.0",
-    "@object-ui/core": "0.5.0",
-    "@object-ui/react": "0.5.0",
-    "@object-ui/types": "0.5.0"
+    "@object-ui/components": "3.0.0",
+    "@object-ui/core": "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.10",
-    "@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",
-    "@object-ui/data-objectstack": "0.5.0"
+    "@object-ui/data-objectstack": "3.0.0"
   },
   "scripts": {
     "build": "vite build",

package/src/KanbanImpl.tsx

@@ -13,6 +13,7 @@ import {
   DragOverlay,
   DragStartEvent,
   PointerSensor,
+  TouchSensor,
   useSensor,
   useSensors,
   closestCorners,
@@ -25,6 +26,7 @@ import {
 } from "@dnd-kit/sortable"
 import { CSS } from "@dnd-kit/utilities"
 import { Badge, Card, CardHeader, CardTitle, CardDescription, CardContent, ScrollArea } from "@object-ui/components"
+import { useHasDndProvider, useDnd } from "@object-ui/react"
 
 // Utility function to merge class names (inline to avoid external dependency)
 const cn = (...classes: (string | undefined)[]) => classes.filter(Boolean).join(' ')
@@ -48,10 +50,11 @@ export interface KanbanColumn {
 export interface KanbanBoardProps {
   columns: KanbanColumn[]
   onCardMove?: (cardId: string, fromColumnId: string, toColumnId: string, newIndex: number) => void
+  onCardClick?: (card: KanbanCard) => void
   className?: string
 }
 
-function SortableCard({ card }: { card: KanbanCard }) {
+function SortableCard({ card, onCardClick }: { card: KanbanCard; onCardClick?: (card: KanbanCard) => void }) {
   const {
     attributes,
     listeners,
@@ -68,18 +71,20 @@ function SortableCard({ card }: { card: KanbanCard }) {
   }
 
   return (
-    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
-      <Card className="mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group">
-        <CardHeader className="p-4">
-          <CardTitle className="text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors">{card.title}</CardTitle>
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners} role="listitem" aria-label={card.title}
+      onClick={() => onCardClick?.(card)}
+    >
+      <Card className="mb-2 cursor-grab active:cursor-grabbing border-border bg-card/60 hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10 transition-all duration-300 group touch-manipulation">
+        <CardHeader className="p-2 sm:p-4">
+          <CardTitle className="text-xs sm:text-sm font-medium font-mono tracking-tight text-foreground group-hover:text-primary transition-colors">{card.title}</CardTitle>
           {card.description && (
-            <CardDescription className="text-xs text-muted-foreground font-mono">
+            <CardDescription className="text-xs text-muted-foreground font-mono line-clamp-2 sm:line-clamp-none">
               {card.description}
             </CardDescription>
           )}
         </CardHeader>
         {card.badges && card.badges.length > 0 && (
-          <CardContent className="p-4 pt-0">
+          <CardContent className="p-2 sm:p-4 pt-0">
             <div className="flex flex-wrap gap-1">
               {card.badges.map((badge, index) => (
                 <Badge key={index} variant={badge.variant || "default"} className="text-xs">
@@ -97,9 +102,11 @@ function SortableCard({ card }: { card: KanbanCard }) {
 function KanbanColumn({
   column,
   cards,
+  onCardClick,
 }: {
   column: KanbanColumn
   cards: KanbanCard[]
+  onCardClick?: (card: KanbanCard) => void
 }) {
   const safeCards = cards || [];
   const { setNodeRef } = useSortable({
@@ -114,16 +121,18 @@ function KanbanColumn({
   return (
     <div
       ref={setNodeRef}
+      role="group"
+      aria-label={column.title}
       className={cn(
-        "flex flex-col w-80 flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl",
+        "flex flex-col w-[85vw] sm:w-80 flex-shrink-0 rounded-lg border border-border bg-card/20 backdrop-blur-sm shadow-xl snap-start",
         column.className
       )}
     >
-      <div className="p-4 border-b border-border/50 bg-muted/20">
+      <div className="p-3 sm:p-4 border-b border-border/50 bg-muted/20">
         <div className="flex items-center justify-between">
-          <h3 className="font-mono text-sm font-semibold tracking-wider text-primary/90 uppercase">{column.title}</h3>
+          <h3 id={`kanban-col-${column.id}`} className="font-mono text-xs sm:text-sm font-semibold tracking-wider text-primary/90 uppercase truncate">{column.title}</h3>
           <div className="flex items-center gap-2">
-            <span className="font-mono text-xs text-muted-foreground">
+            <span className="font-mono text-xs text-muted-foreground" aria-label={`${safeCards.length} cards${column.limit ? ` of ${column.limit} maximum` : ''}`}>
               {safeCards.length}
               {column.limit && ` / ${column.limit}`}
             </span>
@@ -140,9 +149,9 @@ function KanbanColumn({
           items={safeCards.map((c) => c.id)}
           strategy={verticalListSortingStrategy}
         >
-          <div className="space-y-2">
+          <div className="space-y-2" role="list" aria-label={`${column.title} cards`}>
             {safeCards.map((card) => (
-              <SortableCard key={card.id} card={card} />
+              <SortableCard key={card.id} card={card} onCardClick={onCardClick} />
             ))}
           </div>
         </SortableContext>
@@ -151,7 +160,27 @@ function KanbanColumn({
   )
 }
 
-export default function KanbanBoard({ columns, onCardMove, className }: KanbanBoardProps) {
+/** Bridge wrapper that reads the ObjectUI DnD context and injects it into KanbanBoardInner. */
+function DndBridge({ children }: { children: (dnd: ReturnType<typeof useDnd>) => React.ReactNode }) {
+  const dnd = useDnd()
+  return <>{children(dnd)}</>
+}
+
+export default function KanbanBoard({ columns, onCardMove, onCardClick, className }: KanbanBoardProps) {
+  const hasDnd = useHasDndProvider()
+
+  if (hasDnd) {
+    return (
+      <DndBridge>
+        {(dnd) => <KanbanBoardInner columns={columns} onCardMove={onCardMove} onCardClick={onCardClick} className={className} dnd={dnd} />}
+      </DndBridge>
+    )
+  }
+
+  return <KanbanBoardInner columns={columns} onCardMove={onCardMove} onCardClick={onCardClick} className={className} dnd={null} />
+}
+
+function KanbanBoardInner({ columns, onCardMove, onCardClick, className, dnd }: KanbanBoardProps & { dnd: ReturnType<typeof useDnd> | null }) {
   const [activeCard, setActiveCard] = React.useState<KanbanCard | null>(null)
   
   // Ensure we always have valid columns with cards array
@@ -171,7 +200,13 @@ export default function KanbanBoard({ columns, onCardMove, className }: KanbanBo
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
-        distance: 8,
+        distance: 5,
+      },
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 200,
+        tolerance: 5,
       },
     })
   )
@@ -180,23 +215,40 @@ export default function KanbanBoard({ columns, onCardMove, className }: KanbanBo
     const { active } = event
     const card = findCard(active.id as string)
     setActiveCard(card)
+
+    // Bridge to ObjectUI spec DnD system
+    if (dnd && card) {
+      const column = findColumnByCardId(card.id)
+      if (column) {
+        dnd.startDrag({ id: card.id, type: 'kanban-card', data: card, sourceId: column.id })
+      }
+    }
   }
 
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event
     setActiveCard(null)
 
-    if (!over) return
+    if (!over) {
+      if (dnd) dnd.endDrag()
+      return
+    }
 
     const activeId = active.id as string
     const overId = over.id as string
 
-    if (activeId === overId) return
+    if (activeId === overId) {
+      if (dnd) dnd.endDrag()
+      return
+    }
 
     const activeColumn = findColumnByCardId(activeId)
     const overColumn = findColumnByCardId(overId) || findColumnById(overId)
 
-    if (!activeColumn || !overColumn) return
+    if (!activeColumn || !overColumn) {
+      if (dnd) dnd.endDrag()
+      return
+    }
 
     if (activeColumn.id === overColumn.id) {
       // Same column reordering
@@ -241,6 +293,9 @@ export default function KanbanBoard({ columns, onCardMove, className }: KanbanBo
         onCardMove(activeId, activeColumn.id, overColumn.id, overIndex)
       }
     }
+
+    // Bridge to ObjectUI spec DnD system
+    if (dnd) dnd.endDrag(overColumn.id)
   }
 
   const findCard = React.useCallback(
@@ -275,17 +330,24 @@ export default function KanbanBoard({ columns, onCardMove, className }: KanbanBo
       onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
     >
-      <div className={cn("flex gap-4 overflow-x-auto p-4", className)}>
+      <div className="flex sm:hidden items-center justify-between px-3 pb-2 text-xs text-muted-foreground">
+        <span>{boardColumns.length} columns</span>
+        <span>← Swipe to navigate →</span>
+      </div>
+      <div className={cn("flex gap-3 sm:gap-4 overflow-x-auto snap-x snap-mandatory p-2 sm:p-4 [-webkit-overflow-scrolling:touch]", className)} role="region" aria-label="Kanban board">
         {boardColumns.map((column) => (
           <KanbanColumn
             key={column.id}
             column={column}
             cards={column.cards}
+            onCardClick={onCardClick}
           />
         ))}
       </div>
       <DragOverlay>
-        {activeCard ? <SortableCard card={activeCard} /> : null}
+        <div aria-live="assertive" aria-label={activeCard ? `Dragging ${activeCard.title}` : undefined}>
+          {activeCard ? <SortableCard card={activeCard} /> : null}
+        </div>
       </DragOverlay>
     </DndContext>
   )

package/src/ObjectKanban.EdgeCases.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/ObjectKanban/Edge Cases',
+  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} />;
+
+// ── Empty Board ───────────────────────────────────────────────
+
+export const EmptyBoard: Story = {
+  name: 'Empty Board – No Columns',
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [],
+    className: 'w-full',
+  } as any,
+};
+
+// ── Columns With No Cards ─────────────────────────────────────
+
+export const ColumnsWithNoCards: Story = {
+  name: 'Columns With No Cards',
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      { id: 'todo', title: 'To Do', cards: [] },
+      { id: 'in-progress', title: 'In Progress', cards: [] },
+      { id: 'done', title: 'Done', cards: [] },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+// ── Column At WIP Limit ───────────────────────────────────────
+
+export const ColumnAtWipLimit: Story = {
+  name: 'Column At WIP Limit',
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'todo',
+        title: 'To Do',
+        cards: [
+          { id: 'c-1', title: 'Plan sprint', badges: [{ label: 'Planning', variant: 'default' }] },
+        ],
+      },
+      {
+        id: 'wip',
+        title: 'In Progress (At Limit)',
+        limit: 3,
+        cards: [
+          { id: 'c-2', title: 'Build auth module', description: 'JWT implementation', badges: [{ label: 'Feature', variant: 'default' }] },
+          { id: 'c-3', title: 'Write unit tests', description: 'Coverage > 80%', badges: [{ label: 'Testing', variant: 'secondary' }] },
+          { id: 'c-4', title: 'Deploy staging', description: 'Push to staging env', badges: [{ label: 'DevOps', variant: 'secondary' }] },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          { id: 'c-5', title: 'Setup repo', badges: [{ label: 'Completed', variant: 'outline' }] },
+        ],
+      },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+// ── Cards With Very Long Titles ───────────────────────────────
+
+export const CardsWithLongTitles: Story = {
+  name: 'Cards With Very Long Titles',
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        cards: [
+          {
+            id: 'long-1',
+            title: 'Investigate the root cause of the intermittent timeout errors occurring in the payment processing pipeline during peak traffic hours on weekends',
+            description: 'This card has an extremely long title to test text wrapping and overflow behaviour within kanban cards.',
+            badges: [
+              { label: 'Bug', variant: 'destructive' },
+              { label: 'P0 – Critical Production Incident', variant: 'destructive' },
+            ],
+          },
+          {
+            id: 'long-2',
+            title: 'Refactor the legacy monolithic authentication service into a set of microservices following domain-driven design principles and ensuring backward compatibility',
+            badges: [{ label: 'Tech Debt', variant: 'secondary' }],
+          },
+        ],
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        cards: [
+          {
+            id: 'long-3',
+            title: 'A short title for contrast',
+            description: 'Normal-length description.',
+          },
+        ],
+      },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+// ── Many Columns (10+) ───────────────────────────────────────
+
+export const ManyColumns: Story = {
+  name: 'Many Columns (10+)',
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: Array.from({ length: 12 }, (_, i) => ({
+      id: `col-${i + 1}`,
+      title: `Stage ${i + 1}`,
+      limit: i === 3 ? 2 : undefined,
+      cards: i % 3 === 0
+        ? [
+            {
+              id: `mc-${i}-1`,
+              title: `Task ${i * 2 + 1}`,
+              description: `Description for task in stage ${i + 1}`,
+              badges: [{ label: `S${i + 1}`, variant: 'default' as const }],
+            },
+            {
+              id: `mc-${i}-2`,
+              title: `Task ${i * 2 + 2}`,
+              badges: [{ label: 'Active', variant: 'secondary' as const }],
+            },
+          ]
+        : i % 3 === 1
+          ? [
+              {
+                id: `mc-${i}-1`,
+                title: `Task ${i * 2 + 1}`,
+                badges: [{ label: 'Review', variant: 'outline' as const }],
+              },
+            ]
+          : [],
+    })),
+    className: 'w-full',
+  } as any,
+};

package/src/ObjectKanban.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SchemaRenderer } from '@object-ui/react';
+import type { BaseSchema } from '@object-ui/types';
+
+const meta = {
+  title: 'Plugins/ObjectKanban',
+  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: 'kanban',
+    columns: [
+      {
+        id: 'todo',
+        title: 'To Do',
+        cards: [
+          {
+            id: 'card-1',
+            title: 'Design homepage',
+            description: 'Create wireframes and mockups',
+            badges: [{ label: 'Design', variant: 'default' }],
+          },
+          {
+            id: 'card-2',
+            title: 'Setup CI pipeline',
+            description: 'Configure GitHub Actions',
+            badges: [{ label: 'DevOps', variant: 'secondary' }],
+          },
+        ],
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        limit: 3,
+        cards: [
+          {
+            id: 'card-3',
+            title: 'Implement auth',
+            description: 'JWT-based authentication flow',
+            badges: [
+              { label: 'Feature', variant: 'default' },
+              { label: 'High Priority', variant: 'destructive' },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          {
+            id: 'card-4',
+            title: 'Project scaffolding',
+            description: 'Initial project setup completed',
+            badges: [{ label: 'Completed', variant: 'outline' }],
+          },
+        ],
+      },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+export const SprintBoard: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'backlog',
+        title: 'Backlog',
+        cards: [
+          { id: 's-1', title: 'Refactor API layer', description: 'Improve error handling', badges: [{ label: 'Tech Debt', variant: 'secondary' }] },
+          { id: 's-2', title: 'Add unit tests', description: 'Increase coverage to 80%', badges: [{ label: 'Testing', variant: 'default' }] },
+        ],
+      },
+      {
+        id: 'in-progress',
+        title: 'In Progress',
+        limit: 2,
+        cards: [
+          { id: 's-3', title: 'User dashboard', description: 'Build analytics dashboard', badges: [{ label: 'Feature', variant: 'default' }, { label: 'P1', variant: 'destructive' }] },
+        ],
+      },
+      {
+        id: 'review',
+        title: 'In Review',
+        cards: [
+          { id: 's-4', title: 'Search functionality', description: 'Full-text search implementation', badges: [{ label: 'Feature', variant: 'default' }] },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          { id: 's-5', title: 'Login page', badges: [{ label: 'Done', variant: 'outline' }] },
+          { id: 's-6', title: 'Database schema', badges: [{ label: 'Done', variant: 'outline' }] },
+        ],
+      },
+    ],
+    className: 'w-full',
+  } as any,
+};
+
+export const WithColumnLimits: Story = {
+  render: renderStory,
+  args: {
+    type: 'kanban',
+    columns: [
+      {
+        id: 'todo',
+        title: 'To Do',
+        cards: [
+          { id: 'l-1', title: 'Task A', badges: [{ label: 'P1', variant: 'destructive' }] },
+          { id: 'l-2', title: 'Task B', badges: [{ label: 'P2', variant: 'default' }] },
+        ],
+      },
+      {
+        id: 'wip',
+        title: 'WIP (Over Limit)',
+        limit: 2,
+        cards: [
+          { id: 'l-3', title: 'Task C', description: 'Almost done' },
+          { id: 'l-4', title: 'Task D', description: 'In review' },
+          { id: 'l-5', title: 'Task E', description: 'Blocked', badges: [{ label: 'Blocked', variant: 'destructive' }] },
+        ],
+      },
+      {
+        id: 'done',
+        title: 'Done',
+        cards: [
+          { id: 'l-6', title: 'Task F', badges: [{ label: 'Completed', variant: 'outline' }] },
+        ],
+      },
+    ],
+    className: 'w-full',
+  } as any,
+};

package/src/ObjectKanban.tsx

@@ -8,7 +8,8 @@
 
 import React, { useEffect, useState, useMemo } from 'react';
 import type { DataSource } from '@object-ui/types';
-import { useDataScope } from '@object-ui/react';
+import { useDataScope, useNavigationOverlay } from '@object-ui/react';
+import { NavigationOverlay } from '@object-ui/components';
 import { KanbanRenderer } from './index';
 import { KanbanSchema } from './types';
 
@@ -16,12 +17,16 @@ export interface ObjectKanbanProps {
   schema: KanbanSchema;
   dataSource?: DataSource;
   className?: string; // Allow override
+  onRowClick?: (record: any) => void;
+  onCardClick?: (record: any) => void;
 }
 
 export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
   schema,
   dataSource,
   className,
+  onRowClick,
+  onCardClick,
   ...props
 }) => {
   const [fetchedData, setFetchedData] = useState<any[]>([]);
@@ -175,6 +180,12 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
       className: className || schema.className
   };
 
+  const navigation = useNavigationOverlay({
+    navigation: (schema as any).navigation,
+    objectName: schema.objectName,
+    onRowClick: onRowClick ?? onCardClick,
+  });
+
   if (error) {
       return (
         <div className="p-4 border border-destructive/50 rounded bg-destructive/10 text-destructive">
@@ -184,5 +195,35 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
   }
 
   // Pass through to the renderer
-  return <KanbanRenderer schema={effectiveSchema} />;
+  const detailTitle = schema.objectName
+    ? `${schema.objectName.charAt(0).toUpperCase() + schema.objectName.slice(1).replace(/_/g, ' ')} Detail`
+    : 'Card Details';
+
+  return (
+    <>
+      <KanbanRenderer schema={{
+        ...effectiveSchema,
+        onCardClick: (card: any) => {
+          navigation.handleClick(card);
+          onCardClick?.(card);
+        },
+      }} />
+      {navigation.isOverlay && (
+        <NavigationOverlay {...navigation} title={detailTitle}>
+          {(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>
+      )}
+    </>
+  );
 }

package/src/__tests__/KanbanEnhanced.test.tsx

@@ -24,6 +24,7 @@ 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(),
+  TouchSensor: vi.fn(),
   useSensor: vi.fn(),
   useSensors: () => [],
   closestCorners: vi.fn(),