From f9633b49eaa30b15987e7574b4040ea2121dbe45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Wed, 27 Nov 2019 11:04:20 +0000
Subject: [PATCH] feat(storybook): render both themes in storybook

---
 ui/.storybook/config.js                       | 37 +++++++++++-
 ui/src/Components/MainModal/index.stories.js  | 22 +++-----
 .../Components/SilenceModal/index.stories.js  | 56 ++++++++-----------
 3 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/ui/.storybook/config.js b/ui/.storybook/config.js
index 30486249a..6b5ae9036 100644
--- a/ui/.storybook/config.js
+++ b/ui/.storybook/config.js
@@ -10,6 +10,9 @@ import createPercyAddon from "@percy-io/percy-storybook";
 
 import { advanceTo } from "jest-date-mock";
 
+import { ThemeContext } from "Components/Theme";
+import { ReactSelectColors, ReactSelectStyles } from "Components/MultiSelect";
+
 const { percyAddon, serializeStories } = createPercyAddon();
 setAddon(percyAddon);
 
@@ -17,10 +20,42 @@ setAddon(percyAddon);
 advanceTo(new Date(Date.UTC(2018, 7, 14, 17, 36, 40)));
 
 addDecorator(story => {
-  document.body.classList.add("theme-light");
   document.body.style = "";
   return story();
 });
+addDecorator(story => {
+  return (
+    <div>
+      <div class="theme-light">
+        <ThemeContext.Provider
+          value={{
+            reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light)
+          }}
+        >
+          {story()}
+        </ThemeContext.Provider>
+      </div>
+      <div
+        style={{
+          height: "16px",
+          width: "100%",
+          backgroundColor: "#eee",
+          marginTop: "4px",
+          marginBottom: "4px"
+        }}
+      ></div>
+      <div class="theme-dark">
+        <ThemeContext.Provider
+          value={{
+            reactSelectStyles: ReactSelectStyles(ReactSelectColors.Dark)
+          }}
+        >
+          {story()}
+        </ThemeContext.Provider>
+      </div>
+    </div>
+  );
+});
 
 const req = require.context("../src/Components", true, /\.stories\.(js|tsx)$/);
 
diff --git a/ui/src/Components/MainModal/index.stories.js b/ui/src/Components/MainModal/index.stories.js
index 5a77ba83a..8ed56ab89 100644
--- a/ui/src/Components/MainModal/index.stories.js
+++ b/ui/src/Components/MainModal/index.stories.js
@@ -4,8 +4,6 @@ import { storiesOf } from "@storybook/react";
 
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
-import { ThemeContext } from "Components/Theme";
-import { ReactSelectColors, ReactSelectStyles } from "Components/MultiSelect";
 import { MainModalContent, TabNames } from "./MainModalContent";
 
 import "Styles/Percy.scss";
@@ -22,19 +20,13 @@ storiesOf("MainModal", module)
     const alertStore = new AlertStore([]);
     const settingsStore = new Settings();
     return (
-      <ThemeContext.Provider
-        value={{
-          reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light)
-        }}
-      >
-        <MainModalContent
-          alertStore={alertStore}
-          settingsStore={settingsStore}
-          onHide={() => {}}
-          isVisible={true}
-          expandAllOptions={true}
-        />
-      </ThemeContext.Provider>
+      <MainModalContent
+        alertStore={alertStore}
+        settingsStore={settingsStore}
+        onHide={() => {}}
+        isVisible={true}
+        expandAllOptions={true}
+      />
     );
   })
   .add("Help", () => {
diff --git a/ui/src/Components/SilenceModal/index.stories.js b/ui/src/Components/SilenceModal/index.stories.js
index 7ca0b5c8b..922e05e73 100644
--- a/ui/src/Components/SilenceModal/index.stories.js
+++ b/ui/src/Components/SilenceModal/index.stories.js
@@ -13,8 +13,6 @@ import {
   MatcherValueToObject,
   SilenceTabNames
 } from "Stores/SilenceFormStore";
-import { ThemeContext } from "Components/Theme";
-import { ReactSelectColors, ReactSelectStyles } from "Components/MultiSelect";
 import { DateTimeSelect, TabNames } from "./DateTimeSelect";
 import { SilenceModalContent } from "./SilenceModalContent";
 
@@ -79,38 +77,32 @@ storiesOf("SilenceModal", module)
 
     return (
       <React.Fragment>
-        <ThemeContext.Provider
-          value={{
-            reactSelectStyles: ReactSelectStyles(ReactSelectColors.Light)
-          }}
-        >
-          <Modal>
-            <SilenceModalContent
-              alertStore={alertStore}
+        <Modal>
+          <SilenceModalContent
+            alertStore={alertStore}
+            silenceFormStore={silenceFormStore}
+            settingsStore={settingsStore}
+            onHide={() => {}}
+            previewOpen={true}
+            onDeleteModalClose={() => {}}
+          />
+        </Modal>
+        <Modal>
+          <div className="pt-2">
+            <DateTimeSelect
               silenceFormStore={silenceFormStore}
-              settingsStore={settingsStore}
-              onHide={() => {}}
-              previewOpen={true}
-              onDeleteModalClose={() => {}}
+              openTab={TabNames.Start}
             />
-          </Modal>
-          <Modal>
-            <div className="pt-2">
-              <DateTimeSelect
-                silenceFormStore={silenceFormStore}
-                openTab={TabNames.Start}
-              />
-            </div>
-          </Modal>
-          <Modal>
-            <div className="pt-2">
-              <DateTimeSelect
-                silenceFormStore={silenceFormStore}
-                openTab={TabNames.End}
-              />
-            </div>
-          </Modal>
-        </ThemeContext.Provider>
+          </div>
+        </Modal>
+        <Modal>
+          <div className="pt-2">
+            <DateTimeSelect
+              silenceFormStore={silenceFormStore}
+              openTab={TabNames.End}
+            />
+          </div>
+        </Modal>
       </React.Fragment>
     );
   })