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

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

@@ -261,13 +261,6 @@ class View extends Component {
           this.props.content.subjects.length > 0 && (
             <Tags tags={this.props.content.subjects} />
           )}
-        {/* Add opt-in social sharing if required, disabled by default */}
-        {/* In the future this might be parameterized from the app config */}
-        {/* <SocialSharing
-          url={typeof window === 'undefined' ? '' : window.location.href}
-          title={this.props.content.title}
-          description={this.props.content.description || ''}
-        /> */}
         {this.props.content.allow_discussion && (
           <Comments pathname={this.props.pathname} />
         )}

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

@@ -30,9 +30,6 @@ jest.mock('../../manage/Toolbar/Toolbar', () =>
   jest.fn(() => <div id="Portal" />),
 );
 
-jest.mock('../SocialSharing/SocialSharing', () =>
-  jest.fn(() => <div id="SocialSharing" />),
-);
 jest.mock('../Comments/Comments', () => jest.fn(() => <div id="Comments" />));
 jest.mock('../Tags/Tags', () => jest.fn(() => <div id="Tags" />));
 jest.mock('../SlotRenderer/SlotRenderer', () =>

package/src/config/Widgets.jsx

@@ -55,7 +55,6 @@ import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
 // Widgets mapping
 export const widgetMapping = {
   id: {
-    schema: SchemaWidget,
     subjects: TokenWidget,
     query: QuerystringWidget,
     recurrence: RecurrenceWidget,
@@ -89,6 +88,7 @@ export const widgetMapping = {
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
     select: SelectWidget,
+    schema: SchemaWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/index.js

@@ -32,6 +32,7 @@ import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 import ConfigRegistry from '@plone/volto/registry';
 
 import { getSiteAsyncPropExtender } from '@plone/volto/helpers';
+import { registerValidators } from './validation';
 
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
@@ -97,7 +98,7 @@ let config = {
       process.env.RAZZLE_INTERNAL_API_PATH ||
       process.env.RAZZLE_API_PATH ||
       'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
-    // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite
+    // proxyRewriteTarget Set it for set a custom target for the proxy or override the internal VHM rewrite
     // proxyRewriteTarget: '/VirtualHostBase/http/localhost:8080/Plone/VirtualHostRoot/_vh_api'
     // proxyRewriteTarget: 'https://myvoltositeinproduction.com'
     proxyRewriteTarget: process.env.RAZZLE_PROXY_REWRITE_TARGET || undefined,
@@ -209,8 +210,9 @@ let config = {
   },
   addonRoutes: [],
   addonReducers: {},
-  slots: {},
   components,
+  slots: {},
+  utilities: {},
 };
 
 // The apiExpanders depends on a config of the object, so it's done here
@@ -238,5 +240,8 @@ ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
 ConfigRegistry.slots = config.slots;
+ConfigRegistry.utilities = config.utilities;
+
+registerValidators(ConfigRegistry);
 
 applyAddonConfiguration(ConfigRegistry);

package/src/config/validation.ts

@@ -0,0 +1,155 @@
+import { ConfigType } from '@plone/registry';
+
+import {
+  minLengthValidator,
+  maxLengthValidator,
+  urlValidator,
+  emailValidator,
+  isNumberValidator,
+  maximumValidator,
+  minimumValidator,
+  isIntegerValidator,
+  maxItemsValidator,
+  minItemsValidator,
+  hasUniqueItemsValidator,
+  startEventDateRangeValidator,
+  endEventDateRangeValidator,
+  patternValidator,
+} from '@plone/volto/helpers/FormValidation/validators';
+
+const registerValidators = (config: ConfigType) => {
+  config.registerUtility({
+    name: 'minLength',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: minLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxLength',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: maxLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'pattern',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: patternValidator,
+  });
+
+  config.registerUtility({
+    name: 'minLength',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: minLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxLength',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: maxLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'pattern',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: patternValidator,
+  });
+
+  config.registerUtility({
+    name: 'email',
+    type: 'validator',
+    dependencies: { widget: 'email' },
+    method: emailValidator,
+  });
+
+  config.registerUtility({
+    name: 'url',
+    type: 'validator',
+    dependencies: { widget: 'url' },
+    method: urlValidator,
+  });
+
+  config.registerUtility({
+    name: 'number',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: isNumberValidator,
+  });
+
+  config.registerUtility({
+    name: 'minimum',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: minimumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maximum',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: maximumValidator,
+  });
+
+  config.registerUtility({
+    name: 'integer',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: isIntegerValidator,
+  });
+
+  config.registerUtility({
+    name: 'minimum',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: minimumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maximum',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: maximumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: maxItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'minItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: minItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'uniqueItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: hasUniqueItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'dateRangeValidator',
+    type: 'validator',
+    dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'start' },
+    method: startEventDateRangeValidator,
+  });
+
+  config.registerUtility({
+    name: 'dateRangeValidator',
+    type: 'validator',
+    dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'end' },
+    method: endEventDateRangeValidator,
+  });
+};
+
+export { registerValidators };

package/src/helpers/Extensions/withBlockExtensions.jsx

@@ -51,7 +51,7 @@ export function resolveExtension(name, extensions, data) {
  * - extensions is the blocksConfig extensions object for that block
  * - resolvedExtensions is an object with
  *   `{ variation, <someExtensionA>, <someExtensionB> }` and each of these
- *   fields hold the coresponding definition object from the block's
+ *   fields hold the corresponding definition object from the block's
  *   configuration.
  */
 export function resolveBlockExtensions(data, blocksConfig) {

package/src/helpers/FormValidation/FormValidation.jsx

@@ -1,4 +1,4 @@
-import { map, uniq, keys, intersection, isEmpty } from 'lodash';
+import { map, keys, intersection, isEmpty } from 'lodash';
 import { messages } from '../MessageLabels/MessageLabels';
 import config from '@plone/volto/registry';
 import { toast } from 'react-toastify';
@@ -11,7 +11,12 @@ import Toast from '@plone/volto/components/manage/Toast/Toast';
  * @param {string | number} valueToCompare can compare '47' < 50
  * @param {Function} intlFunc
  */
-const validationMessage = (isValid, criterion, valueToCompare, intlFunc) =>
+export const validationMessage = (
+  isValid,
+  criterion,
+  valueToCompare,
+  intlFunc,
+) =>
   !isValid
     ? intlFunc(messages[criterion], {
         len: valueToCompare,
@@ -19,142 +24,7 @@ const validationMessage = (isValid, criterion, valueToCompare, intlFunc) =>
     : null;
 
 /**
- * Returns if based on the criterion the value is lower or equal
- * @param {string | number} value can compare '47' < 50
- * @param {string | number} valueToCompare can compare '47' < 50
- * @param {string} maxCriterion
- * @param {Function} intlFunc
- */
-const isMaxPropertyValid = (value, valueToCompare, maxCriterion, intlFunc) => {
-  const isValid = valueToCompare !== undefined ? value <= valueToCompare : true;
-  return validationMessage(isValid, maxCriterion, valueToCompare, intlFunc);
-};
-
-/**
- * Returns if based on the criterion the value is higher or equal
- * @param {string | number} value can compare '47' < 50
- * @param {string | number} valueToCompare can compare '47' < 50
- * @param {string} minCriterion
- * @param {Function} intlFunc
- */
-const isMinPropertyValid = (value, valueToCompare, minCriterion, intlFunc) => {
-  const isValid = valueToCompare !== undefined ? value >= valueToCompare : true;
-  return validationMessage(isValid, minCriterion, valueToCompare, intlFunc);
-};
-
-const widgetValidation = {
-  email: {
-    isValidEmail: (emailValue, emailObj, intlFunc) => {
-      // 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(emailValue);
-      return !isValid ? intlFunc(messages.isValidEmail) : null;
-    },
-    minLength: (emailValue, emailObj, intlFunc) =>
-      isMinPropertyValid(
-        emailValue.length,
-        emailObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (emailValue, emailObj, intlFunc) =>
-      isMaxPropertyValid(
-        emailValue.length,
-        emailObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  url: {
-    isValidURL: (urlValue, urlObj, intlFunc) => {
-      var 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(urlValue);
-      return !isValid ? intlFunc(messages.isValidURL) : null;
-    },
-    minLength: (urlValue, urlObj, intlFunc) =>
-      isMinPropertyValid(
-        urlValue.length,
-        urlObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (urlValue, urlObj, intlFunc) =>
-      isMaxPropertyValid(
-        urlValue.length,
-        urlObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  password: {
-    minLength: (passwordValue, passwordObj, intlFunc) =>
-      isMinPropertyValid(
-        passwordValue.length,
-        passwordObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (passwordValue, passwordObj, intlFunc) =>
-      isMaxPropertyValid(
-        passwordValue.length,
-        passwordObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  string: {
-    minLength: (value, itemObj, intlFunc) =>
-      isMinPropertyValid(
-        value.length,
-        itemObj.minLength,
-        'minLength',
-        intlFunc,
-      ),
-    maxLength: (value, itemObj, intlFunc) =>
-      isMaxPropertyValid(
-        value.length,
-        itemObj.maxLength,
-        'maxLength',
-        intlFunc,
-      ),
-  },
-  number: {
-    isNumber: (value, itemObj, intlFunc) => {
-      const floatRegex = /^[+-]?\d+(\.\d+)?$/;
-      const isValid = !isNaN(value) && floatRegex.test(value);
-      return !isValid ? intlFunc(messages.isNumber) : null;
-    },
-    minimum: (value, itemObj, intlFunc) =>
-      isMinPropertyValid(value, itemObj.minimum, 'minimum', intlFunc),
-    maximum: (value, itemObj, intlFunc) =>
-      isMaxPropertyValid(value, itemObj.maximum, 'maximum', intlFunc),
-  },
-  integer: {
-    isInteger: (value, itemObj, intlFunc) => {
-      const intRegex = /^-?[0-9]+$/;
-      const isValid = !isNaN(value) && intRegex.test(value);
-      return !isValid ? intlFunc(messages.isInteger) : null;
-    },
-    minimum: (value, itemObj, intlFunc) =>
-      isMinPropertyValid(value, itemObj.minimum, 'minimum', intlFunc),
-    maximum: (value, itemObj, intlFunc) =>
-      isMaxPropertyValid(value, itemObj.maximum, 'maximum', intlFunc),
-  },
-};
-
-/**
- * The string that comes my not be a valid JSON
+ * The string that comes might not be a valid JSON
  * @param {string} requestItem
  */
 export const tryParseJSON = (requestItem) => {
@@ -171,24 +41,6 @@ export const tryParseJSON = (requestItem) => {
   return resultObj;
 };
 
-/**
- * Returns errors if obj has unique Items
- * @param {Object} field
- * @param {*} fieldData
- * @returns {Object[string]} - list of errors
- */
-const hasUniqueItems = (field, fieldData, formatMessage) => {
-  const errors = [];
-  if (
-    field.uniqueItems &&
-    fieldData &&
-    uniq(fieldData).length !== fieldData.length
-  ) {
-    errors.push(formatMessage(messages.uniqueItems));
-  }
-  return errors;
-};
-
 /**
  * If required fields are undefined, return list of errors
  * @returns {Object[string]} - list of errors
@@ -252,35 +104,122 @@ const validateFieldsPerFieldset = (
     touchedField,
   );
 
-  map(schema.properties, (field, fieldId) => {
-    const fieldWidgetType = field.widget || field.type;
-    const widgetValidationCriteria = widgetValidation[fieldWidgetType]
-      ? Object.keys(widgetValidation[fieldWidgetType])
-      : [];
-    let fieldData = formData[fieldId];
-    // test each criterion ex maximum, isEmail, isUrl, maxLength etc
-    const fieldErrors = widgetValidationCriteria
+  function checkFieldErrors(fieldValidationCriteria, field, fieldData) {
+    return fieldValidationCriteria
       .map((widgetCriterion) => {
         const errorMessage =
           fieldData === undefined || fieldData === null
             ? null
-            : widgetValidation[fieldWidgetType][widgetCriterion](
-                fieldData,
+            : widgetCriterion.method({
+                value: fieldData,
                 field,
+                formData,
                 formatMessage,
-              );
+              });
         return errorMessage;
       })
       .filter((item) => !!item);
+  }
+
+  Object.entries(schema.properties).forEach(([fieldId, field]) => {
+    let fieldData = formData[fieldId];
+
+    // Validation per specific validator set (format property)
+    const hasSpecificValidator =
+      field.widgetOptions?.frontendOptions?.format || field.format;
+    let specificFieldErrors = [];
+    if (hasSpecificValidator) {
+      const specificValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { format: hasSpecificValidator },
+      });
+
+      specificFieldErrors = checkFieldErrors(
+        specificValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    // Validation per field type
+    const fieldType = field.type || 'string'; // defaults to string
+    const fieldTypeValidationCriteria = config.getUtilities({
+      type: 'validator',
+      dependencies: { fieldType },
+    });
+
+    const fieldErrors = checkFieldErrors(
+      fieldTypeValidationCriteria,
+      field,
+      fieldData,
+    );
+
+    // Validation per field widget
+    const widgetName =
+      field.widgetOptions?.frontendOptions?.widget || field.widget || '';
+
+    let widgetErrors = [];
+    if (widgetName) {
+      const widgetNameValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { widget: widgetName },
+      });
+
+      widgetErrors = checkFieldErrors(
+        widgetNameValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    // Validation per specific behavior and field name (for content types)
+    const behaviorName = field.behavior;
+    let perBehaviorFieldErrors = [];
+    if (behaviorName) {
+      const specificPerBehaviorFieldValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { behaviorName, fieldName: fieldId },
+      });
+
+      perBehaviorFieldErrors = checkFieldErrors(
+        specificPerBehaviorFieldValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
+
+    // Validation per block type validator (for blocks)
+    const blockType = formData['@type'];
+    let blockTypeFieldErrors = [];
+    if (blockType) {
+      const blockTypeFieldValidationCriteria = config.getUtilities({
+        type: 'validator',
+        dependencies: { blockType, fieldName: fieldId },
+      });
+
+      blockTypeFieldErrors = checkFieldErrors(
+        blockTypeFieldValidationCriteria,
+        field,
+        fieldData,
+      );
+    }
 
-    const uniqueErrors = hasUniqueItems(field, fieldData, formatMessage);
-    const mergedErrors = [...fieldErrors, ...uniqueErrors];
+    const mergedErrors = [
+      ...specificFieldErrors,
+      ...fieldErrors,
+      ...widgetErrors,
+      ...perBehaviorFieldErrors,
+      ...blockTypeFieldErrors,
+    ];
 
     if (mergedErrors.length > 0) {
       errors[fieldId] = [
         ...(errors[fieldId] || []),
+        ...specificFieldErrors,
         ...fieldErrors,
-        ...uniqueErrors,
+        ...widgetErrors,
+        ...perBehaviorFieldErrors,
+        ...blockTypeFieldErrors,
       ];
     }
   });