@plone/volto 14.0.0-alpha.33 → 14.0.0-alpha.37

package/src/helpers/Blocks/Blocks.test.js

@@ -14,6 +14,8 @@ import {
   nextBlockId,
   previousBlockId,
   visitBlocks,
+  applyBlockDefaults,
+  applySchemaDefaults,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -31,6 +33,131 @@ config.blocks.blocksConfig.text = {
       (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
     return !isEmpty;
   },
+  blockSchema: ({ data }) => ({
+    fieldsets: [
+      {
+        id: 'default',
+        fields: ['title', 'description', 'nonDefault'],
+        title: 'Default',
+      },
+    ],
+    properties: {
+      title: {
+        default: 'Default title',
+      },
+      description: {
+        default: 'Default description',
+      },
+      nonDefault: {
+        title: 'Non default',
+      },
+    },
+  }),
+};
+
+config.blocks.blocksConfig.enhancedBlock = {
+  id: 'enhancedBlock',
+  title: 'Text',
+  group: 'text',
+  restricted: false,
+  mostUsed: false,
+  blockHasOwnFocusManagement: true,
+  blockHasValue: (data) => {
+    const isEmpty =
+      !data.text ||
+      (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
+    return !isEmpty;
+  },
+  schemaEnhancer: ({ schema, formData }) => {
+    schema.fieldsets[0].fields.push('extra');
+    schema.properties.extra = { default: 'Extra value' };
+    return schema;
+  },
+  variations: [
+    {
+      id: 'firstVariation',
+      schemaEnhancer: ({ schema, formData }) => {
+        schema.fieldsets[0].fields.push('extraVariationField');
+        schema.properties['extraVariationField'] = {
+          default: 'Extra variation field',
+        };
+        return schema;
+      },
+    },
+  ],
+  blockSchema: ({ data }) => ({
+    fieldsets: [
+      {
+        id: 'default',
+        fields: ['title', 'description', 'nonDefault'],
+        title: 'Default',
+      },
+    ],
+    properties: {
+      title: {
+        default: 'Default title',
+      },
+      description: {
+        default: 'Default description',
+      },
+      nonDefault: {
+        title: 'Non default',
+      },
+    },
+  }),
+};
+
+config.blocks.blocksConfig.enhancedBlockCase2 = {
+  id: 'enhancedBlockCase2',
+  title: 'Text',
+  group: 'text',
+  restricted: false,
+  mostUsed: false,
+  blockHasOwnFocusManagement: true,
+  blockHasValue: (data) => {
+    const isEmpty =
+      !data.text ||
+      (data.text?.blocks?.length === 1 && data.text.blocks[0].text === '');
+    return !isEmpty;
+  },
+  schemaEnhancer: ({ schema, formData }) => {
+    schema.fieldsets[0].fields.push('extra');
+    schema.properties.extra = {
+      default: 'Extra value from block schema enhancer',
+    };
+    return schema;
+  },
+  variations: [
+    {
+      id: 'firstVariation',
+      schemaEnhancer: ({ schema, formData }) => {
+        schema.properties['extra'] = {
+          default: 'Extra variation field',
+        };
+        return schema;
+      },
+    },
+  ],
+  blockSchema: ({ data }) => ({
+    fieldsets: [
+      {
+        id: 'default',
+        fields: ['title', 'description', 'nonDefault'],
+        title: 'Default',
+      },
+    ],
+    properties: {
+      title: {
+        default: 'Default title',
+      },
+      description: {
+        default: 'Default description',
+      },
+      nonDefault: {
+        title: 'Non default',
+      },
+    },
+  }),
 };
 
 config.settings.defaultBlockType = 'text';
@@ -361,4 +488,89 @@ describe('Blocks', () => {
       expect(a.length).toBe(13);
     });
   });
