From 35f6039da7dedc5070bec9014a8a637851646567 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Thu, 21 Mar 2019 16:06:55 +0100
Subject: [PATCH] Enable sass theme change in Storybook

---
 packages/grafana-ui/.storybook/config.ts         | 16 ++++++++++++++--
 packages/grafana-ui/.storybook/webpack.config.js | 10 +++++-----
 .../grafana-ui/src/utils/storybook/withTheme.tsx | 12 ++++++++++--
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/.storybook/config.ts b/packages/grafana-ui/.storybook/config.ts
index 434e717bbab..be79771ad0a 100644
--- a/packages/grafana-ui/.storybook/config.ts
+++ b/packages/grafana-ui/.storybook/config.ts
@@ -2,13 +2,25 @@ import { configure, addDecorator } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withTheme } from '../src/utils/storybook/withTheme';
 
-import '../../../public/sass/grafana.light.scss';
+// @ts-ignore
+import lightTheme from '../../../public/sass/grafana.light.scss';
+// @ts-ignore
+import darkTheme from '../../../public/sass/grafana.dark.scss';
 
+const handleThemeChange = (theme: string) => {
+  if (theme !== 'light') {
+    lightTheme.unuse();
+    darkTheme.use();
+  } else {
+    darkTheme.unuse();
+    lightTheme.use();
+  }
+};
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../src/components', true, /.story.tsx$/);
 
 addDecorator(withKnobs);
-addDecorator(withTheme);
+addDecorator(withTheme(handleThemeChange));
 
 function loadStories() {
   req.keys().forEach(req);
diff --git a/packages/grafana-ui/.storybook/webpack.config.js b/packages/grafana-ui/.storybook/webpack.config.js
index 307a1142a7d..7ad11601973 100644
--- a/packages/grafana-ui/.storybook/webpack.config.js
+++ b/packages/grafana-ui/.storybook/webpack.config.js
@@ -14,15 +14,15 @@ module.exports = (baseConfig, env, config) => {
     test: /\.scss$/,
     use: [
       {
-        loader: 'style-loader',
+        loader: 'style-loader/useable',
       },
       {
         loader: 'css-loader',
         options: {
           importLoaders: 2,
-          url: false,
-          sourceMap: false,
-          minimize: false,
+          // url: false,
+          // sourceMap: false,
+          // minimize: false,
         },
       },
       {
@@ -35,7 +35,7 @@ module.exports = (baseConfig, env, config) => {
       {
         loader: 'sass-loader',
         options: {
-          sourceMap: false
+          sourceMap: false,
         },
       },
     ],
diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index dbe2c505069..cfa90f2ec84 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -5,7 +5,11 @@ import { select } from '@storybook/addon-knobs';
 import { getTheme } from '../../themes/index';
 import { GrafanaThemeType } from '../../types';
 
-const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
+type SassThemeChangeHandler = (theme: GrafanaThemeType) => void;
+const ThemableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
+  children,
+  handleSassThemeChange,
+}) => {
   const themeKnob = select(
     'Theme',
     {
@@ -15,6 +19,8 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
     GrafanaThemeType.Dark
   );
 
+  handleSassThemeChange(themeKnob);
+
   return <ThemeContext.Provider value={getTheme(themeKnob)}>{children}</ThemeContext.Provider>;
 };
 
@@ -33,4 +39,6 @@ export const renderComponentWithTheme = (component: React.ComponentType<any>, pr
   );
 };
 
-export const withTheme = (story: RenderFunction) => <ThemableStory>{story()}</ThemableStory>;
+export const withTheme = (handleSassThemeChange: SassThemeChangeHandler) => (story: RenderFunction) => (
+  <ThemableStory handleSassThemeChange={handleSassThemeChange}>{story()}</ThemableStory>
+);