@djangocfg/ui-tools 2.1.411 → 2.1.413

package/src/tools/data/DataTable/parts/DataTableHeader.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ArrowUp, ArrowDown, ArrowUpDown } from 'lucide-react';
+import {
+  TableHeader,
+  TableRow,
+  TableHead,
+} from '@djangocfg/ui-core/components';
+
+import { useDataTableContext } from '../context/DataTableContext';
+
+export function DataTableHeader() {
+  const { columns, selectionMode, selectAllVisible, isSelected, rows, getRowId } =
+    useDataTableContext();
+
+  const allVisibleSelected = rows.length > 0 && rows.every((r) => isSelected(getRowId(r)));
+
+  return (
+    <TableHeader>
+      <TableRow>
+        {selectionMode === 'multiple' && (
+          <TableHead className="w-10">
+            <input
+              type="checkbox"
+              checked={allVisibleSelected}
+              onChange={selectAllVisible}
+              className="h-4 w-4 rounded border-border accent-primary"
+              aria-label="Select all visible rows"
+            />
+          </TableHead>
+        )}
+        {selectionMode === 'single' && <TableHead className="w-10" />}
+        {columns.map((col) => (
+          <DataTableHeaderCell key={col.key} column={col} />
+        ))}
+      </TableRow>
+      <DataTableFilterRow />
+    </TableHeader>
+  );
+}
+DataTableHeader.displayName = 'DataTableHeader';
+
+function DataTableHeaderCell({ column }: { column: { key: string; header: React.ReactNode; sortable?: boolean; align?: 'left' | 'center' | 'right' } }) {
+  const { sort, setSort } = useDataTableContext();
+  const isSorted = sort.key === column.key;
+
+  return (
+    <TableHead
+      className={cn(
+        column.align === 'center' && 'text-center',
+        column.align === 'right' && 'text-right',
+        column.sortable && 'cursor-pointer select-none'
+      )}
+      onClick={() => column.sortable && setSort(column.key)}
+      data-sort={isSorted ? sort.direction : undefined}
+    >
+      <span className="inline-flex items-center gap-1">
+        {column.header}
+        {column.sortable && (
+          <span className="inline-flex text-muted-foreground/60">
+            {isSorted && sort.direction === 'asc' && <ArrowUp className="h-3.5 w-3.5" />}
+            {isSorted && sort.direction === 'desc' && <ArrowDown className="h-3.5 w-3.5" />}
+            {!isSorted && <ArrowUpDown className="h-3.5 w-3.5" />}
+          </span>
+        )}
+      </span>
+    </TableHead>
+  );
+}
+
+function DataTableFilterRow() {
+  const { columns, filters, setFilter, selectionMode } = useDataTableContext();
+  const hasFilterable = columns.some((c) => c.filterable);
+
+  if (!hasFilterable) return null;
+
+  return (
+    <TableRow>
+      {selectionMode !== 'none' && <TableHead />}
+      {columns.map((col) => (
+        <TableHead key={col.key}>
+          {col.filterable ? (
+            <input
+              type="text"
+              value={filters[col.key] ?? ''}
+              onChange={(e) => setFilter(col.key, e.target.value)}
+              placeholder="Filter…"
+              className={cn(
+                'w-full rounded-sm border border-input bg-background px-2 py-1 text-xs',
+                'placeholder:text-muted-foreground',
+                'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+              )}
+            />
+          ) : (
+            <span />
+          )}
+        </TableHead>
+      ))}
+    </TableRow>
+  );
+}

package/src/tools/data/DataTable/parts/DataTablePagination.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+
+import { useDataTableContext } from '../context/DataTableContext';
+
+export function DataTablePagination() {
+  const { pagination, setPage, setPageSize, totalRows, pageCount, pageSizeOptions } =
+    useDataTableContext();
+
+  const start = totalRows === 0 ? 0 : (pagination.page - 1) * pagination.pageSize + 1;
+  const end = Math.min(pagination.page * pagination.pageSize, totalRows);
+
+  return (
+    <div
+      data-slot="data-table-pagination"
+      className="flex flex-col items-center justify-between gap-2 px-4 py-2 sm:flex-row"
+    >
+      <span className="text-sm text-muted-foreground">
+        {start}-{end} of {totalRows}
+      </span>
+
+      <div className="flex items-center gap-2">
+        <select
+          value={pagination.pageSize}
+          onChange={(e) => setPageSize(Number(e.target.value))}
+          className={cn(
+            'h-8 rounded-sm border border-input bg-background px-2 text-sm',
+            'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+          )}
+          aria-label="Rows per page"
+        >
+          {pageSizeOptions.map((size) => (
+            <option key={size} value={size}>
+              {size} / page
+            </option>
+          ))}
+        </select>
+
+        <div className="flex items-center gap-1">
+          <PaginationButton
+            onClick={() => setPage(1)}
+            disabled={pagination.page <= 1}
+            aria-label="First page"
+          >
+            <ChevronsLeft className="h-4 w-4" />
+          </PaginationButton>
+          <PaginationButton
+            onClick={() => setPage(pagination.page - 1)}
+            disabled={pagination.page <= 1}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </PaginationButton>
+
+          <span className="px-2 text-sm tabular-nums">
+            {pagination.page} / {pageCount}
+          </span>
+
+          <PaginationButton
+            onClick={() => setPage(pagination.page + 1)}
+            disabled={pagination.page >= pageCount}
+            aria-label="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </PaginationButton>
+          <PaginationButton
+            onClick={() => setPage(pageCount)}
+            disabled={pagination.page >= pageCount}
+            aria-label="Last page"
+          >
+            <ChevronsRight className="h-4 w-4" />
+          </PaginationButton>
+        </div>
+      </div>
+    </div>
+  );
+}
+DataTablePagination.displayName = 'DataTablePagination';
+
+function PaginationButton({
+  children,
+  onClick,
+  disabled,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        'inline-flex h-8 w-8 items-center justify-center rounded-sm border border-input bg-background text-sm',
+        'hover:bg-accent hover:text-accent-foreground',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring'
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

package/src/tools/data/DataTable/parts/DataTableRow.tsx

@@ -0,0 +1,96 @@
+'use client';
+
+import * as React from 'react';
+import { cn } from '@djangocfg/ui-core/lib';
+import { TableRow, TableCell } from '@djangocfg/ui-core/components';
+
+import { useDataTableContext } from '../context/DataTableContext';
+
+interface DataTableRowProps<T> {
+  row: T;
+  index: number;
+}
+
+export function DataTableRow<T>({ row, index }: DataTableRowProps<T>) {
+  const {
+    columns,
+    getRowId,
+    selectionMode,
+    select,
+    isSelected,
+    getRowClassName,
+    onRowClick,
+    onRowDoubleClick,
+  } = useDataTableContext<T>();
+
+  const id = getRowId(row);
+  const selected = isSelected(id);
+
+  const handleClick = React.useCallback(() => {
+    if (selectionMode !== 'none') {
+      select(id);
+    }
+    onRowClick?.(row);
+  }, [id, selectionMode, select, onRowClick, row]);
+
+  const handleDoubleClick = React.useCallback(() => {
+    onRowDoubleClick?.(row);
+  }, [onRowDoubleClick, row]);
+
+  return (
+    <TableRow
+      data-slot="data-table-row"
+      data-id={String(id)}
+      data-selected={selected ? '' : undefined}
+      data-state={selected ? 'selected' : undefined}
+      className={cn(getRowClassName?.(row, index))}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+    >
+      {selectionMode === 'multiple' && (
+        <TableCell>
+          <input
+            type="checkbox"
+            checked={selected}
+            onChange={() => select(id)}
+            className="h-4 w-4 rounded border-border accent-primary"
+            aria-label={`Select row ${String(id)}`}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </TableCell>
+      )}
+      {selectionMode === 'single' && (
+        <TableCell>
+          <input
+            type="radio"
+            checked={selected}
+            onChange={() => select(id)}
+            className="h-4 w-4 border-border accent-primary"
+            aria-label={`Select row ${String(id)}`}
+            onClick={(e) => e.stopPropagation()}
+          />
+        </TableCell>
+      )}
+      {columns.map((col) => (
+        <DataTableCell key={col.key} column={col} row={row} />
+      ))}
+    </TableRow>
+  );
+}
+DataTableRow.displayName = 'DataTableRow';
+
+function DataTableCell<T>({ column, row }: { column: { key: string; cell?: (row: T) => React.ReactNode; align?: 'left' | 'center' | 'right' }; row: T }) {
+  const value = (row as Record<string, unknown>)[column.key];
+  const content = column.cell ? column.cell(row) : value != null ? String(value) : null;
+
+  return (
+    <TableCell
+      className={cn(
+        column.align === 'center' && 'text-center',
+        column.align === 'right' && 'text-right'
+      )}
+    >
+      {content}
+    </TableCell>
+  );
+}

package/src/tools/data/DataTable/parts/index.ts

@@ -0,0 +1,6 @@
+'use client';
+
+export { DataTable } from './DataTable';
+export { DataTableHeader } from './DataTableHeader';
+export { DataTableRow } from './DataTableRow';
+export { DataTablePagination } from './DataTablePagination';

package/src/tools/data/DataTable/types.ts

@@ -0,0 +1,88 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+export type DataTableRowId = string | number;
+
+export type DataTableSortDirection = 'asc' | 'desc' | null;
+
+export interface DataTableColumn<T = unknown> {
+  key: string;
+  header: ReactNode;
+  sortable?: boolean;
+  filterable?: boolean;
+  align?: 'left' | 'center' | 'right';
+  /** Custom cell renderer. Receives the row data. */
+  cell?: (row: T) => ReactNode;
+  /** Custom filter predicate for this column. */
+  filterFn?: (row: T, filterValue: string) => boolean;
+}
+
+export interface DataTableSortState {
+  key: string | null;
+  direction: DataTableSortDirection;
+}
+
+export interface DataTableFilterState {
+  [columnKey: string]: string;
+}
+
+export interface DataTablePaginationState {
+  page: number;
+  pageSize: number;
+}
+
+export type DataTableSelectionMode = 'none' | 'single' | 'multiple';
+
+export interface DataTableProps<T = unknown> {
+  /** Row data */
+  data: T[];
+  /** Column definitions */
+  columns: DataTableColumn<T>[];
+  /** Unique row id getter */
+  getRowId: (row: T) => DataTableRowId;
+
+  /** Selection behaviour. Default: 'none' */
+  selectionMode?: DataTableSelectionMode;
+  /** Initially selected row ids */
+  initialSelectedIds?: DataTableRowId[];
+  /** Triggered when selection changes */
+  onSelectionChange?: (selectedIds: DataTableRowId[]) => void;
+
+  /** Controlled sort state */
+  sort?: DataTableSortState;
+  /** Called when sort changes */
+  onSortChange?: (sort: DataTableSortState) => void;
+  /** Default sort */
+  initialSort?: DataTableSortState;
+
+  /** Controlled filter state */
+  filters?: DataTableFilterState;
+  /** Called when filters change */
+  onFilterChange?: (filters: DataTableFilterState) => void;
+  /** Default filters */
+  initialFilters?: DataTableFilterState;
+
+  /** Controlled pagination */
+  pagination?: DataTablePaginationState;
+  /** Called when pagination changes */
+  onPaginationChange?: (pagination: DataTablePaginationState) => void;
+  /** Default pagination */
+  initialPagination?: DataTablePaginationState;
+  /** Available page sizes. Default: [10, 25, 50, 100] */
+  pageSizeOptions?: number[];
+
+  /** Loading state */
+  loading?: boolean;
+  /** Empty state message */
+  emptyMessage?: ReactNode;
+  /** Row className getter */
+  getRowClassName?: (row: T, index: number) => string;
+  /** Called when a row is clicked */
+  onRowClick?: (row: T) => void;
+  /** Called when a row is double-clicked */
+  onRowDoubleClick?: (row: T) => void;
+
+  className?: string;
+  style?: React.CSSProperties;
+}

package/src/tools/{JsonTree → data/JsonTree}/index.tsx

@@ -2,8 +2,8 @@
 
 import React, { memo, useMemo, useRef } from 'react';
 
-import { FloatingToolbar } from '../../components/FloatingToolbar';
-import { CopyAction, DownloadAction, ExpandAction } from '../../components/FloatingToolbar/actions';
+import { FloatingToolbar } from '../../../components/FloatingToolbar';
+import { CopyAction, DownloadAction, ExpandAction } from '../../../components/FloatingToolbar/actions';
 import { JsonContent } from './components/JsonContent';
 import { useJsonExpand } from './hooks/useJsonExpand';
 import { JsonTreeComponentProps, MODE_PRESETS } from './types';

package/src/tools/{JsonTree → data/JsonTree}/lazy.tsx

@@ -10,7 +10,7 @@
  * import JsonTree from '@djangocfg/ui-tools/json-tree'
  */
 
-import { createLazyComponent, LoadingFallback } from '../../components';
+import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
 import type { JsonTreeConfig, JsonTreeMode } from './index';
 import type { CommonExternalProps } from 'react-json-tree';
 

package/src/tools/data/Kanban/context/KanbanContext.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import * as React from 'react';
+import {
+  createContext,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+import type {
+  KanbanCard,
+  KanbanCardId,
+  KanbanColumn,
+  KanbanColumnId,
+  KanbanDragState,
+  KanbanProps,
+} from '../types';
+
+// =====================================================================
+// Context value
+// =====================================================================
+
+export interface KanbanContextValue {
+  columns: KanbanColumn[];
+  dragState: KanbanDragState;
+  setDragState: React.Dispatch<React.SetStateAction<KanbanDragState>>;
+  moveCard: (cardId: KanbanCardId, fromColumnId: KanbanColumnId, toColumnId: KanbanColumnId, toIndex: number) => void;
+  reorderCard: (columnId: KanbanColumnId, cardId: KanbanCardId, toIndex: number) => void;
+  renderCard?: (card: KanbanCard, columnId: KanbanColumnId) => React.ReactNode;
+  renderColumnHeader?: (column: KanbanColumn) => React.ReactNode;
+  loading: boolean;
+  emptyColumnMessage: React.ReactNode;
+}
+
+const KanbanContext = createContext<KanbanContextValue | null>(null);
+
+export function useKanbanContext(): KanbanContextValue {
+  const ctx = React.useContext(KanbanContext);
+  if (!ctx) {
+    throw new Error('useKanbanContext must be used inside <KanbanProvider>');
+  }
+  return ctx;
+}
+
+// =====================================================================
+// Provider
+// =====================================================================
+
+export interface KanbanProviderProps
+  extends Pick<
+    KanbanProps,
+    | 'columns'
+    | 'onMoveCard'
+    | 'onReorderCard'
+    | 'renderCard'
+    | 'renderColumnHeader'
+    | 'loading'
+    | 'emptyColumnMessage'
+  > {
+  children: React.ReactNode;
+}
+
+export function KanbanProvider(props: KanbanProviderProps) {
+  const {
+    columns: initialColumns,
+    onMoveCard,
+    onReorderCard,
+    renderCard,
+    renderColumnHeader,
+    loading = false,
+    emptyColumnMessage = 'No cards',
+    children,
+  } = props;
+
+  const [columns, setColumns] = useState<KanbanColumn[]>(initialColumns);
+  const [dragState, setDragState] = useState<KanbanDragState>({
+    activeCardId: null,
+    activeColumnId: null,
+    overColumnId: null,
+    overCardId: null,
+  });
+
+  // Sync with external columns prop
+  React.useEffect(() => {
+    setColumns(initialColumns);
+  }, [initialColumns]);
+
+  const moveCard = useCallback(
+    (cardId: KanbanCardId, fromColumnId: KanbanColumnId, toColumnId: KanbanColumnId, toIndex: number) => {
+      setColumns((prev) => {
+        const next = prev.map((col) => ({ ...col, cards: [...col.cards] }));
+        const fromCol = next.find((c) => c.id === fromColumnId);
+        const toCol = next.find((c) => c.id === toColumnId);
+        if (!fromCol || !toCol) return prev;
+
+        const cardIndex = fromCol.cards.findIndex((c) => c.id === cardId);
+        if (cardIndex === -1) return prev;
+
+        const [card] = fromCol.cards.splice(cardIndex, 1);
+        const insertIndex = Math.min(toIndex, toCol.cards.length);
+        toCol.cards.splice(insertIndex, 0, card);
+
+        return next;
+      });
+      onMoveCard?.(cardId, fromColumnId, toColumnId, toIndex);
+    },
+    [onMoveCard],
+  );
+
+  const reorderCard = useCallback(
+    (columnId: KanbanColumnId, cardId: KanbanCardId, toIndex: number) => {
+      setColumns((prev) => {
+        const next = prev.map((col) =>
+          col.id === columnId ? { ...col, cards: [...col.cards] } : col,
+        );
+        const col = next.find((c) => c.id === columnId);
+        if (!col) return prev;
+
+        const fromIndex = col.cards.findIndex((c) => c.id === cardId);
+        if (fromIndex === -1 || fromIndex === toIndex) return prev;
+
+        const [card] = col.cards.splice(fromIndex, 1);
+        const insertIndex = Math.min(toIndex, col.cards.length);
+        col.cards.splice(insertIndex, 0, card);
+
+        return next;
+      });
+      onReorderCard?.(columnId, cardId, toIndex);
+    },
+    [onReorderCard],
+  );
+
+  const value = useMemo<KanbanContextValue>(
+    () => ({
+      columns,
+      dragState,
+      setDragState,
+      moveCard,
+      reorderCard,
+      renderCard,
+      renderColumnHeader,
+      loading,
+      emptyColumnMessage,
+    }),
+    [
+      columns,
+      dragState,
+      moveCard,
+      reorderCard,
+      renderCard,
+      renderColumnHeader,
+      loading,
+      emptyColumnMessage,
+    ],
+  );
+
+  return (
+    <KanbanContext.Provider value={value}>
+      {children}
+    </KanbanContext.Provider>
+  );
+}

package/src/tools/data/Kanban/context/index.ts

@@ -0,0 +1,4 @@
+'use client';
+
+export { KanbanProvider, useKanbanContext } from './KanbanContext';
+export type { KanbanContextValue, KanbanProviderProps } from './KanbanContext';

package/src/tools/data/Kanban/index.ts

@@ -0,0 +1,26 @@
+'use client';
+
+export {
+  KanbanProvider,
+  useKanbanContext,
+} from './context/KanbanContext';
+export type {
+  KanbanContextValue,
+  KanbanProviderProps,
+} from './context/KanbanContext';
+
+export {
+  Kanban,
+  KanbanColumn,
+  KanbanCard,
+  KanbanDragOverlay,
+} from './parts';
+
+export type {
+  KanbanProps,
+  KanbanCard as KanbanCardType,
+  KanbanColumn as KanbanColumnType,
+  KanbanDragState,
+  KanbanCardId,
+  KanbanColumnId,
+} from './types';

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

@@ -0,0 +1,23 @@
+'use client';
+
+import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
+import type { KanbanProps } from './types';
+
+export const LazyKanban = createLazyComponent<KanbanProps>(
+  () => import('./parts/Kanban').then((m) => ({ default: m.Kanban })),
+  {
+    displayName: 'LazyKanban',
+    fallback: <LoadingFallback minHeight={400} text="Loading kanban board…" />,
+  },
+);
+
+// Re-export light surface synchronously
+export * from './types';
+export {
+  KanbanProvider,
+  useKanbanContext,
+} from './context/KanbanContext';
+export type {
+  KanbanContextValue,
+  KanbanProviderProps,
+} from './context/KanbanContext';