@startsimpli/ui 0.4.42 → 0.4.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.42",
+  "version": "0.4.43",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -35,7 +35,7 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/api": "0.5.41",
+    "@startsimpli/api": "0.5.42",
     "@startsimpli/auth": "0.4.29"
   },
   "peerDependenciesMeta": {

package/src/components/kanban/KanbanBoard.tsx

@@ -1,6 +1,12 @@
 'use client'
 
 import * as React from 'react'
+import {
+  DragDropContext,
+  Droppable,
+  Draggable,
+  type DropResult,
+} from '@hello-pangea/dnd'
 import { cn } from '../../lib/utils'
 
 export interface KanbanColumnConfig {
@@ -9,6 +15,36 @@ export interface KanbanColumnConfig {
   color?: string
 }
 
+/** A resolved card move derived from a drag, in board terms (not DnD terms). */
+export interface KanbanMove {
+  cardId: string
+  fromColumnId: string
+  toColumnId: string
+  toIndex: number
+}
+
+/**
+ * Pure resolver: turn a @hello-pangea/dnd DropResult into a KanbanMove, or null
+ * when the drag is a no-op (dropped outside any column, or back onto the same slot).
+ * Exported so consumers and tests can reason about a move without a DOM.
+ */
+export function resolveKanbanMove(result: DropResult): KanbanMove | null {
+  const { draggableId, source, destination } = result
+  if (!destination) return null
+  if (
+    source.droppableId === destination.droppableId &&
+    source.index === destination.index
+  ) {
+    return null
+  }
+  return {
+    cardId: draggableId,
+    fromColumnId: source.droppableId,
+    toColumnId: destination.droppableId,
+    toIndex: destination.index,
+  }
+}
+
 export interface KanbanBoardProps<T> {
   columns: KanbanColumnConfig[]
   items: Record<string, T[]>
@@ -20,6 +56,15 @@ export interface KanbanBoardProps<T> {
   columnRef?: (columnId: string) => React.Ref<HTMLDivElement> | undefined
   isColumnOver?: (columnId: string) => boolean
   className?: string
+  /**
+   * DnD (opt-in). Provide BOTH `getCardId` and `onCardMove` to make cards draggable
+   * between columns via @hello-pangea/dnd — all drag mechanics live here in
+   * @startsimpli/ui; consumers stay dnd-agnostic and just persist the move in
+   * `onCardMove`. Omit either and the board renders exactly as before (no DnD;
+   * `columnRef`/`isColumnOver` honored for a parent's own manual wiring).
+   */
+  getCardId?: (item: T) => string
+  onCardMove?: (move: KanbanMove) => void
 }
 
 export function KanbanBoard<T>({
@@ -33,71 +78,135 @@ export function KanbanBoard<T>({
   columnRef,
   isColumnOver,
   className,
+  getCardId,
+  onCardMove,
 }: KanbanBoardProps<T>) {
-  return (
-    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
-      {columns.map((column) => {
-        const columnItems = items[column.id] ?? []
-        const ref = columnRef?.(column.id)
-        const isOver = isColumnOver?.(column.id) ?? false
+  const dndEnabled = !!(getCardId && onCardMove)
 
-        return (
-          <div
-            key={column.id}
-            ref={ref}
-            style={{ minWidth: columnWidth, maxWidth: columnWidth }}
-            className={cn(
-              'flex flex-col rounded-lg border bg-muted/50 transition-colors',
-              isOver && 'border-primary ring-2 ring-primary/20',
-            )}
-          >
-            {/* Column Header */}
-            {renderColumnHeader ? (
-              renderColumnHeader(column, columnItems)
-            ) : (
-              <div className="flex items-center justify-between px-3 py-2 border-b">
-                <div className="flex items-center gap-2">
-                  {column.color && (
-                    <span
-                      className="w-2.5 h-2.5 rounded-full shrink-0"
-                      style={{ backgroundColor: column.color }}
-                      aria-hidden="true"
-                    />
-                  )}
-                  <h3 className="text-sm font-semibold text-foreground truncate">
-                    {column.label}
-                  </h3>
-                </div>
-                <span className="inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
-                  {columnItems.length}
-                </span>
-              </div>
-            )}
+  const handleDragEnd = React.useCallback(
+    (result: DropResult) => {
+      const move = resolveKanbanMove(result)
+      if (move) onCardMove?.(move)
+    },
+    [onCardMove],
+  )
+
+  const columnHeader = (column: KanbanColumnConfig, columnItems: T[]) =>
+    renderColumnHeader ? (
+      renderColumnHeader(column, columnItems)
+    ) : (
+      <div className="flex items-center justify-between px-3 py-2 border-b">
+        <div className="flex items-center gap-2">
+          {column.color && (
+            <span
+              className="w-2.5 h-2.5 rounded-full shrink-0"
+              style={{ backgroundColor: column.color }}
+              aria-hidden="true"
+            />
+          )}
+          <h3 className="text-sm font-semibold text-foreground truncate">
+            {column.label}
+          </h3>
+        </div>
+        <span className="inline-flex items-center justify-center rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
+          {columnItems.length}
+        </span>
+      </div>
+    )
+
+  const emptyState = (
+    <p className="text-xs text-muted-foreground text-center py-8">
+      {emptyColumnMessage}
+    </p>
+  )
 
-            {/* Column Body */}
-            <div className="flex-1 overflow-y-auto p-2 space-y-2">
-              {columnItems.length === 0 ? (
-                <p className="text-xs text-muted-foreground text-center py-8">
-                  {emptyColumnMessage}
-                </p>
-              ) : (
-                columnItems.map((item, index) => (
-                  <React.Fragment key={index}>
-                    {renderCard(item)}
-                  </React.Fragment>
-                ))
-              )}
-            </div>
+  const renderColumn = (column: KanbanColumnConfig) => {
+    const columnItems = items[column.id] ?? []
+    const footer = renderColumnFooter && (
+      <div className="border-t px-3 py-2">{renderColumnFooter(column)}</div>
+    )
 
-            {/* Column Footer */}
-            {renderColumnFooter && (
-              <div className="border-t px-3 py-2">
-                {renderColumnFooter(column)}
+    if (dndEnabled) {
+      return (
+        <div
+          key={column.id}
+          style={{ minWidth: columnWidth, maxWidth: columnWidth }}
+          className="flex flex-col rounded-lg border bg-muted/50 transition-colors"
+        >
+          {columnHeader(column, columnItems)}
+          <Droppable droppableId={column.id}>
+            {(provided, snapshot) => (
+              <div
+                ref={provided.innerRef}
+                {...provided.droppableProps}
+                className={cn(
+                  'flex-1 overflow-y-auto p-2 space-y-2 transition-colors',
+                  snapshot.isDraggingOver && 'bg-primary/5',
+                )}
+              >
+                {columnItems.length === 0 && !snapshot.isDraggingOver
+                  ? emptyState
+                  : columnItems.map((item, index) => {
+                      const id = getCardId!(item)
+                      return (
+                        <Draggable key={id} draggableId={id} index={index}>
+                          {(dp, ds) => (
+                            <div
+                              ref={dp.innerRef}
+                              {...dp.draggableProps}
+                              {...dp.dragHandleProps}
+                              className={cn(ds.isDragging && 'opacity-80')}
+                            >
+                              {renderCard(item)}
+                            </div>
+                          )}
+                        </Draggable>
+                      )
+                    })}
+                {provided.placeholder}
               </div>
             )}
-          </div>
-        )
-      })}
+          </Droppable>
+          {footer}
+        </div>
+      )
+    }
+
+    // Non-DnD (backward compatible): honor columnRef/isColumnOver for a parent's own
+    // manual drag wiring, render cards keyed by index as before.
+    const ref = columnRef?.(column.id)
+    const isOver = isColumnOver?.(column.id) ?? false
+    return (
+      <div
+        key={column.id}
+        ref={ref}
+        style={{ minWidth: columnWidth, maxWidth: columnWidth }}
+        className={cn(
+          'flex flex-col rounded-lg border bg-muted/50 transition-colors',
+          isOver && 'border-primary ring-2 ring-primary/20',
+        )}
+      >
+        {columnHeader(column, columnItems)}
+        <div className="flex-1 overflow-y-auto p-2 space-y-2">
+          {columnItems.length === 0
+            ? emptyState
+            : columnItems.map((item, index) => (
+                <React.Fragment key={index}>{renderCard(item)}</React.Fragment>
+              ))}
+        </div>
+        {footer}
+      </div>
+    )
+  }
+
+  const board = (
+    <div className={cn('flex gap-4 overflow-x-auto pb-4', className)}>
+      {columns.map(renderColumn)}
     </div>
   )
+
+  if (dndEnabled) {
+    return <DragDropContext onDragEnd={handleDragEnd}>{board}</DragDropContext>
+  }
+  return board
 }

package/src/components/kanban/__tests__/kanban.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
-import { KanbanBoard } from '../KanbanBoard'
+import type { DropResult } from '@hello-pangea/dnd'
+import { KanbanBoard, resolveKanbanMove } from '../KanbanBoard'
 
 interface Card {
   id: string
@@ -154,4 +155,66 @@ describe('KanbanBoard', () => {
     const firstCol = container.querySelector('[style*="320"]')
     expect(firstCol).toHaveClass('ring-2')
   })
+
+  it('renders draggable cards when getCardId + onCardMove are provided (DnD enabled)', () => {
+    const onCardMove = jest.fn()
+    render(
+      <KanbanBoard
+        columns={columns}
+        items={items}
+        renderCard={renderCard}
+        getCardId={(c) => c.id}
+        onCardMove={onCardMove}
+      />
+    )
+    // cards still render through the @hello-pangea/dnd path without crashing
+    expect(screen.getByTestId('card-1')).toBeInTheDocument()
+    expect(screen.getByTestId('card-3')).toBeInTheDocument()
+    expect(screen.getByText('To Do')).toBeInTheDocument()
+  })
+})
+
+describe('resolveKanbanMove', () => {
+  const drop = (
+    draggableId: string,
+    from: string,
+    fromIndex: number,
+    to?: string,
+    toIndex?: number,
+  ): DropResult =>
+    ({
+      draggableId,
+      type: 'DEFAULT',
+      source: { droppableId: from, index: fromIndex },
+      destination: to === undefined ? null : { droppableId: to, index: toIndex ?? 0 },
+      reason: 'DROP',
+      mode: 'FLUID',
+      combine: null,
+    } as unknown as DropResult)
+
+  it('resolves a cross-column move', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 0, 'surfaced', 2))).toEqual({
+      cardId: 'c1',
+      fromColumnId: 'new',
+      toColumnId: 'surfaced',
+      toIndex: 2,
+    })
+  })
+
+  it('returns null when dropped outside any column', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 0))).toBeNull()
+  })
+
+  it('returns null when dropped back onto the same slot', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 1, 'new', 1))).toBeNull()
+  })
+
+  it('resolves a within-column reorder', () => {
+    expect(resolveKanbanMove(drop('c1', 'new', 0, 'new', 3))).toEqual({
+      cardId: 'c1',
+      fromColumnId: 'new',
+      toColumnId: 'new',
+      toIndex: 3,
+    })
+  })
 })

package/src/components/kanban/index.ts

@@ -1,2 +1,2 @@
-export { KanbanBoard } from './KanbanBoard'
-export type { KanbanBoardProps, KanbanColumnConfig } from './KanbanBoard'
+export { KanbanBoard, resolveKanbanMove } from './KanbanBoard'
+export type { KanbanBoardProps, KanbanColumnConfig, KanbanMove } from './KanbanBoard'