@widergy/energy-ui 3.164.0 → 3.165.1

package/dist/components/UTBaseInputField/UTBaseInputField.stories.js

@@ -0,0 +1,393 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VarianteTransparente = exports.VarianteGris = exports.SoloLectura = exports.Playground = exports.Pequeno = exports.MultipleAdornos = exports.Multilinea = exports.Deshabilitado = exports.Default = exports.ConTooltip = exports.ConSuffix = exports.ConPrefix = exports.ConIconoIzquierdo = exports.ConIconoDerecho = exports.ConError = exports.ConContadorDeCaracteres = exports.ConAccion = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+var _constants = require("./constants");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  title: 'Energy-UI/UTBaseInputField',
+  component: _.default,
+  args: {
+    placeholder: 'Ingresá un valor...',
+    value: ''
+  },
+  argTypes: {
+    placeholder: {
+      control: 'text',
+      description: 'Texto de placeholder.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor actual del campo.',
+      table: {
+        defaultValue: {
+          summary: 'null'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback al cambiar el valor. Recibe el string del nuevo valor.',
+      table: {
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el campo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Campo de solo lectura. No aplica estilos de borde ni fondo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    error: {
+      control: 'boolean',
+      description: 'Aplica los estilos de error al campo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool | string'
+        }
+      }
+    },
+    variant: {
+      control: 'select',
+      description: 'Variante visual. `default` tiene fondo blanco con borde, `gray` tiene fondo gris sin borde, `transparent` no tiene fondo ni borde.',
+      options: ['default', 'gray', 'transparent'],
+      table: {
+        defaultValue: {
+          summary: 'default'
+        },
+        type: {
+          summary: "'default' | 'gray' | 'transparent'"
+        }
+      }
+    },
+    inputSize: {
+      control: 'select',
+      description: 'Tamaño del campo. Afecta el padding interno.',
+      options: ['medium', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: "'medium' | 'small'"
+        }
+      }
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Límite de caracteres.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    showCharacterCount: {
+      control: 'boolean',
+      description: 'Muestra el contador de caracteres a la izquierda (requiere `maxLength`).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    maxRows: {
+      control: 'number',
+      description: 'Cantidad de filas. Si es mayor a 1, el campo se vuelve multilínea.',
+      table: {
+        defaultValue: {
+          summary: '1'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    type: {
+      control: 'select',
+      description: 'Tipo de input. `numeric` filtra solo dígitos.',
+      options: ['text', 'password', 'email', 'numeric'],
+      table: {
+        defaultValue: {
+          summary: 'text'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    leftAdornments: {
+      control: 'object',
+      description: 'Arreglo de adornos para el lado izquierdo. Cada item tiene `{ name, props }` usando los nombres de `COMPONENT_KEYS`.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'Array<{ name: string, props: object }>'
+        }
+      }
+    },
+    rightAdornments: {
+      control: 'object',
+      description: 'Arreglo de adornos para el lado derecho.',
+      table: {
+        defaultValue: {
+          summary: '[]'
+        },
+        type: {
+          summary: 'Array<{ name: string, props: object }>'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTBaseInputField es el campo de texto base del design system. Maneja adornos (íconos, prefijos, sufijos, acciones, tooltips, badges), estilos por variante y estado, y el contador de caracteres. Normalmente se usa a través de UTTextInput.'
+      }
+    }
+  }
+};
+const Stateful = args => {
+  var _args$value;
+  const [value, setValue] = (0, _react.useState)((_args$value = args.value) !== null && _args$value !== void 0 ? _args$value : '');
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+const Playground = exports.Playground = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Escribí algo...'
+  },
+  name: 'Playground'
+};
+const Default = exports.Default = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Ingresá un valor...'
+  }
+};
+const VarianteGris = exports.VarianteGris = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Variante gris',
+    variant: 'gray'
+  },
+  name: 'Variante gris'
+};
+const VarianteTransparente = exports.VarianteTransparente = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Variante transparente',
+    variant: 'transparent'
+  },
+  name: 'Variante transparente'
+};
+const ConError = exports.ConError = {
+  args: {
+    placeholder: 'Campo con error',
+    value: 'valor inválido',
+    error: true
+  },
+  name: 'Con error'
+};
+const Deshabilitado = exports.Deshabilitado = {
+  args: {
+    placeholder: 'Campo deshabilitado',
+    disabled: true
+  }
+};
+const SoloLectura = exports.SoloLectura = {
+  args: {
+    value: 'Valor de solo lectura',
+    readOnly: true
+  },
+  name: 'Solo lectura'
+};
+const Pequeno = exports.Pequeno = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Campo pequeño',
+    inputSize: 'small'
+  },
+  name: 'Pequeño'
+};
+const ConIconoIzquierdo = exports.ConIconoIzquierdo = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Buscá...',
+    leftAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        Icon: _Search.default
+      }
+    }]
+  },
+  name: 'Con ícono izquierdo'
+};
+const ConIconoDerecho = exports.ConIconoDerecho = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: '••••••••',
+    type: 'password',
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ICON,
+      props: {
+        Icon: _Visibility.default
+      }
+    }]
+  },
+  name: 'Con ícono derecho'
+};
+const ConPrefix = exports.ConPrefix = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: '0,00',
+    leftAdornments: [{
+      name: _constants.COMPONENT_KEYS.PREFIX,
+      props: {
+        text: '$'
+      }
+    }]
+  },
+  name: 'Con prefijo'
+};
+const ConSuffix = exports.ConSuffix = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: '0',
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.SUFFIX,
+      props: {
+        text: 'kg'
+      }
+    }]
+  },
+  name: 'Con sufijo'
+};
+const ConTooltip = exports.ConTooltip = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'CUIT sin guiones',
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.TOOLTIP,
+      props: {
+        tooltip: 'Ingresá el CUIT sin guiones. Ej: 20123456789'
+      }
+    }]
+  },
+  name: 'Con tooltip'
+};
+const ConAccion = exports.ConAccion = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Ingresá un domicilio...',
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.ACTION,
+      props: {
+        action: {
+          title: 'Buscar',
+          variant: 'text',
+          colorTheme: 'accent',
+          size: 'small',
+          onClick: () => {}
+        }
+      }
+    }]
+  },
+  name: 'Con acción'
+};
+const ConContadorDeCaracteres = exports.ConContadorDeCaracteres = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Límite de 80 caracteres',
+    maxLength: 80,
+    showCharacterCount: true
+  },
+  name: 'Con contador de caracteres'
+};
+const MultipleAdornos = exports.MultipleAdornos = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Monto en dólares',
+    leftAdornments: [{
+      name: _constants.COMPONENT_KEYS.PREFIX,
+      props: {
+        text: 'USD'
+      }
+    }],
+    rightAdornments: [{
+      name: _constants.COMPONENT_KEYS.SUFFIX,
+      props: {
+        text: '.00'
+      }
+    }, {
+      name: _constants.COMPONENT_KEYS.TOOLTIP,
+      props: {
+        tooltip: 'Ingresá el monto en dólares estadounidenses.'
+      }
+    }]
+  },
+  name: 'Múltiples adornos'
+};
+const Multilinea = exports.Multilinea = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    placeholder: 'Escribí aquí...',
+    maxRows: 4,
+    maxLength: 200,
+    showCharacterCount: true
+  },
+  name: 'Multilínea'
+};

