td-stylekit 28.30.0 → 28.30.2

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [28.30.2](https://github.com/treasure-data/td-stylekit/compare/v28.30.1...v28.30.2) (2023-12-15)
+
+
+### Bug Fixes
+
+* **CON-11008:** Fix issue in TimeControl ([#1517](https://github.com/treasure-data/td-stylekit/issues/1517)) ([85fdca4](https://github.com/treasure-data/td-stylekit/commit/85fdca4))
+
+## [28.30.1](https://github.com/treasure-data/td-stylekit/compare/v28.30.0...v28.30.1) (2023-12-14)
+
+
+### Bug Fixes
+
+* **CON-11008:** Complete migration from momentjs to date-fns ([#1514](https://github.com/treasure-data/td-stylekit/issues/1514)) ([9956296](https://github.com/treasure-data/td-stylekit/commit/9956296))
+
 # [28.30.0](https://github.com/treasure-data/td-stylekit/compare/v28.29.0...v28.30.0) (2023-12-14)
 
 

package/dist/es/DateControl/DateControl.js

@@ -65,11 +65,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
 var dateToString = _DatePicker.DatePickerUtils.dateToString,
-    stringToDate = _DatePicker.DatePickerUtils.stringToDate;
+    stringToDate = _DatePicker.DatePickerUtils.stringToDate,
+    isStringCorrectFormat = _DatePicker.DatePickerUtils.isStringCorrectFormat;
 var CLOSE_KEYS = [String.fromCharCode(25), // Gets sent when you press shift+tab with Chrome...
 'Enter', 'Escape', 'Tab'];
 exports.CLOSE_KEYS = CLOSE_KEYS;
-var DATE_FORMATS = ['MMM DD, YYYY', 'MMM DD YYYY', 'MMM D, YYYY', 'MMM D YYYY', 'MMMM D, YYYY', 'MMMM D YYYY', 'MMMM DD, YYYY', 'MMMM DD YYYY', 'MM/DD/YYYY', 'l'];
+var DATE_FORMATS = ['MMM dd, yyyy', 'MMM dd yyyy', 'MMM d, yyyy', 'MMM d yyyy', 'MMMM d, yyyy', 'MMMM d yyyy', 'MMMM dd, yyyy', 'MMMM dd yyyy', 'MM/dd/yyyy'];
 exports.DATE_FORMATS = DATE_FORMATS;
 var TIME_FORMAT_24 = 'HH:mm:ss';
 var TIME_FORMAT_12 = 'hh:mm:ss A';
@@ -78,7 +79,7 @@ var TIME_FORMAT_SHORT_12 = 'hh:mm A';
 var TIME_FORMAT_MS = ':mm:ss';
 
 var DATETIME_FORMAT = function DATETIME_FORMAT(timeFormat) {
-  return ["MMM DD, YYYY ".concat(timeFormat), "Format MMM DD, YYYY ".concat(timeFormat)];
+  return ["MMM dd, yyyy ".concat(timeFormat), "Format MMM dd, yyyy ".concat(timeFormat)];
 };
 
 exports.DATETIME_FORMAT = DATETIME_FORMAT;
@@ -132,7 +133,7 @@ var UnstyledDateControl = function UnstyledDateControl(_ref) {
       _ref$clearable = _ref.clearable,
       clearable = _ref$clearable === void 0 ? true : _ref$clearable,
       _ref$dateDisplayForma = _ref.dateDisplayFormat,
-      dateDisplayFormat = _ref$dateDisplayForma === void 0 ? 'MMM DD, YYYY' : _ref$dateDisplayForma,
+      dateDisplayFormat = _ref$dateDisplayForma === void 0 ? 'MMM dd, yyyy' : _ref$dateDisplayForma,
       disabledDays = _ref.disabledDays,
       dataInstrumentation = _ref['data-instrumentation'],
       _ref$enableFutureDate = _ref.enableFutureDates,
@@ -293,7 +294,7 @@ var UnstyledDateControl = function UnstyledDateControl(_ref) {
   var onInputChange = function onInputChange(_ref2) {
     var name = _ref2.name,
         value = _ref2.value;
-    var date = typeof value === 'string' ? stringToDate(value, [resolvedDisplayFormat].concat(DATE_FORMATS), locale) : null;
+    var date = typeof value === 'string' && isStringCorrectFormat(value, [resolvedDisplayFormat].concat(DATE_FORMATS)) ? stringToDate(value, [resolvedDisplayFormat].concat(DATE_FORMATS), locale) : null;
     setInputValue(String(value)); // If we have a validation function and it's test doesn't pass then
     // we don't want to call onChange, but we want to keep local state
     // up to date so that the input respects the users inputs
@@ -344,7 +345,7 @@ var UnstyledDateControl = function UnstyledDateControl(_ref) {
 
   (0, _react.useEffect)(function () {
     var errorList = error ? (0, _utils.getErrorList)(error) : [];
-    var date = stringToDate(inputValue, [resolvedDisplayFormat].concat(DATE_FORMATS), locale);
+    var date = isStringCorrectFormat(inputValue, [resolvedDisplayFormat].concat(DATE_FORMATS)) ? stringToDate(inputValue, [resolvedDisplayFormat].concat(DATE_FORMATS), locale) : undefined;
 
     if (inputValue && !date) {
       errorList.unshift(errorMessage);

package/dist/es/DateField/DateField.js

@@ -70,7 +70,8 @@ if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
 // this level of fine grained instrumentation is not needed
 
 var dateToString = _DatePicker.DatePickerUtils.dateToString,
-    stringToDate = _DatePicker.DatePickerUtils.stringToDate;
+    stringToDate = _DatePicker.DatePickerUtils.stringToDate,
+    isStringCorrectFormat = _DatePicker.DatePickerUtils.isStringCorrectFormat;
 var CLOSE_KEYS = [String.fromCharCode(25), // Gets sent when you press shift+tab with Chrome...
 'Enter', 'Escape', 'Tab']; // @TODO: Change to YYYY-MM-DD?
 
@@ -163,7 +164,7 @@ var UnstyledDateField = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "_onInputChange", function (_ref) {
       var name = _ref.name,
           value = _ref.value;
-      var date = typeof value === 'string' ? stringToDate(value) : null;
+      var date = typeof value === 'string' && isStringCorrectFormat(value) ? stringToDate(value) : null;
       var _this$props2 = _this.props,
           onChange = _this$props2.onChange,
           disabledDays = _this$props2.disabledDays,

package/dist/es/DatePicker/utils.d.ts

@@ -1,15 +1,13 @@
 import { LocaleUtils } from 'react-day-picker';
-import 'moment/locale/ja';
-import 'moment/locale/ko';
-import 'moment/locale/es';
-import 'moment/locale/de';
 type Value = string | number | Date;
 /** Strings and Dates are converted using this format (eg. 6/3/2015) */
-export declare const MOMENT_JS_FORMAT = "l";
+export declare const DEFAULT_FORMAT = "M/d/yyyy";
 /** Does the specified String represent a Date in the supported format? */
 export declare function isDateValid(value: Value, format?: string | string[], locale?: string): boolean;
 /** Convert the String specified into a Date if it valid */
 export declare function stringToDate(string: Value, format?: string | string[], locale?: string): Date | undefined;
+/** Verify that the length of the provided string value matches the length of one of the provided formats */
+export declare function isStringCorrectFormat(string: string, format?: string | string[]): boolean;
 /** Convert the specified Date to a String */
 export declare function dateToString(date: Value, format?: string, locale?: string): string;
 /** Custom locale utils used to override day headers */
@@ -17,7 +15,6 @@ export declare const customLocaleUtils: typeof LocaleUtils;
 export declare const dateUtils: {
     addDayToRange(day: Date, range: import("react-day-picker").RangeModifier): import("react-day-picker").RangeModifier;
     addMonths(d: Date, n: number): Date;
-    /** Convert the String specified into a Date if it valid */
     clone(d: Date): Date;
     isDate(d: Date): boolean;
     isDayAfter(day1: Date, day2: Date): boolean;

package/dist/es/DatePicker/utils.js

@@ -3,27 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.customLocaleUtils = exports.MOMENT_JS_FORMAT = void 0;
+exports.customLocaleUtils = exports.DEFAULT_FORMAT = void 0;
 exports.dateToString = dateToString;
 exports.dateUtils = void 0;
 exports.isDateValid = isDateValid;
+exports.isStringCorrectFormat = isStringCorrectFormat;
 exports.stringToDate = stringToDate;
 
 var _reactDayPicker = require("react-day-picker");
 
-var _moment = _interopRequireDefault(require("moment"));
+var _dateFns = require("date-fns");
 
-var _moment2 = _interopRequireDefault(require("react-day-picker/moment"));
-
-require("moment/locale/ja");
-
-require("moment/locale/ko");
-
-require("moment/locale/es");
-
-require("moment/locale/de");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _locale = require("date-fns/locale");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -32,46 +23,128 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
-if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {}; // Make sure moment.js has the required locale data
-
-_moment["default"].locale('en');
+if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
 
 /** Strings and Dates are converted using this format (eg. 6/3/2015) */
-var MOMENT_JS_FORMAT = 'l';
+var DEFAULT_FORMAT = 'M/d/yyyy';
+exports.DEFAULT_FORMAT = DEFAULT_FORMAT;
+
+var getLocale = function getLocale(key) {
+  if (key === 'ja') {
+    return _locale.ja;
+  } else if (key === 'ko') {
+    return _locale.ko;
+  } else if (key === 'es') {
+    return _locale.es;
+  } else if (key === 'de') {
+    return _locale.de;
+  }
+
+  return _locale.enUS;
+};
 /** Does the specified String represent a Date in the supported format? */
 
-exports.MOMENT_JS_FORMAT = MOMENT_JS_FORMAT;
 
 function isDateValid(value) {
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MOMENT_JS_FORMAT;
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FORMAT;
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
-  return (0, _moment["default"])(value, format, locale, true).isValid();
+  var parsedDate;
+
+  if (Array.isArray(format)) {
+    for (var i = 0; i < format.length; i++) {
+      parsedDate = (0, _dateFns.parse)(value.toString(), format[i], Date.now(), {
+        locale: getLocale(locale)
+      });
+
+      if ((0, _dateFns.isValid)(parsedDate)) {
+        return true;
+      }
+    }
+  } else {
+    parsedDate = (0, _dateFns.parse)(value.toString(), format, Date.now(), {
+      locale: getLocale(locale)
+    });
+    return (0, _dateFns.isValid)(parsedDate);
+  }
+
+  return false;
 }
+
+var getValidFormat = function getValidFormat(value, format) {
+  var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
+  var result;
+
+  for (var i = 0; i < format.length; i++) {
+    result = (0, _dateFns.parse)(value.toString(), format[i], Date.now(), {
+      locale: getLocale(locale)
+    });
+
+    if ((0, _dateFns.isValid)(result)) {
+      return format[i];
+    }
+  }
+
+  return undefined;
+};
 /** Convert the String specified into a Date if it valid */
 
 
 function stringToDate(string) {
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MOMENT_JS_FORMAT;
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FORMAT;
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
 
   if (isDateValid(string, format, locale)) {
-    return (0, _moment["default"])(string, format, locale).toDate();
+    var validFormat = Array.isArray(format) ? getValidFormat(string, format, locale) : format;
+
+    if (!validFormat) {
+      return undefined;
+    }
+
+    return (0, _dateFns.parse)(string.toString(), validFormat, Date.now(), {
+      locale: getLocale(locale)
+    });
   }
 
   return undefined;
 }
+/** Verify that the length of the provided string value matches the length of one of the provided formats */
+
+
+function isStringCorrectFormat(string) {
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FORMAT;
+
+  if (Array.isArray(format)) {
+    for (var i = 0; i < format.length; i++) {
+      var date = (0, _dateFns.parse)(string.toString(), format[i], Date.now());
+
+      if (date.toString() !== 'Invalid Date' && (0, _dateFns.format)(date, format[i]) === string) {
+        return true;
+      }
+    }
+  } else {
+    var _date = (0, _dateFns.parse)(string.toString(), format, Date.now());
+
+    if (_date.toString() !== 'Invalid Date' && (0, _dateFns.format)(_date, format) === string) {
+      return true;
+    }
+  }
+
+  return false;
+}
 /** Convert the specified Date to a String */
 
 
 function dateToString(date) {
-  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : MOMENT_JS_FORMAT;
+  var format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_FORMAT;
   var locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
-  return (0, _moment["default"])(date).locale(locale).format(format);
+  return (0, _dateFns.format)(new Date(date), format, {
+    locale: getLocale(locale)
+  });
 }
 /** Custom locale utils used to override day headers */
 
 
-var customLocaleUtils = _objectSpread(_objectSpread({}, _moment2["default"]), {}, {
+var customLocaleUtils = _objectSpread(_objectSpread({}, _reactDayPicker.LocaleUtils), {}, {
   formatWeekdayShort: function formatWeekdayShort(dayIndex, locale) {
     return _reactDayPicker.LocaleUtils.formatWeekdayShort(dayIndex, locale).substr(0, 1);
   }

package/dist/es/TimeControl/utils.js

@@ -7,9 +7,7 @@ exports.useDisplayValue = useDisplayValue;
 
 var _react = require("react");
 
-var _moment = _interopRequireDefault(require("moment"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _dateFns = require("date-fns");
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -25,7 +23,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-var TIME_FORMAT_24 = 'HH:mm:ss';
+var TIME_FORMAT_24 = 'hh:mm:ss';
 var TIME_FORMAT_12 = 'hh:mm:ss A';
 var TIME_FORMAT_MS = ':mm:ss';
 var TIME_FORMAT_HM = 'hh:mm'; // This hook contains all the logic needed to handle user input
@@ -68,7 +66,11 @@ function useDisplayValue(time, editor, onChange) {
   }, [period, editor]);
 
   var reconcileShadowValue = function reconcileShadowValue() {
-    return setShadowValue((0, _moment["default"])(time, TIME_FORMAT_24).format(displayFormat));
+    var date = (0, _dateFns.parse)(time !== null && time !== void 0 ? time : '00:00', TIME_FORMAT_24, Date.now());
+
+    if (time && (0, _dateFns.isValid)(date)) {
+      setShadowValue((0, _dateFns.format)(date, displayFormat));
+    }
   }; // If we do not have an initial value then we use the current time (when editing
   // hh:mm:ss) or always 00:00 when editing mm:ss. We override default behaviour of TimePicker.
 
@@ -76,7 +78,7 @@ function useDisplayValue(time, editor, onChange) {
   (0, _react.useEffect)(function () {
     if (!time && onChange) {
       if (editor === 'hours-minutes-seconds') {
-        onChange((0, _moment["default"])().format(TIME_FORMAT_24));
+        onChange((0, _dateFns.format)(new Date(), TIME_FORMAT_24));
       } else {
         onChange('00:00');
       }
@@ -110,19 +112,19 @@ function useDisplayValue(time, editor, onChange) {
       return;
     }
 
-    var time = (0, _moment["default"])(value, displayFormat, true);
+    var date = new Date(value);
 
-    if (time.isValid()) {
+    if ((0, _dateFns.isValid)(date)) {
       setErrors(undefined);
-      onChange(time.format(TIME_FORMAT_24)); // Editing the value from AM to PM (or vice-versa) causes the default
+      onChange((0, _dateFns.format)(date, TIME_FORMAT_24)); // Editing the value from AM to PM (or vice-versa) causes the default
       // period in the TimePicker to change (we do not want to always have 24h if user
       // changed something). Note that this works only because the TimePicker is unmounted
       // when user starts typing something.
 
       if (period !== '24' && editor === 'hours-minutes-seconds') {
-        if (time.hour() > 11 && period === 'am') {
+        if ((0, _dateFns.getHours)(date) > 11 && period === 'am') {
           setPeriod('pm');
-        } else if (time.hour() < 12 && period === 'pm') {
+        } else if ((0, _dateFns.getHours)(date) < 12 && period === 'pm') {
           setPeriod('am');
         }
       }
@@ -151,8 +153,8 @@ function useDisplayValue(time, editor, onChange) {
       return shadowValue;
     }
 
-    var result = (0, _moment["default"])(time, TIME_FORMAT_24);
-    return result.isValid() ? result.format(displayFormat) : ''; // eslint-disable-next-line react-hooks/exhaustive-deps
+    var date = new Date(time);
+    return (0, _dateFns.isValid)(date) ? (0, _dateFns.format)(date, displayFormat) : ''; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [time, shadowValue, errors, isEditing, displayFormat]);
   return {
     displayValue: displayValue,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "28.30.0",
+  "version": "28.30.2",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",
@@ -199,7 +199,6 @@
     "lcov-parse": "^1.0.0",
     "markdown-table": "^1.1.3",
     "marksy": "^8.0.0",
-    "moment": "^2.29.4",
     "node-fetch": "^2.6.7",
     "prettier": "^2.1.1",
     "pretty-quick": "^1.11.1",
@@ -223,7 +222,6 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "moment": "^2.18.1",
     "react": "18.2.0",
     "react-dnd": "^9.4.0",
     "react-dom": "18.2.0",