@widergy/energy-ui 3.167.1 → 3.169.0

package/dist/esm/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/esm/components/UTLoading/versions/V1/stories/UTLoadingV1.stories.js

@@ -0,0 +1,362 @@
+import React from 'react';
+import UTLoading from '../../../index';
+export 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: UTLoading,
+  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'
+};
+export const 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.'
+      }
+    }
+  }
+};
+export const 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.createElement("div", null, /*#__PURE__*/React.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.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`.'
+      }
+    }
+  }
+};
+export const SpinnerSinTexto = {
+  args: {
+    loading: true,
+    text: '',
+    useUtilityLoading: false,
+    version: 'V1'
+  },
+  name: 'Spinner — Sin texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Spinner sin label de texto.'
+      }
+    }
+  }
+};
+export const 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.'
+      }
+    }
+  }
+};
+export const 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.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  name: 'LogoLoader — En contenedor',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader adaptado al contenedor padre (fullScreen=false). Se centra dentro del div contenedor.'
+      }
+    }
+  }
+};
+export const 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.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  name: 'LogoLoader — Con logo',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader con logo SVG del cliente centrado dentro del track.'
+      }
+    }
+  }
+};
+export const 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.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '300px',
+      position: 'relative',
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))],
+  name: 'LogoLoader — Sin texto',
+  parameters: {
+    docs: {
+      description: {
+        story: 'LogoLoader sin label de texto debajo del track.'
+      }
+    }
+  }
+};
+export const TestSite = {
+  render: () => /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '32px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 loading true"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: true,
+    useUtilityLoading: false,
+    version: "V1"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 sin texto"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: true,
+    text: "",
+    useUtilityLoading: false,
+    version: "V1"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "Spinner \u2014 loading false (muestra children)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '120px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    loading: false,
+    useUtilityLoading: false,
+    version: "V1"
+  }, /*#__PURE__*/React.createElement("span", null, "Contenido cargado")))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "LogoLoader \u2014 en contenedor (fullScreen=false)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      border: '1px dashed #C1C7D0',
+      height: '200px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    fullScreen: false,
+    loading: true,
+    Logo: "https://utilitygo-demo-qa-ev.widergydev.com/favicon.png",
+    useUtilityLoading: true,
+    version: "V1"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontFamily: 'sans-serif',
+      fontSize: '12px',
+      marginBottom: '8px'
+    }
+  }, "LogoLoader \u2014 loading false (muestra children)"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: '80px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React.createElement(UTLoading, {
+    fullScreen: false,
+    loading: false,
+    useUtilityLoading: true,
+    version: "V1"
+  }, /*#__PURE__*/React.createElement("span", null, "Contenido cargado"))))),
+  name: 'Test Site',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Casos de prueba para el Storybook Test Runner.'
+      }
+    }
+  }
+};

package/dist/esm/components/UTSelect/versions/V1/README.md

@@ -14,6 +14,7 @@
 | autocompleteProps     | object                     | {}                                     | Additional props to pass to the underlying Material-UI Autocomplete component.                                                               |
 | className             | string                     |                                        | Additional CSS class name for the component container.                                                                                       |
 | clearable             | bool                       | true                                   | Determines whether a button to clear the current selection should be shown.                                                                  |
+| CustomRow             | elementType                |                                        | Custom React component to render each option row. Receives `{ item, isChecked }` as props, where `item` is the option object and `isChecked` indicates if the option is selected. |
 | dataTestId            | string                     |                                        | Test ID for the main input component.                                                                                                        |
 | disabled              | bool                       | false                                  | Disables the select input.                                                                                                                   |
 | disableFilterOptions  | bool                       | false                                  | Disables option filtering, showing all options even when typing in the search field.                                                         |
@@ -231,6 +232,40 @@ const ReadOnlyExample = () => {
 };
 ```
 
+### With Custom Row Renderer
+
+```jsx
+import React, { useState } from 'react';
+import UTSelect from './UTSelect';
+
+const options = [
+  { name: 'Alice', value: '1', subtitle: 'Admin' },
+  { name: 'Bob', value: '2', subtitle: 'Editor' },
+  { name: 'Carol', value: '3', subtitle: 'Viewer' }
+];
+
+const MyCustomRow = ({ item, isChecked }) => (
+  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+    <span style={{ fontWeight: isChecked ? 'bold' : 'normal' }}>{item.name}</span>
+    <span style={{ color: 'gray', fontSize: 12 }}>{item.subtitle}</span>
+  </div>
+);
+
+const CustomRowExample = () => {
+  const [value, setValue] = useState(null);
+
+  return (
+    <UTSelect
+      CustomRow={MyCustomRow}
+      onChange={setValue}
+      options={options}
+      placeholder="Select a user"
+      value={value}
+    />
+  );
+};
+```
+
 ### With Search Term Handling
 
 ```jsx

package/dist/esm/components/UTSelect/versions/V1/UTSelectV1.mdx

@@ -0,0 +1,13 @@
+import { ArgTypes, Canvas, Description, Meta, Title } from '@storybook/blocks';
+
+import * as UTSelectV1Stories from './UTSelectV1.stories.js';
+
+<Meta of={UTSelectV1Stories} />
+
+<Title>UTSelect V1</Title>
+
+<Description of={UTSelectV1Stories} />
+
+<Canvas of={UTSelectV1Stories.Playground} withToolbar />
+
+<ArgTypes exclude={['classes']} />