Remove storybook-addon-styled-component-theme (#10574)

airbyte-webapp/.storybook/main.ts

@@ -7,7 +7,6 @@ module.exports = {
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/preset-create-react-app",
-    "storybook-addon-styled-component-theme/dist",
   ],
   webpackFinal: (config) => {
     config.resolve.modules.push(process.cwd() + "/node_modules");

airbyte-webapp/.storybook/preview.ts

@@ -1,9 +1,7 @@
 import { addDecorator } from "@storybook/react";
-import { withThemesProvider } from "storybook-addon-styled-component-theme";
 
-import WithProviders from "./withProvider";
-import { theme } from "../src/theme";
+import { withProviders } from "./withProvider";
 
-addDecorator(withThemesProvider([theme], WithProviders));
+addDecorator(withProviders);
 
 export const parameters = {};

airbyte-webapp/.storybook/withProvider.tsx

@@ -1,50 +1,32 @@
 import { MemoryRouter } from "react-router-dom";
 import * as React from "react";
 import { IntlProvider } from "react-intl";
-// import { createMemoryHistory } from "history";
 import { ThemeProvider } from "styled-components";
 
 // TODO: theme was not working correctly so imported directly
-import { theme, Theme } from "../src/theme";
+import { theme } from "../src/theme";
 import GlobalStyle from "../src/global-styles";
 import messages from "../src/locales/en.json";
 import { FeatureService } from "../src/hooks/services/Feature";
 import { ConfigServiceProvider, defaultConfig } from "../src/config";
 import { ServicesProvider } from "../src/core/servicesProvider";
 
-interface Props {
-  theme?: Theme;
-}
-
-interface Props {
-  children?: React.ReactNode;
-  theme?: Theme;
-}
-
-class WithProviders extends React.Component<Props> {
-  render() {
-    const { children } = this.props;
-
-    return (
-      <ServicesProvider>
-        <MemoryRouter>
-          <IntlProvider messages={messages} locale={"en"}>
-            <ThemeProvider theme={theme}>
-              <ConfigServiceProvider
-                defaultConfig={defaultConfig}
-                providers={[]}
-              >
-                <FeatureService>
-                  <GlobalStyle />
-                  {children}
-                </FeatureService>
-              </ConfigServiceProvider>
-            </ThemeProvider>
-          </IntlProvider>
-        </MemoryRouter>
-      </ServicesProvider>
-    );
-  }
-}
-
-export default WithProviders;
+export const withProviders = (getStory) => (
+  <ServicesProvider>
+    <MemoryRouter>
+      <IntlProvider messages={messages} locale={"en"}>
+        <ThemeProvider theme={theme}>
+          <ConfigServiceProvider
+            defaultConfig={defaultConfig}
+            providers={[]}
+          >
+            <FeatureService>
+              <GlobalStyle />
+              {getStory()}
+            </FeatureService>
+          </ConfigServiceProvider>
+        </ThemeProvider>
+      </IntlProvider>
+    </MemoryRouter>
+  </ServicesProvider>
+);