Merge branch 'main' into enhanceimagewidget_newbranch

.github/ISSUE_TEMPLATE/bug_report.md

@@ -2,7 +2,7 @@
 name: Bug report
 about: Create a report to help us improve Volto
 title: ''
-labels: '01 type: bug'
+labels: ['01 type: bug', 'needs: triage']
 assignees: ''
 ---
 

.github/workflows/acceptance.yml

@@ -1022,6 +1022,10 @@ jobs:
         run: yarn stylelint
         working-directory: ${{env.project-directory}}
 
+      - name: Build Storybook
+        run: yarn build-storybook
+        working-directory: ${{env.project-directory}}
+
       - name: Cypress acceptance tests
         uses: cypress-io/github-action@v6
         env:

README.md

@@ -116,7 +116,7 @@ To ensure your website gets the greatest exposure, add it both to [Awesome Volto
 - [Comune di Vernio](https://www.comune.vernio.po.it/) (Website of the Municipality of Vernio. Developed by [RedTurtle](https://www.redturtle.it), 2021)
 - [Debabarreneko mankomunitatea](https://debabarrena.eus/eu) (Website of the Commonwealth of Debabarrena, community of municipalities to centralize waste handling services, developed by [CodeSyntax](https://www.codesyntax.com/en), 2022)
 - [Debako Udala / Ayuntamiento de Deba](https://www.deba.eus/eu) (Website of the municipality of Deba, developed by [CodeSyntax](https://www.codesyntax.com/en), 2022)
-- [EEA-IMSv4](https://www.eea.europa.eu/en/analysis/indicators) (EEA Indicator Management System v4. Developed by [Eau de web](https://eaudeweb.ro) for the European Environmental Agency, 2021)
+- [European Environment Agency](https://www.eea.europa.eu/en) (Website of the European Environment Agency. Developed by [Eau de Web](https://eaudeweb.ro), 2023)
 - [Energy Climate Union portal for Europe](https://climate-energy.eea.europa.eu/) (Thematic website focusing on European strides towards mitigating climate change, developed by [Eau de Web](https://eaudeweb.ro/), 2020)
 - [Excellence at Humboldt-Universität zu Berlin](https://www.alles-beginnt-mit-einer-frage.de) (Website for the excellence initiative of the [Humboldt University Berlin](https://www.hu-berlin.de/de), developed by [kitconcept GmbH](https://kitconcept.com), 2019)
 - [Forest Information System for Europe](https://forest.eea.europa.eu) (Thematic website focusing on European forests, developed by [Eau de Web](https://eaudeweb.ro/), 2019)
@@ -155,8 +155,7 @@ You should check the dependencies in their `package.json` for more details.
 - [Freshwater Information System for Europe](https://github.com/eea/freshwater-frontend) - Volto project for [Freshwater Information System for Europe website](https://water.europa.eu/freshwater)
 - [European Industrial Emissions Portal](https://github.com/eea/industry-frontend ) - Volto project for [European Industrial Emissions Portal website](https://industry.eea.europa.eu)
 - [Biodiversity Information System for Europe](https://github.com/eea/bise-frontend) - Volto project for [Biodiversity Information System for Europe website](https://biodiversity.europa.eu)
-- [Sustainability transitions, EEA-Eionet platform](https://github.com/eea/sustainability-frontend) - Volto project for [Sustainability transitions, EEA-Eionet platform website](https://sustainability.eionet.europa.eu)
-- [EEA Indicator Management System](https://github.com/eea/ims-frontend) - Volto project for [EEA Indicator Management System site](https://www.eea.europa.eu/en/analysis/indicators)
+- [EEA Main Website frontend](https://github.com/eea/eea-website-frontend) - Volto project for [European Environment Agency](https://www.eea.europa.eu/en)
 - [Climate and energy in the EU](https://github.com/eea/climate-energy-frontend) - Volto project for [Climate and energy in the EU website](https://climate-energy.eea.europa.eu)
 - [volto-bise](https://github.com/eea/volto-bise) - A Volto project packaged as an addon. It provides Theming using a razzle.extend.js provided alias.
 - [design-volto-theme](https://github.com/RedTurtle/design-volto-theme) Volto theme for Italian Public Administration
@@ -166,5 +165,8 @@ You should check the dependencies in their `package.json` for more details.
 - [plone.org.br](https://github.com/plonegovbr/plone.org.br) - Volto project for the [Brazilian Plone Community](https://plone.org.br)
 - [nsw-design-system-plone6-kit](https://github.com/pretagov/nsw-design-system-plone6-kit) - NSW Design System Plone 6 Kit Volto project for [NSW.gov.au sites](https://digitalnsw.pretagov.com.au/)
 - [volto-centraalmuseum-theme](https://github.com/intk/volto-centraalmuseum-theme) - Volto project for the [Centraal Museum & Rietveld](https://www.centraalmuseum.nl/nl) made for [INTK](https://www.intk.com/en).
+- [volto-eea-design-system](https://github.com/eea/volto-eea-design-system) - EEA Design System Plone 6 Kit Volto project for [European Environment Agency web sites](https://eea.github.io/volto-eea-design-system/)
+- [volto-eea-website-theme](https://github.com/eea/volto-eea-website-theme) - EEA Plone 6 Volto Theme for [European Environment Agency web sites](https://www.eea.europa.eu/en)
+- [volto-eea-kitkat](https://github.com/eea/volto-eea-kitkat) - A known good set of Volto add-ons to be used within all EEA projects and beyond, made for [European Environment Agency](https://www.eea.europa.eu/en)
 - [volto-rietveldschroderhuis-theme](https://github.com/intk/volto-rietveldschroderhuis-theme) - Volto project for the [Rietveld Schröder House](https://www.rietveldschroderhuis.nl/en) made for [INTK](https://www.intk.com/en).
 - [volto-zeeuwsmuseum-theme](https://github.com/intk/volto-zeeuwsmuseum-theme) - Volto project for the [Zeeuws Museum](https://www.zeeuwsmuseum.nl/en) made for [INTK](https://www.intk.com/en).

apps/plone/package.json

@@ -152,7 +152,7 @@
     "dependency-graph": "0.10.0",
     "detect-browser": "5.1.0",
     "diff": "3.5.0",
-    "express": "4.17.3",
+    "express": "4.19.2",
     "filesize": "6",
     "github-slugger": "1.4.0",
     "history": "4.10.1",

apps/vite-ssr/package.json

@@ -39,12 +39,12 @@
     "@types/react-dom": "^18.2.19",
     "@vitejs/plugin-react": "^4",
     "compression": "^1.7.4",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "isbot": "^4.3.0",
     "node-fetch": "^3.3.2",
     "serve-static": "^1.15.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vite-plugin-babel": "^1.2.0"
   }
 }

docs/source/contributing/style-guide.md

@@ -11,36 +11,48 @@ myst:
 
 ## About design systems
 
-A Design System is the single source of truth which groups all the elements that will allow the teams to design, realize and develop a product.
-So a Design System is not a deliverable, but a set of deliverables.
-It constantly evolves with the product, tools, and new technologies.
+A Design System serves as the definitive reference point consolidating all essential elements necessary for teams to design, implement, and advance a product.
+It encompasses a collection of deliverables rather than being a singular output.
+Continuously adapting alongside the product, tools, and emerging technologies, it undergoes constant evolution.
 
-Volto (and thus, Plone 6) had a design system in the making for several years.
-Albert Casado Celma (@albertcasado) had been working on it, and providing a lot of hints and advice about how Volto's UI/UX should be.
-As stated at the beginning, a design system is a continuous effort, that evolves over time with the users' feedback and needs.
+Volto, and thus Plone 6, underwent a gradual evolution of its design system over multiple years.
 
-Albert gifted the community with Pastanaga UI some years ago, which was implemented during last years as default theme UI and UX in Volto itself. Although unfinished, it provided us with endless resources and patterns that we applied to Volto bit by bit.
+## Volto and Pastanaga UI
 
-Lately, Albert has evolved Pastanaga to match the current trends, the feedback of these last years and the lessons learned developing Volto projects. So he has evolved Pastanaga and created Quanta. You can think in Quanta in a PastanagaUI 2.0.
-
-You can find some excerpts of how Quanta looks like in this PDF file: {download}`Quanta Spring 2021 <Quanta.pdf>`
+Around 2017, Albert Casado Celma introduced Pastanaga UI, which became Volto's default theme UI/UX.
+Despite being unfinished, it provided valuable resources and patterns gradually integrated into Volto.
+Albert has played a crucial role in refining Volto's UI/UX, offering valuable insights and guidance.
+As mentioned earlier, design systems evolve over time based on user feedback and changing needs.
 
 ## Tooling around a design system
 
-Volto adopted some time ago [Storybook](https://storybook.js.org), a tool that is specific for build and show off the visual elements that a design system has in isolation. Storybook provides a sandbox to build and test these visual elements (components) in isolation, mock them to show different data and test edge cases and at the same time document them, on how to instantiate them and use them for the developers' own benefit.
+Volto adopted some time ago [Storybook](https://storybook.js.org), a tool that interactively displays the visual elements of a design system.
+Storybook provides a sandbox to build and test these visual elements (components) in isolation, mock them to show different data, and test edge cases.
+At the same time, Storybook documents components for how to instantiate them and use them in development.
 
 Not all Volto's visual components are covered yet in Storybook, but it has already a good foundation.
+Look at the current components [Storybook build](https://6.docs.plone.org/storybook).
+
+## Quanta, the design system for Plone 7
 
-You can find the current Storybook build in: https://6.docs.plone.org/storybook
+Recently, Albert updated Pastanaga UI to align with current trends and feedback, creating Quanta, a version 2.0 of Pastanaga UI.
+This reflects ongoing refinement and enhancement of the design system.
+Check out Quanta's appearance in this PDF: {download}`Quanta Spring 2021 <Quanta.pdf>`.
 
-## Quanta, the design system for Plone 6
+Its implementation has been challenging due to the community's emphasis on stability and the lack of demand from projects.
+While Quanta offers significant improvements, updating JavaScript and CSS poses a barrier for many.
+Stability remains a priority, especially considering the potential disruptions caused by incremental changes.
 
-The idea is that Quanta will become the design system for Plone 6 when it's finished. For now, Pastanaga and Quanta are treated as preliminary work and style guide to help Volto and Plone 6 a reality.
+The idea of incorporating Quanta aligns with the broader context of advancing headless CMS capabilities.
+However, it necessitates the development of a new theming framework, which is currently underway.
+Once all components are in place, Volto can be reassembled with Quanta.
 
-It has been already some work on Quanta here and there, the idea is to adopt it bit by bit, since implementing it overnight would be impossible since maintaining both efforts, main and Quanta in sync would be crazy.
+Although the timeline for Quanta's integration, potentially in Plone 7, remains uncertain, progress is being made on experimental packages.
+Generating interest within the community is also a priority.
 
-Quanta for now have the shape of a Volto addon: https://github.com/plone/volto-quanta
+In the meantime, for upcoming projects, Volto with Pastanaga UI remains the recommended and viable option.
 
 ## Help to make Quanta a reality
 
-Do you want to help Quanta a reality in Plone 6? Just ping the Volto Team in Github or in the Plone organization Volto Slack channel: https://plone.slack.com/?redir=%2Farchives%2FCQLBSUKRT to ask for access to the Quanta specs.
+Do you want to help Quanta become a reality?
+Just ping the Volto Team on GitHub or in the [Plone organization Discord](https://plone.org/community/chat) channel [`#frontend-volto`](https://discord.com/channels/786421998426521600/787308038050545666) to ask for access to the Quanta specs and how to help.

docs/source/release-notes/index.md

@@ -17,6 +17,39 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.25 (2024-03-24)
+
+### Internal
+
+- Remove dangling unused lines in StoryBook config @sneridagh [#5911](https://github.com/plone/volto/issues/5911)
+- Upgrade Storybook to version 8. @sneridagh [#5912](https://github.com/plone/volto/issues/5912)
+
+### Documentation
+
+- Update information about Quanta plans. [@jensens] [#5903](https://github.com/plone/volto/issues/5903)
+
+## 18.0.0-alpha.24 (2024-03-23)
+
+### Feature
+
+- Add id attribute to discussions container and individual comments [@ericof] [#5904](https://github.com/plone/volto/issues/5904)
+
+### Internal
+
+- Move `testing-library` Cypress commands import to inner commands, so it can be imported from the outside. @sneridagh [#5906](https://github.com/plone/volto/issues/5906)
+- Add new cypress helper for slate `getSlateEditorAndType` @sneridagh [#5909](https://github.com/plone/volto/issues/5909)
+- Upgrade @typescript-eslint @sneridagh [#5910](https://github.com/plone/volto/issues/5910)
+
+## 18.0.0-alpha.23 (2024-03-21)
+
+### Feature
+
+- Improve the usage of `RAZZLE_JEST_CONFIG`. @sneridagh [#5901](https://github.com/plone/volto/issues/5901)
+
+### Documentation
+
+- Updated testing and code quality with information on how to contribute to Volto core. @ichim-david [#5341](https://github.com/plone/volto/issues/5341)
+
 ## 18.0.0-alpha.22 (2024-03-19)
 
 ### Bugfix

docs/source/upgrade-guide/index.md

@@ -170,6 +170,60 @@ In your add-ons and projects, we advise you to always use the public components
 
 This change improves UX of the Babel view (translation form) since a disabled field cannot be selected to be copied over.
 
+### `volto-slate` Cypress helpers moved to its own module
+
+There were some Cypress helpers for `volto-slate` along with the other definitions of Cypress commands.
+The Cypress command definitions are intended to be loaded only once, whereas the helpers can be imported any number of times.
+Therefore, we moved the helpers to its own module:
+
+```js
+import { slateBeforeEach } from '@plone/volto/cypress/support/commands';
+```
+
+becomes:
+
+```js
+import { slateBeforeEach } from '@plone/volto/cypress/support/helpers';
+```
+
+### Storybook 8
+
+Storybook was upgraded from version 6 to 8 in core and in the project generator.
+This section is relevant if you have Storybook stories in your project or add-on.
+The versions will be upgraded automatically using the `volto-update-deps` script.
+The configuration of your project must also be updated with the new one.
+Replace the `.storybook` folder in your project with this one:
+
+https://github.com/plone/volto/tree/5605131868689778bbdca0c3003a40cb9f153c1a/packages/generator-volto/generators/app/templates/.storybook
+
+Finally, in your project's or add-on's {file}`package.json` file, update the `scripts` key with the key/value pairs, as shown in the following diff.
+
+```diff
+-    "storybook": "start-storybook -p 6006",
+-    "build-storybook": "build-storybook"
++    "storybook": "storybook dev -p 6006",
++    "build-storybook": "storybook build"
+```
+
+```{seealso}
+[Migration guide from Storybook 6.x to 8.0](https://storybook.js.org/docs/migration-guide/from-older-version)
+```
+
+If you haven't customized the configuration, the migration is straightforward.
+The stories format (CSF) is almost the same.
+However, writing stories directly in MDX was removed in Storybook 8.
+The `.stories.mdx` extension is no longer supported.
+
+```{note}
+Although it is technically possible to keep the old version running, the script `volto-update-deps` will try to update to Storybook 8 every time you run it.
+```
+
+### Form component passes down `id` of the current fieldset
+
+There was a bug where a fieldset's generated value would be not valid.
+This has been fixed by passing down the `id` instead of the `title` to the fieldset's value.
+If your tests rely on the old fieldset's generated value for selecting fields, your tests could break, in which case you should amend them to use the updated fieldset's value instead.
+
 (volto-upgrade-guide-17.x.x)=
 
 ## Upgrading to Volto 17.x.x

package.json

@@ -8,7 +8,7 @@
     "build:deps": "pnpm --filter @plone/registry --filter @plone/client build",
     "build:registry": "pnpm --filter @plone/registry run build",
     "build:components": "pnpm --filter @plone/components run build",
-    "build": "pnpm build:deps && pnpm --filter @plone/volto build",
+    "build": "pnpm --filter @plone/volto build",
     "start": "pnpm build:deps && pnpm --filter @plone/volto start",
     "start:project": "pnpm --filter plone run start",
     "lint": "pnpm build:deps && eslint --max-warnings=0 '{apps,packages}/**/*.{js,jsx,ts,tsx}'",
@@ -30,8 +30,8 @@
   "devDependencies": {
     "@parcel/packager-ts": "^2.12.0",
     "@parcel/transformer-typescript-types": "^2.12.0",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "concurrently": "^8.2.2",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "9.1.0",
@@ -51,8 +51,7 @@
   "pnpm": {
     "overrides": {
       "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
-      "react-refresh": "0.14.0",
-      "webpack": "5.90.1"
+      "react-refresh": "0.14.0"
     }
   }
 }

packages/blocks/package.json

@@ -63,7 +63,7 @@
     "parcel": "^2.12.0",
     "release-it": "17.1.1",
     "tsconfig": "workspace:*",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "vitest": "^1.3.1"
   }
 }

packages/client/news/5912.internal

@@ -0,0 +1 @@
+Sync TypeScript version @sneridagh

packages/client/news/5942.bugfix

@@ -0,0 +1 @@
+Update `vite` to 5.1.5. @davisagli

packages/client/package.json

@@ -85,9 +85,9 @@
     "react-dom": "^18.2.0",
     "release-it": "17.1.1",
     "tsup": "^8.0.2",
-    "typescript": "5.2.2",
+    "typescript": "5.4.2",
     "uuid": "^9.0.1",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vite-plugin-dts": "^3.7.3",
     "vitest": "^1.3.1",
     "wait-on": "^7.2.0"

packages/components/news/5912.internal

@@ -0,0 +1 @@
+Upgrade Storybook to version 8. @sneridagh

packages/components/news/5942.bugfix

@@ -0,0 +1 @@
+Update `vite` to 5.1.5. @davisagli

packages/components/package.json

@@ -84,22 +84,22 @@
     "@parcel/transformer-typescript-types": "^2.12.0",
     "@plone/types": "workspace: *",
     "@react-types/shared": "^3.22.0",
-    "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/blocks": "^7.6.17",
-    "@storybook/manager-api": "^7.6.17",
-    "@storybook/react": "^7.6.17",
-    "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^7.6.17",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-mdx-gfm": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/manager-api": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@types/jest-axe": "^3.5.7",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "@vitejs/plugin-react": "^4.1.0",
     "@vitest/coverage-v8": "^1.3.1",
     "browserslist": "^4.23.0",
@@ -113,18 +113,19 @@
     "parcel-optimizer-react-client": "workspace:^",
     "prettier": "3.2.5",
     "release-it": "17.1.1",
-    "storybook": "^7.6.17",
+    "storybook": "^8.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-idiomatic-order": "10.0.0",
     "stylelint-prettier": "5.0.0",
-    "typescript": "5.2.2",
-    "vite": "^5.1.4",
+    "typescript": "5.4.2",
+    "vite": "^5.1.5",
     "vitest": "^1.3.1",
     "vitest-axe": "^0.1.0"
   },
   "dependencies": {
     "@react-aria/utils": "^3.22.0",
     "@react-spectrum/utils": "^3.11.1",
+    "@storybook/test": "^8.0.4",
     "clsx": "^2.0.0",
     "react-aria-components": "^1.1.1"
   },

packages/generator-volto/CHANGELOG.md

@@ -8,6 +8,13 @@
 
 <!-- towncrier release notes start -->
 
+## 9.0.0-alpha.14 (2024-03-24)
+
+### Internal
+
+- Fix StoryBook for project generator in Volto 18 @sneridagh [#5911](https://github.com/plone/volto/issues/5911)
+- Update project template to use Storybook 8. @sneridagh [#5912](https://github.com/plone/volto/issues/5912)
+
 ## 9.0.0-alpha.13 (2024-03-18)
 
 ### Bugfix