@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/helpers/FormValidation/validators.ts

@@ -0,0 +1,203 @@
+import { validationMessage } from '@plone/volto/helpers/FormValidation/FormValidation';
+import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+
+type MinMaxValidator = {
+  value: string | number;
+  fieldSpec: string | number;
+  criterion: string;
+  formatMessage: Function;
+};
+
+type Validator = {
+  value: string;
+  field: Record<string, any>;
+  formData: any;
+  formatMessage: Function;
+};
+
+export const isMaxPropertyValid = ({
+  value,
+  fieldSpec,
+  criterion,
+  formatMessage,
+}: MinMaxValidator) => {
+  const isValid = fieldSpec !== undefined ? value <= fieldSpec : true;
+  return validationMessage(isValid, criterion, fieldSpec, formatMessage);
+};
+
+export const isMinPropertyValid = ({
+  value,
+  fieldSpec,
+  criterion,
+  formatMessage,
+}: MinMaxValidator) => {
+  const isValid = fieldSpec !== undefined ? value >= fieldSpec : true;
+  return validationMessage(isValid, criterion, fieldSpec, formatMessage);
+};
+
+export const minLengthValidator = ({
+  value,
+  field,
+  formatMessage,
+}: Validator) =>
+  isMinPropertyValid({
+    value: value.length,
+    fieldSpec: field.minLength,
+    criterion: 'minLength',
+    formatMessage,
+  });
+
+export const maxLengthValidator = ({
+  value,
+  field,
+  formatMessage,
+}: Validator) =>
+  isMaxPropertyValid({
+    value: value.length,
+    fieldSpec: field.maxLength,
+    criterion: 'maxLength',
+    formatMessage,
+  });
+
+export const urlValidator = ({ value, formatMessage }: Validator) => {
+  const urlRegex = new RegExp(
+    '^(https?:\\/\\/)?' + // validate protocol
+      '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // validate domain name
+      '((\\d{1,3}\\.){3}\\d{1,3}))|' + // validate OR ip (v4) address
+      '(localhost)' + // validate OR localhost address
+      '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // validate port and path
+      '(\\?[;&a-z\\d%_.~+=-]*)?' + // validate query string
+      '(\\#[-a-z\\d_]*)?$', // validate fragment locator
+    'i',
+  );
+  const isValid = urlRegex.test(value);
+  return !isValid ? formatMessage(messages.isValidURL) : null;
+};
+
+export const emailValidator = ({ value, formatMessage }: Validator): string => {
+  // Email Regex taken from from WHATWG living standard:
+  // https://html.spec.whatwg.org/multipage/input.html#e-mail-state-(type=email)
+  const emailRegex =
+    /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+  const isValid = emailRegex.test(value);
+  return !isValid ? formatMessage(messages.isValidEmail) : null;
+};
+
+export const isNumberValidator = ({ value, formatMessage }: Validator) => {
+  const isNumeric = (string: string | number) => Number.isFinite(+string);
+  const floatRegex = /^[+-]?\d+(\.\d+)?$/;
+  const isValid = isNumeric(value) && floatRegex.test(value);
+  // const isValid =
+  //   typeof value === 'string' && !isNaN(+value) && floatRegex.test(value);
+  return !isValid ? formatMessage(messages.isNumber) : null;
+};
+
+export const minimumValidator = ({ value, field, formatMessage }: Validator) =>
+  isMinPropertyValid({
+    value,
+    fieldSpec: field.minimum,
+    criterion: 'minimum',
+    formatMessage,
+  });
+
+export const maximumValidator = ({ value, field, formatMessage }: Validator) =>
+  isMaxPropertyValid({
+    value,
+    fieldSpec: field.maximum,
+    criterion: 'maximum',
+    formatMessage,
+  });
+
+export const isIntegerValidator = ({ value, formatMessage }: Validator) => {
+  const isNumeric = (string: string | number) => Number.isFinite(+string);
+  const intRegex = /^-?[0-9]+$/;
+  const isValid = isNumeric(value) && intRegex.test(value);
+  return !isValid ? formatMessage(messages.isInteger) : null;
+};
+
+export const hasUniqueItemsValidator = ({
+  value,
+  field,
+  formatMessage,
+}: Validator) => {
+  if (!field.uniqueItems) {
+    return null;
+  }
+  const isValid =
+    field.uniqueItems &&
+    value &&
+    // unique items
+    [...new Set(value)].length === value.length;
+  return !isValid ? formatMessage(messages.uniqueItems) : null;
+};
+
+export const startEventDateRangeValidator = ({
+  value,
+  field,
+  formData,
+  formatMessage,
+}: Validator) => {
+  const isValid =
+    value && formData.end && new Date(value) < new Date(formData.end);
+  return !isValid
+    ? formatMessage(messages.startEventRange, {
+        endDateValueOrEndFieldName: formData.end || 'end',
+      })
+    : null;
+};
+
+export const endEventDateRangeValidator = ({
+  value,
+  field,
+  formData,
+  formatMessage,
+}: Validator) => {
+  const isValid =
+    value && formData.start && new Date(value) > new Date(formData.start);
+  return !isValid
+    ? formatMessage(messages.endEventRange, {
+        startDateValueOrStartFieldName: formData.start || 'start',
+      })
+    : null;
+};
+
+export const patternValidator = ({
+  value,
+  field,
+  formatMessage,
+}: Validator) => {
+  if (!field.pattern) {
+    return null;
+  }
+  const regex = new RegExp(field.pattern);
+  const isValid = regex.test(value);
+  return !isValid ? formatMessage(messages.pattern) : null;
+};
+
+export const maxItemsValidator = ({
+  value,
+  field,
+  formatMessage,
+}: Validator) => {
+  if (!field.maxItems) {
+    return null;
+  }
+  const isValid = Array.isArray(value) && value.length <= field.maxItems;
+  return !isValid
+    ? formatMessage(messages.maxItems, { maxItems: field.maxItems })
+    : null;
+};
+
+export const minItemsValidator = ({
+  value,
+  field,
+  formatMessage,
+}: Validator) => {
+  if (!field.minItems) {
+    return null;
+  }
+  const isValid = Array.isArray(value) && value.length >= field.minItems;
+  return !isValid
+    ? formatMessage(messages.minItems, { minItems: field.minItems })
+    : null;
+};

