From c34345fc09598d8f33f83f1510e061b0591a6897 Mon Sep 17 00:00:00 2001
From: "mirlan.maksitaliev" <mirlan.maksitaliev@instatsport.com>
Date: Wed, 3 Jun 2020 18:57:32 +0600
Subject: [PATCH] chore(ott-36): storybook config update

---
 .storybook/main.js           | 14 +++++------
 .storybook/preview-head.html | 47 ++++++++++++++++++++++++++++++++++++
 .storybook/preview.js        |  7 ++++++
 package.json                 |  1 +
 4 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 .storybook/preview-head.html
 create mode 100644 .storybook/preview.js

diff --git a/.storybook/main.js b/.storybook/main.js
index ab7f9c40..8ef6cf34 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,12 +3,10 @@ module.exports = {
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-links',
-    '@storybook/preset-create-react-app',
-    {
-      name: "@storybook/addon-docs",
-      options: {
-        configureJSX: true,
-      },
-    },
+    '@storybook/addon-docs',
+    'storybook-addon-styled-component-theme/dist/register',
   ],
-};
+  presets: [
+    '@storybook/preset-create-react-app',
+  ]
+}
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
new file mode 100644
index 00000000..ae1b4941
--- /dev/null
+++ b/.storybook/preview-head.html
@@ -0,0 +1,47 @@
+<link
+href='https://fonts.googleapis.com/css?family=PT+Sans:400,700&amp;amp;subset=cyrillic,latin'
+rel='stylesheet' type='text/css'/>
+<style>
+  *, *:before, *:after {
+    box-sizing: border-box;
+  }
+
+  body {
+    min-height: 100vh;
+    margin: 20;
+    padding: 20;
+    font-family: Montserrat, Tahoma, sans-serif;
+    font-size: 12px;
+    line-height: 12px;
+    color: #000;
+  }
+
+  h1, h2, h3, h4, h5, h6, p, ul, li {
+    margin: 0;
+    padding: 0;
+    font-size: 12px;
+    line-height: 12px;
+  }
+
+  ul, li {
+    list-style: none;
+  }
+
+  a {
+    text-decoration: none;
+    color: #000;
+  }
+
+  fieldset {
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  button, input, select, textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+</style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 00000000..dd25eb0c
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,7 @@
+import { addDecorator } from '@storybook/react'
+import { withThemesProvider } from 'storybook-addon-styled-component-theme'
+
+import { lightTheme, darkTheme } from '../src/features/Theme/config'
+
+const themes = [darkTheme, lightTheme]
+addDecorator(withThemesProvider(themes))
diff --git a/package.json b/package.json
index 4fdba62a..54a5925e 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "gzipper": "^3.7.0",
     "husky": "^4.2.5",
     "lint-staged": "^10.2.7",
+    "storybook-addon-styled-component-theme": "^1.3.0",
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.3"
   },