@widergy/energy-ui 3.69.7 → 3.71.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [3.71.0](https://github.com/widergy/energy-ui/compare/v3.70.0...v3.71.0) (2025-05-05)
+
+
+### Features
+
+* add hide amount ([#605](https://github.com/widergy/energy-ui/issues/605)) ([cd7a226](https://github.com/widergy/energy-ui/commit/cd7a22622e0f7b5c924f9190b2f500fb5e567747))
+
+# [3.70.0](https://github.com/widergy/energy-ui/compare/v3.69.7...v3.70.0) (2025-05-05)
+
+
+### Features
+
+* add helpText and change error to ut validations ([#607](https://github.com/widergy/energy-ui/issues/607)) ([bea2a56](https://github.com/widergy/energy-ui/commit/bea2a56b82f6fdca3ded911e2e39556fce296a98))
+
 ## [3.69.7](https://github.com/widergy/energy-ui/compare/v3.69.6...v3.69.7) (2025-04-30)
 
 

package/dist/components/UTConsumptionBar/README.MD

@@ -0,0 +1,28 @@
+# UTConsumptionBar
+
+## Description
+
+`UTConsumptionBar` is a dynamic and customizable component designed to visually represent different consumption levels within a continuous bar. It allows users to easily identify their current consumption relative to predefined thresholds, including subsidy limits or critical consumption points.
+This component is ideal for displaying energy usage, resource consumption, or similar progressive metrics in a clear and user-friendly way.
+
+## Props
+
+| Name          | Type           | Default | Description                                                                                                                                                           |
+| ------------- | -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| categoryLines | object         |         | Defines the segments or categories shown in the bar, including their labels.                                                                                          |
+| classes       | object         |         | Custom class names to apply to different elements of the `UTConsumptionBar`.                                                                                          |
+| hideAmount    | bool           |         | If `true`, hides the numeric total value (e.g., cost of consumption) displayed on the bar, while keeping the current consumption value and visual indicators visible. |
+| values        | arrayOf(shape) | false   | Array of indicators or key values to be displayed on the bar.                                                                                                         |
+|               |
+
+### Values Object
+
+The `values` prop is an array of objects, each representing an indicator:
+
+| Name     | Type   | Description                                                  |
+| -------- | ------ | ------------------------------------------------------------ |
+| position | string | Position or reference point of the indicator within the bar. |
+| subtitle | string | A subtitle providing additional context for the indicator.   |
+| title    | string | The main title describing the indicator.                     |
+| total    | number | The total value associated with this indicator.              |
+| value    | number | The current value for this indicator.                        |

package/dist/components/UTConsumptionBar/components/ConsumptionBarIndicator/index.js

@@ -16,7 +16,8 @@ const ConsumptionBarIndicator = _ref => {
     value,
     unit = 'kWh',
     total,
-    classes
+    classes,
+    hideAmount
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.indicator,
@@ -31,7 +32,7 @@ const ConsumptionBarIndicator = _ref => {
     className: _stylesModule.default.alignCenter,
     colorTheme: "information",
     weight: "bold"
-  }, "".concat(Math.round(value), " ").concat(unit)), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+  }, "".concat(Math.round(value), " ").concat(unit)), !hideAmount && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
     className: _stylesModule.default.lightGray,
     colorTheme: "gray",
     weight: "bold"
@@ -39,9 +40,10 @@ const ConsumptionBarIndicator = _ref => {
 };
 ConsumptionBarIndicator.propTypes = {
   classes: _propTypes.object,
+  hideAmount: _propTypes.bool,
   left: _propTypes.number,
-  value: _propTypes.number,
+  total: _propTypes.number,
   unit: _propTypes.string,
-  total: _propTypes.number
+  value: _propTypes.number
 };
 var _default = exports.default = ConsumptionBarIndicator;

package/dist/components/UTConsumptionBar/index.js

@@ -16,10 +16,10 @@ 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 UTConsumptionBar = _ref => {
   let {
-    small,
-    values,
     categoryLines,
-    classes
+    classes,
+    hideAmount = false,
+    values
   } = _ref;
   const widthRef = (0, _react.useRef)();
   const [showLabel, setShowLabel] = (0, _react.useState)(true);
@@ -92,9 +92,9 @@ const UTConsumptionBar = _ref => {
   })), categoryLines.rates.map(renderCategoryLines), downIndicators.map(indicator => /*#__PURE__*/_react.default.createElement(_ConsumptionBarIndicator.default, {
     classes: classes,
     className: _stylesModule.default.indicator,
+    hideAmount: hideAmount,
     key: indicator.title,
     left: getIndicatorPosition(indicator.value),
-    small: small,
     total: indicator.total,
     unit: indicator.title,
     value: indicator.value
@@ -105,7 +105,7 @@ const UTConsumptionBar = _ref => {
 UTConsumptionBar.propTypes = {
   categoryLines: _propTypes.object,
   classes: _propTypes.object,
-  small: _propTypes.bool,
+  hideAmount: _propTypes.bool,
   values: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
     position: _propTypes.string,
     subtitle: _propTypes.string,

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

@@ -77,7 +77,7 @@
   background-color: $gray-3;
   height: 23px;
   min-width: 26px;
-  width: 26px;
+  width: 15%;
 }
 
 .colorizedLine {

package/dist/components/UTDatePicker/index.js

@@ -12,17 +12,20 @@ var _dayjs2 = _interopRequireDefault(require("dayjs"));
 var _es = _interopRequireDefault(require("dayjs/locale/es"));
 var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
 var _form = require("@widergy/web-utils/lib/form");
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
 var _UTLabel = _interopRequireDefault(require("../UTLabel"));
 var _UTFieldLabel = _interopRequireDefault(require("../UTFieldLabel"));
 var _WithTheme = _interopRequireDefault(require("../WithTheme"));
 var _buttonTypes = require("../../types/buttonTypes");
 var _formTypes = require("../../types/formTypes");
 var _classesUtils = require("../../utils/classesUtils");
+var _UTValidation = _interopRequireDefault(require("../UTValidation"));
+var _utils = require("../UTValidation/utils");
 var _Day = _interopRequireDefault(require("./components/Day"));
 var _theme = require("./theme");
 var _types = require("./types");
 var _constants = require("./constants");
-var _utils = require("./utils");
+var _utils2 = require("./utils");
 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); }
@@ -65,6 +68,7 @@ const UTDatePicker = _ref => {
     disableToolbar = true,
     disabled,
     field,
+    helpText,
     iconAnchor,
     input,
     inputProps,
@@ -83,18 +87,18 @@ const UTDatePicker = _ref => {
   } = _ref;
   const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
   const configMask = (field === null || field === void 0 || (_field$configuration = field.configuration) === null || _field$configuration === void 0 ? void 0 : _field$configuration.date_mask) || _constants.OUTPUT_LABEL_MASK;
-  const onlyPastMonth = ((_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
-  const avoidFutureDates = ((_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
+  const onlyPastMonth = (field === null || field === void 0 || (_field$configuration2 = field.configuration) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.customDateValidations) === null || _field$configuration2 === void 0 || (_field$configuration2 = _field$configuration2.onlyPastMonth) === null || _field$configuration2 === void 0 ? void 0 : _field$configuration2.active) || false;
+  const avoidFutureDates = (field === null || field === void 0 || (_field$configuration3 = field.configuration) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.customDateValidations) === null || _field$configuration3 === void 0 || (_field$configuration3 = _field$configuration3.avoidFutureDates) === null || _field$configuration3 === void 0 ? void 0 : _field$configuration3.active) || false;
   const {
     minDate,
     maxDate
-  } = (onlyPastMonth ? (0, _utils.getPastMonthDates)() : avoidFutureDates ? (0, _utils.getMaxDate)() : range) || {};
+  } = (onlyPastMonth ? (0, _utils2.getPastMonthDates)() : avoidFutureDates ? (0, _utils2.getMaxDate)() : range) || {};
   const [pickedDate, setPickedDate] = (0, _react.useState)(null);
   const [internalError, setInternalError] = (0, _react.useState)(null);
   const handleChange = date => {
     setPickedDate(date);
     const newValue = (0, _dayjs2.default)(date, _constants.OUTPUT_LABEL_MASK, true);
-    if ((0, _utils.isValidDate)({
+    if ((0, _utils2.isValidDate)({
       avoidFutureDates,
       newValue,
       onlyPastMonth,
@@ -102,7 +106,7 @@ const UTDatePicker = _ref => {
     })) input.onChange(newValue.format(configMask));else input.onChange('');
   };
   (0, _react.useEffect)(() => {
-    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
+    if (!input.value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils2.dateMatchesFormat)(input.value, configMask)) setPickedDate((0, _dayjs2.default)(input.value, configMask));
   }, [input.value]);
   const renderDay = (date, _, dayInCurrentMonth) => /*#__PURE__*/_react.default.createElement(_Day.default, {
     classes: classes,
@@ -131,11 +135,13 @@ const UTDatePicker = _ref => {
     value: pickedDate,
     label: inputVariant === 'standard' && (field === null || field === void 0 ? void 0 : field.title),
     error: (0, _form.shouldShowErrors)(meta),
-    helperText: errorMessage ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
-      className: classes.errorLabel,
-      colorTheme: "error",
-      variant: "small"
-    }, errorMessage) : undefined,
+    helperText: /*#__PURE__*/_react.default.createElement(_react.Fragment, null, helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+      colorTheme: "gray",
+      variant: "small",
+      withMarkdown: true
+    }, helpText), !(0, _isEmpty.default)(errorMessage) && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+      validationData: (0, _utils.formatErrorToValidation)(errorMessage)
+    })),
     onError: handleError,
     onAccept: handleRemoveError,
     disableToolbar: disableToolbar,
@@ -180,6 +186,7 @@ UTDatePicker.propTypes = {
   disableToolbar: _propTypes.bool,
   disabled: _propTypes.bool,
   field: _formTypes.fieldType,
+  helpText: _propTypes.string,
   iconAnchor: _propTypes.bool,
   input: _formTypes.inputPropTypes.isRequired,
   inputFormat: _propTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.69.7",
+  "version": "3.71.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",