52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
|
import './styles.css';
|
||
|
|
import { ThemeContext } from '@vegaprotocol/react-helpers';
|
||
|
|
import { useEffect, useState } from 'react';
|
||
|
|
|
||
|
|
export const parameters = {
|
||
|
|
actions: { argTypesRegex: '^on[A-Z].*' },
|
||
|
|
backgrounds: { disable: true },
|
||
|
|
themes: {
|
||
|
|
default: 'dark',
|
||
|
|
list: [
|
||
|
|
{ name: 'dark', class: ['dark', 'bg-black'], color: '#000' },
|
||
|
|
{ name: 'light', class: '', color: '#FFF' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
export const decorators = [
|
||
|
|
(Story, context) => {
|
||
|
|
// storybook-addon-themes doesnt seem to provide the current selected
|
||
|
|
// theme in context, we need to provid it in JS as some components
|
||
|
|
// rely on it for rendering
|
||
|
|
const [theme, setTheme] = useState(context.parameters.themes.default);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const observer = new MutationObserver((mutationList) => {
|
||
|
|
if (mutationList.length) {
|
||
|
|
const body = mutationList[0].target;
|
||
|
|
if (body.classList.contains('dark')) {
|
||
|
|
setTheme('dark');
|
||
|
|
} else {
|
||
|
|
setTheme('light');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
observer.observe(document.body, { attributes: true });
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
observer.disconnect();
|
||
|
|
};
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ width: '100%', height: 500 }}>
|
||
|
|
<ThemeContext.Provider value={theme}>
|
||
|
|
<Story />
|
||
|
|
</ThemeContext.Provider>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
];
|