@widergy/energy-ui 3.173.3 → 3.174.0

package/dist/esm/components/UTTable/UTTable.stories.js

@@ -1,1083 +0,0 @@
-/* eslint-disable no-alert, no-console */
-import React from 'react';
-import { joinArgTypes } from 'stories/utils';
-import UTLabel from '../UTLabel';
-import UTButton from '../UTButton';
-import UTStatus from '../UTStatus';
-import UTBadge from '../UTBadge';
-import UTIcon from '../UTIcon';
-import UTTouchableWithoutFeedback from '../UTTouchableWithoutFeedback';
-import { INTEGRATION_TYPES } from '../../constants/UTTable';
-import { ROW_PADDING_NAMES, ROW_SPACING_NAMES, CELL_TYPES } from './constants';
-import UTTable from '.';
-
-// Mock data for the table
-const generateMockData = function () {
-  let count = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
-  return Array.from({
-    length: count
-  }, (_, index) => ({
-    id: index + 1,
-    name: "Usuario ".concat(index + 1),
-    email: "usuario".concat(index + 1, "@example.com"),
-    status: index % 3 === 0 ? 'active' : index % 3 === 1 ? 'inactive' : 'pending',
-    role: index % 2 === 0 ? 'Admin' : 'User',
-    createdAt: new Date(2023, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1).toLocaleDateString(),
-    score: Math.floor(Math.random() * 100),
-    department: index % 4 === 0 ? 'IT' : index % 4 === 1 ? 'HR' : index % 4 === 2 ? 'Finance' : 'Marketing'
-  }));
-};
-const mockData = generateMockData(50);
-
-// Basic columns configuration
-const basicColumns = [{
-  key: 'name',
-  name: 'Nombre',
-  sortable: true,
-  size: 'medium'
-}, {
-  key: 'email',
-  name: 'Email',
-  sortable: true,
-  size: 'large'
-}, {
-  key: 'role',
-  name: 'Rol',
-  sortable: true,
-  size: 'small'
-}, {
-  key: 'createdAt',
-  name: 'Fecha de Creación',
-  sortable: true,
-  size: 'medium'
-}];
-
-// Advanced columns with custom renderers
-const advancedColumns = [{
-  key: 'name',
-  name: 'Nombre',
-  sortable: true,
-  size: 'medium'
-}, {
-  key: 'email',
-  name: 'Email',
-  sortable: true,
-  size: 'large'
-}, {
-  key: 'status',
-  name: 'Estado',
-  sortable: true,
-  size: 'small',
-  type: CELL_TYPES.STATUS,
-  cellRenderer: _ref => {
-    let {
-      value
-    } = _ref;
-    return /*#__PURE__*/React.createElement(UTStatus, {
-      variant: value === 'active' ? 'success' : value === 'inactive' ? 'error' : 'warning'
-    }, value === 'active' ? 'Activo' : value === 'inactive' ? 'Inactivo' : 'Pendiente');
-  }
-}, {
-  key: 'role',
-  name: 'Rol',
-  sortable: true,
-  size: 'small',
-  cellRenderer: _ref2 => {
-    let {
-      value
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(UTBadge, {
-      variant: value === 'Admin' ? 'information' : 'neutral'
-    }, value);
-  }
-}, {
-  key: 'score',
-  name: 'Puntuación',
-  sortable: true,
-  size: 'small',
-  cellRenderer: _ref3 => {
-    let {
-      value
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(UTLabel, {
-      weight: "medium",
-      colorTheme: value > 70 ? 'success' : value > 40 ? 'warning' : 'error'
-    }, value, "%");
-  }
-}, {
-  key: 'clickable',
-  name: 'Celda Sin Padding',
-  sortable: false,
-  size: 'large',
-  withoutPadding: true,
-  cellRenderer: (_, _ref4) => {
-    let {
-      name
-    } = _ref4;
-    return /*#__PURE__*/React.createElement(UTTouchableWithoutFeedback, {
-      style: {
-        boxSizing: 'border-box',
-        height: '100%',
-        margin: '2px',
-        padding: 16,
-        width: '100%'
-      },
-      onClick: () => alert("Click en la celda: ".concat(name))
-    }, /*#__PURE__*/React.createElement(UTLabel, {
-      weight: "medium"
-    }, name));
-  }
-}];
-
-// Columns with actions
-const columnsWithActions = [...basicColumns, {
-  key: 'actions',
-  name: 'Acciones',
-  type: CELL_TYPES.ACTION_ICONS,
-  size: 'small',
-  position: 'right',
-  actions: [{
-    Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-      name: "IconEdit"
-    }),
-    tooltip: 'Editar',
-    onClick: row => alert("Editar usuario: ".concat(row.name))
-  }, {
-    Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-      name: "IconTrash"
-    }),
-    tooltip: 'Eliminar',
-    onClick: row => alert("Eliminar usuario: ".concat(row.name))
-  }, {
-    Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-      name: "IconEye"
-    }),
-    tooltip: 'Ver detalles',
-    onClick: row => alert("Ver detalles de: ".concat(row.name))
-  }]
-}];
-export default {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    loading: false,
-    selectable: false
-  },
-  argTypes: {
-    data: {
-      control: false,
-      description: 'Array de objetos que representan los datos de la tabla.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'array'
-        }
-      }
-    },
-    columns: {
-      control: false,
-      description: 'Configuración de las columnas de la tabla.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'array'
-        }
-      }
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Muestra el estado de carga.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    selectable: {
-      control: 'boolean',
-      description: 'Permite la selección de filas.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    disablePagination: {
-      control: 'boolean',
-      description: 'Deshabilita la paginación.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    tableTitle: {
-      control: 'text',
-      description: 'Título de la tabla.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    description: {
-      control: 'text',
-      description: 'Descripción de la tabla.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    noResultsLabel: {
-      control: 'text',
-      description: 'Texto mostrado cuando no hay resultados.',
-      table: {
-        defaultValue: {
-          summary: 'Aún no hay resultados'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    rowPadding: {
-      control: 'select',
-      description: 'Espaciado interno de las filas.',
-      options: Object.values(ROW_PADDING_NAMES),
-      table: {
-        defaultValue: {
-          summary: ROW_PADDING_NAMES.SMALL
-        },
-        type: {
-          summary: joinArgTypes(Object.values(ROW_PADDING_NAMES))
-        }
-      }
-    },
-    rowSpacing: {
-      control: 'select',
-      description: 'Espaciado entre filas.',
-      options: Object.values(ROW_SPACING_NAMES),
-      table: {
-        defaultValue: {
-          summary: ROW_SPACING_NAMES.NONE
-        },
-        type: {
-          summary: joinArgTypes(Object.values(ROW_SPACING_NAMES))
-        }
-      }
-    },
-    headerPadding: {
-      control: 'select',
-      description: 'Espaciado interno del header.',
-      options: Object.values(ROW_PADDING_NAMES),
-      table: {
-        defaultValue: {
-          summary: ROW_PADDING_NAMES.MEDIUM
-        },
-        type: {
-          summary: joinArgTypes(Object.values(ROW_PADDING_NAMES))
-        }
-      }
-    },
-    integrationType: {
-      control: 'select',
-      description: 'Tipo de integración para manejo de datos.',
-      options: Object.values(INTEGRATION_TYPES),
-      table: {
-        defaultValue: {
-          summary: INTEGRATION_TYPES.INTERNAL
-        },
-        type: {
-          summary: joinArgTypes(Object.values(INTEGRATION_TYPES))
-        }
-      }
-    },
-    stickyHeader: {
-      control: 'boolean',
-      description: 'Mantiene el header fijo al hacer scroll.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    fitColumnsWidth: {
-      control: 'boolean',
-      description: 'Ajusta el ancho de las columnas al contenedor.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    exclusiveSelection: {
-      control: 'boolean',
-      description: 'Permite solo la selección de una fila a la vez.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    disableAutoOrder: {
-      control: 'boolean',
-      description: 'Deshabilita el ordenamiento automático.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    hidePageSelector: {
-      control: 'boolean',
-      description: 'Oculta el selector de página en el pie de tabla.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    noResultsComponent: {
-      control: 'object',
-      description: 'Componente personalizado para mostrar cuando no hay resultados.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'ReactNode'
-        }
-      }
-    },
-    withRefresh: {
-      control: 'boolean',
-      description: 'Muestra botón de actualizar.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    withAutomaticRefresh: {
-      control: 'boolean',
-      description: 'Activa la actualización automática.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    onRowClick: {
-      control: false,
-      description: 'Callback ejecutado al hacer click en una fila.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    },
-    onSelectRow: {
-      control: false,
-      description: 'Callback ejecutado al seleccionar una fila.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    },
-    onSelectAllRows: {
-      control: false,
-      description: 'Callback ejecutado al seleccionar todas las filas.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    },
-    onOrderChange: {
-      control: false,
-      description: 'Callback ejecutado al cambiar el ordenamiento.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    },
-    onPageChange: {
-      control: false,
-      description: 'Callback ejecutado al cambiar de página.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    },
-    onRefresh: {
-      control: false,
-      description: 'Callback ejecutado al actualizar.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    },
-    headerVersion: {
-      control: 'select',
-      description: 'Versión del header a utilizar.',
-      options: ['V0', 'V1'],
-      table: {
-        defaultValue: {
-          summary: 'V0'
-        },
-        type: {
-          summary: joinArgTypes(['V0', 'V1'])
-        }
-      }
-    },
-    withActionHeader: {
-      control: 'boolean',
-      description: '(V1 only) Habilita el header de acciones avanzado.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    refreshLabel: {
-      control: 'text',
-      description: '(V1 only) Etiqueta para el estado de actualización.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    ongoingRefreshLabel: {
-      control: 'text',
-      description: '(V1 only) Etiqueta mostrada durante la actualización.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    selectedLabel: {
-      control: 'text',
-      description: '(V1 only) Etiqueta para mostrar elementos seleccionados.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    automaticRefreshDelay: {
-      control: 'number',
-      description: '(V1 only) Tiempo en milisegundos para el auto-refresh.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    actionsConfig: {
-      control: false,
-      description: '(V1 only) Configuración de botones de acción del header.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'array'
-        }
-      }
-    },
-    GeneralActions: {
-      control: false,
-      description: '(V0 only) Componente de acciones generales para V0.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'ReactNode'
-        }
-      }
-    },
-    onReloadRows: {
-      control: false,
-      description: '(V0 only) Callback ejecutado al recargar en V0.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'function'
-        }
-      }
-    }
-  },
-  component: UTTable,
-  parameters: {
-    controls: {
-      exclude: ['classes', 'classNames', 'actionDataTestId', 'cellDataTestId', 'headerActionDataTestId', 'headerCellDataTestId', 'headerSelectionComponentDataTestId', 'selectionComponentDataTestId', 'titleDataTestId', 'noResultDataTestId', 'clickableRowValidation', 'disableRowSelection', 'disableSelectAll', 'disabledRowTooltip', 'disabledSelectAllTooltip', 'getRowClassName', 'initialOrder', 'initialSelectedRows', 'rowKey', 'defaultNullValue', 'rowsPerPageOptions', 'selectAllInCurrentPageOnly', 'selectedLabel', 'totalRows', 'totalRowsLabel', 'externalPage', 'externalRowsPerPage', 'onRowsPerPageChange', 'Filters', 'GeneralActions', 'disableReloadRows', 'removeDefaultOrderIcon', 'removeFixedRowsDivisors', 'wrapperHeaderProps', 'mobileBreakpoint', 'tabletBreakpoint']
-    },
-    docs: {
-      description: {
-        component: 'Componente de tabla avanzado con soporte para paginación, ordenamiento, selección de filas, filtros y acciones personalizadas. Incluye versión responsiva y múltiples opciones de configuración.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTTable'
-};
-
-// Basic Stories
-export const Basic = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    tableTitle: 'Tabla Básica',
-    description: 'Ejemplo básico de tabla con datos simples'
-  },
-  name: 'Básica'
-};
-export const WithCustomRenderers = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: advancedColumns,
-    tableTitle: 'Tabla con Renderizadores Personalizados',
-    description: 'Tabla con celdas personalizadas usando componentes'
-  },
-  name: 'Con Renderizadores Personalizados'
-};
-export const WithActions = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: columnsWithActions,
-    tableTitle: 'Tabla con Acciones',
-    description: 'Tabla con columna de acciones'
-  },
-  name: 'Con Acciones'
-};
-export const Selectable = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    selectable: true,
-    tableTitle: 'Tabla Seleccionable',
-    description: 'Tabla con selección múltiple de filas',
-    onSelectRow: (rowId, selectedRows) => {
-      console.log('Fila seleccionada:', rowId, 'Todas las seleccionadas:', selectedRows);
-    },
-    onSelectAllRows: selectedAll => {
-      console.log('Seleccionar todas:', selectedAll);
-    }
-  },
-  name: 'Seleccionable'
-};
-export const ExclusiveSelection = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    selectable: true,
-    exclusiveSelection: true,
-    tableTitle: 'Tabla con Selección Exclusiva',
-    description: 'Tabla que permite seleccionar solo una fila a la vez',
-    onSelectRow: (rowId, selectedRows) => {
-      console.log('Fila seleccionada:', rowId, selectedRows);
-    }
-  },
-  name: 'Selección Exclusiva'
-};
-export const WithPagination = {
-  args: {
-    data: mockData,
-    columns: basicColumns,
-    tableTitle: 'Tabla con Paginación',
-    description: 'Tabla con paginación habilitada',
-    onPageChange: page => {
-      console.log('Cambio de página:', page);
-    }
-  },
-  name: 'Con Paginación'
-};
-export const NoPagination = {
-  args: {
-    data: mockData.slice(0, 15),
-    columns: basicColumns,
-    disablePagination: true,
-    tableTitle: 'Tabla sin Paginación',
-    description: 'Tabla con paginación deshabilitada'
-  },
-  name: 'Sin Paginación'
-};
-export const Loading = {
-  args: {
-    data: [],
-    columns: basicColumns,
-    loading: true,
-    tableTitle: 'Tabla Cargando',
-    description: 'Estado de carga de la tabla'
-  },
-  name: 'Cargando'
-};
-export const EmptyState = {
-  args: {
-    data: [],
-    columns: basicColumns,
-    tableTitle: 'Tabla Vacía',
-    description: 'Estado cuando no hay datos',
-    noResultsLabel: 'No se encontraron resultados'
-  },
-  name: 'Estado Vacío'
-};
-export const ClickableRows = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    tableTitle: 'Tabla con Filas Clickeables',
-    description: 'Filas que responden al click',
-    onRowClick: (event, row) => {
-      alert("Click en fila: ".concat(row.name));
-    }
-  },
-  name: 'Filas Clickeables'
-};
-export const StickyHeader = {
-  args: {
-    data: mockData,
-    columns: basicColumns,
-    stickyHeader: true,
-    tableTitle: 'Tabla con Header Fijo',
-    description: 'Header que se mantiene fijo al hacer scroll'
-  },
-  name: 'Header Fijo'
-};
-export const FitColumnsWidth = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    fitColumnsWidth: true,
-    tableTitle: 'Tabla con Columnas Ajustadas',
-    description: 'Columnas que se ajustan al ancho del contenedor'
-  },
-  name: 'Columnas Ajustadas'
-};
-export const WithRefresh = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    withRefresh: true,
-    tableTitle: 'Tabla con Actualización',
-    description: 'Tabla con botón de actualizar',
-    onRefresh: () => {
-      alert('Actualizando datos...');
-    }
-  },
-  name: 'Con Actualización'
-};
-export const CustomSpacing = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    rowSpacing: ROW_SPACING_NAMES.MEDIUM,
-    rowPadding: ROW_PADDING_NAMES.MEDIUM,
-    headerPadding: ROW_PADDING_NAMES.MEDIUM,
-    tableTitle: 'Tabla con Espaciado Personalizado',
-    description: 'Tabla con espaciado personalizado entre filas'
-  },
-  name: 'Espaciado Personalizado'
-};
-export const ExternalIntegration = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    integrationType: INTEGRATION_TYPES.EXTERNAL,
-    totalRows: 150,
-    externalPage: 0,
-    externalRowsPerPage: 10,
-    tableTitle: 'Tabla con Integración Externa',
-    description: 'Tabla configurada para manejo externo de paginación',
-    onPageChange: page => {
-      console.log('Cambio de página externo:', page);
-    },
-    onRowsPerPageChange: rowsPerPage => {
-      console.log('Cambio de filas por página:', rowsPerPage);
-    }
-  },
-  name: 'Integración Externa'
-};
-export const CompleteExample = {
-  args: {
-    data: mockData,
-    columns: advancedColumns,
-    selectable: true,
-    tableTitle: 'Tabla Completa',
-    description: 'Ejemplo completo con todas las características',
-    withRefresh: true,
-    stickyHeader: true,
-    onRowClick: (event, row) => {
-      console.log('Click en fila:', row);
-    },
-    onSelectRow: (rowId, selectedRows) => {
-      console.log('Fila seleccionada:', rowId, 'Total seleccionadas:', selectedRows.length);
-    },
-    onRefresh: () => {
-      console.log('Actualizando datos...');
-    },
-    onOrderChange: order => {
-      console.log('Cambio de orden:', order);
-    }
-  },
-  name: 'Ejemplo Completo'
-};
-
-// TableHeader V0 Stories
-export const TableHeaderV0Basic = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V0',
-    tableTitle: 'Tabla con Header V0',
-    description: 'Header básico con título y botón de recarga'
-  },
-  name: 'Header V0 - Básico'
-};
-export const TableHeaderV0WithReload = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V0',
-    tableTitle: 'Tabla con Recarga V0',
-    onReloadRows: () => {
-      alert('Recargando datos...');
-    },
-    GeneralActions: /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex',
-        gap: '8px'
-      }
-    }, /*#__PURE__*/React.createElement(UTButton, {
-      variant: "outlined",
-      size: "small"
-    }, "Exportar"), /*#__PURE__*/React.createElement(UTButton, {
-      variant: "filled",
-      size: "small",
-      colorTheme: "primary"
-    }, "Nuevo"))
-  },
-  name: 'Header V0 - Con Recarga y Acciones'
-};
-
-// TableHeader V1 Stories
-export const TableHeaderV1Basic = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    tableTitle: 'Tabla con Header V1',
-    description: 'Header avanzado con múltiples características'
-  },
-  name: 'Header V1 - Básico'
-};
-export const TableHeaderV1WithRefresh = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    tableTitle: 'Tabla con Refresh V1',
-    description: 'Header V1 con funcionalidad de actualización',
-    withRefresh: true,
-    refreshLabel: 'Última actualización: hace 2 minutos',
-    ongoingRefreshLabel: 'Actualizando...',
-    onRefresh: () => {
-      alert('Actualizando datos V1...');
-    }
-  },
-  name: 'Header V1 - Con Refresh'
-};
-export const TableHeaderV1WithAutomaticRefresh = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    tableTitle: 'Tabla con Auto-Refresh V1',
-    description: 'Header V1 con actualización automática cada 30 segundos',
-    withRefresh: true,
-    withAutomaticRefresh: true,
-    automaticRefreshDelay: 30000,
-    refreshLabel: 'Actualización automática activa',
-    ongoingRefreshLabel: 'Actualizando automáticamente...',
-    onRefresh: () => {
-      console.log('Auto-refresh ejecutado');
-    }
-  },
-  name: 'Header V1 - Con Auto-Refresh'
-};
-export const TableHeaderV1WithActions = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    tableTitle: 'Tabla con Acciones V1',
-    description: 'Header V1 con botones de acción personalizados',
-    withRefresh: true,
-    refreshLabel: 'Última actualización: ahora',
-    actionsConfig: [{
-      Icon: 'IconDownload',
-      onClick: () => alert('Exportar datos'),
-      variant: 'outlined',
-      size: 'small',
-      children: 'Exportar'
-    }, {
-      Icon: 'IconFilter',
-      onClick: () => alert('Filtrar datos'),
-      variant: 'outlined',
-      size: 'small',
-      children: 'Filtros'
-    }, {
-      Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-        name: "IconPlus"
-      }),
-      onClick: () => alert('Crear nuevo'),
-      variant: 'filled',
-      colorTheme: 'primary',
-      size: 'small',
-      children: 'Nuevo'
-    }],
-    onRefresh: () => {
-      alert('Actualizando datos...');
-    }
-  },
-  name: 'Header V1 - Con Acciones'
-};
-export const TableHeaderV1WithPrimaryActions = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    tableTitle: 'Tabla con Acciones Primarias V1',
-    description: 'Header V1 con isPrimary: las acciones primarias siempre son visibles (solo ícono en mobile), las secundarias colapsan en el dots menu.',
-    actionsConfig: [{
-      isPrimary: true,
-      LeftIcon: 'IconPlus',
-      onClick: () => alert('Nuevo trámite'),
-      variant: 'filled',
-      colorTheme: 'primary',
-      size: 'small',
-      children: 'Nuevo trámite'
-    }, {
-      LeftIcon: 'IconDownload',
-      RightIcon: 'IconChevronDown',
-      onClick: () => alert('Descargas'),
-      variant: 'outlined',
-      size: 'small',
-      children: 'Descargas'
-    }, {
-      Icon: 'IconFilter',
-      onClick: () => alert('Filtrar'),
-      variant: 'outlined',
-      size: 'small',
-      children: 'Filtros'
-    }]
-  },
-  name: 'Header V1 - Con Acciones Primarias'
-};
-export const TableHeaderV1WithSelection = {
-  args: {
-    data: mockData.slice(0, 10),
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    selectable: true,
-    tableTitle: 'Tabla con Selección V1',
-    description: 'Header V1 mostrando elementos seleccionados',
-    selectedLabel: '3 elementos seleccionados',
-    withRefresh: true,
-    refreshLabel: 'Actualizado hace 1 minuto',
-    actionsConfig: [{
-      Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-        name: "IconTrash"
-      }),
-      onClick: () => alert('Eliminar seleccionados'),
-      variant: 'outlined',
-      colorTheme: 'error',
-      size: 'small',
-      children: 'Eliminar'
-    }, {
-      Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-        name: "IconEdit"
-      }),
-      onClick: () => alert('Editar seleccionados'),
-      variant: 'outlined',
-      size: 'small',
-      children: 'Editar'
-    }],
-    onSelectRow: (rowId, selectedRows) => {
-      console.log('Selección actualizada:', selectedRows);
-    }
-  },
-  name: 'Header V1 - Con Selección'
-};
-export const TableHeaderV1Loading = {
-  args: {
-    data: [],
-    columns: basicColumns,
-    headerVersion: 'V1',
-    withActionHeader: true,
-    loading: true,
-    tableTitle: 'Tabla Cargando V1',
-    description: 'Header V1 en estado de carga',
-    withRefresh: true,
-    refreshLabel: 'Última actualización: hace 5 minutos',
-    ongoingRefreshLabel: 'Cargando datos...',
-    actionsConfig: [{
-      Icon: () => /*#__PURE__*/React.createElement(UTIcon, {
-        name: "IconPlus"
-      }),
-      onClick: () => alert('Crear nuevo'),
-      variant: 'filled',
-      colorTheme: 'primary',
-      size: 'small',
-      children: 'Nuevo',
-      disabled: true
-    }]
-  },
-  name: 'Header V1 - Estado de Carga'
-};
-export const CustomNoResults = {
-  args: {
-    data: [],
-    columns: basicColumns,
-    tableTitle: 'Tabla con Componente de No Resultados',
-    description: 'Tabla con un componente personalizado cuando no hay resultados',
-    noResultsComponent: /*#__PURE__*/React.createElement("div", {
-      style: {
-        backgroundColor: '#f9f9f9',
-        borderRadius: '8px',
-        textAlign: 'center'
-      }
-    }, /*#__PURE__*/React.createElement(UTIcon, {
-      name: "IconSearchOff",
-      size: "24",
-      colorTheme: "neutral"
-    }), /*#__PURE__*/React.createElement(UTLabel, {
-      weight: "bold",
-      style: {
-        marginTop: '20px',
-        fontSize: '1.5rem',
-        color: '#333'
-      }
-    }, "No se encontraron resultados"), /*#__PURE__*/React.createElement(UTLabel, {
-      style: {
-        marginTop: '10px',
-        color: '#666',
-        maxWidth: '300px'
-      }
-    }, "Parece que no hay datos que coincidan con tu b\xFAsqueda o filtros actuales."))
-  },
-  name: 'noResults componente custom'
-};
-export const Playground = {
-  args: {
-    data: mockData.slice(0, 15),
-    columns: advancedColumns,
-    loading: false,
-    selectable: false,
-    disablePagination: false,
-    tableTitle: 'Tabla Playground',
-    description: 'Experimenta con todas las opciones de la tabla',
-    rowPadding: ROW_PADDING_NAMES.SMALL,
-    rowSpacing: ROW_SPACING_NAMES.NONE,
-    headerPadding: ROW_PADDING_NAMES.MEDIUM,
-    integrationType: INTEGRATION_TYPES.INTERNAL,
-    stickyHeader: false,
-    fitColumnsWidth: false,
-    exclusiveSelection: false,
-    disableAutoOrder: false,
-    withRefresh: false,
-    withAutomaticRefresh: false,
-    headerVersion: 'V0',
-    hidePageSelector: true,
-    noResultsComponent: undefined
-  },
-  name: 'Playground'
-};