@kitconcept/volto-light-theme 4.0.1 → 5.0.0

package/.changelog.draft

@@ -1,12 +1,17 @@
-## 4.0.1 (2024-06-28)
+## 5.0.0 (2024-07-02)
 
-### Bugfix
+### Breaking
 
-- Fix Invalid html structure in caption component @iRohitSingh [#398](https://github.com/kitconcept/volto-light-theme/pull/398)
-- Fix install in Volto 17 @sneridagh [#400](https://github.com/kitconcept/volto-light-theme/pull/400)
+- Upgrade to a39, enable new image widget @sneridagh
 
-### Internal
+  Breaking:
+    The new Image widget component is used in the VLT shadowed image component.
+    The minimum Volto version requirements have changed for this reason.
+    The new image widget is present in core from these versions on:
+      - Volto 17.18.0
+      - Volto 18.0.0-alpha.36
 
-- Upgrade to Volto 18a37 @sneridagh [#403](https://github.com/kitconcept/volto-light-theme/pull/403)
+    For more information, please take a look at the upgrade guide:
+    https://github.com/kitconcept/volto-light-theme/blob/main/UPGRADE-GUIDE.md [#405](https://github.com/kitconcept/volto-light-theme/pull/405)
 
 

package/.release-it.json

@@ -12,6 +12,9 @@
     ],
     "after:release": "rm .changelog.draft"
   },
+  "npm": {
+    "publish": false
+  },
   "git": {
     "changelog": "pipx run towncrier build --draft --yes --version 0.0.0",
     "requireUpstream": false,

package/CHANGELOG.md

@@ -8,6 +8,22 @@
 
 <!-- towncrier release notes start -->
 
+## 5.0.0 (2024-07-02)
+
+### Breaking
+
+- Upgrade to a39, enable new image widget @sneridagh
+
+  Breaking:
+    The new Image widget component is used in the VLT shadowed image component.
+    The minimum Volto version requirements have changed for this reason.
+    The new image widget is present in core from these versions on:
+      - Volto 17.18.0
+      - Volto 18.0.0-alpha.36
+
+    For more information, please take a look at the upgrade guide:
+    https://github.com/kitconcept/volto-light-theme/blob/main/UPGRADE-GUIDE.md [#405](https://github.com/kitconcept/volto-light-theme/pull/405)
+
 ## 4.0.1 (2024-06-28)
 
 ### Bugfix

package/README.md

@@ -232,17 +232,24 @@ They will be noted properly in the changelog.
 
 See a detailed upgrade guide in: https://github.com/kitconcept/volto-light-theme/blob/main/UPGRADE-GUIDE.md
 
-## Development
+## Compatibility
+
+| VLT version | Volto version |
+|-------------|---------------|
+|   3.x.x  |   >= Volto 17.0.0-alpha.16  |
+|   4.x.x  |   < Volto 17.18.0  |
+|   5.x.x  |   >= Volto 17.18.0 or >=Volto 18.0.0-alpha.36  |
 
-This theme works under Volto 17 alpha 16 onwards.
-Compatibility with Volto 16 might be achieved, but it has to be at customization level in the
-specific project add-on.
+Compatibility with Volto 16 might be achieved, but it has to be at customization level in the specific project add-on.
 This is mainly due to the `RenderBlocks` customization that is based in the one in 17 because of the Grid block in core and the autogrouping feature.
 See more information about the other dependencies in `peerDependencies` in `package.json`.
+
+## Development
+
 The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest `mrs-developer` and other Volto core improvements.
 For this reason, it only works with pnpm and Volto 18 (currently in alpha) but it does not mean that the add-on will only work in 18.
 
-### Requisites
+### Development requisites
 
 - Volto 18 (2024-03-21: currently in alpha)
 - pnpm as package manager
@@ -252,19 +259,32 @@ For this reason, it only works with pnpm and Volto 18 (currently in alpha) but i
 Run `make help` to list the available commands.
 
 ```text
-help                                 Show this help
-install                              Installs the dev environment using mrs-developer
-i18n                                 Sync i18n
-format                               Format codebase
-lint                                 Lint Codebase
-test                                 Run unit tests
-test-ci                              Run unit tests in CI
-start-backend-docker                 Starts a Docker-based backend for developing
-start-test-acceptance-frontend-dev   Start acceptance frontend in dev mode
-start-test-acceptance-frontend       Start acceptance frontend in prod mode
-start-test-acceptance-server         Start acceptance server
-test-acceptance                      Start Cypress in interactive mode
-test-acceptance-headless             Run cypress tests in headless mode for CI
+help                                  Show this help
+install                               Installs the add-on in a development environment
+start                                 Starts Volto, allowing reloading of the add-on during development
+build                                 Build a production bundle for distribution of the project with the add-on
+build-deps                            Build dependencies
+i18n                                  Sync i18n
+ci-i18n                               Check if i18n is not synced
+format                                Format codebase
+lint                                  Lint, or catch and remove problems, in code base
+release                               Release the add-on on npmjs.org
+release-dry-run                       Dry-run the release of the add-on on npmjs.org
+test                                  Run unit tests
+ci-test                               Run unit tests in CI
+backend-docker-start                  Starts a Docker-based backend for development
+storybook-start                       Start Storybook server on port 6006
+storybook-build                       Build Storybook
+acceptance-frontend-dev-start         Start acceptance frontend in development mode
+acceptance-frontend-prod-start        Start acceptance frontend in production mode
+acceptance-backend-start              Start backend acceptance server
+ci-acceptance-backend-start           Start backend acceptance server in headless mode for CI
+acceptance-test                       Start Cypress in interactive mode
+ci-acceptance-test                    Run cypress tests in headless mode for CI
+acceptance-a11y-frontend-prod-start   Start a11y acceptance frontend in prod mode
+ci-acceptance-a11y-backend-start      Start acceptance a11y server in CI mode (no terminal attached)
+acceptance-a11y-test                  Start a11y Cypress in interactive mode
+ci-acceptance-a11y-test               Run a11y cypress tests in headless mode for CI
 ```
 
 ### Development Environment Setup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.js",
   "types": "src/types/index.d.ts",

package/src/components/Blocks/Image/Edit.jsx

@@ -1,275 +1,52 @@
-/**
- * Edit image block.
- * @module components/manage/Blocks/Image/Edit
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-import { readAsDataURL } from 'promise-file-reader';
-import { Button, Dimmer, Input, Loader, Message } from 'semantic-ui-react';
-import { defineMessages, injectIntl } from 'react-intl';
-import loadable from '@loadable/component';
+import React from 'react';
 import cx from 'classnames';
-import { isEqual } from 'lodash';
-
-import Caption from '../../Caption/Caption';
+import { ImageSidebar, SidebarPortal } from '@plone/volto/components';
 
-import { Icon, ImageSidebar, SidebarPortal } from '@plone/volto/components';
-import { createContent } from '@plone/volto/actions';
 import {
   flattenToAppURL,
-  getBaseUrl,
   isInternalURL,
   withBlockExtensions,
-  validateFileUploadSize,
 } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import navTreeSVG from '@plone/volto/icons/nav.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-import uploadSVG from '@plone/volto/icons/upload.svg';
-
-const Dropzone = loadable(() => import('react-dropzone'));
-
-const messages = defineMessages({
-  ImageBlockInputPlaceholder: {
-    id: 'Browse the site, drop an image, or type an URL',
-    defaultMessage: 'Browse the site, drop an image, or type an URL',
-  },
-  uploadingImage: {
-    id: 'Uploading image',
-    defaultMessage: 'Uploading image',
-  },
-});
-
-/**
- * Edit image block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any),
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-    createContent: PropTypes.func.isRequired,
-    openObjectBrowser: PropTypes.func.isRequired,
-  };
-
-  state = {
-    uploading: false,
-    url: '',
-    dragging: false,
-  };
+import { ImageInput } from '@plone/volto/components/manage/Widgets/ImageWidget';
+import Caption from '../../Caption/Caption';
 
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    // Update block data after upload finished
-    if (
-      this.props.request.loading &&
-      nextProps.request.loaded &&
-      this.state.uploading
-    ) {
-      this.setState({
-        uploading: false,
+function Edit(props) {
+  const { data } = props;
+  const Image = config.getComponent({ name: 'Image' }).component;
+  const onSelectItem = React.useCallback(
+    (url, item) => {
+      const dataAdapter = props.blocksConfig[props.data['@type']].dataAdapter;
+      dataAdapter({
+        block: props.block,
+        data: props.data,
+        onChangeBlock: props.onChangeBlock,
+        id: 'url',
+        value: url,
+        item,
       });
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        url: nextProps.content['@id'],
-        image_field: 'image',
-        image_scales: { image: [nextProps.content.image] },
-        alt: '',
+    },
+    [props],
+  );
+
+  const handleChange = React.useCallback(
+    async (id, image, { title, image_field, image_scales } = {}) => {
+      const url = image ? image['@id'] || image : '';
+
+      props.onChangeBlock(props.block, {
+        ...props.data,
+        url: flattenToAppURL(url),
+        image_field,
+        image_scales,
+        alt: props.data.alt || title || '',
       });
-    }
-  }
-
-  /**
-   * @param {*} nextProps
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps) {
-    return (
-      this.props.selected ||
-      nextProps.selected ||
-      !isEqual(this.props.data, nextProps.data)
-    );
-  }
-
-  /**
-   * Upload image handler (not used), but useful in case that we want a button
-   * not powered by react-dropzone
-   * @method onUploadImage
-   * @returns {undefined}
-   */
-  onUploadImage = (e) => {
-    e.stopPropagation();
-    const file = e.target.files[0];
-    if (!validateFileUploadSize(file, this.props.intl.formatMessage)) return;
-    this.setState({
-      uploading: true,
-    });
-    readAsDataURL(file).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: file.name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: file.name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
-
-  /**
-   * Change url handler
-   * @method onChangeUrl
-   * @param {Object} target Target object
-   * @returns {undefined}
-   */
-  onChangeUrl = ({ target }) => {
-    this.setState({
-      url: target.value,
-    });
-  };
+    },
+    [props],
+  );
 
-  /**
-   * Submit url handler
-   * @method onSubmitUrl
-   * @param {object} e Event
-   * @returns {undefined}
-   */
-  onSubmitUrl = () => {
-    this.props.onChangeBlock(this.props.block, {
-      ...this.props.data,
-      url: flattenToAppURL(this.state.url),
-    });
-  };
-
-  /**
-   * Drop handler
-   * @method onDrop
-   * @param {array} files File objects
-   * @returns {undefined}
-   */
-  onDrop = (files) => {
-    if (!validateFileUploadSize(files[0], this.props.intl.formatMessage)) {
-      this.setState({ dragging: false });
-      return;
-    }
-    this.setState({ uploading: true });
-
-    readAsDataURL(files[0]).then((data) => {
-      const fields = data.match(/^data:(.*);(.*),(.*)$/);
-      this.props.createContent(
-        getBaseUrl(this.props.pathname),
-        {
-          '@type': 'Image',
-          title: files[0].name,
-          image: {
-            data: fields[3],
-            encoding: fields[2],
-            'content-type': fields[1],
-            filename: files[0].name,
-          },
-        },
-        this.props.block,
-      );
-    });
-  };
-
-  /**
-   * Keydown handler on Variant Menu Form
-   * This is required since the ENTER key is already mapped to a onKeyDown
-   * event and needs to be overriden with a child onKeyDown.
-   * @method onKeyDownVariantMenuForm
-   * @param {Object} e Event object
-   * @returns {undefined}
-   */
-  onKeyDownVariantMenuForm = (e) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-      this.onSubmitUrl();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-      // TODO: Do something on ESC key
-    }
-  };
-  onDragEnter = () => {
-    this.setState({ dragging: true });
-  };
-  onDragLeave = () => {
-    this.setState({ dragging: false });
-  };
-
-  node = React.createRef();
-
-  // START CUSTOMIZATION - Add custom dataAdapter
-  // It has to be a class method because if used directly we have closure issues while
-  // passing arguments to the dataAdapter function
-  onSelectItem = (url, item) => {
-    const dataAdapter =
-      this.props.blocksConfig[this.props.data['@type']].dataAdapter;
-    dataAdapter({
-      block: this.props.block,
-      data: this.props.data,
-      onChangeBlock: this.props.onChangeBlock,
-      id: 'url',
-      value: url,
-      item,
-    });
-  };
-  // END CUSTOMIZATION - Add custom dataAdapter
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const Image = config.getComponent({ name: 'Image' }).component;
-    const { data } = this.props;
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.intl.formatMessage(messages.ImageBlockInputPlaceholder);
-
-    return (
+  return (
+    <>
       <div
         className={cx(
           'block image align',
@@ -280,7 +57,6 @@ class Edit extends Component {
         )}
       >
         {data.url ? (
-          // START CUSTOMIZATION - Added `figure` tag
           <figure
             className={cx(
               'figure',
@@ -299,13 +75,14 @@ class Edit extends Component {
             )}
           >
             <Image
-              // Is this needed?
+              // START CUSTOMIZATION - Moved to the figure
               // className={cx({
               //   'full-width': data.align === 'full',
               //   large: data.size === 'l',
-              //   medium: data.size === 'm' || !data.size,
+              //   medium: data.size === 'm',
               //   small: data.size === 's',
               // })}
+              // END CUSTOMIZATION
               item={
                 data.image_scales
                   ? {
@@ -328,9 +105,7 @@ class Edit extends Component {
                             data.url,
                           )}/@@images/image/preview`;
                         if (data.size === 's')
-                          return `${flattenToAppURL(
-                            data.url,
-                          )}/@@images/image/mini`;
+                          return `${flattenToAppURL(data.url)}/@@images/image/mini`;
                         return `${flattenToAppURL(data.url)}/@@images/image`;
                       })()
                     : data.url
@@ -345,125 +120,23 @@ class Edit extends Component {
               description={data.description}
               credit={data?.copyright_and_sources ?? data.credit?.data}
             />
-            {/* // END CUSTOMIZATION - Added `figure` tag */}
           </figure>
         ) : (
-          <div>
-            {this.props.editable && (
-              <Dropzone
-                noClick
-                onDrop={this.onDrop}
-                onDragEnter={this.onDragEnter}
-                onDragLeave={this.onDragLeave}
-                className="dropzone"
-              >
-                {({ getRootProps, getInputProps }) => (
-                  <div {...getRootProps()}>
-                    <Message>
-                      {this.state.dragging && <Dimmer active></Dimmer>}
-                      {this.state.uploading && (
-                        <Dimmer active>
-                          <Loader indeterminate>
-                            {this.props.intl.formatMessage(
-                              messages.uploadingImage,
-                            )}
-                          </Loader>
-                        </Dimmer>
-                      )}
-                      <div className="no-image-wrapper">
-                        <img src={imageBlockSVG} alt="" />
-                        <div className="toolbar-inner">
-                          <Button.Group>
-                            <Button
-                              basic
-                              icon
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                this.props.openObjectBrowser({
-                                  onSelectItem: this.onSelectItem,
-                                });
-                              }}
-                            >
-                              <Icon name={navTreeSVG} size="24px" />
-                            </Button>
-                          </Button.Group>
-                          <Button.Group>
-                            <label className="ui button basic icon">
-                              <Icon name={uploadSVG} size="24px" />
-                              <input
-                                {...getInputProps({
-                                  type: 'file',
-                                  onChange: this.onUploadImage,
-                                  style: { display: 'none' },
-                                })}
-                              />
-                            </label>
-                          </Button.Group>
-                          <Input
-                            onKeyDown={this.onKeyDownVariantMenuForm}
-                            onChange={this.onChangeUrl}
-                            placeholder={placeholder}
-                            value={this.state.url}
-                            onClick={(e) => {
-                              e.target.focus();
-                            }}
-                            onFocus={(e) => {
-                              this.props.onSelectBlock(this.props.id);
-                            }}
-                          />
-                          {this.state.url && (
-                            <Button.Group>
-                              <Button
-                                basic
-                                className="cancel"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  this.setState({ url: '' });
-                                }}
-                              >
-                                <Icon name={clearSVG} size="30px" />
-                              </Button>
-                            </Button.Group>
-                          )}
-                          <Button.Group>
-                            <Button
-                              basic
-                              primary
-                              disabled={!this.state.url}
-                              onClick={(e) => {
-                                e.stopPropagation();
-                                this.onSubmitUrl();
-                              }}
-                            >
-                              <Icon name={aheadSVG} size="30px" />
-                            </Button>
-                          </Button.Group>
-                        </div>
-                      </div>
-                    </Message>
-                  </div>
-                )}
-              </Dropzone>
-            )}
-          </div>
+          <ImageInput
+            onChange={handleChange}
+            placeholderLinkInput={data.placeholder}
+            block={props.block}
+            id={props.block}
+            objectBrowserPickerType={'image'}
+            onSelectItem={onSelectItem}
+          />
         )}
-        <SidebarPortal selected={this.props.selected}>
-          <ImageSidebar {...this.props} />
+        <SidebarPortal selected={props.selected}>
+          <ImageSidebar {...props} />
         </SidebarPortal>
       </div>
-    );
-  }
+    </>
+  );
 }
 
-export default compose(
-  injectIntl,
-  withBlockExtensions,
-  connect(
-    (state, ownProps) => ({
-      request: state.content.subrequests[ownProps.block] || {},
-      content: state.content.subrequests[ownProps.block]?.data,
-    }),
-    { createContent },
-  ),
-)(Edit);
+export default withBlockExtensions(Edit);