@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +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:!1,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:!1,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"}}}};
+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/theme.js

@@ -1 +1,50 @@
-import{createTheme}from"@material-ui/core/styles";export const retrieveMuiTheme=theme=>{var _theme$Fonts;return createTheme({typography:{fontFamily:null==theme||null===(_theme$Fonts=theme.Fonts)||void 0===_theme$Fonts?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}}}}})};
+import { createTheme } from '@material-ui/core/styles';
+export const retrieveMuiTheme = theme => {
+  var _theme$Fonts;
+  return 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
+          }
+        }
+      }
+    }
+  });
+};

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

@@ -1 +1,14 @@
-import{bool,func,node,oneOfType,shape,string}from"prop-types";export const buttonType=shape({colorTheme:string,dataTestId:string,disabled:bool,Icon:oneOfType([string,func]),iconPlacement:string,loading:bool,onClick:func,size:string,title:node,type:string,variant:string});
+import { bool, func, node, oneOfType, shape, string } from 'prop-types';
+export const buttonType = shape({
+  colorTheme: string,
+  dataTestId: string,
+  disabled: bool,
+  Icon: oneOfType([string, func]),
+  iconPlacement: string,
+  loading: bool,
+  onClick: func,
+  size: string,
+  title: node,
+  type: string,
+  variant: string
+});

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

@@ -1 +1,46 @@
-import{POSITIONS}from"./constants";const ANCHOR_TRANSITION_MAP={[POSITIONS.bottomLeft]:{anchor:{horizontal:"left",vertical:"bottom"},transition:{direction:"up"}},[POSITIONS.bottomRight]:{anchor:{horizontal:"right",vertical:"bottom"},transition:{direction:"up"}},[POSITIONS.topLeft]:{anchor:{horizontal:"left",vertical:"top"},transition:{direction:"down"}},[POSITIONS.topRight]:{anchor:{horizontal:"right",vertical:"top"},transition:{direction:"left"}}};export const getAnchorAndTransition=position=>ANCHOR_TRANSITION_MAP[position]||ANCHOR_TRANSITION_MAP[POSITIONS.bottomLeft];
+import { POSITIONS } from './constants';
+const ANCHOR_TRANSITION_MAP = {
+  [POSITIONS.bottomLeft]: {
+    anchor: {
+      horizontal: 'left',
+      vertical: 'bottom'
+    },
+    transition: {
+      direction: 'up'
+    }
+  },
+  [POSITIONS.bottomRight]: {
+    anchor: {
+      horizontal: 'right',
+      vertical: 'bottom'
+    },
+    transition: {
+      direction: 'up'
+    }
+  },
+  [POSITIONS.topLeft]: {
+    anchor: {
+      horizontal: 'left',
+      vertical: 'top'
+    },
+    transition: {
+      direction: 'down'
+    }
+  },
+  [POSITIONS.topRight]: {
+    anchor: {
+      horizontal: 'right',
+      vertical: 'top'
+    },
+    transition: {
+      direction: 'left'
+    }
+  }
+};
+
+/**
+ * Devuelve anchorOrigin y TransitionProps para el Snackbar según la posición indicada.
+ * @param {string} position - Posición del snackbar (bottomLeft, bottomRight, topLeft, topRight).
+ * @returns {{ anchor: { horizontal: string, vertical: string }, transition: { direction: string } }}
+ */
+export const getAnchorAndTransition = position => ANCHOR_TRANSITION_MAP[position] || ANCHOR_TRANSITION_MAP[POSITIONS.bottomLeft];