Add workaround for @emotion packages naming issue

Storybook uses @emotion packages v10 and @wordpress/components
require v11. Storybook works with version 11 but since there were some merges
in @emotion packages we need to set some aliases and also make sure correct versions
are installed on top level in node_modules.
See https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111
This workaround was done based on a workaround applied in the Gutenberg project
bc072fddef
[MAILPOET-3654]

.storybook/main.js

@@ -1,14 +1,30 @@
 const path = require('path');
 
+const modulesDir = path.join( __dirname, '../node_modules' );
+console.log('NODE', modulesDir);
+// Workaround for Emotion 11
+// https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111
+const updateEmotionAliases = (config) => ({
+  ...config,
+  resolve: {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      '@emotion/core': path.join(modulesDir, '@emotion/react'),
+      '@emotion/styled': path.join(modulesDir, '@emotion/styled'),
+      '@emotion/styled-base': path.join(modulesDir, '@emotion/styled'),
+      'emotion-theming': path.join(modulesDir, '@emotion/react'),
+    },
+  },
+});
+
 module.exports = {
   stories: ['../assets/js/src/**/_stories/*.tsx'],
-  webpackFinal: (config) => ({
-    ...config,
-    resolve: {
-      ...config.resolve,
-      modules: ['node_modules', '../assets/js/src'],
-    },
-  }),
+  webpackFinal: (config) => {
+    config.resolve.modules = ['node_modules', '../assets/js/src'];
+    return updateEmotionAliases(config);
+  },
+  managerWebpack: updateEmotionAliases,
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',