Merge branch '2.0/fix-storybook' into develop

# Conflicts:
#	packages/extension/.storybook/main.js

packages/extension/.storybook/main.js

@@ -1,3 +1,5 @@
+const { ProvidePlugin } = require("webpack");
+
 module.exports = {
   stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
@@ -9,4 +11,29 @@ module.exports = {
   core: {
     builder: "@storybook/builder-webpack5",
   },
+  webpackFinal: async (config) => {
+    config.resolve.fallback = {
+      os: require.resolve("os-browserify/browser"),
+      buffer: require.resolve("buffer/"),
+      http: require.resolve("stream-http"),
+      https: require.resolve("https-browserify"),
+      crypto: require.resolve("crypto-browserify"),
+      stream: require.resolve("stream-browserify"),
+      process: require.resolve("process/browser"),
+    };
+
+    config.module.rules.push({
+      test: /\.tsx?$/,
+      loader: "ts-loader",
+    });
+
+    config.plugins.push(
+      new ProvidePlugin({
+        process: "process/browser",
+        Buffer: ["buffer", "Buffer"],
+      })
+    );
+
+    return config;
+  },
 };

packages/extension/.storybook/preview.js

@@ -1,11 +1,13 @@
 import { GlobalStyle } from "../src/styles";
+import { ThemeProvider } from "styled-components";
+import React from "react";
 
 export const decorators = [
   (Story) => (
-    <>
+    <ThemeProvider theme={{ mode: "dark" }}>
       <GlobalStyle />
       <Story />
-    </>
+    </ThemeProvider>
   ),
 ];