@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +1,1083 @@
+/* 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'
+};