@widergy/energy-ui 3.173.3 → 3.174.0

package/dist/components/UTLoading/versions/V1/stories/UTLoadingV1.stories.js

@@ -1,369 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TestSite = exports.SpinnerSinTexto = exports.SpinnerPlayground = exports.SpinnerConGradiente = exports.LogoLoaderSinTexto = exports.LogoLoaderFullScreen = exports.LogoLoaderEnContenedor = exports.LogoLoaderConLogo = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _index = _interopRequireDefault(require("../../../index"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  args: {
-    loading: true,
-    version: 'V1'
-  },
-  argTypes: {
-    colors: {
-      control: 'object',
-      description: 'Array de colores para el Spinner. 2 colores → gradiente lineal. 1 color → sólido. Sin prop → usa el color del tema.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string[]'
-        }
-      }
-    },
-    dataTestId: {
-      control: 'text',
-      description: 'Identificador para pruebas automatizadas.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    fullScreen: {
-      control: 'boolean',
-      description: 'Cuando es true el loader ocupa toda la pantalla (position fixed). Cuando es false se adapta al contenedor padre.',
-      table: {
-        defaultValue: {
-          summary: 'true'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    loading: {
-      control: 'boolean',
-      description: 'Controla si se muestra el loader o los children.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    Logo: {
-      control: 'text',
-      description: 'URL del asset SVG del logo/isologo del cliente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    text: {
-      control: 'text',
-      description: 'Texto de carga opcional.',
-      table: {
-        defaultValue: {
-          summary: 'Cargando...'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    useUtilityLoading: {
-      control: 'boolean',
-      description: 'Cuando es true muestra el LogoLoader. Cuando es false muestra el Spinner nuevo.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'boolean'
-        }
-      }
-    },
-    version: {
-      control: 'select',
-      description: 'Versión del componente a utilizar.',
-      options: ['V0', 'V1'],
-      table: {
-        defaultValue: {
-          summary: 'V0'
-        },
-        type: {
-          summary: "'V0' | 'V1'"
-        }
-      }
-    }
-  },
-  component: _index.default,
-  parameters: {
-    controls: {
-      exclude: ['classes', 'className', 'color', 'size', 'textClassName', 'thickness', 'wrapperClassName']
-    },
-    docs: {
-      description: {
-        component: 'UTLoading V1 — Nueva versión del componente de carga. Incluye un Spinner custom con línea gruesa y un LogoLoader con track de gradiente animado y logo del cliente.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTLoading/V1'
-};
-const SpinnerPlayground = exports.SpinnerPlayground = {
-  args: {
-    loading: true,
-    text: 'Cargando...',
-    useUtilityLoading: false,
-    version: 'V1'
-  },
-  name: 'Spinner — Playground',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Spinner circular custom con línea gruesa y label de texto opcional.'
-      }
-    }
-  }
-};
-const SpinnerConGradiente = exports.SpinnerConGradiente = {
-  args: {
-    colors: ['var(--UT-loading-color-start)', 'var(--UT-loading-color-end)'],
-    loading: true,
-    text: 'Cargando...',
-    useUtilityLoading: false,
-    version: 'V1'
-  },
-  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, "\n          :root {\n            --identitySolidTone3: #4D97FA;\n            --identitySolidTone2: #7BB8FF;\n            --UT-loading-color-start: var(--identitySolidTone3);\n            --UT-loading-color-end: var(--identitySolidTone2);\n          }\n        "), /*#__PURE__*/_react.default.createElement(Story, null))],
-  name: 'Spinner — Con gradiente',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Spinner con gradiente lineal. Se pasan 2 colores vía prop `colors`. En producción se inyectan desde los design tokens `--UT-loading-color-start` y `--UT-loading-color-end`.'
-      }
-    }
-  }
-};
-const SpinnerSinTexto = exports.SpinnerSinTexto = {
-  args: {
-    loading: true,
-    text: '',
-    useUtilityLoading: false,
-    version: 'V1'
-  },
-  name: 'Spinner — Sin texto',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Spinner sin label de texto.'
-      }
-    }
-  }
-};
-const LogoLoaderFullScreen = exports.LogoLoaderFullScreen = {
-  args: {
-    fullScreen: true,
-    loading: true,
-    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
-    text: '',
-    useUtilityLoading: true,
-    version: 'V1'
-  },
-  name: 'LogoLoader — Full Screen',
-  parameters: {
-    docs: {
-      description: {
-        story: 'LogoLoader en modo full screen (position fixed, z-index 999). Muestra el track con gradiente de identidad del cliente rotando.'
-      }
-    }
-  }
-};
-const LogoLoaderEnContenedor = exports.LogoLoaderEnContenedor = {
-  args: {
-    fullScreen: false,
-    loading: true,
-    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
-    text: 'Cargando...',
-    useUtilityLoading: true,
-    version: 'V1'
-  },
-  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      border: '1px dashed #C1C7D0',
-      height: '300px',
-      position: 'relative',
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Story, null))],
-  name: 'LogoLoader — En contenedor',
-  parameters: {
-    docs: {
-      description: {
-        story: 'LogoLoader adaptado al contenedor padre (fullScreen=false). Se centra dentro del div contenedor.'
-      }
-    }
-  }
-};
-const LogoLoaderConLogo = exports.LogoLoaderConLogo = {
-  args: {
-    fullScreen: false,
-    loading: true,
-    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
-    text: 'Cargando...',
-    useUtilityLoading: true,
-    version: 'V1'
-  },
-  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      border: '1px dashed #C1C7D0',
-      height: '300px',
-      position: 'relative',
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Story, null))],
-  name: 'LogoLoader — Con logo',
-  parameters: {
-    docs: {
-      description: {
-        story: 'LogoLoader con logo SVG del cliente centrado dentro del track.'
-      }
-    }
-  }
-};
-const LogoLoaderSinTexto = exports.LogoLoaderSinTexto = {
-  args: {
-    fullScreen: false,
-    loading: true,
-    Logo: 'https://utilitygo-demo-qa-ev.widergydev.com/favicon.png',
-    text: '',
-    useUtilityLoading: true,
-    version: 'V1'
-  },
-  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      border: '1px dashed #C1C7D0',
-      height: '300px',
-      position: 'relative',
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Story, null))],
-  name: 'LogoLoader — Sin texto',
-  parameters: {
-    docs: {
-      description: {
-        story: 'LogoLoader sin label de texto debajo del track.'
-      }
-    }
-  }
-};
-const TestSite = exports.TestSite = {
-  render: () => /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '32px'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontFamily: 'sans-serif',
-      fontSize: '12px',
-      marginBottom: '8px'
-    }
-  }, "Spinner \u2014 loading true"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '120px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
-    loading: true,
-    useUtilityLoading: false,
-    version: "V1"
-  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontFamily: 'sans-serif',
-      fontSize: '12px',
-      marginBottom: '8px'
-    }
-  }, "Spinner \u2014 sin texto"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '120px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
-    loading: true,
-    text: "",
-    useUtilityLoading: false,
-    version: "V1"
-  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontFamily: 'sans-serif',
-      fontSize: '12px',
-      marginBottom: '8px'
-    }
-  }, "Spinner \u2014 loading false (muestra children)"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '120px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
-    loading: false,
-    useUtilityLoading: false,
-    version: "V1"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Contenido cargado")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontFamily: 'sans-serif',
-      fontSize: '12px',
-      marginBottom: '8px'
-    }
-  }, "LogoLoader \u2014 en contenedor (fullScreen=false)"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      border: '1px dashed #C1C7D0',
-      height: '200px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
-    fullScreen: false,
-    loading: true,
-    Logo: "https://utilitygo-demo-qa-ev.widergydev.com/favicon.png",
-    useUtilityLoading: true,
-    version: "V1"
-  }))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
-    style: {
-      fontFamily: 'sans-serif',
-      fontSize: '12px',
-      marginBottom: '8px'
-    }
-  }, "LogoLoader \u2014 loading false (muestra children)"), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      height: '80px',
-      position: 'relative'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
-    fullScreen: false,
-    loading: false,
-    useUtilityLoading: true,
-    version: "V1"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Contenido cargado"))))),
-  name: 'Test Site',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Casos de prueba para el Storybook Test Runner.'
-      }
-    }
-  }
-};

