@plone/volto 19.0.0-alpha.0 → 19.0.0-alpha.10

package/vitest.config.mjs

@@ -0,0 +1,77 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { svgLoader } from './vite-plugins/svg.mjs';
+import { fileURLToPath } from 'url';
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const projectRoot = path.resolve(__dirname);
+
+export default defineConfig({
+  plugins: [
+    react(),
+    svgLoader({
+      svgoConfig: {
+        plugins: [
+          {
+            name: 'preset-default',
+            params: {
+              overrides: {
+                convertPathData: false,
+                removeViewBox: false,
+              },
+            },
+          },
+          'removeTitle',
+          'removeUselessStrokeAndFill',
+        ],
+      },
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@plone/volto': path.resolve(__dirname, 'src'),
+      '@plone/volto-slate': path.resolve(__dirname, '../volto-slate/src'),
+      '@root': path.resolve(__dirname, 'src'),
+      'promise-file-reader': require.resolve('promise-file-reader'),
+      'react-dropzone': require.resolve('react-dropzone'),
+      'prop-types': require.resolve('prop-types'),
+    },
+  },
+  test: {
+    isolate: true,
+    deps: {
+      moduleDirectories: ['node_modules'],
+    },
+    snapshotFormat: { printBasicPrototype: false },
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: [
+      `${projectRoot}/test-setup-globals-vitest.js`,
+      `${projectRoot}/test-setup-config.jsx`,
+      `${projectRoot}/jest-setup-afterenv.js`,
+      `${projectRoot}/jest-addons-loader.js`,
+    ],
+    globalSetup: `${projectRoot}/global-test-setup.js`,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+      include: [
+        'src/**/*.{test,spec}.{js,ts,jsx,tsx}',
+        '__test__/**/*.{test,spec}.{js,ts,jsx,tsx}',
+      ],
+      exclude: [
+        'node_modules/**',
+        '**/dist/**',
+        '**/*.config.{js,ts}',
+        '**/jest-*.js',
+      ],
+    },
+    css: true,
+  },
+});

package/package-why.json

@@ -1,34 +0,0 @@
-{
-  "scripts": {
-    "postinstall": "Description for `npm run postinstall` command",
-    "analyze": "Description for `npm run analyze` command",
-    "start": "Description for `npm run start` command",
-    "build": "Description for `npm run build` command",
-    "build:clean": "Description for `npm run build:clean` command",
-    "dist:clean": "Description for `npm run dist:clean` command",
-    "build:dist": "Description for `npm run build:dist` command",
-    "test": "Description for `npm run test` command",
-    "test:ci": "Description for `npm run test:ci` command",
-    "test:husky": "Description for `npm run test:husky` command",
-    "test:debug": "Description for `npm run test:debug` command",
-    "start:prod": "Description for `npm run start:prod` command",
-    "start:dist": "Description for `npm run start:dist` command",
-    "prettier": "Description for `npm run prettier` command",
-    "prettier:fix": "Description for `npm run prettier:fix` command",
-    "stylelint": "Description for `npm run stylelint` command",
-    "stylelint:overrides": "Description for `npm run stylelint:overrides` command",
-    "stylelint:fix": "Description for `npm run stylelint:fix` command",
-    "lint": "Description for `npm run lint` command",
-    "lint:fix": "Description for `npm run lint:fix` command",
-    "i18n": "Description for `npm run i18n` command",
-    "i18n:ci": "Description for `npm run i18n:ci` command",
-    "stylelint:patches": "Description for `npm run stylelint:patches` command",
-    "patches": "Description for `npm run patches` command",
-    "dry-release": "Description for `npm run dry-release` command",
-    "release": "Description for `npm run release` command",
-    "release-major-alpha": "Description for `npm run release-major-alpha` command",
-    "release-alpha": "Description for `npm run release-alpha` command",
-    "storybook": "Description for `npm run storybook` command",
-    "build-storybook": "Description for `npm run build-storybook` command"
-  }
-}

package/src/actions/content/content.multilingual.test.js

@@ -1,17 +0,0 @@
-import { getContent } from './content';
-import { GET_CONTENT } from '@plone/volto/constants/ActionTypes';
-import config from '@plone/volto/registry';
-
-config.settings.isMultilingual = true;
-config.settings.supportedLanguages = ['de', 'es'];
-
-describe('getContent', () => {
-  it('[Multilingual] should create an action to get content', () => {
-    const url = 'http://localhost';
-    const action = getContent(url);
-
-    expect(action.type).toEqual(GET_CONTENT);
-    expect(action.request.op).toEqual('get');
-    expect(action.request.path).toEqual(`${url}?expand=translations`);
-  });
-});