package/dist/components/UTSnackbar/README.md

@@ -0,0 +1,105 @@
+# UTSnackbar
+
+Componente de notificación tipo Snackbar. Soporta cinco `colorTheme`: los cuatro semánticos (`success`, `error`, `warning`, `info`) y `white` para notificaciones neutras. La prop `variant` controla si el fondo es oscuro o claro.
+
+---
+
+## Props
+
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `message` | `string` | `undefined` | Mensaje a mostrar. Soporta markdown. |
+| `open` | `boolean` | `false` | Controla si el snackbar está visible. |
+| `colorTheme` | `'success' \| 'error' \| 'warning' \| 'info' \| 'white'` | `'success'` | Color de la notificación. Los valores semánticos determinan ícono y paleta. `white` usa colores neutros sin semántica. |
+| `variant` | `'dark' \| 'light'` | `'dark'` | `dark` usa el color del `colorTheme` como fondo con texto blanco. `light` usa un fondo claro con texto oscuro accesible. |
+| `button` | `object` | `undefined` | Configuración del botón de acción primaria. Se hace spread en `UTButton` — incluir `title` y opcionalmente `onClick`. |
+| `secondaryButton` | `object` | `undefined` | Configuración del botón de acción secundaria. Igual que `button`. |
+| `buttonSize` | `'small' \| 'medium' \| 'large'` | `'medium'` | Tamaño de todos los botones de acción. |
+| `description` | `string` | `undefined` | Texto secundario debajo del mensaje principal. |
+| `icon` | `string` | `undefined` | Nombre de ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). |
+| `withoutIcon` | `boolean` | `undefined` | Oculta el ícono. |
+| `position` | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | Posición del snackbar en la pantalla. Determina también la dirección del slide de entrada. |
+| `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
+| `onClose` | `function` | `undefined` | Callback al cerrar el snackbar. |
+| `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |
+| `closeDataTestId` | `string` | `undefined` | Test ID del botón de cierre. |
+| `labelDataTestId` | `string` | `undefined` | Test ID del label del mensaje. |
+| `descriptionDataTestId` | `string` | `undefined` | Test ID del label de descripción. |
+
+---
+
+## Variantes
+
+### Semántico / Dark
+Fondo con el color semántico saturado y texto blanco.
+
+| `colorTheme` | Color de fondo | Ícono |
+| ------------ | -------------- | ----- |
+| `success` | `success[04]` (`#118460`) | circle-check |
+| `error` | `error[04]` (`#E80C2C`) | circle-x |
+| `warning` | `warning[04]` (`#A86600`) | alert-triangle |
+| `info` | `information[04]` (`#037DB4`) | info-circle |
+
+### Semántico / Light
+Fondo claro con texto oscuro accesible.
+
+| `colorTheme` | Color de fondo | Color de texto |
+| ------------ | -------------- | -------------- |
+| `success` | `success[01]` (`#E6F9F3`) | `success[05]` (`#055F43`) |
+| `error` | `error[01]` (`#FFEBEE`) | `error[05]` (`#A0041B`) |
+| `warning` | `warning[01]` (`#FFF9E6`) | `warning[05]` (`#6F4708`) |
+| `info` | `information[01]` (`#EBF8FD`) | `information[05]` (`#035B83`) |
+
+### White
+Sin semántica de color. Útil para notificaciones neutras.
+
+| `variant` | Color de fondo | Color de texto |
+| --------- | -------------- | -------------- |
+| `light` | `#FFFFFF` | `dark[05]` (`#091E42`) |
+| `dark` | `dark[04]` (`#182C49`) | `#FFFFFF` |
+
+---
+
+## Uso básico
+
+```jsx
+import { UTSnackbar } from '@widergy/energy-ui';
+
+const MiComponente = () => (
+  <UTSnackbar
+    colorTheme="success"
+    message="Operación completada exitosamente."
+    open
+  />
+);
+```
+
+## Con botón de acción
+
+```jsx
+<UTSnackbar
+  button={{ title: 'Deshacer', onClick: () => console.log('deshacer') }}
+  colorTheme="error"
+  message="Se eliminaron 3 elementos."
+  onClose={() => setOpen(false)}
+  open={open}
+/>
+```
+
+## Variante neutra (white)
+
+```jsx
+<UTSnackbar
+  colorTheme="white"
+  message="Notificación sin semántica."
+  open
+  variant="light"
+/>
+```
+
+---
+
+## Notas
+
+- Los colores de fondo y texto se resuelven desde `theme.Palette` en tiempo de ejecución, por lo que respetan el tema de cada utility cliente.
+- Los design tokens de componente (`--UT-snackbar-*`) están pendientes de definición por Diseño.

