@widergy/energy-ui 3.172.2 → 3.172.3

package/dist/components/UTBaseInputField/UTBaseInputField.stories.js

@@ -1,393 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.VarianteTransparente = exports.VarianteGris = exports.SoloLectura = exports.Playground = exports.Pequeno = exports.MultipleAdornos = exports.Multilinea = exports.Deshabilitado = exports.Default = exports.ConTooltip = exports.ConSuffix = exports.ConPrefix = exports.ConIconoIzquierdo = exports.ConIconoDerecho = exports.ConError = exports.ConContadorDeCaracteres = exports.ConAccion = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));
-var _Visibility = _interopRequireDefault(require("@material-ui/icons/Visibility"));
-var _constants = require("./constants");
-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/UTBaseInputField',
-  component: _.default,
-  args: {
-    placeholder: 'Ingresá un valor...',
-    value: ''
-  },
-  argTypes: {
-    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. Recibe el string del nuevo valor.',
-      table: {
-        type: {
-          summary: 'func'
-        }
-      }
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Deshabilita el campo.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    readOnly: {
-      control: 'boolean',
-      description: 'Campo de solo lectura. No aplica estilos de borde ni fondo.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    error: {
-      control: 'boolean',
-      description: 'Aplica los estilos de error al campo.',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool | string'
-        }
-      }
-    },
-    variant: {
-      control: 'select',
-      description: 'Variante visual. `default` tiene fondo blanco con borde, `gray` tiene fondo gris sin borde, `transparent` no tiene fondo ni borde.',
-      options: ['default', 'gray', 'transparent'],
-      table: {
-        defaultValue: {
-          summary: 'default'
-        },
-        type: {
-          summary: "'default' | 'gray' | 'transparent'"
-        }
-      }
-    },
-    inputSize: {
-      control: 'select',
-      description: 'Tamaño del campo. Afecta el padding interno.',
-      options: ['medium', 'small'],
-      table: {
-        defaultValue: {
-          summary: 'medium'
-        },
-        type: {
-          summary: "'medium' | 'small'"
-        }
-      }
-    },
-    maxLength: {
-      control: 'number',
-      description: 'Límite de caracteres.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    showCharacterCount: {
-      control: 'boolean',
-      description: 'Muestra el contador de caracteres a la izquierda (requiere `maxLength`).',
-      table: {
-        defaultValue: {
-          summary: 'false'
-        },
-        type: {
-          summary: 'bool'
-        }
-      }
-    },
-    maxRows: {
-      control: 'number',
-      description: 'Cantidad de filas. Si es mayor a 1, el campo se vuelve multilínea.',
-      table: {
-        defaultValue: {
-          summary: '1'
-        },
-        type: {
-          summary: 'number'
-        }
-      }
-    },
-    type: {
-      control: 'select',
-      description: 'Tipo de input. `numeric` filtra solo dígitos.',
-      options: ['text', 'password', 'email', 'numeric'],
-      table: {
-        defaultValue: {
-          summary: 'text'
-        },
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    leftAdornments: {
-      control: 'object',
-      description: 'Arreglo de adornos para el lado izquierdo. Cada item tiene `{ name, props }` usando los nombres de `COMPONENT_KEYS`.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'Array<{ name: string, props: object }>'
-        }
-      }
-    },
-    rightAdornments: {
-      control: 'object',
-      description: 'Arreglo de adornos para el lado derecho.',
-      table: {
-        defaultValue: {
-          summary: '[]'
-        },
-        type: {
-          summary: 'Array<{ name: string, props: object }>'
-        }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: 'UTBaseInputField es el campo de texto base del design system. Maneja adornos (íconos, prefijos, sufijos, acciones, tooltips, badges), estilos por variante y estado, y el contador de caracteres. Normalmente se usa a través de UTTextInput.'
-      }
-    }
-  }
-};
-const Stateful = 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(Stateful, args),
-  args: {
-    placeholder: 'Escribí algo...'
-  },
-  name: 'Playground'
-};
-const Default = exports.Default = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Ingresá un valor...'
-  }
-};
-const VarianteGris = exports.VarianteGris = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Variante gris',
-    variant: 'gray'
-  },
-  name: 'Variante gris'
-};
-const VarianteTransparente = exports.VarianteTransparente = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Variante transparente',
-    variant: 'transparent'
-  },
-  name: 'Variante transparente'
-};
-const ConError = exports.ConError = {
-  args: {
-    placeholder: 'Campo con error',
-    value: 'valor inválido',
-    error: true
-  },
-  name: 'Con error'
-};
-const Deshabilitado = exports.Deshabilitado = {
-  args: {
-    placeholder: 'Campo deshabilitado',
-    disabled: true
-  }
-};
-const SoloLectura = exports.SoloLectura = {
-  args: {
-    value: 'Valor de solo lectura',
-    readOnly: true
-  },
-  name: 'Solo lectura'
-};
-const Pequeno = exports.Pequeno = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Campo pequeño',
-    inputSize: 'small'
-  },
-  name: 'Pequeño'
-};
-const ConIconoIzquierdo = exports.ConIconoIzquierdo = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Buscá...',
-    leftAdornments: [{
-      name: _constants.COMPONENT_KEYS.ICON,
-      props: {
-        Icon: _Search.default
-      }
-    }]
-  },
-  name: 'Con ícono izquierdo'
-};
-const ConIconoDerecho = exports.ConIconoDerecho = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: '••••••••',
-    type: 'password',
-    rightAdornments: [{
-      name: _constants.COMPONENT_KEYS.ICON,
-      props: {
-        Icon: _Visibility.default
-      }
-    }]
-  },
-  name: 'Con ícono derecho'
-};
-const ConPrefix = exports.ConPrefix = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: '0,00',
-    leftAdornments: [{
-      name: _constants.COMPONENT_KEYS.PREFIX,
-      props: {
-        text: '$'
-      }
-    }]
-  },
-  name: 'Con prefijo'
-};
-const ConSuffix = exports.ConSuffix = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: '0',
-    rightAdornments: [{
-      name: _constants.COMPONENT_KEYS.SUFFIX,
-      props: {
-        text: 'kg'
-      }
-    }]
-  },
-  name: 'Con sufijo'
-};
-const ConTooltip = exports.ConTooltip = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'CUIT sin guiones',
-    rightAdornments: [{
-      name: _constants.COMPONENT_KEYS.TOOLTIP,
-      props: {
-        tooltip: 'Ingresá el CUIT sin guiones. Ej: 20123456789'
-      }
-    }]
-  },
-  name: 'Con tooltip'
-};
-const ConAccion = exports.ConAccion = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Ingresá un domicilio...',
-    rightAdornments: [{
-      name: _constants.COMPONENT_KEYS.ACTION,
-      props: {
-        action: {
-          title: 'Buscar',
-          variant: 'text',
-          colorTheme: 'accent',
-          size: 'small',
-          onClick: () => {}
-        }
-      }
-    }]
-  },
-  name: 'Con acción'
-};
-const ConContadorDeCaracteres = exports.ConContadorDeCaracteres = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Límite de 80 caracteres',
-    maxLength: 80,
-    showCharacterCount: true
-  },
-  name: 'Con contador de caracteres'
-};
-const MultipleAdornos = exports.MultipleAdornos = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Monto en dólares',
-    leftAdornments: [{
-      name: _constants.COMPONENT_KEYS.PREFIX,
-      props: {
-        text: 'USD'
-      }
-    }],
-    rightAdornments: [{
-      name: _constants.COMPONENT_KEYS.SUFFIX,
-      props: {
-        text: '.00'
-      }
-    }, {
-      name: _constants.COMPONENT_KEYS.TOOLTIP,
-      props: {
-        tooltip: 'Ingresá el monto en dólares estadounidenses.'
-      }
-    }]
-  },
-  name: 'Múltiples adornos'
-};
-const Multilinea = exports.Multilinea = {
-  render: args => /*#__PURE__*/_react.default.createElement(Stateful, args),
-  args: {
-    placeholder: 'Escribí aquí...',
-    maxRows: 4,
-    maxLength: 200,
-    showCharacterCount: true
-  },
-  name: 'Multilínea'
-};

package/dist/components/UTBodyPlaceholder/UTBodyPlaceholder.stories.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Playground = void 0;
-var _utils = require("stories/utils");
-var _constants = require("./constants");
-var _ = _interopRequireDefault(require("."));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  args: {
-    size: 'large',
-    subtitle: undefined,
-    title: undefined
-  },
-  argTypes: {
-    classNames: {
-      description: 'Clases personalizadas.',
-      table: {
-        defaultValue: {
-          summary: 'undefined'
-        },
-        type: {
-          summary: (0, _utils.joinArgTypes)(['icon', 'bodyPlaceholderTextContainer', 'bodyPlaceholderText', 'bodyPlaceholder'])
-        }
-      }
-    },
-    size: {
-      control: 'radio',
-      description: 'Tamaño del placeholder.',
-      options: ['large', 'small'],
-      table: {
-        defaultValue: {
-          summary: 'large'
-        },
-        type: {
-          summary: (0, _utils.joinArgTypes)(['large', 'small'])
-        }
-      }
-    },
-    subtitle: {
-      description: 'Subtítulo del placeholder.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_TEXTS.subtitle
-        }
-      }
-    },
-    title: {
-      description: 'Título del placeholder.',
-      type: 'string',
-      table: {
-        defaultValue: {
-          summary: _constants.DEFAULT_TEXTS.title
-        }
-      }
-    }
-  },
-  component: _.default,
-  parameters: {
-    controls: {
-      exclude: ['classNames']
-    },
-    docs: {
-      description: {
-        component: 'Placeholder para el body de componentes que wrappean varios tipos de contenido.'
-      }
-    }
-  },
-  title: 'Energy-UI/UTBodyPlaceholder'
-};
-const Playground = exports.Playground = {
-  name: 'Playground'
-};

package/dist/components/UTButton/README.md

@@ -1,51 +0,0 @@
-# UTButton
-
-### Description
-
-Basic button component.
-
-### Variants
-
-These variants were defined by the UX team and are:
-
-- `filled`
-- `outlined`
-- `text`
-- `semitransparent`
-
-All these variants are defined in the component theme.
-
-### Color Themes
-
-The color themes are defined by the component consumer and will vary accordingly. They define a set of variables (colors and opacities) that then combined with the variant will change how the button looks.
-The components supports an infinite amount of color themes but requires the consumer to pass at least a `primary` one that works as a default.
-
-### Icons
-
-The button can include up to two icons (left and right), each of which can be either a Tabler Icons name or a custom SVG React component.
-
-- **`LeftIcon`:** rendered at the start of the button content.
-- **`RightIcon`:** rendered at the end of the button content.
-- Additional props for each icon can be passed via `leftIconProps` and `rightIconProps`.
-
-### Props
-
-| Name                 | Type                                                  | Default   | Description                                                                    |
-| -------------------- | ----------------------------------------------------- | --------- | ------------------------------------------------------------------------------ |
-| variant              | 'filled' \| 'outlined' \| 'text' \| 'semitransparent' | 'filled'  | The variant to use.                                                            |
-| colorTheme           | string                                                | 'primary' | The color theme to use.                                                        |
-| size                 | 'small' \| 'medium' \| 'large'                        | 'medium'  | The size of the component.                                                     |
-| onClick              | func                                                  |           | Callback fired when the user clicks the component.                             |
-| loading              | bool                                                  | false     | If `true` a spinner is shown over the component.                               |
-| disabled             | bool                                                  | false     | If `true` the button is unclickable.                                           |
-| LeftIcon             | node \| string                                        |           | Icon rendered at the start of the button.                                      |
-| leftIconProps        | object                                                |           | Additional props to apply to the left icon.                                    |
-| RightIcon            | node \| string                                        |           | Icon rendered at the end of the button.                                        |
-| rightIconProps       | object                                                |           | Additional props to apply to the right icon.                                   |
-| hideTextOnResponsive | bool                                                  | false     | If `true` and an icon is present, the button text is hidden on mobile.         |
-| count                | number                                                |           | Number to display in a badge inside the button.                                |
-| type                 | string                                                |           | HTML type attribute.                                                           |
-| classNames           | object                                                |           | Overrides the default button theme.                                            |
-| children             | node                                                  |           | The component contents.                                                        |
-| Icon                 | node \| string                                        |           | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |
-| iconPlacement        | 'left' \| 'right'                                     | 'left'    | **Deprecated.** Use `LeftIcon` or `RightIcon` instead.                        |

package/dist/components/UTButton/stories/UTButton.stories.js

@@ -1,41 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Playground = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton',
-  component: _.default,
-  args: {
-    children: undefined,
-    classNames: undefined,
-    count: undefined,
-    LeftIcon: undefined,
-    leftIconProps: undefined,
-    onClick: undefined,
-    RightIcon: undefined,
-    rightIconProps: undefined,
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS,
-    options: {
-      storySort: {
-        method: 'alphabetical'
-      }
-    }
-  }
-};
-const Playground = exports.Playground = {
-  args: {
-    children: 'Button'
-  },
-  name: 'Playground'
-};

package/dist/components/UTButton/stories/UTButtonAdornments.stories.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RightIconOnly = exports.LeftIconOnly = exports.IconOnly = exports.CountOnly = exports.CountAndIcon = exports.BothIcons = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/Adornments',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const LeftIconOnly = exports.LeftIconOnly = {
-  args: {
-    children: 'Left Icon',
-    LeftIcon: 'IconArrowLeft'
-  }
-};
-const RightIconOnly = exports.RightIconOnly = {
-  args: {
-    children: 'Right Icon',
-    RightIcon: 'IconArrowRight'
-  }
-};
-const BothIcons = exports.BothIcons = {
-  args: {
-    children: 'Descargas',
-    LeftIcon: 'IconDownload',
-    RightIcon: 'IconChevronDown'
-  }
-};
-const IconOnly = exports.IconOnly = {
-  args: {
-    LeftIcon: 'IconSearch'
-  }
-};
-const CountAndIcon = exports.CountAndIcon = {
-  args: {
-    count: 7,
-    LeftIcon: 'IconBell'
-  }
-};
-const CountOnly = exports.CountOnly = {
-  args: {
-    count: 5
-  }
-};

package/dist/components/UTButton/stories/UTButtonColorThemes.stories.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Success = exports.Secondary = exports.Negative = exports.Gray = exports.Error = void 0;
-var _ = _interopRequireDefault(require(".."));
-var _storiesConstants = require("./storiesConstants");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var _default = exports.default = {
-  title: 'Energy-UI/UTButton/Color Themes',
-  component: _.default,
-  args: {
-    ..._storiesConstants.COMMON_ARGS
-  },
-  argTypes: {
-    ..._storiesConstants.COMMON_ARG_TYPES
-  },
-  parameters: {
-    ..._storiesConstants.COMMON_PARAMETERS
-  }
-};
-const Error = exports.Error = {
-  args: {
-    children: 'Error Color Theme',
-    colorTheme: 'error'
-  }
-};
-const Gray = exports.Gray = {
-  args: {
-    children: 'Gray Color Theme',
-    colorTheme: 'gray'
-  }
-};
-const Negative = exports.Negative = {
-  args: {
-    children: 'Negative Color Theme',
-    colorTheme: 'negative'
-  }
-};
-const Secondary = exports.Secondary = {
-  args: {
-    children: 'Secondary Color Theme',
-    colorTheme: 'secondary'
-  }
-};
-const Success = exports.Success = {
-  args: {
-    children: 'Success Color Theme',
-    colorTheme: 'success'
-  }
-};