@plone/volto 19.0.0-alpha.2 → 19.0.0-alpha.20

package/webpack-plugins/webpack-scss-plugin.js

@@ -0,0 +1,172 @@
+/* Razzle SCSS Webpack Plugin `razzle-plugin-scss`
+    Forked from https://github.com/jaredpalmer/razzle/blob/master/packages/razzle-plugin-scss/index.js
+    version 4.2.18
+    See Volto's upgrade guide for more information:
+    https://6.docs.plone.org/volto/upgrade-guide/index.html
+*/
+
+const autoprefixer = require('autoprefixer');
+const merge = require('deepmerge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const paths = require('@plone/razzle/config/paths');
+const postcssLoadConfig = require('postcss-load-config');
+
+const hasPostCssConfig = () => {
+  try {
+    return !!postcssLoadConfig.sync();
+  } catch (_error) {
+    return false;
+  }
+};
+
+module.exports = {
+  modifyWebpackConfig(opts) {
+    const isServer = opts.env.target !== 'web';
+    const constantEnv = opts.env.dev ? 'dev' : 'prod';
+
+    const razzleOptions = opts.options.razzleOptions;
+    const config = Object.assign({}, opts.webpackConfig);
+
+    const defaultOptions = {
+      postcss: {
+        dev: {
+          sourceMap: true,
+          ident: 'postcss',
+        },
+        prod: {
+          sourceMap: razzleOptions.enableSourceMaps,
+          ident: 'postcss',
+        },
+        plugins: [
+          [
+            autoprefixer,
+            {
+              overrideBrowserslist: opts.options.razzleOptions.browserslist || [
+                '>1%',
+                'last 4 versions',
+                'Firefox ESR',
+                'not ie < 9',
+              ],
+              flexbox: 'no-2009',
+            },
+          ],
+        ],
+      },
+      sass: {
+        dev: {
+          sassOptions: {
+            sourceMap: true,
+            includePaths: [paths.appNodeModules],
+            outputStyle: 'expanded',
+            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
+            quiet: true,
+            quietDeps: true,
+          },
+        },
+        prod: {
+          sassOptions: {
+            // XXX Source maps are required for the resolve-url-loader to properly
+            // function. Disable them in later stages if you do not want source maps.
+            sourceMap: true,
+            sourceMapContents: false,
+            includePaths: [paths.appNodeModules],
+            outputStyle: 'expanded',
+            silenceDeprecations: ['legacy-js-api', 'mixed-decls', 'import'],
+            quiet: true,
+            quietDeps: true,
+          },
+        },
+      },
+      css: {
+        dev: {
+          sourceMap: true,
+          importLoaders: 1,
+          modules: {
+            auto: true,
+            localIdentName: '[name]__[local]___[hash:base64:5]',
+          },
+        },
+        prod: {
+          sourceMap: razzleOptions.enableSourceMaps,
+          importLoaders: 1,
+          modules: {
+            auto: true,
+            localIdentName: '[name]__[local]___[hash:base64:5]',
+          },
+        },
+      },
+      style: {},
+      resolveUrl: {
+        dev: {},
+        prod: {},
+      },
+    };
+
+    const options = Object.assign(
+      {},
+      defaultOptions,
+      opts.options.pluginOptions,
+    );
+
+    const styleLoader = {
+      loader: require.resolve('style-loader'),
+      options: options.style,
+    };
+
+    const cssLoader = {
+      loader: require.resolve('css-loader'),
+      options: options.css[constantEnv],
+    };
+
+    const resolveUrlLoader = {
+      loader: require.resolve('resolve-url-loader'),
+      options: options.resolveUrl[constantEnv],
+    };
+
+    const postCssLoader = {
+      loader: require.resolve('postcss-loader'),
+      options: hasPostCssConfig()
+        ? undefined
+        : {
+            postcssOptions: Object.assign({}, options.postcss[constantEnv], {
+              plugins: options.postcss.plugins,
+            }),
+          },
+    };
+
+    const sassLoader = {
+      loader: require.resolve('sass-loader'),
+      options: options.sass[constantEnv],
+    };
+
+    config.module.rules = [
+      ...config.module.rules,
+      {
+        test: /\.(sa|sc)ss$/,
+        use: isServer
+          ? [
+              {
+                loader: require.resolve('css-loader'),
+                options: merge(options.css[constantEnv], {
+                  modules: {
+                    exportOnlyLocals: true,
+                  },
+                }),
+              },
+              resolveUrlLoader,
+              postCssLoader,
+              sassLoader,
+            ]
+          : [
+              opts.env.dev ? styleLoader : MiniCssExtractPlugin.loader,
+              cssLoader,
+              postCssLoader,
+              resolveUrlLoader,
+              sassLoader,
+            ],
+      },
+    ];
+
+    return config;
+  },
+};

package/jest-addons-loader.js

@@ -1,3 +0,0 @@
-export default (config) => {
-  return config;
-};

package/jest-extender-plugin.js

@@ -1,39 +0,0 @@
-// Extends the Volto test configuration by injecting the keys in `jest.config.js`
-const path = require('path');
-const fs = require('fs');
-const projectRootPath = path.resolve('.');
-
-module.exports = {
-  modifyJestConfig({
-    jestConfig: config,
-    webpackObject,
-    options: { razzleOptions, pluginOptions },
-    paths,
-  }) {
-    // If the RAZZLE_JEST_CONFIG env var exists,
-    // use it as the file with the Jest config overrides
-    if (process.env.RAZZLE_JEST_CONFIG) {
-      if (fs.existsSync(path.resolve(process.env.RAZZLE_JEST_CONFIG))) {
-        const jestConfigPath = path.resolve(process.env.RAZZLE_JEST_CONFIG);
-        const jestConfig = require(jestConfigPath);
-        config = { ...config, ...jestConfig };
-        return config;
-      }
-      if (
-        fs.existsSync(`${projectRootPath}/${process.env.RAZZLE_JEST_CONFIG}`)
-      ) {
-        const jestConfig = require(
-          `${projectRootPath}/${process.env.RAZZLE_JEST_CONFIG}`,
-        );
-        config = { ...config, ...jestConfig };
-      }
-      // if not, use the sensible default, `jest.config.js`
-    } else {
-      if (fs.existsSync(`${projectRootPath}/jest.config.js`)) {
-        const jestConfig = require(`${projectRootPath}/jest.config.js`);
-        config = { ...config, ...jestConfig };
-      }
-    }
-    return config;
-  },
-};

package/jest-setup-afterenv.js

@@ -1,2 +0,0 @@
-// Jest-crap setup after env T_T
-import '@testing-library/jest-dom';

package/jest-svgsystem-transform.js

@@ -1,10 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  process(src, filename) {
-    if (filename.includes('src/icons')) {
-      return `module.exports = { attributes: { xmlns: '', viewBox: ''}}`;
-    }
-    return `module.exports = ${JSON.stringify(path.basename(filename))}`;
-  },
-};

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/patches/patchit.sh

