storybook previews to use same CSS/fonts as the rest of app

Author: tomashq

.storybook/main.js

@@ -1,11 +1,13 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app"
-  ]
-}
+    "stories": [
+        "../src/**/*.stories.mdx",
+        "../src/**/*.stories.@(js|jsx|ts|tsx)"
+    ],
+    "addons": [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/preset-create-react-app",
+        "storybook-addon-material-ui"
+    ]
+}
+

.storybook/preview-head.html

@@ -0,0 +1,15 @@
+<title>BLAH BLAH</title>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,700&display=swap" />
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+<link
+        rel="stylesheet"
+        href="https://unpkg.com/[email protected]/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin=""
+/>
+<script
+        src="https://unpkg.com/[email protected]/dist/leaflet.js"
+        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+        crossorigin=""
+></script>

.storybook/preview.js

@@ -1,4 +1,18 @@
+import React from 'react';
+
+import {ThemeProvider} from '@material-ui/core/styles'
+import {roomsTheme} from '../src/utils/themes/index'
+
+import '../src/index.css'
+
+export const decorators = [
+    (story) => (
+        <ThemeProvider theme={roomsTheme}>
+            {story()}
+        </ThemeProvider>
+    ),
+];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
+    actions: {argTypesRegex: "^on[A-Z].*"},
+}

src/utils/themes/index.js

@@ -1,3 +1,6 @@
+import {createMuiTheme} from "@material-ui/core/styles";
+import {baseMuiThemeObj} from "./base";
+
 export {
   baseMuiThemeObj,
 } from './base'
@@ -9,3 +12,5 @@ export {
 export {
   dropDownThemeObj,
 } from './drop_down'
+
+export const roomsTheme = createMuiTheme(baseMuiThemeObj)