@widergy/energy-ui 3.155.0 → 3.156.0

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

@@ -0,0 +1,249 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTitleRequired = exports.WithTitleAndError = exports.WithTitle = exports.WithRange = exports.WithHelpText = exports.TestSite = exports.Selected = exports.ReadOnlyEmpty = exports.ReadOnly = exports.Playground = exports.Focus = exports.Error = exports.Disabled = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _ = _interopRequireDefault(require("../../.."));
+var _storiesConstants = require("./storiesConstants");
+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/UTDatePicker/V1',
+  component: _.default,
+  args: {
+    version: 'V1'
+  },
+  decorators: [Story => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: 350
+    }
+  }, /*#__PURE__*/_react.default.createElement(Story, null))]
+};
+const ControlledWrapper = _ref => {
+  let {
+    error = '',
+    helpText = '',
+    initialValue = '',
+    readOnly = false,
+    ...props
+  } = _ref;
+  const [value, setValue] = (0, _react.useState)(initialValue);
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    error: error,
+    helpText: helpText,
+    onChange: setValue,
+    readOnly: readOnly,
+    value: value,
+    version: "V1"
+  }, props));
+};
+ControlledWrapper.propTypes = {
+  error: _propTypes.string,
+  helpText: _propTypes.string,
+  initialValue: _propTypes.string,
+  readOnly: _propTypes.bool
+};
+const FocusStory = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const wrapperRef = (0, _react.useRef)(null);
+  (0, _react.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.default.createElement("div", {
+    ref: wrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  }));
+};
+const TestSiteStory = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const [errorValue, setErrorValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '24px',
+      padding: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Default"), /*#__PURE__*/_react.default.createElement(_.default, {
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Selected (15/06/2024)"), /*#__PURE__*/_react.default.createElement(_.default, {
+    onChange: () => {},
+    value: "15/06/2024",
+    version: "V1"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Error"), /*#__PURE__*/_react.default.createElement(_.default, {
+    error: _storiesConstants.ERROR_MOCK,
+    onChange: setErrorValue,
+    value: errorValue,
+    version: "V1"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Error con valor"), /*#__PURE__*/_react.default.createElement(_.default, {
+    error: _storiesConstants.ERROR_MOCK,
+    onChange: () => {},
+    value: "15/06/2024",
+    version: "V1"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "ReadOnly con valor"), /*#__PURE__*/_react.default.createElement(_.default, {
+    onChange: () => {},
+    readOnly: true,
+    value: "20/03/2024",
+    version: "V1"
+  })), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: 8
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_.default, {
+    disabled: true,
+    onChange: () => {},
+    value: "",
+    version: "V1"
+  })));
+};
+const Playground = exports.Playground = {
+  render: args => /*#__PURE__*/_react.default.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: ''
+  }
+};
+const Default = exports.Default = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, null)
+};
+const Selected = exports.Selected = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    initialValue: "15/06/2024"
+  })
+};
+const Focus = exports.Focus = {
+  render: () => /*#__PURE__*/_react.default.createElement(FocusStory, null),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Hacer clic en el input para ver el estado focus con el calendario abierto.'
+      }
+    }
+  }
+};
+const Error = exports.Error = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    error: _storiesConstants.ERROR_MOCK
+  })
+};
+const ReadOnly = exports.ReadOnly = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    initialValue: "15/06/2024",
+    readOnly: true
+  })
+};
+const ReadOnlyEmpty = exports.ReadOnlyEmpty = {
+  render: () => /*#__PURE__*/_react.default.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();
+const WithRange = exports.WithRange = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    range: {
+      minDate: formatDate(addDays(today, -30)),
+      maxDate: formatDate(addDays(today, 30))
+    }
+  })
+};
+const Disabled = exports.Disabled = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    disabled: true
+  })
+};
+const WithHelpText = exports.WithHelpText = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    helpText: "Seleccion\xE1 una fecha dentro del rango permitido."
+  })
+};
+const WithTitle = exports.WithTitle = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    title: "Fecha de nacimiento"
+  })
+};
+const WithTitleRequired = exports.WithTitleRequired = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    required: true,
+    title: "Fecha de nacimiento"
+  })
+};
+const WithTitleAndError = exports.WithTitleAndError = {
+  render: () => /*#__PURE__*/_react.default.createElement(ControlledWrapper, {
+    error: _storiesConstants.ERROR_MOCK,
+    title: "Fecha de nacimiento"
+  })
+};
+const TestSite = exports.TestSite = {
+  render: () => /*#__PURE__*/_react.default.createElement(TestSiteStory, null)
+};

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ERROR_MOCK = void 0;
+const ERROR_MOCK = exports.ERROR_MOCK = 'El dato ingresado es incorrecto.';

