@widergy/energy-ui 3.172.1 → 3.172.3

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

@@ -1,227 +0,0 @@
-import React from 'react';
-import { joinArgTypes } from 'stories/utils';
-import { COLOR_SHADES, COLOR_THEMES } from '../../constants/Palette';
-import { DEFAULT_PROPS, VARIANTS, WEIGHTS } from './constants';
-import UTLabel from '.';
-export default {
-  args: {
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-  },
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'Texto a mostrar en el componente.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    colorTheme: {
-      control: 'select',
-      description: 'Determina el color de la paleta a usar.',
-      options: Object.values(COLOR_THEMES),
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.colorTheme
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    shade: {
-      control: 'select',
-      description: 'Determina el tono de la prop `colorTheme` a usar.',
-      options: Object.values(COLOR_SHADES),
-      table: {
-        defaultValue: {
-          summary: '05'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    markdownExtended: {
-      control: 'boolean',
-      description: 'Habilita todos los plugins de markdown',
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.markdownExtended
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    markdownRenderers: {
-      control: false,
-      description: 'Mapper de componentes HTML a componentes react. Para más detalles revisar la sección Markdown Renderers',
-      table: {
-        defaultValue: {
-          summary: 'Detalles',
-          detail: 'Por defecto hay un renderer para elementos <a> que presetea algunos atributos de la etiqueta.'
-        },
-        type: {
-          summary: 'Object'
-        }
-      }
-    },
-    variant: {
-      control: 'select',
-      description: 'Determina el componente HTML a renderizar.',
-      options: Object.keys(VARIANTS),
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.variant
-        },
-        type: {
-          summary: joinArgTypes(Object.keys(VARIANTS))
-        }
-      }
-    },
-    weight: {
-      control: 'select',
-      description: 'Determina el valor del atributo `font-weight`.',
-      options: Object.keys(WEIGHTS),
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.weight
-        },
-        type: {
-          summary: joinArgTypes(Object.keys(WEIGHTS))
-        }
-      }
-    },
-    withMarkdown: {
-      control: 'boolean',
-      description: 'Determina si renderizar el contenido como markdown o texto plano.',
-      table: {
-        defaultValue: {
-          summary: DEFAULT_PROPS.withMarkdown
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    className: {
-      control: false,
-      description: 'Clase que se le pasa al elemento contenedor.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    }
-  },
-  component: UTLabel,
-  parameters: {
-    controls: {
-      exclude: ['classes', 'field', 'style', 'title']
-    },
-    docs: {
-      description: {
-        component: 'Este componente se usa para renderizar texto. Consume la paleta de colores. Acepta markdown para formatear texto.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTLabel'
-};
-export const Default = {
-  args: {
-    colorTheme: DEFAULT_PROPS.colorTheme,
-    markdownExtended: DEFAULT_PROPS.markdownExtended,
-    variant: DEFAULT_PROPS.variant,
-    weight: DEFAULT_PROPS.weight,
-    withMarkdown: DEFAULT_PROPS.withMarkdown,
-    shade: '05'
-  },
-  name: 'Playground'
-};
-const BODY_TEXT = 'El sistema de diseño provee tokens de tipografía que garantizan consistencia visual en todos los productos. Cada nivel de heading tiene un line-height proporcional a su tamaño para una lectura cómoda.';
-const SMALL_TEXT = 'Los valores de consumo se actualizan cada 15 minutos y se almacenan durante 24 meses para análisis histórico.';
-const XSMALL_TEXT = 'Última actualización: 26/05/2026 · Fuente: medidor digital · ID lectura: 00487-A';
-const HEADINGS = [{
-  variant: 'title1',
-  label: 'Title 1 — H1',
-  heading: 'Gestión de energía para utilities modernas que operan en múltiples regiones del país'
-}, {
-  variant: 'title2',
-  label: 'Title 2 — H2',
-  heading: 'Seguimiento de consumo en tiempo real con integración a sistemas de medición inteligente'
-}, {
-  variant: 'title3',
-  label: 'Title 3 — H3',
-  heading: 'Configuración de alertas, notificaciones y umbrales de consumo por categoría de usuario'
-}, {
-  variant: 'subtitle1',
-  label: 'Subtitle 1 — H4',
-  heading: 'Parámetros de medición avanzada para clientes residenciales de alta demanda energética'
-}, {
-  variant: 'subtitle2',
-  label: 'Subtitle 2 — H5',
-  heading: 'Detalles del período de facturación correspondiente al bimestre actual del servicio eléctrico'
-}];
-export const HeadingBlocks = {
-  name: 'Bloques heading + texto',
-  parameters: {
-    docs: {
-      description: {
-        story: 'Cada categoría de heading junto a párrafos de body, small y xsmall para verificar jerarquía y line-height.'
-      }
-    }
-  },
-  render: () => {
-    const pageStyle = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '3rem',
-      maxWidth: '560px',
-      padding: '2rem'
-    };
-    const blockStyle = {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '0.75rem',
-      borderLeft: '3px solid #e2e8f0',
-      paddingLeft: '1rem'
-    };
-    const chipStyle = {
-      fontSize: '0.7rem',
-      color: '#94a3b8',
-      fontFamily: 'monospace',
-      marginBottom: '0.25rem'
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: pageStyle
-    }, HEADINGS.map(_ref => {
-      let {
-        variant,
-        label,
-        heading
-      } = _ref;
-      return /*#__PURE__*/React.createElement("div", {
-        key: variant,
-        style: blockStyle
-      }, /*#__PURE__*/React.createElement("span", {
-        style: chipStyle
-      }, label), /*#__PURE__*/React.createElement(UTLabel, {
-        variant: variant
-      }, heading), /*#__PURE__*/React.createElement(UTLabel, {
-        variant: "small"
-      }, BODY_TEXT), /*#__PURE__*/React.createElement(UTLabel, {
-        variant: "small"
-      }, SMALL_TEXT), /*#__PURE__*/React.createElement(UTLabel, {
-        variant: "xsmall"
-      }, XSMALL_TEXT));
-    }));
-  }
-};

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

@@ -1,85 +0,0 @@
-# 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/versions/V1/stories/UTLoadingV1.stories.js

@@ -1,362 +0,0 @@
-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.'
-      }
-    }
-  }
-};