@widergy/energy-ui 3.155.0 → 3.156.0

package/dist/components/UTDatePicker/versions/V1/components/Calendar/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/es");
+var _propTypes = require("prop-types");
+var _testIds = require("../../../../../../constants/testIds");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _UTLabel = _interopRequireDefault(require("../../../../../UTLabel"));
+var _Day = _interopRequireDefault(require("../Day"));
+var _constants = require("../../constants");
+var _stylesModule = _interopRequireDefault(require("../../styles.module.scss"));
+var _utils = 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); }
+const {
+  UTDatePickerV1TestID
+} = _testIds.TEST_IDS;
+const Calendar = _ref => {
+  let {
+    maxDate,
+    minDate,
+    onDaySelect,
+    pickedDate
+  } = _ref;
+  const [currentMonth, setCurrentMonth] = (0, _react.useState)(pickedDate || (0, _dayjs.default)());
+  (0, _react.useEffect)(() => {
+    if (pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setCurrentMonth(pickedDate);
+  }, [pickedDate]);
+  const weeks = (0, _utils.getWeeks)(currentMonth);
+  const handlePrevMonth = () => setCurrentMonth(prev => prev.subtract(1, 'month'));
+  const handleNextMonth = () => setCurrentMonth(prev => prev.add(1, 'month'));
+  const isDisabled = date => {
+    if (minDate && date.isBefore((0, _dayjs.default)(minDate, _constants.OUTPUT_LABEL_MASK), 'day')) return true;
+    if (maxDate && date.isAfter((0, _dayjs.default)(maxDate, _constants.OUTPUT_LABEL_MASK), 'day')) return true;
+    return false;
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.calendarContainer,
+    "data-testid": UTDatePickerV1TestID.calendar
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.nav
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarPrevBtn,
+    Icon: "IconChevronLeft",
+    onClick: handlePrevMonth,
+    size: "small",
+    variant: "text"
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    align: "center",
+    className: _stylesModule.default.navLabel,
+    dataTestId: UTDatePickerV1TestID.calendarMonthYear,
+    variant: "body",
+    weight: "medium"
+  }, currentMonth.locale('es').format(_constants.MONTH_YEAR_FORMAT)), /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    colorTheme: "secondary",
+    dataTestId: UTDatePickerV1TestID.calendarNextBtn,
+    Icon: "IconChevronRight",
+    onClick: handleNextMonth,
+    size: "small",
+    variant: "text"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.month
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.week
+  }, _constants.WEEKDAYS_LABELS.map(label => /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: "".concat(_stylesModule.default.dayCell, " ").concat(_stylesModule.default.dayHeader),
+    key: label,
+    variant: "body",
+    weight: "medium"
+  }, label))), weeks.map(week => /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.week,
+    key: week[0].format('YYYY-MM-DD')
+  }, week.map(date => {
+    const dayInCurrentMonth = date.month() === currentMonth.month();
+    return /*#__PURE__*/_react.default.createElement(_Day.default, {
+      date: date,
+      dayInCurrentMonth: dayInCurrentMonth,
+      isDisabled: isDisabled(date),
+      key: date.format('YYYY-MM-DD'),
+      onClick: onDaySelect,
+      pickedDate: pickedDate
+    });
+  })))));
+};
+Calendar.propTypes = {
+  maxDate: _propTypes.object,
+  minDate: _propTypes.object,
+  onDaySelect: _propTypes.func,
+  pickedDate: _propTypes.object
+};
+var _default = exports.default = Calendar;