package/dist/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/components/UTDatePicker/versions/V1/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isSelected = exports.getWeeks = exports.getFinalDate = exports.dateMatchesFormat = void 0;
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const isSelected = (date, selectedDate) => selectedDate && date.isSame(selectedDate, 'day');
+exports.isSelected = isSelected;
+const dateMatchesFormat = (date, targetFormat) => (0, _dayjs.default)(date, targetFormat).format(targetFormat) === date;
+exports.dateMatchesFormat = dateMatchesFormat;
+const getFinalDate = _ref => {
+  let {
+    date,
+    maxDate,
+    minDate
+  } = _ref;
+  const formattedDate = (0, _dayjs.default)(date);
+  if (maxDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isAfter((0, _dayjs.default)(maxDate, _constants.OUTPUT_LABEL_MASK))) return (0, _dayjs.default)(maxDate, _constants.OUTPUT_LABEL_MASK);
+  if (minDate && formattedDate !== null && formattedDate !== void 0 && formattedDate.isBefore((0, _dayjs.default)(minDate, _constants.OUTPUT_LABEL_MASK))) return (0, _dayjs.default)(minDate, _constants.OUTPUT_LABEL_MASK);
+  return formattedDate;
+};
+exports.getFinalDate = getFinalDate;
+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;
+};
+exports.getWeeks = getWeeks;

package/dist/constants/testIds.js

@@ -165,6 +165,15 @@ const TEST_IDS = exports.TEST_IDS = {
   wrapperObservation: {
     actionIcon: 'wrapperObservation.actionIcon.'
   },
+  UTDatePickerV1TestID: {
+    root: 'UTDatePickerV1.root',
+    input: 'UTDatePickerV1.input',
+    calendar: 'UTDatePickerV1.calendar',
+    calendarPrevBtn: 'UTDatePickerV1.calendarPrevBtn',
+    calendarNextBtn: 'UTDatePickerV1.calendarNextBtn',
+    calendarMonthYear: 'UTDatePickerV1.calendarMonthYear',
+    errorMessage: 'UTDatePickerV1.errorMessage'
+  },
   workflowContainer: {
     bottomNav: {
       backButton: "".concat(ID_CONSTANTS.WORKFLOW_CONTAINER, ".").concat(ID_CONSTANTS.BOTTOM_NAV, ".backButton"),

package/dist/utils/hooks/useCSSVariables/constants.js

@@ -155,6 +155,14 @@ const baseTokens = exports.baseTokens = {
     'size-overlay-2xl': 'size-21',
     'size-overlay-3xl': 'size-23',
     'size-overlay-full': 'size-full',
+    'size-input-height-sm': 'size-9',
+    'size-input-height-md': 'size-10',
+    'size-input-padding-y': 'spacing-3',
+    'size-input-padding-x': 'spacing-5',
+    'size-input-gap': 'spacing-5',
+    'size-input-radius': 'radius-100',
+    'font-input-size': 'font-size-400',
+    'size-input-icon': 'size-6',
     'radius-sm': 'radius-100',
     'radius-md': 'radius-200',
     'radius-lg': 'radius-300',
@@ -260,6 +268,14 @@ const baseTokens = exports.baseTokens = {
     'UT-status-icon-size-3xs': 'size-icon-3xs',
     'UT-status-icon-size-2xs': 'size-icon-2xs',
     'UT-status-icon-size-xs': 'size-icon-xs',
-    'UT-status-icon-size-md': 'size-icon-md'
+    'UT-status-icon-size-md': 'size-icon-md',
+    'UT-datepicker-root-gap': 'gap-sm',
+    'UT-datepicker-adornments-gap': 'gap-xs',
+    'UT-datepicker-day-padding-y': 'padding-xs',
+    'UT-datepicker-day-padding-x': 'padding-sm',
+    'UT-datepicker-calendar-gap': 'gap-lg',
+    'UT-datepicker-calendar-padding': 'padding-md',
+    'UT-datepicker-input-padding-x': 'padding-sm',
+    'UT-datepicker-input-height': 'size-control-sm'
   }
 };

package/package.json

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