IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Enable sass theme change in Storybook

Browse Source
This commit is contained in:
Dominik Prokop
2019-03-21 16:06:55 +01:00
parent 56251ca546
commit 35f6039da7
3 changed files with 29 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/grafana-ui/.storybook/config.ts
View File

@@ -2,13 +2,25 @@ import { configure, addDecorator } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs'; import { withKnobs } from '@storybook/addon-knobs';
import { withTheme } from '../src/utils/storybook/withTheme'; 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 // 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(withKnobs);
addDecorator(withTheme); addDecorator(withTheme(handleThemeChange));
function loadStories() { function loadStories() {
req.keys().forEach(req); req.keys().forEach(req);

10
packages/grafana-ui/.storybook/webpack.config.js
View File

@@ -14,15 +14,15 @@ module.exports = (baseConfig, env, config) => {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
{ {
loader: 'style-loader', loader: 'style-loader/useable',
}, },
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
importLoaders: 2, importLoaders: 2,
url: false, // url: false,
sourceMap: false, // sourceMap: false,
minimize: false, // minimize: false,
}, },
}, },
{ {
@@ -35,7 +35,7 @@ module.exports = (baseConfig, env, config) => {
{ {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap: false sourceMap: false,
}, },
}, },
], ],

12
packages/grafana-ui/src/utils/storybook/withTheme.tsx
View File

@@ -5,7 +5,11 @@ import { select } from '@storybook/addon-knobs';
import { getTheme } from '../../themes/index'; import { getTheme } from '../../themes/index';
import { GrafanaThemeType } from '../../types'; 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( const themeKnob = select(
'Theme', 'Theme',
{ {
@@ -15,6 +19,8 @@ const ThemableStory: React.FunctionComponent<{}> = ({ children }) => {
GrafanaThemeType.Dark GrafanaThemeType.Dark
); );
handleSassThemeChange(themeKnob);
return <ThemeContext.Provider value={getTheme(themeKnob)}>{children}</ThemeContext.Provider>; 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>
);