@widergy/energy-ui 3.100.2 → 3.101.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.101.0](https://github.com/widergy/energy-ui/compare/v3.100.3...v3.101.0) (2025-08-26)
+
+
+### Features
+
+* [CPE-10] adds UTSignature component ([#670](https://github.com/widergy/energy-ui/issues/670)) ([b6d8d09](https://github.com/widergy/energy-ui/commit/b6d8d097db47dc0c5486579fa157e5f945377575))
+
+## [3.100.3](https://github.com/widergy/energy-ui/compare/v3.100.2...v3.100.3) (2025-08-25)
+
+
+### Bug Fixes
+
+* [SFPE-405] add title tooltip ([#675](https://github.com/widergy/energy-ui/issues/675)) ([42c9cc5](https://github.com/widergy/energy-ui/commit/42c9cc5afe5fd8b2f39158de1a3ae78f0767463b))
+
 ## [3.100.2](https://github.com/widergy/energy-ui/compare/v3.100.1...v3.100.2) (2025-08-20)
 
 

package/dist/components/UTDataElement/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SPACING = exports.PADDING = exports.ORIENTATION = exports.ACTION_TYPE = void 0;
+exports.TOOLTIP_PROPS = exports.SPACING = exports.PADDING = exports.ORIENTATION = exports.ACTION_TYPE = void 0;
 const ORIENTATION = exports.ORIENTATION = {
   HORIZONTAL: 'horizontal',
   VERTICAL: 'vertical'
@@ -19,4 +19,8 @@ const SPACING = exports.SPACING = {
 const ACTION_TYPE = exports.ACTION_TYPE = {
   SWITCH: 'switch',
   BUTTON: 'button'
+};
+const TOOLTIP_PROPS = exports.TOOLTIP_PROPS = {
+  appendTo: () => document.body,
+  interactive: false
 };

package/dist/components/UTDataElement/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _isString = _interopRequireDefault(require("lodash/isString"));
 var _isFinite = _interopRequireDefault(require("lodash/isFinite"));
+var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
 var _UTBadge = _interopRequireDefault(require("../UTBadge"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
@@ -64,6 +65,11 @@ const UTDataElement = _ref => {
   const IconComponent = (0, _componentUtils.isUTIcon)(Icon) ? _UTIcon.default : Icon;
   const DataComponent = (0, _componentUtils.isUTLabel)(Data) ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, dataProps, Data) : Data;
   const showBadge = forceShowBadge || (0, _isString.default)(badge) && !(0, _isEmpty.default)(badge) || (0, _isFinite.default)(badge);
+  const {
+    tooltip: titleTooltip
+  } = titleProps || {};
+  const withTitleTooltip = (0, _isString.default)(titleTooltip) && !(0, _isEmpty.default)(titleTooltip);
+  const TitleWrapper = withTitleTooltip ? _UTTooltip.default : _react.Fragment;
   const contentClasses = "".concat(classes.content, " ").concat(_stylesModule.default["spacing".concat((0, _componentUtils.capitalize)(spacing))]);
   const infoClasses = "".concat(classes.info, " ").concat(orientation === _constants.ORIENTATION.VERTICAL && classes.vertical);
   const iconCollapseButtonClasses = "".concat(classes.iconCollapseButton, " ").concat(isCollapsed && classes.collapsed);
@@ -81,9 +87,12 @@ const UTDataElement = _ref => {
     className: classes.topInfo
   }, prefix && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
-  }, prefixProps), prefix), title && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
+  }, prefixProps), prefix), title && /*#__PURE__*/_react.default.createElement(TitleWrapper, withTitleTooltip ? {
+    tippyProps: _constants.TOOLTIP_PROPS,
+    content: titleTooltip
+  } : {}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
     colorTheme: "gray"
-  }, titleProps), title), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
+  }, titleProps), title))), showBadge && /*#__PURE__*/_react.default.createElement(_UTBadge.default, _extends({
     colorTheme: "accent",
     className: classes.badge
   }, badgeProps), forceShowBadge ? null : badge)), DataComponent && DataComponent), action && /*#__PURE__*/_react.default.createElement(_MainAction.default, _extends({

package/dist/components/UTSignature/UTSignature.stories.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _utils = require("stories/utils");
+var _inputs = require("../../constants/inputs");
+var _ = _interopRequireDefault(require("."));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Título que se muestra en el header del componente.',
+      table: {
+        defaultValue: {
+          summary: 'undefined'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    penColor: {
+      control: 'color',
+      description: 'Color del lápiz.',
+      table: {
+        defaultValue: {
+          summary: 'black'
+        },
+        type: {
+          summary: 'string'
+        }
+      }
+    },
+    titleVariant: {
+      control: 'select',
+      description: 'Tamaño del título.',
+      options: Object.keys(_inputs.TITLE_VARIANTS),
+      table: {
+        defaultValue: {
+          summary: 'large'
+        },
+        type: {
+          summary: (0, _utils.joinArgTypes)(Object.keys(_inputs.TITLE_VARIANTS))
+        }
+      }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Determina si el componente es requerido.',
+      table: {
+        defaultValue: {
+          summary: 'false'
+        },
+        type: {
+          summary: 'boolean'
+        }
+      }
+    },
+    width: {
+      control: 'number',
+      description: 'Ancho del componente.',
+      table: {
+        defaultValue: {
+          summary: '500'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    },
+    height: {
+      control: 'number',
+      description: 'Altura del componente.',
+      table: {
+        defaultValue: {
+          summary: '200'
+        },
+        type: {
+          summary: 'number'
+        }
+      }
+    }
+  },
+  component: _.default,
+  parameters: {
+    controls: {
+      exclude: ['actions', 'onChange', 'error', 'helpText', 'validationDataTestId', 'value', 'input']
+    },
+    docs: {
+      description: {
+        component: 'Este componente se usa para renderizar un canvas de firma.'
+      }
+    }
+  }
+};
+const Default = exports.Default = {
+  args: {
+    penColor: 'black',
+    title: 'Firma'
+  },
+  name: 'Playground'
+};

package/dist/components/UTSignature/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../UTButton"));
+var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../UTLabel"));
+var _UTValidation = _interopRequireDefault(require("../UTValidation"));
+var _buttonTypes = require("../../types/buttonTypes");
+var _inputs = require("../../constants/inputs");
+var _utils = require("../UTValidation/utils");
+var _formTypes = require("../../types/formTypes");
+var _colorsModule = _interopRequireDefault(require("../../scss/variables/colors.module.scss"));
+var _helperFunctions = require("../../utils/helperFunctions");
+var _testIds = require("../../constants/testIds");
+var _classesUtils = require("../../utils/classesUtils");
+var _WithTheme = _interopRequireDefault(require("../WithTheme"));
+var _theme = require("./theme");
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+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); }
+const {
+  signature
+} = _testIds.TEST_IDS;
+const {
+  TITLE,
+  CANVAS,
+  HELP_TEXT,
+  VALIDATION_DATA,
+  CLEAR_BUTTON
+} = _testIds.ID_CONSTANTS;
+const UTSignature = _ref => {
+  var _getCanvas3;
+  let {
+    actions: titleActions,
+    canvasBackgroundColor = _colorsModule.default.white,
+    classes: themeClasses = {},
+    classNames = {},
+    dataTestId = signature,
+    error,
+    height = 200,
+    helpText,
+    input,
+    onChange = () => {},
+    penColor = _colorsModule.default.black,
+    required,
+    title,
+    titleVariant = _inputs.TITLE_VARIANTS.large,
+    value,
+    width = 500
+  } = _ref;
+  const sigCanvasRef = (0, _react.useRef)(null);
+  const getCanvas = () => sigCanvasRef.current;
+  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [themeClasses, classNames]);
+  const currentValue = input ? input.value : value;
+  const handleChange = newValue => input ? input.onChange(newValue) : onChange(newValue);
+  const clear = () => {
+    var _getCanvas;
+    (_getCanvas = getCanvas()) === null || _getCanvas === void 0 || _getCanvas.clear();
+    handleChange('');
+  };
+  const handleEnd = () => {
+    var _getCanvas2;
+    const data = ((_getCanvas2 = getCanvas()) === null || _getCanvas2 === void 0 ? void 0 : _getCanvas2.toDataURL('image/png')) || '';
+    if (!data) {
+      handleChange('');
+      return;
+    }
+    handleChange({
+      file: (0, _helperFunctions.base64ToFile)(data, 'signature.png')
+    });
+  };
+  (0, _react.useEffect)(() => {
+    const canvas = getCanvas();
+    if (!canvas) return;
+    if (typeof currentValue === 'string' && currentValue.startsWith('data:image')) {
+      canvas.fromDataURL(currentValue);
+    }
+  }, [currentValue]);
+  const validationData = ((_getCanvas3 = getCanvas()) === null || _getCanvas3 === void 0 ? void 0 : _getCanvas3.isEmpty()) && error && (0, _utils.formatErrorToValidation)(error);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_stylesModule.default.container, " ").concat(classNames.container),
+    "data-testid": dataTestId
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    actions: titleActions,
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    required: required,
+    size: titleVariant
+  }, title), /*#__PURE__*/_react.default.createElement(_reactSignatureCanvas.default, {
+    backgroundColor: canvasBackgroundColor,
+    canvasProps: {
+      className: "".concat(_stylesModule.default.canvas, " ").concat(classNames.canvas, " ").concat(classes.canvas),
+      'data-testid': "".concat(dataTestId, ".").concat(CANVAS),
+      height,
+      tabIndex: 0,
+      width
+    },
+    onEnd: handleEnd,
+    penColor: penColor,
+    ref: sigCanvasRef
+  }), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(HELP_TEXT),
+    variant: "small"
+  }, helpText), validationData && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    dataTestId: "".concat(dataTestId, ".").concat(VALIDATION_DATA),
+    validationData: validationData
+  }), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "error",
+    dataTestId: "".concat(dataTestId, ".").concat(CLEAR_BUTTON),
+    onClick: clear,
+    variant: "text"
+  }, "Limpiar"));
+};
+UTSignature.propTypes = {
+  actions: (0, _propTypes.arrayOf)(_buttonTypes.buttonTypes),
+  canvasBackgroundColor: _propTypes.string,
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: _propTypes.object,
+  dataTestId: _propTypes.string,
+  error: _propTypes.string,
+  height: _propTypes.number,
+  helpText: _propTypes.string,
+  input: _formTypes.inputPropTypes,
+  onChange: _propTypes.func,
+  penColor: _propTypes.string,
+  required: _propTypes.bool,
+  title: _propTypes.string,
+  titleVariant: _propTypes.string,
+  value: (0, _propTypes.oneOfType)([_propTypes.string, (0, _propTypes.shape)({
+    name: _propTypes.string,
+    type: _propTypes.string
+  }), (0, _propTypes.shape)({
+    file: _propTypes.object
+  })]),
+  width: _propTypes.number
+};
+var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTSignature);

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

@@ -0,0 +1,6 @@
+.container {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

package/dist/components/UTSignature/theme.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.retrieveStyle = void 0;
+const retrieveStyle = _ref => {
+  var _theme$Palette;
+  let {
+    theme
+  } = _ref;
+  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
+  const actionTheme = actionPaletteColors.accent;
+  const grayTheme = theme.Palette.gray;
+  return {
+    canvas: {
+      borderRadius: '4px',
+      border: "1px solid ".concat(grayTheme['01']),
+      cursor: 'pointer',
+      '&:focus': {
+        border: "2px solid ".concat(actionTheme['04'])
+      },
+      '&:active': {
+        border: "2px solid ".concat(actionTheme['04'])
+      }
+    }
+  };
+};
+exports.retrieveStyle = retrieveStyle;

package/dist/constants/testIds.js

@@ -7,19 +7,24 @@ exports.TEST_IDS = exports.ID_CONSTANTS = void 0;
 const ID_CONSTANTS = exports.ID_CONSTANTS = {
   ACTIONS: 'actions',
   BOTTOM_NAV: 'bottomNav',
+  CANVAS: 'canvas',
   CELL: 'cell',
+  CLEAR_BUTTON: 'clearButton',
   CREDIT_CARD: 'creditCard',
+  DATA_CATEGORY: 'dataCategory',
+  DATA_ELEMENT: 'dataElement',
   DIALOG: 'dialog',
   HEADER: 'header',
+  HELP_TEXT: 'helpText',
   ONBOARDING: 'onboarding',
   PANEL: 'panel',
   SELECTION_COMPONENT: 'selectionComponent',
   STATUS_MESSAGE: 'statusMessage',
-  TABLE: 'table',
   TABLE_ROW: 'tableRow',
-  WORKFLOW_CONTAINER: 'workflowContainer',
-  DATA_CATEGORY: 'dataCategory',
-  DATA_ELEMENT: 'dataElement'
+  TABLE: 'table',
+  TITLE: 'title',
+  VALIDATION_DATA: 'validationData',
+  WORKFLOW_CONTAINER: 'workflowContainer'
 };
 const TEST_IDS = exports.TEST_IDS = {
   barChart: {
@@ -71,6 +76,7 @@ const TEST_IDS = exports.TEST_IDS = {
     secondaryAction: "".concat(ID_CONSTANTS.PANEL, ".secondaryAction"),
     title: "".concat(ID_CONSTANTS.PANEL, ".title")
   },
+  signature: 'signature',
   snackBar: {
     closeButton: 'snackbar.closeButton',
     label: 'snackbar.label'

package/dist/index.js

@@ -345,6 +345,12 @@ Object.defineProperty(exports, "UTSidebar", {
     return _UTSidebar.default;
   }
 });
+Object.defineProperty(exports, "UTSignature", {
+  enumerable: true,
+  get: function () {
+    return _UTSignature.default;
+  }
+});
 Object.defineProperty(exports, "UTSkeleton", {
   enumerable: true,
   get: function () {
@@ -542,6 +548,7 @@ var _UTSearchField = _interopRequireDefault(require("./components/UTSearchField"
 var _UTSelect = _interopRequireDefault(require("./components/UTSelect"));
 var _UTSelectableCard = _interopRequireDefault(require("./components/UTSelectableCard"));
 var _UTSidebar = _interopRequireDefault(require("./components/UTSidebar"));
+var _UTSignature = _interopRequireDefault(require("./components/UTSignature"));
 var _UTSkeleton = _interopRequireDefault(require("./components/UTSkeleton"));
 var _UTStatus = _interopRequireDefault(require("./components/UTStatus"));
 var _UTStatusMessage = _interopRequireDefault(require("./components/UTStatusMessage"));

package/dist/utils/helperFunctions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.throttle = void 0;
+exports.throttle = exports.base64ToFile = void 0;
 const throttle = (func, limit) => {
   let inThrottle;
   return function throttled() {
@@ -20,4 +20,19 @@ const throttle = (func, limit) => {
     }
   };
 };
-exports.throttle = throttle;
+exports.throttle = throttle;
+const base64ToFile = (base64, filename) => {
+  var _arr$0$match;
+  const arr = base64.split(',');
+  const mime = ((_arr$0$match = arr[0].match(/:(.*?);/)) === null || _arr$0$match === void 0 ? void 0 : _arr$0$match[1]) || 'image/png';
+  const bstr = atob(arr[1]);
+  const n = bstr.length;
+  const u8arr = new Uint8Array(n);
+  for (let i = 0; i < n; i += 1) {
+    u8arr[i] = bstr.charCodeAt(i);
+  }
+  return new File([u8arr], filename, {
+    type: mime
+  });
+};
+exports.base64ToFile = base64ToFile;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.100.2",
+  "version": "3.101.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",
@@ -56,6 +56,7 @@
     "react-jss": "^8.6.1",
     "react-markdown": "^8.0.7",
     "react-perfect-scrollbar": "^1.5.3",
+    "react-signature-canvas": "1.0.7",
     "react-simple-keyboard": "^3.8.28",
     "react-transition-group": "^4.2.2",
     "react-window": "^1.8.5",
@@ -113,7 +114,8 @@
     "@babel/preset-env": "^7.8.7",
     "caniuse-lite": "1.0.30001632",
     "minimatch": "3.1.2",
-    "react-error-overlay": "6.0.9"
+    "react-error-overlay": "6.0.9",
+    "react-signature-canvas": "1.0.7"
   },
   "browserslist": [
     ">0.2%",