@djangocfg/widget-data 0.1.1

package/src/Kanban/parts/KanbanColumn.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ScrollArea } from '@djangocfg/ui-core/components';
+
+import type { KanbanColumn as KanbanColumnType } from '../types';
+import { useKanbanContext } from '../context/KanbanContext';
+import { KanbanCard } from './KanbanCard';
+
+interface KanbanColumnProps {
+  column: KanbanColumnType;
+}
+
+export function KanbanColumn({ column }: KanbanColumnProps) {
+  const { renderColumnHeader, emptyColumnMessage, dragState, setDragState, moveCard, reorderCard } =
+    useKanbanContext();
+
+  const handlePointerEnter = React.useCallback(() => {
+    if (dragState.activeCardId && dragState.activeColumnId !== column.id) {
+      setDragState((prev) => ({ ...prev, overColumnId: column.id }));
+    }
+  }, [dragState.activeCardId, dragState.activeColumnId, column.id, setDragState]);
+
+  const handlePointerUp = React.useCallback(() => {
+    if (
+      dragState.activeCardId &&
+      dragState.activeColumnId &&
+      dragState.overColumnId === column.id &&
+      dragState.activeColumnId !== column.id
+    ) {
+      const toIndex = column.cards.length;
+      moveCard(dragState.activeCardId, dragState.activeColumnId, column.id, toIndex);
+    }
+    setDragState({
+      activeCardId: null,
+      activeColumnId: null,
+      overColumnId: null,
+      overCardId: null,
+    });
+  }, [dragState, column.id, column.cards.length, moveCard, setDragState]);
+
+  const isOver = dragState.overColumnId === column.id && dragState.activeColumnId !== column.id;
+
+  return (
+    <div
+      data-slot="kanban-column"
+      data-column-id={column.id}
+      data-over={isOver ? '' : undefined}
+      className={cn(
+        'flex w-72 shrink-0 flex-col rounded-sm border border-border bg-muted/30',
+        isOver && 'ring-2 ring-ring/50'
+      )}
+      onPointerEnter={handlePointerEnter}
+      onPointerUp={handlePointerUp}
+    >
+      <div className="border-b border-border bg-muted/50 px-3 py-2">
+        {renderColumnHeader ? (
+          renderColumnHeader(column)
+        ) : (
+          <h3 className="text-sm font-semibold text-foreground">{column.title}</h3>
+        )}
+        <span className="text-xs text-muted-foreground">{column.cards.length} cards</span>
+      </div>
+      <ScrollArea className="min-h-0 flex-1" viewportClassName="p-2">
+        <div className="flex flex-col gap-2">
+          {column.cards.length === 0 ? (
+            <div className="py-4 text-center text-sm text-muted-foreground">{emptyColumnMessage}</div>
+          ) : (
+            column.cards.map((card, index) => (
+              <KanbanCard key={card.id} card={card} columnId={column.id} index={index} />
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}
+KanbanColumn.displayName = 'KanbanColumn';

package/src/Kanban/parts/KanbanDragOverlay.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { useKanbanContext } from '../context/KanbanContext';
+
+export function KanbanDragOverlay() {
+  const { dragState, columns, renderCard } = useKanbanContext();
+
+  if (!dragState.activeCardId || !dragState.activeColumnId) return null;
+
+  const column = columns.find((c) => c.id === dragState.activeColumnId);
+  const card = column?.cards.find((c) => c.id === dragState.activeCardId);
+
+  if (!card) return null;
+
+  return (
+    <div
+      data-slot="kanban-drag-overlay"
+      className={cn(
+        'pointer-events-none fixed z-[100] rounded-sm border border-border bg-background p-3 shadow-lg',
+        'opacity-90'
+      )}
+      style={{
+        // Positioned via pointer events in a real implementation;
+        // this is a static overlay that follows the cursor via CSS
+        // In a production app, you'd track pointer position in state
+        left: 'var(--kanban-drag-x, 50%)',
+        top: 'var(--kanban-drag-y, 50%)',
+      }}
+    >
+      {renderCard ? (
+        renderCard(card, dragState.activeColumnId)
+      ) : (
+        <>
+          <h4 className="text-sm font-medium text-foreground">{card.title}</h4>
+          {card.description && (
+            <p className="mt-1 text-xs text-muted-foreground">{card.description}</p>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+KanbanDragOverlay.displayName = 'KanbanDragOverlay';

package/src/Kanban/parts/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export { Kanban } from './Kanban';
+export { KanbanColumn } from './KanbanColumn';
+export { KanbanCard } from './KanbanCard';
+export { KanbanDragOverlay } from './KanbanDragOverlay';

package/src/Kanban/types.ts

@@ -0,0 +1,45 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export type KanbanCardId = string;
+export type KanbanColumnId = string;
+
+export interface KanbanCard {
+  id: KanbanCardId;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Extra metadata for custom rendering */
+  meta?: Record<string, unknown>;
+}
+
+export interface KanbanColumn {
+  id: KanbanColumnId;
+  title: ReactNode;
+  cards: KanbanCard[];
+}
+
+export interface KanbanDragState {
+  activeCardId: KanbanCardId | null;
+  activeColumnId: KanbanColumnId | null;
+  overColumnId: KanbanColumnId | null;
+  overCardId: KanbanCardId | null;
+}
+
+export interface KanbanProps {
+  columns: KanbanColumn[];
+  /** Called when a card is moved to a different column */
+  onMoveCard?: (cardId: KanbanCardId, fromColumnId: KanbanColumnId, toColumnId: KanbanColumnId, toIndex: number) => void;
+  /** Called when a card is reordered within the same column */
+  onReorderCard?: (columnId: KanbanColumnId, cardId: KanbanCardId, toIndex: number) => void;
+  /** Custom card renderer */
+  renderCard?: (card: KanbanCard, columnId: KanbanColumnId) => ReactNode;
+  /** Custom column header renderer */
+  renderColumnHeader?: (column: KanbanColumn) => ReactNode;
+  /** Loading state */
+  loading?: boolean;
+  /** Empty column message */
+  emptyColumnMessage?: ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+}