@djangocfg/widget-data 0.1.1

package/src/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/DataTable/parts/DataTablePagination.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import * as React from 'react';
+import {
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@djangocfg/ui-core/components';
+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 border-t border-border 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={String(pagination.pageSize)}
+          onValueChange={(value) => setPageSize(Number(value))}
+        >
+          {/* `--radius` is the shared control corner used by ui-core <Button>,
+            * so the page-size trigger and the nav buttons round identically. */}
+          <SelectTrigger
+            className="h-8 w-auto gap-1 rounded-[var(--radius)] px-2 shadow-none"
+            aria-label="Rows per page"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {size} / page
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        {/* Nav controls reuse the library <Button> (outline/icon) rather than a
+          * bespoke button, so hover, disabled, focus-ring and radius all track
+          * the rest of the app automatically. `h-8 w-8` shrinks the default
+          * icon size (h-9 w-9) to match the compact pagination row.
+          * `elevated={false}` drops the variant's shadow so the buttons sit
+          * flat against the panel, matching the shadow-less page-size select. */}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
+            onClick={() => setPage(1)}
+            disabled={pagination.page <= 1}
+            aria-label="First page"
+          >
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
+            onClick={() => setPage(pagination.page - 1)}
+            disabled={pagination.page <= 1}
+            aria-label="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          <span className="px-2 text-sm tabular-nums">
+            {pagination.page} / {pageCount}
+          </span>
+
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
+            onClick={() => setPage(pagination.page + 1)}
+            disabled={pagination.page >= pageCount}
+            aria-label="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            elevated={false}
+            className="h-8 w-8"
+            onClick={() => setPage(pageCount)}
+            disabled={pagination.page >= pageCount}
+            aria-label="Last page"
+          >
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+DataTablePagination.displayName = 'DataTablePagination';

package/src/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/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/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/FileIcon/FileIcon.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+import { getFileIcon } from './get-file-icon';
+import { resolveFolderIcon, type FolderIconOverrides } from './specialFolders';
+
+export type FileIconSize = 12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 40 | 48 | 64;
+
+export interface FileIconProps {
+  /** File name (with extension) or folder name. */
+  name: string;
+  /** Render a folder icon instead of a file icon. */
+  isFolder?: boolean;
+  /** Folder open / closed state. Ignored when `isFolder` is false. */
+  isExpanded?: boolean;
+  /** Pixel size of the icon. */
+  size?: FileIconSize;
+  /**
+   * Override or extend the built-in special-folder mapping. Keys are
+   * matched case-insensitively. Only used when `isFolder` is true.
+   */
+  folderOverrides?: FolderIconOverrides;
+  /**
+   * Accessible label. When omitted the icon is decorative (`aria-hidden`) —
+   * correct when it sits next to a visible file name. Pass a string to
+   * expose the icon to assistive technology.
+   */
+  label?: string;
+  className?: string;
+}
+
+/**
+ * VSCode-style file icon.
+ *
+ * - Folders render Lucide `Folder` / `FolderOpen` (warning-token tint).
+ * - Files render rich, colourful SVGs vendored from `material-file-icons`
+ *   (MIT). Resolution is synchronous — no runtime dependency, no async load.
+ *
+ * The icon SVG data is a static module, so it bundles into the `FileIcon`
+ * chunk and is only fetched by consumers that actually mount this component.
+ */
+export function FileIcon({
+  name,
+  isFolder = false,
+  isExpanded = false,
+  size = 16,
+  folderOverrides,
+  label,
+  className,
+}: FileIconProps) {
+  // Either a labelled image, or fully hidden from assistive tech (the default,
+  // since the icon usually sits beside a visible file name).
+  const a11y =
+    label === undefined
+      ? ({ 'aria-hidden': true } as const)
+      : ({ role: 'img', 'aria-label': label } as const);
+
+  if (isFolder) {
+    const Icon = resolveFolderIcon({
+      name,
+      isExpanded,
+      overrides: folderOverrides,
+    });
+    return (
+      <Icon
+        {...a11y}
+        className={cn('shrink-0 text-warning', className)}
+        style={{ width: size, height: size }}
+      />
+    );
+  }
+
+  // Vendored static data — `getFileIcon` always returns a definition.
+  const svg = getFileIcon(name).svg;
+
+  return (
+    <span
+      {...a11y}
+      className={cn('inline-block shrink-0', className)}
+      style={{ width: size, height: size }}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}
+
+export default FileIcon;

package/src/FileIcon/get-file-icon.ts

@@ -0,0 +1,73 @@
+'use client';
+
+/**
+ * Resolver for VSCode-style file icons. Replaces the former optional
+ * `material-file-icons` runtime dependency — the icon SVGs are now vendored
+ * as a static data module (`./icons/icon-data`), so the bundler resolves them
+ * deterministically with no dynamic `import()` and no `@vite-ignore`.
+ *
+ * Lookup matches the original `material-file-icons` algorithm:
+ *   1. exact full-name match (`files[]`, lowercased)
+ *   2. longest matching extension (`name.endsWith('.' + ext)`)
+ *   3. fall back to the default file icon
+ *
+ * The `files` / `extensions` lookup maps are built lazily on first call.
+ */
+
+import {
+  DEFAULT_FILE_ICON,
+  FILE_ICONS,
+  type FileIconDef,
+} from './icons/icon-data';
+
+export type { FileIconDef };
+export { DEFAULT_FILE_ICON };
+
+/** Full-name → icon (e.g. `dockerfile`, `.gitignore`). */
+let fileMap: Map<string, FileIconDef> | null = null;
+/** Extension → icon. When several icons share an extension, last wins. */
+let extMap: Map<string, FileIconDef> | null = null;
+
+function buildIndex(): void {
+  fileMap = new Map();
+  extMap = new Map();
+  for (const icon of FILE_ICONS) {
+    if (icon.files) {
+      for (const f of icon.files) fileMap.set(f, icon);
+    }
+    if (icon.extensions) {
+      for (const ext of icon.extensions) extMap.set(ext, icon);
+    }
+  }
+}
+
+/**
+ * Resolve the icon definition for a file name. Always returns a definition —
+ * unknown types yield {@link DEFAULT_FILE_ICON}.
+ */
+export function getFileIcon(filename: string): FileIconDef {
+  if (typeof filename !== 'string' || filename.length === 0) {
+    return DEFAULT_FILE_ICON;
+  }
+  if (fileMap === null || extMap === null) buildIndex();
+
+  const lc = filename.toLowerCase();
+
+  // 1. Exact full-name match.
+  const byName = fileMap!.get(lc);
+  if (byName) return byName;
+
+  // 2. Longest matching extension.
+  let match: FileIconDef | null = null;
+  let matchLength = 0;
+  for (const [ext, icon] of extMap!) {
+    if (ext.length > matchLength && lc.endsWith(`.${ext}`)) {
+      match = icon;
+      matchLength = ext.length;
+    }
+  }
+  if (match) return match;
+
+  // 3. Fallback.
+  return DEFAULT_FILE_ICON;
+}