package/dist/components/UTOnboarding/README.md

@@ -1,49 +0,0 @@
-# UTOnboarding
-
-### Description
-
-Onboarding component.
-
-### Variants
-
-- Default: variant = 'dark'
-- Information: variant = 'information'
-- Light: variant = 'light'
-
-### Props
-
-- handleOnClose: function --> optional, se ejecutara cuando se cierra el onboarding
-- handleComplete: function --> optional, se ejecutara cuando se completa el onboarding
-- options: object | Espera recibir un objeto propio de la libreria de intro react js. Ejemplo de valores posibles
-  - nextLabel: string --> Next button label
-  - prevLabel: string --> Previous button label
-  - options: objeto --> Ejemplo de lo que se puede pasar:
-    {{ positionPrecedence: ['right'] }} (posicion del onboarding)
-- steps: array of object --> requerido
-
-  - Cada objeto espera recibir:
-
-    ` {
-    title: '¡Bienvenido a tu oficina virtual!',
-    element: '.step_1',
-    image: '',
-    description:
-      'Inicia el tutorial de introducción y descubrí todas las gestiones que podés realizar en tus cuentas.'
-}`
-
-  - title: Titulo del onboarding
-  - element: string | CSS selector to use for the step
-  - position: string | Position of the tooltip
-  - intro : string | The tooltip content
-  - description: string | si quiero agregar una imagen voy a tener que pasarle una description en lugar del intro
-  - image: imagen de tipo png
-  - vectorImage: imagen de tipo svg
-  - hideFooter: bool | oculta los botones y los steps
-  - highlightClass: CSS class of the helperLayer.
-  - tooltipClass: CSS class of the tooltip
-  - isSuggestion: bool | si es el primer paso y no quiero que tenga tooltip puedo dejarlo en true
-  -  closeButtonDataTestId: string | data-testid para el botón de cerrar
-  -  descriptionDataTestId: string | data-testid para la descripción
-  -  nextButtonDataTestId: string | data-testid para el botón de siguiente
-  -  prevButtonDataTestId: string | data-testid para el botón de atrás
-  -  titleDataTestId: string | data-testid para el título

