@eeacms/volto-marine-policy 1.0.0

package/jest-addon.config.js.tpl

@@ -0,0 +1,51 @@
+require('dotenv').config({ path: __dirname + '/.env' })
+
+module.exports = {
+  testMatch: ['**/src/addons/**/?(*.)+(spec|test).[jt]s?(x)'],
+  collectCoverageFrom: [
+    'src/addons/**/src/**/*.{js,jsx,ts,tsx}',
+    '!src/**/*.d.ts',
+  ],
+  moduleNameMapper: {
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
+    '@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>/node_modules/@plone/volto/src/$1',
+    '@root/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
+    '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
+    '@eeacms/search/(.*)$': '<rootDir>/src/addons/volto-searchlib/searchlib/$1',
+    '@eeacms/search': '<rootDir>/src/addons/volto-searchlib/searchlib',
+    '@eeacms/(.*?)/(.*)$': '<rootDir>/node_modules/@eeacms/$1/src/$2',
+    '@plone/volto-slate$':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
+    '@plone/volto-slate/(.*)$':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src/$1',
+    '~/(.*)$': '<rootDir>/src/$1',
+    'load-volto-addons':
+      '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@plone|@root|@package|@eeacms)/).*/',
+  ],
+  transform: {
+    '^.+\\.js(x)?$': 'babel-jest',
+    '^.+\\.ts(x)?$': 'babel-jest',
+    '^.+\\.(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,
+    },
+  },
+  ...(process.env.JEST_USE_SETUP === 'ON' && {
+    setupFilesAfterEnv: [
+      '<rootDir>/node_modules/@eeacms/<%= name %>/jest.setup.js',
+    ],
+  }),
+}

package/jest.setup.js

@@ -0,0 +1,65 @@
+import { jest } from '@jest/globals';
+import configureStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+import { blocksConfig } from '@plone/volto/config/Blocks';
+import installSlate from '@plone/volto-slate/index';
+
+var mockSemanticComponents = jest.requireActual('semantic-ui-react');
+var mockComponents = jest.requireActual('@plone/volto/components');
+var config = jest.requireActual('@plone/volto/registry').default;
+
+config.blocks.blocksConfig = {
+  ...blocksConfig,
+  ...config.blocks.blocksConfig,
+};
+
+jest.doMock('semantic-ui-react', () => ({
+  __esModule: true,
+  ...mockSemanticComponents,
+  Popup: ({ content, trigger }) => {
+    return (
+      <div className="popup">
+        <div className="trigger">{trigger}</div>
+        <div className="content">{content}</div>
+      </div>
+    );
+  },
+}));
+
+jest.doMock('@plone/volto/components', () => {
+  return {
+    __esModule: true,
+    ...mockComponents,
+    SidebarPortal: ({ children }) => <div id="sidebar">{children}</div>,
+  };
+});
+
+jest.doMock('@plone/volto/registry', () =>
+  [installSlate].reduce((acc, apply) => apply(acc), config),
+);
+
+const mockStore = configureStore([thunk]);
+
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({}),
+  }),
+);
+
+global.store = mockStore({
+  intl: {
+    locale: 'en',
+    messages: {},
+    formatMessage: jest.fn(),
+  },
+  content: {
+    create: {},
+    subrequests: [],
+  },
+  connected_data_parameters: {},
+  screen: {
+    page: {
+      width: 768,
+    },
+  },
+});

package/locales/de/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/en/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/it/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/ro/LC_MESSAGES/volto.po

@@ -0,0 +1,14 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: \n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: \n"
+"PO-Revision-Date: \n"
+"Last-Translator: \n"
+"Language: \n"
+"Language-Team: \n"
+"Content-Type: \n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+

package/locales/volto.pot