package/src/helpers/Html/Html.jsx

@@ -143,8 +143,8 @@ class Html extends Component {
               rel: !criticalCss
                 ? elem.props.rel
                 : elem.props.as === 'style'
-                ? 'prefetch'
-                : elem.props.rel,
+                  ? 'prefetch'
+                  : elem.props.rel,
             }),
           )}
           {/* Styles in development are loaded with Webpack's style-loader, in production,
@@ -158,6 +158,7 @@ class Html extends Component {
                   }}
                 ></script>
                 {extractor.getStyleElements().map((elem) => (
+                  // eslint-disable-next-line react/jsx-key
                   <noscript>
                     {React.cloneElement(elem, {
                       rel: 'stylesheet',
@@ -187,14 +188,12 @@ class Html extends Component {
             charSet="UTF-8"
           />
           {/* Add the crossorigin while in development */}
-          {this.props.extractScripts !== false
-            ? extractor.getScriptElements().map((elem) =>
-                React.cloneElement(elem, {
-                  crossOrigin:
-                    process.env.NODE_ENV === 'production' ? undefined : 'true',
-                }),
-              )
-            : ''}
+          {extractor.getScriptElements().map((elem) =>
+            React.cloneElement(elem, {
+              crossOrigin:
+                process.env.NODE_ENV === 'production' ? undefined : 'true',
+            }),
+          )}
         </body>
       </html>
     );

package/src/helpers/MessageLabels/MessageLabels.js

