@widergy/energy-ui 3.167.1 → 3.168.0

package/dist/components/UTLoading/versions/V1/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _LogoLoader = _interopRequireDefault(require("./components/LogoLoader"));
+var _Spinner = _interopRequireDefault(require("./components/Spinner"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const V1 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/_react.default.createElement(_LogoLoader.default, props) : /*#__PURE__*/_react.default.createElement(_Spinner.default, props);
+};
+V1.propTypes = {
+  children: _propTypes.node,
+  colors: (0, _propTypes.arrayOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  fullScreen: _propTypes.bool,
+  loading: _propTypes.bool,
+  Logo: _propTypes.string,
+  preventUnmount: _propTypes.bool,
+  text: _propTypes.string,
+  useUtilityLoading: _propTypes.bool,
+  wrapperClassName: _propTypes.string
+};
+var _default = exports.default = V1;

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

@@ -0,0 +1,67 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+import * as UTLoadingV1Stories from './UTLoadingV1.stories';
+
+<Meta of={UTLoadingV1Stories} />
+
+# UTLoading — V1
+
+Nueva versión del componente de carga. Incluye un Spinner custom con línea más gruesa y un LogoLoader con track de gradiente animado usando los colores de identidad del cliente.
+
+## Cómo activar V1
+
+Pasar la prop `version="V1"` al componente. Sin esta prop el comportamiento es idéntico al actual (V0).
+
+```jsx
+<UTLoading version="V1" loading useUtilityLoading={false} />
+```
+
+## Spinner
+
+Spinner circular CSS puro. Muestra una línea circular con track de fondo y arco superior en el color de acento del tema. Soporta un label de texto opcional debajo.
+
+<Canvas of={UTLoadingV1Stories.SpinnerPlayground} />
+<Controls of={UTLoadingV1Stories.SpinnerPlayground} />
+
+## LogoLoader
+
+Loader con track circular de gradiente de 2 colores (colores de identidad del cliente). El logo/isologo del cliente se muestra centrado con una animación de escala sincronizada con la rotación del track.
+
+### Full Screen
+
+Cuando `fullScreen=true` el contenedor ocupa toda la pantalla con `position: fixed` y `z-index: 999`.
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderFullScreen} />
+
+### En contenedor
+
+Cuando `fullScreen=false` el loader se adapta al contenedor padre y se centra dentro de él.
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderEnContenedor} />
+
+### Con logo del cliente
+
+<Canvas of={UTLoadingV1Stories.LogoLoaderConLogo} />
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — versión a renderizar |
+| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
+| `useUtilityLoading` | `bool` | — | `true` → LogoLoader; `false` → Spinner |
+| `fullScreen` | `bool` | `true` | Full screen (`position: fixed`) o adaptado al contenedor |
+| `Logo` | `string` | — | URL del SVG del logo/isologo del cliente |
+| `text` | `string` | `'Cargando...'` | Texto de carga. Pasar `''` para ocultarlo |
+| `dataTestId` | `string` | — | `data-testid` del elemento raíz |
+| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (solo Spinner) |
+| `wrapperClassName` | `string` | — | Clase del wrapper de children (solo Spinner) |
+
+## Design tokens
+
+| Token | Propiedad | Fallback |
+|-------|-----------|---------|
+| `--UT-loading-track-color-start` | Color inicial del gradiente del track | Color de identidad 1 del cliente |
+| `--UT-loading-track-color-end` | Color final del gradiente del track | Color de identidad 2 del cliente |
+| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
+
+> Los tokens de color del gradiente se inyectan automáticamente desde los colores de identidad del cliente (`identitySolidTone1` y `identitySolidTone2`).

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

@@ -0,0 +1,369 @@
+"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/constants/testIds.js

@@ -169,6 +169,10 @@ const TEST_IDS = exports.TEST_IDS = {
   wrapperObservation: {
     actionIcon: 'wrapperObservation.actionIcon.'
   },
+  UTLoading: {
+    logoLoader: 'UTLoading.logoLoader',
+    spinner: 'UTLoading.spinner'
+  },
   UTSnackbar: {
     closeButton: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".closeButton"),
     description: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".description"),

package/dist/esm/components/UTLoading/README.md