package/dist/components/UTDatePicker/versions/V1/components/Day/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _propTypes = require("prop-types");
+var _UTButton = _interopRequireDefault(require("../../../../../UTButton"));
+var _utils = require("../../utils");
+var _constants = require("../../constants");
+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 Day = _ref => {
+  let {
+    date,
+    dayInCurrentMonth,
+    isDisabled,
+    onClick,
+    pickedDate
+  } = _ref;
+  const selected = (0, _utils.isSelected)(date, pickedDate);
+  const rootClass = [_stylesModule.default.dayCell, selected && _stylesModule.default.daySelected, !dayInCurrentMonth && _stylesModule.default.otherMonthDay].filter(Boolean).join(' ');
+  return /*#__PURE__*/_react.default.createElement(_UTButton.default, {
+    classNames: {
+      root: rootClass
+    },
+    colorTheme: selected ? 'negative' : undefined,
+    disabled: isDisabled && dayInCurrentMonth,
+    onClick: () => {
+      if (!isDisabled) onClick(date);
+    },
+    size: "medium",
+    variant: "text"
+  }, (0, _dayjs.default)(date).format(_constants.DAY_NUMBER_FORMAT));
+};
+Day.propTypes = {
+  date: _propTypes.object,
+  dayInCurrentMonth: _propTypes.bool,
+  isDisabled: _propTypes.bool,
+  onClick: _propTypes.func,
+  pickedDate: _propTypes.object
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(Day);

package/dist/components/UTDatePicker/versions/V1/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WEEKDAYS_LABELS = exports.TYPING_ERROR_MESSAGE = exports.OUTPUT_LABEL_MASK = exports.MONTH_YEAR_FORMAT = exports.DEFAULT_PROPS = exports.DEFAULT_PLACEHOLDER = exports.DAY_NUMBER_FORMAT = void 0;
+const OUTPUT_LABEL_MASK = exports.OUTPUT_LABEL_MASK = 'DD/MM/YYYY';
+const WEEKDAYS_LABELS = exports.WEEKDAYS_LABELS = ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'];
+const MONTH_YEAR_FORMAT = exports.MONTH_YEAR_FORMAT = 'MMMM YYYY';
+const DAY_NUMBER_FORMAT = exports.DAY_NUMBER_FORMAT = 'DD';
+const DEFAULT_PLACEHOLDER = exports.DEFAULT_PLACEHOLDER = 'DD/MM/AAAA';
+const TYPING_ERROR_MESSAGE = exports.TYPING_ERROR_MESSAGE = 'Fecha inválida';
+const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
+  variant: 'select',
+  size: 'sm'
+};