@@ -110,6 +110,10 @@ export const messages = defineMessages({
     id: 'Add group',
     defaultMessage: 'Add group',
   },
+  groupDeleted: {
+    id: 'Group deleted',
+    defaultMessage: 'Group deleted',
+  },
   addUserFormUsernameTitle: {
     id: 'Username',
     defaultMessage: 'Username',
@@ -213,6 +217,10 @@ export const messages = defineMessages({
     id: 'User created',
     defaultMessage: 'User created',
   },
+  userDeleted: {
+    id: 'User deleted',
+    defaultMessage: 'User deleted',
+  },
   groupCreated: {
     id: 'Group created',
     defaultMessage: 'Group created',
@@ -367,4 +375,32 @@ export const messages = defineMessages({
     id: 'fileTooLarge',
     defaultMessage: 'This website does not accept files larger than {limit}',
   },
+  blocksFieldsErrorTitle: {
+    id: 'blocksFieldsErrorTitle',
+    defaultMessage: 'Error in the block field {errorField}.',
+  },
+  startEventRange: {
+    id: 'Event start date must be on or before {endDateValueOrEndFieldName}',
+    defaultMessage:
+      'Event start date must be on or before {endDateValueOrEndFieldName}',
+  },
+  endEventRange: {
+    id: 'Event end date must be on or after {startDateValueOrStartFieldName}',
+    defaultMessage:
+      'Event end date must be on or after {startDateValueOrStartFieldName}',
+  },
+  pattern: {
+    id: 'The value does not match the pattern {pattern}',
+    defaultMessage: 'The value does not match the pattern {pattern}',
+  },
+  maxItems: {
+    id: 'The number of items must be less than or equal to {maxItems}',
+    defaultMessage:
+      'The number of items must be less than or equal to {maxItems}',
+  },
+  minItems: {
+    id: 'The number of items must be greater than or equal to {minItems}',
+    defaultMessage:
+      'The number of items must be greater than or equal to {minItems}',
+  },
 });

package/src/helpers/Slots/index.tsx

@@ -0,0 +1,19 @@
+import { matchPath } from 'react-router-dom';
+import type { Content } from '@plone/types';
+import type { Location } from 'history';
+
+export function RouteCondition(path: string, exact?: boolean) {
+  return ({ location }: { location: Location }) =>
+    Boolean(matchPath(location.pathname, { path, exact }));
+}
+
+export function ContentTypeCondition(contentType: string[]) {
+  return ({ content, location }: { content: Content; location: Location }) => {
+    return (
+      contentType.includes(content?.['@type']) ||
+      contentType.some((type) => {
+        return location.search.includes(`type=${encodeURIComponent(type)}`);
+      })
+    );
+  };
+}

package/src/helpers/Url/Url.js

@@ -139,7 +139,10 @@ export const isCmsUi = memoize((currentPathname) => {
   // because the regexp test does not take that into account
   // https://github.com/plone/volto/issues/870
   return settings.nonContentRoutes.reduce(
-    (acc, route) => acc || new RegExp(route).test(`/${fullPath}`),
+    (acc, route) =>
+      acc ||
+      (!settings.nonContentRoutesPublic?.includes(route) &&
+        new RegExp(route).test(fullPath)),
     false,
   );
 });

package/src/helpers/Url/Url.test.js

@@ -66,7 +66,7 @@ describe('Url', () => {
     it('return empty string if no url is empty string', () => {
       expect(getBaseUrl('')).toBe('');
     });
-    it('return a null/undefined mailto adress ', () => {
+    it('return a null/undefined mailto address ', () => {
       expect(normaliseMail(null)).toBe('mailto:null');
       expect(normaliseMail(undefined)).toBe('mailto:undefined');
     });
@@ -151,26 +151,40 @@ describe('Url', () => {
   describe('isCmsUi', () => {
     [...settings.nonContentRoutes, '/controlpanel/mypanel'].forEach((route) => {
       if (typeof route === 'string') {
-        it(`matches non-content-route ${route}`, () => {
-          expect(isCmsUi(`/mycontent/${route}`)).toBe(true);
-        });
+        if (settings.nonContentRoutesPublic.includes(route)) {
+          it(`matches non-content-route-public ${route}`, () => {
+            expect(isCmsUi(route)).toBe(false);
+          });
+        } else {
+          it(`matches non-content-route ${route}`, () => {
+            expect(isCmsUi(`/mycontent/${route}`)).toBe(true);
+          });
+        }
       }
     });
 
     it('returns false on non-cms-ui views', () => {
       expect(isCmsUi('/mycontent')).toBe(false);
     });
+
+    it('returns true on non content routes', () => {
+      expect(isCmsUi('/mycontent/historyview')).toBe(true);
+    });
+
+    it('returns false on public non content routes', () => {
+      expect(isCmsUi('/mycontent/login')).toBe(false);
+    });
   });
 
   describe('flattenHTMLToAppURL', () => {
-    it('flattens all occurences of the api URL from an html snippet', () => {
+    it('flattens all occurrences of the api URL from an html snippet', () => {
       const html = `<a href="${settings.apiPath}/foo/bar">An internal link</a><a href="${settings.apiPath}/foo/baz">second link</a>`;
       expect(flattenHTMLToAppURL(html)).toBe(
         '<a href="/foo/bar">An internal link</a><a href="/foo/baz">second link</a>',
       );
     });
 
-    it('flattens all occurences of the api URL from an html snippet, with settings.internalApiPath', () => {
+    it('flattens all occurrences of the api URL from an html snippet, with settings.internalApiPath', () => {
       const html = `<a href="http://plone:8080/Plone/foo/bar">An internal link</a><a href="http://plone:8080/Plone/foo/baz">second link</a>`;
       const saved = settings.internalApiPath;
       settings.internalApiPath = 'http://plone:8080/Plone';
@@ -228,7 +242,7 @@ describe('Url', () => {
       const href = undefined;
       expect(isInternalURL(href)).toBe(undefined);
     });
-    it('tells if an  URL is external if settings.externalroutes is persent.', () => {
+    it('tells if an  URL is external if settings.externalroutes is present.', () => {
       const url = `https://localhost:3000/fb/my-page/contents`;
       const blacklistedurl = '/blacklisted';
       settings.externalRoutes = [
@@ -255,11 +269,24 @@ describe('Url', () => {
     });
     it('isUrl test 4', () => {
       const href = `https://www`;
-      expect(isUrl(href)).toBe(false);
+      expect(isUrl(href)).toBe(true);
     });
     it('isUrl test 5', () => {
+      const href = `https://www/foo/bar`;
+      expect(isUrl(href)).toBe(true);
+    });
+    it('isUrl test 6', () => {
+      // at the end of the day, this is a strange, but valid, URL
       const href = `www.e`;
-      expect(isUrl(href)).toBe(false);
+      expect(isUrl(href)).toBe(true);
+    });
+    it('isUrl test 7', () => {
+      const href = `file://server/folder/file.txt`;
+      expect(isUrl(href)).toBe(true);
+    });
+    it('isUrl test 8', () => {
+      const href = `file://server.dir.internal/folder/file.txt`;
+      expect(isUrl(href)).toBe(true);
     });
   });
   describe('getFieldURL', () => {

package/src/helpers/Url/urlRegex.js

@@ -52,7 +52,7 @@ export const urlRegex = (_opts) => {
   })\\.?`;
   const port = '(?::\\d{2,5})?';
   const path = '(?:[/?#][^\\s"]*)?';
-  const regex = `(?:${protocol}|www\\.)${auth}(?:localhost|${ip}|${host}${domain}${tld})${port}${path}`;
+  const regex = `(?:${protocol}|www\\.)${auth}(?:localhost|${ip}|${host}${domain}${tld}|${host})${port}${path}`;
 
   return opts.exact
     ? new RegExp(`(?:^${regex}$)`, 'i')

package/src/helpers/User/User.js

@@ -12,3 +12,32 @@ import { intersection } from 'lodash';
 export function userHasRoles(user, roles = []) {
   return intersection(user?.roles ?? [], roles).length > 0;
 }
+
+/**
+ * Checks if the user is Manager.
+ * @method isManager
+ * @returns {boolean}
+ */
+export function isManager(user) {
+  return userHasRoles(user, ['Manager']);
+}
+
+/**
+ * Checks if the user can assign group.
+ * @method canAssignGroup
+ * @returns {boolean}
+ */
+export function canAssignGroup(isManager, group) {
+  if (isManager) return true;
+  return !group.roles.includes('Manager');
+}
+
+/**
+ * Checks if the user can assign role.
+ * @method canDeleteGroup
+ * @returns {boolean}
+ */
+export function canAssignRole(isManager, role) {
+  if (isManager) return true;
+  return role.id !== 'Manager';
+}

package/src/helpers/Utils/Date.js

@@ -42,10 +42,10 @@ export function formatDate({
   format = format
     ? format
     : long && !includeTime
-    ? long_date_format
-    : includeTime
-    ? short_date_and_time_format
-    : short_date_format;
+      ? long_date_format
+      : includeTime
+        ? short_date_and_time_format
+        : short_date_format;
 
   const formatter = new Intl.DateTimeFormat(locale, format);
   return formatToParts
@@ -94,6 +94,6 @@ export function formatRelativeDate({
   return isNaN(v)
     ? ''
     : formatToParts
-    ? formatter.formatToParts(v, tag)
-    : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
+      ? formatter.formatToParts(v, tag)
+      : formatter.format(v, tag).replace('\u202F', ' '); // use "now" ?
 }

package/src/helpers/Utils/UseDetectClickOutside.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDetectClickOutside } from './useDetectClickOutside';
-import { Portal } from 'react-portal';
+import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import { BlockChooser } from '@plone/volto/components';
 
@@ -44,10 +44,9 @@ function OpenedChooserWithPortal(props) {
     triggerKeys: ['Escape'],
   });
 
-  return (
-    <Portal node={document.getElementById('body')}>
-      <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>
-    </Portal>
+  return createPortal(
+    <div ref={blockChooserRef}>{`Hello ${props.id}`}</div>,
+    document.getElementById('body'),
   );
 }
 
@@ -124,7 +123,7 @@ function TestComponentWithPortalAndPopper(props) {
         ref={setReferenceElement}
         onClick={() => setOpenMenu(true)}
       >{`Click me ${props.id}`}</button>
-      <Portal node={document.getElementById('body')}>
+      {createPortal(
         <div
           ref={setPopperElement}
           style={styles.popper}
@@ -136,8 +135,9 @@ function TestComponentWithPortalAndPopper(props) {
               setOpenMenu={setOpenMenu}
             />
           )}
-        </div>
-      </Portal>
+        </div>,
+        document.body,
+      )}
     </div>
   );
 }

package/src/helpers/Utils/{Utils.js → Utils.jsx}

@@ -136,8 +136,8 @@ export const getColor = (name) => {
   const namedColor = namedColors[name]
     ? namedColors[name]
     : safeColors.length > 0
-    ? safeColors.pop()
-    : `#${Math.floor(Math.random() * 16777215).toString(16)}`;
+      ? safeColors.pop()
+      : `#${Math.floor(Math.random() * 16777215).toString(16)}`;
   if (!namedColors[name]) {
     namedColors[name] = namedColor;
   }

package/src/helpers/index.js

@@ -30,6 +30,7 @@ export {
   removeProtocol,
   URLUtils,
   flattenScales,
+  getFieldURL,
 } from '@plone/volto/helpers/Url/Url';
 export { generateRobots } from '@plone/volto/helpers/Robots/Robots';
 export {
@@ -39,6 +40,7 @@ export {
   getLanguageIndependentFields,
 } from '@plone/volto/helpers/Content/Content';
 export {
+  applyBlockInitialValue,
   addBlock,
   insertBlock,
   blockHasValue,
@@ -61,7 +63,13 @@ export {
   buildStyleObjectFromData,
   getPreviousNextBlock,
   findBlocks,
+  getBlocksHierarchy,
+  moveBlockEnhanced,
 } from '@plone/volto/helpers/Blocks/Blocks';
+export {
+  getSimpleDefaultBlocks,
+  getDefaultBlocks,
+} from '@plone/volto/helpers/Blocks/defaultBlocks';
 export { default as BodyClass } from '@plone/volto/helpers/BodyClass/BodyClass';
 export { default as ScrollToTop } from '@plone/volto/helpers/ScrollToTop/ScrollToTop';
 export {
@@ -77,6 +85,8 @@ export { default as langmap } from './LanguageMap/LanguageMap';
 export { default as Helmet } from './Helmet/Helmet';
 export { default as FormValidation } from './FormValidation/FormValidation';
 export { validateFileUploadSize } from './FormValidation/FormValidation';
+export { tryParseJSON } from './FormValidation/FormValidation';
+export { extractInvariantErrors } from './FormValidation/FormValidation';
 export {
   difference,
   getColor,
@@ -93,6 +103,8 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  insertInArray,
+  removeFromArray,
   arrayRange,
   reorderArray,
   isInteractiveElement,
@@ -111,7 +123,12 @@ export {
   composeSchema,
 } from './Extensions';
 export { asyncConnect } from './AsyncConnect';
-export { userHasRoles } from './User/User';
+export {
+  userHasRoles,
+  isManager,
+  canAssignGroup,
+  canAssignRole,
+} from './User/User';
 // export { injectLazyLibs } from './Loadable/Loadable';
 export { useDetectClickOutside } from './Utils/useDetectClickOutside';
 export { useEvent } from './Utils/useEvent';
@@ -125,3 +142,4 @@ export {
   getWorkflowOptions,
 } from './Workflows/Workflows';
 export { getSiteAsyncPropExtender } from './Site';
+export { ContentTypeCondition } from './Slots';

package/src/hooks/client/useClient.js

@@ -1,4 +1,4 @@
-//useClient hook to replace repetitive delcaration in the components
+//useClient hook to replace repetitive declaration in the components
 import { useEffect, useState } from 'react';
 
 export function useClient() {

package/src/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as useClipboard } from '@plone/volto/hooks/clipboard/useClipboard';
 export { useClient } from '@plone/volto/hooks/client/useClient';
+export { default as useUser } from '@plone/volto/hooks/user/useUser';

package/src/hooks/user/useUser.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import jwtDecode from 'jwt-decode';
+import { getUser } from '@plone/volto/actions';
+
+const useUser = () => {
+  const users = useSelector((state) => state.users);
+  const user = users?.user;
+  const userId = useSelector((state) =>
+    state.userSession.token ? jwtDecode(state.userSession.token).sub : '',
+  );
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (!user?.id && users?.get.loading === false) {
+      dispatch(getUser(userId));
+    }
+  }, [dispatch, userId, user, users?.get.loading]);
+
+  return user;
+};
+
+export default useUser;

package/src/icons/external-link.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
+  <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
+</svg>