@plone/volto 18.0.0-alpha.41 → 18.0.0-alpha.43

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/MessageLabels/MessageLabels.js

@@ -375,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/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');
     });
@@ -163,14 +163,14 @@ describe('Url', () => {
   });
 
   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 +228,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 +255,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

@@ -23,7 +23,7 @@ export function isManager(user) {
 }
 
 /**
- * Checks if the user can assing group.
+ * Checks if the user can assign group.
  * @method canAssignGroup
  * @returns {boolean}
  */

package/src/helpers/index.js

@@ -40,6 +40,7 @@ export {
   getLanguageIndependentFields,
 } from '@plone/volto/helpers/Content/Content';
 export {
+  applyBlockInitialValue,
   addBlock,
   insertBlock,
   blockHasValue,
@@ -85,6 +86,7 @@ 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,

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/middleware/api.js

@@ -222,7 +222,8 @@ const apiMiddlewareFactory =
           }
 
           const { settings } = config;
-          if (getState().apierror.connectionRefused) {
+          const state = getState();
+          if (state.apierror.connectionRefused) {
             next({
               ...rest,
               type: RESET_APIERROR,
@@ -232,7 +233,7 @@ const apiMiddlewareFactory =
             const lang = result?.language?.token;
             if (
               lang &&
-              getState().intl.locale !== toReactIntlLang(lang) &&
+              state.intl.locale !== toReactIntlLang(lang) &&
               !subrequest &&
               config.settings.supportedLanguages.includes(lang)
             ) {
@@ -244,6 +245,7 @@ const apiMiddlewareFactory =
               });
             }
           }
+
           if (type === LOGIN && settings.websockets) {
             const cookies = new Cookies();
             cookies.set(

package/src/middleware/index.js

@@ -11,3 +11,4 @@ export {
   protectLoadEnd,
   loadProtector,
 } from '@plone/volto/middleware/storeProtectLoadUtils';
+export { default as userSessionReset } from './userSessionReset';

package/src/middleware/userSessionReset.js

@@ -0,0 +1,46 @@
+import Cookies from 'universal-cookie';
+
+const LOCATION_CHANGE = '@@router/LOCATION_CHANGE';
+
+const userSessionReset =
+  ({ dispatch, getState }) =>
+  (next) =>
+  (action) => {
+    if (typeof action === 'function') {
+      return next(action);
+    }
+
+    switch (action.type) {
+      case LOCATION_CHANGE:
+        if (action.request?.subrequest || __SERVER__) {
+          return next(action);
+        }
+
+        const cookies = new Cookies();
+        const token = cookies.get('auth_token');
+        const state = getState();
+
+        if (token && !state.userSession?.token) {
+          const loginAction = {
+            type: 'LOGIN_SUCCESS',
+            result: {
+              token,
+            },
+          };
+          dispatch(loginAction);
+        } else if (!token && state.userSession?.token) {
+          const logoutAction = {
+            type: 'LOGOUT_SUCCESS',
+            result: {
+              token,
+            },
+          };
+          dispatch(logoutAction);
+        }
+        return next(action);
+      default:
+        return next(action);
+    }
+  };
+
+export default userSessionReset;

package/src/store.js

@@ -13,6 +13,7 @@ import {
   protectLoadStart,
   protectLoadEnd,
   loadProtector,
+  userSessionReset,
 } from '@plone/volto/middleware';
 
 const configureStore = (initialState, history, apiHelper) => {
@@ -22,6 +23,7 @@ const configureStore = (initialState, history, apiHelper) => {
     routerMiddleware(history),
     thunk,
     ...(apiHelper ? [api(apiHelper)] : []),
+    userSessionReset,
     protectLoadEnd,
     ...(__CLIENT__
       ? [save({ states: config.settings.persistentReducers, debounce: 500 })]

package/test-setup-config.jsx

@@ -20,9 +20,11 @@ import {
   controlPanelsIcons,
   filterControlPanels,
   filterControlPanelsSchema,
+  unwantedControlPanelsFields,
 } from '@plone/volto/config/ControlPanels';
 
 import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
+import { registerValidators } from '@plone/volto/config/validation';
 
 config.set('settings', {
   apiPath: 'http://localhost:8080/Plone',
@@ -30,6 +32,7 @@ config.set('settings', {
   defaultLanguage: 'en',
   supportedLanguages: ['en'],
   defaultPageSize: 25,
+  showTags: true,
   isMultilingual: false,
   nonContentRoutes,
   contentIcons: contentIcons,
@@ -48,6 +51,7 @@ config.set('settings', {
   controlPanelsIcons,
   filterControlPanels,
   filterControlPanelsSchema,
+  unwantedControlPanelsFields,
   apiExpanders: [],
   downloadableObjects: ['File'],
   viewableInBrowserObjects: [],
@@ -153,9 +157,15 @@ config.set('components', {
     component: (props) => <img alt="Image component mock" {...props} />,
   },
 });
+
+config.set('utilities', {});
+
 config.set('experimental', {
   addBlockButton: {
     enabled: false,
   },
 });
+
 config.set('slots', {});
+
+registerValidators(config);

package/theme/themes/default/modules/embed.variables

@@ -14,7 +14,7 @@
 /* Placeholder */
 @placeholderUnderlay: @background;
 
-/* Placeholder Overlayed Background */
+/* Placeholder Overlaid Background */
 @placeholderBackground: radial-gradient(transparent 45%, rgba(0, 0, 0, 0.3));
 @placeholderBackgroundOpacity: 0.5;
 @placeholderBackgroundTransition: opacity @transitionDuration @transitionEasing;

package/theme/themes/pastanaga/collections/form.overrides

@@ -123,16 +123,50 @@
   z-index: 1;
   top: 0;
   right: 0;
+  left: auto;
   display: flex;
   height: 60px;
   align-items: center;
   margin-right: 1rem;
+  background: transparent;
+  box-shadow: none;
+  transform: none;
 
   .item {
     cursor: pointer;
   }
 }
 
+.block.form {
+  [data-rbd-draggable-context-id] {
+    margin-bottom: 0;
+  }
+
+  .ui.menu .item > i.icon {
+    margin-left: -2px;
+  }
+
+  .square.icon {
+    margin-top: -2px;
+  }
+
+  .ui.segments > div {
+    background: white !important;
+  }
+
+  .drag.handle {
+    cursor: grab;
+  }
+
+  .tabular.menu > .item {
+    height: 66px;
+
+    button {
+      border-bottom-width: 5px;
+    }
+  }
+}
+
 .ui.form .field .ui.basic.button.delete-button {
   padding: 0;
   border: none;

package/theme/themes/pastanaga/extras/blocks.less

@@ -1120,6 +1120,12 @@ div.image-upload-widget-image {
     flex-direction: row;
     align-items: center;
     margin-right: 0.5em;
+
+    .sorted-label-value {
+      margin-right: 0.5em;
+      margin-left: 0.7em;
+      color: @lightGrey;
+    }
   }
 
   .sort-label {

package/theme/themes/pastanaga/extras/sidebar.less

@@ -518,6 +518,10 @@
     padding-left: 0.5rem;
     text-overflow: ellipsis;
     white-space: nowrap;
+
+    &.errored {
+      color: @red;
+    }
   }
 
   &.disable-interaction {

package/theme/themes/pastanaga/extras/toolbar.less

@@ -129,7 +129,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
     }
 
     .toolbar-handler {
-      button {
+      .toolbar-handler-button {
         opacity: 0.3;
       }
 
@@ -243,7 +243,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
       width: 100%;
       justify-content: center;
 
-      button {
+      .toolbar-handler-button {
         width: @toolbarWidth;
         height: 20px;
         padding: 0;
@@ -428,7 +428,7 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
         flex-direction: column;
         justify-content: center;
 
-        button {
+        .toolbar-handler-button {
           width: @toolbarWidthMin;
           height: @toolbarWidth;
 
@@ -752,3 +752,10 @@ body:not(.has-sidebar):not(.has-sidebar-collapsed) {
   }
 }
 // End Orphaned CSS
+
+// Toolbar handler color in homepage
+.contenttype-plone-site {
+  #toolbar .toolbar-handler .toolbar-handler-button:before {
+    background: @teal-blue;
+  }
+}

package/tsconfig.declarations.json

@@ -9,9 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react-jsx",
     "preserveSymlinks": true,
+    "downlevelIteration": true,
     "paths": {
-      "@plone/volto/*": ["./src/*"],
+      "@plone/volto/*": ["./src/*"]
     }
   },
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.tsx"]
 }

package/types/components/index.d.ts

@@ -33,7 +33,6 @@ export { default as Logout } from "@plone/volto/components/theme/Logout/Logout";
 export { default as Sitemap } from "@plone/volto/components/theme/Sitemap/Sitemap";
 export { default as Search } from "@plone/volto/components/theme/Search/Search";
 export { default as Comments } from "@plone/volto/components/theme/Comments/Comments";
-export { default as SocialSharing } from "@plone/volto/components/theme/SocialSharing/SocialSharing";
 export { default as Register } from "@plone/volto/components/theme/Register/Register";
 export { default as PasswordReset } from "@plone/volto/components/theme/PasswordReset/PasswordReset";
 export { default as RequestPasswordReset } from "@plone/volto/components/theme/PasswordReset/RequestPasswordReset";

package/types/components/manage/Actions/Actions.stories.d.ts

@@ -0,0 +1,8 @@
+export const Actions: any;
+declare namespace _default {
+    export let title: string;
+    export { Actions as component };
+    export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+    export let argTypes: {};
+}
+export default _default;

package/types/components/manage/Blocks/Block/Order/Order.d.ts

@@ -1,4 +1,4 @@
-export function Order({ items, onMoveBlock, onDeleteBlock, onSelectBlock, indentationWidth, removable, dndKitCore, dndKitSortable, dndKitUtilities, }: {
+export function Order({ items, onMoveBlock, onDeleteBlock, onSelectBlock, indentationWidth, removable, dndKitCore, dndKitSortable, dndKitUtilities, errors, }: {
     items?: any[];
     onMoveBlock: any;
     onDeleteBlock: any;
@@ -8,6 +8,7 @@ export function Order({ items, onMoveBlock, onDeleteBlock, onSelectBlock, indent
     dndKitCore: any;
     dndKitSortable: any;
     dndKitUtilities: any;
+    errors: any;
 }): import("react/jsx-runtime").JSX.Element;
 declare const _default: any;
 export default _default;

package/types/components/manage/Blocks/LeadImage/Edit.d.ts

@@ -1,5 +1,14 @@
-declare const _default: React.FC<import("react-intl").WithIntlProps<any>> & {
-    WrappedComponent: React.ComponentType<any>;
-};
-export default _default;
-import React from 'react';
+export default Edit;
+declare function Edit(props: any): import("react/jsx-runtime").JSX.Element;
+declare namespace Edit {
+    namespace propTypes {
+        let properties: any;
+        let selected: any;
+        let block: any;
+        let index: any;
+        let data: any;
+        let pathname: any;
+        let onChangeBlock: any;
+        let openObjectBrowser: any;
+    }
+}