@superdangerous/app-framework 4.14.0 → 4.15.1

package/ui/data-table/components/DataTablePage.tsx

@@ -0,0 +1,238 @@
+/**
+ * DataTablePage - Full-height data table layout with integrated header
+ *
+ * This component provides a desktop-app style layout where:
+ * - The header contains search, filters, action buttons, AND pagination controls
+ * - The data table fills the available vertical space between header and footer
+ * - Pagination controls appear inline in the header (right side)
+ *
+ * Usage:
+ * ```tsx
+ * <DataTablePage
+ *   title="Issues"
+ *   description="Review and manage detected code issues"
+ *   search={searchTerm}
+ *   onSearchChange={setSearchTerm}
+ *   searchPlaceholder="Search issues..."
+ *   filters={filterOptions}
+ *   activeFilterCount={countActiveFilters}
+ *   onClearFilters={clearFilters}
+ *   pagination={pagination}
+ *   actions={<>
+ *     <Button>Refresh</Button>
+ *     <Button>Export</Button>
+ *   </>}
+ * >
+ *   <DataTable ... hidePagination />
+ * </DataTablePage>
+ * ```
+ */
+
+import React from 'react';
+import { Search, Filter, X } from 'lucide-react';
+import { Input } from '../../components/base/input';
+import { Button } from '../../components/base/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/base/popover';
+import { cn } from '../../src/utils/cn';
+import { PaginationControls, type PaginationControlsProps } from './PaginationControls';
+
+export interface FilterOption {
+  id: string;
+  label: string;
+  render: () => React.ReactNode;
+}
+
+export interface DataTablePageProps {
+  /** Page title */
+  title: string;
+  /** Page description */
+  description?: string;
+  /** Search term */
+  search?: string;
+  /** Search change handler */
+  onSearchChange?: (value: string) => void;
+  /** Search placeholder text */
+  searchPlaceholder?: string;
+  /** Filter options for popover */
+  filters?: FilterOption[];
+  /** Number of active filters */
+  activeFilterCount?: number;
+  /** Clear all filters handler */
+  onClearFilters?: () => void;
+  /** Pagination props from usePagination hook */
+  pagination?: PaginationControlsProps;
+  /** Action buttons to show in the header */
+  actions?: React.ReactNode;
+  /** Content before the table (e.g., BatchActionsBar) */
+  beforeTable?: React.ReactNode;
+  /** The DataTable component */
+  children: React.ReactNode;
+  /** Additional class for the container */
+  className?: string;
+  /** Whether to show a loading state */
+  loading?: boolean;
+  /** Loading component to show */
+  loadingComponent?: React.ReactNode;
+}
+
+export function DataTablePage({
+  title,
+  description,
+  search,
+  onSearchChange,
+  searchPlaceholder = 'Search...',
+  filters,
+  activeFilterCount = 0,
+  onClearFilters,
+  pagination,
+  actions,
+  beforeTable,
+  children,
+  className,
+  loading,
+  loadingComponent,
+}: DataTablePageProps) {
+  // Always show pagination controls when pagination is provided (for row count selector)
+  const showPagination = pagination && pagination.totalItems > 0;
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      {/* Page Header - has horizontal padding */}
+      <div className="data-table-page-header flex-shrink-0 space-y-4 pb-4">
+        {/* Title */}
+        <div>
+          <h1 className="text-3xl font-bold">{title}</h1>
+          {description && (
+            <p className="text-muted-foreground">{description}</p>
+          )}
+        </div>
+
+        {/* Controls Row: Search | Filters | Pagination | Spacer | Actions */}
+        <div className="flex items-center gap-3 flex-wrap">
+          {/* Search Input - responsive width */}
+          {onSearchChange !== undefined && (
+            <div className="relative w-full sm:w-auto sm:min-w-[200px] sm:max-w-xs">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-10" />
+              <Input
+                placeholder={searchPlaceholder}
+                value={search || ''}
+                onChange={(e) => onSearchChange(e.target.value)}
+                className="pl-9 h-9"
+              />
+              {search && (
+                <button
+                  type="button"
+                  onClick={() => onSearchChange('')}
+                  className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 rounded-sm hover:bg-muted"
+                >
+                  <X className="h-3 w-3 text-muted-foreground" />
+                </button>
+              )}
+            </div>
+          )}
+
+          {/* Filters Popover */}
+          {filters && filters.length > 0 && (
+            <Popover>
+              <PopoverTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2 h-9">
+                  <Filter className="h-4 w-4" />
+                  <span className="hidden sm:inline">Filters</span>
+                  {activeFilterCount > 0 && (
+                    <span className="rounded-full bg-primary text-primary-foreground px-2 py-0.5 text-xs font-medium">
+                      {activeFilterCount}
+                    </span>
+                  )}
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent
+                className="w-80 overflow-y-auto"
+                align="start"
+                collisionPadding={16}
+                style={{ maxHeight: 'var(--radix-popover-content-available-height)' }}
+              >
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <h4 className="font-medium text-sm">Filters</h4>
+                    {activeFilterCount > 0 && onClearFilters && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={onClearFilters}
+                        className="h-auto p-0 text-xs text-destructive hover:text-destructive"
+                      >
+                        Clear all
+                      </Button>
+                    )}
+                  </div>
+
+                  <div className="space-y-3">
+                    {filters.map((filter) => (
+                      <div key={filter.id} className="space-y-1.5">
+                        <label className="text-xs font-medium text-muted-foreground">
+                          {filter.label}
+                        </label>
+                        {filter.render()}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </PopoverContent>
+            </Popover>
+          )}
+
+          {/* Clear filters button (visible when filters are active) */}
+          {activeFilterCount > 0 && onClearFilters && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onClearFilters}
+              className="h-9 gap-1.5 text-muted-foreground hover:text-foreground"
+              title="Clear filters"
+            >
+              <X className="h-4 w-4" />
+              <span className="hidden sm:inline">Clear</span>
+            </Button>
+          )}
+
+          {/* Pagination Controls (after filters) */}
+          {showPagination && (
+            <PaginationControls {...pagination} />
+          )}
+
+          {/* Spacer */}
+          <div className="flex-1" />
+
+          {/* Action buttons (right side) - never wrap */}
+          {actions && (
+            <div className="flex items-center gap-2 flex-shrink-0">
+              {actions}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Before Table Content (e.g., BatchActionsBar) - with padding */}
+      {beforeTable && (
+        <div className="px-6 pb-2">
+          {beforeTable}
+        </div>
+      )}
+
+      {/* Table Container - edge to edge, scrolls both directions */}
+      <div className="relative flex-1 min-h-0">
+        <div className="data-table-scroll-container h-full">
+          {loading ? (
+            loadingComponent || (
+              <div className="flex items-center justify-center h-full">
+                <div className="text-muted-foreground">Loading...</div>
+              </div>
+            )
+          ) : (
+            children
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/data-table/components/Pagination.tsx

@@ -0,0 +1,203 @@
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from 'lucide-react';
+import { Button } from '../../components/base/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/base/select';
+import { cn } from '../../src/utils/cn';
+
+interface PaginationProps {
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  totalItems: number;
+  startIndex: number;
+  endIndex: number;
+  canGoNext: boolean;
+  canGoPrev: boolean;
+  pageSizeOptions: number[];
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (size: number) => void;
+  onNextPage: () => void;
+  onPrevPage: () => void;
+  onFirstPage: () => void;
+  onLastPage: () => void;
+  className?: string;
+}
+
+export function Pagination({
+  page,
+  pageSize,
+  totalPages,
+  totalItems,
+  startIndex,
+  endIndex,
+  canGoNext,
+  canGoPrev,
+  pageSizeOptions,
+  onPageChange,
+  onPageSizeChange,
+  onNextPage,
+  onPrevPage,
+  onFirstPage,
+  onLastPage,
+  className,
+}: PaginationProps) {
+  // Generate page numbers to show
+  const getPageNumbers = () => {
+    const pages: (number | 'ellipsis')[] = [];
+    const showPages = 5; // Max pages to show
+    const halfShow = Math.floor(showPages / 2);
+
+    let startPage = Math.max(1, page - halfShow);
+    let endPage = Math.min(totalPages, page + halfShow);
+
+    // Adjust range if near edges
+    if (page <= halfShow) {
+      endPage = Math.min(totalPages, showPages);
+    }
+    if (page > totalPages - halfShow) {
+      startPage = Math.max(1, totalPages - showPages + 1);
+    }
+
+    // Add first page and ellipsis if needed
+    if (startPage > 1) {
+      pages.push(1);
+      if (startPage > 2) {
+        pages.push('ellipsis');
+      }
+    }
+
+    // Add middle pages
+    for (let i = startPage; i <= endPage; i++) {
+      if (i !== 1 && i !== totalPages) {
+        pages.push(i);
+      }
+    }
+
+    // Add ellipsis and last page if needed
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pages.push('ellipsis');
+      }
+      pages.push(totalPages);
+    }
+
+    return pages;
+  };
+
+  if (totalItems === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col sm:flex-row items-center justify-between gap-4 px-2 py-3',
+        className
+      )}
+    >
+      {/* Items info */}
+      <div className="text-sm text-muted-foreground">
+        Showing {startIndex} to {endIndex} of {totalItems} items
+      </div>
+
+      {/* Controls */}
+      <div className="flex items-center gap-4">
+        {/* Page size selector */}
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">Per page:</span>
+          <Select
+            value={String(pageSize)}
+            onValueChange={(v) => onPageSizeChange(Number(v))}
+          >
+            <SelectTrigger className="w-20 h-8">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={String(size)}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Page navigation */}
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={onFirstPage}
+            disabled={!canGoPrev}
+            title="First page"
+          >
+            <ChevronsLeft className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={onPrevPage}
+            disabled={!canGoPrev}
+            title="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          {/* Page numbers */}
+          <div className="flex items-center gap-1">
+            {getPageNumbers().map((pageNum, idx) =>
+              pageNum === 'ellipsis' ? (
+                <span key={`ellipsis-${idx}`} className="px-2 text-muted-foreground">
+                  ...
+                </span>
+              ) : (
+                <Button
+                  key={pageNum}
+                  variant={page === pageNum ? 'default' : 'outline'}
+                  size="icon"
+                  className="h-8 w-8"
+                  onClick={() => onPageChange(pageNum)}
+                >
+                  {pageNum}
+                </Button>
+              )
+            )}
+          </div>
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={onNextPage}
+            disabled={!canGoNext}
+            title="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={onLastPage}
+            disabled={!canGoNext}
+            title="Last page"
+          >
+            <ChevronsRight className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/ui/data-table/components/PaginationControls.tsx

@@ -0,0 +1,122 @@
+/**
+ * PaginationControls - Compact inline pagination for table headers
+ *
+ * A condensed version of pagination controls designed to sit alongside
+ * search/filter controls in a table header bar.
+ */
+
+import {
+  ChevronLeft,
+  ChevronRight,
+} from 'lucide-react';
+import { Button } from '../../components/base/button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../components/base/select';
+import { cn } from '../../src/utils/cn';
+
+export interface PaginationControlsProps {
+  page: number;
+  pageSize: number;
+  totalPages: number;
+  totalItems: number;
+  startIndex: number;
+  endIndex: number;
+  canGoNext: boolean;
+  canGoPrev: boolean;
+  pageSizeOptions: number[];
+  setPage: (page: number) => void;
+  setPageSize: (size: number) => void;
+  nextPage: () => void;
+  prevPage: () => void;
+  className?: string;
+}
+
+export function PaginationControls({
+  page,
+  pageSize,
+  totalPages,
+  totalItems,
+  startIndex,
+  endIndex,
+  canGoNext,
+  canGoPrev,
+  pageSizeOptions,
+  setPage: _setPage,
+  setPageSize,
+  nextPage,
+  prevPage,
+  className,
+}: PaginationControlsProps) {
+  // Note: setPage is included for API compatibility with usePagination but not used
+  // as this component only provides prev/next navigation
+  void _setPage;
+  if (totalItems === 0) {
+    return null;
+  }
+
+  return (
+    <div className={cn('flex items-center gap-3 text-sm', className)}>
+      {/* Page size selector - hidden on small screens */}
+      <div className="hidden md:flex items-center gap-1.5">
+        <span className="text-muted-foreground hidden lg:inline">Rows:</span>
+        <Select
+          value={String(pageSize)}
+          onValueChange={(v) => setPageSize(Number(v))}
+        >
+          <SelectTrigger className="w-16 h-8 text-xs">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((size) => (
+              <SelectItem key={size} value={String(size)}>
+                {size}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Page navigation - always visible when there are multiple pages */}
+      {totalPages > 1 && (
+        <div className="flex items-center gap-1">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={prevPage}
+            disabled={!canGoPrev}
+            title="Previous page"
+          >
+            <ChevronLeft className="h-4 w-4" />
+          </Button>
+
+          {/* Page indicator - hidden on very small screens */}
+          <span className="hidden sm:inline px-2 text-muted-foreground tabular-nums min-w-[60px] text-center">
+            {page} / {totalPages}
+          </span>
+
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8"
+            onClick={nextPage}
+            disabled={!canGoNext}
+            title="Next page"
+          >
+            <ChevronRight className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* Items info - hidden on smaller screens */}
+      <span className="text-muted-foreground whitespace-nowrap hidden lg:inline">
+        Showing {startIndex}–{endIndex} of {totalItems}
+      </span>
+    </div>
+  );
+}

package/ui/data-table/components/TableFilters.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Search, Filter, X } from 'lucide-react';
+import { Input } from '../../components/base/input';
+import { Button } from '../../components/base/button';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/base/popover';
+import { cn } from '../../src/utils/cn';
+
+export interface FilterOption {
+  id: string;
+  label: string;
+  render: () => React.ReactNode;
+}
+
+export interface TableFiltersProps {
+  search?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+  filters?: FilterOption[];
+  activeFilterCount?: number;
+  onClearFilters?: () => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * TableFilters - Compact filter controls for data tables
+ *
+ * Features:
+ * - Search input
+ * - Popover filter menu with badge showing active count
+ * - Clear all filters button
+ * - Custom filter components via render prop
+ * - Children slot for additional action buttons
+ */
+export function TableFilters({
+  search,
+  onSearchChange,
+  searchPlaceholder = 'Search...',
+  filters,
+  activeFilterCount = 0,
+  onClearFilters,
+  className,
+  children,
+}: TableFiltersProps) {
+  return (
+    <div className={cn('flex items-center gap-3 flex-wrap', className)}>
+      {/* Search Input */}
+      {onSearchChange !== undefined && (
+        <div className="relative flex-1 min-w-[200px] max-w-xs">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-10" />
+          <Input
+            placeholder={searchPlaceholder}
+            value={search || ''}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 h-9"
+          />
+          {search && (
+            <button
+              type="button"
+              onClick={() => onSearchChange('')}
+              className="absolute right-2 top-1/2 transform -translate-y-1/2 p-1 rounded-sm hover:bg-muted"
+            >
+              <X className="h-3 w-3 text-muted-foreground" />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Filters Popover */}
+      {filters && filters.length > 0 && (
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline" size="sm" className="gap-2 h-9">
+              <Filter className="h-4 w-4" />
+              Filters
+              {activeFilterCount > 0 && (
+                <span className="ml-1 rounded-full bg-primary text-primary-foreground px-2 py-0.5 text-xs font-medium">
+                  {activeFilterCount}
+                </span>
+              )}
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent
+            className="w-80 overflow-y-auto"
+            align="start"
+            collisionPadding={16}
+            style={{ maxHeight: 'var(--radix-popover-content-available-height)' }}
+          >
+            <div className="space-y-4">
+              <div className="flex items-center justify-between">
+                <h4 className="font-medium text-sm">Filters</h4>
+                {activeFilterCount > 0 && onClearFilters && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onClearFilters}
+                    className="h-auto p-0 text-xs text-destructive hover:text-destructive"
+                  >
+                    Clear all
+                  </Button>
+                )}
+              </div>
+
+              <div className="space-y-3">
+                {filters.map((filter) => (
+                  <div key={filter.id} className="space-y-1.5">
+                    <label className="text-xs font-medium text-muted-foreground">
+                      {filter.label}
+                    </label>
+                    {filter.render()}
+                  </div>
+                ))}
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      )}
+
+      {/* Clear filters button (visible when filters are active, outside popover) */}
+      {activeFilterCount > 0 && onClearFilters && (
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={onClearFilters}
+          className="h-9 gap-1.5 text-muted-foreground hover:text-foreground"
+        >
+          <X className="h-4 w-4" />
+          Clear
+        </Button>
+      )}
+
+      {/* Spacer to push children to the right */}
+      <div className="flex-1" />
+
+      {/* Custom children (e.g., export button, create button, etc.) */}
+      {children}
+    </div>
+  );
+}