perf: replace moment with dayjs (#6980)

* perf: replace moment with dayjs

- replace react-datetime with datetime-local input

* fix: format code

* feat: add clear button to datetime widget

Author: martinjagodic

package.json

@@ -186,6 +186,7 @@
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "browserify": "^17.0.0",
     "buffer": "^6.0.3",
+    "dayjs": "^1.11.10",
     "emotion": "^11.0.0",
     "eslint-config-prettier": "^8.0.0",
     "eslint-plugin-babel": "^5.3.0",

packages/decap-cms-app/package.json

@@ -60,12 +60,12 @@
     "decap-cms-widget-text": "^3.1.0-beta.0",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
-    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react-immutable-proptypes": "^2.1.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

packages/decap-cms-app/src/index.js

@@ -1,5 +1,5 @@
 import { DecapCmsCore as CMS } from 'decap-cms-core';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import './extensions.js';
 
 // Log version
@@ -11,6 +11,6 @@ if (typeof window !== 'undefined') {
 
 export const DecapCmsApp = {
   ...CMS,
-  moment,
+  dayjs,
 };
 export default CMS;

packages/decap-cms-core/package.json

@@ -77,14 +77,14 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "dayjs": "^1.11.10",
     "decap-cms-editor-component-image": "^3.0.0",
     "decap-cms-lib-auth": "^3.0.0",
     "decap-cms-lib-util": "^3.0.0",
     "decap-cms-lib-widgets": "^3.0.0",
     "decap-cms-ui-default": "^3.0.0",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
-    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/decap-cms-core/src/components/Workflow/WorkflowList.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { translate } from 'react-polyglot';
 import { colors, lengths } from 'decap-cms-ui-default';
 
@@ -205,9 +205,7 @@ class WorkflowList extends React.Component {
     return (
       <div>
         {entries.map(entry => {
-          const timestamp = moment(entry.get('updatedOn')).format(
-            t('workflow.workflow.dateFormat'),
-          );
+          const timestamp = dayjs(entry.get('updatedOn')).format(t('workflow.workflow.dateFormat'));
           const slug = entry.get('slug');
           const collectionName = entry.get('collection');
           const editLink = `collections/${collectionName}/entries/${slug}?ref=workflow`;

packages/decap-cms-core/src/formats/toml.ts

@@ -1,12 +1,12 @@
 import toml from '@iarna/toml';
 import tomlify from 'tomlify-j0.4';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 import AssetProxy from '../valueObjects/AssetProxy';
 import { sortKeys } from './helpers';
 
 function outputReplacer(_key: string, value: unknown) {
-  if (moment.isMoment(value)) {
+  if (dayjs.isDayjs(value)) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     return value.format(value._f);

packages/decap-cms-core/src/lib/formatters.ts

@@ -195,7 +195,7 @@ export function previewUrlFormatter(
     compiledPath = compileStringTemplate(pathTemplate, date, slug, fields, processSegment);
   } catch (err) {
     // Print an error and ignore `preview_path` if both:
-    //   1. Date is invalid (according to Moment), and
+    //   1. Date is invalid (according to DayJs), and
     //   2. A date expression (eg. `{{year}}`) is used in `preview_path`
     if (err.name === SLUG_MISSING_REQUIRED_DATE) {
       console.error(stripIndent`

packages/decap-cms-default-exports/package.json

@@ -23,12 +23,12 @@
     "@emotion/styled": "^11.11.0",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",
-    "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react-immutable-proptypes": "^2.1.0",
     "uuid": "^8.3.2"
   },
   "peerDependencies": {
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

packages/decap-cms-default-exports/src/index.js

@@ -13,7 +13,7 @@ import EmotionStyled from '@emotion/styled';
 import Immutable from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Lodash from 'lodash/lodash';
-import Moment from 'moment';
+import Dayjs from 'dayjs';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -35,7 +35,7 @@ export const DecapCmsDefaultExports = {
   Immutable,
   ImmutablePropTypes,
   Lodash,
-  Moment,
+  Dayjs,
   PropTypes,
   React,
   ReactDOM,

packages/decap-cms-lib-widgets/package.json

@@ -17,8 +17,8 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\""
   },
   "peerDependencies": {
+    "dayjs": "^1.11.10",
     "immutable": "^3.7.6",
-    "lodash": "^4.17.11",
-    "moment": "^2.24.0"
+    "lodash": "^4.17.11"
   }
 }

packages/decap-cms-lib-widgets/src/stringTemplate.ts

@@ -1,6 +1,6 @@
 import { Map } from 'immutable';
 import { get, trimEnd, truncate } from 'lodash';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { basename, dirname, extname } from 'path';
 
 const filters = [
@@ -11,7 +11,7 @@ const filters = [
   },
   {
     pattern: /^date\('(.+)'\)$/,
-    transform: (str: string, match: RegExpMatchArray) => moment(str).format(match[1]),
+    transform: (str: string, match: RegExpMatchArray) => dayjs(str).format(match[1]),
   },
   {
     pattern: /^default\('(.+)'\)$/,
@@ -60,9 +60,9 @@ export function parseDateFromEntry(entry: Map<string, unknown>, dateFieldName?:
   }
 
   const dateValue = entry.getIn(['data', dateFieldName]);
-  const dateMoment = dateValue && moment(dateValue);
-  if (dateMoment && dateMoment.isValid()) {
-    return dateMoment.toDate();
+  const dateDayjs = dateValue && dayjs(dateValue);
+  if (dateDayjs && dateDayjs.isValid()) {
+    return dateDayjs.toDate();
   }
 }
 

packages/decap-cms-locales/src/bg/index.js

@@ -195,6 +195,7 @@ const bg = {
       },
       datetime: {
         now: 'Сега',
+        clear: 'Изчисти',
       },
     },
   },

packages/decap-cms-locales/src/ca/index.js

@@ -193,6 +193,7 @@ const ca = {
       },
       datetime: {
         now: 'Ara',
+        clear: 'Netejar',
       },
     },
   },

packages/decap-cms-locales/src/cs/index.js

@@ -194,6 +194,7 @@ const cs = {
       },
       datetime: {
         now: 'Teď',
+        clear: 'Vymazat',
       },
     },
   },

packages/decap-cms-locales/src/da/index.js

@@ -205,6 +205,7 @@ const da = {
       },
       datetime: {
         now: 'Nu',
+        clear: 'Ryd',
       },
       list: {
         add: 'Tilføj %{item}',

packages/decap-cms-locales/src/de/index.js

@@ -204,6 +204,7 @@ const de = {
       },
       datetime: {
         now: 'Jetzt',
+        clear: 'Löschen',
       },
       list: {
         add: '%{item} hinzufügen',

packages/decap-cms-locales/src/en/index.js

@@ -206,6 +206,7 @@ const en = {
       },
       datetime: {
         now: 'Now',
+        clear: 'Clear',
       },
       list: {
         add: 'Add %{item}',

packages/decap-cms-locales/src/es/index.js

@@ -159,6 +159,7 @@ const es = {
       },
       datetime: {
         now: 'Ahora',
+        clear: 'Limpiar',
       },
     },
   },

packages/decap-cms-locales/src/fr/index.js

@@ -196,6 +196,7 @@ const fr = {
       },
       datetime: {
         now: 'Maintenant',
+        clear: 'Effacer',
       },
       list: {
         add: 'Ajouter %{item}',

packages/decap-cms-locales/src/he/index.js

@@ -197,6 +197,7 @@ const he = {
       },
       datetime: {
         now: 'עכשיו',
+        clear: 'ניקוי',
       },
       list: {
         add: 'הוספת %{item}',

packages/decap-cms-locales/src/hr/index.js

@@ -184,6 +184,7 @@ const hr = {
       },
       datetime: {
         now: 'Sad',
+        clear: 'Očisti',
       },
     },
   },

packages/decap-cms-locales/src/ja/index.js

@@ -198,6 +198,7 @@ const ja = {
       },
       datetime: {
         now: '現時刻',
+        clear: 'クリア',
       },
     },
   },

packages/decap-cms-locales/src/ko/index.js

@@ -205,6 +205,7 @@ const ko = {
       },
       datetime: {
         now: '현재시각',
+        clear: '지우기',
       },
       list: {
         add: '%{item} 추가',

packages/decap-cms-locales/src/lt/index.js

@@ -186,6 +186,7 @@ const lt = {
       },
       datetime: {
         now: 'Dabar',
+        clear: 'Išvalyti',
       },
     },
   },

packages/decap-cms-locales/src/nb_no/index.js

@@ -156,6 +156,7 @@ const nb_no = {
       },
       datetime: {
         now: 'Nå',
+        clear: 'Nullstill',
       },
     },
   },

packages/decap-cms-locales/src/nl/index.js

@@ -193,6 +193,7 @@ const nl = {
       },
       datetime: {
         now: 'Nu',
+        clear: 'Wissen',
       },
       list: {
         add: 'Voeg %{item} toe',

packages/decap-cms-locales/src/nn_no/index.js

@@ -157,6 +157,7 @@ const nn_no = {
       },
       datetime: {
         now: 'No',
+        clear: 'Nullstill',
       },
     },
   },

packages/decap-cms-locales/src/pl/index.js

@@ -198,6 +198,7 @@ const pl = {
       },
       datetime: {
         now: 'Teraz',
+        clear: 'Wyczyść',
       },
       list: {
         add: 'Dodaj %{item}',

packages/decap-cms-locales/src/pt/index.js

@@ -199,6 +199,7 @@ const pt = {
       },
       datetime: {
         now: 'Agora',
+        clear: 'Limpar',
       },
       list: {
         add: 'Adicionar %{item}',

packages/decap-cms-locales/src/ro/index.js

@@ -196,6 +196,7 @@ const ro = {
       },
       datetime: {
         now: 'Acum',
+        clear: 'Șterge',
       },
     },
   },

packages/decap-cms-locales/src/ru/index.js

@@ -209,6 +209,7 @@ const ru = {
       },
       datetime: {
         now: 'Сейчас',
+        clear: 'Очистить',
       },
       list: {
         add: 'Добавить %{item}',

packages/decap-cms-locales/src/sl/index.js

@@ -206,6 +206,7 @@ const sl = {
       },
       datetime: {
         now: 'Zdaj',
+        clear: 'Počisti',
       },
       list: {
         add: 'Dodaj %{item}',

packages/decap-cms-locales/src/sv/index.js

@@ -195,6 +195,7 @@ const sv = {
       },
       datetime: {
         now: 'Nu',
+        clear: 'Rensa',
       },
     },
   },

packages/decap-cms-locales/src/th/index.js

@@ -167,6 +167,7 @@ const th = {
       },
       datetime: {
         now: 'เวลาตอนนี้',
+        clear: 'ล้าง',
       },
     },
   },

packages/decap-cms-locales/src/tr/index.js

@@ -203,6 +203,7 @@ const tr = {
       },
       datetime: {
         now: 'Şimdi',
+        clear: 'Temizle',
       },
       list: {
         add: '%{item} Ekle',

packages/decap-cms-locales/src/vi/index.js

@@ -165,6 +165,7 @@ const vi = {
       },
       datetime: {
         now: 'Ngay lúc này',
+        clear: 'Xóa',
       },
     },
   },

packages/decap-cms-locales/src/zh_Hans/index.js

@@ -191,6 +191,7 @@ const zh_Hans = {
       },
       datetime: {
         now: '现在',
+        clear: '清除',
       },
     },
   },

packages/decap-cms-locales/src/zh_Hant/index.js

@@ -174,6 +174,7 @@ const zh_Hant = {
       },
       datetime: {
         now: '現在',
+        clear: '清除',
       },
     },
   },

packages/decap-cms-widget-datetime/package.json

@@ -23,9 +23,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
+    "dayjs": "^1.11.10",
     "react": "^18.2.0"
-  },
-  "dependencies": {
-    "react-datetime": "^3.1.1"
   }
 }