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

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

@@ -11,9 +11,16 @@ import { injectIntl } from 'react-intl';
 import { FormFieldWrapper } from '@plone/volto/components';
 
 /**
- * TextareaWidget component class.
- * @function TextareaWidget
- * @returns {string} Markup of the component.
+ * TextareaWidget, a widget for multiple lines text
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Text",
+ *  widget: 'textarea',
+ * }
+ * ```
  */
 const TextareaWidget = (props) => {
   const { id, maxLength, value, onChange, placeholder } = props;

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

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

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

@@ -18,11 +18,19 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import URLUtils from '@plone/volto/components/manage/AnchorPlugin/utils/URLUtils';
 
-/** UrlWidget function component
- * @function UrlWidget
- * @returns {string} Markup of the component
+/** Widget to edit urls
+ *
+ * This is the default widget used for the `remoteUrl` field. You can also use
+ * it by declaring a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "URL",
+ *  widget: 'url',
+ * }
+ * ```
  */
-const UrlWidget = (props) => {
+export const UrlWidget = (props) => {
   const { id, onChange, onBlur, onClick, minLength, maxLength } = props;
   const inputId = `field-${id}`;
 

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

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

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

@@ -55,9 +55,17 @@ const messages = defineMessages({
 });
 
 /**
- * WysiwygWidget container class.
- * @class WysiwygWidget
- * @extends Component
+ * WysiwygWidget HTML richtext editing widget
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Rich text",
+ *  widget: 'richtext',
+ * }
+ * ```
+ *
  */
 class WysiwygWidget extends Component {
   /**

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

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

package/src/components/theme/Anontools/Anontools.jsx

@@ -13,8 +13,6 @@ import config from '@plone/volto/registry';
 
 /**
  * Anontools container class.
- * @class Anontools
- * @extends Component
  */
 export class Anontools extends Component {
   /**

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Anontools as AnontoolsDefault } from './Anontools';
+import Wrapper from '@plone/volto/storybook';
+
+const AnontoolsComponent = ({ children, ...args }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <AnontoolsDefault
+          userSession={{ token: null }}
+          content={{ '@id': 'myid' }}
+        />
+      </div>
+    </Wrapper>
+  );
+};
+
+export const Anontools = AnontoolsComponent.bind({});
+
+export default {
+  title: 'Public components/Anontools',
+  component: AnontoolsDefault,
+  argTypes: {},
+};

package/src/components/theme/Breadcrumbs/Breadcrumbs.jsx

@@ -30,10 +30,8 @@ const messages = defineMessages({
 
 /**
  * Breadcrumbs container class.
- * @class Breadcrumbs
- * @extends Component
  */
-class Breadcrumbs extends Component {
+export class BreadcrumbsComponent extends Component {
   /**
    * Property types.
    * @property {Object} propTypes Property types.
@@ -113,7 +111,6 @@ class Breadcrumbs extends Component {
   }
 }
 
-export const BreadcrumbsComponent = Breadcrumbs;
 export default compose(
   injectIntl,
   connect(
@@ -123,4 +120,4 @@ export default compose(
     }),
     { getBreadcrumbs },
   ),
-)(Breadcrumbs);
+)(BreadcrumbsComponent);

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

@@ -0,0 +1,30 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import { BreadcrumbsComponent } from './Breadcrumbs';
+import Wrapper from '@plone/volto/storybook';
+
+export const Breadcrumb = injectIntl(({ children, ...args }) => {
+  return (
+    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <BreadcrumbsComponent
+          pathname=""
+          items={[
+            {
+              '@id': 'https://volto.kitconcept.com/api/Members',
+              title: 'Users',
+            },
+          ]}
+          getBreadcrumbs={() => {}}
+          {...args}
+        />
+      </div>
+    </Wrapper>
+  );
+});
+
+export default {
+  title: 'Public components/Breadcrumb',
+  component: BreadcrumbsComponent,
+  argTypes: {},
+};

package/src/components/theme/Navigation/ContextNavigation.stories.js

@@ -1,6 +1,4 @@
-import ContextNavigationDefault, {
-  ContextNavigationComponent as CNC,
-} from './ContextNavigation';
+import { ContextNavigationComponent as CNC } from './ContextNavigation'; // ContextNavigationDefault,
 import Wrapper from '@plone/volto/storybook';
 import React from 'react';
 
@@ -75,18 +73,18 @@ const navigation = {
   url: 'http://localhost:3000/api/folder2/sitemap',
 };
 
-const customStore = {
-  contextNavigation: {
-    '/folder2/folder21/doc212/@contextnavigation': {
-      data: navigation,
-    },
-  },
-  userSession: { token: '1234' },
-  intl: {
-    locale: 'en',
-    messages: {},
-  },
-};
+// const customStore = {
+//   contextNavigation: {
+//     '/folder2/folder21/doc212/@contextnavigation': {
+//       data: navigation,
+//     },
+//   },
+//   userSession: { token: '1234' },
+//   intl: {
+//     locale: 'en',
+//     messages: {},
+//   },
+// };
 
 const ContextNavigationComponent = (args) => {
   return (
@@ -97,20 +95,20 @@ const ContextNavigationComponent = (args) => {
   );
 };
 
-const ContextNavigation = (args) => {
-  return (
-    <Wrapper
-      location={{ pathname: '/folder2/folder21/doc212' }}
-      customStore={customStore}
-    >
-      <style dangerouslySetInnerHTML={{ __html: style }}></style>
-      <ContextNavigationDefault />
-    </Wrapper>
-  );
-};
+// const ContextNavigationStory = (args) => {
+//   return (
+//     <Wrapper
+//       location={{ pathname: '/folder2/folder21/doc212' }}
+//       customStore={customStore}
+//     >
+//       <style dangerouslySetInnerHTML={{ __html: style }}></style>
+//       <ContextNavigationDefault />
+//     </Wrapper>
+//   );
+// };
 
 export default {
-  title: 'Internal components/Context navigation',
+  title: 'Public components/Context Navigation',
   component: CNC,
   decorators: [
     (Story) => (
@@ -122,11 +120,11 @@ export default {
   // subcomponents: { ArgsTable },
 };
 
-export const Renderer = () => (
+export const ContextNavigation = () => (
   <ContextNavigationComponent navigation={navigation} />
 );
 
-export const Connected = () => <ContextNavigation />;
+// export const Connected = () => <ContextNavigation />;
 
 const style = `
 .list .content .list a {

package/src/components/theme/Navigation/NavItem.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { isInternalURL } from '@plone/volto/helpers';
+import config from '@plone/volto/registry';
+
+const NavItem = ({ item, lang }) => {
+  const { settings } = config;
+  if (isInternalURL(item.url)) {
+    return (
+      <NavLink
+        to={item.url === '' ? '/' : item.url}
+        key={item.url}
+        className="item"
+        activeClassName="active"
+        exact={
+          settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
+        }
+      >
+        {item.title}
+      </NavLink>
+    );
+  } else {
+    return (
+      <a
+        href={item.url}
+        key={item.url}
+        className="item"
+        rel="noopener noreferrer"
+      >
+        {item.title}
+      </a>
+    );
+  }
+};
+
+export default NavItem;

package/src/components/theme/Navigation/NavItems.jsx

@@ -1,24 +1,11 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
-import config from '@plone/volto/registry';
+import NavItem from './NavItem';
 
 const NavItems = ({ items, lang }) => {
-  const { settings } = config;
-
   return (
     <>
       {items.map((item) => (
-        <NavLink
-          to={item.url === '' ? '/' : item.url}
-          key={item.url}
-          className="item"
-          activeClassName="active"
-          exact={
-            settings.isMultilingual ? item.url === `/${lang}` : item.url === ''
-          }
-        >
-          {item.title}
-        </NavLink>
+        <NavItem item={item} lang={lang} key={item.url} />
       ))}
     </>
   );

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

@@ -115,4 +115,30 @@ describe('Navigation', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
+  it('renders a navigation component including external links', () => {
+    const store = mockStore({
+      navigation: {
+        items: [
+          { title: 'Blog', url: '/blog' },
+          { title: 'Users', url: '/users' },
+          { title: 'Store', url: 'https://store.plone.org' },
+        ],
+      },
+      userSession: { token: '1234' },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Navigation pathname="/" />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { getBaseUrl } from '@plone/volto/helpers';
+import { getBaseUrl, applyBlockDefaults } from '@plone/volto/helpers';
 import { defineMessages, injectIntl } from 'react-intl';
 import { map } from 'lodash';
 import {
@@ -28,13 +28,21 @@ const RenderBlocks = (props) => {
       {map(content[blocksLayoutFieldname].items, (block) => {
         const Block =
           blocksConfig[content[blocksFieldname]?.[block]?.['@type']]?.view;
+
+        const blockData = applyBlockDefaults({
+          data: content[blocksFieldname][block],
+          intl,
+          metadata,
+          properties: content,
+        });
+
         return Block ? (
           <Block
             key={block}
             id={block}
             metadata={metadata}
             properties={content}
-            data={content[blocksFieldname][block]}
+            data={blockData}
             path={getBaseUrl(path || '')}
             blocksConfig={blocksConfig}
           />

package/src/config/Blocks.jsx

@@ -59,6 +59,11 @@ import {
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 
+// block sidebar schemas (not the Dexterity Layout block settings schemas)
+import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
+import ListingBlockSchema from '@plone/volto/components/manage/Blocks/Listing/schema';
+import SearchBlockSchema from '@plone/volto/components/manage/Blocks/Search/schema';
+
 defineMessages({
   title: {
     id: 'title',
@@ -253,6 +258,7 @@ const blocksConfig = {
     view: ViewListingBlock,
     edit: EditListingBlock,
     schema: BlockSettingsSchema,
+    blockSchema: ListingBlockSchema,
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
@@ -321,6 +327,7 @@ const blocksConfig = {
     view: ViewHeroImageLeftBlock,
     edit: EditHeroImageLeftBlock,
     schema: BlockSettingsSchema,
+    blockSchema: HeroImageLeftBlockSchema,
     restricted: false,
     mostUsed: false,
     blockHasOwnFocusManagement: true,
@@ -387,6 +394,7 @@ const blocksConfig = {
     group: 'common',
     view: SearchBlockView,
     edit: SearchBlockEdit,
+    blockSchema: SearchBlockSchema,
     restricted: false,
     mostUsed: false,
     sidebarTab: 1,

package/src/helpers/Blocks/Blocks.js

@@ -7,6 +7,7 @@ import { omit, without, endsWith, find, keys } from 'lodash';
 import move from 'lodash-move';
 import { v4 as uuid } from 'uuid';
 import config from '@plone/volto/registry';
+import { applySchemaEnhancer } from '@plone/volto/helpers';
 
 /**
  * Get blocks field.
@@ -323,7 +324,7 @@ export function previousBlockId(formData, currentBlock) {
  * Generate empty block form
  * @function emptyBlocksForm
  * @param {Object} formData Form data
- * @return {Object} Emptry blocks form with one defaultBlockType block
+ * @return {Object} Empty blocks form with one defaultBlockType block
  */
 export function emptyBlocksForm() {
   const { settings } = config;
@@ -340,6 +341,9 @@ export function emptyBlocksForm() {
 
 /**
  * Recursively discover blocks in data and call the provided callback
+ * @function visitBlocks
+ * @param {Object} content A content data structure (an object with blocks and blocks_layout)
+ * @param {Function} callback A function to call on each discovered block
  */
 export function visitBlocks(content, callback) {
   const queue = getBlocks(content);
@@ -351,11 +355,49 @@ export function visitBlocks(content, callback) {
     // { data: {blocks, blocks_layout}}
     if (Object.keys(blockdata || {}).indexOf('blocks') > -1) {
       queue.push(...getBlocks(blockdata));
-      // getBlocks(blockdata).forEach((tuple) => queue.push(tuple));
     }
     if (Object.keys(blockdata?.data || {}).indexOf('blocks') > -1) {
       queue.push(...getBlocks(blockdata.data));
-      // getBlocks(blockdata.data).forEach((tuple) => queue.push(tuple));
     }
   }
 }
+
+/**
+ * Initializes data with the default values coming from schema
+ */
+export function applySchemaDefaults({ data = {}, schema }) {
+  const derivedData = {
+    ...Object.keys(schema.properties).reduce((accumulator, currentField) => {
+      return schema.properties[currentField].default
+        ? {
+            ...accumulator,
+            [currentField]: schema.properties[currentField].default,
+          }
+        : accumulator;
+    }, {}),
+    ...data,
+  };
+  return derivedData;
+}
+
+/**
+ * Apply the block's default (as defined in schema) to the block data.
+ *
+ * @function applyBlockDefaults
+ * @param {Object} params An object with data, intl and anything else
+ * @return {Object} Derived data, with the defaults extracted from the schema
+ */
+export function applyBlockDefaults({ data, intl, ...rest }, blocksConfig) {
+  const block_type = data['@type'];
+  const { blockSchema } =
+    (blocksConfig || config.blocks.blocksConfig)[block_type] || {};
+  if (!blockSchema) return data;
+
+  let schema =
+    typeof blockSchema === 'function'
+      ? blockSchema({ data, intl, ...rest })
+      : blockSchema;
+  schema = applySchemaEnhancer({ schema, formData: data, intl });
+
+  return applySchemaDefaults({ data, schema });
+}