@widergy/energy-ui 3.164.0 → 3.165.0

package/dist/components/UTTextInput/UTTextInput.stories.js

@@ -0,0 +1,439 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SoloNumeros = exports.SoloLectura = exports.Requerido = exports.Playground = exports.Pequeno = exports.Deshabilitado = exports.Default = exports.Contrasena = exports.ConTooltip = exports.ConTitulo = exports.ConTextoDeAyuda = exports.ConSuffix = exports.ConPrefix = exports.ConIconoIzquierdo = exports.ConIconoDerecho = exports.ConError = exports.ConContadorDeCaracteres = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
+var _Lock = _interopRequireDefault(require("@material-ui/icons/Lock"));
+var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
+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/UTTextInput',
+  component: _.default,
+  args: {
+    version: 'V1',
+    placeholder: 'Ingresá un valor...'
+  },
+  argTypes: {
+    version: {
+      control: 'select',
+      description: 'Versión del componente.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: "'V0' | 'V1'"
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Texto del label que aparece sobre el campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    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.',
+      table: {
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Deshabilita el campo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Muestra el valor sin permitir edición.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Muestra el indicador `*` junto al label.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    error: {
+      control: 'text',
+      description: 'Mensaje de error o `true` para mostrar estado de error.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | bool'
+        }
+      }
+    },
+    helpText: {
+      control: 'text',
+      description: 'Texto de ayuda debajo del campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Límite de caracteres. Si se combina con `showCharacterCount`, muestra el contador.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    showCharacterCount: {
+      control: 'boolean',
+      description: 'Muestra el contador de caracteres (requiere `maxLength`).',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    inputSize: {
+      control: 'select',
+      description: 'Tamaño del campo. Afecta el padding interno.',
+      options: ['medium', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: "'medium' | 'small'"
+        }
+      }
+    },
+    titleVariant: {
+      control: 'select',
+      description: 'Tamaño del label.',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: "'large' | 'small'"
+        }
+      }
+    },
+    prefix: {
+      control: 'text',
+      description: 'Texto prefijo dentro del campo (ej: `$`, `+54`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    suffix: {
+      control: 'text',
+      description: 'Texto sufijo dentro del campo (ej: `kg`, `m²`).',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip de ayuda sobre el ícono de información.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    type: {
+      control: 'select',
+      description: 'Tipo de input HTML. `numeric` filtra solo números.',
+      options: ['text', 'password', 'email', 'numeric'],
+      table: {
+        defaultValue: {
+          summary: 'text'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    LeftIcon: {
+      control: false,
+      description: 'Componente ícono que se muestra a la izquierda.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'elementType'
+        }
+      }
+    },
+    RightIcon: {
+      control: false,
+      description: 'Componente ícono que se muestra a la derecha.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'elementType'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTTextInput es el campo de texto estándar del design system. V1 combina UTFieldLabel + UTBaseInputField con soporte completo para adornos, validaciones y tokens de diseño.'
+      }
+    }
+  }
+};
+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: {
+    title: 'Email',
+    placeholder: 'usuario@empresa.com',
+    version: 'V1'
+  },
+  name: 'Playground'
+};
+const Default = exports.Default = {
+  args: {
+    placeholder: 'Ingresá un valor...',
+    version: 'V1'
+  }
+};
+const ConTitulo = exports.ConTitulo = {
+  args: {
+    title: 'Nombre completo',
+    placeholder: 'Ej: Juan Pérez',
+    version: 'V1'
+  },
+  name: 'Con título'
+};
+const Requerido = exports.Requerido = {
+  args: {
+    title: 'Email',
+    placeholder: 'usuario@empresa.com',
+    required: true,
+    version: 'V1'
+  }
+};
+const ConError = exports.ConError = {
+  args: {
+    title: 'Email',
+    value: 'correo-invalido',
+    error: 'El formato del email no es válido.',
+    version: 'V1'
+  },
+  name: 'Con error'
+};
+const Deshabilitado = exports.Deshabilitado = {
+  args: {
+    title: 'Email',
+    placeholder: 'Campo deshabilitado',
+    disabled: true,
+    version: 'V1'
+  }
+};
+const SoloLectura = exports.SoloLectura = {
+  args: {
+    title: 'Email',
+    value: 'usuario@empresa.com',
+    readOnly: true,
+    version: 'V1'
+  },
+  name: 'Solo lectura'
+};
+const ConTextoDeAyuda = exports.ConTextoDeAyuda = {
+  args: {
+    title: 'Contraseña',
+    placeholder: 'Mínimo 8 caracteres',
+    helpText: 'Usá mayúsculas, minúsculas y al menos un número.',
+    version: 'V1'
+  },
+  name: 'Con texto de ayuda'
+};
+const ConContadorDeCaracteres = exports.ConContadorDeCaracteres = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Nombre',
+    placeholder: 'Ingresá tu nombre',
+    maxLength: 50,
+    showCharacterCount: true,
+    version: 'V1'
+  },
+  name: 'Con contador de caracteres'
+};
+const ConPrefix = exports.ConPrefix = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Monto',
+    placeholder: '0,00',
+    prefix: '$',
+    version: 'V1'
+  },
+  name: 'Con prefijo'
+};
+const ConSuffix = exports.ConSuffix = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Peso',
+    placeholder: '0',
+    suffix: 'kg',
+    version: 'V1'
+  },
+  name: 'Con sufijo'
+};
+const ConIconoIzquierdo = exports.ConIconoIzquierdo = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Búsqueda',
+    placeholder: 'Buscá...',
+    LeftIcon: _Search.default,
+    version: 'V1'
+  },
+  name: 'Con ícono izquierdo'
+};
+const ConIconoDerecho = exports.ConIconoDerecho = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Contraseña',
+    placeholder: '••••••••',
+    type: 'password',
+    RightIcon: _Visibility.default,
+    version: 'V1'
+  },
+  name: 'Con ícono derecho'
+};
+const ConTooltip = exports.ConTooltip = {
+  args: {
+    title: 'CUIT',
+    placeholder: '20-12345678-9',
+    tooltip: 'Ingresá tu CUIT sin guiones. Se validará el formato automáticamente.',
+    version: 'V1'
+  },
+  name: 'Con tooltip'
+};
+const Pequeno = exports.Pequeno = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Código',
+    placeholder: 'ABC-123',
+    inputSize: 'small',
+    titleVariant: 'small',
+    version: 'V1'
+  },
+  name: 'Pequeño'
+};
+const Contrasena = exports.Contrasena = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Contraseña',
+    placeholder: 'Ingresá tu contraseña',
+    type: 'password',
+    RightIcon: _Lock.default,
+    version: 'V1'
+  },
+  name: 'Contraseña'
+};
+const SoloNumeros = exports.SoloNumeros = {
+  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
+  args: {
+    title: 'Número de teléfono',
+    placeholder: '11 1234-5678',
+    type: 'numeric',
+    version: 'V1'
+  },
+  name: 'Solo números'
+};

package/dist/constants/testIds.js

@@ -65,6 +65,7 @@ const ID_CONSTANTS = exports.ID_CONSTANTS = {
   TABLE_ROW: 'tableRow',
   TITLE: 'title',
   USER_FILTER: 'userFilter',
+  UT_SNACKBAR: 'UTSnackbar',
   VALIDATION_DATA: 'validationData',
   WORKFLOW_CONTAINER: 'workflowContainer'
 };
@@ -168,6 +169,14 @@ const TEST_IDS = exports.TEST_IDS = {
   wrapperObservation: {
     actionIcon: 'wrapperObservation.actionIcon.'
   },
+  UTSnackbar: {
+    closeButton: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".closeButton"),
+    description: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".description"),
+    label: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".label"),
+    primaryActionButton: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".primaryActionButton"),
+    root: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".root"),
+    secondaryActionButton: "".concat(ID_CONSTANTS.UT_SNACKBAR, ".secondaryActionButton")
+  },
   UTDatePickerV1TestID: {
     calendar: 'UTDatePickerV1.calendar',
     calendarPrevBtn: 'UTDatePickerV1.calendarPrevBtn',

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

@@ -0,0 +1,100 @@
+# UTAlert
+
+Componente de alerta tipo Snackbar para mostrar notificaciones al usuario. Soporta cuatro tipos (success, error, info, warning), markdown en el mensaje y posicionamiento configurable. Se usa habitualmente junto al `AlertHandler` singleton para disparar alertas desde cualquier lugar de la aplicación.
+
+---
+
+## Props
+
+### `content` (shape)
+
+Objeto que controla el estado y la apariencia de la alerta.
+
+| Campo | Tipo | Default | Descripción |
+| ----- | ---- | ------- | ----------- |
+| `message` | `string` | `undefined` | Mensaje a mostrar. Soporta markdown. |
+| `open` | `boolean` | `false` | Controla si la alerta está visible. |
+| `type` | `'error' \| 'info' \| 'success' \| 'warning'` | `undefined` | Tipo de alerta. Determina el ícono y el color. |
+| `timeDuration` | `number` | `undefined` | Duración en ms antes del cierre automático. |
+| `topRight` | `boolean` | `false` | Si es `true`, aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda. |
+| `onClose` | `function` | `undefined` | Callback ejecutado al cerrar la alerta. |
+
+### Props de nivel superior
+
+| Prop | Tipo | Default | Descripción |
+| ---- | ---- | ------- | ----------- |
+| `withoutIcon` | `boolean` | `undefined` | Si es `true`, oculta el ícono del tipo de alerta. |
+| `classes` | `object` | `{}` | Clases CSS personalizadas para sobrescribir estilos del tema. |
+| `closeDataTestId` | `string` | `undefined` | Identificador de test para el botón de cierre. |
+| `labelDataTestId` | `string` | `undefined` | Identificador de test para el label del mensaje. |
+
+---
+
+## Uso básico
+
+```jsx
+import { UTAlert } from '@widergy/energy-ui';
+
+const MiComponente = () => (
+  <UTAlert
+    content={{
+      message: 'Operación completada exitosamente.',
+      open: true,
+      type: 'success'
+    }}
+  />
+);
+```
+
+---
+
+## Uso con AlertHandler
+
+El patrón recomendado es inicializar `AlertHandler` una sola vez en el componente raíz y luego llamarlo desde cualquier parte de la aplicación.
+
+```jsx
+import { useEffect, useState } from 'react';
+import { UTAlert, AlertHandler } from '@widergy/energy-ui';
+
+const AppRoot = () => {
+  const [alert, setAlert] = useState();
+
+  useEffect(() => {
+    AlertHandler.init({ setState: setAlert });
+  }, []);
+
+  return (
+    <>
+      <UTAlert content={alert} />
+      {/* resto de la app */}
+    </>
+  );
+};
+
+// Desde cualquier otro componente o servicio:
+AlertHandler.success('Guardado correctamente.');
+AlertHandler.error('Ocurrió un error. Intentá nuevamente.');
+AlertHandler.info('Hay actualizaciones disponibles.');
+AlertHandler.warning('Esta acción no se puede deshacer.');
+```
+
+### Métodos de AlertHandler
+
+| Método | Descripción |
+| ------ | ----------- |
+| `init({ setState, duration })` | Inicializa el handler. `setState` es el setter de React. `duration` es la duración por defecto en ms (default: 5000). |
+| `success(message, topRight?, timeDuration?)` | Muestra una alerta de éxito. |
+| `error(message, topRight?, timeDuration?)` | Muestra una alerta de error. |
+| `info(message, topRight?, timeDuration?)` | Muestra una alerta informativa. |
+| `warning(message, topRight?, timeDuration?)` | Muestra una alerta de advertencia. |
+
+---
+
+## Variantes de tipo
+
+| Tipo | Ícono | Descripción |
+| ---- | ----- | ----------- |
+| `success` | CheckCircle | Para operaciones exitosas. |
+| `error` | Error | Para fallas o errores críticos. |
+| `info` | Info | Para notificaciones informativas. |
+| `warning` | Warning | Para acciones que requieren atención. |