@@ -0,0 +1,85 @@
+# UTLoading
+
+Componente de carga con soporte de versiones. Muestra un indicador visual de carga mientras se obtienen datos. Soporta dos variantes internas: un Spinner circular y un LogoLoader con el logo/isologo del cliente.
+
+## Versiones
+
+### V0 (default)
+
+Comportamiento original. Se activa cuando no se pasa la prop `version` o cuando se pasa `version="V0"`.
+
+- `useUtilityLoading=false` → Spinner basado en Material UI `CircularProgress`
+- `useUtilityLoading=true` → AnimatedCircles: logo + 3 puntos animados, siempre full screen
+
+### V1
+
+Nueva versión con diseño actualizado. Se activa pasando `version="V1"`.
+
+- `useUtilityLoading=false` → Nuevo Spinner CSS puro con línea más gruesa
+- `useUtilityLoading=true` → LogoLoader: track de gradiente animado con logo del cliente, prop `fullScreen` para controlar comportamiento
+
+## Uso básico
+
+```jsx
+import { UTLoading } from '@widergy/energy-ui';
+
+// V0 (default — sin cambios)
+<UTLoading loading>
+  <MiContenido />
+</UTLoading>
+
+// V1 — Spinner
+<UTLoading version="V1" loading useUtilityLoading={false}>
+  <MiContenido />
+</UTLoading>
+
+// V1 — LogoLoader full screen
+<UTLoading
+  version="V1"
+  loading
+  useUtilityLoading
+  Logo="https://mi-dominio.com/logo.svg"
+  fullScreen
+/>
+
+// V1 — LogoLoader en contenedor
+<UTLoading
+  version="V1"
+  loading
+  useUtilityLoading
+  fullScreen={false}
+>
+  <MiContenido />
+</UTLoading>
+```
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `version` | `string` | `'V0'` | `'V0'` o `'V1'` — selecciona la versión a renderizar |
+| `loading` | `bool` | — | Muestra el loader cuando `true`, los `children` cuando `false` |
+| `children` | `node` | — | Contenido a mostrar cuando `loading=false` |
+| `useUtilityLoading` | `bool` | — | `true` → LogoLoader / AnimatedCircles; `false` → Spinner |
+| `fullScreen` | `bool` | `true` | Solo V1 LogoLoader. `true`: `position: fixed` full screen. `false`: adaptado al contenedor |
+| `Logo` | `string` | — | URL del asset SVG del logo/isologo del cliente |
+| `text` | `string` | `'Cargando el contenido...'` | Texto de carga. Pasar `''` para ocultarlo (solo V1) |
+| `dataTestId` | `string` | — | `data-testid` del elemento raíz (solo V1) |
+| `color` | `string` | — | Color CSS explícito del spinner (solo V0 Spinner) |
+| `size` | `number` | — | Tamaño del spinner en px (solo V0) |
+| `thickness` | `number` | — | Grosor del spinner (solo V0) |
+| `preventUnmount` | `bool` | `false` | Mantiene los children en el DOM cuando `loading=true` (Spinner) |
+| `className` | `string` | — | Clase adicional para el spinner (solo V0) |
+| `textClassName` | `string` | — | Clase del texto (solo V0) |
+| `wrapperClassName` | `string` | — | Clase del wrapper de children (Spinner) |
+| `classNames` | `object` | — | Objeto de clases para AnimatedCircles (solo V0) |
+
+## Design tokens — V1
+
+| Token | Descripción | Fallback |
+|-------|-------------|---------|
+| `--UT-loading-track-color-start` | Color inicial del gradiente del track | `identitySolidTone1` del cliente |
+| `--UT-loading-track-color-end` | Color final del gradiente del track | `identitySolidTone2` del cliente |
+| `--UT-loading-gap` | Gap entre track/spinner y label | `8px` |
+
+> Los tokens de color del gradiente se derivan automáticamente de los colores de identidad de cada cliente. El ajuste de valores exactos queda pendiente de confirmación de Diseño en Figma (CX-2398).

package/dist/esm/components/UTLoading/components/Spinner/index.js

@@ -13,7 +13,7 @@ const Spinner = _ref => {
     thickness,
     wrapperClassName
   } = _ref;
-  return /*#__PURE__*/React.createElement(Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, {
     className: className,
     size: size,
     text: text,

package/dist/esm/components/UTLoading/index.js

@@ -1,17 +1,26 @@
 import React from 'react';
-import { bool, node, number, string } from 'prop-types';
-import AnimatedCircles from './components/AnimatedCircles';
-import Spinner from './components/Spinner';
-const UTLoading = props => {
-  const {
-    useUtilityLoading
-  } = props || {};
-  return useUtilityLoading ? /*#__PURE__*/React.createElement(AnimatedCircles, props) : /*#__PURE__*/React.createElement(Spinner, props);
+import { arrayOf, bool, node, number, string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const COMPONENTS = {
+  V0,
+  V1
+};
+const UTLoading = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = COMPONENTS[version] || V0;
+  return /*#__PURE__*/React.createElement(Component, props);
 };
 UTLoading.propTypes = {
   children: node,
   className: string,
   color: string,
+  colors: arrayOf(string),
+  dataTestId: string,
+  fullScreen: bool,
   loading: bool,
   Logo: string,
   preventUnmount: bool,
@@ -20,6 +29,7 @@ UTLoading.propTypes = {
   textClassName: string,
   thickness: number,
   useUtilityLoading: bool,
+  version: string,
   wrapperClassName: string
 };
 export default UTLoading;

package/dist/esm/components/UTLoading/versions/V0/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { bool, node, number, string } from 'prop-types';
+import AnimatedCircles from '../../components/AnimatedCircles';
+import Spinner from '../../components/Spinner';
+const V0 = props => {
+  const {
+    useUtilityLoading
+  } = props;
+  return useUtilityLoading ? /*#__PURE__*/React.createElement(AnimatedCircles, props) : /*#__PURE__*/React.createElement(Spinner, props);
+};
+V0.propTypes = {
+  children: node,
+  className: string,
+  color: string,
+  loading: bool,
+  Logo: string,
+  preventUnmount: bool,
+  size: number,
+  text: string,
+  textClassName: string,
+  thickness: number,
+  useUtilityLoading: bool,
+  wrapperClassName: string
+};
+export default V0;