@storybook/addon-themes 7.2.2 → 7.3.0-alpha.0

package/dist/manager.js

@@ -1 +1 @@
-"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_manager_api2=require("@storybook/manager-api");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 import_react=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_theming=require("@storybook/theming"),import_components=require("@storybook/components");var IconButtonLabel=import_theming.styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=(0,import_manager_api.useGlobals)(),[{themesList,themeDefault},updateState]=(0,import_manager_api.useAddonState)(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);(0,import_manager_api.useChannel)({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}))}});let label=(0,import_react.useMemo)(()=>{if(themeOverride)return import_react.default.createElement(import_react.default.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&import_react.default.createElement(import_react.default.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide()}}))})},import_react.default.createElement(import_components.IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},import_react.default.createElement(import_components.Icons,{icon:"paintbrush"}),label&&import_react.default.createElement(IconButtonLabel,null,label)))):null};import_manager_api2.addons.register(ADDON_ID,()=>{import_manager_api2.addons.add(THEME_SWITCHER_ID,{title:"Themes",type:import_manager_api2.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY})});
+"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_manager_api2=require("@storybook/manager-api");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 import_react=__toESM(require("react")),import_manager_api=require("@storybook/manager-api"),import_theming=require("@storybook/theming"),import_components=require("@storybook/components"),import_experimental=require("@storybook/components/experimental");var IconButtonLabel=import_theming.styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),hasMultipleThemes=themesList=>themesList.length>1,ThemeSwitcher=()=>{let{themeOverride}=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_THEME_PARAMETERS),[{theme:selected},updateGlobals]=(0,import_manager_api.useGlobals)(),[{themesList,themeDefault},updateState]=(0,import_manager_api.useAddonState)(THEME_SWITCHER_ID,DEFAULT_ADDON_STATE);(0,import_manager_api.useChannel)({[THEMING_EVENTS.REGISTER_THEMES]:({themes,defaultTheme})=>{updateState(state=>({...state,themesList:themes,themeDefault:defaultTheme}))}});let label=(0,import_react.useMemo)(()=>{if(themeOverride)return import_react.default.createElement(import_react.default.Fragment,null,"Story override");let themeName=selected||themeDefault;return themeName&&import_react.default.createElement(import_react.default.Fragment,null,`${themeName} theme`)},[themeOverride,themeDefault,selected]);return hasMultipleThemes(themesList)?import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:themesList.map(theme=>({id:theme,title:theme,active:selected===theme,onClick:()=>{updateGlobals({theme}),onHide()}}))})},import_react.default.createElement(import_components.IconButton,{key:THEME_SWITCHER_ID,active:!themeOverride,title:"Theme"},import_react.default.createElement(import_experimental.Icon.PaintBrush,null),label&&import_react.default.createElement(IconButtonLabel,null,label)))):null};import_manager_api2.addons.register(ADDON_ID,()=>{import_manager_api2.addons.add(THEME_SWITCHER_ID,{title:"Themes",type:import_manager_api2.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:ThemeSwitcher,paramKey:PARAM_KEY})});

package/dist/manager.mjs

@@ -2,6 +2,7 @@ import { ADDON_ID, THEME_SWITCHER_ID, PARAM_KEY, DEFAULT_THEME_PARAMETERS, DEFAU
 import { addons, types, useParameter, useGlobals, useAddonState, useChannel } from '@storybook/manager-api';
 import React, { useMemo, Fragment } from 'react';
 import { styled } from '@storybook/theming';
-import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
+import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 
-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(Icons,{icon:"paintbrush"}),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});});
+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(Icon.PaintBrush,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

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "7.2.2",
+  "version": "7.3.0-alpha.0",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",
@@ -72,13 +72,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.2.2",
-    "@storybook/components": "7.2.2",
-    "@storybook/core-events": "7.2.2",
-    "@storybook/manager-api": "7.2.2",
-    "@storybook/preview-api": "7.2.2",
-    "@storybook/theming": "7.2.2",
-    "@storybook/types": "7.2.2",
+    "@storybook/client-logger": "7.3.0-alpha.0",
+    "@storybook/components": "7.3.0-alpha.0",
+    "@storybook/core-events": "7.3.0-alpha.0",
+    "@storybook/manager-api": "7.3.0-alpha.0",
+    "@storybook/preview-api": "7.3.0-alpha.0",
+    "@storybook/theming": "7.3.0-alpha.0",
+    "@storybook/types": "7.3.0-alpha.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {