fix: README.md & package.json

README.md

@@ -104,7 +104,6 @@ const theme = '@kitconcept/volto-slider-block';
 
 Visit http://localhost:3000/ in a browser, login, and check the awesome new features.
 
-
 ## 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.
@@ -117,6 +116,186 @@ For this reason, it only works with pnpm and Volto 18 (currently in alpha).
 -   [Make](https://6.docs.plone.org/install/create-project.html#make)
 -   [Docker](https://6.docs.plone.org/install/create-project.html#docker)
 
+## Configuration options
+
+### `enableAutoPlay`
+
+This enables the autoplay controls in the block's settings.
+
+```js
+config.blocks.blocksConfig.slider.enableAutoPlay = true;
+```
+
+## 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.
+
+```
+import { defineMessages } from 'react-intl';
+import { pull } from 'lodash';
+
+import SliderDefaultBody from './components/Blocks/Slider/DefaultBody'; // My custom view component for slides
+
+const messages = defineMessages({
+  color: {
+    id: 'Color',
+    defaultMessage: 'Color',
+  },
+  slideBackgroundColor: {
+    id: 'Slide Background Color',
+    defaultMessage: 'Slide Background Color',
+  },
+  flagColor: {
+    id: 'Flag color',
+    defaultMessage: 'Flag color',
+  },
+});
+
+const BG_COLORS = [
+  { name: 'transparent', label: 'Transparent' },
+  { name: 'grey', label: 'Grey' },
+];
+
+// The schemaEnhancer
+const sliderBlockSchemaEnhancer = ({ formData, schema, intl }) => {
+  schema.properties.slides.schema.fieldsets[0].fields.push(
+    'slideBackgroundColor',
+  );
+  schema.properties.slides.schema.properties.slideBackgroundColor = {
+    widget: 'color_picker',
+    title: intl.formatMessage(messages.slideBackgroundColor),
+    colors: BG_COLORS,
+    default: 'transparent',
+  };
+  pull(schema.properties.slides.schema.fieldsets[0].fields, 'description'); // You can remove fields as well
+  return schema; // You should return the schema back
+};
+const applyConfig = (config) => {
+
+  config.blocks.blocksConfig.slider = {
+    schemaEnhancer: sliderBlockSchemaEnhancer,
+    variations: [
+      {
+        id: 'default',
+        isDefault: true,
+        title: 'Default',
+        view: SliderDefaultBody,
+      },
+    ],
+  }
+}
+```
+
+## Extra Customization
+
+More fields can be added to either the block itself or to each slide. You can use the configuration settings to do so:
+
+```
+config.blocks.blocksConfig.slider.extensions = {
+  blockSchema: {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['new_field'],
+      },
+    ],
+    properties: {
+      new_field: {
+        title: 'New Slider Field',
+      },
+    },
+  },
+  slideSchema: {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['new_field'],
+      },
+    ],
+    properties: {
+      new_field: {
+        title: 'New Slide Field',
+      },
+    },
+      },
+};
+```
+The block and slide schemas will be merged with the existing ones.
+
+## Data adapter
+
+The Teaser has a data adapter function that allows you to both tap into the changes in the settings and issue changes in other settings fields.
+This is valuable in the Teaser block because it saves an internal cache of the target element.
+If you select the target, these values are updated.
+When you update the target, by default these values remain, but you can issue another behavior.
+
+The data adapter function is defined in the block's setting `dataAdapter`.
+You can override it and add your own function, if required.
+The following is the default adapter.
+You should stick to this signature in your custom adapters.
+
+```js
+import { difference } from '@plone/volto/helpers';
+import { replaceItemOfArray } from '@plone/volto/helpers';
+
+export const SliderBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  onChangeBlock,
+  value,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+
+  if (id === 'slides') {
+    const diff = difference(value, data[id]);
+    const index = diff.findIndex((val) => val);
+    if (diff[index]?.href?.[0]) {
+      dataSaved = {
+        ...dataSaved,
+        slides: replaceItemOfArray(value, index, {
+          ...value[index],
+          title: diff[index].href[0].Title,
+          description: diff[index].href[0].Description,
+          head_title: diff[index].href[0].head_title,
+        }),
+      };
+    }
+  }
+
+  onChangeBlock(block, dataSaved);
+};
+```
 
 ### Make convenience commands
 
@@ -229,3 +408,13 @@ The project is licensed under the MIT license.
 ## Credits and Acknowledgements 🙏
 
 Crafted with care by **Generated using [Cookieplone (0.8.2)](https://github.com/plone/cookieplone) and [cookiecutter-plone (d9b5293)](https://github.com/plone/cookiecutter-plone/commit/d9b52933cbc6efd137e93e35a270214e307359f0) on 2025-01-15 17:14:53.439229**. A special thanks to all contributors and supporters!
+
+<img alt="Forschungszentrum Jülich" src="https://github.com/kitconcept/volto-slider-block/raw/main/fz-juelich.svg" width="200px" />
+
+<img alt="Deutsches Zentrum für Luft- und Raumfahrt" src="https://github.com/kitconcept/volto-slider-block/raw/main/dlr.svg" width="230px" />
+
+The development of this plugin has been kindly sponsored by [Forschungszentrum Jülich](https://fz-juelich.de) and the [German Aerospace Center (DLR)](https://dlr.de).
+
+# License
+
+The project is licensed under the MIT license.

package.json

@@ -35,55 +35,7 @@
     "storybook": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto storybook dev -p 6006 -c $(pwd)/.storybook",
     "storybook-build": "VOLTOCONFIG=$(pwd)/volto.config.js pnpm --filter @plone/volto build-storybook -c $(pwd)/.storybook"
   },
-  "prettier": {
-    "trailingComma": "all",
-    "singleQuote": true,
-    "useTabs": false,
-    "overrides": [
-      {
-        "files": "*.overrides",
-        "options": {
-          "parser": "less"
-        }
-      }
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "stylelint-config-idiomatic-order"
-    ],
-    "plugins": [
-      "stylelint-prettier"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.less"
-        ],
-        "customSyntax": "postcss-less"
-      },
-      {
-        "files": [
-          "**/*.overrides"
-        ],
-        "customSyntax": "postcss-less"
-      }
-    ],
-    "rules": {
-      "prettier/prettier": true,
-      "rule-empty-line-before": [
-        "always-multi-line",
-        {
-          "except": [
-            "first-nested"
-          ],
-          "ignore": [
-            "after-comment"
-          ]
-        }
-      ]
-    }
-  },
+
   "dependencies": {
     "@plone/volto": "workspace:*",
     "@plone/registry": "workspace:*",