@plone/volto 14.0.1 → 14.2.0

package/src/components/manage/Widgets/VocabularyTermsWidget.stories.js

@@ -1,17 +1,19 @@
 import VocabularyTermsWidget from './VocabularyTermsWidget';
-import Wrapper from '@plone/volto/storybook';
 import React from 'react';
 
-const customStore = {
-  userSession: { token: '1234' },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-};
+import WidgetStory from './story';
 
-const WrappedJSONField = (args) => {
-  const [value, setValue] = React.useState({
+export const JSONField = WidgetStory.bind({
+  props: { id: 'simplevocabulary', title: 'Vocabulary terms' },
+  widget: VocabularyTermsWidget,
+  customStore: {
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  },
+  initialValue: {
     items: [
       {
         token: 'talk',
@@ -30,60 +32,24 @@ const WrappedJSONField = (args) => {
         },
       },
     ],
-  });
-  const onChange = (block, value) => setValue(value);
-
-  return (
-    <Wrapper
-      location={{ pathname: '/folder2/folder21/doc212' }}
-      customStore={customStore}
-    >
-      <div className="ui segment form attached">
-        <VocabularyTermsWidget
-          {...args}
-          id="simplevocabulary"
-          title="Vocabulary terms"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-        <pre>{JSON.stringify(value, null, 4)}</pre>
-      </div>
-    </Wrapper>
-  );
-};
+  },
+});
 
-const WrappedSimple = (args) => {
-  const [value, setValue] = React.useState({
+export const Simple = WidgetStory.bind({
+  props: { id: 'simplevocabulary', title: 'Vocabulary terms' },
+  widget: VocabularyTermsWidget,
+  customStore: {
+    userSession: { token: '1234' },
+    intl: {
+      locale: 'en',
+      messages: {},
+    },
+  },
+  initialValue: {
     '001': 'manual',
     '002': 'questions & answers',
-  });
-  const onChange = (block, value) => setValue(value);
-
-  return (
-    <Wrapper
-      location={{ pathname: '/folder2/folder21/doc212' }}
-      customStore={customStore}
-    >
-      <div className="ui segment form attached">
-        <VocabularyTermsWidget
-          {...args}
-          id="Simple"
-          title="Vocabulary terms"
-          block="testBlock"
-          value={value}
-          value_type={{
-            schema: {
-              type: 'string',
-            },
-          }}
-          onChange={onChange}
-        />
-        <pre>{JSON.stringify(value, null, 4)}</pre>
-      </div>
-    </Wrapper>
-  );
-};
+  },
+});
 
 export default {
   title: 'Widgets/Vocabulary',
@@ -96,6 +62,3 @@ export default {
     ),
   ],
 };
-
-export const JSONField = () => <WrappedJSONField />;
-export const Simple = () => <WrappedSimple />;

package/src/components/manage/Widgets/WysiwygWidget.stories.jsx

@@ -1,28 +1,11 @@
 import React from 'react';
 import WysiwygWidget from './WysiwygWidget';
-import Wrapper from '@plone/volto/storybook';
+import WidgetStory from './story';
 
-const WysiwygWidgetComponent = ({ children, ...args }) => {
-  const [value, setValue] = React.useState('');
-  const onChange = (block, value) => setValue(value);
-  return (
-    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <WysiwygWidget
-          {...args}
-          id="field"
-          title="Wysiwyg"
-          block="testBlock"
-          value={value}
-          onChange={onChange}
-        />
-      </div>
-      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
-    </Wrapper>
-  );
-};
-
-export const Wysiwyg = WysiwygWidgetComponent.bind({});
+export const Wysiwyg = WidgetStory.bind({
+  props: { id: 'text', title: 'Rich text' },
+  widget: WysiwygWidget,
+});
 
 export default {
   title: 'Widgets/Wysiwyg',

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+  RealStoreWrapper as Wrapper,
+  FormUndoWrapper,
+} from '@plone/volto/storybook';
+
+export default function StoryComponent({ children, ...args }) {
+  const Widget = this.widget;
+  const props = this.props || {};
+  return (
+    <Wrapper
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={this.customStore}
+    >
+      <FormUndoWrapper
+        initialState={{
+          value: args.value || args.initialValue || this.initialValue,
+        }}
+        showControls={this.showUndoControls ?? true}
+      >
+        {({ state, onChange }) => (
+          <div className="ui segment form attached" style={{ width: '400px' }}>
+            <Widget
+              id="field"
+              title="Field"
+              block="block"
+              {...args}
+              {...props}
+              value={state.value}
+              onChange={(block, value) => onChange({ value })}
+            />
+            <pre>Value: {JSON.stringify(state.value, null, 4)}</pre>
+          </div>
+        )}
+      </FormUndoWrapper>
+    </Wrapper>
+  );
+}

package/src/components/theme/ContactForm/ContactForm.jsx

@@ -221,6 +221,7 @@ export class ContactFormComponent extends Component {
             <Portal node={document.getElementById('toolbar')}>
               <Toolbar
                 pathname={this.props.pathname}
+                hideDefaultViewButtons
                 inner={
                   <Link
                     to={`${getBaseUrl(this.props.pathname)}`}

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

@@ -0,0 +1,126 @@
+import React from 'react';
+import { ContactFormComponent } from './ContactForm';
+import { injectIntl } from 'react-intl';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlContactFormComponent = injectIntl(ContactFormComponent);
+
+const actions = {
+  actions: {
+    error: null,
+    actions: {
+      document_actions: [],
+      object: [
+        {
+          icon: '',
+          id: 'view',
+          title: 'View',
+        },
+        {
+          icon: '',
+          id: 'edit',
+          title: 'Edit',
+        },
+        {
+          icon: '',
+          id: 'folderContents',
+          title: 'Contents',
+        },
+        {
+          icon: '',
+          id: 'history',
+          title: 'History',
+        },
+        {
+          icon: '',
+          id: 'local_roles',
+          title: 'Sharing',
+        },
+      ],
+      object_buttons: [],
+      portal_tabs: [
+        {
+          icon: '',
+          id: 'index_html',
+          title: 'Home',
+        },
+      ],
+      site_actions: [
+        {
+          icon: '',
+          id: 'sitemap',
+          title: 'Site Map',
+        },
+        {
+          icon: '',
+          id: 'accessibility',
+          title: 'Accessibility',
+        },
+        {
+          icon: '',
+          id: 'contact',
+          title: 'Contact',
+        },
+      ],
+      user: [
+        {
+          icon: '',
+          id: 'preferences',
+          title: 'Preferences',
+        },
+        {
+          icon: '',
+          id: 'dashboard',
+          title: 'Dashboard',
+        },
+        {
+          icon: '',
+          id: 'plone_setup',
+          title: 'Site Setup',
+        },
+        {
+          icon: '',
+          id: 'logout',
+          title: 'Log out',
+        },
+      ],
+    },
+    loaded: true,
+    loading: false,
+  },
+};
+
+function StoryComponent(props) {
+  return (
+    <Wrapper customStore={{ actions, unlockRequest: {} }}>
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlContactFormComponent
+        {...props}
+        pathname="/contact"
+        error={props.error ? { message: props.error } : null}
+      />
+    </Wrapper>
+  );
+}
+
+export const ContactForm = StoryComponent.bind({});
+ContactForm.args = {
+  error: { message: 'Something' },
+  loading: false,
+  loaded: true,
+};
+
+export default {
+  title: 'Public components/Contact Form',
+  component: ContactFormComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    error: { control: 'text' },
+  },
+};

package/src/components/theme/CorsError/CorsError.jsx

@@ -61,8 +61,8 @@ const CorsError = () => (
           }}
         >
           <FormattedMessage
-            id="The backend server of your website is not anwering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
-            defaultMessage="The backend server of your website is not anwering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
+            id="The backend server of your website is not answering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
+            defaultMessage="The backend server of your website is not answering, we apologize for the inconvenience. Please try to re-load the page and try again. If the problem persists please contact the site administrators."
           />
         </p>
 

package/src/config/Blocks.jsx

@@ -454,5 +454,12 @@ const blocksConfig = {
 const requiredBlocks = ['title'];
 
 const initialBlocks = {};
+const initialBlocksFocus = {}; //{Document:'title'}
 
-export { groupBlocksOrder, requiredBlocks, blocksConfig, initialBlocks };
+export {
+  groupBlocksOrder,
+  requiredBlocks,
+  blocksConfig,
+  initialBlocks,
+  initialBlocksFocus,
+};

package/src/config/Loadables.jsx

@@ -27,4 +27,6 @@ export const loadables = {
     },
   ),
   diffLib: loadable.lib(() => import('diff')),
