Fixed Theme UI usage in Storybook

.storybook/main.js

@@ -1,23 +1,57 @@
 const path = require('path');
+const modulesDir = path.join(__dirname, '../node_modules');
+
+const updateEmotionAliases = (config) => ({
+  ...config,
+  resolve: {
+    ...config.resolve,
+    alias: {
+      ...config.resolve.alias,
+      '@components': path.resolve(__dirname, '../components'),
+      '@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 = {
   core: {
     builder: 'webpack5',
   },
-  stories: [
-    '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+  stories: ['../**/__stories__/*.stories.@(mdx|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-  webpackFinal: async (config, { configType }) => {
-    config.resolve = {
-      ...config.resolve,
-      alias: {
-        ...config.resolve.alias,
-        '@components': path.resolve(__dirname, '../components'),
-      },
+  // To get Theme UI working in Storybook. See https://github.com/system-ui/theme-ui/issues/1530#issuecomment-788945510
+  managerWebpack: updateEmotionAliases,
+  webpackFinal: updateEmotionAliases,
+  babel: (config) => {
+    const getEntryIndexByName = (type, name) => {
+      return config[type].findIndex((entry) => {
+        const entryName = Array.isArray(entry) ? entry[0] : entry;
+        return entryName.includes(name);
+      });
     };
 
+    // Replace reference to v10 of the Babel plugin to v11.
+    const emotionPluginIndex = getEntryIndexByName(
+      'plugins',
+      'babel-plugin-emotion',
+    );
+    config.plugins[emotionPluginIndex] = require.resolve(
+      '@emotion/babel-plugin',
+    );
+
+    // Storybook's Babel config is already configured to use the new JSX runtime.
+    // We just need to point it to Emotion's version.
+    // https://emotion.sh/docs/css-prop#babel-preset
+    const presetReactIndex = getEntryIndexByName(
+      'presets',
+      '@babel/preset-react',
+    );
+    // Pulling this from the @emotion/babel-preset package in project's .babelrc
+    config.presets[presetReactIndex][1].importSource = 'theme-ui';
+
     return config;
   },
 };

components/__stories__/Header.stories.tsx

@@ -0,0 +1,13 @@
+import { Meta } from '@storybook/react';
+import { ExampleHeader } from '@components/Header';
+
+const meta: Meta = {
+  title: 'Components/Example Header',
+  component: ExampleHeader,
+  argTypes: {},
+};
+export default meta;
+
+export const Default: React.VFC = () => {
+  return <ExampleHeader />;
+};

package.json

@@ -31,6 +31,7 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@metamask/providers": "^8.1.1",
+    "@emotion/styled": "^11.3.0",
     "@storybook/addon-actions": "^6.3.10",
     "@storybook/addon-essentials": "^6.3.10",
     "@storybook/addon-links": "^6.3.10",

yarn.lock

@@ -1324,7 +1324,7 @@
     "@emotion/styled-base" "^10.0.27"
     babel-plugin-emotion "^10.0.27"
 
-"@emotion/styled@^11.0.0":
+"@emotion/styled@^11.0.0", "@emotion/styled@^11.3.0":
   version "11.3.0"
   resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz"
   integrity sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==