package/src/components/manage/ConditionalLink/ConditionalLink.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
-import PropTypes from 'prop-types';
-
-const ConditionalLink = ({ condition, to, item, ...props }) => {
-  if (condition) {
-    return (
-      <UniversalLink href={to} item={item} {...props}>
-        {props.children}
-      </UniversalLink>
-    );
-  } else {
-    return <>{props.children}</>;
-  }
-};
-
-ConditionalLink.propTypes = {
-  condition: PropTypes.bool,
-  to: PropTypes.string,
-  item: PropTypes.shape({
-    '@id': PropTypes.string,
-    remoteUrl: PropTypes.string, //of plone @type 'Link'
-  }),
-  children: PropTypes.node,
-};
-
-export default ConditionalLink;

package/src/components/manage/ConditionalLink/ConditionalLink.test.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import { MemoryRouter } from 'react-router-dom';
-
-import ConditionalLink from './ConditionalLink';
-
-describe('ConditionalLink', () => {
-  it('renders a ConditionalLink component not link', () => {
-    const component = renderer.create(
-      <MemoryRouter>
-        <ConditionalLink>
-          <h1>Title</h1>
-        </ConditionalLink>
-      </MemoryRouter>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-  it('renders a ConditionalLink component with link', () => {
-    const component = renderer.create(
-      <MemoryRouter>
-        <ConditionalLink isLink>
-          <h1>Title</h1>
-        </ConditionalLink>
-      </MemoryRouter>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-});

package/src/components/manage/MaybeWrap/MaybeWrap.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-export default function MaybeWrap({
-  condition,
-  as: Component = 'div',
-  ...props
-}) {
-  return condition ? <Component {...props} /> : props.children;
-}

package/src/components/manage/Sidebar/SidebarPortal.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { createPortal } from 'react-dom';
-
-/**
- * Portal that wraps Sidebar components
- * @param {React.ReactNode} children Sidebar content
- * @param {bool} selected Sidebar needs to know when the related block is selected
- * @param {string} tab Element id where to insert sidebar content, default: sidebar-properties
- * @returns {string} Rendered sidebar
- */
-const SidebarPortal = ({ children, selected, tab = 'sidebar-properties' }) => {
-  const [isClient, setIsClient] = React.useState(null);
-
-  React.useEffect(() => setIsClient(true), []);
-
-  return (
-    <>
-      {isClient &&
-        selected &&
-        createPortal(
-          <div role="form" style={{ height: '100%' }}>
-            <div
-              style={{ height: '100%' }}
-              role="presentation"
-              onClick={(e) => {
-                e.stopPropagation();
-              }}
-              onKeyDown={(e) => {
-                e.stopPropagation();
-              }}
-            >
-              {children}
-            </div>
-          </div>,
-          document.getElementById(tab),
-        )}
-    </>
-  );
-};
-
-SidebarPortal.propTypes = {
-  children: PropTypes.any,
-  selected: PropTypes.bool.isRequired,
-};
-
-export default SidebarPortal;

package/src/components/manage/Sidebar/SidebarPortal.test.jsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import ShallowRenderer from 'react-test-renderer/shallow';
-
-import SidebarPortal from './SidebarPortal';
-
-test('sidebar portal is rendered when the block is selected', () => {
-  const renderer = new ShallowRenderer();
-  renderer.render(
-    <SidebarPortal selected={true}>
-      <p>Tested!</p>
-    </SidebarPortal>,
-  );
-  const component = renderer.getRenderOutput();
-  expect(component).toMatchSnapshot();
-});
-
-test('sidebar portal is not rendered when the block is not selected', () => {
-  const renderer = new ShallowRenderer();
-  renderer.render(
-    <SidebarPortal selected={false}>
-      <p>Tested, but you shouldn't see this in the snapshot!</p>
-    </SidebarPortal>,
-  );
-  const component = renderer.getRenderOutput();
-  expect(component).toMatchSnapshot();
-});

package/src/components/manage/UniversalLink/UniversalLink.jsx

@@ -1,154 +0,0 @@
-/*
- * UniversalLink
- * @module components/UniversalLink
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { HashLink as Link } from 'react-router-hash-link';
-import { useSelector } from 'react-redux';
-import {
-  flattenToAppURL,
-  isInternalURL,
-  URLUtils,
-} from '@plone/volto/helpers/Url/Url';
-
-import config from '@plone/volto/registry';
-import cx from 'classnames';
-
-const UniversalLink = ({
-  href,
-  item = null,
-  openLinkInNewTab,
-  download = false,
-  children,
-  className = null,
-  title = null,
-  ...props
-}) => {
-  const token = useSelector((state) => state.userSession?.token);
-
-  let url = href;
-  if (!href && item) {
-    if (item['@id'] === '') {
-      url = config.settings.publicURL;
-    } else if (!item['@id']) {
-      // eslint-disable-next-line no-console
-      console.error(
-        'Invalid item passed to UniversalLink',
-        item,
-        props,
-        children,
-      );
-      url = '#';
-    } else {
-      //case: generic item
-      url = flattenToAppURL(item['@id']);
-
-      //case: item like a Link
-      let remoteUrl = item.remoteUrl || item.getRemoteUrl;
-      if (!token && remoteUrl) {
-        url = remoteUrl;
-      }
-
-      //case: item of type 'File'
-      if (
-        !token &&
-        config.settings.downloadableObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@download/file`;
-      }
-
-      if (
-        !token &&
-        config.settings.viewableInBrowserObjects.includes(item['@type'])
-      ) {
-        url = `${url}/@@display-file/file`;
-      }
-    }
-  }
-
-  const isExternal = !isInternalURL(url);
-
-  const isDownload = (!isExternal && url.includes('@@download')) || download;
-  const isDisplayFile =
-    (!isExternal && url.includes('@@display-file')) || false;
-
-  const checkedURL = URLUtils.checkAndNormalizeUrl(url);
-
-  url = checkedURL.url;
-  let tag = (
-    <Link
-      to={flattenToAppURL(url)}
-      target={openLinkInNewTab ?? false ? '_blank' : null}
-      title={title}
-      className={className}
-      smooth={config.settings.hashLinkSmoothScroll}
-      {...props}
-    >
-      {children}
-    </Link>
-  );
-
-  if (isExternal) {
-    const isTelephoneOrMail = checkedURL.isMail || checkedURL.isTelephone;
-    tag = (
-      <a
-        href={url}
-        title={title}
-        target={
-          !isTelephoneOrMail && !(openLinkInNewTab === false) ? '_blank' : null
-        }
-        rel="noopener noreferrer"
-        className={cx({ external: !isTelephoneOrMail }, className)}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  } else if (isDownload) {
-    tag = (
-      <a
-        href={flattenToAppURL(url)}
-        download
-        title={title}
-        className={className}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  } else if (isDisplayFile) {
-    tag = (
-      <a
-        href={flattenToAppURL(url)}
-        title={title}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={className}
-        {...props}
-      >
-        {children}
-      </a>
-    );
-  }
-  return tag;
-};
-
-UniversalLink.propTypes = {
-  href: PropTypes.string,
-  openLinkInNewTab: PropTypes.bool,
-  download: PropTypes.bool,
-  className: PropTypes.string,
-  title: PropTypes.string,
-  item: PropTypes.shape({
-    '@id': PropTypes.string.isRequired,
-    remoteUrl: PropTypes.string, //of plone @type 'Link'
-  }),
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-export default UniversalLink;

package/src/components/manage/Widgets/FileWidget.test.jsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import { Provider } from 'react-intl-redux';
-import { render, waitFor } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
-
-import FileWidget from './FileWidget';
-
-jest.spyOn(global.Date, 'now').mockImplementation(() => '0');
-
-const mockStore = configureStore();
-
-describe('FileWidget', () => {
-  test('renders an empty file widget component', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-        />
-      </Provider>,
-    );
-
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
-  test('renders a file widget component with value', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-          value={{
-            download: 'http://myfile',
-            'content-type': 'image/png',
-            filename: 'myfile',
-            encoding: '',
-          }}
-        />
-      </Provider>,
-    );
-
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
-  test('renders a file widget component with value in raw data', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { container } = render(
-      <Provider store={store}>
-        <FileWidget
-          id="my-field"
-          title="My field"
-          fieldSet="default"
-          onChange={() => {}}
-          value={{
-            data: 'oiweurtksdgfjaslfqw9523563456',
-            'content-type': 'image/png',
-            filename: 'myfile',
-            encoding: 'base64',
-          }}
-        />
-      </Provider>,
-    );
-
-    await waitFor(() => {});
-    expect(container).toMatchSnapshot();
-  });
-});

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

@@ -1,77 +0,0 @@
-/**
- * Language selector component.
- * @module components/LanguageSelector/LanguageSelector
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Link } from 'react-router-dom';
-
-import { useSelector } from 'react-redux';
-import cx from 'classnames';
-import find from 'lodash/find';
-import map from 'lodash/map';
-
-import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import langmap from '@plone/volto/helpers/LanguageMap/LanguageMap';
-import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
-import { toReactIntlLang } from '@plone/volto/helpers/Utils/Utils';
-
-import config from '@plone/volto/registry';
-
-import { defineMessages, useIntl } from 'react-intl';
-
-const messages = defineMessages({
-  switchLanguageTo: {
-    id: 'Switch to',
-    defaultMessage: 'Switch to',
-  },
-});
-
-const LanguageSelector = (props) => {
-  const intl = useIntl();
-  const currentLang = useSelector((state) => state.intl.locale);
-  const translations = useSelector(
-    (state) => state.content.data?.['@components']?.translations?.items,
-  );
-
-  const { settings } = config;
-
-  return settings.isMultilingual ? (
-    <div className="language-selector">
-      {map(settings.supportedLanguages, (lang) => {
-        const translation = find(translations, { language: lang });
-        return (
-          <Link
-            aria-label={`${intl.formatMessage(
-              messages.switchLanguageTo,
-            )} ${langmap[lang].nativeName.toLowerCase()}`}
-            className={cx({ selected: toReactIntlLang(lang) === currentLang })}
-            to={translation ? flattenToAppURL(translation['@id']) : `/${lang}`}
-            title={langmap[lang].nativeName}
-            onClick={() => {
-              props.onClickAction();
-            }}
-            key={`language-selector-${lang}`}
-          >
-            {langmap[lang].nativeName}
-          </Link>
-        );
-      })}
-    </div>
-  ) : (
-    <Helmet>
-      <html lang={toReactIntlLang(settings.defaultLanguage)} />
-    </Helmet>
-  );
-};
-
-LanguageSelector.propTypes = {
-  onClickAction: PropTypes.func,
-};
-
-LanguageSelector.defaultProps = {
-  onClickAction: () => {},
-};
-
-export default LanguageSelector;

package/theme/themes/pastanaga/extras/utils.less

@@ -1,63 +0,0 @@
-/* Responsive visibility helper classes */
-
-body:not(.has-sidebar):not(.has-sidebar-collapsed) {
-  /* Mobile */
-  @media only screen and (max-width: @largestMobileScreen) {
-    [class*='mobile hidden'],
-    [class*='tablet only']:not(.mobile),
-    [class*='computer only']:not(.mobile),
-    [class*='large screen only']:not(.mobile),
-    [class*='widescreen only']:not(.mobile),
-    [class*='or lower hidden'] {
-      display: none !important;
-    }
-  }
-
-  /* Tablet / iPad Portrait */
-  @media only screen and (min-width: @tabletBreakpoint) and (max-width: @largestTabletScreen) {
-    [class*='mobile only']:not(.tablet),
-    [class*='tablet hidden'],
-    [class*='computer only']:not(.tablet),
-    [class*='large screen only']:not(.tablet),
-    [class*='widescreen only']:not(.tablet),
-    [class*='or lower hidden']:not(.mobile) {
-      display: none !important;
-    }
-  }
-
-  /* Computer / Desktop / iPad Landscape */
-  @media only screen and (min-width: @computerBreakpoint) and (max-width: @largestSmallMonitor) {
-    [class*='mobile only']:not(.computer),
-    [class*='tablet only']:not(.computer),
-    [class*='computer hidden'],
-    [class*='large screen only']:not(.computer),
-    [class*='widescreen only']:not(.computer),
-    [class*='or lower hidden']:not(.tablet):not(.mobile) {
-      display: none !important;
-    }
-  }
-
-  /* Large Monitor */
-  @media only screen and (min-width: @largeMonitorBreakpoint) and (max-width: @largestLargeMonitor) {
-    [class*='mobile only']:not([class*='large screen']),
-    [class*='tablet only']:not([class*='large screen']),
-    [class*='computer only']:not([class*='large screen']),
-    [class*='large screen hidden'],
-    [class*='widescreen only']:not([class*='large screen']),
-    [class*='or lower hidden']:not(.computer):not(.tablet):not(.mobile) {
-      display: none !important;
-    }
-  }
-
-  /* Widescreen Monitor */
-  @media only screen and (min-width: @widescreenMonitorBreakpoint) {
-    [class*='mobile only']:not([class*='widescreen']),
-    [class*='tablet only']:not([class*='widescreen']),
-    [class*='computer only']:not([class*='widescreen']),
-    [class*='large screen only']:not([class*='widescreen']),
-    [class*='widescreen hidden'],
-    [class*='widescreen or lower hidden'] {
-      display: none !important;
-    }
-  }
-}