+  moment: loadable.lib(() => import('moment')),
+  reactDates: loadable.lib(() => import('react-dates')),
 };

package/src/config/index.js

@@ -26,6 +26,7 @@ import {
   requiredBlocks,
   blocksConfig,
   initialBlocks,
+  initialBlocksFocus,
 } from './Blocks';
 import { loadables } from './Loadables';
 
@@ -157,6 +158,7 @@ let config = {
     showSelfRegistration: false,
     contentMetadataTagsImageField: 'image',
     hasWorkingCopySupport: false,
+    maxUndoLevels: 200, // undo history size for the main form
   },
   widgets: {
     ...widgetMapping,
@@ -173,6 +175,7 @@ let config = {
     blocksConfig,
     groupBlocksOrder,
     initialBlocks,
+    initialBlocksFocus,
     showEditBlocksInBabelView: false,
   },
   addonRoutes: [],

package/src/helpers/Html/Html.jsx

@@ -123,23 +123,13 @@ class Html extends Component {
             }}
           />
 
+          <link rel="icon" href="/favicon.ico" sizes="any" />
+          <link rel="icon" href="/icon.svg" type="image/svg+xml" />
           <link
             rel="apple-touch-icon"
             sizes="180x180"
             href="/apple-touch-icon.png"
           />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="32x32"
-            href="/favicon-32x32.png"
-          />
-          <link
-            rel="icon"
-            type="image/png"
-            sizes="16x16"
-            href="/favicon-16x16.png"
-          />
           <link rel="manifest" href="/site.webmanifest" />
           <meta name="generator" content="Plone 6 - https://plone.org" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />

package/src/helpers/UndoManager/useUndoManager.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import Undoo from 'undoo';
+
+// Code based on Apache-2.0 License
+// https://github.com/reaviz/reaflow/blob/78d60aa04f514947a17097c906efdbbd6bae5080/src/helpers/useUndo.ts
+
+const useUndoManager = (
+  state,
+  onUndoRedo,
+  { maxUndoLevels, enableHotKeys = true },
+) => {
+  const [canUndo, setCanUndo] = React.useState(false);
+  const [canRedo, setCanRedo] = React.useState(false);
+  const manager = React.useRef(new Undoo({ maxLength: maxUndoLevels }));
+  // Reference:
+  // https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback
+  const callbackRef = React.useRef(onUndoRedo);
+  React.useEffect(() => {
+    callbackRef.current = onUndoRedo;
+  }, [onUndoRedo]);
+
+  const doUndo = React.useCallback(() => {
+    manager.current.undo(({ state }) => {
+      const nextUndo = manager.current.canUndo();
+      const nextRedo = manager.current.canRedo();
+      setCanUndo(nextUndo);
+      setCanRedo(nextRedo);
+
+      callbackRef.current({
+        state,
+        type: 'undo',
+        canUndo: nextUndo,
+        canRedo: nextRedo,
+      });
+    });
+  }, []);
+
+  React.useEffect(() => {
+    manager.current.save({
+      state,
+    });
+
+    setCanUndo(manager.current.canUndo());
+    setCanRedo(manager.current.canRedo());
+  }, [state]);
+
+  const doRedo = React.useCallback(() => {
+    manager.current.redo(({ state }) => {
+      const nextUndo = manager.current.canUndo();
+      const nextRedo = manager.current.canRedo();
+      setCanUndo(nextUndo);
+      setCanRedo(nextRedo);
+
+      callbackRef.current({
+        state,
+        type: 'redo',
+        canUndo: nextUndo,
+        canRedo: nextRedo,
+      });
+    });
+  }, []);
+
+  const handleKeys = React.useCallback(
+    (event) => {
+      const keyName = event.key;
+
+      if (keyName === 'Control' || keyName === 'Meta') {
+        // do not alert when only Control key is pressed.
+        return;
+      }
+      if (event.ctrlKey || event.metaKey) {
+        if (keyName === 'z') {
+          event.preventDefault();
+          event.stopPropagation();
+          doUndo();
+        } else if (keyName === 'y') {
+          event.preventDefault();
+          event.stopPropagation();
+          doRedo();
+        }
+      } else {
+        return;
+      }
+    },
+    [doUndo, doRedo],
+  );
+
+  React.useEffect(() => {
+    if (!enableHotKeys) return;
+    document.addEventListener('keydown', handleKeys);
+    return () => document.removeEventListener('keydown', handleKeys);
+  }, [enableHotKeys, handleKeys]);
+
+  return {
+    doUndo,
+    doRedo,
+    canUndo,
+    canRedo,
+  };
+};
+
+export default useUndoManager;

