@widergy/energy-ui 3.163.0 → 3.165.0

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

@@ -0,0 +1,50 @@
+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

@@ -0,0 +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
+});

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

@@ -0,0 +1,334 @@
+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 UTTextArea from '.';
+export default {
+  title: 'Energy-UI/UTTextArea',
+  component: UTTextArea,
+  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] = useState((_args$value = args.value) !== null && _args$value !== void 0 ? _args$value : '');
+  return /*#__PURE__*/React.createElement(UTTextArea, _extends({}, args, {
+    value: value,
+    onChange: setValue
+  }));
+};
+export const Playground = {
+  render: args => /*#__PURE__*/React.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    maxLength: 200,
+    maxRows: 4,
+    version: 'V1'
+  },
+  name: 'Playground'
+};
+export const Default = {
+  args: {
+    placeholder: 'Escribí tu texto aquí...',
+    version: 'V1'
+  }
+};
+export const ConTitulo = {
+  args: {
+    title: 'Motivo de contacto',
+    placeholder: 'Describí tu consulta...',
+    version: 'V1'
+  },
+  name: 'Con título'
+};
+export const Requerido = {
+  args: {
+    title: 'Motivo de contacto',
+    placeholder: 'Este campo es obligatorio',
+    required: true,
+    version: 'V1'
+  }
+};
+export const 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'
+};
+export const Deshabilitado = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Campo deshabilitado',
+    disabled: true,
+    version: 'V1'
+  }
+};
+export const 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'
+};
+export const 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'
+};
+export const ConLimiteDeCaracteres = {
+  render: args => /*#__PURE__*/React.createElement(StatefulTextArea, args),
+  args: {
+    title: 'Descripción',
+    placeholder: 'Escribí tu texto aquí...',
+    maxLength: 100,
+    maxRows: 4,
+    version: 'V1'
+  },
+  name: 'Con límite de caracteres'
+};
+export const Pequeno = {
+  args: {
+    title: 'Comentario',
+    placeholder: 'Comentario corto...',
+    inputSize: 'small',
+    titleVariant: 'small',
+    maxLength: 80,
+    version: 'V1'
+  },
+  name: 'Pequeño'
+};
+export const MasFilas = {
+  render: args => /*#__PURE__*/React.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)'
+};
+export const V0Legado = {
+  args: {
+    title: 'Descripción',
+    placeholder: 'Versión legada V0...',
+    version: 'V0',
+    value: '',
+    onChange: () => {}
+  },
+  name: 'V0 (legado)'
+};
+export const 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'
+};