@widergy/energy-ui 3.164.0 → 3.165.1

package/dist/esm/components/UTSnackbar/index.js

@@ -0,0 +1,127 @@
+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 from 'react';
+import { bool, func, number, oneOf, string } from 'prop-types';
+import Slide from '@material-ui/core/Slide';
+import Snackbar from '@material-ui/core/Snackbar';
+import UTButton from '../UTButton';
+import UTIcon from '../UTIcon';
+import UTLabel from '../UTLabel';
+import WithTheme from '../WithTheme';
+import { ID_CONSTANTS } from '../../constants/testIds';
+import { ACTION_BUTTON_CONFIG_MAP, COLOR_THEMES, DEFAULT_PROPS, ICON_NAME_MAP, LABEL_COLOR_MAP, POSITIONS, VARIANT_CLASS_MAP, VARIANTS } from './constants';
+import { getAnchorAndTransition } from './utils';
+import { retrieveMuiTheme } from './theme';
+import { buttonType } from './types';
+import styles from './styles.module.scss';
+const UTSnackbar = _ref => {
+  let {
+    button,
+    colorTheme = DEFAULT_PROPS.colorTheme,
+    dataTestId,
+    description,
+    icon,
+    message,
+    onClose,
+    open = DEFAULT_PROPS.open,
+    position = DEFAULT_PROPS.position,
+    secondaryButton,
+    timeDuration,
+    variant = DEFAULT_PROPS.variant,
+    withoutIcon
+  } = _ref;
+  const handleClose = (_, reason) => {
+    if (reason === 'clickaway') return;
+    onClose === null || onClose === void 0 || onClose();
+  };
+  const variantKey = "".concat(colorTheme, "-").concat(variant);
+  const variantClassKey = VARIANT_CLASS_MAP[variantKey];
+  const variantClass = styles[variantClassKey] || '';
+  const labelColorConfig = LABEL_COLOR_MAP[variantClassKey] || LABEL_COLOR_MAP.successDark;
+  const actionButtonConfig = ACTION_BUTTON_CONFIG_MAP[variantClassKey];
+  const iconName = withoutIcon ? null : icon || ICON_NAME_MAP[colorTheme];
+  const {
+    anchor,
+    transition
+  } = getAnchorAndTransition(position);
+  const testIds = {
+    close: dataTestId ? "".concat(dataTestId, ".close") : undefined,
+    description: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.DESCRIPTION, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    icon: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.ICON) : undefined,
+    label: dataTestId ? "".concat(dataTestId, ".").concat(ID_CONSTANTS.LABEL) : undefined,
+    primaryButton: dataTestId ? "".concat(dataTestId, ".button.").concat(ID_CONSTANTS.SECONDARY_ACTION) : undefined,
+    secondaryButton: dataTestId ? "".concat(dataTestId, ".secondaryButton.").concat(ID_CONSTANTS.TERTIARY_ACTION) : undefined
+  };
+  return /*#__PURE__*/React.createElement(Snackbar, {
+    action: [!!secondaryButton && /*#__PURE__*/React.createElement(UTButton, _extends({
+      key: "secondary",
+      colorTheme: actionButtonConfig.colorTheme
+    }, secondaryButton, {
+      dataTestId: testIds.secondaryButton
+    }), secondaryButton.title), !!button && /*#__PURE__*/React.createElement(UTButton, _extends({
+      key: "primary",
+      colorTheme: actionButtonConfig.colorTheme
+    }, button, {
+      dataTestId: testIds.primaryButton
+    }), button.title), /*#__PURE__*/React.createElement(UTButton, {
+      key: "close",
+      colorTheme: actionButtonConfig.closeColorTheme || actionButtonConfig.colorTheme,
+      dataTestId: testIds.close,
+      Icon: "IconX",
+      onClick: handleClose,
+      variant: actionButtonConfig.variant
+    })],
+    anchorOrigin: anchor,
+    autoHideDuration: timeDuration,
+    ContentProps: {
+      className: "".concat(styles.snackbarContent, " ").concat(variantClass),
+      classes: {
+        action: styles.action,
+        message: styles.message
+      }
+    },
+    message: /*#__PURE__*/React.createElement("div", {
+      className: styles.messageContent
+    }, iconName && /*#__PURE__*/React.createElement(UTIcon, {
+      className: styles.icon,
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.icon,
+      name: iconName,
+      shade: labelColorConfig.shade,
+      size: 20
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles.textContent
+    }, /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.label,
+      shade: labelColorConfig.shade,
+      variant: "body",
+      weight: "medium",
+      withMarkdown: true
+    }, message), description && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: labelColorConfig.colorTheme,
+      dataTestId: testIds.description,
+      shade: labelColorConfig.shade,
+      variant: "small"
+    }, description))),
+    onClose: handleClose,
+    open: open,
+    TransitionComponent: Slide,
+    TransitionProps: transition
+  });
+};
+UTSnackbar.propTypes = {
+  button: buttonType,
+  colorTheme: oneOf(Object.values(COLOR_THEMES)),
+  dataTestId: string,
+  description: string,
+  icon: string,
+  message: string,
+  onClose: func,
+  open: bool,
+  position: oneOf(Object.values(POSITIONS)),
+  secondaryButton: buttonType,
+  timeDuration: number,
+  variant: oneOf(Object.values(VARIANTS)),
+  withoutIcon: bool
+};
+export default WithTheme(undefined, retrieveMuiTheme)(UTSnackbar);

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