package/src/helpers/index.js

@@ -89,3 +89,4 @@ export { userHasRoles } from './User/User';
 export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { usePrevious } from './Utils/usePrevious';
 export { usePagination } from './Utils/usePagination';
+export useUndoManager from './UndoManager/useUndoManager';

package/src/reducers/vocabularies/vocabularies.js

@@ -71,6 +71,7 @@ export default function vocabularies(state = initialState, action = {}) {
             [action.vocabulary]: {
               ...vocabState,
               subrequests: {
+                ...vocabState.subrequests,
                 [action.subrequest]: {
                   ...subrequestState,
                   error: null,
@@ -141,8 +142,18 @@ export default function vocabularies(state = initialState, action = {}) {
                   ...subrequestState,
                   error: null,
                   loaded: true,
-                  loading: !!(vocabState[action.subrequest].loading - 1),
-                  [action.token]: action.result.items[0].title,
+                  loading: !!(subrequestState.loading - 1),
+                  ...(action.token && {
+                    [action.token]: action.result.items[0].title,
+                  }),
+                  ...(action.tokens && {
+                    items: [
+                      ...action.result.items.map((item) => ({
+                        label: item.title,
+                        value: item.token,
+                      })),
+                    ],
+                  }),
                 },
               },
             },

package/src/store.js

@@ -15,7 +15,7 @@ const configureStore = (initialState, history, apiHelper) => {
     routerMiddleware(history),
     crashReporter,
     thunk,
-    api(apiHelper),
+    ...(apiHelper ? [api(apiHelper)] : []),
     ...(__CLIENT__
       ? [save({ states: config.settings.persistentReducers, debounce: 500 })]
       : []),

package/src/storybook.jsx

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
 import { createBrowserHistory } from 'history';
 import React, { Component } from 'react';
+import { Button } from 'semantic-ui-react';
 import { Provider } from 'react-redux';
 import { StaticRouter } from 'react-router-dom';
 import { IntlProvider } from 'react-intl';
 import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
+import { useUndoManager } from '@plone/volto/helpers';
 import configureStore from 'redux-mock-store';
 import configureRealStore from '@plone/volto/store';
 
@@ -612,6 +614,11 @@ const initialState = () => ({
     items: [],
   },
   content: {
+    unlock: {
+      loaded: false,
+      loading: false,
+      error: null,
+    },
     create: {
       loaded: false,
       loading: false,
@@ -1452,3 +1459,51 @@ export class RealStoreWrapper extends Component {
     );
   }
 }
+
+export const FormUndoWrapper = ({
+  initialState = {},
+  children,
+  showControls = true,
+}) => {
+  const [state, setState] = React.useState(initialState);
+
+  const onUndoRedo = React.useCallback(({ state }) => setState(state), []);
+
+  const { doUndo, doRedo, canUndo, canRedo } = useUndoManager(
+    state,
+    onUndoRedo,
+    {
+      maxUndoLevels: 200,
+    },
+  );
+
+  return (
+    <div>
+      <div>{children({ state, onChange: setState })}</div>
+      {showControls && (
+        <div>
+          <Button
+            size="mini"
+            compact
+            className="undo"
+            onClick={() => doUndo()}
+            aria-label="Undo"
+            disabled={!canUndo}
+          >
+            Undo
+          </Button>
+          <Button
+            size="mini"
+            compact
+            className="redo"
+            onClick={() => doRedo()}
+            aria-label="Redo"
+            disabled={!canRedo}
+          >
+            Redo
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};

package/theme/themes/pastanaga/extras/time-picker-overrides.less

@@ -34,8 +34,8 @@
     max-width: none;
 
     .rc-time-picker-panel-inner {
-      width: @timePickerWidthNarrow;
       right: 84px;
+      width: @timePickerWidthNarrow;
     }
   }