@superdangerous/app-framework 4.16.35 → 4.16.36

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

@@ -1,244 +0,0 @@
-/**
- * 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;
-  /** Extra content to render next to the title (e.g. HelpTooltip) */
-  titleExtra?: React.ReactNode;
-  /** 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,
-  titleExtra,
-  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>
-          <div className="group flex items-center gap-2">
-            <h1 className="text-3xl font-bold">{title}</h1>
-            {titleExtra}
-          </div>
-          {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/MultiSelectFilter.tsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { Checkbox } from '../../components/base/checkbox';
-import { Button } from '../../components/base/button';
-import { cn } from '../../src/utils/cn';
-
-export interface MultiSelectOption<T extends string = string> {
-  /** Unique value for this option */
-  value: T;
-  /** Display label */
-  label: string;
-  /** Optional custom render for the label (e.g., with icon/flag) */
-  render?: () => React.ReactNode;
-}
-
-export interface MultiSelectFilterProps<T extends string = string> {
-  /** Available options to select from */
-  options: MultiSelectOption<T>[];
-  /** Currently selected values */
-  selected: Set<T>;
-  /** Called when selection changes */
-  onChange: (selected: Set<T>) => void;
-  /** Maximum height before scrolling (default: 200px) */
-  maxHeight?: number;
-  /** Number of columns for grid layout (default: 2) */
-  columns?: 1 | 2 | 3;
-  /** Show select all / clear buttons */
-  showBulkActions?: boolean;
-  /** Optional className for the container */
-  className?: string;
-}
-
-/**
- * MultiSelectFilter - A checkbox-based multi-select filter component
- *
- * Designed to work with the TableFilters popover for filtering data tables.
- * Supports custom rendering per option (for flags, badges, icons, etc.)
- */
-export function MultiSelectFilter<T extends string = string>({
-  options,
-  selected,
-  onChange,
-  maxHeight = 200,
-  columns = 2,
-  showBulkActions = true,
-  className,
-}: MultiSelectFilterProps<T>) {
-  const handleToggle = (value: T) => {
-    const newSelected = new Set(selected);
-    if (newSelected.has(value)) {
-      newSelected.delete(value);
-    } else {
-      newSelected.add(value);
-    }
-    onChange(newSelected);
-  };
-
-  const handleSelectAll = () => {
-    onChange(new Set(options.map(o => o.value)));
-  };
-
-  const handleClear = () => {
-    onChange(new Set());
-  };
-
-  const gridCols = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-2',
-    3: 'grid-cols-3',
-  };
-
-  const allSelected = options.length > 0 && selected.size === options.length;
-  const noneSelected = selected.size === 0;
-
-  return (
-    <div className={cn('space-y-2', className)}>
-      {/* Bulk action buttons */}
-      {showBulkActions && options.length > 3 && (
-        <div className="flex items-center gap-2 text-xs">
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={handleSelectAll}
-            disabled={allSelected}
-            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            Select all
-          </Button>
-          <span className="text-muted-foreground">·</span>
-          <Button
-            type="button"
-            variant="ghost"
-            size="sm"
-            onClick={handleClear}
-            disabled={noneSelected}
-            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
-          >
-            Clear
-          </Button>
-          {selected.size > 0 && (
-            <>
-              <span className="text-muted-foreground">·</span>
-              <span className="text-muted-foreground">
-                {selected.size} selected
-              </span>
-            </>
-          )}
-        </div>
-      )}
-
-      {/* Options grid */}
-      <div
-        className={cn('overflow-y-auto', options.length > 6 && 'pr-1')}
-        style={{ maxHeight: `${maxHeight}px` }}
-      >
-        <div className={cn('grid gap-1', gridCols[columns])}>
-          {options.map((option) => (
-            <label
-              key={option.value}
-              className={cn(
-                'flex items-center gap-2 px-2 py-1.5 rounded-md cursor-pointer',
-                'hover:bg-muted/50 transition-colors',
-                selected.has(option.value) && 'bg-muted/30'
-              )}
-            >
-              <Checkbox
-                checked={selected.has(option.value)}
-                onCheckedChange={() => handleToggle(option.value)}
-                className="h-3.5 w-3.5"
-              />
-              {option.render ? (
-                <span className="flex items-center gap-1.5 text-sm truncate">
-                  {option.render()}
-                </span>
-              ) : (
-                <span className="text-sm truncate">{option.label}</span>
-              )}
-            </label>
-          ))}
-        </div>
-      </div>
-
-      {/* Empty state */}
-      {options.length === 0 && (
-        <div className="text-sm text-muted-foreground text-center py-2">
-          No options available
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default MultiSelectFilter;

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

@@ -1,203 +0,0 @@
-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>
-  );
-}