@djangocfg/ui-tools 2.1.411 → 2.1.413

package/src/tools/data/Kanban/parts/Kanban.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ScrollArea } from '@djangocfg/ui-core/components';
+
+import type { KanbanProps } from '../types';
+import { KanbanProvider } from '../context/KanbanContext';
+import { KanbanColumn } from './KanbanColumn';
+
+export function Kanban(props: KanbanProps) {
+  const {
+    columns,
+    onMoveCard,
+    onReorderCard,
+    renderCard,
+    renderColumnHeader,
+    loading,
+    emptyColumnMessage,
+    className,
+    style,
+  } = props;
+
+  return (
+    <KanbanProvider
+      columns={columns}
+      onMoveCard={onMoveCard}
+      onReorderCard={onReorderCard}
+      renderCard={renderCard}
+      renderColumnHeader={renderColumnHeader}
+      loading={loading}
+      emptyColumnMessage={emptyColumnMessage}
+    >
+      <KanbanShell className={className} style={style} />
+    </KanbanProvider>
+  );
+}
+Kanban.displayName = 'Kanban';
+
+function KanbanShell({ className, style }: { className?: string; style?: React.CSSProperties }) {
+  const { columns, loading } = useKanbanContext();
+
+  if (loading) {
+    return (
+      <div
+        data-slot="kanban"
+        className={cn(
+          'flex h-full items-center justify-center rounded-sm border border-border bg-background',
+          className
+        )}
+        style={style}
+      >
+        <span className="text-muted-foreground">Loading…</span>
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="w-full" orientation="horizontal">
+      <div
+        data-slot="kanban"
+        className={cn(
+          'flex h-full min-h-[400px] gap-4 rounded-sm border border-border bg-background p-4',
+          className
+        )}
+        style={style}
+      >
+        {columns.map((column) => (
+          <KanbanColumn key={column.id} column={column} />
+        ))}
+      </div>
+    </ScrollArea>
+  );
+}
+
+// Ambient import for JSX usage
+import { useKanbanContext } from '../context/KanbanContext';

package/src/tools/data/Kanban/parts/KanbanCard.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+
+import type { KanbanCard as KanbanCardType, KanbanColumnId } from '../types';
+import { useKanbanContext } from '../context/KanbanContext';
+
+interface KanbanCardProps {
+  card: KanbanCardType;
+  columnId: KanbanColumnId;
+  index: number;
+}
+
+export function KanbanCard({ card, columnId, index }: KanbanCardProps) {
+  const { renderCard, dragState, setDragState, moveCard, reorderCard } = useKanbanContext();
+  const isActive = dragState.activeCardId === card.id;
+  const isOver = dragState.overCardId === card.id && dragState.activeCardId !== card.id;
+
+  const handlePointerDown = React.useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      setDragState({
+        activeCardId: card.id,
+        activeColumnId: columnId,
+        overColumnId: null,
+        overCardId: null,
+      });
+    },
+    [card.id, columnId, setDragState],
+  );
+
+  const handlePointerEnter = React.useCallback(() => {
+    if (!dragState.activeCardId || dragState.activeCardId === card.id) return;
+
+    setDragState((prev) => ({ ...prev, overCardId: card.id, overColumnId: columnId }));
+
+    if (dragState.activeColumnId === columnId) {
+      reorderCard(columnId, dragState.activeCardId, index);
+    } else if (dragState.activeColumnId) {
+      moveCard(dragState.activeCardId, dragState.activeColumnId, columnId, index);
+      setDragState((prev) => ({ ...prev, activeColumnId: columnId }));
+    }
+  }, [card.id, columnId, index, dragState, setDragState, reorderCard, moveCard]);
+
+  return (
+    <div
+      data-slot="kanban-card"
+      data-id={card.id}
+      data-column-id={columnId}
+      data-active={isActive ? '' : undefined}
+      data-over={isOver ? '' : undefined}
+      onPointerDown={handlePointerDown}
+      onPointerEnter={handlePointerEnter}
+      className={cn(
+        'cursor-grab select-none rounded-sm border border-border bg-background p-3 shadow-sm',
+        'transition-all',
+        'hover:border-primary/50',
+        isActive && 'z-50 scale-[1.02] opacity-80 shadow-lg',
+        isOver && 'border-dashed border-primary'
+      )}
+    >
+      {renderCard ? (
+        renderCard(card, columnId)
+      ) : (
+        <>
+          <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>
+  );
+}
+KanbanCard.displayName = 'KanbanCard';

package/src/tools/data/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/tools/data/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/tools/data/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/tools/data/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;
+}