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

package/src/components/Table/Table.tsx

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

@@ -1,134 +0,0 @@
-// 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
-    }
-  ]