@storybook/addon-themes 8.0.0-alpha.8 → 8.0.0-beta.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +6 -15
- package/dist/manager.js +1 -1
- package/package.json +9 -9
package/dist/manager.js
CHANGED
|
@@ -4,4 +4,4 @@ import { styled } from '@storybook/theming';
|
|
|
4
4
|
import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
|
|
5
5
|
import { PaintBrushIcon } from '@storybook/icons';
|
|
6
6
|
|
|
7
|
-
var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`;var THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=useGlobals(),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let label=useMemo(()=>{if(themeOverride)return React.createElement(React.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&React.createElement(React.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label)))):null};addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY});});
|
|
7
|
+
var PARAM_KEY="themes",ADDON_ID=`storybook/${PARAM_KEY}}`;var THEME_SWITCHER_ID=`${ADDON_ID}/theme-switcher`,DEFAULT_ADDON_STATE={themesList:[],themeDefault:void 0},DEFAULT_THEME_PARAMETERS={},THEMING_EVENTS={REGISTER_THEMES:`${ADDON_ID}/REGISTER_THEMES`};var IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=useParameter(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=useGlobals(),[{themesList,themeDefault},updateState]=useAddonState(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);useChannel({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}));}});let label=useMemo(()=>{if(themeOverride)return React.createElement(React.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&React.createElement(React.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",trigger:"click",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide();}}))})},React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label)))):null};addons.register(ADDON_ID,()=>{addons.add(THEME_SWITCHER_ID,{title:"Themes",type:types.TOOL,match:({viewMode,tabId})=>!!(viewMode&&viewMode.match(/^(story|docs)$/))&&!tabId,render:ThemeSwitcher,paramKey:PARAM_KEY});});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-themes",
|
|
3
|
-
"version": "8.0.0-
|
|
3
|
+
"version": "8.0.0-beta.0",
|
|
4
4
|
"description": "Switch between multiple themes for you components in Storybook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -56,14 +56,14 @@
|
|
|
56
56
|
"ts-dedent": "^2.0.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@storybook/client-logger": "8.0.0-
|
|
60
|
-
"@storybook/components": "8.0.0-
|
|
61
|
-
"@storybook/core-events": "8.0.0-
|
|
62
|
-
"@storybook/icons": "^1.2.
|
|
63
|
-
"@storybook/manager-api": "8.0.0-
|
|
64
|
-
"@storybook/preview-api": "8.0.0-
|
|
65
|
-
"@storybook/theming": "8.0.0-
|
|
66
|
-
"@storybook/types": "8.0.0-
|
|
59
|
+
"@storybook/client-logger": "8.0.0-beta.0",
|
|
60
|
+
"@storybook/components": "8.0.0-beta.0",
|
|
61
|
+
"@storybook/core-events": "8.0.0-beta.0",
|
|
62
|
+
"@storybook/icons": "^1.2.3",
|
|
63
|
+
"@storybook/manager-api": "8.0.0-beta.0",
|
|
64
|
+
"@storybook/preview-api": "8.0.0-beta.0",
|
|
65
|
+
"@storybook/theming": "8.0.0-beta.0",
|
|
66
|
+
"@storybook/types": "8.0.0-beta.0",
|
|
67
67
|
"typescript": "^5.3.2"
|
|
68
68
|
},
|
|
69
69
|
"publishConfig": {
|