package/dist/components/UTSnackbar/constants.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VARIANT_CLASS_MAP = exports.VARIANTS = exports.POSITIONS = exports.LABEL_COLOR_MAP = exports.ICON_NAME_MAP = exports.DEFAULT_PROPS = exports.COLOR_THEMES = exports.ACTION_BUTTON_CONFIG_MAP = void 0;
+var _Palette = require("../../constants/Palette");
+const COLOR_THEMES = exports.COLOR_THEMES = {
+  error: 'error',
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  white: 'white'
+};
+const VARIANTS = exports.VARIANTS = {
+  dark: 'dark',
+  light: 'light'
+};
+const POSITIONS = exports.POSITIONS = {
+  bottomLeft: 'bottomLeft',
+  bottomRight: 'bottomRight',
+  topLeft: 'topLeft',
+  topRight: 'topRight'
+};
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  colorTheme: COLOR_THEMES.success,
+  open: false,
+  position: POSITIONS.bottomLeft,
+  variant: VARIANTS.dark
+};
+const VARIANT_CLASS_MAP = exports.VARIANT_CLASS_MAP = {
+  ["".concat(COLOR_THEMES.success, "-").concat(VARIANTS.dark)]: 'successDark',
+  ["".concat(COLOR_THEMES.error, "-").concat(VARIANTS.dark)]: 'errorDark',
+  ["".concat(COLOR_THEMES.warning, "-").concat(VARIANTS.dark)]: 'warningDark',
+  ["".concat(COLOR_THEMES.info, "-").concat(VARIANTS.dark)]: 'infoDark',
+  ["".concat(COLOR_THEMES.success, "-").concat(VARIANTS.light)]: 'successLight',
+  ["".concat(COLOR_THEMES.error, "-").concat(VARIANTS.light)]: 'errorLight',
+  ["".concat(COLOR_THEMES.warning, "-").concat(VARIANTS.light)]: 'warningLight',
+  ["".concat(COLOR_THEMES.info, "-").concat(VARIANTS.light)]: 'infoLight',
+  ["".concat(COLOR_THEMES.white, "-").concat(VARIANTS.light)]: 'whiteLight',
+  ["".concat(COLOR_THEMES.white, "-").concat(VARIANTS.dark)]: 'whiteDark'
+};
+const LABEL_COLOR_MAP = exports.LABEL_COLOR_MAP = {
+  successDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  errorDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  warningDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  infoDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  },
+  successLight: {
+    colorTheme: _Palette.COLOR_THEMES.success,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  errorLight: {
+    colorTheme: _Palette.COLOR_THEMES.error,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  warningLight: {
+    colorTheme: _Palette.COLOR_THEMES.warning,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  infoLight: {
+    colorTheme: _Palette.COLOR_THEMES.information,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  whiteLight: {
+    colorTheme: _Palette.COLOR_THEMES.dark,
+    shade: _Palette.COLOR_SHADES.shade05
+  },
+  whiteDark: {
+    colorTheme: _Palette.COLOR_THEMES.light,
+    shade: _Palette.COLOR_SHADES.shade01
+  }
+};
+const ACTION_BUTTON_CONFIG_MAP = exports.ACTION_BUTTON_CONFIG_MAP = {
+  successDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  errorDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  warningDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  infoDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  },
+  successLight: {
+    colorTheme: _Palette.COLOR_THEMES.success,
+    variant: 'text'
+  },
+  errorLight: {
+    colorTheme: _Palette.COLOR_THEMES.error,
+    variant: 'text'
+  },
+  warningLight: {
+    colorTheme: _Palette.COLOR_THEMES.warning,
+    variant: 'text'
+  },
+  infoLight: {
+    colorTheme: _Palette.COLOR_THEMES.information,
+    variant: 'text'
+  },
+  whiteLight: {
+    colorTheme: _Palette.COLOR_THEMES.primary,
+    closeColorTheme: _Palette.COLOR_THEMES.neutral,
+    variant: 'text'
+  },
+  whiteDark: {
+    colorTheme: _Palette.COLOR_THEMES.negative,
+    variant: 'text'
+  }
+};
+const ICON_NAME_MAP = exports.ICON_NAME_MAP = {
+  [COLOR_THEMES.error]: 'IconCircleX',
+  [COLOR_THEMES.info]: 'IconInfoCircle',
+  [COLOR_THEMES.success]: 'IconCircleCheck',
+  [COLOR_THEMES.warning]: 'IconAlertTriangle',
+  [COLOR_THEMES.white]: 'IconInfoCircle'
+};