@plone/volto 17.0.0-alpha.3 → 17.0.0-alpha.30

package/CONTRIBUTING.md

@@ -1,3 +1,7 @@
 # Contributing to Volto
 
-See [Contributing to Volto](https://6.dev-docs.plone.org/volto/developer-guidelines/contributing.html).
+See the following documents.
+
+- [Contributing to Plone](https://6.docs.plone.org/contributing/index.html)
+- [Contributing to Volto](https://6.docs.plone.org/volto/contributing/index.html)
+- [First-time contributors](https://6.docs.plone.org/contributing/first-time.html)

package/README.md

@@ -86,7 +86,7 @@ cd myvoltoproject
 You can bootstrap a ready Docker Plone container with all the dependencies and ready for Volto use. We recommend to use the Plone docker builds based in `pip` [plone/plone-backend](https://github.com/plone/plone-backend) image:
 
 ```shell
-docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.1
+docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.5
 ```
 
 or as an alternative if you have experience with Plone and you have all the
@@ -134,7 +134,7 @@ Go to [http://localhost:3000](http://localhost:3000) in your browser.
 Volto is actively developed since 2017 and used in production since 2018 on the following websites:
 
 - [VHS Ehrenamtsportal](https://vhs-ehrenamtsportal.de) (Website to help volunteers that help refugees for the [German Adult Education Association](https://www.dvv-vhs.de/en/home/), developed by [kitconcept GmbH](https://kitconcept.com), 2018)
-- [Zeelandia](https://zeelandia.de) (Corporate website for one of the leading backery ingredients manufacturers in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2019)
+- [Zeelandia](https://zeelandia.de) (Corporate website for one of the leading bakery ingredients manufacturers in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2019)
 - [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://hu-berlin.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://www.eaudeweb.ro), 2019)
 - [Industrial Emissions portal for Europe](https://industry.eea.europa.eu) (Thematic website focusing on European industrial emissions, developed by [Eau de Web](https://www.eaudeweb.ro), 2020)
@@ -177,28 +177,26 @@ Volto is actively developed since 2017 and used in production since 2018 on the
 - [Helmholtz-Institut Erlangen-Nürnberg für Erneuerbare Energien (HI-ERN)](https://www.hi-ern.de) (Website for HI ERN, a research institution for renewable energies, developed by [kitconcept GmbH](https://kitconcept.com), 2022)
 - [Lanku](https://www.lanku.eus) (Website for Lanku Kultur Zerbitzuak, a company offering cultural services and improvised Basque verse singing sessions across the Basque Country, developed by [CodeSyntax](https://www.codesyntax.com/en), 2023)
 - [UEU](https://www.ueu.eus) (Website for Udako Euskal Unibertsitatea, a non-profit University offering all its service only in Basque: courses, publications, ... developed by [CodeSyntax](https://www.codesyntax.com/en), 2023)
+- [German Aerospace Center (DLR)](https://www.dlr.de/de) (The German Aerospace Center (DLR) is the Federal Republic of Germany's research center for aeronautics. With more than 10.000 employees and a yearly budget of more than 1 billion euros, it is one of the largest research institutions in Germany, developed by [kitconcept GmbH](https://kitconcept.com), 2023)
 
 Please create a new [issue](https://github.com/plone/volto/issues/new) or [pull request](https://github.com/plone/volto/pulls) to add your Volto-site here!
 
 ## Documentation
 
-You can find the latest (in-progress) documentation in [https://6.dev-docs.plone.org/](https://6.dev-docs.plone.org/volto/index.html)
+You can find the latest (in-progress) documentation in [https://6.docs.plone.org/](https://6.docs.plone.org/volto/index.html)
 
 ## Training
 
-On the [Plone Trainings Website](https://training.plone.org) you'll find
-Volto-dedicated open training materials, plus React and other
-JavaScript-centered trainings.
+On the [Plone Training website](https://training.plone.org), you'll find Volto-dedicated training materials, plus other JavaScript-centered trainings.
 
 - [Mastering Plone 6 Development](https://training.plone.org/mastering-plone/)
   The comprehensive training on Plone 6 with best practice tips for developers and integrators.
-- [Volto](https://training.plone.org/5/volto/index.html)
-  A detailed training on how to create your own website using Volto frontend.
 - [Volto Hands-On](https://training.plone.org/voltohandson/index.html)
 - [Volto Add-ons Development](https://training.plone.org/voltoaddons/index.html)
-- [Plone Deployment](https://training.plone.org/5/plone-deployment/index.html)
-- [React](https://training.plone.org/react/index.html)
-- [JavaScript For Plone Developers](https://training.plone.org/5/javascript/index.html)
+- [Effective Volto](https://training.plone.org/effective-volto/index.html)
+- [Plone Deployment](https://training.plone.org/plone-deployment/index.html)
+- [Volto](https://2022.training.plone.org/volto/index.html) (archived)
+- [JavaScript For Plone Developers](https://2022.training.plone.org/javascript/index.html) (archived)
 
 ## Talks
 
@@ -228,13 +226,14 @@ JavaScript-centered trainings.
 
 [Timo Stollenwerk - Reinventing Plone, Roadmap to the Modern Web](https://2018.ploneconf.org/talks/reinventing-plone-roadmap-to-the-modern-web)
 
-## Node Support
+## Node.js Support
 
-- Node 18: Supported since Volto 17
-- Node 16: Supported since Volto 14
-- Node 14: No longer supported. It was supported from Volto 8.8.0 - 16
-- Node 12: No longer supported. It was supported from Volto 4 - 15
-- Node 10: No longer supported. It was supported from Volto 1 - 12
+- Node.js 20: Supported since Volto 17
+- Node.js 18: Supported since Volto 17
+- Node.js 16: No longer supported. It was supported from Volto 14 - 16
+- Node.js 14: No longer supported. It was supported from Volto 8.8.0 - 16
+- Node.js 12: No longer supported. It was supported from Volto 4 - 15
+- Node.js 10: No longer supported. It was supported from Volto 1 - 12
 
 ## Browser support
 
@@ -245,7 +244,7 @@ We do not guarantee that deprecated browsers (e.g., Internet Explorer 11) are su
 
 ## Upgrades
 
-You can find the upgrade guide here: https://6.dev-docs.plone.org/volto/upgrade-guide/index.html
+You can find the upgrade guide here: https://6.docs.plone.org/volto/upgrade-guide/index.html
 
 ## Volto Development
 
@@ -269,7 +268,7 @@ yarn
 Either using a Docker command:
 
 ```shell
-docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.1
+docker run -it --rm --name=plone -p 8080:8080 -e SITE=Plone -e PROFILES="plone.volto:default-homepage" plone/plone-backend:6.0.5
 ```
 
 or using the convenience makefile command:
@@ -320,11 +319,11 @@ yarn test
 
 Here you can find a guide on how acceptance testing is done in Volto:
 
-https://6.dev-docs.plone.org/volto/developer-guidelines/acceptance-tests.html
+https://6.docs.plone.org/volto/developer-guidelines/acceptance-tests.html
 
 ## Translations
 
-If you would like contribute to translate Volto into several languages, please, read the [Internationalization (i18n) guide](https://6.dev-docs.plone.org/volto/recipes/i18n.html).
+If you would like contribute to translate Volto into several languages, please, read the [Internationalization (i18n) guide](https://6.docs.plone.org/volto/recipes/i18n.html).
 
 ## Contributors
 

package/addon-registry.js

@@ -6,6 +6,12 @@ const debug = require('debug')('shadowing');
 const { map } = require('lodash');
 const { DepGraph } = require('dependency-graph');
 
+const excludedCompilerOptionsPaths = [
+  '@plone/volto/*',
+  '@plone/volto-slate/*',
+  '@root/*',
+];
+
 function getPackageBasePath(base) {
   while (!fs.existsSync(`${base}/package.json`)) {
     base = path.join(base, '../');
@@ -130,6 +136,11 @@ class AddonConfigurationRegistry {
     this.packages = {};
     this.customizations = new Map();
 
+    // Theme from a package.json key, from volto.config.js or from an ENV VAR
+    // Programatically via volto.config.js wins or the ENV VAR if present
+    this.theme =
+      packageJson.theme || this.voltoConfigJS.theme || process.env.THEME;
+
     this.initDevelopmentPackages();
     this.initPublishedPackages();
     this.initAddonsFromEnvVar();
@@ -192,7 +203,10 @@ class AddonConfigurationRegistry {
           addons: require(packageJsonPath).addons || [],
         };
 
-        this.packages[name] = Object.assign(this.packages[name] || {}, pkg);
+        // Removed excluded paths from CompilerOptions
+        if (!excludedCompilerOptionsPaths.includes(name)) {
+          this.packages[name] = Object.assign(this.packages[name] || {}, pkg);
+        }
       });
     }
     this.initPackagesFolder();
@@ -354,6 +368,35 @@ class AddonConfigurationRegistry {
       .filter((e) => e);
   }
 
+  getCustomThemeAddons() {
+    const customThemeAddonsInfo = {
+      variables: [],
+      main: [],
+    };
+
+    this.getAddonDependencies().forEach((addon) => {
+      const normalizedAddonName = addon.split(':')[0];
+      // We have two possible insertion points, variables and main
+
+      const customThemeVariables = `${this.packages[normalizedAddonName].modulePath}/theme/_variables.scss`;
+      const customThemeMain = `${this.packages[normalizedAddonName].modulePath}/theme/_main.scss`;
+      if (
+        fs.existsSync(customThemeVariables) &&
+        normalizedAddonName !== this.theme
+      ) {
+        customThemeAddonsInfo.variables.push(normalizedAddonName);
+      }
+      if (
+        fs.existsSync(customThemeMain) &&
+        normalizedAddonName !== this.theme
+      ) {
+        customThemeAddonsInfo.main.push(normalizedAddonName);
+      }
+    });
+
+    return customThemeAddonsInfo;
+  }
+
   /**
    * Returns a mapping name:diskpath to be uses in webpack's resolve aliases
    */

package/create-addons-loader.js

@@ -105,7 +105,7 @@ module.exports = (addons, addonsInfo) => {
 
   const addonsLoaderPath = tmp.tmpNameSync({ postfix: '.js' });
   const code = getAddonsLoaderCode(addons, addonsInfo);
-  fs.writeFileSync(addonsLoaderPath, new Buffer.from(code));
+  fs.writeFileSync(addonsLoaderPath, Buffer.from(code));
   return addonsLoaderPath;
 };
 

package/create-theme-addons-loader.js

@@ -0,0 +1,79 @@
+const path = require('path');
+const fs = require('fs');
+const tmp = require('tmp');
+const cryptoRandomString = require('crypto-random-string');
+
+const titleCase = (w) => w.slice(0, 1).toUpperCase() + w.slice(1, w.length);
+
+/*
+ * Transforms a package name to javascript variable name
+ */
+function nameFromPackage(name) {
+  name =
+    name.replace(/[@~./\\:\s]/gi, '') ||
+    cryptoRandomString({ length: 10, characters: 'abcdefghijk' });
+  return name
+    .split('-')
+    .map((w, i) => (i > 0 ? titleCase(w) : w))
+    .join('');
+}
+
+/*
+ * Creates a static file with code necessary to load the addons configuration
+ *
+ */
+function getAddonsLoaderCode(name, customThemeAddons = []) {
+  let buf = `/*
+This file is autogenerated. Don't change it directly.
+Add a ./theme/_${name}.scss in your add-on to load your theme customizations in the current theme.
+*/
+
+`;
+  customThemeAddons.forEach((addon) => {
+    const customization = `${addon}/theme/${name}`;
+    const line = `@import '${customization}';\n`;
+    buf += line;
+  });
+
+  return buf;
+}
+
+module.exports = ({ main, variables }) => {
+  // const addonsThemeLoaderVariablesPath = path.join(
+  //   process.cwd(),
+  //   'src',
+  //   '_variables.scss',
+  // );
+  // const addonsThemeLoaderMainPath = path.join(
+  //   process.cwd(),
+  //   'src',
+  //   '_main.scss',
+  // );
+
+  // const addonsThemeLoaderVariablesPath = path.join(
+  //   process.cwd(),
+  //   'src',
+  //   '_variables.scss',
+  // );
+  // const addonsThemeLoaderMainPath = path.join(
+  //   process.cwd(),
+  //   'src',
+  //   '_main.scss',
+  // );
+
+  const addonsThemeLoaderVariablesPath = tmp.tmpNameSync({ postfix: '.scss' });
+  const addonsThemeLoaderMainPath = tmp.tmpNameSync({ postfix: '.scss' });
+  fs.writeFileSync(
+    addonsThemeLoaderVariablesPath,
+    new Buffer.from(getAddonsLoaderCode('variables', variables)),
+  );
+  fs.writeFileSync(
+    addonsThemeLoaderMainPath,
+    new Buffer.from(getAddonsLoaderCode('main', main)),
+  );
+
+  return [addonsThemeLoaderVariablesPath, addonsThemeLoaderMainPath];
+};
+
+module.exports.getAddonsLoaderCode = getAddonsLoaderCode;
+module.exports.nameFromPackage = nameFromPackage;

package/cypress/support/commands.js

@@ -1,4 +1,3 @@
-import '@testing-library/cypress/add-commands';
 import { getIfExists } from '../helpers';
 import { ploneAuth } from './constants';
 
@@ -21,6 +20,25 @@ const ploneAuthObj = {
   pass: ploneAuth[1],
 };
 
+export * from './volto-slate';
+
+// --- isInViewport ----------------------------------------------------------
+Cypress.Commands.add('isInViewport', (element) => {
+  cy.get(element).then(($el) => {
+    const windowInnerWidth = Cypress.config(`viewportWidth`);
+    const windowInnerHeight = Cypress.config(`viewportHeight`);
+    const rect = $el[0].getBoundingClientRect();
+
+    const rightBoundOfWindow = windowInnerWidth;
+    const bottomBoundOfWindow = windowInnerHeight;
+
+    expect(rect.top).to.be.at.least(0);
+    expect(rect.left).to.be.at.least(0);
+    expect(rect.right).to.be.lessThan(rightBoundOfWindow);
+    expect(rect.bottom).to.be.lessThan(bottomBoundOfWindow);
+  });
+});
+
 // --- AUTOLOGIN -------------------------------------------------------------
 Cypress.Commands.add('autologin', (usr, pass) => {
   let api_url, user, password;
@@ -671,10 +689,7 @@ Cypress.Commands.add(
 Cypress.Commands.add('toolbarSave', () => {
   // Save
   cy.get('#toolbar-save', { timeout: 10000 }).click();
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('');
 });
 
 Cypress.Commands.add('clearSlate', (selector) => {
@@ -705,6 +720,20 @@ Cypress.Commands.add('getSlate', (createNewSlate = false) => {
   return slate;
 });
 
+Cypress.Commands.add('getSlateSelector', (selector = SLATE_SELECTOR) => {
+  let slate;
+  cy.getIfExists(
+    selector,
+    () => {
+      slate = cy.get(selector).last();
+    },
+    () => {
+      slate = cy.get(selector, { timeout: 10000 }).last();
+    },
+  );
+  return slate;
+});
+
 Cypress.Commands.add('getSlateTitle', () => {
   return cy.get(SLATE_TITLE_SELECTOR, {
     timeout: 10000,
@@ -751,18 +780,25 @@ Cypress.Commands.add('lineBreakInSlate', { prevSubject: true }, (subject) => {
   );
 });
 
-Cypress.Commands.add('setSlateSelection', (subject, query, endQuery) => {
-  cy.get('.slate-editor.selected [contenteditable=true]')
-    .focus()
-    // .click()
-    .setSelection(subject, query, endQuery)
-    .wait(1000); // this wait is needed for the selection change to be detected after
-});
+Cypress.Commands.add(
+  'setSlateSelection',
+  (subject, query, endQuery, wait = 1000) => {
+    cy.get('.slate-editor.selected [contenteditable=true]')
+      .focus()
+      // .click()
+      .setSelection(subject, query, endQuery)
+      .wait(wait); // this wait is needed for the selection change to be detected after
+  },
+);
 
 Cypress.Commands.add('getSlateEditorAndType', (type) => {
   cy.getSlate().focus().click().type(type);
 });
 
+Cypress.Commands.add('getSlateEditorSelectorAndType', (selector, type) => {
+  cy.getSlateSelector(selector).focus().click().type(type);
+});
+
 Cypress.Commands.add('setSlateCursor', (subject, query, endQuery) => {
   cy.get('.slate-editor.selected [contenteditable=true]')
     .focus()
@@ -771,9 +807,9 @@ Cypress.Commands.add('setSlateCursor', (subject, query, endQuery) => {
     .wait(1000); // this wait is needed for the selection change to be detected after
 });
 
-Cypress.Commands.add('clickSlateButton', (button) => {
+Cypress.Commands.add('clickSlateButton', (button, timeout = 1000) => {
   cy.get(`.slate-inline-toolbar .button-wrapper a[title="${button}"]`, {
-    timeout: 1000,
+    timeout,
   }).click({ force: true }); // force click is needed to ensure the button in visible in view.
 });
 
@@ -849,3 +885,23 @@ Cypress.Commands.add('getTableSlate', (header = false) => {
   );
   return slate;
 });
+
+Cypress.Commands.add('configureListingWith', (contentType) => {
+  cy.get('.sidebar-container .tabs-wrapper .menu .item')
+    .contains('Block')
+    .click();
+  cy.get('.querystring-widget .fields').contains('Add criteria').click();
+  cy.get(
+    '.querystring-widget .fields:first-of-type .field:first-of-type .react-select__menu .react-select__option',
+  )
+    .contains('Type')
+    .click();
+
+  //insert Page
+  cy.get('.querystring-widget .fields:first-of-type > .field').click();
+  cy.get(
+    '.querystring-widget .fields:first-of-type > .field .react-select__menu .react-select__option',
+  )
+    .contains(contentType)
+    .click();
+});

package/cypress/support/e2e.js

@@ -1,3 +1,4 @@
+import '@testing-library/cypress/add-commands';
 import 'cypress-axe';
 import 'cypress-file-upload';
 import './commands';
@@ -28,5 +29,3 @@ afterEach(function () {
     teardown();
   }
 });
-
-export * from './volto-slate';

package/cypress/support/volto-slate.js

@@ -1,4 +1,5 @@
 export const slateBeforeEach = (contentType = 'Document') => {
+  cy.intercept('GET', `/**/*?expand*`).as('content');
   cy.autologin();
   cy.createContent({
     contentType: contentType,
@@ -6,12 +7,10 @@ export const slateBeforeEach = (contentType = 'Document') => {
     contentTitle: 'My Page',
   });
   cy.visit('/my-page');
-  cy.waitForResourceToLoad('@navigation');
-  cy.waitForResourceToLoad('@breadcrumbs');
-  cy.waitForResourceToLoad('@actions');
-  cy.waitForResourceToLoad('@types');
-  cy.waitForResourceToLoad('my-page');
+  cy.wait('@content');
+
   cy.navigate('/my-page/edit');
+  cy.wait('@content');
 };
 
 export const getSelectedSlateEditor = () => {

package/cypress.config.js

@@ -4,6 +4,7 @@ module.exports = defineConfig({
   viewportWidth: 1280,
   chromeWebSecurity: false,
   projectId: 'hvviu4',
+  video: true, // To remove when Test Replay is available in cypress.io
   e2e: {
     baseUrl: 'http://127.0.0.1:3000',
     excludeSpecPattern: ['*~'],

package/docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.3'
 services:
 
   backend:
-    image: plone/plone-backend:6.0.1
+    image: plone/plone-backend:6.0.5
     # Plone 5.2 series can be used too
     # image: plone/plone-backend:5.2.10
     ports: