@gympass/yoga 7.51.0 → 7.51.1

package/cjs/Datepicker/web/Datepicker.js

@@ -13,7 +13,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = require("prop-types");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dateFns = require("date-fns");
 
 var _Theme = require("../../Theme");
 
@@ -125,8 +125,8 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      startDate = _ref8.startDate,
-      endDate = _ref8.endDate,
+      initialDate = _ref8.startDate,
+      finishDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
@@ -139,12 +139,12 @@ function Datepicker(_ref8) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = (0, _react.useState)(startDate),
-      startD = _useState2[0],
+  var _useState2 = (0, _react.useState)(initialDate),
+      startDate = _useState2[0],
       setStartDate = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(endDate),
-      endD = _useState3[0],
+  var _useState3 = (0, _react.useState)(finishDate),
+      endDate = _useState3[0],
       setEndDate = _useState3[1];
 
   var ref = (0, _react.useRef)(null);
@@ -164,14 +164,14 @@ function Datepicker(_ref8) {
 
   (0, _react.useEffect)(function () {
     if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startD);
+      onSelectSingle(startDate);
       setOpen(false.toString());
     } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startD, endD);
+      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startD);
-  }, [startD, endD]);
+    setInputFilled(!!startDate);
+  }, [startDate, endDate]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
     setStartDate(startLocal);
