fix storybook when using emotion 11 styled()

.storybook/main.js

@@ -1,7 +1,36 @@
+const path = require('path');
+const fs = require('fs');
+
+// Work-around for using emotion 11 with Storybook
+function getPackageDir(filepath) {
+  let currDir = path.dirname(require.resolve(filepath));
+  while (true) {
+    if (fs.existsSync(path.join(currDir, 'package.json'))) {
+      return currDir;
+    }
+    const { dir, root } = path.parse(currDir);
+    if (dir === root) {
+      throw new Error(
+        `Could not find package.json in the parent directories starting from ${filepath}.`
+      );
+    }
+    currDir = dir;
+  }
+}
+
 module.exports = {
   stories: [
     '../stories/**/*.stories.mdx',
     '../stories/**/*.stories.@(js|jsx|ts|tsx)',
   ],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  // Work-around for using emotion 11 with Storybook
+  webpackFinal: async (config) => {
+    config.resolve.alias = {
+      '@emotion/core': getPackageDir('@emotion/react'),
+      '@emotion/styled': getPackageDir('@emotion/styled'),
+      'emotion-theming': getPackageDir('@emotion/react'),
+    };
+    return config;
+  },
 };