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

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

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

package/src/components/manage/Widgets/ObjectBrowserWidget.stories.js

@@ -193,7 +193,7 @@ const ObjectBrowserWidget = (args) => {
 };
 
 export default {
-  title: 'Object Browser',
+  title: 'Internal Components/Object Browser',
   component: OBC,
   decorators: [
     (Story) => (

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

@@ -30,6 +30,32 @@ const messages = defineMessages({
   },
 });
 
+/**
+ * This is a DataGridField-equivalent widget for schema-based values.
+ * The shape of the items in the array is defined using a schema.
+ *
+ * ObjectListWidget can receive an optional `schemaExtender` prop which is
+ * a function that can mutate the schema for each individual item in the array.
+ * An example schema definition of the a field that renders with the
+ * ObjectListWidget:
+ *
+ * ```jsx
+ *  columns: {
+ *    title: 'Columns',
+ *    description: 'Leave empty to show all columns',
+ *    schema: SomeItemSchema,
+ *    widget: 'object_list',
+ *    schemaExtender: (schema, data) => {
+ *      const mutated = lodash.cloneDeep(schema);
+ *      mutated.properties.extraField = {
+ *        title: 'Extra field',
+ *      }
+ *      mutated.fieldsets[0].fields.push('extraField');
+ *      return mutated;
+ *    }
+ *  },
+ * ```
+ */
 const ObjectListWidget = (props) => {
   const {
     block,

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

@@ -3,46 +3,89 @@ import Wrapper from '@plone/volto/storybook';
 import React from 'react';
 import { searchResults } from './ObjectBrowserWidget.stories';
 
-const itemSchema = (props) => {
-  return {
-    title: 'Item',
-    addMessage: 'Add item',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Default',
-        fields: ['href', 'title', 'description', 'preview_image'],
-      },
-    ],
+const defaultSchema = {
+  title: 'Item',
+  addMessage: 'Add item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['href', 'title', 'description', 'preview_image'],
+    },
+  ],
+
+  properties: {
+    href: {
+      title: 'Source',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: [
+        'Title',
+        'Description',
+        'hasPreviewImage',
+        'headtitle',
+      ],
+      allowExternals: true,
+    },
+    title: {
+      title: 'Title',
+    },
+    description: {
+      title: 'Description',
+    },
+    preview_image: {
+      title: 'Preview image',
+      widget: 'object_browser',
+      mode: 'image',
+      allowExternals: true,
+    },
+  },
+  required: [],
+};
 
-    properties: {
-      href: {
-        title: 'Source',
-        widget: 'object_browser',
-        mode: 'link',
-        selectedItemAttrs: [
-          'Title',
-          'Description',
-          'hasPreviewImage',
-          'headtitle',
-        ],
-        allowExternals: true,
-      },
-      title: {
-        title: 'Title',
-      },
-      description: {
-        title: 'Description',
-      },
-      preview_image: {
-        title: 'Preview image',
-        widget: 'object_browser',
-        mode: 'image',
-        allowExternals: true,
-      },
+const multiFieldsetSchema = {
+  title: 'Item',
+  addMessage: 'Add item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['href', 'title', 'description'],
     },
-    required: [],
-  };
+    {
+      id: 'preview',
+      title: 'Preview',
+      fields: ['preview_image'],
+    },
+  ],
+
+  properties: {
+    href: {
+      title: 'Source',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: [
+        'Title',
+        'Description',
+        'hasPreviewImage',
+        'headtitle',
+      ],
+      allowExternals: true,
+    },
+    title: {
+      title: 'Title',
+    },
+    description: {
+      title: 'Description',
+    },
+    preview_image: {
+      title: 'Preview image',
+      widget: 'object_browser',
+      mode: 'image',
+      allowExternals: true,
+    },
+  },
+  required: [],
 };
 
 const customStore = {
@@ -59,7 +102,12 @@ const customStore = {
   },
 };
 
-const ObjectListWidgetComponent = (args) => {
+const ObjectListWidgetComponent = ({
+  children,
+  secondarySchema,
+  enableSchemaExtender,
+  ...args
+}) => {
   const [value, setValue] = React.useState([]);
   const onChange = (block, value) => setValue(value);
 
@@ -69,6 +117,7 @@ const ObjectListWidgetComponent = (args) => {
       customStore={customStore}
     >
       <div className="ui segment form attached" style={{ width: '400px' }}>
+        {children}
         <ObjectListWidgetDefault
           {...args}
           id="SliderItem"
@@ -76,25 +125,98 @@ const ObjectListWidgetComponent = (args) => {
           block="testBlock"
           value={value}
           onChange={onChange}
-          schema={itemSchema}
+          schemaExtender={
+            enableSchemaExtender &&
+            ((schema, data, intl) => {
+              const finalSchema =
+                data?.href?.[0]?.['@id'] === '/image'
+                  ? {
+                      ...schema,
+                      fieldsets: [
+                        {
+                          ...schema.fieldsets[0],
+                          fields: [
+                            ...schema.fieldsets[0].fields,
+                            ...secondarySchema.fieldsets[0].fields,
+                          ],
+                        },
+                        ...schema.fieldsets.slice(1),
+                        ...secondarySchema.fieldsets.slice(1),
+                      ],
+                      properties: {
+                        ...schema.properties,
+                        ...secondarySchema.properties,
+                      },
+                    }
+                  : schema;
+              return finalSchema;
+            })
+          }
         />
+        <hr />
+        <strong>Resulting value</strong>
         <pre>{JSON.stringify(value, null, 4)}</pre>
       </div>
     </Wrapper>
   );
 };
 
+export const Default = ObjectListWidgetComponent.bind({});
+Default.args = {
+  schema: defaultSchema,
+};
+
+export const MultipleFieldsets = ObjectListWidgetComponent.bind({});
+MultipleFieldsets.args = {
+  schema: multiFieldsetSchema,
+};
+
+const defaultSecondarySchema = {
+  title: 'Additional fields',
+  fieldsets: [
+    {
+      id: 'Default',
+      title: 'Default',
+      fields: ['size'],
+    },
+  ],
+  properties: {
+    size: {
+      title: 'Image size',
+    },
+  },
+  required: [],
+};
+
+export const SchemaExtender = (args) => {
+  return (
+    <ObjectListWidgetComponent enableSchemaExtender={true} {...args}>
+      <>
+        Notice the form changes if you pick "I am an image" for the{' '}
+        <em>source</em> field. We're achieving that by passing a custom{' '}
+        <em>schemaExtender</em> that combines the fields of the{' '}
+        <em>secondarySchema</em> storybook control.
+      </>
+    </ObjectListWidgetComponent>
+  );
+};
+SchemaExtender.args = {
+  schema: defaultSchema,
+  secondarySchema: defaultSecondarySchema,
+};
+
 export default {
-  title: 'Widgets/Object List Widget',
+  title: 'Widgets/Object List (JSON)',
   component: ObjectListWidgetDefault,
   decorators: [
     (Story) => (
       <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>A DataGridField-like for lists of JSON objects</h4>
         <Story />
       </div>
     ),
   ],
-  // subcomponents: { ArgsTable },
+  argTypes: {
+    schema: {},
+  },
 };
-
-export const ObjectListWidget = () => <ObjectListWidgetComponent />;

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

@@ -58,17 +58,11 @@ const FieldSet = ({
 
 /**
  *
- * Provides an automatic form for complex JS objects, based on a schema
+ * A JSON data editor widget based on a schema. If you want to represent complex
+ * data using a single field, this is the widget to use.
  *
- * Creates an object widget with the given onChange handler and an ID. If there
- * are multiple field sets, it renders a Tab component with multiple tab panes.
- * Each tab has the title of the fieldset it renders.
- *
- * @param {object} schema Schema, follows Plone dexterity serialized schema
- * @param {object} value Object value, a JS object
- * @param {function} onChange Callback for object changed
- * @param {object} errors A list errors
- * @param {string} id Field id
+ * If there are multiple field sets, it renders a Tab component with multiple
+ * tab panes. Each tab has the title of the fieldset it renders.
  */
 const ObjectWidget = ({
   block,

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

@@ -0,0 +1,157 @@
+import React from 'react';
+import { searchResults } from './ObjectBrowserWidget.stories';
+import ObjectWidgetDefault from './ObjectWidget';
+import Wrapper from '@plone/volto/storybook';
+
+const defaultSchema = {
+  title: 'Item',
+  addMessage: 'Add item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['href', 'title', 'description', 'preview_image'],
+    },
+  ],
+
+  properties: {
+    href: {
+      title: 'Source',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: [
+        'Title',
+        'Description',
+        'hasPreviewImage',
+        'headtitle',
+      ],
+      allowExternals: true,
+    },
+    title: {
+      title: 'Title',
+    },
+    description: {
+      title: 'Description',
+    },
+    preview_image: {
+      title: 'Preview image',
+      widget: 'object_browser',
+      mode: 'image',
+      allowExternals: true,
+    },
+  },
+  required: [],
+};
+
+const multipleFieldsets = {
+  title: 'Item',
+  addMessage: 'Add item',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['href', 'title', 'description', 'preview_image'],
+    },
+    {
+      id: 'second',
+      title: 'Secondary',
+      fields: ['contributors'],
+    },
+  ],
+
+  properties: {
+    contributors: {
+      title: 'Contributors',
+      description: 'Example field with contributors information',
+      wiget: 'textarea',
+    },
+    href: {
+      title: 'Source',
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: [
+        'Title',
+        'Description',
+        'hasPreviewImage',
+        'headtitle',
+      ],
+      allowExternals: true,
+    },
+    title: {
+      title: 'Title',
+    },
+    description: {
+      title: 'Description',
+    },
+    preview_image: {
+      title: 'Preview image',
+      widget: 'object_browser',
+      mode: 'image',
+      allowExternals: true,
+    },
+  },
+  required: [],
+};
+
+const customStore = {
+  search: {
+    subrequests: {
+      'testBlock-link': searchResults,
+      'testBlock-image': searchResults,
+    },
+  },
+  userSession: { token: '1234' },
+  intl: {
+    locale: 'en',
+    messages: {},
+  },
+};
+
+const ObjectWidgetComponent = ({ children, ...args }) => {
+  const [value, setValue] = React.useState();
+  const onChange = (block, value) => setValue(value);
+  return (
+    <Wrapper
+      location={{ pathname: '/folder2/folder21/doc212' }}
+      customStore={customStore}
+    >
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <ObjectWidgetDefault
+          {...args}
+          id="SliderItem"
+          title="Slider Item"
+          block="testBlock"
+          value={value}
+          onChange={onChange}
+        />
+        <pre>Value: {JSON.stringify(value, null, 4)}</pre>
+      </div>
+    </Wrapper>
+  );
+};
+
+export const Default = ObjectWidgetComponent.bind({});
+Default.args = {
+  schema: defaultSchema,
+};
+
+export const MultipleFieldsets = ObjectWidgetComponent.bind({});
+MultipleFieldsets.args = {
+  schema: multipleFieldsets,
+};
+
+export default {
+  title: 'Widgets/Object (JSON)',
+  component: ObjectWidgetDefault,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <h4>Schema-based editing of JSON values</h4>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    schema: {},
+  },
+};

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

@@ -11,8 +11,15 @@ import { injectIntl } from 'react-intl';
 
 /**
  * PasswordWidget component class.
- * @function PasswordWidget
- * @returns {string} Markup of the component.
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Password",
+ *  type: 'password',
+ * }
+ * ```
  */
 const PasswordWidget = (props) => {
   const { id, value, onChange, onBlur, onClick, minLength, maxLength } = props;

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

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

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

@@ -41,9 +41,7 @@ const messages = defineMessages({
 });
 
 /**
- * QuerystringWidget component class.
- * @class QuerystringWidget
- * @extends Component
+ * Widget for a querystring value, to define a catalog search criteria.
  */
 class QuerystringWidget extends Component {
   /**

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SelectWidgetComponent } from './SelectWidget';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import Wrapper from '@plone/volto/storybook';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
 
 const SelectComponent = injectLazyLibs([
   'reactSelect',

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

@@ -11,9 +11,10 @@ import { injectIntl } from 'react-intl';
 import { Icon, FormFieldWrapper } from '@plone/volto/components';
 
 /**
- * TextWidget component class.
- * @class TextWidget
- * @extends Component
+ * The simple text widget.
+ *
+ * It is the default fallback widget, so if no other widget is found based on
+ * passed field properties, it will be used.
  */
 class TextWidget extends Component {
   /**

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

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