Updated stories to use new theming

packages/grafana-ui/.storybook/config.ts

@@ -1,10 +1,15 @@
-import { configure } from '@storybook/react';
+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';
 
 // automatically import all files ending in *.stories.tsx
 const req = require.context('../src/components', true, /.story.tsx$/);
 
+addDecorator(withKnobs);
+addDecorator(withTheme);
+
 function loadStories() {
   req.keys().forEach(req);
 }

packages/grafana-ui/.storybook/webpack.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
+const getThemeVariable = require('../../../scripts/webpack/getThemeVariable');
 
 module.exports = (baseConfig, env, config) => {
-
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     use: [
@@ -33,7 +33,15 @@ module.exports = (baseConfig, env, config) => {
           config: { path: __dirname + '../../../../scripts/webpack/postcss.config.js' },
         },
       },
-      { loader: 'sass-loader', options: { sourceMap: false } },
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: false,
+          functions: {
+            'getThemeVariable($themeVar, $themeName: dark)': getThemeVariable,
+          },
+        },
+      },
     ],
   });
 
@@ -52,5 +60,9 @@ module.exports = (baseConfig, env, config) => {
   });
 
   config.resolve.extensions.push('.ts', '.tsx');
+
+  // Remove pure js loading rules as Storybook's Babel config is causing problems when mixing ES6 and CJS
+  // More about the problem we encounter: https://github.com/webpack/webpack/issues/4039
+  config.module.rules = config.module.rules.filter(rule => rule.test.toString() !== /\.(mjs|jsx?)$/.toString());
   return config;
 };

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -1,46 +1,43 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs, boolean } from '@storybook/addon-knobs';
+import {  boolean } from '@storybook/addon-knobs';
 import { SeriesColorPicker, ColorPicker } from './ColorPicker';
 import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { getThemeKnob } from '../../utils/storybook/themeKnob';
+import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
 const getColorPickerKnobs = () => {
   return {
-    selectedTheme: getThemeKnob(),
     enableNamedColors: boolean('Enable named colors', false),
   };
 };
 
 const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module);
 
-ColorPickerStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+ColorPickerStories.addDecorator(withCenteredStory);
 
 ColorPickerStories.add('default', () => {
-  const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
+  const { enableNamedColors } = getColorPickerKnobs();
+
   return (
     <UseState initialState="#00ff00">
       {(selectedColor, updateSelectedColor) => {
-        return (
-          <ColorPicker
-            enableNamedColors={enableNamedColors}
-            color={selectedColor}
-            onChange={color => {
-              action('Color changed')(color);
-              updateSelectedColor(color);
-            }}
-            theme={selectedTheme || undefined}
-          />
-        );
+        return renderComponentWithTheme(ColorPicker, {
+          enableNamedColors,
+          color: selectedColor,
+          onChange: (color: any) => {
+            action('Color changed')(color);
+            updateSelectedColor(color);
+          },
+        });
       }}
     </UseState>
   );
 });
 
 ColorPickerStories.add('Series color picker', () => {
-  const { selectedTheme, enableNamedColors } = getColorPickerKnobs();
+  const { enableNamedColors } = getColorPickerKnobs();
 
   return (
     <UseState initialState="#00ff00">
@@ -52,7 +49,6 @@ ColorPickerStories.add('Series color picker', () => {
             onToggleAxis={() => {}}
             color={selectedColor}
             onChange={color => updateSelectedColor(color)}
-            theme={selectedTheme || undefined}
           >
             <div style={{ color: selectedColor, cursor: 'pointer' }}>Open color picker</div>
           </SeriesColorPicker>

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx

@@ -1,40 +1,27 @@
-import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { ColorPickerPopover } from './ColorPickerPopover';
-import { withKnobs } from '@storybook/addon-knobs';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { getThemeKnob } from '../../utils/storybook/themeKnob';
 import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
-
+import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 const ColorPickerPopoverStories = storiesOf('UI/ColorPicker/Popovers', module);
 
-ColorPickerPopoverStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+ColorPickerPopoverStories.addDecorator(withCenteredStory);
 
 ColorPickerPopoverStories.add('default', () => {
-  const selectedTheme = getThemeKnob();
-
-  return (
-    <ColorPickerPopover
-      color="#BC67E6"
-      onChange={color => {
-        console.log(color);
-      }}
-      theme={selectedTheme || undefined}
-    />
-  );
+  return renderComponentWithTheme(ColorPickerPopover, {
+    color: '#BC67E6',
+    onChange: (color: any) => {
+      console.log(color);
+    },
+  });
 });
 
 ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => {
-  const selectedTheme = getThemeKnob();
-
-  return (
-    <SeriesColorPickerPopover
-      color="#BC67E6"
-      onChange={color => {
-        console.log(color);
-      }}
-      theme={selectedTheme || undefined}
-    />
-  );
+  return renderComponentWithTheme(SeriesColorPickerPopover, {
+    color: '#BC67E6',
+    onChange: (color: any) => {
+      console.log(color);
+    },
+  });
 });

packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.story.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { NamedColorsPalette } from './NamedColorsPalette';
 import { getColorName, getColorDefinitionByName } from '../../utils/namedColorsPalette';
-import { withKnobs, select } from '@storybook/addon-knobs';
+import { select } from '@storybook/addon-knobs';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 import { UseState } from '../../utils/storybook/UseState';
 
 const BasicGreen = getColorDefinitionByName('green');
@@ -12,7 +13,7 @@ const LightBlue = getColorDefinitionByName('light-blue');
 
 const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module);
 
-NamedColorsPaletteStories.addDecorator(withKnobs).addDecorator(withCenteredStory);
+NamedColorsPaletteStories.addDecorator(withCenteredStory);
 
 NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => {
   const selectedColor = select(
@@ -28,7 +29,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
   return (
     <UseState initialState={selectedColor}>
       {(selectedColor, updateSelectedColor) => {
-        return <NamedColorsPalette color={selectedColor} onChange={updateSelectedColor} />;
+        return renderComponentWithTheme(NamedColorsPalette, {
+          color: selectedColor,
+          onChange: updateSelectedColor,
+        });
       }}
     </UseState>
   );
@@ -45,7 +49,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
   return (
     <UseState initialState={selectedColor}>
       {(selectedColor, updateSelectedColor) => {
-        return <NamedColorsPalette color={getColorName(selectedColor)} onChange={updateSelectedColor} />;
+        return renderComponentWithTheme(NamedColorsPalette, {
+          color: getColorName(selectedColor),
+          onChange: updateSelectedColor,
+        });
       }}
     </UseState>
   );

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.story.tsx

@@ -1,22 +1,19 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
 import SpectrumPalette from './SpectrumPalette';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
-import { getThemeKnob } from '../../utils/storybook/themeKnob';
+import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
 
 const SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module);
 
-SpectrumPaletteStories.addDecorator(withCenteredStory).addDecorator(withKnobs);
+SpectrumPaletteStories.addDecorator(withCenteredStory);
 
 SpectrumPaletteStories.add('default', () => {
-  const selectedTheme = getThemeKnob();
-
   return (
     <UseState initialState="red">
       {(selectedColor, updateSelectedColor) => {
-        return <SpectrumPalette theme={selectedTheme} color={selectedColor} onChange={updateSelectedColor} />;
+        return renderComponentWithTheme(SpectrumPalette, { color: selectedColor, onChange: updateSelectedColor });
       }}
     </UseState>
   );

packages/grafana-ui/src/utils/storybook/withTheme.tsx

@@ -9,7 +9,6 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
   const themeKnob = select(
     'Theme',
     {
-      Default: GrafanaThemeType.Dark,
       Light: GrafanaThemeType.Light,
       Dark: GrafanaThemeType.Dark,
     },
@@ -24,6 +23,8 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
   );
 };
 
+// Temporary solution. When we update to Storybook V5 we will be able to pass data from decorator to story
+// https://github.com/storybooks/storybook/issues/340#issuecomment-456013702
 export const renderComponentWithTheme = (component: React.ComponentType<any>, props: any) => {
   return (
     <ThemeContext.Consumer>