@plone/volto 14.6.0 → 14.8.1

package/src/components/manage/Widgets/RecurrenceWidget/Occurences.jsx

@@ -6,12 +6,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import moment from 'moment';
 import cx from 'classnames';
 import { List, Button, Header, Label } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
 import addSVG from '@plone/volto/icons/circle-plus.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import { toISOString } from './Utils';
 
@@ -46,7 +46,7 @@ const messages = defineMessages({
   },
 });
 
-const formatDate = (d) => {
+const formatDate = (d, moment) => {
   const m = moment(d);
   return m.format('dddd') + ', ' + m.format('LL');
 };
@@ -56,14 +56,16 @@ const formatDate = (d) => {
  * @function Occurences
  * @returns {string} Markup of the component.
  */
-const Occurences = ({
+const Occurences_ = ({
   rruleSet,
   exclude,
   undoExclude,
   intl,
   showTitle,
   editOccurences,
+  moment: momentlib,
 }) => {
+  const moment = momentlib.default;
   moment.locale(intl.locale);
   let all = [];
   const isExcluded = (date) => {
@@ -154,7 +156,7 @@ const Occurences = ({
                 </List.Content>
               )}
               <List.Content className={cx({ excluded: excluded })}>
-                {formatDate(date)}
+                {formatDate(date, moment)}
                 {isAdditional(date) && (
                   <Label
                     pointing="left"
@@ -182,6 +184,8 @@ const Occurences = ({
   );
 };
 
+export const Occurences = injectLazyLibs(['moment'])(Occurences_);
+
 /**
  * Property types.
  * @property {Object} propTypes Property types.

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.jsx

@@ -5,7 +5,7 @@
 
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import moment from 'moment';
+import { compose } from 'redux';
 import { RRule, RRuleSet, rrulestr } from 'rrule';
 
 import cx from 'classnames';
@@ -22,6 +22,7 @@ import {
 } from 'semantic-ui-react';
 
 import { SelectWidget, Icon, DatetimeWidget } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import saveSVG from '@plone/volto/icons/save.svg';
 import editingSVG from '@plone/volto/icons/editing.svg';
@@ -179,7 +180,8 @@ class RecurrenceWidget extends Component {
   constructor(props, intl) {
     super(props);
 
-    moment.locale(this.props.intl.locale);
+    this.moment = this.props.moment.default;
+    this.moment.locale(this.props.intl.locale);
 
     let rruleSet = this.props.value
       ? rrulestr(props.value, {
@@ -197,7 +199,7 @@ class RecurrenceWidget extends Component {
       open: false,
       rruleSet: rruleSet,
       formValues: this.getFormValues(rruleSet),
-      RRULE_LANGUAGE: rrulei18n(this.props.intl),
+      RRULE_LANGUAGE: rrulei18n(this.props.intl, this.moment),
     };
   }
 
@@ -257,8 +259,8 @@ class RecurrenceWidget extends Component {
 
   getUTCDate = (date) => {
     return date.match(/T(.)*(-|\+|Z)/g)
-      ? moment(date).utc()
-      : moment(`${date}Z`).utc();
+      ? this.moment(date).utc()
+      : this.moment(`${date}Z`).utc();
   };
 
   show = (dimmer) => () => {
@@ -412,7 +414,7 @@ class RecurrenceWidget extends Component {
           }
           break;
         case 'until':
-          value = value ? moment(new Date(value)).utc().toDate() : null;
+          value = value ? this.moment(new Date(value)).utc().toDate() : null;
           break;
         default:
           break;
@@ -437,7 +439,7 @@ class RecurrenceWidget extends Component {
         ? value
         : rruleSet.dtstart()
         ? rruleSet.dtstart()
-        : moment().utc().toDate();
+        : this.moment().utc().toDate();
     var exdates =
       field === 'exdates' ? value : Object.assign([], rruleSet.exdates());
 
@@ -457,6 +459,7 @@ class RecurrenceWidget extends Component {
   };
 
   getDefaultUntil = (freq) => {
+    const moment = this.moment;
     var end = this.props.formData?.end
       ? toISOString(this.getUTCDate(this.props.formData.end).toDate())
       : null;
@@ -495,18 +498,19 @@ class RecurrenceWidget extends Component {
   changeField = (formValues, field, value) => {
     //  git p.log('field', field, 'value', value);
     //get weekday from state.
-    var byweekday =
+    const moment = this.moment;
+    const byweekday =
       this.state?.rruleSet?.rrules().length > 0
         ? this.state.rruleSet.rrules()[0].origOptions.byweekday
         : null;
-    var currWeekday = this.getWeekday(moment().day() - 1);
-    var currMonth = moment().month() + 1;
+    const currWeekday = this.getWeekday(moment().day() - 1);
+    const currMonth = moment().month() + 1;
 
-    var startMonth = this.props.formData?.start
+    const startMonth = this.props.formData?.start
       ? moment(this.props.formData.start).month() + 1
       : currMonth;
 
-    var startWeekday = this.props.formData?.start
+    const startWeekday = this.props.formData?.start
       ? this.getWeekday(moment(this.props.formData.start).day() - 1)
       : currWeekday;
     formValues[field] = value;
@@ -687,6 +691,7 @@ class RecurrenceWidget extends Component {
   };
 
   addDate = (date) => {
+    const moment = this.moment;
     let all = concat(this.state.rruleSet.all(), this.state.rruleSet.exdates());
 
     var simpleDate = moment(new Date(date)).startOf('day').toDate().getTime();
@@ -957,4 +962,7 @@ class RecurrenceWidget extends Component {
   }
 }
 
-export default injectIntl(RecurrenceWidget);
+export default compose(
+  injectLazyLibs(['moment']),
+  injectIntl,
+)(RecurrenceWidget);

package/src/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget.test.jsx

@@ -6,6 +6,12 @@ import { waitFor } from '@testing-library/react';
 
 import RecurrenceWidget from './RecurrenceWidget';
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 const mockStore = configureStore();
 
 test('renders a recurrence widget component', async () => {

package/src/components/manage/Widgets/RecurrenceWidget/Utils.js

@@ -1,5 +1,4 @@
 import { RRule } from 'rrule';
-import moment from 'moment';
 import { defineMessages } from 'react-intl';
 
 export const Days = {
@@ -43,7 +42,7 @@ export const toISOString = (date) => {
   return date.toISOString().split('T')[0];
 };
 
-export const rrulei18n = (intl) => {
+export const rrulei18n = (intl, moment) => {
   moment.locale(intl.locale);
 
   const messages = defineMessages({

package/src/components/manage/Widgets/RecurrenceWidget/WeekdayOfTheMonthField.jsx

@@ -5,11 +5,11 @@
 
 import React from 'react';
 import { map } from 'lodash';
-import moment from 'moment';
 import { useIntl } from 'react-intl';
 import { Days } from './Utils';
 import SelectInput from './SelectInput';
 import { Form } from 'semantic-ui-react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 /**
  * WeekdayOfTheMonthField component class.
@@ -18,8 +18,10 @@ import { Form } from 'semantic-ui-react';
  */
 
 const WeekdayOfTheMonthField = (props) => {
-  const { disabled = false } = props;
+  const { disabled = false, moment: momentlib } = props;
   const intl = useIntl();
+
+  const moment = momentlib.default;
   moment.locale(intl.locale);
 
   const weekdayOfTheMonthList = [
@@ -40,4 +42,4 @@ const WeekdayOfTheMonthField = (props) => {
   );
 };
 
-export default WeekdayOfTheMonthField;
+export default injectLazyLibs(['moment'])(WeekdayOfTheMonthField);

package/src/components/manage/Widgets/UrlWidget.jsx

@@ -101,6 +101,7 @@ export const UrlWidget = (props) => {
             <Button
               basic
               className="cancel"
+              aria-label="clearUrlBrowser"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -115,6 +116,7 @@ export const UrlWidget = (props) => {
             <Button
               basic
               icon
+              aria-label="openUrlBrowser"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();

package/src/components/theme/App/App.jsx

@@ -146,7 +146,10 @@ class App extends Component {
         <SkipLinks />
         <Header pathname={path} />
         <Breadcrumbs pathname={path} />
-        <MultilingualRedirector pathname={this.props.pathname}>
+        <MultilingualRedirector
+          pathname={this.props.pathname}
+          contentLanguage={this.props.content?.language?.token}
+        >
           <Segment basic className="content-area">
             <main>
               <OutdatedBrowser />

package/src/components/theme/Comments/Comments.jsx

@@ -11,7 +11,6 @@ import {
 } from '@plone/volto/actions';
 import { Avatar, CommentEditModal, Form } from '@plone/volto/components';
 import { flattenToAppURL, getBaseUrl, getColor } from '@plone/volto/helpers';
-import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
@@ -19,6 +18,7 @@ import { Portal } from 'react-portal';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { Button, Comment, Container, Icon } from 'semantic-ui-react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 // import { Button, Grid, Segment, Container } from 'semantic-ui-react';
 
 const messages = defineMessages({
@@ -297,6 +297,7 @@ class Comments extends Component {
    */
   render() {
     const { items } = this.props;
+    const moment = this.props.moment.default;
     const { collapsedComments } = this.state;
     // object with comment ids, to easily verify if any comment has children
     const allCommentsWithCildren = this.addRepliesAsChildrenToComments(items);
@@ -471,6 +472,7 @@ class Comments extends Component {
 
 export default compose(
   injectIntl,
+  injectLazyLibs(['moment']),
   connect(
     (state) => ({
       items: state.comments.items,

package/src/components/theme/Comments/Comments.test.jsx

@@ -14,6 +14,12 @@ jest.mock('moment', () =>
   })),
 );
 
+jest.mock('@plone/volto/helpers/Loadable/Loadable');
+beforeAll(
+  async () =>
+    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
+);
+
 describe('Comments', () => {
   it('renders a comments component', () => {
     const store = mockStore({

package/src/components/theme/Component/Component.jsx

@@ -0,0 +1,19 @@
+import registry from '@plone/volto/registry';
+
+/**
+ * A component that can autommatically look up its implementation from the
+ * registry based on the provided component name
+ */
+const Component = ({ name, ...rest }) => {
+  const Component = registry.resolve(name)?.component;
+
+  if (!Component) {
+    // eslint-disable-next-line no-console
+    console.warn(`Component not found in registry: ${name}`);
+    return null;
+  }
+
+  return <Component {...rest} />;
+};
+
+export default Component;

package/src/components/theme/Component/Component.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render } from '@testing-library/react';
+import Component from './Component';
+import config from '@plone/volto/registry';
+
+config.set('components', {
+  Toolbar: { component: (props) => <div>this is the Toolbar component</div> },
+  'Toolbar.Types': {
+    component: ({ teststring }) => (
+      <div>this is the Toolbar component with a prop {teststring} in it</div>
+    ),
+  },
+});
+
+describe('Component component :P', () => {
+  it('Render a Component in the registry', () => {
+    const { container } = render(<Component name="Toolbar" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('Renders a Fallback Component that does not exists in the registry', () => {
+    const { container } = render(<Component name="Toolbar.Foo" />);
+    expect(container).toMatchSnapshot();
+  });
+  it('Renders a Component in the registry - passes props correctly', () => {
+    const { container } = render(
+      <Component name="Toolbar.Types" teststring="Hi!" />,
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { formatDate, long_date_format } from '@plone/volto/helpers/Utils/Date';
+import { useSelector } from 'react-redux';
+
+/**
+ * Friendly formatting of dates
+ */
+const FormattedDate = ({
+  date,
+  format,
+  long,
+  includeTime,
+  relative,
+  className,
+  locale,
+  children,
+}) => {
+  const language = useSelector((state) => locale || state.intl.locale);
+  const toDate = (d) => (typeof d === 'string' ? new Date(d) : d);
+  const args = { date, long, includeTime, format, locale: language };
+
+  return (
+    <time
+      className={className}
+      dateTime={date}
+      title={new Intl.DateTimeFormat(language, long_date_format).format(
+        new Date(toDate(date)),
+      )}
+    >
+      {children
+        ? children(
+            formatDate({
+              ...args,
+              formatToParts: true,
+            }),
+          )
+        : formatDate(args)}
+    </time>
+  );
+};
+
+export default FormattedDate;

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import Wrapper from '@plone/volto/storybook';
+import FormattedDate from './FormattedDate';
+
+const date = new Date();
+
+function StoryComponent(args) {
+  const { date, format, long, includeTime, locale } = args;
+  return (
+    <Wrapper
+      customStore={{ intl: { locale } }}
+      location={{ pathname: '/folder2/folder21/doc212' }}
+    >
+      <FormattedDate
+        date={date}
+        format={format}
+        long={long}
+        locale={locale}
+        includeTime={includeTime}
+      >
+        {this.children}
+      </FormattedDate>
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  date,
+};
+
+export const Localized = StoryComponent.bind({});
+Localized.args = {
+  date,
+  locale: 'de',
+};
+
+export const Long = StoryComponent.bind({});
+Long.args = {
+  date,
+  long: true,
+};
+
+export const IncludeTime = StoryComponent.bind({});
+IncludeTime.args = {
+  date,
+  includeTime: true,
+};
+
+export const CustomFormat = StoryComponent.bind({});
+CustomFormat.args = {
+  date,
+  format: {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  },
+};
+
+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 Date',
+  component: FormattedDate,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    locale: {
+      control: {
+        type: 'select',
+        options: ['en', 'de', 'us'],
+      },
+    },
+  },
+};

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'],
+      },
+    },
+  },
+};