@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

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

@@ -1,394 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

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