Look ma, no momentjs! (#2910)

* WIP

* More developments

* Enable the format prop; add FormattedI18nDate story

* WIP on adding relative formatted date

* Rename to FormattedDate, move date utils to helpers/Utils/Date

* Add impl and test for formatRelativeDate

* Add support for the style

* Rename to FormattedRelativeDate

* Upgrade jest

* Update History snapshot as it is now more correct

* Add support for classNames; update snapshots; no need to mock momentjs

* Allow passing the locale to date formatting utils

* Try to fix problem on CI

* Remove intl hack

* Remove intl hack

* Avoid platform differences

* Add full-icu

* Avoid platform differences

* WIP Add support for formatToParts

* Add Splitparts story

* Add FormattedRelativeDate story

* Add relative to date story

* Add live refresh to relative date

* Fix display of relative date in ContentsUploadModal

* Fix display of relative date in ModerateComments

* Add some test for parseDateTime

* Lazyload momentjs in dates display

* Use lazyload moment in RecurrenceWidget and Occurences

* More lazyload momentjs

* More lazyload momentjs

* Update changelog

* Fix use of moment lib

* Update yarn.lock

* Testing CI build, remove full-icu from test command

* Bring back full-icu env option to make it build for node v12

Co-authored-by: Tiberiu Ichim <[email protected]>

Author: sneridagh

Diff for: CHANGELOG.md

@@ -6,10 +6,16 @@
 
 ### Feature
 
+- Add `<FormattedDate>` and `<FormattedRelativeDate>` components. Check their Storybook stories for details. This is part of ongoing work to minimize the use of 'deprecated' momentjs. @sneridagh @tiberiuichim
+
 ### Bugfix
 
 ### Internal
 
+- Upgrade jest to latest release, 27 major. @tiberiuichim
+- Lazyload momentjs. `parseDateTime` helper now requires passing the momentjs library @tiberiuichim
+
+- Lazyload react-beautiful-dnd @tiberiuichim
 ## 14.6.0 (2022-01-27)
 
 ### Feature

Diff for: package.json

@@ -35,7 +35,7 @@
     "build": "razzle build",
     "build-spa": "razzle build --type=spa",
     "test": "razzle test --env=jest-environment-jsdom-sixteen --maxWorkers=50%",
-    "test:ci": "CI=true razzle test --env=jest-environment-jsdom-sixteen",
+    "test:ci": "CI=true NODE_ICU_DATA=node_modules/full-icu razzle test --env=jest-environment-jsdom-sixteen",
     "test:husky": "CI=true yarn test --bail --findRelatedTests",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",
     "start:prod": "NODE_ENV=production node build/server.js",
@@ -414,7 +414,9 @@
     "@storybook/react": "^6.3.0",
     "babel-loader": "^8.1.0",
     "crypto-random-string": "3.2.0",
+    "full-icu": "1.4.0",
     "identity-obj-proxy": "3.0.0",
+    "jest": "27.4.5",
     "jest-environment-jsdom-sixteen": "1.0.3",
     "react-is": "^16.13.1",
     "tmp": "0.2.1",

Diff for: src/components/index.js

@@ -198,5 +198,7 @@ export ToCSettingsSchema from '@plone/volto/components/manage/Blocks/ToC/Schema'
 
 export MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
 export ContentMetadataTags from '@plone/volto/components/theme/ContentMetadataTags/ContentMetadataTags';
+export FormattedDate from '@plone/volto/components/theme/FormattedDate/FormattedDate';
+export FormattedRelativeDate from '@plone/volto/components/theme/FormattedDate/FormattedRelativeDate';
 
 export App from '@plone/volto/components/theme/App/App';

Diff for: src/components/manage/Contents/Contents.test.jsx

@@ -24,13 +24,6 @@ jest.mock('./ContentsUploadModal', () =>
   jest.fn(() => <div className="UploadModal" />),
 );
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-    fromNow: jest.fn(() => 'a few seconds ago'),
-  })),
-);
-
 describe('Contents', () => {
   it('renders a folder contents view component', () => {
     const store = mockStore({

Diff for: src/components/manage/Contents/ContentsItem.jsx

@@ -8,9 +8,8 @@ import { Button, Dropdown, Table } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
-import { Icon, Circle } from '@plone/volto/components';
+import { Circle, FormattedDate, Icon } from '@plone/volto/components';
 import { getContentIcon } from '@plone/volto/helpers';
 import moreSVG from '@plone/volto/icons/more.svg';
 import checkboxUncheckedSVG from '@plone/volto/icons/checkbox-unchecked.svg';
@@ -48,6 +47,10 @@ const messages = defineMessages({
     id: 'no workflow state',
     defaultMessage: 'No workflow state',
   },
+  none: {
+    id: 'None',
+    defaultMessage: 'None',
+  },
 });
 
 function getColor(string) {
@@ -187,21 +190,13 @@ export const ContentsItemComponent = ({
               </div>
             )}
             {index.type === 'date' && (
-              <span
-                title={
-                  item[index.id] !== 'None' ? (
-                    moment(item[index.id]).format('LLLL')
-                  ) : (
-                    <FormattedMessage id="None" defaultMessage="None" />
-                  )
-                }
-              >
+              <>
                 {item[index.id] !== 'None' ? (
-                  moment(item[index.id]).format('L')
+                  <FormattedDate date={item[index.id]} />
                 ) : (
-                  <FormattedMessage id="None" defaultMessage="None" />
+                  intl.formatMessage(messages.none)
                 )}
-              </span>
+              </>
             )}
             {index.type === 'array' && (
               <span>{item[index.id]?.join(', ')}</span>

Diff for: src/components/manage/Contents/ContentsUploadModal.jsx

@@ -20,10 +20,10 @@ import {
 } from 'semantic-ui-react';
 import loadable from '@loadable/component';
 import { concat, filter, map } from 'lodash';
-import moment from 'moment';
 import filesize from 'filesize';
 import { readAsDataURL } from 'promise-file-reader';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
+import { FormattedRelativeDate } from '@plone/volto/components';
 import { createContent } from '@plone/volto/actions';
 
 const Dropzone = loadable(() => import('react-dropzone'));
@@ -180,8 +180,6 @@ class ContentsUploadModal extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    moment.locale(this.props.intl.locale);
-
     return (
       this.props.open && (
         <Modal open={this.props.open}>
@@ -269,7 +267,7 @@ class ContentsUploadModal extends Component {
                     <Table.Row className="upload-row" key={file.name}>
                       <Table.Cell>{file.name}</Table.Cell>
                       <Table.Cell>
-                        {moment(file.lastModifiedDate).fromNow()}
+                        <FormattedRelativeDate date={file.lastModifiedDate} />
                       </Table.Cell>
                       <Table.Cell>
                         {filesize(file.size, { round: 0 })}

Diff for: src/components/manage/Controlpanels/ModerateComments.jsx

@@ -11,11 +11,15 @@ import { Link } from 'react-router-dom';
 import { getParentUrl, Helmet } from '@plone/volto/helpers';
 import { Portal } from 'react-portal';
 import { Container, Button, Table } from 'semantic-ui-react';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 
 import { deleteComment, searchContent } from '@plone/volto/actions';
-import { CommentEditModal, Icon, Toolbar } from '@plone/volto/components';
+import {
+  CommentEditModal,
+  FormattedRelativeDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -230,9 +234,7 @@ class ModerateComments extends Component {
                     <Table.Row key={item['@id']}>
                       <Table.Cell>{item.author_name}</Table.Cell>
                       <Table.Cell>
-                        <span title={moment(item.creation_date).format('LLLL')}>
-                          {moment(item.creation_date).fromNow()}
-                        </span>
+                        <FormattedRelativeDate date={item.creation_date} />
                       </Table.Cell>
                       <Table.Cell>{item.text.data}</Table.Cell>
                       <Table.Cell>

Diff for: src/components/manage/Diff/Diff.jsx

@@ -12,7 +12,6 @@ import { filter, isEqual, map } from 'lodash';
 import { Container, Button, Dropdown, Grid, Table } from 'semantic-ui-react';
 import { Link, withRouter } from 'react-router-dom';
 import { Portal } from 'react-portal';
-import moment from 'moment';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
 import qs from 'query-string';
 
@@ -23,7 +22,12 @@ import {
   getBlocksLayoutFieldname,
   hasBlocksData,
 } from '@plone/volto/helpers';
-import { DiffField, Icon, Toolbar } from '@plone/volto/components';
+import {
+  DiffField,
+  FormattedDate,
+  Icon,
+  Toolbar,
+} from '@plone/volto/components';
 
 import backSVG from '@plone/volto/icons/back.svg';
 
@@ -189,9 +193,13 @@ class Diff extends Component {
     const versions = map(
       filter(this.props.historyEntries, (entry) => 'version' in entry),
       (entry, index) => ({
-        text: `${index === 0 ? 'Current' : entry.version} (${moment(
-          entry.time,
-        ).format('LLLL')}, ${entry.actor.fullname})`,
+        text: (
+          <>
+            {index === 0 ? 'Current' : entry.version}&nbsp;(
+            <FormattedDate date={entry.time} long className="text" />, &nbsp;
+            {entry.actor.fullname})
+          </>
+        ),
         value: `${entry.version}`,
         key: `${entry.version}`,
       }),

Diff for: src/components/manage/Diff/Diff.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-// import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
@@ -12,11 +11,6 @@ const mockStore = configureStore();
 jest.mock('react-portal', () => ({
   Portal: jest.fn(() => <div id="Portal" />),
 }));
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(

Diff for: src/components/manage/Diff/DiffField.jsx

@@ -8,11 +8,11 @@ import React from 'react';
 import { join, map } from 'lodash';
 import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import moment from 'moment';
 import ReactDOMServer from 'react-dom/server';
 import { Provider } from 'react-intl-redux';
 import { createBrowserHistory } from 'history';
 import { ConnectedRouter } from 'connected-react-router';
+import { useSelector } from 'react-redux';
 
 import { Api } from '@plone/volto/helpers';
 import configureStore from '@plone/volto/store';
@@ -44,6 +44,11 @@ const DiffField = ({
   schema,
   diffLib,
 }) => {
+  const language = useSelector((state) => state.intl.locale);
+  const readable_date_format = {
+    dateStyle: 'full',
+    timeStyle: 'short',
+  };
   const diffWords = (oneStr, twoStr) => {
     return diffLib.diffWords(String(oneStr), String(twoStr));
   };
@@ -56,8 +61,12 @@ const DiffField = ({
         break;
       case 'datetime':
         parts = diffWords(
-          moment(one).format('LLLL'),
-          moment(two).format('LLLL'),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(one),
+          ),
+          new Intl.DateTimeFormat(language, readable_date_format).format(
+            new Date(two),
+          ),
         );
         break;
       case 'json':

Diff for: src/components/manage/Diff/DiffField.test.jsx

@@ -5,12 +5,6 @@ import { waitFor, render, screen } from '@testing-library/react';
 
 import DiffField from './DiffField';
 
-jest.mock('moment', () =>
-  jest.fn(() => ({
-    format: jest.fn(() => 'Sunday, April 23, 2017 3:38 AM'),
-  })),
-);
-
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>