@plone/volto 14.3.0 → 14.7.0

package/src/components/theme/FormattedDate/FormattedRelativeDate.jsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {
+  formatRelativeDate,
+  long_date_format,
+  toDate,
+} from '@plone/volto/helpers/Utils/Date';
+import { useSelector } from 'react-redux';
+
+const FormattedRelativeDate = ({
+  date,
+  style,
+  relativeTo,
+  className,
+  locale,
+  children,
+  live = false,
+  refresh = 5000,
+}) => {
+  const language = useSelector((state) => locale || state.intl.locale);
+  const [liveRelativeTo, setLiveRelativeTo] = React.useState(
+    relativeTo ? toDate(relativeTo) : new Date(),
+  );
+
+  const interval = React.useRef();
+
+  React.useEffect(() => {
+    if (live) {
+      interval.current = setInterval(() => {
+        setLiveRelativeTo(new Date());
+      }, refresh);
+    }
+    return () => interval.current && clearInterval(interval.current);
+  }, [refresh, live]);
+
+  const args = { locale: language, date, style, relativeTo: liveRelativeTo };
+
+  return (
+    <time
+      className={className}
+      dateTime={date}
+      title={new Intl.DateTimeFormat(language, long_date_format).format(
+        new Date(date),
+      )}
+    >
+      {children
+        ? children(
+            formatRelativeDate({
+              ...args,
+              formatToParts: true,
+            }),
+          )
+        : formatRelativeDate(args)}
+    </time>
+  );
+};
+
+export default FormattedRelativeDate;

package/src/components/theme/FormattedDate/FormattedRelativeDate.stories.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import Wrapper from '@plone/volto/storybook';
+import FormattedRelativeDate from './FormattedRelativeDate';
+
+const date = new Date(new Date() - 1000);
+const relativeTo = new Date(new Date().getTime() + 123213124);
+
+const toDate = (date) => (typeof date === 'number' ? new Date(date) : date);
+
+function StoryComponent(args) {
+  const { style, locale, live, refresh } = args;
+  const date = toDate(args.date);
+  const relativeTo = args.relativeTo
+    ? toDate(args.relativeTo)
+    : args.relativeTo;
+  return (
+    <Wrapper
+      customStore={{ intl: { locale } }}
+      location={{ pathname: '/folder2/folder21/doc212' }}
+    >
+      <FormattedRelativeDate
+        date={date}
+        locale={locale}
+        style={style}
+        relativeTo={relativeTo}
+        live={live}
+        refresh={refresh}
+      >
+        {this.children}
+      </FormattedRelativeDate>
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  date,
+};
+
+export const Localized = StoryComponent.bind({});
+Localized.args = {
+  date,
+  locale: 'de',
+};
+
+export const Style = StoryComponent.bind({});
+Style.args = {
+  date,
+  style: 'short',
+};
+
+export const RelativeToDate = StoryComponent.bind({});
+RelativeToDate.args = {
+  date,
+  relativeTo,
+};
+
+export const LiveRefresh = StoryComponent.bind({});
+LiveRefresh.args = {
+  date,
+  live: true,
+  refresh: 1000,
+};
+
+export const SplitParts = StoryComponent.bind({
+  children: (parts) =>
+    parts.map((p, i) => (
+      <div key={i}>
+        <strong>{p.value}</strong> <small>({p.type}</small>)
+      </div>
+    )),
+});
+SplitParts.args = {
+  date,
+  long: true,
+};
+
+export default {
+  title: 'Internal Components/Formatted Relative Date',
+  component: FormattedRelativeDate,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    live: {
+      control: {
+        type: 'disabled',
+      },
+    },
+    refresh: {
+      control: {
+        type: 'disabled',
+      },
+    },
+    date: {
+      control: {
+        type: 'date',
+      },
+    },
+    relativeTo: {
+      control: {
+        type: 'date',
+      },
+    },
+    locale: {
+      control: {
+        type: 'select',
+        options: ['en', 'de', 'us'],
+      },
+    },
+    style: {
+      control: {
+        type: 'select',
+        options: ['long', 'short', 'narrow'],
+      },
+    },
+  },
+};

package/src/components/theme/Navigation/Navigation.jsx

@@ -124,7 +124,7 @@ class Navigation extends Component {
    */
   render() {
     return (
-      <nav className="navigation" id="navigation">
+      <nav className="navigation" id="navigation" aria-label="navigation">
         <div className="hamburger-wrapper mobile tablet only">
           <button
             className={cx('hamburger hamburger--spin', {

package/src/components/theme/View/EventDatesInfo.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { List } from 'semantic-ui-react';
-import moment from 'moment';
 import { useIntl } from 'react-intl';
 import cx from 'classnames';
 import { RRule, rrulestr } from 'rrule';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
-export const datesForDisplay = (start, end) => {
+export const datesForDisplay = (start, end, moment) => {
   const mStart = moment(start);
   const mEnd = moment(end);
   if (!mStart.isValid() || !mEnd.isValid()) {
@@ -24,11 +24,13 @@ export const datesForDisplay = (start, end) => {
   };
 };
 
-export const When = ({ start, end, whole_day, open_end }) => {
+const When_ = ({ start, end, whole_day, open_end, moment: momentlib }) => {
   const intl = useIntl();
+
+  const moment = momentlib.default;
   moment.locale(intl.locale);
 
-  const datesInfo = datesForDisplay(start, end);
+  const datesInfo = datesForDisplay(start, end, moment);
   if (!datesInfo) {
     return;
   }
@@ -97,6 +99,8 @@ export const When = ({ start, end, whole_day, open_end }) => {
   );
 };
 
+export const When = injectLazyLibs(['moment'])(When_);
+
 When.propTypes = {
   start: PropTypes.string.isRequired,
   end: PropTypes.string,
@@ -104,7 +108,8 @@ When.propTypes = {
   open_end: PropTypes.bool,
 };
 
-export const Recurrence = ({ recurrence, start }) => {
+export const Recurrence_ = ({ recurrence, start, moment: momentlib }) => {
+  const moment = momentlib.default;
   if (recurrence.indexOf('DTSTART') < 0) {
     var dtstart = RRule.optionsToString({
       dtstart: new Date(start),
@@ -117,11 +122,12 @@ export const Recurrence = ({ recurrence, start }) => {
     <List
       items={rrule
         .all()
-        .map((date) => datesForDisplay(date))
+        .map((date) => datesForDisplay(date, undefined, moment))
         .map((date) => date.startDate)}
     />
   );
 };
+export const Recurrence = injectLazyLibs(['moment'])(Recurrence_);
 
 Recurrence.propTypes = {
   recurrence: PropTypes.string.isRequired,

package/src/components/theme/View/EventDatesInfo.test.jsx

@@ -5,6 +5,12 @@ import { When } from './EventDatesInfo';
 import configureStore from 'redux-mock-store';
 const mockStore = configureStore();
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const store = mockStore({
   intl: {
     locale: 'en',

package/src/components/theme/View/EventView.test.jsx

@@ -14,6 +14,12 @@ const store = mockStore({
   },
 });
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const { settings } = config;
 
 test('renders an event view component with all props', () => {

package/src/config/Loadables.jsx

@@ -29,4 +29,7 @@ export const loadables = {
   diffLib: loadable.lib(() => import('diff')),
   moment: loadable.lib(() => import('moment')),
   reactDates: loadable.lib(() => import('react-dates')),
+  reactDnd: loadable.lib(() => import('react-dnd')),
+  reactDndHtml5Backend: loadable.lib(() => import('react-dnd-html5-backend')),
+  reactBeautifulDnd: loadable.lib(() => import('react-beautiful-dnd')),
 };

package/src/config/index.js

@@ -133,6 +133,7 @@ let config = {
         'prismCore',
         'toastify',
         'reactSelect',
+        'reactBeautifulDnd',
         // 'diffLib',
       ],
     },

package/src/helpers/Content/Content.js

@@ -63,3 +63,19 @@ export function getContentIcon(type, isFolderish) {
   if (type in contentIcons) return contentIcons[type];
   return isFolderish ? contentIcons.Folder : contentIcons.File;
 }
+
+/**
+ * Get the language independent fields presents in a schema.
+ * @description Configurable in config
+ * @function getLanguageIndependentFields
+ * @param {string} schema content type JSON Schema serialization
+ * @returns {array} List of language independent fields
+ */
+export function getLanguageIndependentFields(schema) {
+  const { properties } = schema;
+  return Object.keys(properties).filter(
+    (field) =>
+      Object.keys(properties[field]).includes('multilingual_options') &&
+      properties[field]['multilingual_options']?.['language_independent'],
+  );
+}

package/src/helpers/Content/Content.test.js

@@ -1,4 +1,8 @@
-import { nestContent, getContentIcon } from './Content';
+import {
+  nestContent,
+  getContentIcon,
+  getLanguageIndependentFields,
+} from './Content';
 import contentExistingSVG from '@plone/volto/icons/content-existing.svg';
 import linkSVG from '@plone/volto/icons/link.svg';
 import calendarSVG from '@plone/volto/icons/calendar.svg';
@@ -77,4 +81,19 @@ describe('Content', () => {
       expect(getContentIcon('Custom', false)).toBe(fileSVG);
     });
   });
+
+  describe('getLanguageIndependentFields', () => {
+    it('returns the language independenr field', () => {
+      const schema = {
+        properties: {
+          lif: {
+            multilingual_options: {
+              language_independent: true,
+            },
+          },
+        },
+      };
+      expect(getLanguageIndependentFields(schema)).toStrictEqual(['lif']);
+    });
+  });
 });

package/src/helpers/FormValidation/FormValidation.js

@@ -61,7 +61,7 @@ const widgetValidation = {
   },
   url: {
     isValidURL: (urlValue, urlObj, intlFunc) => {
-      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm;
+      const urlRegex = /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([_.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?|^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm;
       const isValid = urlRegex.test(urlValue);
       return !isValid ? intlFunc(messages.isValidURL) : null;
     },

package/src/helpers/Utils/Date.js

@@ -0,0 +1,97 @@
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const MONTH = DAY * 30;
+const YEAR = DAY * 365; // ? is this safe or should it be more accurate
+
+export const short_date_format = {
+  // 12/9/2021
+  year: 'numeric',
+  month: 'numeric',
+  day: 'numeric',
+};
+
+export const short_date_and_time_format = {
+  // 12/9/21, 10:39 AM
+  dateStyle: 'short',
+  timeStyle: 'short',
+};
+
+export const long_date_format = {
+  // Thursday, December 9, 2021 at 10:39 AM
+  dateStyle: 'full',
+  timeStyle: 'short',
+};
+
+export const toDate = (d) =>
+  ['string', 'number'].includes(typeof d) ? new Date(d) : d;
+
+/**
+ * Friendly formatting for dates
+ */
+export function formatDate({
+  date, // Date() or  '2022-01-03T19:26:08.999Z'
+  format, // format object, see https://tc39.es/ecma402/#datetimeformat-objects
+  locale = 'en',
+  long, // true if format should be in long readable form.
+  includeTime, // true if short date format should include time
+  formatToParts = false,
+}) {
+  date = toDate(date);
+  format = format
+    ? format
+    : long && !includeTime
+    ? long_date_format
+    : includeTime
+    ? short_date_and_time_format
+    : short_date_format;
+
+  const formatter = new Intl.DateTimeFormat(locale, format);
+  return formatToParts ? formatter.formatToParts(date) : formatter.format(date);
+}
+
+export function formatRelativeDate({
+  date,
+  locale = 'en',
+  relativeTo,
+  style = 'long', // long|short|narrow
+  formatToParts = false,
+}) {
+  date = toDate(date);
+  relativeTo = toDate(relativeTo || new Date());
+
+  const deltaMiliTime = date.getTime() - relativeTo.getTime();
+  const absDeltaMiliTime = Math.abs(deltaMiliTime);
+
+  const deltaSeconds = absDeltaMiliTime / SECOND;
+  const deltaMinutes = absDeltaMiliTime / MINUTE;
+  const deltaHours = absDeltaMiliTime / HOUR;
+  const deltaDays = absDeltaMiliTime / DAY;
+  const deltaMonths = absDeltaMiliTime / MONTH;
+  const deltaYears = absDeltaMiliTime / YEAR;
+  const deltas = [
+    deltaYears,
+    deltaMonths,
+    deltaDays,
+    deltaHours,
+    deltaMinutes,
+    deltaSeconds,
+  ];
+  const pos = deltas.map(Math.round).findIndex((d) => d > 0);
+  const tag = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'][pos];
+
+  const formatter = new Intl.RelativeTimeFormat(locale, {
+    numeric: 'auto',
+    style,
+  });
+
+  const v = Math.round(deltaMiliTime < 0 ? -1 * deltas[pos] : deltas[pos]);
+  // console.log({ date, relativeTo, v });
+
+  return isNaN(v)
+    ? ''
+    : formatToParts
+    ? formatter.formatToParts(v, tag)
+    : formatter.format(v, tag); // use "now" ?
+}

package/src/helpers/Utils/Date.test.js

@@ -0,0 +1,197 @@
+import { formatDate, formatRelativeDate } from './Date';
+
+const d = '2022-01-03T19:26:08.999Z';
+const date = new Date(d);
+
+const SECOND = 1000;
+const MINUTE = SECOND * 60;
+const HOUR = MINUTE * 60;
+const DAY = HOUR * 24;
+const MONTH = DAY * 30;
+const YEAR = DAY * 365; // ? is this safe or should it be more accurate
+
+describe('formatDate helper', () => {
+  it('accepts an iso date string', () => {
+    expect(formatDate({ date: d })).toBe('1/3/2022');
+  });
+
+  it('accepts a date object', () => {
+    expect(formatDate({ date })).toBe('1/3/2022');
+  });
+
+  it('formats a date object in other language', () => {
+    expect(formatDate({ date, locale: 'de' })).toBe('3.1.2022');
+  });
+
+  it('formats a date object with time in default en locale', () => {
+    expect(formatDate({ date, includeTime: true })).toBe('1/3/22, 7:26 PM');
+  });
+
+  it('formats a date object with time in other language', () => {
+    expect(formatDate({ date, locale: 'de', includeTime: true })).toBe(
+      '03.01.22, 19:26',
+    );
+  });
+
+  it('formats a date as long', () => {
+    expect(formatDate({ date, long: true })).toBe(
+      'Monday, January 3, 2022 at 7:26 PM',
+    );
+  });
+
+  it('formats a date as long in other language', () => {
+    expect(formatDate({ date, long: true, locale: 'de' })).toBe(
+      'Montag, 3. Januar 2022 um 19:26',
+    );
+  });
+
+  it('includeTime takes precedence over long', () => {
+    expect(formatDate({ date, long: true, includeTime: true })).toBe(
+      '1/3/22, 7:26 PM',
+    );
+  });
+
+  it('accepts custom format', () => {
+    expect(
+      formatDate({
+        date,
+        format: {
+          year: 'numeric',
+          month: 'narrow',
+          day: '2-digit',
+        },
+      }),
+    ).toBe('J 03, 2022');
+  });
+
+  it('custom format takes precedence over long and includeTime', () => {
+    expect(
+      formatDate({
+        date,
+        long: true,
+        includeTime: true,
+        format: {
+          year: 'numeric',
+          month: 'narrow',
+          day: '2-digit',
+          // dayPeriod: 'long',
+        },
+      }),
+    ).toBe('J 03, 2022');
+  });
+});
+
+describe('formatRelativeDate helper', () => {
+  it('accepts an iso date string', () => {
+    expect(formatRelativeDate({ date: d })).toBeTruthy();
+  });
+
+  it('accepts date object', () => {
+    expect(formatRelativeDate({ date })).toBeTruthy();
+  });
+
+  it('uses auto numeric to format close past days', () => {
+    const now = Date.now();
+    const d = new Date(now - 1 * DAY);
+    expect(formatRelativeDate({ date: d })).toBe('yesterday');
+  });
+
+  it('uses auto numeric to format close future days', () => {
+    const now = Date.now();
+    const d = new Date(now + 1 * DAY);
+    expect(formatRelativeDate({ date: d })).toBe('tomorrow');
+  });
+
+  it('uses auto numeric to format close future years', () => {
+    const now = Date.now();
+    const d = new Date(now + 1 * YEAR);
+    expect(formatRelativeDate({ date: d })).toBe('next year');
+  });
+
+  it('uses auto numeric to format close last years', () => {
+    const now = Date.now();
+    const d = new Date(now - 1 * YEAR);
+    expect(formatRelativeDate({ date: d })).toBe('last year');
+  });
+
+  it('accepts a relativeTo date', () => {
+    const relativeTo = new Date(date.getTime() + 4 * DAY);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 days ago');
+  });
+
+  it('can format past seconds', () => {
+    const relativeTo = new Date(date.getTime() + 4 * SECOND);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 seconds ago');
+  });
+
+  it('can format future seconds', () => {
+    const relativeTo = new Date(date.getTime() - 4 * SECOND);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 seconds');
+  });
+
+  it('can format past minutes', () => {
+    const relativeTo = new Date(date.getTime() + 4 * MINUTE);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 minutes ago');
+  });
+
+  it('can format future minutes', () => {
+    const relativeTo = new Date(date.getTime() - 4 * MINUTE);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 minutes');
+  });
+
+  it('can format past hours', () => {
+    const relativeTo = new Date(date.getTime() + 4 * HOUR);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 hours ago');
+  });
+
+  it('can format future hours', () => {
+    const relativeTo = new Date(date.getTime() - 4 * HOUR);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 hours');
+  });
+
+  it('can format past days', () => {
+    const relativeTo = new Date(date.getTime() + 4 * DAY);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 days ago');
+  });
+
+  it('can format future days', () => {
+    const relativeTo = new Date(date.getTime() - 4 * DAY);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 days');
+  });
+
+  it('can format past months', () => {
+    const relativeTo = new Date(date.getTime() + 4 * MONTH);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 months ago');
+  });
+
+  it('can format future months', () => {
+    const relativeTo = new Date(date.getTime() - 4 * MONTH);
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 months');
+  });
+
+  it('can format past years', () => {
+    const relativeTo = new Date(
+      date.getTime() + 4 * YEAR + 4 * MONTH + 4 * DAY,
+    );
+    expect(formatRelativeDate({ date, relativeTo })).toBe('4 years ago');
+  });
+
+  it('can format future years', () => {
+    const relativeTo = new Date(
+      date.getTime() - 4 * YEAR - +4 * MONTH - 4 * DAY,
+    );
+    expect(formatRelativeDate({ date, relativeTo })).toBe('in 4 years');
+  });
+
+  it('can use alternate style short', () => {
+    const now = Date.now();
+    const d = new Date(now + 3 * MONTH);
+    expect(formatRelativeDate({ date: d, style: 'short' })).toBe('in 3 mo.');
+  });
+
+  it('can use alternate style narrow', () => {
+    const now = Date.now();
+    const d = new Date(now + 3 * MONTH);
+    expect(formatRelativeDate({ date: d, style: 'narrow' })).toBe('in 3 mo.');
+  });
+});

package/src/helpers/Utils/Utils.js

@@ -1,7 +1,6 @@
 import { flatten, isEqual, isObject, transform } from 'lodash';
 import React from 'react';
 import { matchPath } from 'react-router';
-import moment from 'moment';
 import config from '@plone/volto/registry';
 
 /**
@@ -152,7 +151,7 @@ export const getColor = (name) => {
  * @param {string} format Date format of choice
  * @returns {Object|string} Moment object or string if format is set
  */
-export const parseDateTime = (locale, value, format) => {
+export const parseDateTime = (locale, value, format, moment) => {
   //  Used to set a server timezone or UTC as default
   moment.defineLocale(locale, moment.localeData(locale)._config); // copy locale to moment-timezone
   let datetime = null;