@eeacms/volto-n2k 0.1.1

package/cypress/support/commands.js

@@ -0,0 +1,315 @@
+/* eslint no-console: ["error", { allow: ["log"] }] */
+
+// --- AUTOLOGIN -------------------------------------------------------------
+Cypress.Commands.add('autologin', () => {
+  let api_url, user, password;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  user = 'admin';
+  password = 'admin';
+
+  return cy
+    .request({
+      method: 'POST',
+      url: `${api_url}/@login`,
+      headers: { Accept: 'application/json' },
+      body: { login: user, password: password },
+    })
+    .then((response) => cy.setCookie('auth_token', response.body.token));
+});
+
+// --- CREATE CONTENT --------------------------------------------------------
+Cypress.Commands.add(
+  'createContent',
+  ({
+    contentType,
+    contentId,
+    contentTitle,
+    path = '',
+    allow_discussion = false,
+  }) => {
+    let api_url, auth;
+    api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+    auth = {
+      user: 'admin',
+      pass: 'admin',
+    };
+    if (contentType === 'File') {
+      return cy.request({
+        method: 'POST',
+        url: `${api_url}/${path}`,
+        headers: {
+          Accept: 'application/json',
+        },
+        auth: auth,
+        body: {
+          '@type': contentType,
+          id: contentId,
+          title: contentTitle,
+          file: {
+            data: 'dGVzdGZpbGUK',
+            encoding: 'base64',
+            filename: 'lorem.txt',
+            'content-type': 'text/plain',
+          },
+          allow_discussion: allow_discussion,
+        },
+      });
+    }
+    if (contentType === 'Image') {
+      return cy.request({
+        method: 'POST',
+        url: `${api_url}/${path}`,
+        headers: {
+          Accept: 'application/json',
+        },
+        auth: auth,
+        body: {
+          '@type': contentType,
+          id: contentId,
+          title: contentTitle,
+          image: {
+            data:
+              'iVBORw0KGgoAAAANSUhEUgAAANcAAAA4CAMAAABZsZ3QAAAAM1BMVEX29fK42OU+oMvn7u9drtIPisHI4OhstdWZyt4fkcXX5+sAg74umMhNp86p0eJ7vNiKw9v/UV4wAAAAAXRSTlMAQObYZgAABBxJREFUeF7tmuty4yAMhZG4X2zn/Z92J5tsBJwWXG/i3XR6frW2Y/SBLIRAfaQUDNt8E5tLUt9BycfcKfq3R6Mlfyimtx4rzp+K3dtibXkor99zsEqLYZltblTecciogoh+TXfY1Ve4dn07rCDGG9dHSEEOg/GmXl0U1XDxTKxNK5De7BxsyyBr6gGm2/vPxKJ8F6f7BXKfRMp1xIWK9A+5ks25alSb353dWnDJN1k35EL5f8dVGifTf/4tjUuuFq7u4srmXC60yAmldLXIWbg65RKU87lcGxJCFqUPv0IacW0PmSivOZFLE908inPToMmii/roG+MRV/O8FU88i8tFsxV3a06MFUw0Qu7RmAtdV5/HVVaOVMTWNOWSwMljLhzhcB6XIS7OK5V6AvRDNN7t5VJWQs1J40UmalbK56usBG/CuCHSYuc+rkUGeMCViNRARPrzW52N3oQLe6WifNliSuuGaH3czbVNudI9s7ZLUCLHVwWlyES522o1t14uvmbblmVTKqFjaZYJFSTPP4dLL1kU1z7p0lzdbRulmEWLxoQX+z9ce7A8GqEEucllLxePuZwdJl1Lezu0hoswvTPt61DrFcRuujV/2cmlxaGBC7Aw6cpovGANwRiSdOAWJ5AGy4gLL64dl0QhUEAuEUNws+XxV+OKGPdw/hESGYF9XEGaFC7sNLMSXWJjHsnanYi87VK428N2uxpOjOFANcagLM5l+7mSycM8KknZpKLcGi6jmzWGr/vLurZ/0g4u9AZuAoeb5r1ceQhyiTPY1E4wUR6u/F3H2ojSpXMMriBPT9cezTto8Cx+MsglHL4fv1Rxrb1LVw9yvyQpJ3AhFnLZfuRLH2QsOG3FGGD20X/th/u5bFAt16Bt308KjF+MNOXgl/SquIEySX3GhaZvc67KZbDxcCDORz2N8yCWPaY5lyQZO7lQ29fnZbt3Xu6qoge4+DjXl/MocySPOp9rlvdyznahRyHEYd77v3LhugOXDv4J65QXfl803BDAdaWBEDhfVx7nKofjoVCgxnUAqw/UAUDPn788BDvQuG4TDtdtUPvzjSlXAB8DvaDOhhrmhwbywylXAm8CvaouikJTL93gs3y7Yy4VYbIxOHrcMizPqWOjqO9l3Uz52kibQy4xxOgqhJvD+w5rvokOcAlGvNCfeqCv1ste1stzLm0f71Iq3ZfTrPfuE5nhPtF+LvQE2lffQC7pYtQy3tdzdrKvd5TLVVzDetScS3nEKmmwDyt1Cev1kX3YfbvzNK4fzrlw+cB6vm+uiUgf2zdXI62241LawCb7Pi5FXFPF8KpzDoF/Sw2lg+GrHNbno1mhPu+VCF/vfMnw06PnUl6j48dVHD3jHNHPua+fc3o/5yp/zsGi0vYtzi3Pz5mHd4T6BWMIlewacd63AAAAAElFTkSuQmCC',
+            encoding: 'base64',
+            filename: 'image.png',
+            'content-type': 'image/png',
+          },
+        },
+      });
+    }
+    if (['Document', 'Folder', 'CMSFolder'].includes(contentType)) {
+      return cy
+        .request({
+          method: 'POST',
+          url: `${api_url}/${path}`,
+          headers: {
+            Accept: 'application/json',
+          },
+          auth: auth,
+          body: {
+            '@type': contentType,
+            id: contentId,
+            title: contentTitle,
+            blocks: {
+              'd3f1c443-583f-4e8e-a682-3bf25752a300': { '@type': 'title' },
+              '7624cf59-05d0-4055-8f55-5fd6597d84b0': { '@type': 'text' },
+            },
+            blocks_layout: {
+              items: [
+                'd3f1c443-583f-4e8e-a682-3bf25752a300',
+                '7624cf59-05d0-4055-8f55-5fd6597d84b0',
+              ],
+            },
+            allow_discussion: allow_discussion,
+          },
+        })
+        .then(() => console.log(`${contentType} created`));
+    } else {
+      return cy
+        .request({
+          method: 'POST',
+          url: `${api_url}/${path}`,
+          headers: {
+            Accept: 'application/json',
+          },
+          auth: auth,
+          body: {
+            '@type': contentType,
+            id: contentId,
+            title: contentTitle,
+            allow_discussion: allow_discussion,
+          },
+        })
+        .then(() => console.log(`${contentType} created`));
+    }
+  },
+);
+
+// --- REMOVE CONTENT --------------------------------------------------------
+Cypress.Commands.add('removeContent', (path) => {
+  let api_url, auth;
+  api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+  auth = {
+    user: 'admin',
+    pass: 'admin',
+  };
+  return cy
+    .request({
+      method: 'DELETE',
+      url: `${api_url}/${path}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {},
+    })
+    .then(() => console.log(`${path} removed`));
+});
+
+// --- SET WORKFLOW ----------------------------------------------------------
+Cypress.Commands.add(
+  'setWorkflow',
+  ({
+    path = '/',
+    actor = 'admin',
+    review_state = 'publish',
+    time = '1995-07-31T18:30:00',
+    title = '',
+    comment = '',
+    effective = '2018-01-21T08:00:00',
+    expires = '2019-01-21T08:00:00',
+    include_children = true,
+  }) => {
+    let api_url, auth;
+    api_url = Cypress.env('API_PATH') || 'http://localhost:8080/Plone';
+    auth = {
+      user: 'admin',
+      pass: 'admin',
+    };
+    return cy.request({
+      method: 'POST',
+      url: `${api_url}/${path}/@workflow/${review_state}`,
+      headers: {
+        Accept: 'application/json',
+      },
+      auth: auth,
+      body: {
+        actor: actor,
+        review_state: review_state,
+        time: time,
+        title: title,
+        comment: comment,
+        effective: effective,
+        expires: expires,
+        include_children: include_children,
+      },
+    });
+  },
+);
+
+// --- waitForResourceToLoad ----------------------------------------------------------
+Cypress.Commands.add('waitForResourceToLoad', (fileName, type) => {
+  const resourceCheckInterval = 40;
+
+  return new Cypress.Promise((resolve) => {
+    const checkIfResourceHasBeenLoaded = () => {
+      const resource = cy
+        .state('window')
+        .performance.getEntriesByType('resource')
+        .filter((entry) => !type || entry.initiatorType === type)
+        .find((entry) => entry.name.includes(fileName));
+
+      if (resource) {
+        resolve();
+
+        return;
+      }
+
+      setTimeout(checkIfResourceHasBeenLoaded, resourceCheckInterval);
+    };
+
+    checkIfResourceHasBeenLoaded();
+  });
+});
+
+// Low level command reused by `setSelection` and low level command `setCursor`
+Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
+  cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
+
+  cy.document().trigger('selectionchange');
+  return cy.wrap(subject);
+});
+
+Cypress.Commands.add(
+  'setSelection',
+  { prevSubject: true },
+  (subject, query, endQuery) => {
+    return cy.wrap(subject).selection(($el) => {
+      if (typeof query === 'string') {
+        const anchorNode = getTextNode($el[0], query);
+        const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
+        const anchorOffset = anchorNode.wholeText.indexOf(query);
+        const focusOffset = endQuery
+          ? focusNode.wholeText.indexOf(endQuery) + endQuery.length
+          : anchorOffset + query.length;
+        setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      } else if (typeof query === 'object') {
+        const el = $el[0];
+        const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
+        const anchorOffset = query.anchorOffset || 0;
+        const focusNode = query.focusQuery
+          ? getTextNode(el.querySelector(query.focusQuery))
+          : anchorNode;
+        const focusOffset = query.focusOffset || 0;
+        setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
+      }
+    });
+  },
+);
+
+// Low level command reused by `setCursorBefore` and `setCursorAfter`, equal to `setCursorAfter`
+Cypress.Commands.add(
+  'setCursor',
+  { prevSubject: true },
+  (subject, query, atStart) => {
+    return cy.wrap(subject).selection(($el) => {
+      const node = getTextNode($el[0], query);
+      const offset =
+        node.wholeText.indexOf(query) + (atStart ? 0 : query.length);
+      const document = node.ownerDocument;
+      document.getSelection().removeAllRanges();
+      document.getSelection().collapse(node, offset);
+    });
+    // Depending on what you're testing, you may need to chain a `.click()` here to ensure
+    // further commands are picked up by whatever you're testing (this was required for Slate, for example).
+  },
+);
+
+Cypress.Commands.add(
+  'setCursorBefore',
+  { prevSubject: true },
+  (subject, query) => {
+    cy.wrap(subject).setCursor(query, true);
+  },
+);
+
+Cypress.Commands.add(
+  'setCursorAfter',
+  { prevSubject: true },
+  (subject, query) => {
+    cy.wrap(subject).setCursor(query);
+  },
+);
+
+// Helper functions
+function getTextNode(el, match) {
+  const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false);
+  if (!match) {
+    return walk.nextNode();
+  }
+
+  let node;
+  while ((node = walk.nextNode())) {
+    if (node.wholeText.includes(match)) {
+      return node;
+    }
+  }
+}
+
+function setBaseAndExtent(...args) {
+  const document = args[0].ownerDocument;
+  document.getSelection().removeAllRanges();
+  document.getSelection().setBaseAndExtent(...args);
+}
+
+Cypress.Commands.add('navigate', (route = '') => {
+  return cy.window().its('appHistory').invoke('push', route);
+});
+
+Cypress.Commands.add('store', () => {
+  return cy.window().its('store').invoke('getStore', '');
+});
+
+Cypress.Commands.add('settings', (key, value) => {
+  return cy.window().its('settings');
+});

package/cypress/support/index.js

@@ -0,0 +1,53 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+/* coverage-start
+//Generate code-coverage
+import '@cypress/code-coverage/support';
+coverage-end */
+
+export const setupBeforeEach = () => {
+  cy.autologin();
+  cy.createContent({
+    contentType: 'Folder',
+    contentId: 'cypress',
+    contentTitle: 'Cypress',
+  });
+  cy.createContent({
+    contentType: 'Document',
+    contentId: 'my-page',
+    contentTitle: 'My Page',
+    path: 'cypress',
+  });
+  cy.visit('/cypress/my-page');
+  cy.waitForResourceToLoad('@navigation');
+  cy.waitForResourceToLoad('@breadcrumbs');
+  cy.waitForResourceToLoad('@actions');
+  cy.waitForResourceToLoad('@types');
+  cy.waitForResourceToLoad('my-page');
+  cy.navigate('/cypress/my-page/edit');
+  cy.get(`.block.title [data-contents]`);
+};
+
+export const tearDownAfterEach = () => {
+  cy.autologin();
+  cy.removeContent('cypress');
+};

package/cypress.json

@@ -0,0 +1,12 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "viewportWidth": 1280,
+  "defaultCommandTimeout": 15000,
+  "reporter": "junit",
+  "video": true,
+  "reporterOptions": {
+    "mochaFile": "cypress/reports/cypress-[hash].xml",
+    "jenkinsMode": true,
+    "toConsole": true
+  }
+}

package/jest-addon.config.js

@@ -0,0 +1,36 @@
+module.exports = {
+  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
+  collectCoverageFrom: [
+    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+  ],
+  moduleNameMapper: {
+    '@plone/volto/cypress': '<rootDir>/node_modules/@plone/volto/cypress',
+    '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
+    '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
+    '@package/(.*)$': '<rootDir>/src/$1',
+    '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
+    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '~/(.*)$': '<rootDir>/src/$1',
+    'load-volto-addons':
+      '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+  },
+  transform: {
+    '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.css$': 'jest-css-modules',
+    '^.+\\.less$': 'jest-css-modules',
+    '^.+\\.scss$': 'jest-css-modules',
+    '^.+\\.(png)$': 'jest-file',
+    '^.+\\.(jpg)$': 'jest-file',
+    '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',
+  },
+  coverageThreshold: {
+    global: {
+      branches: 5,
+      functions: 5,
+      lines: 5,
+      statements: 5,
+    },
+  },
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@eeacms/volto-n2k",
+  "version": "0.1.1",
+  "description": "volto-n2k: Volto add-on",
+  "main": "src/index.js",
+  "author": "European Environment Agency: IDM2 A-Team",
+  "license": "MIT",
+  "homepage": "https://github.com/eea/volto-n2k",
+  "keywords": [
+    "volto-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "addons": [
+    "volto-slate",
+    "@eeacms/volto-datablocks",
+    "@eeacms/volto-openlayers-map",
+    "@eeacms/volto-resize-helper",
+    "@eeacms/volto-tabs-block"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:eea/volto-n2k.git"
+  },
+  "dependencies": {
+    "@eeacms/volto-datablocks": "^2.0.13",
+    "@eeacms/volto-resize-helper": "^0.2.4",
+    "@eeacms/volto-openlayers-map": "0.1.2",
+    "@eeacms/volto-tabs-block": "1.2.7",
+    "d3": "^7.1.1",
+    "d3-shape": "^3.0.1",
+    "react-lazy-load-image-component": "1.5.1",
+    "react-stickynode": "^4.0.0",
+    "react-use-localstorage": "^3.5.3",
+    "resize-observer-polyfill": "1.5.1",
+    "slick-carousel": "1.8.1",
+    "volto-slate": "^4.0.3"
+  },
+  "devDependencies": {
+    "@cypress/code-coverage": "^3.9.5",
+    "babel-plugin-transform-class-properties": "^6.24.1"
+  },
+  "scripts": {
+    "release": "release-it",
+    "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
+    "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
+    "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",
+    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
+    "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
+    "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
+    "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
+    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'",
+    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
+    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
+  }
+}

package/src/actions.js

@@ -0,0 +1,20 @@
+export const setLocalStorage = (key, value) => {
+  return {
+    type: 'SET_LOCALSTORAGE',
+    key,
+    value,
+  };
+};
+
+export const deleteLocalStorage = (key) => {
+  return {
+    type: 'DELETE_LOCALSTORAGE',
+    key,
+  };
+};
+
+export const resetLocalStorage = () => {
+  return {
+    type: 'RESET_LOCALSTORAGE',
+  };
+};

package/src/components/index.js

@@ -0,0 +1,3 @@
+export Header from '@eeacms/volto-n2k/components/theme/Header/Header';
+export Footer from '@eeacms/volto-n2k/components/theme/Footer/Footer';
+export Sitemap from '@eeacms/volto-n2k/components/theme/Sitemap/Sitemap';

package/src/components/manage/Blocks/BodyClass/Edit.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import schema from './schema';
+import View from './View';
+
+const Edit = (props) => {
+  return (
+    <>
+      <View {...props} mode="edit" />
+
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default Edit;

package/src/components/manage/Blocks/BodyClass/View.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+
+const View = (props) => {
+  return (
+    <>
+      {props.mode === 'edit' ? <p>Body className: {props.data.class}</p> : ''}
+      <BodyClass className={props.data.class || ''} />
+    </>
+  );
+};
+
+export default View;

package/src/components/manage/Blocks/BodyClass/index.js

@@ -0,0 +1,24 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import BodyClassEdit from './Edit';
+import BodyClassView from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.body_classname = {
+    id: 'body_classname',
+    title: 'Body classname',
+    icon: worldSVG,
+    group: 'natura_2000',
+    edit: BodyClassEdit,
+    view: BodyClassView,
+    restricted: false,
+    mostUsed: false,
+    sidebarTab: 1,
+    blocks: {},
+    security: {
+      addPermission: [],
+      view: [],
+    },
+    blockHasOwnFocusManagement: true,
+  };
+  return config;
+};

package/src/components/manage/Blocks/BodyClass/schema.js

@@ -0,0 +1,19 @@
+export default {
+  title: 'Body class',
+
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['class'],
+    },
+  ],
+
+  properties: {
+    class: {
+      title: 'Class',
+    },
+  },
+
+  required: [],
+};