@widergy/energy-ui 3.163.0 → 3.165.0

package/dist/components/UTSnackbar/stories/storiesConstants.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ARG_TYPES = void 0;
+var _utils = require("stories/utils");
+var _constants = require("../constants");
+const ARG_TYPES = exports.ARG_TYPES = {
+  button: {
+    control: 'object',
+    description: 'Configuración del botón de acción primaria. Se hace spread en UTButton — incluir `title` como label y `onClick` como callback.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'shape'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tipo de color de la notificación. `success`, `error`, `warning` e `info` usan colores semánticos con ícono asociado. `white` usa colores neutros sin semántica.',
+    options: Object.values(_constants.COLOR_THEMES),
+    table: {
+      defaultValue: {
+        summary: _constants.COLOR_THEMES.success
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.COLOR_THEMES))
+      }
+    }
+  },
+  icon: {
+    control: 'text',
+    description: 'Nombre del ícono Tabler para sobreescribir el ícono por defecto (ej: `IconStar`). Si no se indica, se usa el ícono correspondiente al `colorTheme`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  description: {
+    control: 'text',
+    description: 'Texto secundario debajo del mensaje principal.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  dataTestId: {
+    control: false,
+    description: 'Identificador de test raíz. Los sub-elementos derivan su testId automáticamente: `.icon`, `.label`, `.description.label`, `.close`, `.button.secondaryAction`, `.secondaryButton.tertiaryAction`.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  message: {
+    control: 'text',
+    description: 'Mensaje principal a mostrar. Soporta markdown.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  onClose: {
+    control: false,
+    description: 'Callback ejecutado al cerrar el snackbar.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  open: {
+    control: 'boolean',
+    description: 'Controla si el snackbar está visible.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  secondaryButton: {
+    control: 'object',
+    description: 'Configuración del botón de acción secundaria. Se hace spread en UTButton — incluir `title` como label y `onClick` como callback.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'shape'
+      }
+    }
+  },
+  timeDuration: {
+    control: 'number',
+    description: 'Duración en milisegundos antes del cierre automático.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  topRight: {
+    control: 'boolean',
+    description: 'Si es `true`, el snackbar aparece en la esquina superior derecha. Si es `false`, en la inferior izquierda.',
+    table: {
+      defaultValue: {
+        summary: 'false'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  variant: {
+    control: 'inline-radio',
+    description: '`dark` usa el color del `colorTheme` como fondo con texto blanco; `light` usa una versión clara con texto oscuro accesible.',
+    options: Object.values(_constants.VARIANTS),
+    table: {
+      defaultValue: {
+        summary: _constants.VARIANTS.dark
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.VARIANTS))
+      }
+    }
+  },
+  withoutIcon: {
+    control: 'boolean',
+    description: 'Si es `true`, oculta el ícono.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};

package/dist/components/UTSnackbar/styles.module.scss

@@ -0,0 +1,82 @@
+.snackbarContent {
+  flex-wrap: nowrap;
+}
+
+.message {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.messageContent {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--UT-snackbar-gap-icon, 8px);
+}
+
+.icon {
+  flex-shrink: 0;
+  margin-top: var(--UT-snackbar-icon-offset, 2px);
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: var(--UT-snackbar-gap-description, 4px);
+  min-width: 0;
+}
+
+.action {
+  flex-shrink: 0;
+  gap: var(--UT-snackbar-gap-actions, 4px);
+}
+
+.successDark {
+  background-color: var(--semanticSuccess04);
+  color: var(--light01);
+}
+
+.errorDark {
+  background-color: var(--actionError04);
+  color: var(--light01);
+}
+
+.warningDark {
+  background-color: var(--semanticWarning04);
+  color: var(--light01);
+}
+
+.infoDark {
+  background-color: var(--semanticInformation04);
+  color: var(--light01);
+}
+
+.successLight {
+  background-color: var(--semanticSuccess01);
+  color: var(--semanticSuccess05);
+}
+
+.errorLight {
+  background-color: var(--actionError01);
+  color: var(--actionError05);
+}
+
+.warningLight {
+  background-color: var(--semanticWarning01);
+  color: var(--semanticWarning05);
+}
+
+.infoLight {
+  background-color: var(--semanticInformation01);
+  color: var(--semanticInformation05);
+}
+
+.whiteLight {
+  background-color: var(--light01);
+  color: var(--dark05);
+}
+
+.whiteDark {
+  background-color: var(--dark04);
+  color: var(--light01);
+}

package/dist/components/UTSnackbar/theme.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveMuiTheme = void 0;
+var _styles = require("@material-ui/core/styles");
+const retrieveMuiTheme = theme => {
+  var _theme$Fonts;
+  return (0, _styles.createTheme)({
+    typography: {
+      fontFamily: theme === null || theme === void 0 || (_theme$Fonts = theme.Fonts) === null || _theme$Fonts === void 0 ? void 0 : _theme$Fonts.fontFamily
+    },
+    overrides: {
+      MuiSnackbarContent: {
+        root: {
+          minWidth: 288,
+          maxWidth: 568,
+          padding: 'var(--UT-snackbar-padding-y, 8px) var(--UT-snackbar-padding-x, 12px)',
+          borderRadius: 'var(--UT-snackbar-radius, 4px)',
+          '@media (max-width : 767px)': {
+            borderRadius: 0,
+            maxWidth: 'initial',
+            width: '100%'
+          }
+        },
+        message: {
+          flex: 1,
+          padding: 0
+        },
+        action: {
+          marginLeft: 'var(--UT-snackbar-gap-action-area, 12px)',
+          marginRight: 0,
+          paddingLeft: 0
+        }
+      },
+      MuiSnackbar: {
+        root: {
+          '@media (max-width : 767px)': {
+            left: 0,
+            maxWidth: 'initial',
+            right: 0,
+            width: '100%'
+          }
+        },
+        anchorOriginBottomLeft: {
+          bottom: 0,
+          '@media (max-width : 767px)': {
+            bottom: 0,
+            left: 0
+          }
+        }
+      }
+    }
+  });
+};
+exports.retrieveMuiTheme = retrieveMuiTheme;

package/dist/components/UTSnackbar/types.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buttonType = void 0;
+var _propTypes = require("prop-types");
+const buttonType = exports.buttonType = (0, _propTypes.shape)({
+  colorTheme: _propTypes.string,
+  dataTestId: _propTypes.string,
+  disabled: _propTypes.bool,
+  Icon: (0, _propTypes.oneOfType)([_propTypes.string, _propTypes.func]),
+  iconPlacement: _propTypes.string,
+  loading: _propTypes.bool,
+  onClick: _propTypes.func,
+  size: _propTypes.string,
+  title: _propTypes.node,
+  type: _propTypes.string,
+  variant: _propTypes.string
+});

package/dist/components/UTTextArea/UTTextArea.stories.js

@@ -0,0 +1,342 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.V0Legado = exports.V0ConTooltip = exports.SoloLectura = exports.Requerido = exports.Playground = exports.Pequeno = exports.MasFilas = exports.Deshabilitado = exports.Default = exports.ConTitulo = exports.ConTextoDeAyuda = exports.ConLimiteDeCaracteres = exports.ConError = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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/UTTextArea',
+  component: _.default,
+  args: {
+    version: 'V1',
+    placeholder: 'Escribí tu texto aquí...'
+  },
+  argTypes: {
+    version: {
+      control: 'select',
+      description: 'Versión del componente. V1 extiende UTTextInput con soporte para design tokens.',
+      options: ['V0', 'V1'],
+      table: {
+        defaultValue: {
+          summary: 'V0'
+        },
+        type: {
+          summary: "'V0' | 'V1'"
+        }
+      }
+    },
+    title: {
+      control: 'text',
+      description: 'Texto del label que aparece sobre el campo. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Texto de placeholder que se muestra cuando el campo está vacío.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    value: {
+      control: 'text',
+      description: 'Valor actual del campo de texto.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'Callback que se ejecuta al cambiar el valor del campo.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'func'
+        }
+      }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Si es `true`, el campo está deshabilitado y no acepta interacciones.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    readOnly: {
+      control: 'boolean',
+      description: 'Si es `true`, el campo muestra el valor pero no permite editarlo.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Si es `true`, muestra un indicador `*` junto al label. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'bool'
+        }
+      }
+    },
+    error: {
+      control: 'text',
+      description: 'Mensaje de error. Si se pasa un string, se muestra como validación debajo del campo. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string | bool'
+        }
+      }
+    },
+    helpText: {
+      control: 'text',
+      description: 'Texto de ayuda que se muestra debajo del campo en color gris. (solo V1)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    maxLength: {
+      control: 'number',
+      description: 'Límite máximo de caracteres. En V1 habilita el contador de caracteres automáticamente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    maxRows: {
+      control: 'number',
+      description: 'Cantidad máxima de filas visibles antes de activar el scroll.',
+      table: {
+        defaultValue: {
+          summary: '4'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    inputSize: {
+      control: 'select',
+      description: 'Tamaño del campo de texto. Afecta el padding interno. (solo V1)',
+      options: ['medium', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'medium'
+        },
+        type: {
+          summary: "'medium' | 'small'"
+        }
+      }
+    },
+    titleVariant: {
+      control: 'select',
+      description: 'Tamaño del label del campo. (solo V1)',
+      options: ['large', 'small'],
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: "'large' | 'small'"
+        }
+      }
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Texto del tooltip que aparece al hacer hover sobre el ícono de ayuda. (V0)',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'UTTextArea es un campo de texto multilínea. La versión V1 extiende UTTextInput con `showCharacterCount=true` y `maxRows=4` por defecto. La versión V0 es la implementación legada con estilos propios.'
+      }
+    }
+  }
+};
+const StatefulTextArea = 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(StatefulTextArea, args),
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    maxLength: 200,
+    maxRows: 4,
+    version: 'V1'
+  },
+  name: 'Playground'
+};
+const Default = exports.Default = {
+  args: {
+    placeholder: 'Escribí tu texto aquí...',
+    version: 'V1'
+  }
+};
+const ConTitulo = exports.ConTitulo = {
+  args: {
+    title: 'Motivo de contacto',
+    placeholder: 'Describí tu consulta...',
+    version: 'V1'
+  },
+  name: 'Con título'
+};
+const Requerido = exports.Requerido = {
+  args: {
+    title: 'Motivo de contacto',
+    placeholder: 'Este campo es obligatorio',
+    required: true,
+    version: 'V1'
+  }
+};
+const ConError = exports.ConError = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    value: 'Texto con error',
+    error: 'El texto ingresado no cumple con el formato requerido.',
+    version: 'V1'
+  },
+  name: 'Con error'
+};
+const Deshabilitado = exports.Deshabilitado = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Campo deshabilitado',
+    disabled: true,
+    version: 'V1'
+  }
+};
+const SoloLectura = exports.SoloLectura = {
+  args: {
+    title: 'Observaciones',
+    value: 'Este es un texto de solo lectura que no puede ser editado por el usuario, solo visualizado.',
+    readOnly: true,
+    version: 'V1'
+  },
+  name: 'Solo lectura'
+};
+const ConTextoDeAyuda = exports.ConTextoDeAyuda = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí una breve descripción...',
+    helpText: 'Máximo 500 caracteres. No incluyas datos personales.',
+    version: 'V1'
+  },
+  name: 'Con texto de ayuda'
+};
+const ConLimiteDeCaracteres = exports.ConLimiteDeCaracteres = {
+  render: args => /*#__PURE__*/_react.default.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    maxLength: 100,
+    maxRows: 4,
+    version: 'V1'
+  },
+  name: 'Con límite de caracteres'
+};
+const Pequeno = exports.Pequeno = {
+  args: {
+    title: 'Comentario',
+    placeholder: 'Comentario corto...',
+    inputSize: 'small',
+    titleVariant: 'small',
+    maxLength: 80,
+    version: 'V1'
+  },
+  name: 'Pequeño'
+};
+const MasFilas = exports.MasFilas = {
+  render: args => /*#__PURE__*/_react.default.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción extendida',
+    placeholder: 'El área crece hasta 8 filas...',
+    maxRows: 8,
+    maxLength: 500,
+    version: 'V1'
+  },
+  name: 'Más filas (maxRows=8)'
+};
+const V0Legado = exports.V0Legado = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Versión legada V0...',
+    version: 'V0',
+    value: '',
+    onChange: () => {}
+  },
+  name: 'V0 (legado)'
+};
+const V0ConTooltip = exports.V0ConTooltip = {
+  args: {
+    title: 'Observaciones',
+    placeholder: 'Escribí tus observaciones...',
+    tooltip: 'Este campo se usa para registrar observaciones adicionales sobre el caso.',
+    version: 'V0',
+    value: '',
+    onChange: () => {}
+  },
+  name: 'V0 con tooltip'
+};