From 2391491d59ecac4ae344a4520d0e7ef789abe308 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Thu, 9 Mar 2023 11:27:37 +0100
Subject: [PATCH] Fix storybook not having styles (#3304)

---
 src/storybook/Decorator.tsx     | 41 ++++++++++++++++++---------------
 src/storybook/webpack.config.js |  3 +++
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/storybook/Decorator.tsx b/src/storybook/Decorator.tsx
index 900c51172..bc7e5d58f 100644
--- a/src/storybook/Decorator.tsx
+++ b/src/storybook/Decorator.tsx
@@ -1,8 +1,11 @@
+import "@saleor/macaw-ui/next/style";
+
 import { ExternalAppProvider } from "@dashboard/apps/components/ExternalAppContext";
 import { Locale, RawLocaleProvider } from "@dashboard/components/Locale";
 import { FlagsServiceProvider } from "@dashboard/hooks/useFlags/flagsService";
 import { paletteOverrides, themeOverrides } from "@dashboard/themeOverrides";
-import { ThemeProvider } from "@saleor/macaw-ui";
+import { ThemeProvider as LegacyThemeProvider } from "@saleor/macaw-ui";
+import { ThemeProvider } from "@saleor/macaw-ui/next";
 import React from "react";
 import { IntlProvider } from "react-intl";
 import { BrowserRouter } from "react-router-dom";
@@ -24,26 +27,28 @@ export const Decorator = storyFn => (
       >
         <DateProvider value={+new Date("2018-08-07T14:30:44+00:00")}>
           <TimezoneProvider value="America/New_York">
-            <ThemeProvider
+            <LegacyThemeProvider
               overrides={themeOverrides}
               palettes={paletteOverrides}
             >
-              <BrowserRouter basename={getAppMountUri()}>
-                <ExternalAppProvider>
-                  <FlagsServiceProvider>
-                    <MessageManagerProvider>
-                      <div
-                        style={{
-                          padding: 24,
-                        }}
-                      >
-                        {storyFn()}
-                      </div>
-                    </MessageManagerProvider>
-                  </FlagsServiceProvider>
-                </ExternalAppProvider>
-              </BrowserRouter>
-            </ThemeProvider>
+              <ThemeProvider>
+                <BrowserRouter basename={getAppMountUri()}>
+                  <ExternalAppProvider>
+                    <FlagsServiceProvider>
+                      <MessageManagerProvider>
+                        <div
+                          style={{
+                            padding: 24,
+                          }}
+                        >
+                          {storyFn()}
+                        </div>
+                      </MessageManagerProvider>
+                    </FlagsServiceProvider>
+                  </ExternalAppProvider>
+                </BrowserRouter>
+              </ThemeProvider>
+            </LegacyThemeProvider>
           </TimezoneProvider>
         </DateProvider>
       </RawLocaleProvider>
diff --git a/src/storybook/webpack.config.js b/src/storybook/webpack.config.js
index cb65f3f71..aa7f04fa1 100644
--- a/src/storybook/webpack.config.js
+++ b/src/storybook/webpack.config.js
@@ -26,6 +26,9 @@ module.exports = ({ config }) => {
   // Resolve macaw ui's peer dependencies to our own node_modules
   // to make it work with npm link
   config.resolve.alias = {
+    "@saleor/macaw-ui/next/style": path.resolve(
+      "./node_modules/@saleor/macaw-ui/dist/style.css",
+    ),
     "@saleor/macaw-ui/next": path.resolve(
       "./node_modules/@saleor/macaw-ui/dist/macaw-ui.js",
     ),