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

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Change Log
 
+## 14.0.0-alpha.37 (2021-11-26)
+
+### Bugfix
+
+- Fixed object browser selected items number. @giuliaghisini
+- Fix action vocabularies call avoiding regex look behind @nzambello
+
+### Internal
+
+- Fix select family widgets stories in storybook @sneridagh
+
+## 14.0.0-alpha.36 (2021-11-25)
+
+### Bugfix
+
+- Fix regression in actions vocabularies calls because the change to use contextual schemas @sneridagh
+- Include block schema enhancers (main block schema enhancer + variation schema enhancer) when calculating block default data @tiberiuichim
+
+### Internal
+
+- Fix references to old configuration style in apiExpanders documentation @tiberiuichim
+- Add `applySchemaDefaults`, in addition to `applyBlockDefaults`, to allow reuse in object widgets and other advanced scenarios @tiberiuichim
+
+## 14.0.0-alpha.35 (2021-11-24)
+
+### Bugfix
+
+- Fix `isInternalURL` when `settings.internalApiPath` is empty @tiberiuichim
+- Fix external link not supported by Navigation component #2853. @ericof
+- Get Add/Edit schema contextually #2852 @ericof
+
+### Internal
+
+- Upgrade p.restapi to 8.15.2 @sneridagh
+
+## 14.0.0-alpha.34 (2021-11-20)
+
+### Feature
+
+- Apply form defaults from RenderBlocks and block Edit using a new helper, `applyBlockDefaults` @tiberiuichim
+- Now each block config object can declare a schema factory (a function that can produce a schema) and this will be used to derive the default data for the block @tiberiuichim
+
 ## 14.0.0-alpha.33 (2021-11-20)
 
 ### Bugfix
@@ -15,6 +57,8 @@
 ### Internal
 
 - Upgrade stylelint to v14 (vscode-stylelint requires it now) @sneridagh
+- Add several more stories for Storybook @tiberiuichim
+- Add 2 new Volto websites by Eau de web for EEA @tiberiuichim
 
 ## 14.0.0-alpha.32 (2021-11-09)
 

package/README.md

