chore(ott-36): storybook config update

.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',
+  ]
+}

.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>

.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))

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"
   },