+
+  describe('applySchemaDefaults', () => {
+    it('Sets data according to schema default values', () => {
+      const data = {
+        '@type': 'text',
+        description: 'already filled',
+      };
+      const schema = config.blocks.blocksConfig.text.blockSchema({ data });
+      expect(applySchemaDefaults({ schema, data })).toEqual({
+        '@type': 'text',
+        title: 'Default title',
+        description: 'already filled',
+      });
+    });
+  });
+
+  describe('applyBlockDefaults', () => {
+    it('Sets data according to schema default values', () => {
+      const data = {
+        '@type': 'text',
+        description: 'already filled',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'text',
+        title: 'Default title',
+        description: 'already filled',
+      });
+    });
+
+    it('Does not do anything if there is no schema for block', () => {
+      const data = {
+        '@type': 'missing',
+        description: 'already filled',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'missing',
+        description: 'already filled',
+      });
+    });
+
+    it('Supports block schema enhancers', () => {
+      const data = {
+        '@type': 'enhancedBlock',
+        description: 'already filled',
+        // variation: 'firstVariation',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'enhancedBlock',
+        title: 'Default title',
+        description: 'already filled',
+        extra: 'Extra value',
+      });
+    });
+
+    it('Supports block schema enhancers coming from variations', () => {
+      const data = {
+        '@type': 'enhancedBlock',
+        description: 'already filled',
+        variation: 'firstVariation',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'enhancedBlock',
+        title: 'Default title',
+        description: 'already filled',
+        extra: 'Extra value',
+        extraVariationField: 'Extra variation field',
+        variation: 'firstVariation',
+      });
+    });
+
+    it('Block schema enhancers override variations', () => {
+      const data = {
+        '@type': 'enhancedBlockCase2',
+        description: 'already filled',
+        variation: 'firstVariation',
+      };
+      expect(applyBlockDefaults({ data })).toEqual({
+        '@type': 'enhancedBlockCase2',
+        title: 'Default title',
+        description: 'already filled',
+        extra: 'Extra value from block schema enhancer',
+        variation: 'firstVariation',
+      });
+    });
+  });
 });

package/src/helpers/Extensions/withBlockExtensions.js

@@ -17,8 +17,40 @@ export function resolveExtension(name, extensions, data) {
   return index !== -1 ? extensions[index] : undefined;
 }
 
-export default (WrappedComponent) => (props) => {
-  const { data } = props;
+/**
+ * A block can declare extensions and variations like:
+ *
+ * {
+ *  variations: [
+ *    {
+ *      id: "summary",
+ *      isDefault: true,
+ *      template: Something
+ *    }
+ *  ],
+ *  extensions: {
+ *    'extensionA': {
+ *      items: [
+ *        // something similar to variations
+ *      ]
+ *    }
+ *  }
+ * }
+ *
+ * Exactly what an extension and what a variation represent is only up to the
+ * block. A block should incorporate these extension mechanisms and it should
+ * define what information is needed from them.
+ *
+ * resolveBlockExtensions will return an object with
+ * `{ extensions, resolvedExtensions}`, where:
+ *
+ * - 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
+ *   configuration.
+ */
+export function resolveBlockExtensions(data) {
   const block_type = data['@type'];
   const { extensions = {}, variations = [] } = config.blocks.blocksConfig[
     block_type
@@ -43,6 +75,12 @@ export default (WrappedComponent) => (props) => {
     resolvedExtensions.variation = variation;
   }
 
+  return { extensions, resolvedExtensions };
+}
+
+const withBlockExtensions = (WrappedComponent) => (props) => {
+  const { data } = props;
+  const { extensions, resolvedExtensions } = resolveBlockExtensions(data);
   return (
     <WrappedComponent
       {...resolvedExtensions}
@@ -51,3 +89,5 @@ export default (WrappedComponent) => (props) => {
     />
   );
 };
+
+export default withBlockExtensions;

package/src/helpers/Extensions/withBlockSchemaEnhancer.js

@@ -59,6 +59,39 @@ export const addExtensionFieldToSchema = ({
   return schema;
 };
 
+/**
+ * A generic HOC that provides "schema enhancer functionality" for any custom
+ * block extension.
+ *
+ * This enables blocks to have additional "variations", beyond the usual
+ * `variations` field. This function is not directly used by Volto.
+ *
+ * To be used with a block configuration like:
+ *
+ * ```
+ *  {
+ *    id: 'someBlockId',
+ *    extensions: {
+ *      '<someExtensionName>': {
+ *        items: [
+ *          {
+ *            id: 'selectFacet',
+ *            title: 'Select',
+ *            view: SelectFacet,
+ *            isDefault: true,
+ *          },
+ *          {
+ *            id: 'checkboxFacet',
+ *            title: 'Checkbox',
+ *            view: CheckboxFacet,
+ *            isDefault: false,
+ *          },
+ *        ]
+ *      }
+ *     }
+ *  }
+ * ```
+ */
 export const withBlockSchemaEnhancer = (
   FormComponent,
   extensionName = 'vendor',
@@ -111,6 +144,36 @@ export const withBlockSchemaEnhancer = (
   return <FormComponent {...props} schema={schema} />;
 };
 
+/**
+ * Apply block variation schema enhancers to the provided schema, using block
+ * information from the provided block data (as `formData`).
+ *
+ * Blocks can be enhanced with variations declared like:
+ *
+ * ```
+ *  {
+ *    id: 'searchBlock',
+ *    schemaEnhancer: ({schema, formData, intl}) => schema,
+ *    variations: [
+ *      {
+ *        id: 'facetsRightSide',
+ *        title: 'Facets on right side',
+ *        view: RightColumnFacets,
+ *        isDefault: true,
+ *      },
+ *      {
+ *        id: 'facetsLeftSide',
+ *        title: 'Facets on left side',
+ *        view: LeftColumnFacets,
+ *        isDefault: false,
+ *        schemaEnhancer: ({schema, formData, intl}) => schema,
+ *      },
+ *    ],
+ *
+ * ```
+ * Notice that each variation can declare an option schema enhancer, and each
+ * block supports an optional `schemaEnhancer` function.
+ */
 export const applySchemaEnhancer = ({
   schema: originalSchema,
   formData,
@@ -123,11 +186,15 @@ export const applySchemaEnhancer = ({
   const variations = blocks?.blocksConfig[blockType]?.variations || [];
 
   if (variations.length === 0) {
-    // No variations present but anyways
-    // finalize the schema with a schemaEnhancer in the block config is present
+    // No variations present but we finalize the schema with a schemaEnhancer
+    // in the block config (if present)
     schemaEnhancer = blocks.blocksConfig?.[blockType]?.schemaEnhancer;
     if (schemaEnhancer)
-      schema = schemaEnhancer({ schema: originalSchema, formData, intl });
+      schema = schemaEnhancer({
+        schema: cloneDeep(originalSchema),
+        formData,
+        intl,
+      });
     return schema || originalSchema;
   }
 
@@ -148,6 +215,13 @@ export const applySchemaEnhancer = ({
   return schema || originalSchema;
 };
 
+/**
+ * A HOC that enhances the incoming schema prop with block variations support
+ * by:
+ *
+ * - applies the selected variation's schema enhancer
+ * - adds the variation selection input (as a choice widget)
+ */
 export const withVariationSchemaEnhancer = (FormComponent) => (props) => {
   const { formData, schema: originalSchema } = props;
   const intl = useIntl();

package/src/helpers/Url/Url.js

@@ -176,7 +176,8 @@ export function isInternalURL(url) {
   return (
     url &&
     (url.indexOf(settings.publicURL) !== -1 ||
-      url.indexOf(settings.internalApiPath) !== -1 ||
+      (settings.internalApiPath &&
+        url.indexOf(settings.internalApiPath) !== -1) ||
       url.indexOf(settings.apiPath) !== -1 ||
       url.charAt(0) === '/' ||
       url.charAt(0) === '.' ||

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

@@ -171,6 +171,13 @@ describe('Url', () => {
       expect(isInternalURL(href)).toBe(true);
       settings.internalApiPath = saved;
     });
+    it('tells if an URL is external if settings.internalApiPath is empty', () => {
+      const href = `http://google.com`;
+      const saved = settings.internalApiPath;
+      settings.internalApiPath = '';
+      expect(isInternalURL(href)).toBe(false);
+      settings.internalApiPath = saved;
+    });
     it('tells if an URL is internal if it is an anchor', () => {
       const href = '#anchor';
       expect(isInternalURL(href)).toBe(true);

package/src/helpers/Vocabularies/Vocabularies.js

@@ -53,6 +53,18 @@ export function getVocabFromItems(props) {
     : false;
 }
 
+/**
+ * Get vocabulary given a URL (coming from a Schema) or from a vocabulary name.
+ * @function getVocabName
+ * @param {string} vocabNameOrURL
+ * @returns {string} Vocabulary name
+ */
+export function getVocabName(vocabNameOrURL) {
+  return vocabNameOrURL.indexOf('@vocabularies') > -1
+    ? vocabNameOrURL.split('@vocabularies/')[1]
+    : vocabNameOrURL;
+}
+
 /**
  * Get Fields vocabulary
  * @function getFieldsVocabulary

package/src/helpers/index.js

@@ -49,6 +49,8 @@ export {
   mutateBlock,
   nextBlockId,
   previousBlockId,
+  applyBlockDefaults,
+  applySchemaDefaults,
 } from '@plone/volto/helpers/Blocks/Blocks';
 export BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 export ScrollToTop from '@plone/volto/helpers/ScrollToTop/ScrollToTop';

package/src/storybook.jsx

@@ -1,10 +1,12 @@
 import PropTypes from 'prop-types';
+import { createBrowserHistory } from 'history';
 import React, { Component } from '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 configureStore from 'redux-mock-store';
+import configureRealStore from '@plone/volto/store';
 
 const initialState = () => ({
   router: {
@@ -1350,6 +1352,7 @@ const initialState = () => ({
   toolbar: {
     expanded: true,
   },
+  lazyLibraries: {},
 });
 
 /**
@@ -1402,3 +1405,50 @@ export default class Wrapper extends Component {
     );
   }
 }
+
+export class RealStoreWrapper extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    pathname: PropTypes.string,
+    anonymous: PropTypes.bool,
+    customStore: PropTypes.object,
+  };
+
+  customState() {
+    let state = initialState();
+    if (this.props.anonymous) {
+      state.userSession.token = null;
+    }
+    if (this.props.customStore) {
+      state = {
+        ...state,
+        ...this.props.customStore,
+      };
+    }
+    return state;
+  }
+
+  render() {
+    // If thunk is not included there's a complaint about async actions
+    const history = createBrowserHistory();
+    const store = configureRealStore(this.customState(), history);
+
+    return (
+      <Provider store={store}>
+        <PluggablesProvider>
+          <IntlProvider locale="en">
+            <StaticRouter location={this.props.location}>
+              <div className="volto-storybook-container">
+                {this.props.children}
+              </div>
+            </StaticRouter>
+          </IntlProvider>
+        </PluggablesProvider>
+      </Provider>
+    );
+  }
+}

package/src/components/manage/Sidebar/SidebarPopup.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import SidebarPopup from './SidebarPopup';
-
-<Meta
-  title="SidebarPopup"
-  argTypes={{
-    open: { control: 'boolean' },
-    close: { control: 'boolean' },
-  }}
-/>
-
-# SidebarPopup
-
-```jsx static
-<SidebarPopup open={true}>Sidebar content</SidebarPopup>
-```
-
-export const CustomSidebarPopup = (args) => (
-  <SidebarPopup {...args}>
-    <div style={{ padding: '1em' }}>
-      <h1>What Is Volto</h1>
-      <p>
-        Volto is a React-based frontend for content management systems,
-        currently supporting three backend implementations: Plone, Guillotina
-        and a NodeJS reference implementation.
-      </p>
-      <p>
-        Plone is a powerful, flexible Content Management Solution that is easy
-        to install, use and extend..
-      </p>
-    </div>
-  </SidebarPopup>
-);
-
-<Story name="SidebarPopup" args={{ open: true }}>
-  {CustomSidebarPopup.bind({})}
-</Story>
-
-## Props
-
-<ArgsTable of={SidebarPopup} />

package/src/components/theme/Anontools/Anontools.stories.mdx

@@ -1,18 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import { Anontools as AnontoolsComponent } from './Anontools';
-
-<Meta title="Anontools" />
-
-# Anontools
-
-With `MDX` we can define a story for `Breadcrumbs` right in the middle of our
-markdown documentation. Use the `args` for defining Storybook controls handlers.
-
-
-export const Anontools = (args) => <AnontoolsComponent userSession={{ token: null }} content={{ '@id': 'myid' } } />;
-
-<Story name="Anontools">{Anontools.bind({})}</Story>
-
-# Props
-
-<ArgsTable of={AnontoolsComponent} />

package/src/components/theme/Breadcrumbs/Breadcrumbs.stories.mdx

@@ -1,30 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import { BreadcrumbsComponent } from './Breadcrumbs';
-import { injectIntl } from 'react-intl';
-
-<Meta title="Breadcrumbs" />
-
-# Breadcrumbs
-
-With `MDX` we can define a story for `Breadcrumbs` right in the middle of our
-markdown documentation. Use the `args` for defining Storybook controls handlers.
-
-export const Breadcrumbs = (args) => (
-  <BreadcrumbsComponent
-    pathname=""
-    items={[
-      {
-        '@id': 'https://volto.kitconcept.com/api/Members',
-        title: 'Users',
-      },
-    ]}
-    getBreadcrumbs={() => {}}
-    {...args}
-  />
-);
-
-<Story name="Breadcrumbs">{injectIntl(Breadcrumbs).bind({})}</Story>
-
-# Props
-
-<ArgsTable of={BreadcrumbsComponent} />