Change the underlying library from react-slick to embla-carousel-react

.eslintrc-patch.js

@@ -0,0 +1,61 @@
+const fs = require('fs');
+const path = require('path');
+const projectRootPath = __dirname;
+const packageJson = require(path.join(projectRootPath, 'package.json'));
+
+let voltoPath = './node_modules/@plone/volto';
+
+let configFile;
+if (fs.existsSync(`${this.projectRootPath}/tsconfig.json`))
+  configFile = `${this.projectRootPath}/tsconfig.json`;
+else if (fs.existsSync(`${this.projectRootPath}/jsconfig.json`))
+  configFile = `${this.projectRootPath}/jsconfig.json`;
+
+if (configFile) {
+  const jsConfig = require(configFile).compilerOptions;
+  const pathsConfig = jsConfig.paths;
+  if (pathsConfig['@plone/volto'])
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
+}
+
+const AddonConfigurationRegistry = require(
+  `${voltoPath}/addon-registry.js`,
+);
+const reg = new AddonConfigurationRegistry(__dirname);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map((o) => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+const addonExtenders = reg.getEslintExtenders().map((m) => require(m));
+
+const defaultConfig = {
+  extends: `${voltoPath}/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ['@plone/volto-slate', '@plone/volto/packages/volto-slate/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['@root', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+};
+
+const config = addonExtenders.reduce(
+  (acc, extender) => extender.modify(acc),
+  defaultConfig,
+);
+
+module.exports = config;

.github/workflows/acceptance.yml

@@ -4,7 +4,7 @@ on: [push]
 env:
   ADDON_NAME: "@kitconcept/volto-slider-block"
   ADDON_PATH: "volto-slider-block"
-  VOLTO_VERSION: "17.2.0"
+  VOLTO_VERSION: "17.6.0"
 
 jobs:
 

Makefile

@@ -22,7 +22,7 @@ RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
 PLONE_VERSION=6
-VOLTO_VERSION=17.2.0
+VOLTO_VERSION=17.6.0
 
 ADDON_NAME='@kitconcept/volto-slider-block'
 ADDON_PATH='volto-slider-block'

README.md

@@ -63,6 +63,31 @@ yarn start
 
 Go to http://localhost:3000, login, create a new page. The slider block will show up in the Volto blocks chooser.
 
+## Upgrade Guide
+
+### `volto-slider-block` 6.0.0
+
+The underlying library used by this block has been changed.
+Now it uses [Embla Caroussel](https://www.embla-carousel.com).
+Embla Caroussel has a similar API and has all the features that `react-slick` had.
+Embla is more modern and supported, uses hooks to configure itself and it's extensible using plugins.
+It solves all the problems that `react-slick` had, specially in the simplification of the containers and wrappers, and the way it handles the CSS transformations and the width of the elements.
+
+If you've made any CSS customization, the classNames changed, so you'll need to update the CSS following this table.
+
+| Old className   | New className    |
+| --------------- | ---------------- |
+| slick-slider    | slider-wrapper   |
+| slick-list      | slider-viewport  |
+| slick-track     | slider-container |
+| slick-slide     | slider-slide     |
+| slick-arrow     | slider-button    |
+| slick-prev      | slider-button-prev |
+| slick-next      | slider-slide-next  |
+| slick-next      | slider-slide-next  |
+| slick-dots      | slider-dots      |
+| slick-dot       | slider-dot       |
+
 ## Customization
 
 You can use a Volto `schemaEnhancer` to modify the existing block schema. The block also can be extended using Volto's block variations.
@@ -210,27 +235,6 @@ export const SliderBlockDataAdapter = ({
 };
 ```
 
-## Fix for the limitation in `react-slick`
-
-The underlying library used in this add-on is `react-slick`. This library has a limitation when used in the Volto Blocks Engine that prevents to enclose properly the slides in the block wrapper.
-
-To workaround it, it's required to anchor the width to an external element that has the same desired size than the block wrapper. This is set to the default Volto header using a CSS selector ('.container .header') which is the most common use case and can be overriden using the block setting: `referenceContainerQuery` like:
-
-```js
-config.blocks.blocksConfig.slider = {
-  referenceContainerQuery: 'body.has-sidebar .container .header',
-};
-```
-
-This fix has an option to adjust this width given a fixed value of pixels via a CSS custom property called `--slider-block-edit-width-adjustment`.
-So you can add it in your custom theme, as follows:
-
-```css
-:root {
-  --slider-block-edit-adjustment: 40px;
-}
-```
-
 # Credits
 
 <img alt="Forschungszentrum Jülich" src="https://github.com/kitconcept/volto-slider-block/raw/master/fz-juelich.svg" width="200px" />

dockerfiles/Dockerfile.dev

@@ -9,6 +9,7 @@ COPY --chown=node:node package.json /app/src/addons/${ADDON_PATH}/
 
 # Copy linter / prettier configs
 COPY --chown=node:node .eslintignore* .prettierignore* /app/
+COPY --chown=node:node .eslintrc-patch.js /app/.eslintrc.js
 
 RUN <<EOT
     /setupAddon

news/37.breaking

@@ -0,0 +1,2 @@
+Change the underlying library from react-slick to embla-carousel-react @sneridagh
+See Upgrade Guide section in README

package.json

@@ -99,8 +99,7 @@
   },
   "dependencies": {
     "deepmerge": "4.2.2",
-    "react-slick": "0.29.0",
-    "slick-carousel": "1.8.1"
+    "embla-carousel-react": "^8.0.0-rc15"
   },
   "peerDependencies": {
     "@plone/volto": "^17.0.0-alpha.21"

src/components/Data.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 import { SliderSchema } from './schema';
@@ -31,10 +30,4 @@ const SliderData = (props) => {
   );
 };
 
-SliderData.propTypes = {
-  data: PropTypes.objectOf(PropTypes.any).isRequired,
-  block: PropTypes.string.isRequired,
-  onChangeBlock: PropTypes.func.isRequired,
-};
-
 export default SliderData;

src/components/DotsAndArrows.jsx

@@ -0,0 +1,49 @@
+import { Icon } from '@plone/volto/components';
+import rightArrowSVG from '@plone/volto/icons/right-key.svg';
+import leftArrowSVG from '@plone/volto/icons/left-key.svg';
+
+export const DotButton = (props) => {
+  const { children, index, ...restProps } = props;
+
+  return (
+    <button
+      type="button"
+      {...restProps}
+      aria-label={`Go to slide ${index + 1}`}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const PrevButton = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="slider-button slider-button-prev"
+      type="button"
+      aria-label="previous"
+      {...restProps}
+    >
+      <Icon name={leftArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};
+
+export const NextButton = (props) => {
+  const { children, ...restProps } = props;
+
+  return (
+    <button
+      className="slider-button slider-button-next"
+      type="button"
+      aria-label="next"
+      {...restProps}
+    >
+      <Icon name={rightArrowSVG} size="48px" />
+      {children}
+    </button>
+  );
+};