package/dist/components/UTDatePicker/versions/V1/index.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Popover = _interopRequireDefault(require("@material-ui/core/Popover"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+var _propTypes = require("prop-types");
+var _UTBaseInputField = _interopRequireDefault(require("../../../UTBaseInputField"));
+var _UTButton = _interopRequireDefault(require("../../../UTButton"));
+var _UTFieldLabel = _interopRequireDefault(require("../../../UTFieldLabel"));
+var _UTLabel = _interopRequireDefault(require("../../../UTLabel"));
+var _UTValidation = _interopRequireDefault(require("../../../UTValidation"));
+var _constants = require("../../../UTBaseInputField/constants");
+var _testIds = require("../../../../constants/testIds");
+var _Calendar = _interopRequireDefault(require("./components/Calendar"));
+var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
+var _constants2 = require("./constants");
+var _utils = 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); }
+_dayjs.default.extend(_customParseFormat.default);
+const {
+  UTDatePickerV1TestID
+} = _testIds.TEST_IDS;
+const CALENDAR_PAPER_PROPS = {
+  onMouseDown: e => e.preventDefault()
+};
+const UTDatePicker = _ref => {
+  let {
+    classNames = {},
+    CustomIcon,
+    disabled,
+    error = '',
+    helpText,
+    onChange = () => {},
+    placeholder,
+    popoverProps,
+    range,
+    readOnly = false,
+    required,
+    size = _constants2.DEFAULT_PROPS.size,
+    title,
+    value = '',
+    variant = _constants2.DEFAULT_PROPS.variant
+  } = _ref;
+  const {
+    maxDate,
+    minDate
+  } = range || {};
+  const [pickedDate, setPickedDate] = (0, _react.useState)(null);
+  const [isTyping, setIsTyping] = (0, _react.useState)(false);
+  const [typedValue, setTypedValue] = (0, _react.useState)('');
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [typingError, setTypingError] = (0, _react.useState)(false);
+  const inputContainerRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    setIsTyping(false);
+    setTypedValue('');
+    setTypingError(false);
+    if (!value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if ((0, _utils.dateMatchesFormat)(value, _constants2.OUTPUT_LABEL_MASK)) setPickedDate((0, _dayjs.default)(value, _constants2.OUTPUT_LABEL_MASK));else setPickedDate(null);
+  }, [value]);
+  const autoFormatDate = val => {
+    const digits = val.replace(/\D/g, '').slice(0, 8);
+    if (digits.length <= 2) return digits;
+    if (digits.length <= 4) return "".concat(digits.slice(0, 2), "/").concat(digits.slice(2));
+    return "".concat(digits.slice(0, 2), "/").concat(digits.slice(2, 4), "/").concat(digits.slice(4));
+  };
+  const openCalendar = () => {
+    var _inputRef$current;
+    if (disabled || readOnly) return;
+    setIsOpen(true);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+    setTypingError(false);
+    if (!isTyping) return;
+    setIsTyping(false);
+    setTypedValue('');
+    if (value && (0, _utils.dateMatchesFormat)(value, _constants2.OUTPUT_LABEL_MASK)) {
+      setPickedDate((0, _dayjs.default)(value, _constants2.OUTPUT_LABEL_MASK));
+    } else {
+      setPickedDate(null);
+    }
+  };
+  const handleDaySelect = date => {
+    const finalDate = (0, _utils.getFinalDate)({
+      date,
+      maxDate,
+      minDate
+    });
+    setPickedDate(finalDate);
+    setIsTyping(false);
+    setTypedValue('');
+    setTypingError(false);
+    if (finalDate.isValid()) onChange(finalDate.format(_constants2.OUTPUT_LABEL_MASK));else onChange('');
+    setIsOpen(false);
+  };
+  const handleClear = e => {
+    e.stopPropagation();
+    setPickedDate(null);
+    setIsTyping(false);
+    setTypedValue('');
+    setTypingError(false);
+    onChange('');
+  };
+  const handleTextChange = e => {
+    var _e$nativeEvent$data, _e$nativeEvent;
+    const raw = isTyping ? e.target.value : (_e$nativeEvent$data = (_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.data) !== null && _e$nativeEvent$data !== void 0 ? _e$nativeEvent$data : '';
+    const formatted = autoFormatDate(raw);
+    setTypedValue(formatted);
+    setIsTyping(true);
+    const allDigitsEntered = formatted.replace(/\D/g, '').length === 8;
+    if (allDigitsEntered) {
+      const isValid = (0, _utils.dateMatchesFormat)(formatted, _constants2.OUTPUT_LABEL_MASK) && (0, _dayjs.default)(formatted, _constants2.OUTPUT_LABEL_MASK).isValid();
+      setTypingError(!isValid);
+      if (isValid) setPickedDate((0, _dayjs.default)(formatted, _constants2.OUTPUT_LABEL_MASK));
+    } else {
+      setTypingError(false);
+    }
+  };
+  const handleTextBlur = e => {
+    var _inputContainerRef$cu;
+    if ((_inputContainerRef$cu = inputContainerRef.current) !== null && _inputContainerRef$cu !== void 0 && _inputContainerRef$cu.contains(e.relatedTarget)) return;
+    setIsOpen(false);
+    setTypingError(false);
+    if (!isTyping) return;
+    setIsTyping(false);
+    setTypedValue('');
+    if (!typedValue) {
+      setPickedDate(null);
+      onChange('');
+      return;
+    }
+    if ((0, _utils.dateMatchesFormat)(typedValue, _constants2.OUTPUT_LABEL_MASK)) {
+      const parsed = (0, _dayjs.default)(typedValue, _constants2.OUTPUT_LABEL_MASK);
+      if (parsed.isValid()) {
+        const finalDate = (0, _utils.getFinalDate)({
+          date: parsed,
+          maxDate,
+          minDate
+        });
+        setPickedDate(finalDate);
+        onChange(finalDate.format(_constants2.OUTPUT_LABEL_MASK));
+        return;
+      }
+    }
+    setPickedDate(null);
+    onChange('');
+  };
+  const displayValue = isTyping ? typedValue : pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid() ? pickedDate.format(_constants2.OUTPUT_LABEL_MASK) : '';
+  const hasError = !!error || typingError;
+  const hasValue = pickedDate === null || pickedDate === void 0 ? void 0 : pickedDate.isValid();
+  const displayPlaceholder = placeholder || _constants2.DEFAULT_PLACEHOLDER;
+  const showLeftAlertIcon = hasError && !disabled;
+  const showClearButton = (hasValue || isTyping) && !disabled && !readOnly;
+  const showCalendarIcon = !readOnly && !disabled;
+  const errorMessage = error || (typingError ? _constants2.TYPING_ERROR_MESSAGE : '');
+  const isTransparent = variant === 'picker';
+  const leftAdornments = showLeftAlertIcon ? [{
+    name: _constants.COMPONENT_KEYS.ICON,
+    props: {
+      showOnlyOnError: true
+    }
+  }] : [];
+  const xIconProps = {
+    colorTheme: 'dark',
+    Icon: 'IconX'
+  };
+  const calendarIconProps = {
+    colorTheme: hasError ? 'error' : isOpen ? 'primary' : 'gray',
+    Icon: CustomIcon || 'IconCalendarEvent'
+  };
+  const endAdornment = showCalendarIcon ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.endAdornments
+  }, /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({}, showClearButton ? xIconProps : calendarIconProps, {
+    onClick: showClearButton ? handleClear : openCalendar,
+    size: "small",
+    variant: "text"
+  }))) : undefined;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _stylesModule.default.root,
+    "data-testid": UTDatePickerV1TestID.root
+  }, title && /*#__PURE__*/_react.default.createElement(_UTFieldLabel.default, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.upperTitle,
+    required: required,
+    withMarkdown: true
+  }, title), /*#__PURE__*/_react.default.createElement("div", {
+    ref: inputContainerRef
+  }, /*#__PURE__*/_react.default.createElement(_UTBaseInputField.default, {
+    alwaysShowPlaceholder: true,
+    classNames: classNames,
+    dataTestId: UTDatePickerV1TestID.input,
+    inputRef: inputRef,
+    disabled: disabled,
+    error: hasError,
+    readOnly: readOnly,
+    inputSize: size === 'sm' ? 'small' : undefined,
+    variant: isTransparent ? 'transparent' : undefined,
+    leftAdornments: leftAdornments,
+    maxLength: 10,
+    muiProps: {
+      InputProps: {
+        endAdornment
+      },
+      onChange: handleTextChange
+    },
+    onBlur: handleTextBlur,
+    onFocus: openCalendar,
+    placeholder: displayPlaceholder,
+    value: displayValue
+  })), helpText && /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    colorTheme: "gray",
+    variant: "small",
+    withMarkdown: true
+  }, helpText), variant === 'select' && errorMessage && /*#__PURE__*/_react.default.createElement(_UTValidation.default, {
+    dataTestId: UTDatePickerV1TestID.errorMessage,
+    validationData: [{
+      items: [{
+        status: 'error',
+        text: errorMessage
+      }]
+    }]
+  })), /*#__PURE__*/_react.default.createElement(_Popover.default, _extends({
+    anchorEl: inputContainerRef.current,
+    anchorOrigin: {
+      horizontal: 'left',
+      vertical: 'bottom'
+    },
+    disableAutoFocus: true,
+    disableEnforceFocus: true,
+    disableRestoreFocus: true,
+    onClose: handleClose,
+    open: isOpen,
+    PaperProps: CALENDAR_PAPER_PROPS,
+    transformOrigin: {
+      horizontal: 'left',
+      vertical: 'top'
+    }
+  }, popoverProps), /*#__PURE__*/_react.default.createElement(_Calendar.default, {
+    maxDate: maxDate,
+    minDate: minDate,
+    onDaySelect: handleDaySelect,
+    pickedDate: pickedDate
+  })));
+};
+UTDatePicker.propTypes = {
+  classNames: _propTypes.object,
+  CustomIcon: _propTypes.elementType,
+  disabled: _propTypes.bool,
+  error: _propTypes.string,
+  helpText: _propTypes.string,
+  onChange: _propTypes.func,
+  placeholder: _propTypes.string,
+  popoverProps: _propTypes.object,
+  range: (0, _propTypes.shape)({
+    maxDate: _propTypes.string,
+    minDate: _propTypes.string
+  }),
+  readOnly: _propTypes.bool,
+  required: _propTypes.bool,
+  size: _propTypes.string,
+  title: _propTypes.string,
+  value: _propTypes.string,
+  variant: (0, _propTypes.oneOf)(['select', 'picker'])
+};
+var _default = exports.default = UTDatePicker;

package/dist/components/UTDatePicker/versions/V1/stories/UTDatePickerV1.mdx

@@ -0,0 +1,24 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as UTDatePickerV1Stories from './UTDatePickerV1.stories';
+
+<Meta of={UTDatePickerV1Stories} />
+
+# UTDatePicker V1
+
+Selector de fecha con input custom y calendario popup. Implementa 5 estados visuales: **default**, **selected**, **focus**, **error** y **readOnly**.
+
+## Estados visuales
+
+<Canvas of={UTDatePickerV1Stories.Default} />
+<Canvas of={UTDatePickerV1Stories.Selected} />
+<Canvas of={UTDatePickerV1Stories.Error} />
+<Canvas of={UTDatePickerV1Stories.ReadOnly} />
+<Canvas of={UTDatePickerV1Stories.Disabled} />
+
+## Con rango de fechas
+
+<Canvas of={UTDatePickerV1Stories.WithRange} />
+
+## Con texto de ayuda
+
+<Canvas of={UTDatePickerV1Stories.WithHelpText} />