@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/atoms/composed/DataTable/DataTable.tsx

@@ -0,0 +1,394 @@
+import React, { useState, useMemo } from 'react';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../../ui/table';
+import { Input } from '../../ui/input';
+import { Button } from '../../ui/button';
+import { Skeleton } from '../../ui/skeleton';
+import { DataBadge } from '../DataBadge';
+import { cn, tooltipContent } from '../../utils/utils';
+import type { IListLoadable } from '../../types';
+import { 
+  ChevronDown, 
+  ChevronUp, 
+  ChevronsUpDown,
+  Search,
+  X
+} from 'lucide-react';
+
+export interface Column<T> {
+  key: string;
+  header: string | React.ReactNode;
+  cell?: (item: T) => React.ReactNode;
+  sortable?: boolean;
+  filterable?: boolean;
+  width?: string;
+  /** Auto-render badges for status/category columns */
+  type?: 'status' | 'category' | 'default';
+}
+
+interface DataTableProps<T> extends IListLoadable {
+  data: T[];
+  columns: Column<T>[];
+  searchPlaceholder?: string;
+  pageSize?: number;
+  showPagination?: boolean;
+  showSearch?: boolean;
+  onRowClick?: (item: T) => void;
+  emptyMessage?: string;
+  className?: string;
+  /** Enable hover effects on table rows */
+  hover?: boolean;
+}
+
+type SortDirection = 'asc' | 'desc' | null;
+
+export function DataTable<T extends Record<string, unknown>>({
+  data,
+  columns,
+  searchPlaceholder = "Search...",
+  pageSize = 10,
+  showPagination = true,
+  showSearch = true,
+  onRowClick,
+  emptyMessage = "No data available",
+  className = "",
+  hover = false,
+  isLoading = false,
+  loadingItemCount = 5
+}: DataTableProps<T>) {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortColumn, setSortColumn] = useState<string | null>(null);
+  const [sortDirection, setSortDirection] = useState<SortDirection>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Filter data based on search term
+  const filteredData = useMemo(() => {
+    if (!searchTerm) return data;
+    
+    return data.filter(item => {
+      const searchableColumns = columns.filter(col => col.filterable !== false);
+      return searchableColumns.some(col => {
+        const value = item[col.key];
+        if (value === null || value === undefined) return false;
+        return value.toString().toLowerCase().includes(searchTerm.toLowerCase());
+      });
+    });
+  }, [data, searchTerm, columns]);
+
+  // Sort data
+  const sortedData = useMemo(() => {
+    if (!sortColumn || !sortDirection) return filteredData;
+    
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[sortColumn];
+      const bVal = b[sortColumn];
+      
+      if (aVal === null || aVal === undefined) return 1;
+      if (bVal === null || bVal === undefined) return -1;
+      
+      const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+      return sortDirection === 'asc' ? comparison : -comparison;
+    });
+  }, [filteredData, sortColumn, sortDirection]);
+
+  // Paginate data
+  const paginatedData = useMemo(() => {
+    if (!showPagination) return sortedData;
+    
+    const start = (currentPage - 1) * pageSize;
+    const end = start + pageSize;
+    return sortedData.slice(start, end);
+  }, [sortedData, currentPage, pageSize, showPagination]);
+
+  const totalPages = Math.ceil(sortedData.length / pageSize);
+
+  const handleSort = (columnKey: string) => {
+    if (sortColumn === columnKey) {
+      if (sortDirection === 'asc') {
+        setSortDirection('desc');
+      } else if (sortDirection === 'desc') {
+        setSortDirection(null);
+        setSortColumn(null);
+      }
+    } else {
+      setSortColumn(columnKey);
+      setSortDirection('asc');
+    }
+  };
+
+  const getSortIcon = (columnKey: string) => {
+    if (sortColumn !== columnKey) {
+      return <ChevronsUpDown className="w-4 h-4 text-muted-foreground" />;
+    }
+    if (sortDirection === 'asc') {
+      return <ChevronUp className="w-4 h-4" />;
+    }
+    return <ChevronDown className="w-4 h-4" />;
+  };
+
+  // Smart cell renderer that auto-detects and renders badges
+  const renderCell = (column: Column<T>, item: T) => {
+    // If custom cell renderer is provided, use it
+    if (column.cell) {
+      return column.cell(item);
+    }
+
+    const value = item[column.key];
+    
+    // Auto-detect column type from key name if not specified
+    const columnType = column.type || (
+      column.key.toLowerCase().includes('status') ? 'status' :
+      column.key.toLowerCase().includes('category') ? 'category' :
+      'default'
+    );
+
+    // Render badges for status and category columns
+    if (columnType === 'status' && typeof value === 'string') {
+      const status = value as 'success' | 'warning' | 'error' | 'info' | 'neutral';
+      return (
+        <DataBadge variant="status" status={status} size="sm">
+          {value.toString()}
+        </DataBadge>
+      );
+    }
+
+    if (columnType === 'category') {
+      // For category, try to map value to category number (1-8)
+      const categoryMap: Record<string, number> = {
+        'Analytics': 1, 'Finance': 2, 'Product': 3, 'Sales': 4,
+        'Marketing': 5, 'Operations': 6, 'Engineering': 7, 'Data': 8
+      };
+      const categoryNum = typeof value === 'string' ? categoryMap[value] || 1 : 1;
+      
+      return (
+        <DataBadge variant="category" category={categoryNum as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8} size="sm">
+          {value?.toString()}
+        </DataBadge>
+      );
+    }
+
+    // Default rendering
+    return value?.toString() || '-';
+  };
+
+  // Loading state skeleton that matches DataTable dimensions
+  if (isLoading) {
+    return (
+      <div className={cn("space-y-4", className)} data-component-name="DataTable">
+        {/* Search bar skeleton */}
+        {showSearch && (
+          <div className="flex items-center gap-2">
+            <div className="relative flex-1 max-w-sm">
+              <Skeleton className="h-10 w-full" />
+            </div>
+          </div>
+        )}
+
+        {/* Table skeleton */}
+        <div className="rounded border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {columns.map(column => (
+                  <TableHead key={column.key} style={{ width: column.width }}>
+                    <div className="flex items-center gap-2">
+                      <Skeleton className="h-4 w-20" />
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {Array.from({ length: loadingItemCount }, (_, index) => (
+                <TableRow key={index}>
+                  {columns.map(column => (
+                    <TableCell key={column.key}>
+                      <Skeleton className="h-4 w-full max-w-32" />
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* Pagination skeleton */}
+        {showPagination && (
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-4 w-48" />
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-8 w-20" />
+              <div className="flex items-center gap-1">
+                {Array.from({ length: 3 }, (_, i) => (
+                  <Skeleton key={i} className="h-8 w-8" />
+                ))}
+              </div>
+              <Skeleton className="h-8 w-16" />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-4", className)} data-component-name="DataTable">
+      {/* Search bar */}
+      {showSearch && (
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" data-component-name="DataTableSearch" />
+            <Input
+              type="text"
+              placeholder={searchPlaceholder}
+              value={searchTerm}
+              onChange={(e) => {
+                setSearchTerm(e.target.value);
+                setCurrentPage(1);
+              }}
+              className="pl-10 pr-10"
+            />
+            {searchTerm && (
+              <Button
+                onClick={() => {
+                  setSearchTerm('');
+                  setCurrentPage(1);
+                }}
+                variant="ghost"
+                size="icon"
+                className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8"
+                tooltip={tooltipContent.clearSearch}
+              >
+                <X className="w-4 h-4" data-component-name="DataTableClear" />
+              </Button>
+            )}
+          </div>
+          {searchTerm && (
+            <div className="text-muted-foreground text-sm">
+              {sortedData.length} result{sortedData.length !== 1 ? 's' : ''}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Table */}
+      <div className="rounded border overflow-hidden">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map(column => (
+                <TableHead 
+                  key={column.key}
+                  style={{ width: column.width }}
+                  className={column.sortable !== false && typeof column.header === 'string' ? 'cursor-pointer select-none' : ''}
+                  onClick={() => column.sortable !== false && typeof column.header === 'string' && handleSort(column.key)}
+                >
+                  <div className="flex items-center gap-2">
+                    {typeof column.header === 'string' ? (
+                      <>
+                        <span>{column.header}</span>
+                        {column.sortable !== false && getSortIcon(column.key)}
+                      </>
+                    ) : (
+                      column.header
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {paginatedData.length === 0 ? (
+              <TableRow>
+                <TableCell 
+                  colSpan={columns.length} 
+                  className="text-center py-8 text-muted-foreground"
+                >
+                  {emptyMessage}
+                </TableCell>
+              </TableRow>
+            ) : (
+              paginatedData.map((item, index) => (
+                <TableRow 
+                  key={index}
+                  className={cn(
+                    onRowClick && 'cursor-pointer',
+                    (hover || onRowClick) && 'hover:bg-muted/50'
+                  )}
+                  onClick={() => onRowClick?.(item)}
+                >
+                  {columns.map(column => (
+                    <TableCell key={column.key}>
+                      {renderCell(column, item)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Pagination */}
+      {showPagination && totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <div className="text-muted-foreground text-sm">
+            Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, sortedData.length)} of {sortedData.length} entries
+          </div>
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+              disabled={currentPage === 1}
+              tooltip={tooltipContent.previous}
+            >
+              Previous
+            </Button>
+            <div className="flex items-center gap-1">
+              {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
+                let pageNum;
+                if (totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (currentPage <= 3) {
+                  pageNum = i + 1;
+                } else if (currentPage >= totalPages - 2) {
+                  pageNum = totalPages - 4 + i;
+                } else {
+                  pageNum = currentPage - 2 + i;
+                }
+                
+                return (
+                  <Button
+                    key={pageNum}
+                    variant={currentPage === pageNum ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCurrentPage(pageNum)}
+                    className="w-8 h-8"
+                  >
+                    {pageNum}
+                  </Button>
+                );
+              })}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
+              disabled={currentPage === totalPages}
+              tooltip={tooltipContent.next}
+            >
+              Next
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/atoms/composed/DataTable/TableCellWithTooltip.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TableCell } from '../../ui/table';
+import { Tooltip } from '../Tooltip';
+import { useTextOverflow } from '../../utils/utils';
+
+interface TableCellWithTooltipProps {
+  children: React.ReactNode;
+  className?: string;
+  /** Maximum width before truncating */
+  maxWidth?: string;
+}
+
+export const TableCellWithTooltip: React.FC<TableCellWithTooltipProps> = ({
+  children,
+  className,
+  maxWidth = '200px'
+}) => {
+  const { ref, isOverflowing } = useTextOverflow();
+  
+  const cellContent = (
+    <div 
+      ref={ref as React.RefObject<HTMLDivElement>}
+      className="truncate"
+      style={{ maxWidth }}
+    >
+      {children}
+    </div>
+  );
+
+  return (
+    <TableCell className={className}>
+      {isOverflowing && typeof children === 'string' ? (
+        <Tooltip content={children} position="top" size="sm">
+          {cellContent}
+        </Tooltip>
+      ) : (
+        cellContent
+      )}
+    </TableCell>
+  );
+};

package/src/atoms/composed/DataTable/index.ts

@@ -0,0 +1,2 @@
+export * from './DataTable';
+export * from './TableCellWithTooltip';