@soyfri/shared-library 2.0.0-beta.3 → 2.0.0-beta.4

package/src/components/Table/Table.tsx

@@ -0,0 +1,495 @@
+import React, { Children, isValidElement, useState, useEffect, ReactElement } from 'react';
+import {
+  TableContainer,
+  Table as MuiTable,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  Paper,
+  Typography,
+  Select,
+  MenuItem,
+  Box,
+  Button,
+  Snackbar,
+  IconButton,
+  Checkbox,
+} from '@mui/material';
+import MuiAlert, { AlertProps } from '@mui/material/Alert';
+import { ColumnProps } from '../Column/Column'; // Asegúrate de que esta ruta sea correcta
+import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
+import FirstPageIcon from '@mui/icons-material/FirstPage';
+import LastPageIcon from '@mui/icons-material/LastPage';
+import KeyboardArrowLeftIcon from '@mui/icons-material/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+
+import { exportToCSV, exportToExcel } from './exportsUtils';
+
+// @ts-ignore
+import EmptyImage from './EmptyTable.png';
+
+export type FieldName<T> = keyof T | Array<keyof T>;
+
+interface TableProps<T> {
+  data: T[];
+  children: React.ReactNode;
+
+  currentPage?: number;
+  pageSize?: number;
+  totalPages?: number;
+  previousPage?: number;
+  nextPage?: number;
+  pageSizeSelectorValue?: number;
+  onPageChange?: (newPage: number) => void;
+  onPageSizeChange?: (newSize: number) => void;
+  visiblePageNumbers?: number;
+
+  enableCSVExport?: boolean;
+  csvExportFileName?: string;
+  csvExportButtonText?: string;
+  csvExportColumns?: string[];
+
+  enableExcelExport?: boolean;
+  excelExportFileName?: string;
+  excelExportButtonText?: string;
+  excelExportColumns?: string[];
+
+  enableRowSelection?: boolean;
+  rowIdentifier?: keyof T;
+  onSelectionChange?: (selectedItems: T[]) => void;
+  showPageSizeSelector?: boolean;
+  emptyTitle?: string;
+  emptyMessage?: string;
+  emptyImageSrc?: React.ReactNode;
+}
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref,
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
+});
+
+export function Table<T>({
+  data,
+  children,
+  currentPage,
+  pageSize,
+  totalPages,
+  previousPage,
+  nextPage,
+  pageSizeSelectorValue = 10,
+  onPageChange,
+  onPageSizeChange,
+  visiblePageNumbers = 5,
+  enableCSVExport = false,
+  csvExportFileName = 'data.csv',
+  csvExportButtonText = 'Exportar CSV',
+  csvExportColumns,
+  enableExcelExport = false,
+  excelExportFileName = 'data.xlsx',
+  excelExportButtonText = 'Exportar Excel',
+  excelExportColumns,
+  enableRowSelection = false,
+  rowIdentifier,
+  onSelectionChange,
+  showPageSizeSelector = true,
+  emptyTitle = 'No hay datos disponibles',
+  emptyMessage,
+  emptyImageSrc = <Box mb={2}>
+                    <img src={EmptyImage} alt="No data" style={{ maxWidth: '150px', opacity: 0.6 }} />
+                  </Box>,
+}: TableProps<T>) {
+  const columns = Children.toArray(children).filter(
+    (child): child is React.ReactElement<ColumnProps<T>> =>
+      isValidElement(child) && (child.type as any).displayName === 'Column'
+  );
+
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState("");
+  const [snackbarSeverity, setSnackbarSeverity] = useState<AlertProps['severity']>('info');
+
+  const [selectedRows, setSelectedRows] = useState<T[]>([]);
+
+  useEffect(() => {
+    setSelectedRows([]);
+  }, [data, currentPage, pageSize]);
+
+  useEffect(() => {
+    onSelectionChange?.(selectedRows);
+  }, [selectedRows, onSelectionChange]);
+
+  const handleSnackbarClose = (event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    setSnackbarOpen(false);
+  };
+
+  const isControlled = typeof onPageChange === 'function' && typeof currentPage === 'number';
+  const [internalPage, setInternalPage] = useState(1);
+  const [internalPageSize, setInternalPageSize] = useState(pageSizeSelectorValue);
+
+  const activePage = isControlled ? currentPage! : internalPage;
+  const activePageSize = isControlled ? pageSize! : internalPageSize;
+
+  const paginatedData = isControlled ? data : data.slice((activePage - 1) * activePageSize, activePage * activePageSize);
+
+  const effectiveTotalPages = isControlled
+    ? totalPages!
+    : Math.ceil(data.length / activePageSize);
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > effectiveTotalPages) return;
+    if (isControlled) onPageChange?.(newPage);
+    else setInternalPage(newPage);
+  };
+
+  const handlePageSizeChange = (newSize: number) => {
+    if (isControlled) {
+      onPageSizeChange?.(newSize);
+      onPageChange?.(1);
+    } else {
+      setInternalPageSize(newSize);
+      setInternalPage(1);
+    }
+  };
+
+  const getPageNumbers = () => {
+    const pages = [];
+    const maxPages = effectiveTotalPages;
+    const current = activePage;
+    const half = Math.floor(visiblePageNumbers / 2);
+
+    let startPage = Math.max(1, current - half);
+    let endPage = Math.min(maxPages, current + half);
+
+    if (endPage - startPage + 1 < visiblePageNumbers) {
+      if (startPage === 1) {
+        endPage = Math.min(maxPages, startPage + visiblePageNumbers - 1);
+      } else if (endPage === maxPages) {
+        startPage = Math.max(1, maxPages - visiblePageNumbers + 1);
+      }
+    }
+
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+
+  const pageNumbers = getPageNumbers();
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (!rowIdentifier) {
+      console.warn("`rowIdentifier` prop is required for row selection.");
+      return;
+    }
+
+    if (event.target.checked) {
+      const newSelecteds = [...selectedRows];
+      paginatedData.forEach(row => {
+        const rowId = row[rowIdentifier] as any;
+        if (!newSelecteds.some(selectedRow => (selectedRow as any)[rowIdentifier] === rowId)) {
+          newSelecteds.push(row);
+        }
+      });
+      setSelectedRows(newSelecteds);
+    } else {
+      const newSelecteds = selectedRows.filter(selectedRow =>
+        !paginatedData.some(row => (row as any)[rowIdentifier] === (selectedRow as any)[rowIdentifier])
+      );
+      setSelectedRows(newSelecteds);
+    }
+  };
+
+  const handleRowClick = (event: React.MouseEvent<unknown>, row: T) => {
+    if (!rowIdentifier) {
+      console.warn("`rowIdentifier` prop is required for row selection.");
+      return;
+    }
+
+    const rowId = row[rowIdentifier] as any;
+    const selectedIndex = selectedRows.findIndex(selectedRow => (selectedRow as any)[rowIdentifier] === rowId);
+    let newSelected: T[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selectedRows, row);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selectedRows.slice(1));
+    } else if (selectedIndex === selectedRows.length - 1) {
+      newSelected = newSelected.concat(selectedRows.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selectedRows.slice(0, selectedIndex),
+        selectedRows.slice(selectedIndex + 1),
+      );
+    }
+    setSelectedRows(newSelected);
+  };
+
+  const isSelected = (row: T) => {
+    if (!rowIdentifier) return false;
+    return selectedRows.some(selectedRow => (selectedRow as any)[rowIdentifier] === (row as any)[rowIdentifier]);
+  };
+
+  const numSelectedOnPage = paginatedData.filter(isSelected).length;
+  const isAllSelectedOnPage = paginatedData.length > 0 && numSelectedOnPage === paginatedData.length;
+  const isIndeterminateOnPage = numSelectedOnPage > 0 && numSelectedOnPage < paginatedData.length;
+
+  return (
+    <TableContainer >
+
+      <MuiTable sx={{ minWidth: 650 }} aria-label="custom table" style={ paginatedData.length === 0 ? { display: 'none' } : {} }>
+        {/* Table Header */}
+        <TableHead sx={{ backgroundColor: '#fff' }}>
+          <TableRow>
+            {enableRowSelection && (
+              <TableCell padding="checkbox" sx={{ width: '50px' }}> {/* Puedes ajustar este ancho fijo si lo deseas */}
+                <Checkbox
+                  color="primary"
+                  indeterminate={isIndeterminateOnPage}
+                  checked={isAllSelectedOnPage}
+                  onChange={handleSelectAllClick}
+                  inputProps={{ 'aria-label': 'select all desserts' }}
+                />
+              </TableCell>
+            )}
+            {columns.map((column, index) => (
+              <TableCell
+                key={index}
+                sx={{
+
+                  fontSize: '12px',
+                  color: (theme) => theme.palette.text.secondary,
+                  width: column.props.width || 'auto', // APLICA EL ANCHO AQUÍ
+                  whiteSpace: 'nowrap', // Evita que el texto se ajuste si la columna es pequeña
+                  
+                }}
+              >
+                <Typography sx={{ fontSize: '12px' }}>
+                  {column.props.name}
+                </Typography>
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        {/* Table Body */}
+        <TableBody sx={{ borderRadius: '10px', overflow: 'hidden' }}>
+          {paginatedData.map((row, rowIndex) => {
+            const isRowSelected = enableRowSelection && isSelected(row);
+            return (
+              <TableRow
+                key={rowIndex}
+                sx={{ backgroundColor: '#F8F8F8', '&:last-child td, &:last-child th': { border: 0 }, '&:hover': { backgroundColor: (theme) => '#FFF' } }}
+                selected={isRowSelected}
+              >
+                {enableRowSelection && (
+                  <TableCell padding="checkbox" sx={{ width: '50px' }}> {/* Mismo ancho para la celda de la fila */}
+                    <Checkbox
+                      color="primary"
+                      checked={isRowSelected}
+                      onClick={(event) => handleRowClick(event, row)}
+                      inputProps={{ 'aria-labelledby': `table-checkbox-${rowIndex}` }}
+                    />
+                  </TableCell>
+                )}
+                {columns.map((column, colIndex) => {
+                  const { field, children: cellRenderer } = column.props;
+
+                  let fieldData: Partial<T>;
+
+                  if (Array.isArray(field)) {
+                    if(field.length === 0){
+                      fieldData = {...row};
+                    }else{
+                      fieldData = (field as Array<keyof T>).reduce((acc, currentField) => {
+                        (acc as any)[currentField] = (row as any)[currentField];
+                        return acc;
+                      }, {} as Partial<T>);
+                    }
+
+                  } else {
+                    fieldData = { [field]: (row as any)[field] } as Partial<T>;
+                  }
+
+                  return (
+                    <TableCell
+                      key={colIndex}
+                      sx={{
+                        fontSize: '14px',
+                        width: column.props.width || 'auto', // APLICA EL ANCHO AQUÍ TAMBIÉN
+                        whiteSpace: 'nowrap', // Asegura que el contenido no se rompa prematuramente
+                        padding: '12px 16px', // Asegura un padding consistente
+                        borderBottom: 'none'
+                      }}
+                    >
+                      {cellRenderer(fieldData)}
+                    </TableCell>
+                  );
+                })}
+              </TableRow>
+            );
+          })}
+          {/* Empty table message */}
+          
+        </TableBody>
+      </MuiTable>
+
+      { paginatedData.length === 0 && (
+          <Box  display="flex" flexDirection="column" alignItems="center" justifyContent="center" p={4} > 
+            {  emptyImageSrc }
+
+                  <Typography variant="body2" color="#878E9A" fontSize="18px" fontWeight="600">
+                    {emptyTitle || 'No hay datos disponibles para mostrar.'}
+                  </Typography>
+                  <Typography variant="body2" color="#878E9A" fontSize="14px" mt={1}> 
+                    {emptyMessage || 'Intente ajustar sus filtros o agregar nuevos datos.'}
+                  </Typography>
+
+          </Box>
+        )
+      }
+
+      {/* Pagination and Export Controls */}
+      {(effectiveTotalPages > 0 || enableCSVExport || enableExcelExport || (enableRowSelection && selectedRows.length > 0)) && (
+        <Box display="flex" justifyContent="space-between" alignItems="center" p={2}>
+          {/* Page Size Selector (Left) */}
+          {(effectiveTotalPages > 0 && showPageSizeSelector) && (
+            <Select
+              size="small"
+              value={activePageSize}
+              onChange={(e) => handlePageSizeChange(Number(e.target.value))}
+            >
+              {[1, 2, 3, 5, 10, 20, 50, 100].map((size) => (
+                <MenuItem key={size} value={size}>
+                  Mostrar {size}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+
+          {/* Pagination Controls (Center) */}
+          {effectiveTotalPages > 0 && (
+            <Box
+              display="flex"
+              alignItems="center"
+              gap={0.5}
+              sx={{ flexGrow: 1, justifyContent: 'center' }}
+            >
+              <IconButton
+                onClick={() => handlePageChange(1)}
+                disabled={activePage <= 1}
+                size="small"
+                color="primary"
+              >
+                <FirstPageIcon fontSize="small" />
+              </IconButton>
+
+              <IconButton
+                onClick={() => handlePageChange(activePage - 1)}
+                disabled={activePage <= 1}
+                size="small"
+                color="primary"
+              >
+                <KeyboardArrowLeftIcon fontSize="small" />
+              </IconButton>
+
+              {pageNumbers.map((pageNumber) => (
+                <Button
+                  key={pageNumber}
+                  onClick={() => handlePageChange(pageNumber)}
+                  variant={activePage === pageNumber ? 'contained' : 'text'}
+                  size="small"
+                  sx={{ minWidth: '32px', height: '32px' }}
+                >
+                  {pageNumber}
+                </Button>
+              ))}
+
+              <IconButton
+                onClick={() => handlePageChange(activePage + 1)}
+                disabled={activePage >= effectiveTotalPages}
+                size="small"
+                color="primary"
+              >
+                <KeyboardArrowRightIcon fontSize="small" />
+              </IconButton>
+
+              <IconButton
+                onClick={() => handlePageChange(effectiveTotalPages)}
+                disabled={activePage >= effectiveTotalPages}
+                size="small"
+                color="primary"
+              >
+                <LastPageIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          )}
+
+          {enableRowSelection && selectedRows.length > 0 && (
+            <Typography variant="subtitle2" sx={{ mr: 2 }}>
+              {selectedRows.length} seleccionados
+            </Typography>
+          )}
+
+          {(enableCSVExport || enableExcelExport) && (
+            <Box display="flex" alignItems="center" gap={1}>
+              {enableCSVExport && (
+                <Button
+                  variant="text"
+                  color="primary"
+                  onClick={() =>
+                    exportToCSV({
+                      data,
+                      columns,
+                      fileName: csvExportFileName,
+                      exportColumns: csvExportColumns,
+                      setSnackbarOpen,
+                      setSnackbarMessage,
+                      setSnackbarSeverity,
+                    })
+                  }
+                  size="small"
+                  startIcon={<DownloadOutlinedIcon />}
+                >
+                  {csvExportButtonText}
+                </Button>
+              )}
+              {enableExcelExport && (
+                <Button
+                  variant="text"
+                  color="primary"
+                  onClick={() =>
+                    exportToExcel({
+                      data,
+                      columns,
+                      fileName: excelExportFileName,
+                      exportColumns: excelExportColumns,
+                      setSnackbarOpen,
+                      setSnackbarMessage,
+                      setSnackbarSeverity,
+                    })
+                  }
+                  size="small"
+                  startIcon={<DownloadOutlinedIcon />}
+                >
+                  {excelExportButtonText}
+                </Button>
+              )}
+            </Box>
+          )}
+        </Box>
+      )}
+
+      <Snackbar open={snackbarOpen} autoHideDuration={3000} onClose={handleSnackbarClose} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}>
+        <Alert onClose={handleSnackbarClose} severity={snackbarSeverity} sx={{ width: '100%' }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
+    </TableContainer>
+  );
+}
+
+export default Table;

package/src/components/Table/data.ts

@@ -0,0 +1,134 @@
+// Datos de ejemplo
+export const usuarios: Usuario[] = [
+    {
+      id: 1,
+      nombre: 'Juan Pérez',
+      email: 'juan@example.com',
+      avatar: 'https://placehold.co/50x50/F0F8FF/333333?text=JP', // Placeholder para avatar
+      edad: 25,
+      activo: true,
+      rol: 'admin',
+      fechaRegistro: '2023-01-15',
+      puntuacion: 4.5
+    },
+    {
+      id: 2,
+      nombre: 'Ana García',
+      email: 'ana@example.com',
+      avatar: 'https://placehold.co/50x50/FFF0F5/333333?text=AG', // Placeholder para avatar
+      edad: 30,
+      activo: false,
+      rol: 'usuario',
+      fechaRegistro: '2023-02-20',
+      puntuacion: 3.8
+    },
+    {
+      id: 3,
+      nombre: 'Carlos López',
+      email: 'carlos@example.com',
+      avatar: 'https://placehold.co/50x50/F5FFFA/333333?text=CL', // Placeholder para avatar
+      edad: 28,
+      activo: true,
+      rol: 'moderador',
+      fechaRegistro: '2023-03-10',
+      puntuacion: 4.2
+    },
+    {
+      id: 4,
+      nombre: 'María Rodríguez',
+      email: 'maria@example.com',
+      avatar: 'https://placehold.co/50x50/F8F8FF/333333?text=MR', // Placeholder para avatar
+      edad: 35,
+      activo: true,
+      rol: 'usuario',
+      fechaRegistro: '2023-04-05',
+      puntuacion: 4.9
+    },
+    {
+      id: 5,
+      nombre: 'Luis Martínez',
+      email: 'luis@example.com',
+      avatar: 'https://placehold.co/50x50/E6E6FA/333333?text=LM', // Placeholder para avatar
+      edad: 22,
+      activo: false,
+      rol: 'usuario',
+      fechaRegistro: '2023-05-12',
+      puntuacion: 3.2
+    }
+  ]
+  
+  export const productos:Producto[] = [
+    {
+      id: 1,
+      nombre: 'iPhone 15',
+      precio: 999,
+      categoria: 'Electrónicos',
+      stock: 15,
+      imagen: 'https://placehold.co/60x60/ADD8E6/000000?text=I15', // Placeholder para imagen
+      enOferta: true,
+      rating: 4.8
+    },
+    {
+      id: 2,
+      nombre: 'Samsung Galaxy S24',
+      precio: 899,
+      categoria: 'Electrónicos',
+      stock: 8,
+      imagen: 'https://placehold.co/60x60/90EE90/000000?text=S24', // Placeholder para imagen
+      enOferta: false,
+      rating: 4.6
+    },
+    {
+      id: 3,
+      nombre: 'MacBook Pro',
+      precio: 1999,
+      categoria: 'Computadoras',
+      stock: 3,
+      imagen: 'https://placehold.co/60x60/DDA0DD/000000?text=MBP', // Placeholder para imagen
+      enOferta: true,
+      rating: 4.9
+    },
+    {
+      id: 4,
+      nombre: 'Dell XPS 13',
+      precio: 1299,
+      categoria: 'Computadoras',
+      stock: 0,
+      imagen: 'https://placehold.co/60x60/FFB6C1/000000?text=DX13', // Placeholder para imagen
+      enOferta: false,
+      rating: 4.4
+    }
+  ]
+  
+export  const empleados:Empleado[] = [
+    {
+      id: 1,
+      nombre: 'Roberto',
+      apellido: 'Silva',
+      departamento: 'Desarrollo',
+      salario: 75000,
+      fechaIngreso: '2022-01-15',
+      activo: true,
+      avatar: 'https://placehold.co/50x50/B0E0E6/000000?text=RS' // Placeholder para avatar
+    },
+    {
+      id: 2,
+      nombre: 'Sofía',
+      apellido: 'Herrera',
+      departamento: 'Diseño',
+      salario: 65000,
+      fechaIngreso: '2022-03-20',
+      activo: true,
+      avatar: 'https://placehold.co/50x50/F5DEB3/000000?text=SH' // Placeholder para avatar
+    },
+    {
+      id: 3,
+      nombre: 'Diego',
+      apellido: 'Morales',
+      departamento: 'Marketing',
+      salario: 55000,
+      fechaIngreso: '2021-11-10',
+      activo: false,
+      avatar: 'https://placehold.co/50x50/D8BFD8/000000?text=DM' // Placeholder para avatar
+    }
+  ]