@royaloperahouse/chord 2.11.0-b-development → 2.11.1-a-development

package/README.md

@@ -59,6 +59,10 @@ You can quickly build and serve the contents of `/storybook-static` from your lo
 ```bash
 yarn storybook
 ```
+Try to use this script if you have issues running it locally
+```bash
+NODE_OPTIONS=--openssl-legacy-provider yarn storybook
+```
 
 By default the storybook will be accessible at
 [http://localhost:6006/](http://localhost:6006/)

package/dist/chord.cjs.development.js

@@ -8,7 +8,7 @@ var React = require('react');
 var React__default = _interopDefault(React);
 var styled = require('styled-components');
 var styled__default = _interopDefault(styled);
-var moment = _interopDefault(require('moment'));
+var dateFns = require('date-fns');
 var server = require('react-dom/server');
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
@@ -4660,6 +4660,23 @@ var TimerValueSeparator = /*#__PURE__*/styled__default.div(_templateObject6$3 ||
 var TimerValueWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 var TimerValue = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose([""])));
 
+var pad = function pad(num) {
+  return String(num || 0).padStart(2, '0');
+};
+
+var renderTimerValue = function renderTimerValue(value, title, separator) {
+  if (separator === void 0) {
+    separator = true;
+  }
+
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
+    className: 'chord-timer-value',
+    "data-testid": title
+  }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
+    className: 'chord-timer-label'
+  }, title)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
+};
+
 var Timer = function Timer(_ref) {
   var endDate = _ref.endDate,
       title = _ref.title,
@@ -4669,39 +4686,27 @@ var Timer = function Timer(_ref) {
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? exports.Colors.Black : _ref$color;
 
-  var _React$useState = React__default.useState('00'),
-      seconds = _React$useState[0],
-      setSeconds = _React$useState[1];
-
-  var _React$useState2 = React__default.useState('00'),
-      minutes = _React$useState2[0],
-      setMinutes = _React$useState2[1];
+  var _useState = React.useState('00'),
+      seconds = _useState[0],
+      setSeconds = _useState[1];
 
-  var _React$useState3 = React__default.useState('00'),
-      hours = _React$useState3[0],
-      setHours = _React$useState3[1];
+  var _useState2 = React.useState('00'),
+      minutes = _useState2[0],
+      setMinutes = _useState2[1];
 
-  var _React$useState4 = React__default.useState('00'),
-      days = _React$useState4[0],
-      setDays = _React$useState4[1];
+  var _useState3 = React.useState('00'),
+      hours = _useState3[0],
+      setHours = _useState3[1];
 
-  var _React$useState5 = React__default.useState(false),
-      isEndDateReached = _React$useState5[0],
-      setIsEndDateReached = _React$useState5[1];
+  var _useState4 = React.useState('00'),
+      days = _useState4[0],
+      setDays = _useState4[1];
 
-  var renderTimerValue = function renderTimerValue(value, title, separator) {
-    if (separator === void 0) {
-      separator = true;
-    }
-
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TimerValueWrapper, null, /*#__PURE__*/React__default.createElement(TimerValue, {
-      className: 'chord-timer-value'
-    }, value), /*#__PURE__*/React__default.createElement(TimerLabel, {
-      className: 'chord-timer-label'
-    }, title)), separator && /*#__PURE__*/React__default.createElement(TimerValueSeparator, null, ":"));
-  };
+  var _useState5 = React.useState(false),
+      isEndDateReached = _useState5[0],
+      setIsEndDateReached = _useState5[1];
 
-  React__default.useEffect(function () {
+  React.useEffect(function () {
     if (isEndDateReached) return; // We use this to set values for the timer immediately
 
     var setIntervalAndExecute = function setIntervalAndExecute(fn, delay) {
@@ -4710,20 +4715,23 @@ var Timer = function Timer(_ref) {
     };
 
     var updateValues = function updateValues() {
-      var futureDate = moment(endDate);
-      var nowDate = moment();
-      var differenceInMilliseconds = futureDate.valueOf() - nowDate.valueOf();
-      var difference = moment(differenceInMilliseconds).utc();
+      var futureDate = new Date(endDate); // Date.now() is explicitly passed here just to satisfy Jest time mocking.
+
+      var nowDate = new Date(Date.now());
+      var diffInMs = futureDate.getTime() - nowDate.getTime();
 
-      if (differenceInMilliseconds < 0) {
+      if (diffInMs < 0) {
         setIsEndDateReached(true);
         if (endDateHandler) endDateHandler();
       } else {
-        var fullDaysLeft = Math.floor(futureDate.diff(nowDate, 'days', true));
-        var daysDiff = fullDaysLeft < 10 ? "0" + fullDaysLeft : fullDaysLeft.toString();
-        var hoursDiff = difference.format('HH');
-        var minutesDiff = difference.format('mm');
-        var secondsDiff = difference.format('ss');
+        var duration = dateFns.intervalToDuration({
+          start: nowDate,
+          end: futureDate
+        });
+        var daysDiff = pad(dateFns.differenceInDays(futureDate, nowDate));
+        var hoursDiff = pad(duration.hours);
+        var minutesDiff = pad(duration.minutes);
+        var secondsDiff = pad(duration.seconds);
         setDays(daysDiff);
         setHours(hoursDiff);
         setMinutes(minutesDiff);
@@ -4736,7 +4744,7 @@ var Timer = function Timer(_ref) {
       clearInterval(interval);
     };
   });
-  var hideTimer = moment(endDate).isBefore(moment());
+  var hideTimer = dateFns.isPast(new Date(endDate));
   if (hideTimer) return null;
   return /*#__PURE__*/React__default.createElement(TimerWrapper, {
     color: color