@@ -1,2 +0,0 @@
-#!/bin/bash
-patch --quiet -p0 -N node_modules/razzle/config/createJestConfig.js < patches/razzle-jest.patch

package/patches/razzle-jest.patch

@@ -1,10 +0,0 @@
---- /Users/sneridagh/Development/plone/volto/node_modules/razzle/config/createJestConfig.js	2020-11-07 16:11:14.489360747 +0100
-+++ /Users/sneridagh/Development/plone/volto/node_modules/razzle/config/createJestConfigNew.js	2020-11-07 16:13:44.816817775 +0100
-@@ -84,6 +84,7 @@
-       'mapCoverage',
-       'moduleDirectories',
-       'moduleFileExtensions',
-+      'modulePathIgnorePatterns',
-       'moduleNameMapper',
-       'modulePaths',
-       'snapshotSerializers',

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/Contents/__mocks__/index.vitest.tsx

@@ -1,5 +0,0 @@
-export const Contents = vi.fn(() => <div className="Contents" />);
-
-export const ContentsRenameModal = vi.fn(() => (
-  <div className="ContentsRenameModal" />
-));

package/src/components/manage/Form/__mocks__/index.vitest.tsx

@@ -1,73 +0,0 @@
-import type { JSONSchema } from '@plone/types';
-import type { Ref } from 'react';
-import { forwardRef } from 'react';
-
-const cleanupSchema = (schema: JSONSchema | null): JSONSchema | null => {
-  if (!schema || !schema.properties) return schema;
-  return {
-    ...schema,
-    properties: Object.entries(schema.properties).reduce<Record<string, any>>(
-      (acc, [key, value]) => {
-        acc[key] = {
-          ...value,
-          description:
-            typeof value.description === 'string'
-              ? value.description
-              : undefined,
-        };
-        return acc;
-      },
-      {},
-    ),
-  };
-};
-
-export const Field = vi.fn((props) => (
-  <div className="Field" id={props.id}>
-    {props.title}
-  </div>
-));
-
-export const InlineForm = vi.fn((props) => (
-  <div
-    id="InlineForm"
-    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
-  />
-));
-
-export const ModalForm = vi.fn((props) => (
-  <div
-    id="ModalForm"
-    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
-  />
-));
-
-export const UndoToolbar = vi.fn(() => <div id="UndoToolbar" />);
-
-export const BlocksToolbar = vi.fn(() => <div id="BlocksToolbar" />);
-
-export const BlockDataForm = vi.fn((props) => (
-  <div
-    id="BlockDataForm"
-    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
-  />
-));
-
-export const BlocksForm = vi.fn((props) => (
-  <div
-    id="BlocksForm"
-    data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
-  />
-));
-
-const MockForm = forwardRef(
-  (props: { schema: JSONSchema | null }, ref: Ref<any>) => (
-    <div
-      id="Form"
-      data-schema={JSON.stringify(cleanupSchema(props.schema), null, 2)}
-      ref={ref}
-    />
-  ),
-);
-
-export const Form = vi.fn((props) => <MockForm {...props} />);

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/Widgets/AlignWidget.test.jsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-
-import AlignWidget from './AlignWidget';
-
-const mockStore = configureStore();
-
-describe('renders an align widget component', () => {
-  it('basic', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <AlignWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('extended with actions and actionsInfoMap props', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <AlignWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-          actions={['additional']}
-          actionsInfoMap={{
-            additional: [imageFullSVG, 'Additional action title'],
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/src/components/manage/Widgets/ButtonsWidget.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import FormFieldWrapper from '@plone/volto/components/manage/Widgets/FormFieldWrapper';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-import { Button } from 'semantic-ui-react';
-
-// The ButtonsWidget
-const ButtonsWidget = (props) => {
-  const { id, onChange, actions, actionsInfoMap, defaultAction, value } = props;
-
-  React.useEffect(() => {
-    if (!props.value && props.default) {
-      props.onChange(props.id, props.default);
-    }
-  });
-
-  return (
-    <FormFieldWrapper {...props} className="align-widget">
-      <div className="align-buttons">
-        {actions.map((action) => (
-          <Button.Group key={action}>
-            <Button
-              icon
-              basic
-              aria-label={actionsInfoMap[action][1]}
-              onClick={() => onChange(id, action)}
-              active={(action === defaultAction && !value) || value === action}
-            >
-              <Icon
-                name={actionsInfoMap[action][0]}
-                title={actionsInfoMap[action][1] || action}
-                size="24px"
-              />
-            </Button>
-          </Button.Group>
-        ))}
-      </div>
-    </FormFieldWrapper>
-  );
-};
-
-export default ButtonsWidget;

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

@@ -1,70 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import imageFullSVG from '@plone/volto/icons/image-full.svg';
-import textJustifiedSVG from '@plone/volto/icons/align-justify.svg';
-import textCenteredSVG from '@plone/volto/icons/align-center.svg';
-import textLeftSVG from '@plone/volto/icons/align-left.svg';
-import textRightSVG from '@plone/volto/icons/align-right.svg';
-
-import ButtonsWidget from './ButtonsWidget';
-
-const mockStore = configureStore();
-
-describe('renders an align widget component', () => {
-  it('basic', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <ButtonsWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-          actions={['left', 'right', 'centered', 'justified']}
-          actionsInfoMap={{
-            left: [textLeftSVG, 'Text Left'],
-            right: [textRightSVG, 'Text Right'],
-            justified: [textJustifiedSVG, 'Text Justified'],
-            centered: [textCenteredSVG, 'Text Centered'],
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('extended with actions and actionsInfoMap props', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    const { asFragment } = render(
-      <Provider store={store}>
-        <ButtonsWidget
-          id="align"
-          title="Alignment"
-          fieldSet="default"
-          onChange={() => {}}
-          actions={['additional']}
-          actionsInfoMap={{
-            additional: [imageFullSVG, 'Additional action title'],
-          }}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/src/components/manage/Widgets/__mocks__/index.vitest.tsx

@@ -1,41 +0,0 @@
-export const AlignWidget = vi.fn(() => <div id="AlignWidget" />);
-export const ButtonsWidget = vi.fn(() => <div id="ButtonsWidget" />);
-export const ArrayWidget = vi.fn(() => <div id="ArrayWidget" />);
-export const CheckboxWidget = vi.fn(() => <div id="CheckboxWidget" />);
-export const FileWidget = vi.fn(() => <div id="FileWidget" />);
-export const IdWidget = vi.fn(() => <div id="IdWidget" />);
-export const PasswordWidget = vi.fn(() => <div id="PasswordWidget" />);
-export const QueryWidget = vi.fn(() => <div id="QueryWidget" />);
-export const QuerySortOnWidget = vi.fn(() => <div id="QuerySortOnWidget" />);
-export const QuerystringWidget = vi.fn(() => <div id="QuerystringWidget" />);
-export const SchemaWidget = vi.fn(() => <div id="SchemaWidget" />);
-export const SelectWidget = vi.fn(() => <div id="SelectWidget" />);
-export const TextareaWidget = vi.fn(() => <div id="TextareaWidget" />);
-export const TextWidget = vi.fn(() => <div id="TextWidget" />);
-export const TokenWidget = vi.fn(() => <div id="TokenWidget" />);
-export const WysiwygWidget = vi.fn(() => <div id="WysiwygWidget" />);
-export const UrlWidget = vi.fn(() => <div id="UrlWidget" />);
-export const InternalUrlWidget = vi.fn(() => <div id="InternalUrlWidget" />);
-export const EmailWidget = vi.fn(() => <div id="EmailWidget" />);
-export const NumberWidget = vi.fn(() => <div id="NumberWidget" />);
-export const ImageSizeWidget = vi.fn(() => <div id="ImageSizeWidget" />);
-export const RegistryImageWidget = vi.fn(() => (
-  <div id="RegistryImageWidget" />
-));
-export const ReferenceWidget = vi.fn(() => <div id="ReferenceWidget" />);
-export const ObjectBrowserWidget = vi.fn(() => (
-  <div id="ObjectBrowserWidget" />
-));
-export const ObjectWidget = vi.fn(() => <div id="ObjectWidget" />);
-export const ObjectListWidget = vi.fn(() => <div id="ObjectListWidget" />);
-export const VocabularyTermsWidget = vi.fn(() => (
-  <div id="VocabularyTermsWidget" />
-));
-export const SelectMetadataWidget = vi.fn(() => (
-  <div id="SelectMetadataWidget" />
-));
-export const SelectAutoComplete = vi.fn(() => <div id="SelectAutoComplete" />);
-export const ColorPickerWidget = vi.fn(() => <div id="ColorPickerWidget" />);
-export const DatetimeWidget = vi.fn(() => <div id="DatetimeWidget" />);
-export const RecurrenceWidget = vi.fn(() => <div id="RecurrenceWidget" />);
-export const FormFieldWrapper = vi.fn(() => <div id="FormFieldWrapper" />);