siesa-ui-kit 1.0.0 → 1.0.1

package/src/components/Table/Table.tsx

@@ -1,688 +0,0 @@
-import React, { useState } from 'react';
-import type {
-  TableProps,
-  TableHeaderProps,
-  TableCellProps,
-  SortDirection,
-  PaginationProps,
-} from './Table.types';
-
-/**
- * Iconos para sort
- */
-const ChevronUpIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className="transition-transform"
-  >
-    <path
-      d="M12 10L8 6L4 10"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ChevronDownIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className="transition-transform"
-  >
-    <path
-      d="M4 6L8 10L12 6"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * Iconos para paginación
- */
-const ArrowLeftIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M14 8H2M2 8L6.5 3.5M2 8L6.5 12.5"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-const ArrowRightIcon = () => (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M2 8H14M14 8L9.5 3.5M14 8L9.5 12.5"
-      stroke="currentColor"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-
-/**
- * TableHeader - Componente para el header de una columna
- */
-const TableHeader = <T,>({
-  column,
-  sortable,
-  sorted,
-  sortDirection,
-  onSort,
-}: TableHeaderProps<T>) => {
-  // Clases base del header
-  const baseClasses = `
-    flex
-    items-center
-    gap-3
-    px-6
-    py-2.5
-    min-h-[40px]
-    border-b
-    border-border-primary
-    dark:border-dark-border-primary
-    transition-colors
-    duration-150
-  `;
-
-  // Clases según sortable
-  const sortableClasses = sortable
-    ? `
-      cursor-pointer
-      hover:bg-background-secondary
-      dark:hover:bg-dark-bg-primary/50
-      select-none
-    `
-    : '';
-
-  // Clases de alineación
-  const alignClasses = {
-    left: 'justify-start',
-    center: 'justify-center',
-    right: 'justify-end',
-  };
-
-  const combinedClasses = [baseClasses, sortableClasses, alignClasses[column.align || 'left']]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  return (
-    <div
-      className={combinedClasses}
-      onClick={sortable ? onSort : undefined}
-      role={sortable ? 'button' : undefined}
-      tabIndex={sortable ? 0 : undefined}
-      onKeyDown={
-        sortable
-          ? (e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                onSort();
-              }
-            }
-          : undefined
-      }
-      style={{ width: column.width }}
-    >
-      {/* Texto del header */}
-      <span
-        className="
-          text-sm
-          font-bold
-          text-content-secondary
-          dark:text-content-secondary
-          overflow-ellipsis
-          overflow-hidden
-          whitespace-nowrap
-        "
-      >
-        {column.header}
-      </span>
-
-      {/* Iconos de sort */}
-      {sortable && (
-        <span className="flex-shrink-0 text-content-secondary dark:text-content-secondary">
-          {sorted && sortDirection === 'asc' && <ChevronUpIcon />}
-          {sorted && sortDirection === 'desc' && <ChevronDownIcon />}
-          {!sorted && (
-            <div className="w-4 h-4" />
-          )}
-        </span>
-      )}
-    </div>
-  );
-};
-
-/**
- * TableCell - Componente para una celda de datos
- */
-const TableCell: React.FC<TableCellProps & { isStriped?: boolean; rowIndex?: number }> = ({
-  children,
-  align = 'left',
-  width,
-  isStriped = false,
-  rowIndex = 0,
-}) => {
-  // Clases de alineación
-  const alignClasses = {
-    left: 'justify-start text-left',
-    center: 'justify-center text-center',
-    right: 'justify-end text-right',
-  };
-
-  // Fondo zebra striping (filas pares tienen fondo)
-  const stripedBg = isStriped && rowIndex % 2 === 1
-    ? 'bg-background-secondary dark:bg-dark-bg-primary/30'
-    : '';
-
-  return (
-    <div
-      className={`
-        flex
-        flex-col
-        ${alignClasses[align]}
-        px-6
-        py-4
-        min-h-[56px]
-        border-b
-        border-border-secondary
-        dark:border-dark-border-primary
-        ${stripedBg}
-      `}
-      style={{ width }}
-    >
-      <span
-        className="
-          text-sm
-          text-content-primary
-          dark:text-dark-content-primary
-          overflow-ellipsis
-          overflow-hidden
-          w-full
-        "
-      >
-        {children}
-      </span>
-    </div>
-  );
-};
-
-
-/**
- * Pagination - Componente de paginación
- */
-const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-  previousLabel = 'Anterior',
-  nextLabel = 'Siguiente',
-}) => {
-  // Generar array de números de página para mostrar
-  const getPageNumbers = () => {
-    const pages: (number | string)[] = [];
-    const maxVisible = 7; // Máximo de botones visibles
-
-    if (totalPages <= maxVisible) {
-      // Si hay pocas páginas, mostrar todas
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push(i);
-      }
-    } else {
-      // Lógica para mostrar: 1 2 3 ... 65 66
-      pages.push(1);
-
-      if (currentPage <= 3) {
-        pages.push(2, 3);
-      } else if (currentPage >= totalPages - 2) {
-        pages.push('...');
-        pages.push(totalPages - 2, totalPages - 1);
-      } else {
-        pages.push('...');
-        pages.push(currentPage);
-        pages.push('...');
-      }
-
-      if (totalPages > 1) {
-        pages.push(totalPages);
-      }
-    }
-
-    return pages;
-  };
-
-  const pageNumbers = getPageNumbers();
-
-  return (
-    <div className="flex items-center justify-between w-full h-9">
-      {/* Botón Anterior */}
-      <button
-        onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        className="
-          flex
-          items-center
-          gap-3
-          px-3
-          py-2
-          rounded-md
-          text-sm
-          font-bold
-          text-primary-custom-600
-          dark:text-primary-custom-600
-          hover:bg-blue-50
-          dark:hover:bg-blue-900/20
-          disabled:opacity-50
-          disabled:cursor-not-allowed
-          transition-colors
-          duration-150
-        "
-      >
-        <ArrowLeftIcon />
-        <span>{previousLabel}</span>
-      </button>
-
-      {/* Números de página */}
-      <div className="flex items-center gap-0">
-        {pageNumbers.map((page, index) => {
-          if (page === '...') {
-            return (
-              <div
-                key={`ellipsis-${index}`}
-                className="
-                  flex
-                  items-center
-                  justify-center
-                  px-3
-                  py-2
-                  text-sm
-                  font-bold
-                  text-primary-custom-600
-                  dark:text-primary-custom-600
-                "
-              >
-                {page}
-              </div>
-            );
-          }
-
-          const isActive = page === currentPage;
-
-          return (
-            <button
-              key={page}
-              onClick={() => onPageChange(page as number)}
-              className={`
-                flex
-                items-center
-                justify-center
-                px-3
-                py-2
-                rounded-md
-                text-sm
-                font-bold
-                text-primary-custom-600
-                dark:text-primary-custom-600
-                transition-colors
-                duration-150
-                ${
-                  isActive
-                    ? 'bg-blue-100 dark:bg-blue-900/30'
-                    : 'hover:bg-blue-50 dark:hover:bg-blue-900/20'
-                }
-              `}
-            >
-              {page}
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Botón Siguiente */}
-      <button
-        onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        className="
-          flex
-          items-center
-          gap-3
-          px-3
-          py-2
-          rounded-md
-          text-sm
-          font-bold
-          text-primary-custom-600
-          dark:text-primary-custom-600
-          hover:bg-blue-50
-          dark:hover:bg-blue-900/20
-          disabled:opacity-50
-          disabled:cursor-not-allowed
-          transition-colors
-          duration-150
-        "
-      >
-        <span>{nextLabel}</span>
-        <ArrowRightIcon />
-      </button>
-    </div>
-  );
-};
-
-/**
- * Table - Componente principal de tabla
- *
- * Características implementadas:
- * - Definición de columnas flexible con accessor y render custom
- * - Sorting en columnas (controlado o no controlado)
- * - Variantes: basic, fullWidth, striped, grid
- * - Dark mode completo en todos los estados
- * - Estados de loading y empty
- * - Filas clickeables
- * - Accesibilidad con roles y keyboard navigation
- *
- * Mejores prácticas implementadas:
- * - Orden de modificadores: {responsive}:{dark}:{state}:{utility}
- * - Dark mode con estrategia 'class' (darkMode: 'class')
- * - Tokens de color consistentes con la documentación
- * - Type safety con TypeScript estricto y generics
- * - Accesibilidad con ARIA labels y keyboard support
- *
- * @see docs/colors.md - Sistema de colores
- * @see docs/typography.md - Sistema tipográfico (Label/Small para headers, Paragraph/Small para cells)
- * @see docs/spacing.md - Sistema de espaciado
- * @see docs/shadows.md - Sistema de sombras
- *
- * @example
- * ```tsx
- * // Uso básico
- * <Table
- *   title="Usuarios"
- *   columns={[
- *     { header: 'Nombre', accessor: 'name' },
- *     { header: 'Email', accessor: 'email' },
- *     { header: 'Rol', accessor: 'role', sortable: true },
- *   ]}
- *   data={users}
- * />
- *
- * // Con render custom
- * <Table
- *   columns={[
- *     {
- *       header: 'Estado',
- *       accessor: 'status',
- *       render: (value) => (
- *         <Badge color={value === 'active' ? 'green' : 'red'}>
- *           {value}
- *         </Badge>
- *       ),
- *     },
- *   ]}
- *   data={data}
- * />
- *
- * // Variante striped
- * <Table
- *   variant="striped"
- *   columns={columns}
- *   data={data}
- * />
- * ```
- */
-export const Table = <T extends Record<string, any>>({
-  title,
-  columns,
-  data,
-  variant = 'basic',
-  showBorder = true,
-  showShadow = true,
-  // onRowClick, // TODO: Implement row click functionality
-  onSort,
-  sortColumn: externalSortColumn,
-  sortDirection: externalSortDirection,
-  fullWidth = false,
-  emptyMessage = 'No hay datos disponibles',
-  loading = false,
-  loadingRows = 5,
-  pagination,
-  className = '',
-  id,
-}: TableProps<T>) => {
-  // ===== ESTADO INTERNO DE SORT =====
-  const [internalSortColumn, setInternalSortColumn] = useState<keyof T | string | null>(null);
-  const [internalSortDirection, setInternalSortDirection] = useState<SortDirection>(null);
-
-  // Usar sort externo si está controlado, sino usar interno
-  const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
-  const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
-
-  // ===== MANEJAR SORT =====
-  const handleSort = (columnAccessor: keyof T | string) => {
-    let newDirection: SortDirection = 'asc';
-
-    // Si ya está ordenado por esta columna, cambiar dirección
-    if (sortColumn === columnAccessor) {
-      if (sortDirection === 'asc') {
-        newDirection = 'desc';
-      } else if (sortDirection === 'desc') {
-        newDirection = null;
-      }
-    }
-
-    // Si sort es controlado, llamar callback
-    if (onSort) {
-      onSort(columnAccessor, newDirection);
-    } else {
-      // Sino, actualizar estado interno
-      setInternalSortColumn(newDirection ? columnAccessor : null);
-      setInternalSortDirection(newDirection);
-    }
-  };
-
-  // ===== OBTENER VALOR DE CELDA =====
-  const getCellValue = (row: T, accessor: keyof T | ((row: T) => any)) => {
-    if (typeof accessor === 'function') {
-      return accessor(row);
-    }
-    return row[accessor];
-  };
-
-  // ===== CLASES DEL CONTAINER =====
-  const containerBaseClasses = `
-    flex
-    flex-col
-    gap-4
-    bg-white
-    dark:bg-dark-bg-primary
-    rounded-xl
-    transition-all
-    duration-150
-  `;
-
-  const containerBorderClasses = showBorder
-    ? 'border border-border-primary dark:border-dark-border-primary'
-    : '';
-
-  const containerShadowClasses = showShadow ? 'shadow-base' : '';
-
-  const containerPaddingClasses = 'p-8';
-
-  const containerWidthClasses = fullWidth || variant === 'fullWidth' ? 'w-full' : '';
-
-  const containerClasses = [
-    containerBaseClasses,
-    containerBorderClasses,
-    containerShadowClasses,
-    containerPaddingClasses,
-    containerWidthClasses,
-    className,
-  ]
-    .join(' ')
-    .replace(/\s+/g, ' ')
-    .trim();
-
-  // ===== CLASES DE LA TABLA =====
-  const tableGridClasses = variant === 'grid'
-    ? `
-      border
-      border-border-primary
-      dark:border-dark-border-primary
-      rounded-lg
-      overflow-hidden
-    `
-    : '';
-
-  // ===== RENDER =====
-  return (
-    <div className={containerClasses} id={id}>
-      {/* Título opcional */}
-      {title && (
-        <div className="flex items-center justify-center w-full">
-          <h3
-            className="
-              text-base
-              font-bold
-              text-content-primary
-              dark:text-dark-content-primary
-              overflow-ellipsis
-              overflow-hidden
-              whitespace-nowrap
-            "
-          >
-            {title}
-          </h3>
-        </div>
-      )}
-
-      {/* Tabla */}
-      <div className={`flex w-full overflow-x-auto ${tableGridClasses}`}>
-        {/* Columnas */}
-        {columns.map((column, colIndex) => {
-          const accessor = typeof column.accessor === 'function'
-            ? `column_${colIndex}`
-            : String(column.accessor);
-
-          return (
-            <div key={accessor} className="flex flex-col flex-1 min-w-0">
-              {/* Header de la columna */}
-              <TableHeader
-                column={column}
-                sortable={column.sortable || false}
-                sorted={sortColumn === accessor}
-                sortDirection={sortColumn === accessor ? sortDirection : null}
-                onSort={() => handleSort(accessor)}
-              />
-
-              {/* Loading skeleton */}
-              {loading && (
-                <>
-                  {Array.from({ length: loadingRows }).map((_, rowIndex) => (
-                    <TableCell
-                      key={`loading-${rowIndex}`}
-                      align={column.align}
-                      width={column.width}
-                      isStriped={variant === 'striped'}
-                      rowIndex={rowIndex}
-                    >
-                      <div
-                        className="
-                          h-4
-                          bg-background-secondary
-                          dark:bg-dark-border-primary
-                          rounded
-                          animate-pulse
-                        "
-                      />
-                    </TableCell>
-                  ))}
-                </>
-              )}
-
-              {/* Datos reales */}
-              {!loading && data.length > 0 && (
-                <>
-                  {data.map((row, rowIndex) => {
-                    const value = getCellValue(row, column.accessor);
-                    const content = column.render
-                      ? column.render(value, row, rowIndex)
-                      : value;
-
-                    return (
-                      <TableCell
-                        key={rowIndex}
-                        align={column.align}
-                        width={column.width}
-                        isStriped={variant === 'striped'}
-                        rowIndex={rowIndex}
-                      >
-                        {content}
-                      </TableCell>
-                    );
-                  })}
-                </>
-              )}
-
-              {/* Estado empty */}
-              {!loading && data.length === 0 && colIndex === 0 && (
-                <div
-                  className="
-                    flex
-                    items-center
-                    justify-center
-                    px-6
-                    py-12
-                    text-sm
-                    text-content-secondary
-                    dark:text-content-secondary
-                  "
-                  style={{ gridColumn: `1 / ${columns.length + 1}` }}
-                >
-                  {emptyMessage}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Paginación */}
-      {pagination && (
-        <Pagination
-          currentPage={pagination.currentPage}
-          totalPages={pagination.totalPages}
-          onPageChange={pagination.onPageChange}
-          previousLabel={pagination.previousLabel}
-          nextLabel={pagination.nextLabel}
-        />
-      )}
-    </div>
-  );
-};