b94abbd6b3
We want to be able to visualize easily themes directly inside Storybook. This was not a trivial task as there is no centralized logic to handle Doc / Stories / Manager at the same time.
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
import { addons, types, useStorybookApi } from '@storybook/manager-api';
|
|
import { getThemeFromGlobals, themes } from './themes';
|
|
import React, { useEffect } from 'react';
|
|
import { useGlobals } from '@storybook/api';
|
|
|
|
addons.setConfig({ theme: themes.default });
|
|
|
|
/**
|
|
* This add-on is just here to apply the theme to the Storybook manager ( the top-most frame
|
|
* containing sidebar, toolbar, etc ) when the theme is switched.
|
|
*
|
|
* The reason why we needed to add this add-on is that add-ons are the only place from where you can
|
|
* dynamically change the current theme of the manager.
|
|
*/
|
|
addons.register('theme-synchronizer', () => {
|
|
addons.add('theme-synchronizer/main', {
|
|
title: 'Theme synchronizer',
|
|
//👇 Sets the type of UI element in Storybook
|
|
type: types.TOOL,
|
|
//👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
|
|
match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
|
|
render: ({ active }) => {
|
|
const api = useStorybookApi();
|
|
const [globals, updateGlobals] = useGlobals();
|
|
const theme = getThemeFromGlobals(globals);
|
|
useEffect(() => {
|
|
api.setOptions({
|
|
theme: themes[theme]
|
|
})
|
|
}, [theme]);
|
|
return null;
|
|
},
|
|
});
|
|
});
|