@@ -0,0 +1,16 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2023-06-28T10:48:22.678Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@eeacms/volto-marine-policy",
+  "version": "1.0.0",
+  "description": "@eeacms/volto-marine-policy: Volto add-on",
+  "main": "src/index.js",
+  "author": "European Environment Agency: IDM2 A-Team",
+  "license": "MIT",
+  "homepage": "https://github.com/eea/volto-marine-policy",
+  "keywords": [
+    "volto-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:eea/volto-marine-policy.git"
+  },
+  "resolutions": {
+    "react-countup/countup.js": "2.5.0",
+    "d3-array": "^2.12.1"
+  },
+  "addons": [
+    "@eeacms/volto-tabs-block",
+    "@eeacms/volto-embed",
+    "@eeacms/volto-slots",
+    "@eeacms/volto-eea-design-system",
+    "@eeacms/volto-eea-website-theme",
+    "@eeacms/volto-globalsearch",
+    "@eeacms/volto-searchlib"
+  ],
+  "dependencies": {
+    "@eeacms/volto-eea-design-system": "*",
+    "@eeacms/volto-eea-website-theme": "*",
+    "@eeacms/volto-embed": "*",
+    "@eeacms/volto-globalsearch": "^1.0.20",
+    "@eeacms/volto-searchlib": "^0.6.3",
+    "@eeacms/volto-slots": "*",
+    "@eeacms/volto-tabs-block": "*",
+    "axios": "0.25.0",
+    "jquery": "3.6.0",
+    "razzle-plugin-scss": "^4.2.18",
+    "react-lazy-load-image-component": "^1.4.0",
+    "react-slick": "^0.24.0",
+    "slick-carousel": "^1.8.1"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
+    "@cypress/code-coverage": "^3.9.5",
+    "@plone/scripts": "2.1.1",
+    "babel-plugin-transform-class-properties": "^6.24.1"
+  },
+  "scripts": {
+    "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
+    "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": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress run; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress run; fi",
+    "cypress:open": "if [ -d ./project ]; then NODE_ENV=development ./project/node_modules/cypress/bin/cypress open; else NODE_ENV=development ../../../node_modules/cypress/bin/cypress open; fi"
+  }
+}

package/package.json.tpl

@@ -0,0 +1,70 @@
+{
+  "name": "<%= addonName %>",
+  "version": "0.1.0",
+  "description": "<%= addonName %>: Volto add-on",
+  "main": "src/index.js",
+  "author": "European Environment Agency: IDM2 A-Team",
+  "license": "MIT",
+  "homepage": "https://github.com/eea/<%= name %>",
+  "keywords": [
+    "volto-addon",
+    "volto",
+    "plone",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:eea/<%= name %>.git"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@plone/scripts": "*",
+    "@cypress/code-coverage": "^3.10.0",
+    "cypress-fail-fast": "^5.0.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "husky": "^8.0.3",
+    "lint-staged": "^14.0.1",
+    "md5": "^2.3.0"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx,json}": [
+      "make lint-fix",
+      "make prettier-fix"
+    ],
+    "src/**/*.{jsx}": [
+      "make i18n"
+    ],
+    "theme/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.{css,less}": [
+      "make stylelint-fix"
+    ],
+    "theme/**/*.overrides": [
+      "make stylelint-fix"
+    ],
+    "src/**/*.overrides": [
+      "make stylelint-fix"
+    ]
+  },
+  "scripts": {
+    "prepare": "husky install",
+    "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
+    "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
+    "test": "make test",
+    "test:fix": "make test-update",
+    "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
+  }
+}

package/razzle.extend.js

@@ -0,0 +1,29 @@
+const path = require('path');
+const plugins = (defaultPlugins) => {
+  return defaultPlugins;
+};
+const modify = (config, { target, dev }, webpack) => {
+  const themeConfigPath = `${__dirname}/theme/theme.config`;
+  config.resolve.alias['../../theme.config$'] = themeConfigPath;
+  config.resolve.alias['../../theme.config'] = themeConfigPath;
+  config.resolve.alias['../../theme'] = `${__dirname}/theme`;
+  const projectRootPath = path.resolve('.');
+  const themeLessPath = `${projectRootPath}/node_modules/@eeacms/volto-eea-design-system/theme`;
+
+  config.resolve.alias['eea-design-system-theme'] = dev
+    ? `${projectRootPath}/src/addons/volto-eea-design-system/theme/themes/eea`
+    : `${themeLessPath}/themes/eea`;
+
+  const semanticLessPath = `${projectRootPath}/node_modules/semantic-ui-less`;
+  const hasDesignSystemInstalled = config.resolve.alias['eea-volto-themes'];
+  config.resolve.alias['eea-volto-theme-folder'] = hasDesignSystemInstalled
+    ? themeLessPath
+    : semanticLessPath;
+
+  return config;
+};
+
+module.exports = {
+  plugins,
+  modify,
+};

