@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.31

package/src/components/manage/UniversalLink/{UniversalLink.stories.mdx → UniversalLink.stories.js}

@@ -1,30 +1,9 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import UniversalLinkComponent from './UniversalLink';
 import { injectIntl } from 'react-intl';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
-<Meta
-  title="UniversalLink"
-  argTypes={{
-    href: { control: 'text' },
-    item: { control: 'object' },
-    text: { control: 'text' },
-  }}
-  decorators={[
-    (Story) => (
-      <div style={{ width: '400px' }}>
-        <Story />
-      </div>
-    ),
-  ]}
-/>
-
-# UniversalLink
-
-Link to url or item
-
-export const UniversalLink = (args) => {
+const UniversalLink = (args) => {
   const mockStore = configureStore();
   const store = mockStore({
     userSession: {
@@ -57,8 +36,37 @@ export const UniversalLink = (args) => {
   );
 };
 
-<Story name="UniversalLink">{injectIntl(UniversalLink).bind({})}</Story>
+export default {
+  title: 'UniversalLink',
 
-# Props
+  argTypes: {
+    href: {
+      control: 'text',
+    },
 
-<ArgsTable of={UniversalLinkComponent} />
+    item: {
+      control: 'object',
+    },
+
+    text: {
+      control: 'text',
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const UniversalLink_ = {
+  render: injectIntl(UniversalLink).bind({}),
+  name: 'UniversalLink',
+};

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

@@ -30,7 +30,7 @@ import {
   MultiValueContainer,
 } from '@plone/volto/components/manage/Widgets/SelectStyling';
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   select: {
@@ -306,7 +306,9 @@ class ArrayWidget extends Component {
           useDragHandle
           // react-sortable-hoc props:
           axis="xy"
-          onSortEnd={this.onSortEnd}
+          onSortEnd={(sortProp) => {
+            this.onSortEnd(selectedOption, sortProp);
+          }}
           menuShouldScrollIntoView={false}
           distance={4}
           // small fix for https://github.com/clauderic/react-sortable-hoc/pull/352:
@@ -323,27 +325,27 @@ class ArrayWidget extends Component {
             this.props.vocabBaseUrl
               ? choices
               : this.props.choices
-              ? [
-                  ...choices,
-                  ...(this.props.noValueOption &&
-                  (this.props.default === undefined ||
-                    this.props.default === null)
-                    ? [
-                        {
-                          label: this.props.intl.formatMessage(
-                            messages.no_value,
-                          ),
-                          value: 'no-value',
-                        },
-                      ]
-                    : []),
-                ]
-              : [
-                  {
-                    label: this.props.intl.formatMessage(messages.no_value),
-                    value: 'no-value',
-                  },
-                ]
+                ? [
+                    ...choices,
+                    ...(this.props.noValueOption &&
+                    (this.props.default === undefined ||
+                      this.props.default === null)
+                      ? [
+                          {
+                            label: this.props.intl.formatMessage(
+                              messages.no_value,
+                            ),
+                            value: 'no-value',
+                          },
+                        ]
+                      : []),
+                  ]
+                : [
+                    {
+                      label: this.props.intl.formatMessage(messages.no_value),
+                      value: 'no-value',
+                    },
+                  ]
           }
           styles={customSelectStyles}
           theme={selectTheme}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { Icon } from '@plone/volto/components';
 import { Button } from 'semantic-ui-react';
 

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { Checkbox } from 'semantic-ui-react';
 
 import { injectIntl } from 'react-intl';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 /**
  * CheckboxWidget component class.

package/src/components/manage/Widgets/ColorPickerWidget.stories.tsx

@@ -0,0 +1,48 @@
+import ColorPickerWidget from './ColorPickerWidget';
+import WidgetStory from './story';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof ColorPickerWidget> = {
+  title: 'Edit Widgets/ColorPicker',
+  component: WidgetStory.bind({
+    widget: ColorPickerWidget,
+  }),
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorPickerWidget>;
+
+export const Default: Story = {
+  args: {
+    id: 'favoriteColor',
+    title: 'Favorite Color',
+    colors: [
+      { name: 'red', label: 'red' },
+      { name: 'yellow', label: 'yellow' },
+      { name: 'green', label: 'green' },
+    ],
+  },
+};
+
+export const WithEnhancedStyleConfig: Story = {
+  args: {
+    id: 'favoriteColor',
+    title: 'Favorite Color',
+    colors: [
+      { name: 'red', label: 'red', style: { '--background-color': 'red' } },
+      {
+        name: 'yellow',
+        label: 'yellow',
+        style: { '--background-color': 'yellow' },
+      },
+      { name: 'green', label: 'green' },
+    ],
+  },
+};

package/src/components/manage/Widgets/{ColorPickerWidget.jsx → ColorPickerWidget.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Form } from 'semantic-ui-react';
 import { Grid, Button } from 'semantic-ui-react';
+import { isEmpty, isEqual } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
@@ -11,13 +11,37 @@ const messages = defineMessages({
   },
 });
 
-const ColorPickerWidget = (props) => {
+type Color =
+  | {
+      name: string;
+      label: string;
+      style: Record<`--${string}`, string>;
+    }
+  | {
+      name: string;
+      label: string;
+      style: undefined;
+    };
+
+export type ColorPickerWidgetProps = {
+  id: string;
+  title: string;
+  value?: string;
+  default?: string | object;
+  required?: boolean;
+  missing_value?: unknown;
+  className?: string;
+  onChange: (id: string, value: any) => void;
+  colors: Color[];
+};
+
+const ColorPickerWidget = (props: ColorPickerWidgetProps) => {
   const { id, title, required, value, onChange, colors, className } = props;
 
   const intl = useIntl();
 
   React.useEffect(() => {
-    if (!props.value && props.default) {
+    if (isEmpty(props.value) && props.default) {
       props.onChange(props.id, props.default);
     }
     // Yes, this is correct.
@@ -30,6 +54,7 @@ const ColorPickerWidget = (props) => {
       className={className}
       id={'field-' + id}
     >
+      {/* @ts-ignore */}
       <Grid>
         <Grid.Row>
           <Grid.Column
@@ -44,21 +69,29 @@ const ColorPickerWidget = (props) => {
 
               <div className="buttons">
                 {colors.map((color) => {
+                  let colorValue: string | Color['style'];
+                  const colorName = color.name;
+                  if (color.style !== undefined) {
+                    colorValue = color.style;
+                  } else {
+                    colorValue = color.name;
+                  }
                   return (
                     <Button
-                      key={id + color.name}
-                      className={color.name}
+                      key={id + colorName}
+                      className={colorName}
                       onClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
                         onChange(
                           id,
-                          value === color.name
+                          value === colorValue
                             ? props.missing_value
-                            : color.name,
+                            : colorValue,
                         );
                       }}
-                      active={value === color.name}
+                      style={color.style}
+                      active={isEqual(value, colorValue)}
                       circular
                       aria-label={color.label}
                       title={color.label}
@@ -74,20 +107,4 @@ const ColorPickerWidget = (props) => {
   ) : null;
 };
 
-ColorPickerWidget.propTypes = {
-  id: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  value: PropTypes.string,
-  onChange: PropTypes.func,
-  colors: PropTypes.array,
-};
-
-ColorPickerWidget.defaultProps = {
-  required: false,
-  value: null,
-  onChange: null,
-  colors: [],
-};
-
 export default ColorPickerWidget;

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

@@ -9,7 +9,8 @@ import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import loadable from '@loadable/component';
 import cx from 'classnames';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { parseDateTime, toBackendLang } from '@plone/volto/helpers';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 

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

@@ -3,7 +3,7 @@
  * @module components/manage/Widgets/EmailWidget
  */
 
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Input } from 'semantic-ui-react';

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

@@ -9,7 +9,8 @@ import { Button, Image, Dimmer } from 'semantic-ui-react';
 import { readAsDataURL } from 'promise-file-reader';
 import { injectIntl } from 'react-intl';
 import deleteSVG from '@plone/volto/icons/delete.svg';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import loadable from '@loadable/component';
 import { flattenToAppURL, validateFileUploadSize } from '@plone/volto/helpers';
 import { defineMessages, useIntl } from 'react-intl';
@@ -84,8 +85,8 @@ const FileWidget = (props) => {
   const imgsrc = value?.download
     ? `${flattenToAppURL(value?.download)}?id=${Date.now()}`
     : null || value?.data
-    ? `data:${value['content-type']};${value.encoding},${value.data}`
-    : null;
+      ? `data:${value['content-type']};${value.encoding},${value.data}`
+      : null;
 
   /**
    * Drop handler
@@ -112,7 +113,7 @@ const FileWidget = (props) => {
       if (imageMimetypes.includes(fields[1])) {
         setFileType(true);
         let imagePreview = document.getElementById(`field-${id}-image`);
-        imagePreview.src = reader.result;
+        if (imagePreview) imagePreview.src = reader.result;
       } else {
         setFileType(false);
       }
@@ -170,9 +171,14 @@ const FileWidget = (props) => {
         )}
       </Dropzone>
       <div className="field-file-name">
-        {value && value.filename}
+        {value && (
+          <UniversalLink href={value.download} download={true}>
+            {value.filename}
+          </UniversalLink>
+        )}
         {value && (
           <Button
+            type="button"
             icon
             basic
             className="delete-button"

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

@@ -107,7 +107,7 @@ class FormFieldWrapper extends Component {
       <Form.Field
         inline
         required={required}
-        error={error.length > 0}
+        error={error && error.length > 0}
         className={cx(
           description ? 'help' : '',
           className,

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

@@ -11,7 +11,8 @@ import { Input } from 'semantic-ui-react';
 import { compact, concat, keys, map, union, uniq } from 'lodash';
 
 import { defineMessages, injectIntl } from 'react-intl';
-import { Icon, FormFieldWrapper } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import config from '@plone/volto/registry';
 import { getQuerystring } from '@plone/volto/actions';
 
@@ -21,9 +22,9 @@ const messages = defineMessages({
     defaultMessage: "This is a reserved name and can't be used",
   },
   invalidCharacters: {
-    id: 'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+    id: 'Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: <, >, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.',
     defaultMessage:
-      'Only lowercase letters (a-z) without accents, numbers (0-9), and the characters "-", "_", and "." are allowed.',
+      'Only 7-bit bytes characters are allowed. Cannot contain uppercase letters, special characters: <, >, &, #, /, ?, or others that are illegal in URLs. Cannot start with: _, aq_, @@, ++. Cannot end with __. Cannot be: request,contributors, ., .., "". Cannot contain new lines.',
   },
 });
 
@@ -140,7 +141,12 @@ class IdWidget extends Component {
     }
 
     // Check invalid characters
-    if (!/^[.a-z0-9_-]*$/.test(value)) {
+    if (
+      // eslint-disable-next-line no-control-regex
+      !/^(?!.*\\)(?!\+\+)(?!@@)(?!.*request)(?!.*contributors)(?!aq_)(?!.*__)(?!_)(?!((^|\/)\.\.?($|\/)|^"\s*"$))(?!.*[A-Z])(?:(?![\r\n<>/?&#\x00-\x1F\x7F])['\x00-\x7F\u0080-\uFFFF. _])*$/.test(
+        value,
+      )
+    ) {
       error.push(this.props.intl.formatMessage(messages.invalidCharacters));
     }
 

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

@@ -2,11 +2,24 @@ import React from 'react';
 import IdWidget from './IdWidget';
 import WidgetStory from './story';
 
-export const Text = WidgetStory.bind({
-  props: { id: 'text', title: 'Text' },
+export const Default = WidgetStory.bind({
   widget: IdWidget,
 });
 
+Default.args = {
+  id: 'text',
+  title: 'Text',
+};
+
+export const Errored = WidgetStory.bind({
+  widget: IdWidget,
+});
+Errored.args = {
+  id: 'field-errored',
+  title: 'Errored field title',
+  value: '@@name',
+};
+
 export default {
   title: 'Edit Widgets/Id',
   component: IdWidget,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Button, Grid } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 
 const messages = defineMessages({
   small: {

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

@@ -4,10 +4,10 @@
  */
 
 import React, { useState } from 'react';
-import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import { Input, Button } from 'semantic-ui-react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { isInternalURL, flattenToAppURL, URLUtils } from '@plone/volto/helpers';
 import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrowser';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -177,4 +177,4 @@ InternalUrlWidget.defaultProps = {
   maxLength: null,
 };
 
-export default compose(withObjectBrowser)(InternalUrlWidget);
+export default withObjectBrowser(InternalUrlWidget);

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**

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

@@ -6,9 +6,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { compact, isArray, isEmpty, remove } from 'lodash';
+import { compact, includes, isArray, isEmpty, remove } from 'lodash';
 import { connect } from 'react-redux';
-import { Label, Popup, Button } from 'semantic-ui-react';
+import { Image, Label, Popup, Button } from 'semantic-ui-react';
 import {
   flattenToAppURL,
   isInternalURL,
@@ -21,6 +21,7 @@ import withObjectBrowser from '@plone/volto/components/manage/Sidebar/ObjectBrow
 import { defineMessages, injectIntl } from 'react-intl';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
+import config from '@plone/volto/registry';
 
 import navTreeSVG from '@plone/volto/icons/nav.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
@@ -122,7 +123,16 @@ export class ObjectBrowserWidgetComponent extends Component {
         }
         trigger={
           <Label>
-            <div className="item-title">{item.title}</div>
+            <div className="item-title">
+              {includes(config.settings.imageObjects, item['@type']) ? (
+                <Image
+                  size="small"
+                  src={`${item['@id']}/@@images/image/thumb`}
+                />
+              ) : (
+                item.title
+              )}
+            </div>
             <div>
               {this.props.mode === 'multiple' && (
                 <Icon

package/src/components/manage/Widgets/ObjectBrowserWidget.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import ObjectBrowserWidget from './ObjectBrowserWidget';
@@ -14,7 +14,7 @@ test('renders a objectBrowser widget component', () => {
       messages: {},
     },
   });
-  const component = renderer.create(
+  const { container } = render(
     <Provider store={store}>
       <MemoryRouter>
         <ObjectBrowserWidget
@@ -26,6 +26,6 @@ test('renders a objectBrowser widget component', () => {
       </MemoryRouter>
     </Provider>,
   );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
+
+  expect(container).toMatchSnapshot();
 });

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Accordion, Button, Segment } from 'semantic-ui-react';
-import { DragDropList, FormFieldWrapper, Icon } from '@plone/volto/components';
+import { DragDropList, Icon } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { applySchemaDefaults, reorderArray } from '@plone/volto/helpers';
 import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
 

package/src/components/manage/Widgets/ObjectListWidget.test.js

@@ -2,10 +2,11 @@ import React from 'react';
 import { Provider } from 'react-intl-redux';
 import { render } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectListWidget from './ObjectListWidget';
 
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
+jest.mock('@plone/volto/components/manage/Form');
+
 beforeAll(
   async () =>
     await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),

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

@@ -6,8 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tab } from 'semantic-ui-react';
-
-import Field from '@plone/volto/components/manage/Form/Field';
+import { Field } from '@plone/volto/components/manage/Form';
 
 /**
  * Renders a field set. Passes some of the values in the schema to the Field

package/src/components/manage/Widgets/ObjectWidget.test.jsx

@@ -3,9 +3,10 @@ import renderer from 'react-test-renderer';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { render, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
 import ObjectWidget from './ObjectWidget';
 
+jest.mock('@plone/volto/components/manage/Form');
+
 const mockStore = configureStore();
 
 const LinkSchema = {

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

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Input } from 'semantic-ui-react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { injectIntl } from 'react-intl';
 
 /**

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormFieldWrapper } from '@plone/volto/components';
+import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
 import { toPairs, groupBy, map } from 'lodash';
 import { defineMessages, useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';