package/dist/components/UTPagination/README.md

@@ -1,242 +0,0 @@
-# UTPagination
-
-A comprehensive pagination component that provides both page navigation and page size selection functionality. The component consists of two main parts: a page size selector and pagination controls.
-
-## Features
-
-- **Page Size Selection**: Dropdown to select number of items per page
-- **Page Navigation**: Previous/next buttons with page numbers
-- **Responsive Design**: Adapts to different screen sizes
-- **Customizable Themes**: Support for different color themes
-- **Accessibility**: Proper ARIA labels and keyboard navigation
-- **Double Arrow Navigation**: Quick navigation to first/last page for large datasets
-- **Size Variants**: Support for different button sizes
-
-## Props
-
-| Prop                 | Type                             | Default   | Description                         |
-| -------------------- | -------------------------------- | --------- | ----------------------------------- |
-| `page`               | `number`                         | -         | Current page number (0-based)       |
-| `rowsPerPage`        | `number`                         | -         | Number of rows per page             |
-| `totalRows`          | `number`                         | -         | Total number of rows                |
-| `rowsPerPageOptions` | `number[]`                       | -         | Available options for rows per page |
-| `totalRowsLabel`     | `string`                         | -         | Label for total rows display        |
-| `onChangePage`       | `function`                       | -         | Callback when page changes          |
-| `onChangeRowPerPage` | `function`                       | -         | Callback when rows per page changes |
-| `isResponsive`       | `boolean`                        | -         | Enable responsive behavior          |
-| `colorThemes`        | `object`                         | `{}`      | Color themes for different elements |
-| `classes`            | `object`                         | -         | Custom CSS classes                  |
-| `size`               | `'small' \| 'medium' \| 'large'` | `'large'` | Size variant for navigation buttons |
-
-### Color Themes
-
-| Theme              | Type     | Description                         |
-| ------------------ | -------- | ----------------------------------- |
-| `pageButton`       | `string` | Color theme for page number buttons |
-| `navigationButton` | `string` | Color theme for navigation buttons  |
-| `totalRows`        | `string` | Color theme for total rows label    |
-
-### Classes
-
-| Class                     | Description                   |
-| ------------------------- | ----------------------------- |
-| `paginationContainer`     | Main container wrapper        |
-| `pagination`              | Pagination controls container |
-| `pageSizeSelectContainer` | Page size selector container  |
-| `pageSizeSelect`          | Page size select dropdown     |
-| `totalRowsLabel`          | Total rows label              |
-
-## Usage
-
-### Basic Usage
-
-```jsx
-import React, { useState } from 'react';
-import { UTPagination } from '@energy/ui';
-
-function MyComponent() {
-  const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(10);
-  const totalRows = 150;
-  const rowsPerPageOptions = [10, 25, 50, 100];
-
-  const handlePageChange = newPage => {
-    setPage(newPage);
-  };
-
-  const handleRowsPerPageChange = newRowsPerPage => {
-    setRowsPerPage(newRowsPerPage);
-    setPage(0); // Reset to first page when changing page size
-  };
-
-  return (
-    <UTPagination
-      page={page}
-      rowsPerPage={rowsPerPage}
-      totalRows={totalRows}
-      rowsPerPageOptions={rowsPerPageOptions}
-      totalRowsLabel="items"
-      onChangePage={handlePageChange}
-      onChangeRowPerPage={handleRowsPerPageChange}
-    />
-  );
-}
-```
-
-### With Custom Themes
-
-```jsx
-<UTPagination
-  page={page}
-  rowsPerPage={rowsPerPage}
-  totalRows={totalRows}
-  rowsPerPageOptions={[10, 25, 50]}
-  totalRowsLabel="records"
-  onChangePage={handlePageChange}
-  onChangeRowPerPage={handleRowsPerPageChange}
-  colorThemes={{
-    pageButton: 'primary',
-    navigationButton: 'secondary',
-    totalRows: 'gray'
-  }}
-/>
-```
-
-### With Custom Size
-
-The `size` prop controls the size of navigation buttons (previous/next arrows and double arrows). Available values:
-
-- `'small'`: Compact button size
-- `'medium'`: Standard button size
-- `'large'`: Large button size (default)
-
-```jsx
-<UTPagination
-  page={page}
-  rowsPerPage={rowsPerPage}
-  totalRows={totalRows}
-  rowsPerPageOptions={[10, 25, 50]}
-  totalRowsLabel="items"
-  onChangePage={handlePageChange}
-  onChangeRowPerPage={handleRowsPerPageChange}
-  size="medium"
-/>
-```
-
-### Responsive Pagination
-
-```jsx
-<UTPagination
-  page={page}
-  rowsPerPage={rowsPerPage}
-  totalRows={totalRows}
-  rowsPerPageOptions={[10, 25, 50]}
-  totalRowsLabel="items"
-  onChangePage={handlePageChange}
-  onChangeRowPerPage={handleRowsPerPageChange}
-  isResponsive={true}
-/>
-```
-
-### With Custom Classes
-
-```jsx
-<UTPagination
-  page={page}
-  rowsPerPage={rowsPerPage}
-  totalRows={totalRows}
-  rowsPerPageOptions={[10, 25, 50]}
-  totalRowsLabel="items"
-  onChangePage={handlePageChange}
-  onChangeRowPerPage={handleRowsPerPageChange}
-  classes={{
-    paginationContainer: 'custom-pagination-wrapper',
-    pagination: 'custom-pagination-controls',
-    pageSizeSelectContainer: 'custom-select-container',
-    pageSizeSelect: 'custom-select',
-    totalRowsLabel: 'custom-total-label'
-  }}
-/>
-```
-
-## Component Structure
-
-The UTPagination component is composed of two main sub-components:
-
-### PageSizeSelector
-
-- Displays a dropdown to select the number of items per page
-- Shows total count with customizable label
-- Supports custom styling and themes
-- Uses UTSelect component with outlined variant
-
-### Pagination
-
-- Navigation buttons (previous/next)
-- Page number buttons with active state styling
-- Double arrow navigation for large datasets (first/last page)
-- Responsive behavior that hides double arrows on smaller screens
-- Support for different button sizes
-
-## Constants
-
-| Constant                         | Value  | Description                                   |
-| -------------------------------- | ------ | --------------------------------------------- |
-| `PREPOSITION`                    | `'de'` | Preposition used in total rows label          |
-| `PAGINATION_LIMIT_DOUBLE_ARROWS` | `10`   | Minimum pages to show double arrow navigation |
-| `MAX_PAGINATION_ITEMS`           | `5`    | Maximum page numbers to display               |
-
-## Theme Integration
-
-The component integrates with the Energy UI theme system and supports the following theme properties:
-
-```javascript
-{
-  UTPagination: {
-    paginationContainer: {
-      marginTop: 32
-    },
-    pageSizeSelect: {
-      background: 'transparent',
-      fontSize: '14px',
-      padding: 6,
-      textAlign: 'center',
-      border: '1px solid #ccc',
-      hover: {
-        border: '1px solid #999'
-      }
-    },
-    pagination: {
-      gridGap: '16px'
-    }
-  },
-  Fonts: {
-    fontFamily: 'your-font-family'
-  }
-}
-```
-
-## Accessibility
-
-- Proper ARIA labels for navigation buttons
-- Keyboard navigation support
-- Screen reader friendly page announcements
-- Focus management for interactive elements
-- Semantic HTML structure
-
-## Browser Support
-
-- Chrome (latest)
-- Firefox (latest)
-- Safari (latest)
-- Edge (latest)
-
-## Dependencies
-
-- React 16.8+
-- PropTypes
-- Energy UI theme system
-- UTButton component
-- UTSelect component
-- UTLabel component
-- @tabler/icons-react (for navigation icons)

package/dist/components/UTPanel/UTPanel.mdx

@@ -1,11 +0,0 @@
-import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/addon-docs';
-
-import * as UTPanelStories from './UTPanel.stories';
-
-<Meta of={UTPanelStories} />
-
-<Title>UTPanel</Title>
-
-<Description of={UTPanelStories} />
-
-<ArgTypes />