@soyfri/shared-library 2.0.0-beta.20 → 2.0.0-beta.22

package/src/components/Table/Table.stories.tsx

@@ -1,853 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import React, { useState, useEffect } from 'react' // Añadido useEffect para historias con selección
-import { Table } from './Table'
-import { Column } from '../Column/Column'
-import { Box, Chip, Avatar, Rating, Typography, Link, Button } from '@mui/material'
-import { usuarios, productos, empleados } from './data' // Mantener las importaciones de datos existentes
-import {
-  ActionsColumnCode,
-  BasicTableCode,
-  ComplexComponentsCode,
-  EmployeeDetailedStatusCode,
-  EmployeeTableCode,
-  EmptyTableCode,
-  ProductTableCode,
-  ProductTableWithZeroStockHighlightedCode,
-  SingleRowCode,
-  TableWithExportCode,
-  UserTableSortedByAgeCode,
-  WithExportAndSelectionCode,
-  WithExternalPaginationControlCode,
-  WithRowSelectionCode,
-} from './Table.definition'
-
-// -----------------------------------------------------------------------------
-// Definición de las historias de Storybook
-// -----------------------------------------------------------------------------
-
-// Define un tipo de datos de ejemplo para las nuevas historias (distinto de 'Usuario' de data.ts si es necesario)
-interface UserData {
-  id: number;
-  name: string;
-  age: number;
-  city: string;
-  email: string;
-}
-
-// Datos de ejemplo para las nuevas historias
-const sampleData: UserData[] = [
-  { id: 1, name: 'Alice Smith', age: 28, city: 'New York', email: 'alice@example.com' },
-  { id: 2, name: 'Bob Johnson', age: 34, city: 'London', email: 'bob@example.com' },
-  { id: 3, name: 'Charlie Brown', age: 22, city: 'Paris', email: 'charlie@example.com' },
-  { id: 4, name: 'Diana Prince', age: 40, city: 'Themyscira', email: 'diana@example.com' },
-  { id: 5, name: 'Eve Adams', age: 19, city: 'Berlin', email: 'eve@example.com' },
-  { id: 6, name: 'Frank White', age: 55, city: 'Tokyo', email: 'frank@example.com' },
-  { id: 7, name: 'Grace Lee', age: 31, city: 'Seoul', email: 'grace@example.com' },
-  { id: 8, name: 'Henry Ford', age: 60, city: 'Detroit', email: 'henry@example.com' },
-  { id: 9, name: 'Ivy Green', age: 25, city: 'Rome', email: 'ivy@example.com' },
-  { id: 10, name: 'Jack Black', age: 45, city: 'Los Angeles', email: 'jack@example.com' },
-  { id: 11, name: 'Karen Millen', age: 33, city: 'Madrid', email: 'karen@example.com' },
-  { id: 12, name: 'Leo Messi', age: 37, city: 'Miami', email: 'leo@example.com' },
-];
-
-const meta: Meta<typeof Table> = {
-  title: 'Components/Table',
-  component: Table,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component: 'Componente de tabla flexible y tipado que permite definir columnas de forma declarativa con paginación interna o externa.'
-      }
-
-    }
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    data: { control: 'object', description: 'Array de objetos de datos a mostrar en la tabla. Las columnas heredarán el tipo definido del arreglo de datos.' },
-    children: { control: false, description: 'Componentes `Column` que definen la estructura de las columnas. Las columnas definen requieren las propiedades: `name` que es el nombre que se verá en la columna y `field` que son los atributos a los cuales se podran acceder desde el scope interno de la columna. Si el atributo `field` tiene un arreglo vacio, se utilizará el objeto completo (todos los campos del objeto).' },
-    currentPage: { control: 'number', description: 'Número de página actual (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
-    pageSize: { control: 'number', description: 'Número de elementos por página (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
-    totalPages: { control: 'number', description: 'Número total de páginas (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
-    previousPage: { control: 'number', description: 'Página anterior (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
-    nextPage: { control: 'number', description: 'Página siguiente (para paginación controlada).', if: { arg: 'onPageChange', exists: true } },
-    pageSizeSelectorValue: { control: 'number', description: 'Valor por defecto para el selector de tamaño de página cuando la paginación es interna.' },
-    onPageChange: { action: 'page changed', description: 'Callback para manejar el cambio de página (activa paginación controlada).' },
-    onPageSizeChange: { action: 'page size changed', description: 'Callback para manejar el cambio de tamaño de página (activa paginación controlada).', if: { arg: 'onPageChange', exists: true } },
-    enableCSVExport: { control: 'boolean', description: 'Habilita o deshabilita la funcionalidad de exportación a CSV.', defaultValue: false },
-    csvExportFileName: { control: 'text', description: 'Nombre del archivo CSV al exportar.', defaultValue: 'data.csv', if: { arg: 'enableCSVExport', eq: true } },
-    enableExcelExport: { control: 'boolean', description: 'Habilita o deshabilita la funcionalidad de exportación a Excel.', defaultValue: false },
-    excelExportFileName: { control: 'text', description: 'Nombre del archivo Excel al exportar.', defaultValue: 'data.xlsx', if: { arg: 'enableExcelExport', eq: true } },
-    csvExportButtonText: { control: 'text', description: 'Texto del botón de exportar.', defaultValue: 'Exportar CSV', if: { arg: 'enableCSVExport', eq: true } },
-    excelExportButtonText: { control: 'text', description: 'Texto del botón de exportar.', defaultValue: 'Exportar Excel', if: { arg: 'enableExcelExport', eq: true } },
-    csvExportColumns: { control: 'text', description: 'Array de nombres de columnas a exportar. Si no se especifica, se exportan todas.', if: { arg: 'enableCSVExport', eq: true } },
-    // NUEVOS argTypes para selección de filas
-    enableRowSelection: { control: 'boolean', description: 'Habilita o deshabilita la selección de filas con checkboxes.', defaultValue: false },
-    rowIdentifier: { control: 'text', description: 'La clave única en el objeto de datos utilizada como identificador para las filas seleccionables (ej. "id").', if: { arg: 'enableRowSelection', eq: true } },
-    onSelectionChange: { action: 'selectionChanged', description: 'Callback que se dispara cuando cambia la selección de filas. Devuelve un array con los objetos seleccionados.', if: { arg: 'enableRowSelection', eq: true } },
-  }
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// --- Historias para el componente Table ---
-
-export const BasicTable: Story = {
-  args: {
-    data: usuarios,
-  },
-  render: ({ data }) => (
-    <Table data={data} pageSizeSelectorValue={1} pageSize={1}>
-      <Column name="Nombre" field="nombre">
-        {({ nombre }) => <Typography>{nombre}</Typography>}
-      </Column>
-      <Column name="Email" field="email">
-        {({ email }) => <Typography color="text.secondary">{email}</Typography>}
-      </Column>
-      <Column width='10%' name="Edad" field="edad">
-        {({ edad }) => <Typography>{edad} años</Typography>}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla básica con datos simples y columnas de texto. La paginación es interna por defecto.'
-      },
-      source: {
-        code: BasicTableCode.trim()
-      }
-
-    }
-  }
-};
-
-export const ComplexComponents: Story = {
-  args: {
-    data: usuarios.slice(0, 4),
-  },
-  render: ({ data }) => (
-    <Table data={data}>
-      <Column name="Usuario" field={['avatar', 'nombre']}>
-        {({ avatar, nombre }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Avatar src={avatar} alt={nombre} sx={{ width: 40, height: 40 }} />
-            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-          </Box>
-        )}
-      </Column>
-      <Column name="Estado" field="activo">
-        {({ activo }) => (
-          <Chip
-            label={activo ? 'Activo' : 'Inactivo'}
-            color={activo ? 'success' : 'default'}
-            size="small"
-          />
-        )}
-      </Column>
-      <Column name="Rol" field="rol">
-        {({ rol }) => (
-          <Chip
-            label={rol!.charAt(0).toUpperCase() + rol!.slice(1)}
-            color={rol === 'admin' ? 'primary' : rol === 'moderador' ? 'secondary' : 'default'}
-            variant="outlined"
-            size="small"
-          />
-        )}
-      </Column>
-      <Column name="Puntuación" field="puntuacion">
-        {({ puntuacion }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Rating value={puntuacion} max={5} precision={0.1} size="small" readOnly />
-            <Typography variant="caption" color="text.secondary">
-              {puntuacion}
-            </Typography>
-          </Box>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla con componentes complejos como avatars, chips y ratings. La paginación es interna por defecto.'
-      },
-      source: {
-        code: ComplexComponentsCode.trim()
-      }
-    }
-  }
-};
-
-export const WithExternalPaginationControl: Story = {
-  render: () => {
-    const [currentPage, setCurrentPage] = useState(1);
-    const [pageSize, setPageSize] = useState(2);
-    const totalItems = usuarios.length;
-    const totalPages = Math.ceil(totalItems / pageSize);
-
-    const startIndex = (currentPage - 1) * pageSize;
-    const currentData = usuarios.slice(startIndex, startIndex + pageSize);
-
-    const previousPageNum = currentPage > 1 ? currentPage - 1 : 1;
-    const nextPageNum = currentPage < totalPages ? currentPage + 1 : totalPages;
-
-    return (
-      <Table
-        data={currentData}
-        currentPage={currentPage}
-        pageSize={pageSize}
-        totalPages={totalPages}
-        previousPage={previousPageNum}
-        nextPage={nextPageNum}
-        onPageChange={setCurrentPage}
-        onPageSizeChange={setPageSize}
-      >
-        <Column name="Nombre" field="nombre">
-          {({ nombre }) => <Typography variant="body2" fontWeight="medium">{nombre}</Typography>}
-        </Column>
-        <Column name="Email" field="email">
-          {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
-        </Column>
-        <Column name="Estado" field="activo">
-          {({ activo }) => (
-            <Chip
-              label={activo ? 'Activo' : 'Inactivo'}
-              color={activo ? 'success' : 'default'}
-              size="small"
-            />
-          )}
-        </Column>
-        <Column name="Fecha de Registro" field="fechaRegistro">
-          {({ fechaRegistro }) => (
-            <Typography variant="body2">
-              {new Date(fechaRegistro!).toLocaleDateString('es-ES')}
-            </Typography>
-          )}
-        </Column>
-      </Table>
-    );
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla con paginación controlada externamente. El componente `Table` no gestiona el estado de la paginación, solo la UI.'
-      },
-      source: {
-        code: WithExternalPaginationControlCode.trim()
-
-      }
-    }
-  }
-};
-
-export const ProductTable: Story = {
-  args: {
-    data: productos,
-    pageSizeSelectorValue: 1,
-  },
-  render: ({ data, pageSizeSelectorValue }) => (
-    <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
-      <Column name="Producto" field={['imagen', 'nombre']}>
-        {({ imagen, nombre }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Box
-              component="img"
-              src={imagen}
-              alt={nombre}
-              sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
-            />
-            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-          </Box>
-        )}
-      </Column>
-      <Column name="Precio" field={['precio', 'enOferta']}>
-        {({ precio, enOferta }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography
-              variant="body2"
-              color={enOferta ? 'error.main' : 'text.primary'}
-              fontWeight={enOferta ? 'bold' : 'normal'}
-            >
-              ${precio!.toLocaleString()}
-            </Typography>
-            {enOferta && (
-              <Chip label="OFERTA" color="error" size="small" />
-            )}
-          </Box>
-        )}
-      </Column>
-      <Column name="Stock" field="stock">
-        {({ stock }) => (
-          <Chip
-            label={stock! > 0 ? `${stock} unidades` : 'Sin stock'}
-            color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
-            size="small"
-          />
-        )}
-      </Column>
-      <Column name="Categoría" field="categoria">
-        {({ categoria }) => (
-          <Typography variant="body2">{categoria}</Typography>
-        )}
-      </Column>
-      <Column name="Rating" field="rating">
-        {({ rating }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
-            <Typography variant="caption">({rating})</Typography>
-          </Box>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla de productos con imágenes, precios, stock y calificaciones. Paginación interna.'
-      },
-      source: {
-        code: ProductTableCode.trim()
-      }
-    }
-  }
-};
-
-export const EmployeeTable: Story = {
-  args: {
-    data: empleados,
-    pageSizeSelectorValue: 1,
-  },
-  render: ({ data, pageSizeSelectorValue }) => (
-    <Table data={data} pageSizeSelectorValue={pageSizeSelectorValue}>
-      <Column name="Empleado" field={['avatar', 'nombre', 'apellido']}>
-        {({ avatar, nombre, apellido }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
-              {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}
-            </Avatar>
-            <Typography variant="body2" fontWeight="medium">
-              {nombre} {apellido}
-            </Typography>
-          </Box>
-        )}
-      </Column>
-      <Column name="Departamento" field="departamento">
-        {({ departamento }) => (
-          <Chip
-            label={departamento}
-            color="info"
-            variant="filled"
-            size="small"
-          />
-        )}
-      </Column>
-      <Column name="Salario" field="salario">
-        {({ salario }) => (
-          <Typography variant="body2" fontWeight="bold" color="success.dark">
-            ${salario!.toLocaleString('es-ES')}
-          </Typography>
-        )}
-      </Column>
-      <Column name="Estado" field={['activo', 'fechaIngreso']}>
-        {({ activo, fechaIngreso }) => (
-          <Box>
-            <Chip
-              label={activo ? 'Contratado' : 'Inactivo'}
-              color={activo ? 'success' : 'error'}
-              size="small"
-            />
-            <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
-              Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
-            </Typography>
-          </Box>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla de empleados con múltiples campos combinados en una sola columna. Paginación interna.'
-      },
-      source: {
-        code: EmployeeTableCode.trim()
-      }
-    }
-  }
-};
-
-export const EmptyTable: Story = {
-  args: {
-    data: [],
-  },
-  render: ({ data }) => (
-    <Table 
-      data={data}
-      emptyTitle="No se encontraron registros"
-      emptyMessage="Intente ajustar sus filtros o agregar nuevos datos."
-      // emptyImageSrc={<img src="path/to/empty/image.png" alt="No data" />}
-      >
-      <Column name="Nombre" field="nombre">
-        {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
-      </Column>
-      <Column name="Email" field="email">
-        {({ email }) => <Typography variant="body2">{email}</Typography>}
-      </Column>
-      <Column name="Estado" field="activo">
-        {({ activo }) => <Chip label={activo ? 'Activo' : 'Inactivo'} size="small" />}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla sin datos para mostrar el estado vacío y el mensaje correspondiente.'
-      },
-      source: {
-        code: EmptyTableCode.trim()
-      }
-    }
-  }
-};
-
-export const SingleRow: Story = {
-  args: {
-    data: [usuarios[0]],
-  },
-  render: ({ data }) => (
-    <Table data={data}>
-      <Column name="Usuario" field={['avatar', 'nombre', 'email']}>
-        {({ avatar, nombre, email }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Avatar src={avatar} alt={nombre} />
-            <Box>
-              <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-              <Typography variant="caption" color="text.secondary">{email}</Typography>
-            </Box>
-          </Box>
-        )}
-      </Column>
-      <Column<Usuario> name="Información" field={[]}>
-        {(user) => (
-          <>
-            <Typography variant="body2">{user.edad} años</Typography>
-            <Box sx={{ display: 'flex', gap: 1, mt: 0.5 }}>
-              <Chip label={user.rol} size="small" color="primary" variant="outlined" />
-              <Chip
-                label={user.activo ? 'Activo' : 'Inactivo'}
-                size="small"
-                color={user.activo ? 'success' : 'default'}
-              />
-            </Box>
-          </>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla con una sola fila de datos.'
-      },
-      source: {
-        code: SingleRowCode.trim()
-      }
-    }
-  }
-};
-
-export const ProductTableWithZeroStockHighlighted: Story = {
-  args: {
-    data: productos,
-  },
-  render: ({ data }) => (
-    <Table data={data}>
-      <Column name="Producto" field={['imagen', 'nombre']}>
-        {({ imagen, nombre }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Box
-              component="img"
-              src={imagen}
-              alt={nombre}
-              sx={{ width: 50, height: 50, borderRadius: 1, objectFit: 'cover' }}
-            />
-            <Typography variant="body2" fontWeight="medium">{nombre}</Typography>
-          </Box>
-        )}
-      </Column>
-      <Column name="Precio" field={['precio', 'enOferta']}>
-        {({ precio, enOferta }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography
-              variant="body2"
-              color={enOferta ? 'error.main' : 'text.primary'}
-              fontWeight={enOferta ? 'bold' : 'normal'}
-            >
-              ${precio!.toLocaleString()}
-            </Typography>
-            {enOferta && (
-              <Chip label="OFERTA" color="error" size="small" />
-            )}
-          </Box>
-        )}
-      </Column>
-      <Column name="Stock" field="stock">
-        {({ stock }) => (
-          <Chip
-            label={stock! > 0 ? `${stock} unidades` : 'Sin stock'}
-            color={stock! > 5 ? 'success' : stock! > 0 ? 'warning' : 'error'}
-            size="small"
-            sx={{ backgroundColor: stock === 0 ? 'rgba(255, 0, 0, 0.1)' : undefined }}
-          />
-        )}
-      </Column>
-      <Column name="Rating" field="rating">
-        {({ rating }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Rating value={rating} max={5} precision={0.1} size="small" readOnly />
-            <Typography variant="caption">({rating})</Typography>
-          </Box>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra la tabla de productos resaltando visualmente los productos sin stock. Paginación interna.'
-      },
-      source: {
-        code: ProductTableWithZeroStockHighlightedCode.trim()
-      }
-    }
-  }
-};
-
-
-export const EmployeeDetailedStatus: Story = {
-  args: {
-    data: empleados,
-  },
-  render: ({ data }) => (
-    <Table data={data}>
-      <Column name="Empleado" field={['nombre', 'apellido', 'avatar']}>
-        {({ nombre, apellido, avatar }) => (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Avatar src={avatar} sx={{ width: 40, height: 40 }}>
-              {avatar ? '' : `${nombre!.charAt(0)}${apellido!.charAt(0)}`}
-            </Avatar>
-            <Typography variant="body2" fontWeight="medium">
-              {nombre} {apellido}
-            </Typography>
-          </Box>
-        )}
-      </Column>
-      <Column name="Departamento" field="departamento">
-        {({ departamento }) => (
-          <Chip
-            label={departamento}
-            color="info"
-            variant="filled"
-            size="small"
-          />
-        )}
-      </Column>
-      <Column name="Salario" field="salario">
-        {({ salario }) => (
-          <Typography variant="body2" fontWeight="bold" color="success.dark">
-            ${salario!.toLocaleString('es-ES')}
-          </Typography>
-        )}
-      </Column>
-      <Column name="Estado de Contratación" field={['activo', 'fechaIngreso']}>
-        {({ activo, fechaIngreso }) => (
-          <Box>
-            <Chip
-              label={activo ? 'Contratado' : 'Inactivo'}
-              color={activo ? 'success' : 'error'}
-              size="small"
-            />
-            <Typography variant="caption" display="block" color="text.secondary" sx={{ mt: 0.5 }}>
-              Desde: {new Date(fechaIngreso!).toLocaleDateString('es-ES')}
-            </Typography>
-          </Box>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Muestra una tabla de empleados con un resumen detallado de su estado de contratación y fecha de ingreso. Paginación interna.'
-      },
-      source: {
-        code: EmployeeDetailedStatusCode.trim()
-      }
-    }
-  }
-};
-
-export const ActionsColumn: Story = {
-  args: {
-    data: usuarios.slice(0, 3),
-  },
-  render: ({ data }) => (
-    <Table data={data}>
-      <Column name="Nombre" field="nombre">
-        {({ nombre }) => <Typography variant="body2">{nombre}</Typography>}
-      </Column>
-      <Column name="Email" field="email">
-        {({ email }) => <Typography variant="body2" color="text.secondary">{email}</Typography>}
-      </Column>
-      <Column name="Acciones" field="id">
-        {({ id }) => (
-          <Button
-            variant="contained"
-            color="primary"
-            size="small"
-            onClick={() => alert('ID del usuario: ' + id)}
-          >
-            Ver Detalles ({id})
-          </Button>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Ejemplo de tabla con una columna de acciones que, al hacer clic en un botón, registra el ID del elemento en la consola.'
-      },
-      source: {
-        code: ActionsColumnCode.trim()
-      }
-    }
-  }
-};
-
-export const TableWithExport: Story = {
-  args: {
-    data: usuarios,
-    enableCSVExport: true,
-    enableExcelExport: true,
-    csvExportFileName: 'usuarios_data',
-    csvExportButtonText: '.csv',
-    excelExportFileName: 'usuarios_data',
-    excelExportButtonText: '.xlsx',
-    csvExportColumns: ['ID', 'Nombre', 'Email', 'Edad'],
-    excelExportColumns: ['ID', 'Nombre', 'Email', 'Edad'],
-  },
-  render: ({ data, enableCSVExport, enableExcelExport, csvExportFileName, csvExportButtonText, excelExportFileName, excelExportButtonText, csvExportColumns, excelExportColumns }) => (
-    <Table<Usuario>
-      data={usuarios}
-      enableCSVExport={enableCSVExport}
-      enableExcelExport={enableExcelExport}
-      csvExportFileName={csvExportFileName}
-      csvExportButtonText={csvExportButtonText}
-      excelExportFileName={excelExportFileName}
-      excelExportButtonText={excelExportButtonText}
-      csvExportColumns={csvExportColumns}
-      excelExportColumns={excelExportColumns}
-    >
-      <Column<Usuario> name="ID" field="id">
-        {(row) => <Typography>{row.id}</Typography>}
-      </Column>
-      <Column<Usuario> name="Nombre" field="nombre">
-        {(row) => <Typography>{row.nombre}</Typography>}
-      </Column>
-      <Column<Usuario> name="Email" field="email">
-        {({ email }) => <Link href={`mailto:${email}`}>{email}</Link>}
-      </Column>
-      <Column<Usuario> name="Edad" field="edad">
-        {(row) => <Typography>{row.edad}</Typography>}
-      </Column>
-      <Column<Usuario> name="Rol" field="rol">
-        {({ rol }) => <Chip label={rol} size="small" />}
-      </Column>
-      <Column<Usuario> name="Acciones" field="id">
-        {({ id }) => (
-          <Button variant="outlined" size="small" onClick={() => alert(`Ver detalles de usuario ${id}`)}>
-            Ver
-          </Button>
-        )}
-      </Column>
-    </Table>
-  ),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla con la funcionalidad de exportar sus datos a un archivo CSV. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo.'
-      },
-      source: {
-        code: TableWithExportCode.trim()
-      }
-    }
-  }
-};
-
-
-export const WithRowSelection: Story = {
-  render: (args) => {
-    const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
-
-    const handleSelectionChange = (items: UserData[]) => {
-      setSelectedItems(items);
-      args.onSelectionChange?.(items);
-    };
-
-    const handleBulkDelete = () => {
-      if (selectedItems.length > 0) {
-        alert(`Eliminando ${selectedItems.length} usuarios: ${selectedItems.map(item => item.name).join(', ')}`);
-        setSelectedItems([]);
-      } else {
-        alert('No hay elementos seleccionados para eliminar.');
-      }
-    };
-
-    const handleBulkUpdateCity = () => {
-      if (selectedItems.length > 0) {
-        const newCity = prompt('Ingresa la nueva ciudad para los seleccionados:');
-        if (newCity) {
-          alert(`Actualizando ciudad de ${selectedItems.length} usuarios a ${newCity}`);
-          setSelectedItems([]);
-        }
-      } else {
-        alert('No hay elementos seleccionados para actualizar.');
-      }
-    };
-
-    return (
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Tabla con Selección de Filas
-        </Typography>
-        {selectedItems.length > 0 && (
-          <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
-            <Button variant="contained" color="error" onClick={handleBulkDelete}>
-              Eliminar ({selectedItems.length})
-            </Button>
-            <Button variant="contained" color="primary" onClick={handleBulkUpdateCity}>
-              Actualizar Ciudad ({selectedItems.length})
-            </Button>
-            <Typography variant="body2" sx={{ alignSelf: 'center', ml: 2 }}>
-              Elementos seleccionados: {selectedItems.length}
-            </Typography>
-          </Box>
-        )}
-        <Table<UserData>
-          {...args}
-          data={sampleData} // Usamos sampleData para esta historia
-          enableRowSelection={true}
-          rowIdentifier="id" // Es crucial que coincida con una clave única en tus datos
-          onSelectionChange={handleSelectionChange}
-          pageSizeSelectorValue={5}
-        >
-          <Column<UserData>
-            name="ID"
-            field="id"
-            children={(row) => <Typography>{row.id}</Typography>}
-          />
-          <Column<UserData>
-            name="Nombre"
-            field="name"
-            children={(row) => <Typography>{row.name}</Typography>}
-          />
-          <Column<UserData>
-            name="Email"
-            field="email"
-            children={(row) => <Typography>{row.email}</Typography>}
-          />
-          <Column<UserData>
-            name="Ciudad"
-            field="city"
-            children={(row) => <Typography>{row.city}</Typography>}
-          />
-        </Table>
-      </Box>
-    );
-  },
-  args: {
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla con la funcionalidad de selección de filas. Puedes seleccionar una o muchas filas y realizar acciones en masa.'
-      },
-      source: {
-        code: WithRowSelectionCode.trim()
-      }
-    }
-  },
-};
-
-export const WithExportAndSelection: Story = {
-  render: (args) => {
-    const [selectedItems, setSelectedItems] = useState<UserData[]>([]);
-
-    const handleSelectionChange = (items: UserData[]) => {
-      setSelectedItems(items);
-      args.onSelectionChange?.(items);
-    };
-
-    return (
-      <Box>
-        <Typography variant="h6" gutterBottom>
-          Tabla con Exportación y Selección de Filas
-        </Typography>
-        {selectedItems.length > 0 && (
-          <Box sx={{ mb: 2 }}>
-            <Typography variant="body2">
-              Elementos seleccionados: {selectedItems.length}
-            </Typography>
-          </Box>
-        )}
-        <Table<UserData>
-          {...args}
-          data={sampleData} // Usamos sampleData para esta historia
-          enableRowSelection={true}
-          rowIdentifier="id"
-          onSelectionChange={handleSelectionChange}
-          pageSizeSelectorValue={5}
-          enableCSVExport={true}
-          csvExportFileName="users_data_with_selection"
-          enableExcelExport={true}
-          excelExportFileName="users_data_with_selection"
-        >
-          <Column<UserData>
-            name="ID"
-            field="id"
-            children={(row) => <Typography>{row.id}</Typography>}
-          />
-          <Column<UserData>
-            name="Nombre"
-            field="name"
-            children={(row) => <Typography>{row.name}</Typography>}
-          />
-          <Column<UserData>
-            name="Email"
-            field="email"
-            children={(row) => <Typography>{row.email}</Typography>}
-          />
-          <Column<UserData>
-            name="Ciudad"
-            field="city"
-            children={(row) => <Typography>{row.city}</Typography>}
-          />
-        </Table>
-      </Box>
-    );
-  },
-  args: {},
-  parameters: {
-    docs: {
-      description: {
-        story: 'Tabla con la funcionalidad de exportar sus datos a un archivo CSV y Excel. Puedes especificar qué columnas incluir en la exportación y el nombre del archivo.'
-      },
-      source: {
-        code: WithExportAndSelectionCode.trim()
-      }
-    }
-  }
-};