@widergy/energy-ui 3.158.0 → 3.159.0

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

@@ -0,0 +1,265 @@
+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, { useRef, useState, useEffect } from 'react';
+import Popover from '@material-ui/core/Popover';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { bool, elementType, func, object, shape, string, oneOf } from 'prop-types';
+import UTBaseInputField from '../../../UTBaseInputField';
+import UTButton from '../../../UTButton';
+import UTFieldLabel from '../../../UTFieldLabel';
+import UTLabel from '../../../UTLabel';
+import UTValidation from '../../../UTValidation';
+import { COMPONENT_KEYS } from '../../../UTBaseInputField/constants';
+import { TEST_IDS } from '../../../../constants/testIds';
+import Calendar from './components/Calendar';
+import styles from './styles.module.scss';
+import { DEFAULT_PROPS, DEFAULT_PLACEHOLDER, OUTPUT_LABEL_MASK, TYPING_ERROR_MESSAGE } from './constants';
+import { dateMatchesFormat, getFinalDate } from './utils';
+dayjs.extend(customParseFormat);
+const {
+  UTDatePickerV1TestID
+} = 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 = DEFAULT_PROPS.size,
+    title,
+    value = '',
+    variant = DEFAULT_PROPS.variant
+  } = _ref;
+  const {
+    maxDate,
+    minDate
+  } = range || {};
+  const [pickedDate, setPickedDate] = useState(null);
+  const [isTyping, setIsTyping] = useState(false);
+  const [typedValue, setTypedValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const [typingError, setTypingError] = useState(false);
+  const inputContainerRef = useRef(null);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    setIsTyping(false);
+    setTypedValue('');
+    setTypingError(false);
+    if (!value && pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid()) setPickedDate(null);else if (dateMatchesFormat(value, OUTPUT_LABEL_MASK)) setPickedDate(dayjs(value, 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 && dateMatchesFormat(value, OUTPUT_LABEL_MASK)) {
+      setPickedDate(dayjs(value, OUTPUT_LABEL_MASK));
+    } else {
+      setPickedDate(null);
+    }
+  };
+  const handleDaySelect = date => {
+    const finalDate = getFinalDate({
+      date,
+      maxDate,
+      minDate
+    });
+    setPickedDate(finalDate);
+    setIsTyping(false);
+    setTypedValue('');
+    setTypingError(false);
+    if (finalDate.isValid()) onChange(finalDate.format(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 = dateMatchesFormat(formatted, OUTPUT_LABEL_MASK) && dayjs(formatted, OUTPUT_LABEL_MASK).isValid();
+      setTypingError(!isValid);
+      if (isValid) setPickedDate(dayjs(formatted, 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 (dateMatchesFormat(typedValue, OUTPUT_LABEL_MASK)) {
+      const parsed = dayjs(typedValue, OUTPUT_LABEL_MASK);
+      if (parsed.isValid()) {
+        const finalDate = getFinalDate({
+          date: parsed,
+          maxDate,
+          minDate
+        });
+        setPickedDate(finalDate);
+        onChange(finalDate.format(OUTPUT_LABEL_MASK));
+        return;
+      }
+    }
+    setPickedDate(null);
+    onChange('');
+  };
+  const displayValue = isTyping ? typedValue : pickedDate !== null && pickedDate !== void 0 && pickedDate.isValid() ? pickedDate.format(OUTPUT_LABEL_MASK) : '';
+  const hasError = !!error || typingError;
+  const hasValue = pickedDate === null || pickedDate === void 0 ? void 0 : pickedDate.isValid();
+  const displayPlaceholder = placeholder || DEFAULT_PLACEHOLDER;
+  const showLeftAlertIcon = hasError && !disabled;
+  const showClearButton = (hasValue || isTyping) && !disabled && !readOnly;
+  const showCalendarIcon = !readOnly && !disabled;
+  const errorMessage = error || (typingError ? TYPING_ERROR_MESSAGE : '');
+  const isTransparent = variant === 'picker';
+  const leftAdornments = showLeftAlertIcon ? [{
+    name: 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.createElement("div", {
+    className: styles.endAdornments
+  }, /*#__PURE__*/React.createElement(UTButton, _extends({}, showClearButton ? xIconProps : calendarIconProps, {
+    onClick: showClearButton ? handleClear : openCalendar,
+    size: "small",
+    variant: "text"
+  }))) : undefined;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.root,
+    "data-testid": UTDatePickerV1TestID.root
+  }, title && /*#__PURE__*/React.createElement(UTFieldLabel, {
+    className: classNames === null || classNames === void 0 ? void 0 : classNames.upperTitle,
+    required: required,
+    withMarkdown: true
+  }, title), /*#__PURE__*/React.createElement("div", {
+    ref: inputContainerRef
+  }, /*#__PURE__*/React.createElement(UTBaseInputField, {
+    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.createElement(UTLabel, {
+    colorTheme: "gray",
+    variant: "small",
+    withMarkdown: true
+  }, helpText), variant === 'select' && errorMessage && /*#__PURE__*/React.createElement(UTValidation, {
+    dataTestId: UTDatePickerV1TestID.errorMessage,
+    validationData: [{
+      items: [{
+        status: 'error',
+        text: errorMessage
+      }]
+    }]
+  })), /*#__PURE__*/React.createElement(Popover, _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.createElement(Calendar, {
+    maxDate: maxDate,
+    minDate: minDate,
+    onDaySelect: handleDaySelect,
+    pickedDate: pickedDate
+  })));
+};
+UTDatePicker.propTypes = {
+  classNames: object,
+  CustomIcon: elementType,
+  disabled: bool,
+  error: string,
+  helpText: string,
+  onChange: func,
+  placeholder: string,
+  popoverProps: object,
+  range: shape({
+    maxDate: string,
+    minDate: string
+  }),
+  readOnly: bool,
+  required: bool,
+  size: string,
+  title: string,
+  value: string,
+  variant: oneOf(['select', 'picker'])
+};
+export default UTDatePicker;

package/dist/esm/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} />

package/dist/esm/components/UTDatePicker/versions/V1/stories/UTDatePickerV1.stories.js

@@ -0,0 +1,241 @@
+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, { useEffect, useRef, useState } from 'react';
+import { bool, string } from 'prop-types';
+import UTDatePicker from '../../..';
+import { ERROR_MOCK } from './storiesConstants';
+export default {
+  title: 'Energy-UI/UTDatePicker/V1',
+  component: UTDatePicker,
+  args: {
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: 350
+    }
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+const ControlledWrapper = _ref => {
+  let {
+    error = '',
+    helpText = '',
+    initialValue = '',
+    readOnly = false,
+    ...props
+  } = _ref;
+  const [value, setValue] = useState(initialValue);
+  return /*#__PURE__*/React.createElement(UTDatePicker, _extends({
+    error: error,
+    helpText: helpText,
+    onChange: setValue,
+    readOnly: readOnly,
+    value: value,
+    version: "V1"
+  }, props));
+};
+ControlledWrapper.propTypes = {
+  error: string,
+  helpText: string,
+  initialValue: string,
+  readOnly: bool
+};
+const FocusStory = () => {
+  const [value, setValue] = useState('');
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    var _wrapperRef$current;
+    const input = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.querySelector('[data-testid="UTDatePickerV1.input"]');
+    if (input) input.focus();
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(UTDatePicker, {
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  }));
+};
+const TestSiteStory = () => {
+  const [value, setValue] = useState('');
+  const [errorValue, setErrorValue] = useState('');
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px',
+      padding: '16px'
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Default"), /*#__PURE__*/React.createElement(UTDatePicker, {
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Selected (15/06/2024)"), /*#__PURE__*/React.createElement(UTDatePicker, {
+    onChange: () => {},
+    value: "15/06/2024",
+    version: "V1"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Error"), /*#__PURE__*/React.createElement(UTDatePicker, {
+    error: ERROR_MOCK,
+    onChange: setErrorValue,
+    value: errorValue,
+    version: "V1"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Error con valor"), /*#__PURE__*/React.createElement(UTDatePicker, {
+    error: ERROR_MOCK,
+    onChange: () => {},
+    value: "15/06/2024",
+    version: "V1"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "ReadOnly con valor"), /*#__PURE__*/React.createElement(UTDatePicker, {
+    onChange: () => {},
+    readOnly: true,
+    value: "20/03/2024",
+    version: "V1"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Disabled"), /*#__PURE__*/React.createElement(UTDatePicker, {
+    disabled: true,
+    onChange: () => {},
+    value: "",
+    version: "V1"
+  })));
+};
+export const Playground = {
+  render: args => /*#__PURE__*/React.createElement(ControlledWrapper, args),
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['select', 'picker']
+    },
+    disabled: {
+      control: 'boolean'
+    },
+    error: {
+      control: 'text'
+    },
+    helpText: {
+      control: 'text'
+    },
+    placeholder: {
+      control: 'text'
+    },
+    readOnly: {
+      control: 'boolean'
+    },
+    required: {
+      control: 'boolean'
+    },
+    title: {
+      control: 'text'
+    }
+  },
+  args: {
+    variant: 'select',
+    disabled: false,
+    error: '',
+    helpText: '',
+    placeholder: '',
+    readOnly: false,
+    required: false,
+    title: ''
+  }
+};
+export const Default = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, null)
+};
+export const Selected = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    initialValue: "15/06/2024"
+  })
+};
+export const Focus = {
+  render: () => /*#__PURE__*/React.createElement(FocusStory, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hacer clic en el input para ver el estado focus con el calendario abierto.'
+      }
+    }
+  }
+};
+export const Error = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    error: ERROR_MOCK
+  })
+};
+export const ReadOnly = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    initialValue: "15/06/2024",
+    readOnly: true
+  })
+};
+export const ReadOnlyEmpty = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    readOnly: true
+  })
+};
+const pad = n => String(n).padStart(2, '0');
+const formatDate = d => "".concat(pad(d.getDate()), "/").concat(pad(d.getMonth() + 1), "/").concat(d.getFullYear());
+const addDays = (d, n) => {
+  const r = new Date(d);
+  r.setDate(r.getDate() + n);
+  return r;
+};
+const today = new Date();
+export const WithRange = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    range: {
+      minDate: formatDate(addDays(today, -30)),
+      maxDate: formatDate(addDays(today, 30))
+    }
+  })
+};
+export const Disabled = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    disabled: true
+  })
+};
+export const WithHelpText = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    helpText: "Seleccion\xE1 una fecha dentro del rango permitido."
+  })
+};
+export const WithTitle = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    title: "Fecha de nacimiento"
+  })
+};
+export const WithTitleRequired = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    required: true,
+    title: "Fecha de nacimiento"
+  })
+};
+export const WithTitleAndError = {
+  render: () => /*#__PURE__*/React.createElement(ControlledWrapper, {
+    error: ERROR_MOCK,
+    title: "Fecha de nacimiento"
+  })
+};
+export const TestSite = {
+  render: () => /*#__PURE__*/React.createElement(TestSiteStory, null)
+};

