Commit 7762d72a by Dominik Prokop

Updated stories to use new theming

parent 7eb2558f
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'; import '../../../public/sass/grafana.light.scss';
// automatically import all files ending in *.stories.tsx // automatically import all files ending in *.stories.tsx
const req = require.context('../src/components', true, /.story.tsx$/); const req = require.context('../src/components', true, /.story.tsx$/);
addDecorator(withKnobs);
addDecorator(withTheme);
function loadStories() { function loadStories() {
req.keys().forEach(req); req.keys().forEach(req);
} }
......
const path = require('path'); const path = require('path');
const getThemeVariable = require('../../../scripts/webpack/getThemeVariable');
module.exports = (baseConfig, env, config) => { module.exports = (baseConfig, env, config) => {
config.module.rules.push({ config.module.rules.push({
test: /\.(ts|tsx)$/, test: /\.(ts|tsx)$/,
use: [ use: [
...@@ -33,7 +33,15 @@ module.exports = (baseConfig, env, config) => { ...@@ -33,7 +33,15 @@ module.exports = (baseConfig, env, config) => {
config: { path: __dirname + '../../../../scripts/webpack/postcss.config.js' }, 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) => { ...@@ -52,5 +60,9 @@ module.exports = (baseConfig, env, config) => {
}); });
config.resolve.extensions.push('.ts', '.tsx'); 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; return config;
}; };
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/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 { SeriesColorPicker, ColorPicker } from './ColorPicker';
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState'; import { UseState } from '../../utils/storybook/UseState';
import { getThemeKnob } from '../../utils/storybook/themeKnob'; import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
const getColorPickerKnobs = () => { const getColorPickerKnobs = () => {
return { return {
selectedTheme: getThemeKnob(),
enableNamedColors: boolean('Enable named colors', false), enableNamedColors: boolean('Enable named colors', false),
}; };
}; };
const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module); const ColorPickerStories = storiesOf('UI/ColorPicker/Pickers', module);
ColorPickerStories.addDecorator(withCenteredStory).addDecorator(withKnobs); ColorPickerStories.addDecorator(withCenteredStory);
ColorPickerStories.add('default', () => { ColorPickerStories.add('default', () => {
const { selectedTheme, enableNamedColors } = getColorPickerKnobs(); const { enableNamedColors } = getColorPickerKnobs();
return ( return (
<UseState initialState="#00ff00"> <UseState initialState="#00ff00">
{(selectedColor, updateSelectedColor) => { {(selectedColor, updateSelectedColor) => {
return ( return renderComponentWithTheme(ColorPicker, {
<ColorPicker enableNamedColors,
enableNamedColors={enableNamedColors} color: selectedColor,
color={selectedColor} onChange: (color: any) => {
onChange={color => {
action('Color changed')(color); action('Color changed')(color);
updateSelectedColor(color); updateSelectedColor(color);
}} },
theme={selectedTheme || undefined} });
/>
);
}} }}
</UseState> </UseState>
); );
}); });
ColorPickerStories.add('Series color picker', () => { ColorPickerStories.add('Series color picker', () => {
const { selectedTheme, enableNamedColors } = getColorPickerKnobs(); const { enableNamedColors } = getColorPickerKnobs();
return ( return (
<UseState initialState="#00ff00"> <UseState initialState="#00ff00">
...@@ -52,7 +49,6 @@ ColorPickerStories.add('Series color picker', () => { ...@@ -52,7 +49,6 @@ ColorPickerStories.add('Series color picker', () => {
onToggleAxis={() => {}} onToggleAxis={() => {}}
color={selectedColor} color={selectedColor}
onChange={color => updateSelectedColor(color)} onChange={color => updateSelectedColor(color)}
theme={selectedTheme || undefined}
> >
<div style={{ color: selectedColor, cursor: 'pointer' }}>Open color picker</div> <div style={{ color: selectedColor, cursor: 'pointer' }}>Open color picker</div>
</SeriesColorPicker> </SeriesColorPicker>
......
import React from 'react';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { ColorPickerPopover } from './ColorPickerPopover'; import { ColorPickerPopover } from './ColorPickerPopover';
import { withKnobs } from '@storybook/addon-knobs';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { getThemeKnob } from '../../utils/storybook/themeKnob';
import { SeriesColorPickerPopover } from './SeriesColorPickerPopover'; import { SeriesColorPickerPopover } from './SeriesColorPickerPopover';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
const ColorPickerPopoverStories = storiesOf('UI/ColorPicker/Popovers', module); const ColorPickerPopoverStories = storiesOf('UI/ColorPicker/Popovers', module);
ColorPickerPopoverStories.addDecorator(withCenteredStory).addDecorator(withKnobs); ColorPickerPopoverStories.addDecorator(withCenteredStory);
ColorPickerPopoverStories.add('default', () => { ColorPickerPopoverStories.add('default', () => {
const selectedTheme = getThemeKnob(); return renderComponentWithTheme(ColorPickerPopover, {
color: '#BC67E6',
return ( onChange: (color: any) => {
<ColorPickerPopover
color="#BC67E6"
onChange={color => {
console.log(color); console.log(color);
}} },
theme={selectedTheme || undefined} });
/>
);
}); });
ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => { ColorPickerPopoverStories.add('SeriesColorPickerPopover', () => {
const selectedTheme = getThemeKnob(); return renderComponentWithTheme(SeriesColorPickerPopover, {
color: '#BC67E6',
return ( onChange: (color: any) => {
<SeriesColorPickerPopover
color="#BC67E6"
onChange={color => {
console.log(color); console.log(color);
}} },
theme={selectedTheme || undefined} });
/>
);
}); });
...@@ -2,8 +2,9 @@ import React from 'react'; ...@@ -2,8 +2,9 @@ import React from 'react';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { NamedColorsPalette } from './NamedColorsPalette'; import { NamedColorsPalette } from './NamedColorsPalette';
import { getColorName, getColorDefinitionByName } from '../../utils/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 { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
import { UseState } from '../../utils/storybook/UseState'; import { UseState } from '../../utils/storybook/UseState';
const BasicGreen = getColorDefinitionByName('green'); const BasicGreen = getColorDefinitionByName('green');
...@@ -12,7 +13,7 @@ const LightBlue = getColorDefinitionByName('light-blue'); ...@@ -12,7 +13,7 @@ const LightBlue = getColorDefinitionByName('light-blue');
const NamedColorsPaletteStories = storiesOf('UI/ColorPicker/Palettes/NamedColorsPalette', module); 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', () => { NamedColorsPaletteStories.add('Named colors swatch - support for named colors', () => {
const selectedColor = select( const selectedColor = select(
...@@ -28,7 +29,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors', ...@@ -28,7 +29,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
return ( return (
<UseState initialState={selectedColor}> <UseState initialState={selectedColor}>
{(selectedColor, updateSelectedColor) => { {(selectedColor, updateSelectedColor) => {
return <NamedColorsPalette color={selectedColor} onChange={updateSelectedColor} />; return renderComponentWithTheme(NamedColorsPalette, {
color: selectedColor,
onChange: updateSelectedColor,
});
}} }}
</UseState> </UseState>
); );
...@@ -45,7 +49,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors', ...@@ -45,7 +49,10 @@ NamedColorsPaletteStories.add('Named colors swatch - support for named colors',
return ( return (
<UseState initialState={selectedColor}> <UseState initialState={selectedColor}>
{(selectedColor, updateSelectedColor) => { {(selectedColor, updateSelectedColor) => {
return <NamedColorsPalette color={getColorName(selectedColor)} onChange={updateSelectedColor} />; return renderComponentWithTheme(NamedColorsPalette, {
color: getColorName(selectedColor),
onChange: updateSelectedColor,
});
}} }}
</UseState> </UseState>
); );
......
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react'; import { storiesOf } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import SpectrumPalette from './SpectrumPalette'; import SpectrumPalette from './SpectrumPalette';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { UseState } from '../../utils/storybook/UseState'; 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); const SpectrumPaletteStories = storiesOf('UI/ColorPicker/Palettes/SpectrumPalette', module);
SpectrumPaletteStories.addDecorator(withCenteredStory).addDecorator(withKnobs); SpectrumPaletteStories.addDecorator(withCenteredStory);
SpectrumPaletteStories.add('default', () => { SpectrumPaletteStories.add('default', () => {
const selectedTheme = getThemeKnob();
return ( return (
<UseState initialState="red"> <UseState initialState="red">
{(selectedColor, updateSelectedColor) => { {(selectedColor, updateSelectedColor) => {
return <SpectrumPalette theme={selectedTheme} color={selectedColor} onChange={updateSelectedColor} />; return renderComponentWithTheme(SpectrumPalette, { color: selectedColor, onChange: updateSelectedColor });
}} }}
</UseState> </UseState>
); );
......
...@@ -9,7 +9,6 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => { ...@@ -9,7 +9,6 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
const themeKnob = select( const themeKnob = select(
'Theme', 'Theme',
{ {
Default: GrafanaThemeType.Dark,
Light: GrafanaThemeType.Light, Light: GrafanaThemeType.Light,
Dark: GrafanaThemeType.Dark, Dark: GrafanaThemeType.Dark,
}, },
...@@ -24,6 +23,8 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => { ...@@ -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) => { export const renderComponentWithTheme = (component: React.ComponentType<any>, props: any) => {
return ( return (
<ThemeContext.Consumer> <ThemeContext.Consumer>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment