@storybook/addon-themes 8.0.0-beta.5 → 8.0.0-beta.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (2) hide show
  1. package/dist/manager.js +2 -2
  2. package/package.json +8 -8
package/dist/manager.js CHANGED
@@ -1,7 +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 } from '@storybook/components';
4
+ import { IconButton, WithTooltip, TooltipLinkList } 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,tabId})=>!!(viewMode&&viewMode.match(/^(story|docs)$/))&&!tabId,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})),hasMultipleThemes=themesList=>themesList.length>1,hasTwoThemes=themesList=>themesList.length===2,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]);if(hasTwoThemes(themesList)){let currentTheme=selected||themeDefault,alternateTheme=themesList.find(theme=>theme!==currentTheme);return React.createElement(IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme",onClick:()=>{updateGlobals({theme:alternateTheme});}},React.createElement(PaintBrushIcon,null),label&&React.createElement(IconButtonLabel,null,label))}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-beta.5",
3
+ "version": "8.0.0-beta.6",
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-beta.5",
60
- "@storybook/components": "8.0.0-beta.5",
61
- "@storybook/core-events": "8.0.0-beta.5",
59
+ "@storybook/client-logger": "8.0.0-beta.6",
60
+ "@storybook/components": "8.0.0-beta.6",
61
+ "@storybook/core-events": "8.0.0-beta.6",
62
62
  "@storybook/icons": "^1.2.5",
63
- "@storybook/manager-api": "8.0.0-beta.5",
64
- "@storybook/preview-api": "8.0.0-beta.5",
65
- "@storybook/theming": "8.0.0-beta.5",
66
- "@storybook/types": "8.0.0-beta.5",
63
+ "@storybook/manager-api": "8.0.0-beta.6",
64
+ "@storybook/preview-api": "8.0.0-beta.6",
65
+ "@storybook/theming": "8.0.0-beta.6",
66
+ "@storybook/types": "8.0.0-beta.6",
67
67
  "typescript": "^5.3.2"
68
68
  },
69
69
  "publishConfig": {