storybook-addon-theme-changer
Version:
A Storybook addon for switching different themes (ex. daisyUI etc.)
9 lines (8 loc) • 1.53 kB
JavaScript
import { useGlobals, addons, types } from '@storybook/manager-api';
import * as n from 'react';
import { memo } from 'react';
import { WithTooltip, TooltipLinkList, TooltipMessage, IconButton } from '@storybook/components';
import { ControlsIcon } from '@storybook/icons';
var s="storybook/storybook-addon-theme-changer",a=`${s}/tool`;var l=e=>{let i=["light","dark"],o="data-theme",t,r;return Array.isArray(e)&&e.length>0?(t=e,r="data-theme"):typeof e=="object"?("themes"in e&&Array.isArray(e.themes)&&e.themes.length>0&&(t=e.themes),"method"in e?e.method.toUpperCase()==="data-theme".toUpperCase()?r="data-theme":e.method.toUpperCase()==="ChakraUI".toUpperCase()?(r="ChakraUI",t=i):r=o:r=o):(t=void 0,r=void 0),{themes:t,method:r}};var k=({themes:e,updateGlobals:i})=>{if(e)return e.map((o,t)=>({id:t.toString(),title:o.toString(),onClick:()=>i({theme:o})}))},m=memo(function(){let[{themes:i},o]=useGlobals(),{themes:t}=l(i);return n.createElement(WithTooltip,{key:a,placement:"top",trigger:"click",tooltip:t?n.createElement(TooltipLinkList,{links:k({themes:t,updateGlobals:o})}):n.createElement(TooltipMessage,{title:"Error: Global(themes) not found",desc:"Please refer the doc and set themes following the instructions."})},n.createElement(IconButton,{key:a,title:"Select theme"},n.createElement(ControlsIcon,null)))});addons.register(s,()=>{addons.add(a,{type:types.TOOL,title:"Storybook Addon Theme Changer",match:({viewMode:e})=>e==="story",render:m});});
//# sourceMappingURL=out.js.map
//# sourceMappingURL=manager.js.map