@@ -182,10 +182,10 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endD) {
-      if (!startD) {
+    if (!endDate) {
+      if (!startDate) {
         setStartDate(selectedDate);
-      } else if (selectedDate < startD) {
+      } else if (selectedDate < startDate) {
         setStartDate(selectedDate);
         setEndDate(undefined);
       } else setEndDate(selectedDate);
@@ -196,16 +196,16 @@ function Datepicker(_ref8) {
   };
 
   var renderInput = function renderInput() {
-    if (!startD && !endD) {
+    if (!startDate && !endDate) {
       return /*#__PURE__*/_react["default"].createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
-    var dateFormat = 'MMM D, YYYY';
-    return startD && /*#__PURE__*/_react["default"].createElement(Input, {
+    var dateFormat = 'MMM d, yyyy';
+    return startDate && /*#__PURE__*/_react["default"].createElement(Input, {
       disabled: disabled
-    }, (0, _moment["default"])(startD).format(dateFormat), endD && " - " + (0, _moment["default"])(endD).format(dateFormat));
+    }, (0, _dateFns.format)(startDate, dateFormat), endDate && " - " + (0, _dateFns.format)(endDate, dateFormat));
   };
 
   return /*#__PURE__*/_react["default"].createElement(Wrapper, {
@@ -232,8 +232,8 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/_react["default"].createElement(_Calendar["default"], {
     type: type,
-    startDate: startD,
-    endDate: endD,
+    startDate: startDate,
+    endDate: endDate,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,

package/cjs/Datepicker/web/Datepicker.test.js

@@ -4,7 +4,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dateFns = require("date-fns");
 
 var _ = require("../..");
 
@@ -30,6 +30,9 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected date single Datepicker', function () {
+      var mockedDate = new Date(2022, 7, 3);
+      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+
       var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "single",
         startDate: testDate
@@ -100,7 +103,7 @@ describe('<Datepicker />', function () {
     });
   });
   describe('Unit', function () {
-    var dateFormat = 'MMM D, YYYY';
+    var dateFormat = 'MMM d, yyyy';
     it('should call onSelectSingle function on single Datepicker', function () {
       var onSelectSingle = jest.fn();
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
@@ -145,15 +148,15 @@ describe('<Datepicker />', function () {
         type: "single",
         startDate: currentDate
       })));
-      var formattedDate = (0, _moment["default"])(currentDate).format(dateFormat);
+      var formattedDate = (0, _dateFns.format)(currentDate, dateFormat);
       expect(_react2.screen.getByText(formattedDate)).toBeVisible();
     });
     it('should display default date range on range Datepicker', function () {
       var currentDate = new Date();
       var end = new Date();
       end.setDate(currentDate.getDate() + 15);
-      var formattedStartDate = (0, _moment["default"])(currentDate).format(dateFormat);
-      var formattedEndDate = (0, _moment["default"])(end).format(dateFormat);
+      var formattedStartDate = (0, _dateFns.format)(currentDate, dateFormat);
+      var formattedEndDate = (0, _dateFns.format)(end, dateFormat);
       (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.ThemeProvider, null, /*#__PURE__*/_react["default"].createElement(_.Datepicker, {
         type: "range",
         startDate: currentDate,
@@ -213,7 +216,7 @@ describe('<Datepicker />', function () {
         startDate: testDate,
         disabled: true
       })));
-      var formattedDate = (0, _moment["default"])(testDate).format(dateFormat);
+      var formattedDate = (0, _dateFns.format)(testDate, dateFormat);
 
       var datepickerInput = _react2.screen.getByText(formattedDate);
 

package/esm/Datepicker/web/Datepicker.js

@@ -14,7 +14,7 @@ import { Booking, BookingFilled } from '@gympass/yoga-icons';
 import { Text } from '@gympass/yoga';
 import styled, { css } from 'styled-components';
 import { bool, oneOf, func, instanceOf, string } from 'prop-types';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { theme } from '../../Theme';
 import Calendar from './Calendar';
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  display: inline-block;\n  vertical-align: top;\n  width: ", ";\n"])), function (props) {
@@ -100,8 +100,8 @@ function Datepicker(_ref8) {
   var fullWidth = _ref8.fullWidth,
       type = _ref8.type,
       placeholder = _ref8.placeholder,
-      startDate = _ref8.startDate,
-      endDate = _ref8.endDate,
+      initialDate = _ref8.startDate,
+      finishDate = _ref8.endDate,
       onSelectSingle = _ref8.onSelectSingle,
       disabled = _ref8.disabled,
       onSelectRange = _ref8.onSelectRange,
@@ -114,12 +114,12 @@ function Datepicker(_ref8) {
       open = _useState[0],
       setOpen = _useState[1];
 
-  var _useState2 = useState(startDate),
-      startD = _useState2[0],
+  var _useState2 = useState(initialDate),
+      startDate = _useState2[0],
       setStartDate = _useState2[1];
 
-  var _useState3 = useState(endDate),
-      endD = _useState3[0],
+  var _useState3 = useState(finishDate),
+      endDate = _useState3[0],
       setEndDate = _useState3[1];
 
   var ref = useRef(null);
@@ -139,14 +139,14 @@ function Datepicker(_ref8) {
 
   useEffect(function () {
     if (type === 'single' && onSelectSingle) {
-      onSelectSingle(startD);
+      onSelectSingle(startDate);
       setOpen(false.toString());
     } else if (type === 'range' && onSelectRange) {
-      onSelectRange(startD, endD);
+      onSelectRange(startDate, endDate);
     }
 
-    setInputFilled(!!startD);
-  }, [startD, endD]);
+    setInputFilled(!!startDate);
+  }, [startDate, endDate]);
 
   var onDateSingleSelect = function onDateSingleSelect(startLocal) {
     setStartDate(startLocal);
@@ -157,10 +157,10 @@ function Datepicker(_ref8) {
   }, [open]);
 
   var onDateRangeSelect = function onDateRangeSelect(selectedDate) {
-    if (!endD) {
-      if (!startD) {
+    if (!endDate) {
+      if (!startDate) {
         setStartDate(selectedDate);
-      } else if (selectedDate < startD) {
+      } else if (selectedDate < startDate) {
         setStartDate(selectedDate);
         setEndDate(undefined);
       } else setEndDate(selectedDate);
@@ -171,16 +171,16 @@ function Datepicker(_ref8) {
   };
 
   var renderInput = function renderInput() {
-    if (!startD && !endD) {
+    if (!startDate && !endDate) {
       return /*#__PURE__*/React.createElement(InputPlaceholder, {
         disabled: disabled
       }, placeholder != null ? placeholder : "Select Date");
     }
 
-    var dateFormat = 'MMM D, YYYY';
-    return startD && /*#__PURE__*/React.createElement(Input, {
+    var dateFormat = 'MMM d, yyyy';
+    return startDate && /*#__PURE__*/React.createElement(Input, {
       disabled: disabled
-    }, moment(startD).format(dateFormat), endD && " - " + moment(endD).format(dateFormat));
+    }, format(startDate, dateFormat), endDate && " - " + format(endDate, dateFormat));
   };
 
   return /*#__PURE__*/React.createElement(Wrapper, {
@@ -207,8 +207,8 @@ function Datepicker(_ref8) {
     onBlur: onBlur
   }, /*#__PURE__*/React.createElement(Calendar, {
     type: type,
-    startDate: startD,
-    endDate: endD,
+    startDate: startDate,
+    endDate: endDate,
     onSelectSingle: onDateSingleSelect,
     onSelectRange: onDateRangeSelect,
     disablePastDates: disablePastDates,

package/esm/Datepicker/web/Datepicker.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import moment from 'moment';
+import { format } from 'date-fns';
 import { ThemeProvider, Datepicker } from '../..';
 describe('<Datepicker />', function () {
   var testDate = new Date(2022, 7, 3);
@@ -22,6 +22,9 @@ describe('<Datepicker />', function () {
       expect(container).toMatchSnapshot();
     });
     it('should match with default selected date single Datepicker', function () {
+      var mockedDate = new Date(2022, 7, 3);
+      jest.useFakeTimers('modern').setSystemTime(mockedDate);
+
       var _render3 = render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "single",
         startDate: testDate
@@ -92,7 +95,7 @@ describe('<Datepicker />', function () {
     });
   });
   describe('Unit', function () {
-    var dateFormat = 'MMM D, YYYY';
+    var dateFormat = 'MMM d, yyyy';
     it('should call onSelectSingle function on single Datepicker', function () {
       var onSelectSingle = jest.fn();
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
@@ -126,15 +129,15 @@ describe('<Datepicker />', function () {
         type: "single",
         startDate: currentDate
       })));
-      var formattedDate = moment(currentDate).format(dateFormat);
+      var formattedDate = format(currentDate, dateFormat);
       expect(screen.getByText(formattedDate)).toBeVisible();
     });
     it('should display default date range on range Datepicker', function () {
       var currentDate = new Date();
       var end = new Date();
       end.setDate(currentDate.getDate() + 15);
-      var formattedStartDate = moment(currentDate).format(dateFormat);
-      var formattedEndDate = moment(end).format(dateFormat);
+      var formattedStartDate = format(currentDate, dateFormat);
+      var formattedEndDate = format(end, dateFormat);
       render( /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(Datepicker, {
         type: "range",
         startDate: currentDate,
@@ -186,7 +189,7 @@ describe('<Datepicker />', function () {
         startDate: testDate,
         disabled: true
       })));
-      var formattedDate = moment(testDate).format(dateFormat);
+      var formattedDate = format(testDate, dateFormat);
       var datepickerInput = screen.getByText(formattedDate);
       expect(datepickerInput).toHaveAttribute('disabled');
       expect(datepickerInput.closest('div')).toHaveAttribute('disabled');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gympass/yoga",
-  "version": "7.51.0",
+  "version": "7.51.1",
   "description": "Gympass component library",
   "main": "./cjs",
   "sideEffects": false,
@@ -33,9 +33,9 @@
     "@gympass/yoga-tokens": "^3.1.4",
     "@ptomasroos/react-native-multi-slider": "^1.0.0",
     "@radix-ui/react-dropdown-menu": "^0.1.6",
+    "date-fns": "^2.29.2",
     "downshift": "^5.0.0",
     "lodash.get": "^4.4.2",
-    "moment": "^2.29.4",
     "prop-types": "^15.7.2",
     "proxy-polyfill": "^0.3.1",
     "rc-slider": "^8.7.1",
@@ -52,7 +52,7 @@
     "react": ">=16",
     "styled-components": "^4.4.0"
   },
-  "gitHead": "30d96b249244d7139ac23501159fdcd60cab96b9",
+  "gitHead": "ad993d885de0b5bcab2650b2df0282239c233128",
   "module": "./esm",
   "private": false,
   "react-native": "./cjs/index.native.js"