@storybook/addon-themes 7.6.0 → 8.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +28 -11
- package/dist/manager.js +3 -2
- package/package.json +10 -9
package/dist/manager.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { addons, types, useParameter, useGlobals, useAddonState, useChannel } from '@storybook/manager-api';
|
|
2
2
|
import React, { useMemo, Fragment } from 'react';
|
|
3
3
|
import { styled } from '@storybook/theming';
|
|
4
|
-
import { WithTooltip, TooltipLinkList, IconButton
|
|
4
|
+
import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
|
|
5
|
+
import { PaintBrushIcon } from '@storybook/icons';
|
|
5
6
|
|
|
6
|
-
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",closeOnClick:!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(
|
|
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",closeOnClick:!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});});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-themes",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0-alpha.0",
|
|
4
4
|
"description": "Switch between multiple themes for you components in Storybook",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -56,14 +56,15 @@
|
|
|
56
56
|
"ts-dedent": "^2.0.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|
|
59
|
-
"@storybook/client-logger": "
|
|
60
|
-
"@storybook/components": "
|
|
61
|
-
"@storybook/core-events": "
|
|
62
|
-
"@storybook/
|
|
63
|
-
"@storybook/
|
|
64
|
-
"@storybook/
|
|
65
|
-
"@storybook/
|
|
66
|
-
"
|
|
59
|
+
"@storybook/client-logger": "8.0.0-alpha.0",
|
|
60
|
+
"@storybook/components": "8.0.0-alpha.0",
|
|
61
|
+
"@storybook/core-events": "8.0.0-alpha.0",
|
|
62
|
+
"@storybook/icons": "^1.2.1",
|
|
63
|
+
"@storybook/manager-api": "8.0.0-alpha.0",
|
|
64
|
+
"@storybook/preview-api": "8.0.0-alpha.0",
|
|
65
|
+
"@storybook/theming": "8.0.0-alpha.0",
|
|
66
|
+
"@storybook/types": "8.0.0-alpha.0",
|
|
67
|
+
"typescript": "^5.3.2"
|
|
67
68
|
},
|
|
68
69
|
"publishConfig": {
|
|
69
70
|
"access": "public"
|