package/dist/esm/components/UTDatePicker/versions/V1/stories/storiesConstants.js

@@ -0,0 +1 @@
+export const ERROR_MOCK = 'El dato ingresado es incorrecto.';

package/dist/esm/components/UTDatePicker/versions/V1/styles.module.scss

@@ -0,0 +1,68 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-datepicker-root-gap);
+  position: relative;
+}
+
+.endAdornments {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  grid-gap: var(--UT-datepicker-adornments-gap);
+}
+
+.calendarContainer {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--UT-datepicker-calendar-gap);
+  padding: var(--UT-datepicker-calendar-padding);
+  width: var(--UT-datepicker-calendar-width);
+}
+
+.nav {
+  align-items: center;
+  display: flex;
+  width: 100%;
+}
+
+.navLabel {
+  flex: 1;
+  text-transform: capitalize;
+}
+
+.month {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.week {
+  display: flex;
+}
+
+.dayCell {
+  box-sizing: border-box;
+  flex: 1;
+  min-width: 0;
+  padding: var(--UT-datepicker-day-padding-y) var(--UT-datepicker-day-padding-x) !important;
+}
+
+.dayHeader {
+  color: var(--UT-datepicker-header-day-color);
+  cursor: default;
+}
+
+.otherMonthDay {
+  visibility: hidden;
+}
+
+.daySelected {
+  background-color: var(--UT-datepicker-day-selected-bg, var(--actionAccent04));
+
+  &:hover {
+    background-color: var(--UT-datepicker-day-selected-bg, var(--actionAccent04)) !important;
+  }
+}
+

package/dist/esm/components/UTDatePicker/versions/V1/utils.js

@@ -0,0 +1,30 @@
+import dayjs from 'dayjs';
+import { OUTPUT_LABEL_MASK } from './constants';
+export const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
+export const dateMatchesFormat = (date, targetFormat) => dayjs(date, targetFormat).format(targetFormat) === date;
+export const getFinalDate = _ref => {
+  let {
+    date,
+    maxDate,
+    minDate
+  } = _ref;
+  const formattedDate = dayjs(date);
+  if (maxDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isAfter(dayjs(maxDate, OUTPUT_LABEL_MASK))) return dayjs(maxDate, OUTPUT_LABEL_MASK);
+  if (minDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isBefore(dayjs(minDate, OUTPUT_LABEL_MASK))) return dayjs(minDate, OUTPUT_LABEL_MASK);
+  return formattedDate;
+};
+export const getWeeks = month => {
+  const firstDay = month.startOf('month');
+  const lastDay = month.endOf('month');
+  const startDate = firstDay.subtract(firstDay.day(), 'day');
+  const weeks = [];
+  let current = startDate;
+  do {
+    const weekStart = current;
+    weeks.push(Array.from({
+      length: 7
+    }, (_, i) => weekStart.add(i, 'day')));
+    current = current.add(7, 'day');
+  } while (current.isBefore(lastDay) || current.isSame(lastDay, 'day'));
+  return weeks;
+};