Fix storybook

.storybook/main.js

@@ -4,9 +4,11 @@ const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
 module.exports = {
   stories: ["../src/@next/**/stories.tsx"],
-  addons: [{
-    name: '@storybook/addon-essentials',
-  }],
+  addons: [
+    {
+      name: "@storybook/addon-essentials",
+    },
+  ],
 
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({
@@ -50,9 +52,9 @@ module.exports = {
       new ForkTsCheckerWebpackPlugin({
         typescript: true,
         eslint: {
-          files: './src/**/*.{ts,tsx}', 
-          exclude: "node_modules"
-        }
+          files: "./src/**/*.{ts,tsx}",
+          exclude: "node_modules",
+        },
       })
     );
 

.storybook/preview.js

@@ -1,16 +1,15 @@
 import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { withNextRouter } from "storybook-addon-next-router";
 
 import { OutLineDecorator } from "./OutlineDecorator";
 
 export const parameters = {
   name: "Saleor Storefront",
   url: "https://github.com/mirumee/saleor-storefront",
   goFullScreen: false,
-  sidebarAnimations: true, 
+  sidebarAnimations: true,
   controls: { expanded: true },
   viewport: { viewports: INITIAL_VIEWPORTS },
 };
 
-export const decorators = [
-  OutLineDecorator,
-];
+export const decorators = [OutLineDecorator, withNextRouter];

babel.config.js

@@ -20,6 +20,7 @@ module.exports = api => {
   const plugins = [
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-transform-typescript",
+    "babel-plugin-styled-components",
     "transform-class-properties",
     "@babel/transform-runtime",
     "@babel/plugin-proposal-optional-chaining",
@@ -41,6 +42,9 @@ module.exports = api => {
       },
     ]);
   }
+  if (isStorybook) {
+    plugins.push("babel-plugin-styled-components");
+  }
 
   plugins.push("macros");