diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 5da70561d..5c2bc44b5 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -31,7 +31,7 @@ jobs: build-args: | ADDON_NAME=design-comuni-plone-theme ADDON_PATH=design-comuni-plone-theme - VOLTO_VERSION=17.0.0-alpha.19 + VOLTO_VERSION=17.5.0 - name: Deploy to rancher uses: redturtle/rancher-deploy-action@v0.2.0 diff --git a/.github/workflows/prs.yml b/.github/workflows/prs.yml index 53b515258..fa2c24e3a 100644 --- a/.github/workflows/prs.yml +++ b/.github/workflows/prs.yml @@ -34,4 +34,4 @@ jobs: build-args: | ADDON_NAME=design-comuni-plone-theme ADDON_PATH=design-comuni-plone-theme - VOLTO_VERSION=17.0.0-alpha.19 + VOLTO_VERSION=17.5.0 diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 123e90e5c..a77c15c57 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -35,4 +35,4 @@ jobs: build-args: | ADDON_NAME=design-comuni-plone-theme ADDON_PATH=design-comuni-plone-theme - VOLTO_VERSION=17.0.0-alpha.19 + VOLTO_VERSION=17.5.0 diff --git a/Makefile b/Makefile index 77bc4d89f..0f5b0d344 100644 --- a/Makefile +++ b/Makefile @@ -27,7 +27,7 @@ CURRENT_DIR:=$(shell dirname $(realpath $(lastword $(MAKEFILE_LIST)))) # ADDON ?= "design-comuni-plone-theme" PLONE_VERSION=6 -VOLTO_VERSION=17.0.0-alpha.19 +VOLTO_VERSION=17.5.0 ADDON_NAME='design-comuni-plone-theme' ADDON_PATH='design-comuni-plone-theme' diff --git a/jest-addon.config.js b/jest-addon.config.js index debdbbcd4..59ad11305 100644 --- a/jest-addon.config.js +++ b/jest-addon.config.js @@ -17,10 +17,6 @@ module.exports = { ], moduleNameMapper: { '\\.(css|less|scss|sass|svg)$': 'identity-obj-proxy', - '@plone/volto/components/theme/Image/Image': - '/src/addons/design-comuni-plone-theme/src/components/Image/Image.jsx', - '@plone/volto/helpers/Image/Image': - '/src/addons/design-comuni-plone-theme/src/components/Image/helpers.js', '@plone/volto/cypress': '/node_modules/@plone/volto/cypress', '@plone/volto/babel': '/node_modules/@plone/volto/babel', '@plone/volto/(.*)$': '/node_modules/@plone/volto/src/$1', diff --git a/package.json b/package.json index 93eb5b070..b111445bc 100644 --- a/package.json +++ b/package.json @@ -173,7 +173,7 @@ "stylelint-prettier": "4.0.0" }, "peerDependencies": { - "@plone/volto": "17.0.0-alpha.19" + "@plone/volto": "17.5.0" }, "packageManager": "yarn@3.2.3" } diff --git a/razzle.extend.js b/razzle.extend.js index a964ce978..7081de0df 100644 --- a/razzle.extend.js +++ b/razzle.extend.js @@ -108,23 +108,6 @@ const modify = (webpackConfig, { target, dev }, webpackObject) => { const babelLoader = webpackConfig.module.rules.find(babelLoaderFinder); babelLoader.include.push(/node_modules\/design-react-kit/); - webpackConfig.resolve.alias = { - // TODO remove the next two when implemented in core - '@plone/volto/components/theme/Image/Image': `${__dirname}/src/components/Image/Image.jsx`, - '@plone/volto/helpers/Image/Image': `${__dirname}/src/components/Image/helpers.js`, - ...webpackConfig.resolve.alias, - // 'design-comuni-plone-theme': `${__dirname}/src`, - }; - - // remove unused languages. (TODO: move to ENV at build time) - // webpackConfig.plugins.push( - // new webpackObject.ContextReplacementPlugin( - // /moment[/\\]locale$/, - // /(it|it-it|en-us|en-gb)$/, - // ), - // // Ignore all locale files of moment.js - new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), - // ); - return webpackConfig; }; diff --git a/src/components/Image/Image.jsx b/src/components/Image/Image.jsx deleted file mode 100644 index 4e62c5f65..000000000 --- a/src/components/Image/Image.jsx +++ /dev/null @@ -1,165 +0,0 @@ -import React, { useEffect, useRef, useState } from 'react'; - -import PropTypes from 'prop-types'; -// eslint-disable-next-line import/no-unresolved -import { getImageAttributes } from '@plone/volto/helpers/Image/Image'; - -/** - * Image component - * @param {string} itemUrl - url (`@id`) of the item. **ONLY** use this if rendering an image from a brain object, leave undefined otherwise - * @param {object | string} image - Plone image as object or url - * @param {string} imageField - (default: image) image field for scales URL - * @param {string} alt - Alternative text for image - * @param {string} className - CSS class attribute - * @param {string} containerClassName - CSS class attribute for picture element - * @param {string} floated - float left or right - * @param {string} responsive - if the image is responsive - * @param {string} size - (css class) actual width: thumb, small, medium or large - * @param {string} role - img role attribute - * @param {boolean} critical - if critical, do not lazy load the image - * @param {number} maxSize - maximum size to render - * @param {boolean} useOriginal - whether to render original size - */ -const Image = ({ - itemUrl, - image, - imageField = 'image', - alt = '', - className, - containerClassName, - floated, - size, - responsive = true, - role = 'img', - critical = false, - maxSize, - minSize = 0, - useOriginal = false, - sizes = '100vw', - ...imageProps -}) => { - const { src, srcSet, width, height, aspectRatio } = getImageAttributes( - image, - { - itemUrl, - imageField, - maxSize, - useOriginal, - minSize, - }, - ); - const imageRef = useRef(); - const [actualSrcSet, setActualSrcSet] = useState( - critical && srcSet ? srcSet.join(', ') : null, - ); - // TODO: serve a qualcuno questo? - const imageHasLoaded = imageRef?.current?.complete; - - //picture classname - let pictureClassName = `volto-image${ - containerClassName ? ` ${containerClassName}` : '' - }`; - if (floated) { - pictureClassName = `${pictureClassName} floated ${floated}`; - } - if (size) { - pictureClassName = `${pictureClassName} ${size}`; - } - - if (responsive) { - pictureClassName = `${pictureClassName} responsive`; - } - - //intersection observer - useEffect(() => { - const applySrcSet = () => { - setActualSrcSet(srcSet.join(', ')); - }; - - if (srcSet && !critical) { - if ('IntersectionObserver' in window) { - const observer = new IntersectionObserver( - (entries) => { - entries.forEach((entry) => { - if (entry.isIntersecting && !actualSrcSet) { - applySrcSet(); - if (imageRef.current instanceof Element) { - observer.unobserve(imageRef.current); - } - } - }); - }, - { threshold: [0], rootMargin: '100px' }, - ); - observer.observe(imageRef.current); - } else { - applySrcSet(); - } - } - }, [imageHasLoaded, srcSet, actualSrcSet, critical]); - - return ( - <> - - {actualSrcSet?.length > 0 && ( - - )} - {alt} - - {!critical && ( -