package/src/components/Blocks/CustomBlockTemplates/customBlockTemplates.js

@@ -0,0 +1,25 @@
+import {
+  BlockStyleWrapperEdit,
+  BlockStyleWrapperView,
+} from '@eeacms/volto-block-style/BlockStyleWrapper';
+import EditIframe from '@eeacms/volto-embed/Blocks/Maps/Edit';
+import ViewIframe from '@eeacms/volto-embed/Blocks/Maps/View';
+
+const customBlockTemplates = (config) => ({
+  ...config.blocks.blocksConfig,
+
+  maps: {
+    ...config.blocks.blocksConfig.maps,
+    view: (props) => (
+      <BlockStyleWrapperView {...props}>
+        <ViewIframe {...props} />
+      </BlockStyleWrapperView>
+    ),
+    edit: (props) => (
+      <BlockStyleWrapperEdit {...props}>
+        <EditIframe {...props} />
+      </BlockStyleWrapperEdit>
+    ),
+  },
+});
+export default customBlockTemplates;

package/src/components/Blocks/MsfdDataExplorerBlock/Edit.jsx

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

package/src/components/Blocks/MsfdDataExplorerBlock/View.jsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Dimmer,
+  Loader,
+  Segment,
+  Placeholder,
+  Message,
+} from 'semantic-ui-react';
+import axios from 'axios';
+import $ from 'jquery';
+
+const MsfdDataExplorerBlockView = (props) => {
+  const [content, setContent] = React.useState('');
+  const [loading, setloading] = useState(true);
+  const { editable } = props;
+  const { article_select } = props.data;
+
+  useEffect(() => {
+    if (article_select) {
+      axios
+        .get(`/marine/++api++/${article_select}`)
+        .then((res) => {
+          const el = document.createElement('div');
+          el.innerHTML = res.data;
+          const msfdContent = el.querySelector('.msfd-search-wrapper');
+          setContent(msfdContent);
+        })
+        .catch((err) => {
+          setContent({ data: <div>Something went wrong.</div> });
+        })
+        .finally(() => {
+          setloading(false);
+        });
+    }
+  }, [article_select]);
+
+  useEffect(() => {
+    window.$ = $;
+    window.jQuery = $;
+    global.jQuery = $;
+
+    const scripts = [
+      'https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.4/select2.min.js',
+      '/marine/++api++/++resource++msfd/js/jquery-ui.js',
+      '/marine/++api++/++resource++msfd/js/tabs.js',
+      '/marine/++api++/++resource++msfd/js/msfd_search.js',
+    ];
+
+    if (!loading) {
+      $.getScript(scripts[0], () => {
+        $.getScript(scripts[1], () => {
+          $.getScript(scripts[2], () => {
+            $.getScript(scripts[3]);
+          });
+        });
+      });
+
+      // scripts.forEach((element) => {
+      //   // $.getScript(element);
+      //   const script = document.createElement('script');
+      //   script.src = element;
+      //   script.setAttribute('type', 'text/javascript');
+      //   script.async = false;
+      //   // script.defer = 'defer';
+
+      //   document.body.appendChild(script);
+      // });
+      // setTimeout(() => {
+      //   $.getScript('/++api++/++resource++msfd/js/msfd_search.js');
+      // }, 200);
+    }
+  }, [loading]);
+
+  return (
+    <>
+      {article_select ? (
+        <div>
+          {loading ? (
+            <Segment>
+              <Dimmer active inverted>
+                <Loader inverted>Loading</Loader>
+              </Dimmer>
+
+              <Placeholder>
+                <Placeholder.Line />
+                <Placeholder.Line />
+                <Placeholder.Line />
+                <Placeholder.Line />
+                <Placeholder.Line />
+              </Placeholder>
+            </Segment>
+          ) : (
+            <div>
+              <div dangerouslySetInnerHTML={{ __html: content.outerHTML }} />
+            </div>
+          )}
+        </div>
+      ) : (
+        <>{editable ? <Message>Select article</Message> : ''}</>
+      )}
+    </>
+  );
+};
+
+export default MsfdDataExplorerBlockView;

package/src/components/Blocks/MsfdDataExplorerBlock/index.js

