@eeacms/volto-n2k 0.1.3 → 0.1.6

package/CHANGELOG.md

@@ -4,9 +4,31 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [0.1.6](https://github.com/eea/volto-n2k/compare/0.1.5...0.1.6)
+
+- Add toolkit in landing page [`b5fae01`](https://github.com/eea/volto-n2k/commit/b5fae01c4e54c6405997bfbd167d5ed3836d880a)
+
+#### [0.1.5](https://github.com/eea/volto-n2k/compare/0.1.4...0.1.5)
+
+> 28 July 2022
+
+- Show language native name [`#6`](https://github.com/eea/volto-n2k/pull/6)
+- Use volto 16 for cypress tests [`dfb57d1`](https://github.com/eea/volto-n2k/commit/dfb57d12d37dbeb1aa8c0d87cf8cc950cdf27d13)
+
+#### [0.1.4](https://github.com/eea/volto-n2k/compare/0.1.3...0.1.4)
+
+> 15 July 2022
+
+- Lazy load d3 [`#5`](https://github.com/eea/volto-n2k/pull/5)
+- Prettier [`43c0a09`](https://github.com/eea/volto-n2k/commit/43c0a090f481f81e7cadcfcda59b5dcc02dd8f1a)
+- Prettier [`553c35b`](https://github.com/eea/volto-n2k/commit/553c35b2c9b34adb8fb630f2ec41f2ffd2cf22b0)
+- Prettier fix [`47619cb`](https://github.com/eea/volto-n2k/commit/47619cb286ff939df397c483c18cc532c58b7547)
+
 #### [0.1.3](https://github.com/eea/volto-n2k/compare/0.1.2...0.1.3)
 
-- Make this compatible with latest changes [`d11991f`](https://github.com/eea/volto-n2k/commit/d11991f3798edebc132929e15bf120ec3d545ab9)
+> 23 June 2022
+
+- Make this compatible with latest changes [`#4`](https://github.com/eea/volto-n2k/pull/4)
 
 #### [0.1.2](https://github.com/eea/volto-n2k/compare/0.1.1...0.1.2)
 

package/Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,biodiversity.europa.eu"
         DEPENDENCIES = "volto-slate @eeacms/volto-datablocks"
+        VOLTO = "16.0.0-alpha.14"
     }
 
   stages {
@@ -124,8 +125,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" plone/volto-addon-ci cypress'''
+                  sh '''docker pull eeacms/plone-backend; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="eea.kitkat:testing" eeacms/plone-backend'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=development -e VOLTO="$VOLTO" plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/cypress/support/index.js

@@ -27,7 +27,7 @@ coverage-end */
 export const setupBeforeEach = () => {
   cy.autologin();
   cy.createContent({
-    contentType: 'Folder',
+    contentType: 'Document',
     contentId: 'cypress',
     contentTitle: 'Cypress',
   });

package/cypress.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -29,8 +29,8 @@
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-tabs-block": "*",
     "volto-slate": "*",
-    "d3": "^7.1.1",
-    "d3-shape": "^3.0.1",
+    "d3": "^7.6.1",
+    "d3-shape": "^3.1.0",
     "react-lazy-load-image-component": "1.5.1",
     "react-stickynode": "^4.0.0",
     "react-use-localstorage": "^3.5.3",

package/src/components/manage/Blocks/BubbleChart/BubbleChart.jsx

@@ -1,18 +1,18 @@
 import React from 'react';
 import _uniqueId from 'lodash/uniqueId';
-import { pack, hierarchy } from 'd3';
-import * as d3 from 'd3';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness, getContrastColor } from '@eeacms/volto-n2k/helpers';
 import { FormattedValue } from '@eeacms/volto-datablocks/Utils';
 import ChartContext from './ChartContext';
 
 function BubbleChart(props) {
-  const { chartData, interpolation } = props;
+  const { d3, chartData, interpolation } = props;
   const { element, height, width, popup, setPopup } = React.useContext(
     ChartContext,
   );
-  const root = pack().size([width, height]).padding(10)(
-    hierarchy({ children: chartData })
+  const root = d3.pack().size([width, height]).padding(10)(
+    d3
+      .hierarchy({ children: chartData })
       .sum((d) => d.value)
       .sort((a, b) => b.value - a.value),
   );
@@ -98,4 +98,4 @@ function BubbleChart(props) {
     </React.Fragment>
   );
 }
-export default BubbleChart;
+export default injectLazyLibs(['d3'])(BubbleChart);

package/src/components/manage/Blocks/ExplodedPiesChart/Pie.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import * as d3 from 'd3';
 import { Popup } from 'semantic-ui-react';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
 
 const Arc = ({ data, index, createArc, format, size }) => {
@@ -73,6 +73,8 @@ const Arc = ({ data, index, createArc, format, size }) => {
 };
 
 const Pie = (props) => {
+  const { d3 } = props;
+
   const createPie = d3
     .pie()
     .value((d) => d.value)
@@ -122,4 +124,4 @@ const Pie = (props) => {
   );
 };
 
-export default Pie;
+export default injectLazyLibs(['d3'])(Pie);

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

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
-import * as d3 from 'd3';
-import './style.less';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 import Pie from './Pie';
 
+import './style.less';
+
 const View = (props) => {
-  const { placeholder = 'No results' } = props;
+  const { d3, placeholder = 'No results' } = props;
   const { x = null, y = null, x_colors = [], precision = 2 } = props.data;
   const data = props.provider_data || {};
   const x_values = data?.[x] || [];
@@ -77,4 +78,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default injectLazyLibs(['d3'])(View);

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

@@ -6,7 +6,7 @@ import forests from './images/forests.webp';
 import mountains from './images/mountains.webp';
 import grasslands from './images/grasslands.webp';
 import rivers from './images/rivers.webp';
-import islands from './images/islands.webp';
+import toolkit from './images/toolkit_icon.webp';
 import peatlands from './images/peatlands.webp';
 import natura2000 from './images/natura2000.webp';
 
@@ -15,7 +15,7 @@ export const tiles = [
     image: natura2000,
     title: 'Natura 2000',
     description: 'NATURA 2000',
-    link: '/natura2000/natura2000',
+    link: '/natura2000/explore-natura2000',
   },
   {
     image: coasts_and_seas,
@@ -54,10 +54,10 @@ export const tiles = [
     link: '/natura2000/:lang/rivers-and-lakes',
   },
   {
-    image: islands,
-    title: 'Islands',
-    description: 'ISLANDS',
-    link: '/natura2000/:lang/islands',
+    image: toolkit,
+    title: 'Toolkit',
+    description: 'TOOLKIT',
+    link: '/natura2000/:lang/toolkit',
   },
 ];
 

package/src/components/manage/Blocks/StackedBarChart/Chart.jsx

@@ -1,13 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import {
-  axisBottom,
-  axisLeft,
-  format,
-  select,
-  scaleBand,
-  scaleLinear,
-} from 'd3';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import ChartContext from './ChartContext';
 
 /**
@@ -19,6 +12,8 @@ import ChartContext from './ChartContext';
  */
 
 function Chart(props) {
+  const { d3 } = props;
+  const { axisBottom, axisLeft, format, select, scaleBand, scaleLinear } = d3;
   const [scales, setScales] = useState();
   const [popup, setPopup] = useState();
   const chartWrapper = useRef();
@@ -124,4 +119,4 @@ function Chart(props) {
   );
 }
 
-export default Chart;
+export default injectLazyLibs(['d3'])(Chart);

package/src/components/manage/Blocks/StackedBarChart/StackedBars.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { scaleOrdinal, schemeSpectral, stack } from 'd3';
 import cx from 'classnames';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { adjustBrightness } from '@eeacms/volto-n2k/helpers';
 import ChartContext from './ChartContext';
 
@@ -11,6 +11,8 @@ const getSerieData = (serie) => {
 };
 
 function StackedBars(props) {
+  const { d3 } = props;
+  const { scaleOrdinal, schemeSpectral, stack } = d3;
   const {
     element,
     height,
@@ -113,4 +115,4 @@ function StackedBars(props) {
     </React.Fragment>
   );
 }
-export default StackedBars;
+export default injectLazyLibs(['d3'])(StackedBars);

package/src/components/theme/AppExtras/CopyPaste/CopyPaste.jsx

@@ -123,7 +123,7 @@ const CopyPaste = (props) => {
         onMouseEnter={(e) => {
           if (
             e.altKey &&
-            e.ctrlKey &&
+            e.shiftKey &&
             toolbar.current &&
             !toolbar.current.classList.contains('__dev_on')
           ) {

package/src/components/theme/LanguageSelector/LanguageSelector.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import { withRouter, matchPath, generatePath } from 'react-router';
 import { useSelector } from 'react-redux';
-// import langmap from 'langmap';
+import { langmap } from '@plone/volto/helpers';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { Dropdown } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
@@ -15,32 +15,32 @@ import { getN2kItems, pathExists } from '@eeacms/volto-n2k/helpers';
 import './styles.less';
 
 const LanguageSelector = (props) => {
+  const { settings } = config;
   const content = useSelector((state) => state.content);
   const n2kItems = getN2kItems(props.navigation.items);
   const localStorage = props.localStorage;
   const pathname = props.location.pathname;
   const currentLang = localStorage.get('N2K_LANGUAGE');
   const match = matchPath(pathname, {
-    path: config.settings.multilingualPath,
+    path: settings.multilingualPath,
     exact: true,
     strict: false,
   });
   const hasMultilingualSupport =
-    match && config.settings.supportedLanguages.includes(match.params.lang);
+    match && settings.supportedLanguages.includes(match.params.lang);
   const translations = hasMultilingualSupport
-    ? config.settings.supportedLanguages.map((lang) => ({
-        path: generatePath(config.settings.multilingualPath, {
+    ? settings.supportedLanguages.map((lang) => ({
+        path: generatePath(settings.multilingualPath, {
           ...match.params,
           lang,
         }),
         lang,
       }))
     : [];
-  const { settings } = config;
   const supportedLanguagesOptions = settings.supportedLanguages.map((lang) => ({
     key: lang,
     value: lang,
-    text: lang,
+    text: langmap[lang].nativeName,
   }));
 
   return (

package/src/index.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-extend-native */
 import React from 'react';
+import loadable from '@loadable/component';
 
 import localStorage from './store';
 
@@ -7,12 +8,12 @@ import installAppExtras from './components/theme/AppExtras';
 
 import { LinkElement } from './components/manage/Blocks/SlateLink/render';
 import installBodyClass from './components/manage/Blocks/BodyClass';
-// import installBubbleChart from './components/manage/Blocks/BubbleChart';
+import installBubbleChart from './components/manage/Blocks/BubbleChart';
 import installCarouselHorizontal from './components/manage/Blocks/CarouselHorizontal';
 import installCddaShape from './components/manage/Blocks/CddaShape';
 import installConnectedList from './components/manage/Blocks/List';
 import installContactBlock from './components/manage/Blocks/ContactBlock';
-// import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
+import installExplodedPiesChart from './components/manage/Blocks/ExplodedPiesChart';
 import installExploreHabitats from './components/manage/Blocks/ExploreHabitats';
 import installExploreSites from './components/manage/Blocks/ExploreSites';
 import installExploreSpecies from './components/manage/Blocks/ExploreSpecies';
@@ -35,7 +36,7 @@ import installSpeciesBanner from './components/manage/Blocks/SpeciesBanner';
 import installSpeciesClassification from './components/manage/Blocks/SpeciesClassification';
 import installSpeciesDistribution from './components/manage/Blocks/SpeciesDistribution';
 import installSpeciesProtectedSites from './components/manage/Blocks/SpeciesProtectedSites';
-// import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
+import installStackedBarChart from './components/manage/Blocks/StackedBarChart';
 import installTilesImages from './components/manage/Blocks/TilesImages';
 
 import { LINK } from 'volto-slate/constants';
@@ -123,16 +124,21 @@ const applyConfig = (config) => {
 
   config.settings.slate.elements[LINK] = LinkElement;
 
+  config.settings.loadables = {
+    ...config.settings.loadables,
+    d3: loadable.lib(() => import('d3')),
+  };
+
   return [
     installAppExtras,
 
     installBodyClass,
-    // installBubbleChart,
+    installBubbleChart,
     installCarouselHorizontal,
     installCddaShape,
     installConnectedList,
     installContactBlock,
-    // installExplodedPiesChart,
+    installExplodedPiesChart,
     installExploreHabitats,
     installExploreSites,
     installExploreSpecies,
@@ -155,7 +161,7 @@ const applyConfig = (config) => {
     installSpeciesClassification,
     installSpeciesDistribution,
     installSpeciesProtectedSites,
-    // installStackedBarChart,
+    installStackedBarChart,
     installTilesImages,
   ].reduce((acc, apply) => apply(acc), config);
 };

package/src/less/styles.less

@@ -127,7 +127,7 @@
       text-align: left;
       transform: translate(-100%, 0);
 
-      @media only screen and (max-width: @largestMobileScreen + 53px) {
+      @media only screen and (max-width: calc(@largestMobileScreen + 53px)) {
         display: none;
       }
     }