@umituz/web-design-system 4.1.0 → 4.3.0

package/src/presentation/organisms/DataTable.tsx

@@ -1,10 +1,14 @@
-/**
- * DataTable Component (Organism)
- * @description Enhanced table component for displaying data with sorting and pagination
- */
-
 import { useState, useMemo } from 'react';
-import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import type { KeyboardEvent as ReactKeyboardEvent, MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  ChevronsUpDown,
+} from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
 import {
   Table,
@@ -17,6 +21,7 @@ import {
   TableCaption,
 } from './Table';
 import { Button } from '../atoms/Button';
+import { Skeleton } from '../atoms/Skeleton';
 import {
   computeTotalPages,
   clampPageNumber,
@@ -25,21 +30,51 @@ import {
 import type { BaseProps } from '../../domain/types';
 import type { MediumSizes } from '../../infrastructure/constants';
 
+export type ColumnAlign = 'left' | 'right' | 'center';
+export type ColumnHideBelow = 'sm' | 'md' | 'lg' | 'xl';
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortState {
+  id: string;
+  dir: SortDirection;
+}
+
 export interface Column<T> {
   id: string;
-  header: string;
-  accessor: keyof T | ((row: T) => React.ReactNode);
-  cell?: (row: T) => React.ReactNode;
+  header: ReactNode;
+  accessor: keyof T | ((row: T) => ReactNode);
+  cell?: (row: T) => ReactNode;
+  sortValue?: (row: T) => string | number;
   sortable?: boolean;
+  align?: ColumnAlign;
+  hideBelow?: ColumnHideBelow;
+  width?: string;
   className?: string;
 }
 
+export interface TablePaginationProps extends BaseProps {
+  page: number;
+  totalPages: number;
+  onPage: (page: number) => void;
+  label?: ReactNode;
+  hideWhenSingle?: boolean;
+}
+
 export interface DataTableProps<T> extends BaseProps {
   data: T[];
   columns: Column<T>[];
   caption?: string;
   size?: MediumSizes;
   sortable?: boolean;
+  sort?: SortState;
+  onSortChange?: (id: string) => void;
+  rowKey?: (row: T) => string;
+  selectedId?: string;
+  dense?: boolean;
+  loading?: boolean;
+  empty?: ReactNode;
+  sticky?: boolean;
+  stackable?: boolean;
   paginated?: boolean;
   pageSize?: number;
   emptyState?: {
@@ -47,6 +82,143 @@ export interface DataTableProps<T> extends BaseProps {
     description?: string;
   };
   onRowClick?: (row: T) => void;
+  rowLabel?: (row: T) => string;
+}
+
+const INTERACTIVE_SELECTOR = 'button, a, input, select, textarea, label';
+
+function rowClickAllowed(event: ReactMouseEvent<HTMLTableRowElement>): boolean {
+  if (event.target === event.currentTarget) return true;
+  return !(event.target as HTMLElement).closest(INTERACTIVE_SELECTOR);
+}
+
+function stackLabel<T>(column: Column<T>): string {
+  return typeof column.header === 'string' ? column.header : column.id;
+}
+
+const alignStyles: Record<ColumnAlign, string> = {
+  left: 'text-left',
+  right: 'text-right',
+  center: 'text-center',
+};
+
+const hideBelowStyles: Record<ColumnHideBelow, string> = {
+  sm: 'hidden sm:table-cell',
+  md: 'hidden md:table-cell',
+  lg: 'hidden lg:table-cell',
+  xl: 'hidden xl:table-cell',
+};
+
+function displayValue<T>(column: Column<T>, row: T): ReactNode {
+  if (column.cell) return column.cell(row);
+  return typeof column.accessor === 'function'
+    ? column.accessor(row)
+    : (row[column.accessor] as ReactNode);
+}
+
+function sortValueOf<T>(column: Column<T>, row: T): string | number | null {
+  if (column.sortValue) return column.sortValue(row);
+  const value =
+    typeof column.accessor === 'function' ? column.accessor(row) : row[column.accessor];
+  if (typeof value === 'number') return value;
+  if (typeof value === 'boolean') return value ? 1 : 0;
+  if (typeof value === 'string') return value;
+  return null;
+}
+
+function compareValues(a: string | number | null, b: string | number | null): number {
+  if (a === null && b === null) return 0;
+  if (a === null) return 1;
+  if (b === null) return -1;
+  if (typeof a === 'number' && typeof b === 'number') return a - b;
+  return String(a).localeCompare(String(b));
+}
+
+export function TablePagination({ className, page, totalPages, onPage, label, hideWhenSingle = false }: TablePaginationProps) {
+  const safeTotalPages = Number.isFinite(totalPages) ? Math.max(Math.floor(totalPages), 1) : 1;
+  const safePage = Number.isFinite(page) ? Math.min(Math.max(Math.floor(page), 1), safeTotalPages) : 1;
+
+  const slots = useMemo(() => {
+    type Slot = number | 'ellipsis-start' | 'ellipsis-end';
+    const out: Slot[] = [1];
+    const start = Math.max(safePage - 1, 2);
+    const end = Math.min(safePage + 1, safeTotalPages - 1);
+    if (start > 2) out.push('ellipsis-start');
+    for (let p = start; p <= end; p += 1) out.push(p);
+    if (end < safeTotalPages - 1) out.push('ellipsis-end');
+    if (safeTotalPages > 1) out.push(safeTotalPages);
+    return out;
+  }, [safePage, safeTotalPages]);
+
+  if (safeTotalPages <= 1 && hideWhenSingle) {
+    if (!label) return null;
+    return <div className={cn('text-sm text-muted-foreground', className)}>{label}</div>;
+  }
+
+  return (
+    <nav className={cn('flex items-center justify-between gap-2', className)} aria-label="Pagination">
+      {label && <span className="text-sm text-muted-foreground">{label}</span>}
+      <div className="flex items-center gap-1">
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => onPage(1)}
+          disabled={safePage <= 1}
+          aria-label="First page"
+        >
+          <ChevronsLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => onPage(safePage - 1)}
+          disabled={safePage <= 1}
+          aria-label="Previous page"
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        {slots.map((slot) =>
+          typeof slot === 'number' ? (
+            <Button
+              key={slot}
+              size="sm"
+              variant="outline"
+              className={cn(
+                'min-w-9',
+                slot === safePage && 'pointer-events-none bg-primary text-primary-foreground'
+              )}
+              onClick={() => onPage(slot)}
+              aria-current={slot === safePage ? 'page' : undefined}
+            >
+              {slot}
+            </Button>
+          ) : (
+            <span key={slot} className="px-1 text-muted-foreground" aria-hidden="true">
+              …
+            </span>
+          )
+        )}
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => onPage(safePage + 1)}
+          disabled={safePage >= safeTotalPages}
+          aria-label="Next page"
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => onPage(safeTotalPages)}
+          disabled={safePage >= safeTotalPages}
+          aria-label="Last page"
+        >
+          <ChevronsRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </nav>
+  );
 }
 
 export function DataTable<T>({
@@ -56,48 +228,53 @@ export function DataTable<T>({
   caption,
   size = 'md',
   sortable = false,
+  sort,
+  onSortChange,
+  rowKey,
+  selectedId,
+  dense = false,
+  loading = false,
+  empty,
+  sticky = false,
+  stackable = false,
   paginated = false,
   pageSize = 10,
   emptyState,
   onRowClick,
+  rowLabel,
   ...props
 }: DataTableProps<T>) {
-  const [sortColumn, setSortColumn] = useState<string | null>(null);
-  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+  const [internalSort, setInternalSort] = useState<SortState | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
 
-  const handleSort = (columnId: string) => {
-    if (!sortable) return;
+  const activeSort = sort ?? internalSort;
+  const controlled = sort !== undefined;
 
-    if (sortColumn === columnId) {
-      setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
-    } else {
-      setSortColumn(columnId);
-      setSortDirection('asc');
+  const handleSort = (id: string) => {
+    if (!sortable) return;
+    if (controlled) {
+      onSortChange?.(id);
+      return;
     }
+    setInternalSort((prev) =>
+      prev && prev.id === id
+        ? { id, dir: prev.dir === 'asc' ? 'desc' : 'asc' }
+        : { id, dir: 'asc' }
+    );
   };
 
   const sortedData = useMemo(() => {
-    if (!sortColumn || !sortable) return data;
-
-    return [...data].sort((a, b) => {
-      const column = columns.find((col) => col.id === sortColumn);
-      if (!column) return 0;
-
-      const aValue = typeof column.accessor === 'function' ? column.accessor(a) : a[column.accessor];
-      const bValue = typeof column.accessor === 'function' ? column.accessor(b) : b[column.accessor];
-
-      if (aValue === bValue) return 0;
-      if (aValue == null || bValue == null) return 0;
-
-      const comparison = (aValue as string | number) < (bValue as string | number) ? -1 : 1;
-      return sortDirection === 'asc' ? comparison : -comparison;
-    });
-  }, [data, sortColumn, sortDirection, columns, sortable]);
+    if (!activeSort || !sortable) return data;
+    const column = columns.find((col) => col.id === activeSort.id);
+    if (!column) return data;
+    const factor = activeSort.dir === 'asc' ? 1 : -1;
+    return [...data].sort(
+      (a, b) => factor * compareValues(sortValueOf(column, a), sortValueOf(column, b))
+    );
+  }, [data, activeSort, columns, sortable]);
 
   const paginatedData = useMemo(() => {
     if (!paginated) return sortedData;
-
     const start = (currentPage - 1) * pageSize;
     const end = start + pageSize;
     return sortedData.slice(start, end);
@@ -107,27 +284,42 @@ export function DataTable<T>({
   const safePage = clampPageNumber(currentPage, totalPages);
   const pageBounds = computePageBounds(currentPage, pageSize, data.length);
 
-  const renderCell = (row: T, column: Column<T>) => {
-    if (column.cell) {
-      return column.cell(row);
-    }
-
-    const value = typeof column.accessor === 'function' ? column.accessor(row) : row[column.accessor];
-    return value as React.ReactNode;
-  };
-
   const sizeStyles: Record<MediumSizes, string> = {
     sm: 'text-xs',
     md: 'text-sm',
     lg: 'text-base',
   };
 
-  const paddingStyles: Record<MediumSizes, string> = {
-    sm: 'px-2 py-2',
-    md: 'px-4 py-3',
-    lg: 'px-6 py-4',
+  const pxStyles: Record<MediumSizes, string> = {
+    sm: 'px-2',
+    md: 'px-4',
+    lg: 'px-6',
   };
 
+  const pyStyles: Record<MediumSizes, string> = dense
+    ? { sm: 'py-1', md: 'py-1.5', lg: 'py-2' }
+    : { sm: 'py-2', md: 'py-3', lg: 'py-4' };
+
+  if (loading) {
+    const skeletonRows = dense ? 8 : 6;
+    const skeletonCols = Math.min(columns.length, 6);
+    return (
+      <div className={cn('space-y-3 p-2', className)} {...props}>
+        {Array.from({ length: skeletonRows }).map((_, row) => (
+          <div key={row} className="flex items-center gap-4" style={{ opacity: 1 - row * 0.08 }}>
+            {Array.from({ length: skeletonCols }).map((_, col) => (
+              <Skeleton key={col} variant="text" className="flex-1" />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  }
+
+  if (data.length === 0 && empty !== undefined) {
+    return <>{empty}</>;
+  }
+
   if (data.length === 0 && emptyState) {
     return (
       <div className={cn('p-8 text-center', className)}>
@@ -140,101 +332,127 @@ export function DataTable<T>({
   }
 
   return (
-    <div className={cn('space-y-4', className)} {...props}>
+    <div className={cn('space-y-4', stackable && 'ds-datatable-stack', className)} {...props}>
       <Table>
         {caption && <TableCaption>{caption}</TableCaption>}
         <TableHeader>
           <TableRow>
-            {columns.map((column) => (
-              <TableHead
-                key={column.id}
-                className={cn(
-                  sizeStyles[size],
-                  paddingStyles[size],
-                  column.sortable && sortable && 'cursor-pointer hover:bg-muted/50',
-                  column.className
-                )}
-                onClick={() => column.sortable && handleSort(column.id)}
-              >
-                <div className="flex items-center gap-2">
-                  {column.header}
-                  {column.sortable && sortable && sortColumn === column.id && (
-                    <span className="text-xs">
-                      {sortDirection === 'asc' ? (
-                        <ArrowUp className="h-3 w-3" aria-hidden="true" />
-                      ) : (
-                        <ArrowDown className="h-3 w-3" aria-hidden="true" />
-                      )}
-                    </span>
+            {columns.map((column) => {
+              const isActiveSort = activeSort?.id === column.id;
+              return (
+                <TableHead
+                  key={column.id}
+                  style={column.width ? { width: column.width } : undefined}
+                  className={cn(
+                    sizeStyles[size],
+                    pxStyles[size],
+                    pyStyles[size],
+                    sticky && 'sticky top-0 z-[1] bg-background/95 backdrop-blur',
+                    column.align && column.align !== 'left' && alignStyles[column.align],
+                    column.hideBelow && hideBelowStyles[column.hideBelow],
+                    column.sortable && sortable && 'cursor-pointer select-none hover:bg-muted/50',
+                    column.className
                   )}
-                </div>
-              </TableHead>
-            ))}
+                  onClick={() => {
+                    if (column.sortable && sortable) handleSort(column.id);
+                  }}
+                  aria-sort={
+                    isActiveSort
+                      ? activeSort?.dir === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                      : column.sortable && sortable
+                        ? 'none'
+                        : undefined
+                  }
+                >
+                  <div
+                    className={cn(
+                      'flex items-center gap-2',
+                      column.align === 'right' && 'flex-row-reverse'
+                    )}
+                  >
+                    {column.header}
+                    {column.sortable && sortable && (
+                      <span className="text-xs">
+                        {isActiveSort ? (
+                          activeSort?.dir === 'asc' ? (
+                            <ArrowUp className="h-3 w-3" aria-hidden="true" />
+                          ) : (
+                            <ArrowDown className="h-3 w-3" aria-hidden="true" />
+                          )
+                        ) : (
+                          <ChevronsUpDown className="h-3 w-3 opacity-40" aria-hidden="true" />
+                        )}
+                      </span>
+                    )}
+                  </div>
+                </TableHead>
+              );
+            })}
           </TableRow>
         </TableHeader>
         <TableBody>
-          {paginatedData.map((row, rowIndex) => (
-            <TableRow
-              key={rowIndex}
-              className={cn(onRowClick && 'cursor-pointer hover:bg-muted/50')}
-              onClick={() => onRowClick?.(row)}
-            >
-              {columns.map((column) => (
-                <TableCell
-                  key={column.id}
-                  className={cn(paddingStyles[size], column.className)}
-                >
-                  {renderCell(row, column)}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
+          {paginatedData.map((row, index) => {
+            const key = rowKey ? rowKey(row) : index;
+            const selected = rowKey !== undefined && selectedId !== undefined && rowKey(row) === selectedId;
+            const handleRowKeyDown = (event: ReactKeyboardEvent<HTMLTableRowElement>) => {
+              if (event.target !== event.currentTarget) return;
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault();
+                onRowClick?.(row);
+              }
+            };
+            return (
+              <TableRow
+                key={key}
+                tabIndex={onRowClick ? 0 : undefined}
+                aria-label={onRowClick && rowLabel ? rowLabel(row) : undefined}
+                className={cn(
+                  onRowClick && 'cursor-pointer hover:bg-muted/50',
+                  selected && 'bg-muted/60'
+                )}
+                onClick={
+                  onRowClick
+                    ? (event) => {
+                        if (rowClickAllowed(event)) onRowClick(row);
+                      }
+                    : undefined
+                }
+                onKeyDown={onRowClick ? handleRowKeyDown : undefined}
+              >
+                {columns.map((column) => (
+                  <TableCell
+                    key={column.id}
+                    data-label={stackable ? stackLabel(column) : undefined}
+                    className={cn(
+                      pxStyles[size],
+                      pyStyles[size],
+                      column.align && column.align !== 'left' && alignStyles[column.align],
+                      column.hideBelow && hideBelowStyles[column.hideBelow],
+                      column.className
+                    )}
+                  >
+                    {displayValue(column, row)}
+                  </TableCell>
+                ))}
+              </TableRow>
+            );
+          })}
         </TableBody>
         {paginated && (
           <TableFooter>
             <TableRow>
               <TableCell colSpan={columns.length}>
-                <div className="flex items-center justify-between">
+                <div className="flex items-center justify-between gap-2">
                   <p className={cn('text-muted-foreground', sizeStyles[size])}>
                     Showing {pageBounds.startIndex} to {pageBounds.endIndex} of {data.length} results
                   </p>
-                  <div className="flex items-center gap-2">
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => setCurrentPage(1)}
-                      disabled={safePage === 1}
-                    >
-                      <ChevronsLeft className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => setCurrentPage((p) => clampPageNumber(p - 1, totalPages))}
-                      disabled={safePage === 1}
-                    >
-                      <ChevronLeft className="h-4 w-4" />
-                    </Button>
-                    <span className={cn('text-sm font-medium', sizeStyles[size])}>
-                      Page {safePage} of {totalPages}
-                    </span>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => setCurrentPage((p) => clampPageNumber(p + 1, totalPages))}
-                      disabled={safePage === totalPages}
-                    >
-                      <ChevronRight className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      onClick={() => setCurrentPage(totalPages)}
-                      disabled={safePage === totalPages}
-                    >
-                      <ChevronsRight className="h-4 w-4" />
-                    </Button>
-                  </div>
+                  <TablePagination
+                    page={safePage}
+                    totalPages={totalPages}
+                    onPage={(p) => setCurrentPage(clampPageNumber(p, totalPages))}
+                  />
                 </div>
               </TableCell>
             </TableRow>

package/src/presentation/organisms/EmptyState.tsx

@@ -3,18 +3,31 @@
  * @description Component for displaying empty states with optional actions (Responsive)
  */
 
-import { forwardRef } from 'react';
+import { forwardRef, isValidElement } from 'react';
+import type { ReactNode } from 'react';
 import { cn, getSpacing, getGap } from '../../infrastructure/utils';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
+export interface EmptyStateAction {
+  label: string;
+  onClick: () => void;
+}
+
+function isActionConfig(action: EmptyStateAction | ReactNode): action is EmptyStateAction {
+  return (
+    typeof action === 'object' &&
+    action !== null &&
+    !isValidElement(action) &&
+    'label' in action &&
+    'onClick' in action
+  );
+}
+
 export interface EmptyStateProps extends BaseProps {
-  icon?: React.ComponentType<{ className?: string }>;
+  icon?: React.ComponentType<{ className?: string }> | ReactNode;
   title: string;
   description?: string;
-  action?: {
-    label: string;
-    onClick: () => void;
-  };
+  action?: EmptyStateAction | ReactNode;
   size?: Extract<SizeVariant, 'sm' | 'md' | 'lg' | 'xl'>;
   centered?: boolean;
 }
@@ -23,7 +36,7 @@ export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
   (
     {
       className,
-      icon: Icon,
+      icon,
       title,
       description,
       action,
@@ -43,8 +56,22 @@ export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
         )}
         {...props}
       >
-        {Icon && (
-          <Icon className={cn(size === 'sm' ? 'h-8 w-8 sm:h-10 sm:w-10' : size === 'md' ? 'h-12 w-12 sm:h-14 sm:w-14' : size === 'lg' ? 'h-16 w-16 sm:h-20 sm:w-20' : 'h-20 w-20 sm:h-24 sm:w-24', 'text-muted-foreground/50 mx-auto mb-2')} />
+        {typeof icon === 'function' &&
+          (() => {
+            const Icon = icon;
+            return (
+              <Icon className={cn(size === 'sm' ? 'h-8 w-8 sm:h-10 sm:w-10' : size === 'md' ? 'h-12 w-12 sm:h-14 sm:w-14' : size === 'lg' ? 'h-16 w-16 sm:h-20 sm:w-20' : 'h-20 w-20 sm:h-24 sm:w-24', 'text-muted-foreground/50 mx-auto mb-2')} />
+            );
+          })()}
+        {typeof icon !== 'function' && icon && (
+          <span
+            className={cn(
+              'inline-flex items-center justify-center text-muted-foreground/50 mx-auto mb-2',
+              size === 'sm' ? 'h-8 w-8 sm:h-10 sm:w-10' : size === 'md' ? 'h-12 w-12 sm:h-14 sm:w-14' : size === 'lg' ? 'h-16 w-16 sm:h-20 sm:w-20' : 'h-20 w-20 sm:h-24 sm:w-24'
+            )}
+          >
+            {icon}
+          </span>
         )}
         <h3 className={cn('font-semibold text-foreground', size === 'sm' ? 'text-sm sm:text-base' : size === 'md' ? 'text-base sm:text-lg' : size === 'lg' ? 'text-lg sm:text-xl' : 'text-xl sm:text-2xl')}>{title}</h3>
         {description && (
@@ -52,23 +79,26 @@ export const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
             {description}
           </p>
         )}
-        {action && (
-          <button
-            onClick={action.onClick}
-            className={cn(
-              'mt-4 inline-flex items-center justify-center',
-              'rounded-md font-medium',
-              'bg-primary text-primary-foreground',
-              'hover:bg-primary/90',
-              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-              'disabled:pointer-events-none disabled:opacity-50',
-              'h-9 px-4 text-sm',
-              'transition-colors'
-            )}
-          >
-            {action.label}
-          </button>
-        )}
+        {action &&
+          (isActionConfig(action) ? (
+            <button
+              onClick={action.onClick}
+              className={cn(
+                'mt-4 inline-flex items-center justify-center',
+                'rounded-md font-medium',
+                'bg-primary text-primary-foreground',
+                'hover:bg-primary/90',
+                'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+                'disabled:pointer-events-none disabled:opacity-50',
+                'h-9 px-4 text-sm',
+                'transition-colors'
+              )}
+            >
+              {action.label}
+            </button>
+          ) : (
+            <div className="mt-4">{action}</div>
+          ))}
       </div>
     );
   }