@@ -138,7 +138,10 @@ Volto is actively developed since 2017 and used in production since 2018 on the
 - [Biblioteche Pianura Est](https://bibest.it) (Website of the Associated libraries of eastern plain. Developed by [RedTurtle](https://redturtle.it), 2021)
 - [Camera di Commercio di Reggio Emilia](https://www.re.camcom.gov.it/) (Website Chamber of Commerce of Reggio Emilia. Developed by [RedTurtle](https://redturtle.it), 2021)
 - [RawMaterial](https://rawmaterial.it/en) (Company's website. Developed by [RawMaterial](https://rawmaterial.it/en), 2021)
-- Please create a new [issue](https://github.com/plone/volto/issues/new) or [pull request](https://github.com/plone/volto/pulls) to add your Volto-site here!
+- [WISE-Freshwater](https://water.europa.eu/freshwater) (WISE-Freshwater, the Freshwater Information System for Europe. Developed by [Eau de web](https://eaudeweb.ro) for the European Environmental Agency, 2021)
+- [EEA-IMSv4](https://www.eea.europa.eu/ims) (EEA Indicator Management System v4. Developed by [Eau de web](https://eaudeweb.ro) for the European Environmental Agency, 2021)
+
+Please create a new [issue](https://github.com/plone/volto/issues/new) or [pull request](https://github.com/plone/volto/pulls) to add your Volto-site here!
 
 ## Documentation
 

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.0.0-alpha.33",
+  "version": "14.0.0-alpha.37",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/src/actions/schema/schema.js

@@ -14,14 +14,16 @@ import {
  * Get schema function.
  * @function getSchema
  * @param {string} type Content type.
+ * @param {string} url Content url.
  * @returns {Object} Get schema action.
  */
-export function getSchema(type) {
+export function getSchema(type, url) {
+  url = typeof url !== 'undefined' ? url : '';
   return {
     type: GET_SCHEMA,
     request: {
       op: 'get',
-      path: `/@types/${type}`,
+      path: `${url}/@types/${type}`,
     },
   };
 }

package/src/actions/schema/schema.test.js

@@ -11,5 +11,15 @@ describe('Schema action', () => {
       expect(action.request.op).toEqual('get');
       expect(action.request.path).toEqual(`/@types/${type}`);
     });
+
+    it('should create an action to get the schema if url is passed', () => {
+      const type = 'Document';
+      const url = '/path/to/folder';
+      const action = getSchema(type, url);
+
+      expect(action.type).toEqual(GET_SCHEMA);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(`${url}/@types/${type}`);
+    });
   });
 });

package/src/actions/vocabularies/vocabularies.js

@@ -7,7 +7,7 @@ import {
   GET_VOCABULARY,
   GET_VOCABULARY_TOKEN_TITLE,
 } from '@plone/volto/constants/ActionTypes';
-import config from '@plone/volto/registry';
+import { getVocabName } from '@plone/volto/helpers/Vocabularies/Vocabularies';
 
 /**
  * Get vocabulary given a URL (coming from a Schema) or from a vocabulary name.
@@ -18,11 +18,8 @@ import config from '@plone/volto/registry';
  * @returns {Object} Get vocabulary action.
  */
 export function getVocabulary(vocabNameOrURL, query = null, start = 0) {
-  const { settings } = config;
   // In case we have a URL, we have to get the vocabulary name
-  const vocabulary =
-    vocabNameOrURL &&
-    vocabNameOrURL.replace(`${settings.apiPath}/@vocabularies/`, '');
+  const vocabulary = getVocabName(vocabNameOrURL);
   let queryString = `b_start=${start}`;
   if (query) {
     queryString = `${queryString}&title=${query}`;
@@ -47,12 +44,8 @@ export function getVocabulary(vocabNameOrURL, query = null, start = 0) {
  * @returns {Object} Get vocabulary action.
  */
 export function getVocabularyTokenTitle(vocabNameOrURL, token = null) {
-  const { settings } = config;
   // In case we have a URL, we have to get the vocabulary name
-  const vocabulary = vocabNameOrURL.replace(
-    `${settings.apiPath}/@vocabularies/`,
-    '',
-  );
+  const vocabulary = getVocabName(vocabNameOrURL);
 
   return {
     type: GET_VOCABULARY_TOKEN_TITLE,

package/src/actions/vocabularies/vocabularies.test.js

@@ -15,5 +15,31 @@ describe('Vocabularies actions', () => {
         `/@vocabularies/${vocabulary}?b_start=0&title=${query}`,
       );
     });
+    it('should create an action to get a vocabulary if a URL is passed', () => {
+      const vocabulary =
+        'http://localhost:8080/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary(vocabulary, query);
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabulary);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
+    it('should create an action to get a vocabulary if a URL with path is passed', () => {
+      const vocabulary =
+        'http://localhost:8080/de/foo/bar/@vocabularies/plone.app.vocabularies.Keywords';
+      const query = 'john';
+      const action = getVocabulary(vocabulary, query);
+
+      expect(action.type).toEqual(GET_VOCABULARY);
+      expect(action.vocabulary).toEqual(vocabulary);
+      expect(action.request.op).toEqual('get');
+      expect(action.request.path).toEqual(
+        `/@vocabularies/plone.app.vocabularies.Keywords?b_start=0&title=${query}`,
+      );
+    });
   });
 });

package/src/components/manage/Add/Add.jsx

@@ -149,7 +149,7 @@ class Add extends Component {
    * @returns {undefined}
    */
   componentDidMount() {
-    this.props.getSchema(this.props.type);
+    this.props.getSchema(this.props.type, getBaseUrl(this.props.pathname));
     this.setState({ isClient: true });
   }
 

package/src/components/manage/Blocks/Block/Edit.jsx

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { setSidebarTab } from '@plone/volto/actions';
 import config from '@plone/volto/registry';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
+import { applyBlockDefaults } from '@plone/volto/helpers';
 
 import {
   SidebarPortal,
@@ -165,7 +166,11 @@ export class Edit extends Component {
             /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
             tabIndex={!blockHasOwnFocusManagement ? -1 : null}
           >
-            <Block {...this.props} blockNode={this.blockNode} />
+            <Block
+              {...this.props}
+              blockNode={this.blockNode}
+              data={applyBlockDefaults(this.props)}
+            />
             {this.props.manage && (
               <SidebarPortal
                 selected={this.props.selected}

package/src/components/manage/Blocks/HeroImageLeft/schema.js

@@ -15,7 +15,7 @@ const messages = defineMessages({
   },
 });
 
-const schemaHero = ({ props, intl }) => {
+const schemaHero = ({ intl }) => {
   return {
     title: 'Block settings',
     required: [],

package/src/components/manage/Blocks/Listing/schema.js

@@ -65,3 +65,5 @@ export const schemaListing = (props) => {
     required: [],
   };
 };
+
+export default schemaListing;

package/src/components/manage/Edit/Edit.jsx

@@ -136,7 +136,10 @@ class Edit extends Component {
    */
   componentDidMount() {
     if (this.props.getRequest.loaded && this.props.content?.['@type']) {
-      this.props.getSchema(this.props.content['@type']);
+      this.props.getSchema(
+        this.props.content['@type'],
+        getBaseUrl(this.props.pathname),
+      );
     }
     this.setState({
       isClient: true,

package/src/components/manage/Sidebar/ObjectBrowserBody.jsx

@@ -448,7 +448,7 @@ class ObjectBrowserBody extends Component {
           <Segment className="infos">
             {this.props.intl.formatMessage(messages.SelectedItems)}:{' '}
             {this.props.data?.length}
-            {this.props.maximumSelectionSize && (
+            {this.props.maximumSelectionSize > 0 && (
               <>
                 {' '}
                 {this.props.intl.formatMessage(messages.of)}{' '}

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import SidebarPopup from './SidebarPopup';
+import Wrapper from '@plone/volto/storybook';
+
+const SidebarComponent = ({ children, ...args }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <p>
+          Render a right-side sidebar. Mainly used to edit block settings and
+          documents metadata (in the case of composite pages, with blocks). Use
+          the controls to toggle the open state.
+        </p>
+        <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>
+      </div>
+    </Wrapper>
+  );
+};
+
+export const Sidebar = SidebarComponent.bind({});
+Sidebar.args = {
+  open: true,
+};
+
+export default {
+  title: 'Internal Components/Sidebar',
+  component: SidebarPopup,
+  argTypes: {},
+};

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

@@ -1,15 +1,23 @@
-/**
- * AlignWidget component.
- * To benefit from styling integration, use with a field named 'align'
- * @module components/manage/Widgets/AlignWidget
- */
-
 import React from 'react';
 import { injectIntl } from 'react-intl';
 
 import { FormFieldWrapper } from '@plone/volto/components';
 import AlignBlock from '@plone/volto/components/manage/Sidebar/AlignBlock';
 
+/**
+ * AlignWidget component.
+ * To benefit from styling integration, use with a field named 'align'
+ *
+ * Example how this field would look in schema:
+ *
+ * ```jsx
+ * {
+ *  title: 'Align',
+ *  description: 'Layout align',
+ *  widget: 'align',
+ * }
+ * ```
+ */
 const AlignWidget = (props) => {
   const { id, onChange, value } = props;
   return (

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import AlignWidget from './AlignWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const AlignWidgetComponent = ({ 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' }}>
+        <AlignWidget
+          {...args}
+          id="alignWidgetItem"
+          title="Align"
+          block="testBlock"
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+    </Wrapper>
+  );
+};
+
+export const Align = AlignWidgetComponent.bind({});
+
+export default {
+  title: 'Widgets/Align',
+  component: AlignWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Standard layout-oriented align widget</h4>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ArrayWidgetComponent } from './ArrayWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import Wrapper from '@plone/volto/storybook';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
 
 const ArrayComponent = injectLazyLibs([
   'reactSelectCreateable',
@@ -155,7 +155,7 @@ Disabled.args = {
 };
 
 export default {
-  title: 'Widgets/ArrayWidget',
+  title: 'Widgets/Array',
   component: ArrayComponent,
   decorators: [
     (Story) => (

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

@@ -14,6 +14,15 @@ import { FormFieldWrapper } from '@plone/volto/components';
  * CheckboxWidget component class.
  * @function CheckboxWidget
  * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Active",
+ *  type: 'boolean',
+ * }
+ * ```
  */
 const CheckboxWidget = (props) => {
   const { id, title, value, onChange, isDisabled } = props;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import CheckboxWidget from './CheckboxWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const CheckboxWidgetComponent = ({ children, ...args }) => {
+  const [value, setValue] = React.useState(false);
+  const onChange = (block, value) => setValue(value);
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <CheckboxWidget
+          {...args}
+          id="field"
+          title="Checkbox"
+          block="testBlock"
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
+    </Wrapper>
+  );
+};
+
+export const Checkbox = CheckboxWidgetComponent.bind({});
+
+export default {
+  title: 'Widgets/Checkbox',
+  component: CheckboxWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -70,6 +70,15 @@ const defaultTimeDateOnly = {
  * DatetimeWidget component class
  * @class DatetimeWidget
  * @extends Component
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Publish date",
+ *  type: 'datetime',
+ * }
+ * ```
  */
 class DatetimeWidget extends Component {
   /**

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import DatetimeWidget from './DatetimeWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const DatetimeWidgetComponent = ({ children, ...args }) => {
+  const [value, setValue] = React.useState(false);
+  const onChange = (block, value) => setValue(value);
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <DatetimeWidget
+          {...args}
+          id="field"
+          title="Datetime"
+          block="testBlock"
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
+    </Wrapper>
+  );
+};
+
+export const Datetime = DatetimeWidgetComponent.bind({});
+
+export default {
+  title: 'Widgets/Datetime',
+  component: DatetimeWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -8,9 +8,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { Input } from 'semantic-ui-react';
 
-/** EmailWidget function component
- * @function EmailWidget
- * @returns {string} Markup of the component
+/** EmailWidget, a widget for email addresses
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Email",
+ *  widget: 'email',
+ * }
+ * ```
  */
 const EmailWidget = (props) => {
   const { id, value, onChange, onBlur, onClick, minLength, maxLength } = props;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import EmailWidget from './EmailWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const EmailWidgetComponent = ({ 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' }}>
+        <EmailWidget
+          {...args}
+          id="field"
+          title="Email"
+          block="testBlock"
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
+    </Wrapper>
+  );
+};
+
+export const Email = EmailWidgetComponent.bind({});
+
+export default {
+  title: 'Widgets/Email',
+  component: EmailWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -51,6 +51,24 @@ const messages = defineMessages({
  * FileWidget component class.
  * @function FileWidget
  * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  widget: 'file',
+ * }
+ * ```
+ * or:
+ *
+ * ```jsx
+ * {
+ *  title: "File",
+ *  type: 'object',
+ * }
+ * ```
+ *
  */
 const FileWidget = (props) => {
   const { id, value, onChange } = props;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import FileWidget from './FileWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const FileWidgetComponent = ({ 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' }}>
+        <FileWidget
+          {...args}
+          id="field"
+          title="File"
+          block="testBlock"
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+      <pre>Value: {JSON.stringify(value, null, 4)}</pre>
+    </Wrapper>
+  );
+};
+
+export const File = FileWidgetComponent.bind({});
+
+export default {
+  title: 'Widgets/File',
+  component: FileWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+};

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

@@ -11,8 +11,15 @@ import { injectIntl } from 'react-intl';
 
 /**
  * NumberWidget component class.
- * @function NumberWidget
- * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Number",
+ *  type: 'number',
+ * }
+ * ```
  */
 const NumberWidget = (props) => {
   const {