@@ -0,0 +1,23 @@
+import worldSVG from '@plone/volto/icons/world.svg';
+import MsfdDataExplorerBlockView from './View';
+import MsfdDataExplorerBlockEdit from './Edit';
+
+export default (config) => {
+  config.blocks.blocksConfig.msfdDataExplorerBlock = {
+    id: 'msfdDataExplorerBlock',
+    title: 'MSFD Data explorer block',
+    icon: worldSVG,
+    group: 'marine_addons',
+    view: MsfdDataExplorerBlockView,
+    edit: MsfdDataExplorerBlockEdit,
+    restricted: false,
+    mostUsed: false,
+    blockHasOwnFocusManagement: false,
+    sidebarTab: 1,
+    security: {
+      addPermission: [],
+      view: [],
+    },
+  };
+  return config;
+};

package/src/components/Blocks/MsfdDataExplorerBlock/schema.jsx

@@ -0,0 +1,30 @@
+const MsfdDataExplorerBlockSchema = {
+  title: 'Data Explorer Block',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['article_select'],
+    },
+  ],
+
+  properties: {
+    article_select: {
+      title: 'Select article',
+      choices: [
+        ['marine-units', 'Article 4'],
+        ['competent-authorities', 'Article 7'],
+        ['assessments', 'Article 8'],
+        ['determination-of-good-environmental-status', 'Article 9'],
+        ['establishment-of-environmental-targets', 'Article 10'],
+        ['monitoring-programmes', 'Article 11'],
+        ['programmes-of-measures-progress-of-pom', 'Article 13 & 18'],
+        ['exceptions', 'Article 14'],
+        ['datasets-used', 'Article 19.3'],
+      ],
+    },
+  },
+  required: ['article_select'],
+};
+
+export default MsfdDataExplorerBlockSchema;

package/src/components/Result/MarineMeasureItem.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { Label } from 'semantic-ui-react';
+import { SegmentedBreadcrumb, StringList, ResultContext } from '@eeacms/search';
+import { UniversalCard } from '@eeacms/volto-listing-block';
+import { firstWords, getTermDisplayValue } from '@eeacms/search/lib/utils';
+import { useAppConfig } from '@eeacms/search/lib/hocs';
+
+import ExternalLink from '@eeacms/search/components/Result/ExternalLink';
+
+const ExtraContent = (props) => {
+  const { result, vocab } = props;
+  const measureSector = result.wm_spm_sector ? result.wm_spm_sector.raw : '';
+
+  return (
+    <div>
+      <div className="result-bottom">
+        <div className="result-info">
+          <span className="result-info-title">Sector: </span>
+          <StringList value={measureSector} />
+        </div>
+      </div>
+      <div>
+        <div className="result-info result-source">
+          <span className="result-info-title">Source: </span>
+          <ExternalLink href={result.href}>
+            <strong title={result.source} className="source">
+              {firstWords(
+                getTermDisplayValue({
+                  vocab,
+                  field: 'cluster_name',
+                  term: result.source,
+                }),
+                8,
+              )}
+            </strong>
+            <SegmentedBreadcrumb
+              href={result.href}
+              short={true}
+              maxChars={40}
+            />
+          </ExternalLink>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const MarineMeasureItem = (props) => {
+  const { result } = props;
+  const { appConfig } = useAppConfig();
+  const { vocab = {} } = appConfig;
+
+  const item = {
+    '@id': result.href,
+    title: (
+      <>
+        <ExternalLink href={result.href} title={result.title}>
+          {result.title}
+          {/* {result.isNew && <Label className="new-item">New</Label>} */}
+          {result.isExpired && (
+            <Label className="archived-item">Archived</Label>
+          )}
+        </ExternalLink>
+      </>
+    ),
+    // meta: <ContentClusters clusters={clusters} item={result} />,
+    description: props.children ? props.children : <ResultContext {...props} />,
+    preview_image_url: result.hasImage ? result.thumbUrl : undefined,
+    extra: <ExtraContent result={result} vocab={vocab} />,
+  };
+
+  const itemModel = {
+    hasImage: result.hasImage,
+    hasDescription: true,
+    imageOnRightSide: true,
+    '@type': 'searchItem',
+  };
+
+  return <UniversalCard item={item} itemModel={itemModel} />;
+};
+
+export default MarineMeasureItem;