Merge master into develop

.eslintrc.js

@@ -1,34 +1,42 @@
-const jsConfig = require('./jsconfig').compilerOptions;
+const fs = require('fs');
 const path = require('path');
 const projectRootPath = __dirname;
 const packageJson = require(path.join(projectRootPath, 'package.json'));
 
-const pathsConfig = jsConfig.paths;
 let voltoPath = './node_modules/@plone/volto';
-Object.keys(pathsConfig).forEach(pkg => {
-  if (pkg === '@plone/volto') {
-    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
-  }
-});
+
+let configFile;
+if (fs.existsSync(`${this.projectRootPath}/tsconfig.json`))
+  configFile = `${this.projectRootPath}/tsconfig.json`;
+else if (fs.existsSync(`${this.projectRootPath}/jsconfig.json`))
+  configFile = `${this.projectRootPath}/jsconfig.json`;
+
+if (configFile) {
+  const jsConfig = require(configFile).compilerOptions;
+  const pathsConfig = jsConfig.paths;
+  if (pathsConfig['@plone/volto'])
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig['@plone/volto'][0]}`;
+}
 
 const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
 const reg = new AddonConfigurationRegistry(__dirname);
 
 // Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
-const addonAliases = Object.keys(reg.packages).map(o => [
+const addonAliases = Object.keys(reg.packages).map((o) => [
   o,
   reg.packages[o].modulePath,
 ]);
 
 module.exports = {
-  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+  extends: `${voltoPath}/.eslintrc`,
   settings: {
     'import/resolver': {
       alias: {
         map: [
           ['@plone/volto', '@plone/volto/src'],
           ...addonAliases,
           ['@package', `${__dirname}/src`],
+          ['@root', `${__dirname}/src`],
           ['~', `${__dirname}/src`],
         ],
         extensions: ['.js', '.jsx', '.json'],

.storybook/main.js

@@ -0,0 +1,120 @@
+const webpack = require('webpack');
+const path = require('path');
+const makeLoaderFinder = require('razzle-dev-utils/makeLoaderFinder');
+const fileLoaderFinder = makeLoaderFinder('file-loader');
+
+const projectRootPath = path.resolve('.');
+const lessPlugin = require('@plone/volto/webpack-plugins/webpack-less-plugin');
+
+const createConfig = require('../node_modules/razzle/config/createConfigAsync.js');
+const razzleConfig = require(path.join(projectRootPath, 'razzle.config.js'));
+
+const SVGLOADER = {
+  test: /icons\/.*\.svg$/,
+  use: [
+    {
+      loader: 'svg-loader',
+    },
+    {
+      loader: 'svgo-loader',
+      options: {
+        plugins: [
+          { removeTitle: true },
+          { convertPathData: false },
+          { removeUselessStrokeAndFill: true },
+          { removeViewBox: false },
+        ],
+      },
+    },
+  ],
+};
+
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    // '@storybook/preset-scss',
+  ],
+  webpackFinal: async (config, { configType }) => {
+    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
+    // You can change the configuration based on that.
+    // 'PRODUCTION' is used when building the static version of storybook.
+
+    // Make whatever fine-grained changes you need
+    let baseConfig;
+    baseConfig = await createConfig(
+      'web',
+      'dev',
+      {
+        // clearConsole: false,
+        modifyWebpackConfig: razzleConfig.modifyWebpackConfig,
+        plugins: razzleConfig.plugins,
+      },
+      webpack,
+    );
+    const AddonConfigurationRegistry = require('@plone/volto/addon-registry');
+
+    const registry = new AddonConfigurationRegistry(projectRootPath);
+
+    config = lessPlugin({ registry }).modifyWebpackConfig({
+      env: { target: 'web', dev: 'dev' },
+      webpackConfig: config,
+      webpackObject: webpack,
+      options: {},
+    });
+
+    // putting SVG loader on top, fix the fileloader manually (Volto plugin does not
+    // work) since it needs to go first
+    config.module.rules.unshift(SVGLOADER);
+    const fileLoader = config.module.rules.find(fileLoaderFinder);
+    fileLoader.exclude = [/\.(config|variables|overrides)$/, /icons\/.*\.svg$/];
+
+    config.plugins.unshift(
+      new webpack.DefinePlugin({
+        __DEVELOPMENT__: true,
+        __CLIENT__: true,
+        __SERVER__: false,
+      }),
+    );
+
+    const resultConfig = {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: { ...config.resolve.alias, ...baseConfig.resolve.alias },
+      },
+    };
+    resultConfig.module.rules[1].exclude = /node_modules\/(?!(@plone\/volto)\/)/;
+
+    const addonExtenders = registry.getAddonExtenders().map((m) => require(m));
+
+    const extendedConfig = addonExtenders.reduce(
+      (acc, extender) =>
+        extender.modify(acc, { target: 'web', dev: 'dev' }, config),
+      resultConfig,
+    );
+
+    // Note: we don't actually support razzle plugins, which are also a feature
+    // of the razzle.extend.js addons file. Those features are probably
+    // provided in a different manner by Storybook plugins (for example scss
+    // loaders).
+
+    return extendedConfig;
+  },
+  babel: async (options) => {
+    return {
+      ...options,
+      plugins: [
+        ...options.plugins,
+        [
+          './node_modules/babel-plugin-root-import/build/index.js',
+          {
+            rootPathSuffix: './src',
+          },
+        ],
+      ],
+      // any extra options you want to set
+    };
+  },
+};

.storybook/manager.js

@@ -0,0 +1,15 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  isFullscreen: false,
+  showNav: true,
+  showPanel: true,
+  panelPosition: 'bottom',
+  sidebarAnimations: true,
+  enableShortcuts: true,
+  isToolshown: true,
+  theme: undefined,
+  selectedPanel: undefined,
+  initialActive: 'sidebar',
+  showRoots: true,
+});

.storybook/preview.js

@@ -0,0 +1,27 @@
+import '@plone/volto/config'; // This is the bootstrap for the global config - client side
+import React from 'react';
+import { StaticRouter } from 'react-router-dom';
+import { IntlProvider } from 'react-intl';
+import enMessages from '@root/../locales/en.json';
+
+import '@root/theme';
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => (
+    <IntlProvider messages={enMessages} locale="en" defaultLocale="en">
+      <StaticRouter location="/">
+        <Story />
+      </StaticRouter>
+    </IntlProvider>
+  ),
+];

jsconfig.json

@@ -1,6 +1,13 @@
 {
     "compilerOptions": {
-        "paths": {},
+        "paths": {
+            "@eeacms/volto-industry-theme": [
+                "addons/volto-industry-theme/src"
+            ],
+            "@eeacms/volto-datablocks": [
+                "addons/volto-datablocks/src"
+            ]
+        },
         "baseUrl": "src"
     }
 }