@eeacms/volto-eea-website-theme 3.19.1 → 4.0.1

package/src/customizations/volto/reducers/breadcrumbs/breadcrumbs.js

@@ -4,12 +4,9 @@
  * Customized reducer as part of ticket 271001 in order to receive portal_type info
  */
 
-import { map } from 'lodash';
-import {
-  flattenToAppURL,
-  getBaseUrl,
-  hasApiExpander,
-} from '@plone/volto/helpers';
+import map from 'lodash/map';
+import { flattenToAppURL, getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
 
 import {
   GET_BREADCRUMBS,

package/src/customizations/volto/server.jsx

@@ -8,7 +8,6 @@ import express from 'express';
 import { renderToString } from 'react-dom/server';
 import { createMemoryHistory } from 'history';
 import { parse as parseUrl } from 'url';
-import { keys } from 'lodash';
 import locale from 'locale';
 import { detect } from 'detect-browser';
 import path from 'path';
@@ -18,28 +17,24 @@ import { CookiesProvider } from 'react-cookie';
 import cookiesMiddleware from 'universal-cookie-express';
 import debug from 'debug';
 import crypto from 'crypto';
-
-import routes from '@plone/volto/routes';
+// eslint-disable-next-line
+import routes from '@root/routes';
 import config from '@plone/volto/registry';
 
+import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
+import Html from '@plone/volto/helpers/Html/Html';
+import Api from '@plone/volto/helpers/Api/Api';
+import { persistAuthToken } from '@plone/volto/helpers/AuthToken/AuthToken';
 import {
-  flattenToAppURL,
-  Html,
-  Api,
-  persistAuthToken,
   toBackendLang,
   toGettextLang,
   toReactIntlLang,
-} from '@plone/volto/helpers';
-import { changeLanguage } from '@plone/volto/actions';
+} from '@plone/volto/helpers/Utils/Utils';
+import { changeLanguage } from '@plone/volto/actions/language/language';
 
 import userSession from '@plone/volto/reducers/userSession/userSession';
-
-import ErrorPage from '@plone/volto/error';
-
-import languages from '@plone/volto/constants/Languages';
-
 import configureStore from '@plone/volto/store';
+import ErrorPage from '@plone/volto/error';
 import {
   ReduxAsyncConnect,
   loadOnServer,
@@ -61,7 +56,10 @@ function reactIntlErrorHandler(error) {
   debug('i18n')(error);
 }
 
-const supported = new locale.Locales(keys(languages), 'en');
+const supported = new locale.Locales(
+  config.settings?.supportedLanguages || ['en'],
+  'en',
+);
 
 const server = express()
   .disable('x-powered-by')

package/src/helpers/schema-utils.js

@@ -5,7 +5,7 @@ import imageFullSVG from '@plone/volto/icons/image-full.svg';
 import alignTopSVG from '@plone/volto/icons/move-up.svg';
 import alignCenterSVG from '@plone/volto/icons/row.svg';
 import alignBottomSVG from '@plone/volto/icons/move-down.svg';
-import { addStyling } from '@plone/volto/helpers';
+import { addStyling } from '@plone/volto/helpers/Extensions';
 
 export const ALIGN_INFO_MAP = {
   narrow_width: [imageNarrowSVG, 'Narrow width'],

package/src/helpers/schema-utils.test.js

@@ -16,7 +16,7 @@ jest.mock('@plone/volto/icons/move-up.svg', () => 'move-up-svg');
 jest.mock('@plone/volto/icons/row.svg', () => 'row-svg');
 jest.mock('@plone/volto/icons/move-down.svg', () => 'move-down-svg');
 
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Extensions', () => ({
   addStyling: jest.fn((props) => ({
     properties: {
       styles: {

package/src/hocs/withErrorBoundary.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ErrorBoundary } from '@plone/volto/components';
+import ErrorBoundary from '@plone/volto/components/theme/Error/ErrorBoundary';
 
 export default function withErrorBoundary(WrappedComponent, options = {}) {
   // Handle backward compatibility - if second param is a component, treat as fallback

package/src/hocs/withErrorBoundary.test.jsx

@@ -1,18 +1,11 @@
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { ErrorBoundary } from '@plone/volto/components';
+import ErrorBoundary from '@plone/volto/components/theme/Error/ErrorBoundary';
 import withErrorBoundary from './withErrorBoundary';
 
-// Mock the ErrorBoundary component from Volto
-jest.mock('@plone/volto/components', () => ({
-  ErrorBoundary: jest.fn(({ children, fallback, onError }) => {
-    try {
-      return children;
-    } catch (error) {
-      if (onError) onError(error, { componentStack: 'test-stack' });
-      return fallback || <div>Error occurred</div>;
-    }
-  }),
+jest.mock('@plone/volto/components/theme/Error/ErrorBoundary', () => ({
+  __esModule: true,
+  default: jest.fn(({ children, fallback }) => children || fallback || null),
 }));
 
 // Test components

package/src/hocs/withRootNavigation.jsx

@@ -1,7 +1,8 @@
 import React from 'react';
 import { connect, useDispatch } from 'react-redux';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
-import { getNavigation } from '@plone/volto/actions';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
 import config from '@plone/volto/registry';
 
 export default function withRootNavigation(WrappedComponent) {

package/src/hocs/withRootNavigation.test.jsx

@@ -4,24 +4,28 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk'; // ✅ Add redux-thunk middleware
 import { render } from '@testing-library/react';
 import withRootNavigation from './withRootNavigation';
-import { getNavigation } from '@plone/volto/actions';
-import { getBaseUrl, hasApiExpander } from '@plone/volto/helpers';
+import { getNavigation } from '@plone/volto/actions/navigation/navigation';
+import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
+import { hasApiExpander } from '@plone/volto/helpers/Utils/Utils';
 import config from '@plone/volto/registry';
 
-// Mock dependencies
-jest.mock('@plone/volto/actions', () => ({
-  getNavigation: jest.fn(() => ({ type: 'GET_NAVIGATION' })), // ✅ Ensure it returns a plain object
+jest.mock('@plone/volto/actions/navigation/navigation', () => ({
+  getNavigation: jest.fn(() => ({ type: 'GET_NAVIGATION' })),
 }));
-jest.mock('@plone/volto/helpers', () => ({
+jest.mock('@plone/volto/helpers/Url/Url', () => ({
   getBaseUrl: jest.fn(() => '/en'),
+}));
+jest.mock('@plone/volto/helpers/Utils/Utils', () => ({
   hasApiExpander: jest.fn(() => false),
 }));
 jest.mock('@plone/volto/registry', () => ({
-  settings: { navDepth: 2 },
+  __esModule: true,
+  default: {
+    settings: { navDepth: 2 },
+  },
 }));
 
-// ✅ Use redux-thunk middleware
-const mockStore = configureStore([thunk]); // Add thunk to support async actions
+const mockStore = configureStore([thunk]);
 
 const initialState = {
   navigation: { items: [{ title: 'Home', url: '/' }] },
@@ -51,13 +55,13 @@ describe('withRootNavigation HOC', () => {
       </Provider>,
     );
 
-    expect(getBaseUrl).toHaveBeenCalledWith('/en'); // Check base URL calculation
-    expect(hasApiExpander).toHaveBeenCalledWith('navigation', '/en'); // Ensure API expander is checked
-    expect(getNavigation).toHaveBeenCalledWith('/en', config.settings.navDepth); // Ensure getNavigation is dispatched
+    expect(getBaseUrl).toHaveBeenCalledWith('/en');
+    expect(hasApiExpander).toHaveBeenCalledWith('navigation', '/en');
+    expect(getNavigation).toHaveBeenCalledWith('/en', config.settings.navDepth);
   });
 
   test('does not call getNavigation if API expander is already set', () => {
-    hasApiExpander.mockReturnValue(true); // Simulate that API expander is already set
+    hasApiExpander.mockReturnValue(true);
 
     render(
       <Provider store={store}>
@@ -65,6 +69,6 @@ describe('withRootNavigation HOC', () => {
       </Provider>,
     );
 
-    expect(getNavigation).not.toHaveBeenCalled(); // Ensure getNavigation is NOT called
+    expect(getNavigation).not.toHaveBeenCalled();
   });
 });

package/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { v4 as uuid } from 'uuid';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { default as TokenWidgetEdit } from '@plone/volto/components/manage/Widgets/TokenWidget';
 import { serializeNodesToText } from '@plone/volto-slate/editor/render';
 import TableBlockEdit from '@plone/volto-slate/blocks/Table/TableBlockEdit';
@@ -396,8 +396,8 @@ const applyConfig = (config) => {
       return override_toc && level
         ? [parseInt(level.slice(1)), entry_text]
         : config.settings.slate.topLevelTargetElements.includes(type)
-        ? [parseInt(type.slice(1)), plaintext]
-        : null;
+          ? [parseInt(type.slice(1)), plaintext]
+          : null;
     };
   }
   // Apply accordion block customization

package/src/slate.js

@@ -6,7 +6,7 @@ import {
   BlockButton,
 } from '@plone/volto-slate/editor/ui';
 import installCallout from '@plone/volto-slate/editor/plugins/Callout';
-import { Icon } from '@plone/volto/components';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { Editor, Transforms, Text } from 'slate';
 import { useSlate } from 'slate-react';
 

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.jsx

@@ -1,76 +0,0 @@
-import { defineMessages, useIntl } from 'react-intl';
-import { Icon } from '@plone/volto/components';
-import { Button } from 'semantic-ui-react';
-import imageLeftSVG from '@plone/volto/icons/image-left.svg';
-import imageRightSVG from '@plone/volto/icons/image-right.svg';
-import imageFitSVG from '@plone/volto/icons/image-fit.svg';
-import imageWideSVG from '@plone/volto/icons/image-wide.svg';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-
-const messages = defineMessages({
-  left: {
-    id: 'Left',
-    defaultMessage: 'Left',
-  },
-  right: {
-    id: 'Right',
-    defaultMessage: 'Right',
-  },
-  center: {
-    id: 'Center',
-    defaultMessage: 'Center',
-  },
-  wide: {
-    id: 'Wide',
-    defaultMessage: 'Wide',
-  },
-  full: {
-    id: 'Full',
-    defaultMessage: 'Full',
-  },
-});
-
-const AlignChooser = ({
-  align,
-  onChangeBlock,
-  data,
-  block,
-  actions = ['left', 'right', 'center', 'full'],
-}) => {
-  const intl = useIntl();
-
-  const ICON_MAP = {
-    left: imageLeftSVG,
-    right: imageRightSVG,
-    center: imageFitSVG,
-    wide: imageWideSVG,
-    full: imageFullSVG,
-  };
-
-  function onAlignBlock(align) {
-    onChangeBlock(block, {
-      ...data,
-      copyrightPosition: align,
-    });
-  }
-
-  return (
-    <div className="align-buttons">
-      {actions.map((action) => (
-        <Button.Group key={action}>
-          <Button
-            icon
-            basic
-            aria-label={intl.formatMessage(messages[action])}
-            onClick={() => onAlignBlock(action)}
-            active={data.copyrightPosition === action}
-          >
-            <Icon name={ICON_MAP[action]} size="24px" />
-          </Button>
-        </Button.Group>
-      ))}
-    </div>
-  );
-};
-
-export default AlignChooser;

package/src/customizations/volto/components/manage/Blocks/LeadImage/AlignChooser.test.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import { render } from '@testing-library/react';
-import AlignChooser from './AlignChooser';
-
-const mockStore = configureStore();
-
-describe('AlignChooser', () => {
-  const props = {
-    align: 'left',
-    onChangeBlock: jest.fn(),
-    data: { copyrightPosition: 'left' },
-    block: '123',
-    actions: ['left', 'right', 'center', 'full'],
-  };
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  });
-
-  it('renders the align buttons', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <AlignChooser {...props} />
-      </Provider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('calls onChangeBlock when an align button is clicked', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <AlignChooser {...props} />
-      </Provider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-
-  it('marks the active align button as active', () => {
-    const { container } = render(
-      <Provider store={store}>
-        <AlignChooser {...props} />
-      </Provider>,
-    );
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/customizations/volto/components/manage/Sidebar/SidebarPopup copy.jsx

@@ -1,82 +0,0 @@
-// Check this https://github.com/plone/volto/pull/5520
-import React from 'react';
-import { Portal } from 'react-portal';
-import { CSSTransition } from 'react-transition-group';
-import PropTypes from 'prop-types';
-import { doesNodeContainClick } from 'semantic-ui-react/dist/commonjs/lib';
-
-const DEFAULT_TIMEOUT = 500;
-
-const SidebarPopup = (props) => {
-  const { children, open, onClose, overlay } = props;
-
-  const asideElement = React.useRef();
-
-  const handleClickOutside = (e) => {
-    if (asideElement && doesNodeContainClick(asideElement.current, e)) return;
-    onClose();
-  };
-
-  React.useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside, false);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside, false);
-    };
-  });
-
-  return (
-    <>
-      {overlay && (
-        <CSSTransition
-          in={open}
-          timeout={DEFAULT_TIMEOUT}
-          classNames="overlay-container"
-          unmountOnExit
-        >
-          <Portal node={document?.body}>
-            <div className="overlay-container"></div>
-          </Portal>
-        </CSSTransition>
-      )}
-      <CSSTransition
-        in={open}
-        timeout={DEFAULT_TIMEOUT}
-        classNames="sidebar-container"
-        unmountOnExit
-      >
-        <Portal>
-          <aside
-            id="test"
-            role="presentation"
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onKeyDown={(e) => {
-              e.stopPropagation();
-            }}
-            ref={asideElement}
-            key="sidebarpopup"
-            className="sidebar-container"
-            style={{ overflowY: 'auto' }}
-          >
-            {children}
-          </aside>
-        </Portal>
-      </CSSTransition>
-    </>
-  );
-};
-
-SidebarPopup.propTypes = {
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-  overlay: PropTypes.bool,
-};
-
-SidebarPopup.defaultProps = {
-  open: false,
-  onClose: () => {},
-  overlay: false,
-};
-
-export default SidebarPopup;