@plone/volto 17.0.0-alpha.2 → 17.0.0-alpha.20

package/CONTRIBUTING.md

@@ -1,3 +1,3 @@
 # Contributing to Volto
 
-See [Contributing to Volto](https://6.dev-docs.plone.org/volto/developer-guidelines/contributing.html).
+See [Contributing to Volto](https://6.docs.plone.org/volto/developer-guidelines/contributing.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
@@ -182,23 +182,20 @@ Please create a new [issue](https://github.com/plone/volto/issues/new) or [pull
 
 ## 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
 
@@ -245,7 +242,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 +266,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 +317,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

@@ -130,6 +130,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();
@@ -354,6 +359,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-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

@@ -21,6 +21,23 @@ const ploneAuthObj = {
   pass: ploneAuth[1],
 };
 
+// --- 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 +688,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 +719,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,
@@ -763,6 +791,10 @@ 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()
@@ -849,3 +881,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/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/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: