@widergy/energy-ui 3.164.0 → 3.165.0

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

@@ -0,0 +1,431 @@
+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); }
+import React, { useState } from 'react';
+import Search from '@material-ui/icons/Search';
+import Lock from '@material-ui/icons/Lock';
+import Visibility from '@material-ui/icons/Visibility';
+import UTTextInput from '.';
+export default {
+  title: 'Energy-UI/UTTextInput',
+  component: UTTextInput,
+  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] = useState((_args$value = args.value) !== null && _args$value !== void 0 ? _args$value : '');
+  return /*#__PURE__*/React.createElement(UTTextInput, _extends({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+export const Playground = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Email',
+    placeholder: 'usuario@empresa.com',
+    version: 'V1'
+  },
+  name: 'Playground'
+};
+export const Default = {
+  args: {
+    placeholder: 'Ingresá un valor...',
+    version: 'V1'
+  }
+};
+export const ConTitulo = {
+  args: {
+    title: 'Nombre completo',
+    placeholder: 'Ej: Juan Pérez',
+    version: 'V1'
+  },
+  name: 'Con título'
+};
+export const Requerido = {
+  args: {
+    title: 'Email',
+    placeholder: 'usuario@empresa.com',
+    required: true,
+    version: 'V1'
+  }
+};
+export const ConError = {
+  args: {
+    title: 'Email',
+    value: 'correo-invalido',
+    error: 'El formato del email no es válido.',
+    version: 'V1'
+  },
+  name: 'Con error'
+};
+export const Deshabilitado = {
+  args: {
+    title: 'Email',
+    placeholder: 'Campo deshabilitado',
+    disabled: true,
+    version: 'V1'
+  }
+};
+export const SoloLectura = {
+  args: {
+    title: 'Email',
+    value: 'usuario@empresa.com',
+    readOnly: true,
+    version: 'V1'
+  },
+  name: 'Solo lectura'
+};
+export const 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'
+};
+export const ConContadorDeCaracteres = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Nombre',
+    placeholder: 'Ingresá tu nombre',
+    maxLength: 50,
+    showCharacterCount: true,
+    version: 'V1'
+  },
+  name: 'Con contador de caracteres'
+};
+export const ConPrefix = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Monto',
+    placeholder: '0,00',
+    prefix: '$',
+    version: 'V1'
+  },
+  name: 'Con prefijo'
+};
+export const ConSuffix = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Peso',
+    placeholder: '0',
+    suffix: 'kg',
+    version: 'V1'
+  },
+  name: 'Con sufijo'
+};
+export const ConIconoIzquierdo = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Búsqueda',
+    placeholder: 'Buscá...',
+    LeftIcon: Search,
+    version: 'V1'
+  },
+  name: 'Con ícono izquierdo'
+};
+export const ConIconoDerecho = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Contraseña',
+    placeholder: '••••••••',
+    type: 'password',
+    RightIcon: Visibility,
+    version: 'V1'
+  },
+  name: 'Con ícono derecho'
+};
+export const 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'
+};
+export const Pequeno = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Código',
+    placeholder: 'ABC-123',
+    inputSize: 'small',
+    titleVariant: 'small',
+    version: 'V1'
+  },
+  name: 'Pequeño'
+};
+export const Contrasena = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Contraseña',
+    placeholder: 'Ingresá tu contraseña',
+    type: 'password',
+    RightIcon: Lock,
+    version: 'V1'
+  },
+  name: 'Contraseña'
+};
+export const SoloNumeros = {
+  render: args => /*#__PURE__*/React.createElement(Stateful, args),
+  args: {
+    title: 'Número de teléfono',
+    placeholder: '11 1234-5678',
+    type: 'numeric',
+    version: 'V1'
+  },
+  name: 'Solo números'
+};

package/dist/esm/constants/testIds.js

@@ -59,6 +59,7 @@ export const ID_CONSTANTS = {
   TABLE_ROW: 'tableRow',
   TITLE: 'title',
   USER_FILTER: 'userFilter',
+  UT_SNACKBAR: 'UTSnackbar',
   VALIDATION_DATA: 'validationData',
   WORKFLOW_CONTAINER: 'workflowContainer'
 };
@@ -162,6 +163,14 @@ export const 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/index.js

@@ -64,6 +64,7 @@ import UTSelectableCard from './components/UTSelectableCard';
 import UTSidebar from './components/UTSidebar';
 import UTSignature from './components/UTSignature';
 import Skeleton from './components/UTSkeleton';
+import UTSnackbar from './components/UTSnackbar';
 import UTStatus from './components/UTStatus';
 import UTStatusMessage from './components/UTStatusMessage';
 import UTSwitch from './components/UTSwitch';
@@ -107,4 +108,4 @@ export { UTList };
 export { UTPieChart };
 /** @deprecated */
 export { UTToggle };
-export { AlertHandler, componentUtils, ThemeProvider as EnergyThemeProvider, keyboardUtils, stylesDeduplicationUtils, useCSSVariables, UTCalendar, UTActionCard, UTAlert, UTAttachmentList, UTAvatar, UTBadge, UTBanner, UTBreadcrumbs, UTButton, UTButtonGroup, UTCaptcha, UTCarousel, UTCBUInput, UTCheckbox, UTCheckList, UTChip, UTConsumptionBar, UTCreditCard, UTCuit, UTDataCategory, UTDataElement, UTDatePicker, UTDocumentWizard, UTDotMenu, UTEmojiPicker, UTExternalLink, UTFileInputContainer as UTFileInput, UTShortcutPanel, UTGoogleAutocomplete, UTGraph, UTIcon, UTImageRadio, UTKpi, UTLabel, UTLoading, UTMap, UTMenu, UTModal, UTOnboarding, UTPagination, UTPanel, UTPasswordField, UTPhoneInput, UTPopper, UTPopUp, UTProductItem, UTProgressBar, UTRadioGroup, UTRatingContainer as UTRating, UTSearchField, UTSelect, UTSelectableCard, UTSidebar, UTSignature, Skeleton as UTSkeleton, UTStatus, UTStatusMessage, UTSwitch, UTTable, UTTabs, UTTextArea, UTTextInput, UTThirdPartyCookieChecker, UTTooltip, UTTopbar, UTTouchableWithoutFeedback, UTTracker, UTValidation, UTVirtualizedList, UTVirtualKeyboard, UTWorkflowContainer, UTWrapperObservation, WithLoading, WithTouch, useScrollBasedMenu };
+export { AlertHandler, componentUtils, ThemeProvider as EnergyThemeProvider, keyboardUtils, stylesDeduplicationUtils, useCSSVariables, UTCalendar, UTActionCard, UTAlert, UTAttachmentList, UTAvatar, UTBadge, UTBanner, UTBreadcrumbs, UTButton, UTButtonGroup, UTCaptcha, UTCarousel, UTCBUInput, UTCheckbox, UTCheckList, UTChip, UTConsumptionBar, UTCreditCard, UTCuit, UTDataCategory, UTDataElement, UTDatePicker, UTDocumentWizard, UTDotMenu, UTEmojiPicker, UTExternalLink, UTFileInputContainer as UTFileInput, UTShortcutPanel, UTGoogleAutocomplete, UTGraph, UTIcon, UTImageRadio, UTKpi, UTLabel, UTLoading, UTMap, UTMenu, UTModal, UTOnboarding, UTPagination, UTPanel, UTPasswordField, UTPhoneInput, UTPopper, UTPopUp, UTProductItem, UTProgressBar, UTRadioGroup, UTRatingContainer as UTRating, UTSearchField, UTSelect, UTSelectableCard, UTSidebar, UTSignature, Skeleton as UTSkeleton, UTSnackbar, UTStatus, UTStatusMessage, UTSwitch, UTTable, UTTabs, UTTextArea, UTTextInput, UTThirdPartyCookieChecker, UTTooltip, UTTopbar, UTTouchableWithoutFeedback, UTTracker, UTValidation, UTVirtualizedList, UTVirtualKeyboard, UTWorkflowContainer, UTWrapperObservation, WithLoading, WithTouch, useScrollBasedMenu };

package/dist/esm/utils/hooks/useCSSVariables/constants.js

@@ -238,6 +238,15 @@ export const baseTokens = {
     'UT-shortcutPanel-item-gap': 'gap-sm',
     'UT-shortcutPanel-item-label-size': 'font-body-size-md',
     'UT-shortcutPanel-item-icon-size': 'size-icon-xs',
+    'UT-snackbar-padding-x': 'padding-sm',
+    'UT-snackbar-padding-y': 'padding-sm',
+    'UT-snackbar-radius': 'radius-sm',
+    'UT-snackbar-gap-icon': 'gap-sm',
+    'UT-snackbar-gap-description': 'gap-xs',
+    'UT-snackbar-gap-actions': 'gap-xs',
+    'UT-snackbar-gap-action-area': 'gap-md',
+    'UT-snackbar-icon-size': 'size-icon-xs',
+    'UT-snackbar-icon-offset': 'spacing-1',
     'UT-dataElement-padding-md': 'padding-md',
     'UT-dataElement-padding-sm': 'padding-xs',
     'UT-dataElement-gap-md': 'gap-lg',

package/dist/index.js

@@ -393,6 +393,12 @@ Object.defineProperty(exports, "UTSkeleton", {
     return _UTSkeleton.default;
   }
 });
+Object.defineProperty(exports, "UTSnackbar", {
+  enumerable: true,
+  get: function () {
+    return _UTSnackbar.default;
+  }
+});
 Object.defineProperty(exports, "UTStatus", {
   enumerable: true,
   get: function () {
@@ -609,6 +615,7 @@ var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectabl
 var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
 var _UTSignature = _interopRequireDefault(require("./components/UTSignature"));
 var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
+var _UTSnackbar = _interopRequireDefault(require("./components/UTSnackbar"));
 var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
 var _UTStatusMessage = _interopRequireDefault(require("./components/UTStatusMessage"));
 var _UTSwitch = _interopRequireDefault(require("./components/UTSwitch"));

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -244,6 +244,15 @@ const baseTokens = exports.baseTokens = {
     'UT-shortcutPanel-item-gap': 'gap-sm',
     'UT-shortcutPanel-item-label-size': 'font-body-size-md',
     'UT-shortcutPanel-item-icon-size': 'size-icon-xs',
+    'UT-snackbar-padding-x': 'padding-sm',
+    'UT-snackbar-padding-y': 'padding-sm',
+    'UT-snackbar-radius': 'radius-sm',
+    'UT-snackbar-gap-icon': 'gap-sm',
+    'UT-snackbar-gap-description': 'gap-xs',
+    'UT-snackbar-gap-actions': 'gap-xs',
+    'UT-snackbar-gap-action-area': 'gap-md',
+    'UT-snackbar-icon-size': 'size-icon-xs',
+    'UT-snackbar-icon-offset': 'spacing-1',
     'UT-dataElement-padding-md': 'padding-md',
     'UT-dataElement-padding-sm': 'padding-xs',
     'UT-dataElement-gap-md': 'gap-lg',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.164.0",
+  "version": "3.165.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",