@@ -0,0 +1,342 @@
+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 UTButton from '../../UTButton';
+import UTSnackbar from '..';
+import { COLOR_THEMES, DEFAULT_PROPS, POSITIONS, VARIANTS } from '../constants';
+import { ARG_TYPES } from './storiesConstants';
+const SEMANTIC_COLOR_THEMES = [COLOR_THEMES.success, COLOR_THEMES.error, COLOR_THEMES.warning, COLOR_THEMES.info];
+const AllTypesDemo = () => {
+  const [snackState, setSnackState] = useState({
+    open: false
+  });
+  const show = function (colorTheme) {
+    let variant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : VARIANTS.dark;
+    return setSnackState({
+      colorTheme,
+      message: "Alerta de tipo: ".concat(colorTheme),
+      open: true,
+      variant
+    });
+  };
+  const handleClose = () => setSnackState(prev => ({
+    ...prev,
+    open: false
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '8px',
+      maxWidth: '400px'
+    }
+  }, /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '12px',
+      fontWeight: 600,
+      margin: '0 0 4px'
+    }
+  }, "Dark"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap'
+    }
+  }, SEMANTIC_COLOR_THEMES.map(colorTheme => /*#__PURE__*/React.createElement(UTButton, {
+    key: colorTheme,
+    onClick: () => show(colorTheme),
+    size: "small",
+    variant: "outlined"
+  }, colorTheme)), /*#__PURE__*/React.createElement(UTButton, {
+    onClick: () => show(COLOR_THEMES.white),
+    size: "small",
+    variant: "outlined"
+  }, "white")), /*#__PURE__*/React.createElement("p", {
+    style: {
+      fontSize: '12px',
+      fontWeight: 600,
+      margin: '8px 0 4px'
+    }
+  }, "Light"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      gap: '8px',
+      flexWrap: 'wrap'
+    }
+  }, SEMANTIC_COLOR_THEMES.map(colorTheme => /*#__PURE__*/React.createElement(UTButton, {
+    key: colorTheme,
+    onClick: () => show(colorTheme, VARIANTS.light),
+    size: "small",
+    variant: "outlined"
+  }, colorTheme, " light")), /*#__PURE__*/React.createElement(UTButton, {
+    onClick: () => show(COLOR_THEMES.white, VARIANTS.light),
+    size: "small",
+    variant: "outlined"
+  }, "white light")), /*#__PURE__*/React.createElement(UTSnackbar, _extends({}, snackState, {
+    onClose: handleClose
+  })));
+};
+export default {
+  args: {
+    message: 'Operación realizada exitosamente.',
+    open: true,
+    colorTheme: DEFAULT_PROPS.colorTheme,
+    position: DEFAULT_PROPS.position,
+    variant: DEFAULT_PROPS.variant,
+    withoutIcon: false,
+    icon: undefined,
+    timeDuration: undefined,
+    button: undefined,
+    secondaryButton: undefined,
+    description: undefined
+  },
+  argTypes: ARG_TYPES,
+  component: UTSnackbar,
+  parameters: {
+    controls: {
+      exclude: ['dataTestId', 'onClose']
+    },
+    docs: {
+      description: {
+        component: '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.'
+      }
+    }
+  },
+  title: 'Energy-UI/UTSnackbar'
+};
+export const Playground = {
+  name: 'Playground'
+};
+export const AllVariants = {
+  name: 'Todas las Variantes',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hacé clic en cada botón para ver la variante correspondiente.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/React.createElement(AllTypesDemo, null)
+};
+export const SemanticDark = {
+  args: {
+    message: 'El archivo fue guardado correctamente.',
+    open: true,
+    colorTheme: COLOR_THEMES.success,
+    variant: VARIANTS.dark
+  },
+  name: 'Semántico / Dark',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fondo con el color semántico saturado y texto blanco. Cambiá `colorTheme` en el panel de controls para ver los cuatro tipos semánticos.'
+      }
+    }
+  }
+};
+export const SemanticLight = {
+  args: {
+    message: 'El archivo fue guardado correctamente.',
+    open: true,
+    colorTheme: COLOR_THEMES.success,
+    variant: VARIANTS.light
+  },
+  name: 'Semántico / Light',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Fondo claro con texto oscuro accesible. Cambiá `colorTheme` para ver los cuatro tipos semánticos.'
+      }
+    }
+  }
+};
+export const WhiteVariants = {
+  args: {
+    message: 'Notificación sin semántica asociada.',
+    open: true,
+    colorTheme: COLOR_THEMES.white,
+    variant: VARIANTS.light
+  },
+  name: 'White',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Variante neutra sin semántica de color. Con `variant="light"` el fondo es blanco; con `variant="dark"` el fondo es oscuro.'
+      }
+    }
+  }
+};
+export const ConAccionPrimaria = {
+  args: {
+    button: {
+      title: 'Deshacer'
+    },
+    message: 'Se eliminaron 3 elementos.',
+    open: true,
+    colorTheme: COLOR_THEMES.error,
+    variant: VARIANTS.dark
+  },
+  name: 'Con Acción Primaria',
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `button` agrega un botón de texto a la derecha del mensaje. Pasar `onClick` dentro del objeto para manejar el evento.'
+      }
+    }
+  }
+};
+export const ConAcciones = {
+  args: {
+    button: {
+      title: 'Confirmar'
+    },
+    secondaryButton: {
+      title: 'Cancelar'
+    },
+    message: 'Se eliminaron 3 elementos.',
+    open: true,
+    colorTheme: COLOR_THEMES.error,
+    variant: VARIANTS.dark
+  },
+  name: 'Con Acciones Primaria y Secundaria',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `button` y `secondaryButton` se muestran dos botones de acción. Cualquier prop de `UTButton` puede pasarse dentro del objeto para personalizar su comportamiento.'
+      }
+    }
+  }
+};
+export const ConDescripcion = {
+  args: {
+    message: 'El archivo fue guardado correctamente.',
+    description: 'Los cambios se aplicarán en la próxima sesión.',
+    open: true,
+    colorTheme: COLOR_THEMES.success,
+    variant: VARIANTS.light
+  },
+  name: 'Con Descripción',
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `description` agrega un texto secundario debajo del mensaje principal con tipografía `small`.'
+      }
+    }
+  }
+};
+export const ConMarkdown = {
+  args: {
+    message: 'El archivo **reporte_enero.pdf** fue generado *exitosamente*.',
+    open: true,
+    colorTheme: COLOR_THEMES.success,
+    variant: VARIANTS.light
+  },
+  name: 'Con Markdown',
+  parameters: {
+    docs: {
+      description: {
+        story: 'El campo `message` soporta sintaxis markdown a través de `UTLabel`.'
+      }
+    }
+  }
+};
+export const TopRight = {
+  args: {
+    message: 'Esta notificación aparece en la esquina superior derecha.',
+    open: true,
+    colorTheme: COLOR_THEMES.info,
+    position: POSITIONS.topRight,
+    variant: VARIANTS.dark
+  },
+  name: 'Posición Superior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="topRight"` el snackbar aparece en la esquina superior derecha con slide desde la derecha.'
+      }
+    }
+  }
+};
+export const BottomRight = {
+  args: {
+    message: 'Esta notificación aparece en la esquina inferior derecha.',
+    open: true,
+    colorTheme: COLOR_THEMES.success,
+    position: POSITIONS.bottomRight,
+    variant: VARIANTS.dark
+  },
+  name: 'Posición Inferior Derecha',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="bottomRight"` el snackbar aparece en la esquina inferior derecha con slide desde abajo.'
+      }
+    }
+  }
+};
+export const TopLeft = {
+  args: {
+    message: 'Esta notificación aparece en la esquina superior izquierda.',
+    open: true,
+    colorTheme: COLOR_THEMES.warning,
+    position: POSITIONS.topLeft,
+    variant: VARIANTS.dark
+  },
+  name: 'Posición Superior Izquierda',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `position="topLeft"` el snackbar aparece en la esquina superior izquierda con slide desde arriba.'
+      }
+    }
+  }
+};
+export const SinIcono = {
+  args: {
+    message: 'Notificación sin ícono.',
+    open: true,
+    colorTheme: COLOR_THEMES.warning,
+    variant: VARIANTS.dark,
+    withoutIcon: true
+  },
+  name: 'Sin Ícono',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `withoutIcon: true` se oculta el ícono.'
+      }
+    }
+  }
+};
+export const Test = {
+  name: 'Test',
+  parameters: {
+    docs: {
+      description: {
+        story: 'Story para el Storybook Test Runner. Renderiza variantes simultáneas para verificar el correcto renderizado.'
+      }
+    }
+  },
+  render: () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UTSnackbar, {
+    colorTheme: COLOR_THEMES.success,
+    message: "success dark",
+    open: true
+  }), /*#__PURE__*/React.createElement(UTSnackbar, {
+    colorTheme: COLOR_THEMES.error,
+    message: "error light",
+    open: true,
+    variant: VARIANTS.light
+  }), /*#__PURE__*/React.createElement(UTSnackbar, {
+    colorTheme: COLOR_THEMES.white,
+    message: "white dark",
+    open: true,
+    variant: VARIANTS.dark
+  }), /*#__PURE__*/React.createElement(UTSnackbar, {
+    button: {
+      title: 'Acción'
+    },
+    colorTheme: COLOR_THEMES.info,
+    description: "Texto secundario de descripci\xF3n",
+    message: "Con descripci\xF3n",
+    open: true
+  }))
+};

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

@@ -0,0 +1,163 @@
+import { joinArgTypes } from 'stories/utils';
+import { COLOR_THEMES, POSITIONS, VARIANTS } from '../constants';
+export const 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(COLOR_THEMES),
+    table: {
+      defaultValue: {
+        summary: COLOR_THEMES.success
+      },
+      type: {
+        summary: joinArgTypes(Object.values(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'
+      }
+    }
+  },
+  position: {
+    control: 'select',
+    description: 'Posición del snackbar en la pantalla.',
+    options: Object.values(POSITIONS),
+    table: {
+      defaultValue: {
+        summary: POSITIONS.bottomLeft
+      },
+      type: {
+        summary: joinArgTypes(Object.values(POSITIONS))
+      }
+    }
+  },
+  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(VARIANTS),
+    table: {
+      defaultValue: {
+        summary: VARIANTS.dark
+      },
+      type: {
+        summary: joinArgTypes(Object.values(VARIANTS))
+      }
+    }
+  },
+  withoutIcon: {
+    control: 'boolean',
+    description: 'Si es `true`, oculta el ícono.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  }
+};

package/dist/esm/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);
+}