@storybook/addon-backgrounds 7.2.3 → 7.3.0

package/dist/manager.js

@@ -1,5 +1,5 @@
-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_react3=__toESM(require("react")),import_manager_api3=require("@storybook/manager-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_react=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_manager_api=require("@storybook/manager-api"),import_client_logger2=require("@storybook/client-logger"),import_components=require("@storybook/components");var import_theming=require("@storybook/theming"),ColorIcon=import_theming.styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global;var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
+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_react3=__toESM(require("react")),import_manager_api3=require("@storybook/manager-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_react=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_manager_api=require("@storybook/manager-api"),import_client_logger2=require("@storybook/client-logger"),import_components=require("@storybook/components"),import_experimental=require("@storybook/components/experimental");var import_theming=require("@storybook/theming"),ColorIcon=import_theming.styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global;var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return"transparent";if(backgrounds.find(background=>background.value===currentSelectedValue))return currentSelectedValue;let defaultBackground=backgrounds.find(background=>background.name===defaultName);if(defaultBackground)return defaultBackground.value;if(defaultName){let availableColors=backgrounds.map(background=>background.name).join(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
         Backgrounds Addon: could not find the default color "${defaultName}".
         These are the available colors for your story based on your configuration:
         ${availableColors}.
-      `)}return"transparent"};var createBackgroundSelectorItem=(0,import_memoizerific.default)(1e3)((id,name,value,hasSwatch,change,active)=>({id:id||name,title:name,onClick:()=>{change({selected:value,name})},value,right:hasSwatch?import_react.default.createElement(ColorIcon,{background:value}):void 0,active})),getDisplayedItems=(0,import_memoizerific.default)(10)((backgrounds,selectedBackgroundColor,change)=>{let backgroundSelectorItems=backgrounds.map(({name,value})=>createBackgroundSelectorItem(null,name,value,!0,change,value===selectedBackgroundColor));return selectedBackgroundColor!=="transparent"?[createBackgroundSelectorItem("reset","Clear background","transparent",null,change,!1),...backgroundSelectorItems]:backgroundSelectorItems}),DEFAULT_BACKGROUNDS_CONFIG={default:null,disable:!0,values:[]},BackgroundSelector=(0,import_react.memo)(function(){var _a;let backgroundsConfig=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_BACKGROUNDS_CONFIG),[isTooltipVisible,setIsTooltipVisible]=(0,import_react.useState)(!1),[globals,updateGlobals]=(0,import_manager_api.useGlobals)(),globalsBackgroundColor=(_a=globals[PARAM_KEY])==null?void 0:_a.value,selectedBackgroundColor=(0,import_react.useMemo)(()=>getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]);Array.isArray(backgroundsConfig)&&import_client_logger2.logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let onBackgroundChange=(0,import_react.useCallback)(value=>{updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],value}})},[backgroundsConfig,globals,updateGlobals]);return backgroundsConfig.disable?null:import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",closeOnOutsideClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})}),onVisibleChange:setIsTooltipVisible},import_react.default.createElement(import_components.IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"||isTooltipVisible},import_react.default.createElement(import_components.Icons,{icon:"photo"}))))});var import_react2=__toESM(require("react")),import_manager_api2=require("@storybook/manager-api"),import_components2=require("@storybook/components");var GridSelector=(0,import_react2.memo)(function(){var _a;let[globals,updateGlobals]=(0,import_manager_api2.useGlobals)(),{grid}=(0,import_manager_api2.useParameter)(PARAM_KEY,{grid:{disable:!1}});if(grid!=null&&grid.disable)return null;let isActive=((_a=globals[PARAM_KEY])==null?void 0:_a.grid)||!1;return import_react2.default.createElement(import_components2.IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},import_react2.default.createElement(import_components2.Icons,{icon:"grid"}))});import_manager_api3.addons.register(ADDON_ID,()=>{import_manager_api3.addons.add(ADDON_ID,{title:"Backgrounds",type:import_manager_api3.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>import_react3.default.createElement(import_react3.Fragment,null,import_react3.default.createElement(BackgroundSelector,null),import_react3.default.createElement(GridSelector,null))})});
+      `)}return"transparent"};var createBackgroundSelectorItem=(0,import_memoizerific.default)(1e3)((id,name,value,hasSwatch,change,active)=>({id:id||name,title:name,onClick:()=>{change({selected:value,name})},value,right:hasSwatch?import_react.default.createElement(ColorIcon,{background:value}):void 0,active})),getDisplayedItems=(0,import_memoizerific.default)(10)((backgrounds,selectedBackgroundColor,change)=>{let backgroundSelectorItems=backgrounds.map(({name,value})=>createBackgroundSelectorItem(null,name,value,!0,change,value===selectedBackgroundColor));return selectedBackgroundColor!=="transparent"?[createBackgroundSelectorItem("reset","Clear background","transparent",null,change,!1),...backgroundSelectorItems]:backgroundSelectorItems}),DEFAULT_BACKGROUNDS_CONFIG={default:null,disable:!0,values:[]},BackgroundSelector=(0,import_react.memo)(function(){var _a;let backgroundsConfig=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_BACKGROUNDS_CONFIG),[isTooltipVisible,setIsTooltipVisible]=(0,import_react.useState)(!1),[globals,updateGlobals]=(0,import_manager_api.useGlobals)(),globalsBackgroundColor=(_a=globals[PARAM_KEY])==null?void 0:_a.value,selectedBackgroundColor=(0,import_react.useMemo)(()=>getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]);Array.isArray(backgroundsConfig)&&import_client_logger2.logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let onBackgroundChange=(0,import_react.useCallback)(value=>{updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],value}})},[backgroundsConfig,globals,updateGlobals]);return backgroundsConfig.disable?null:import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",closeOnOutsideClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})}),onVisibleChange:setIsTooltipVisible},import_react.default.createElement(import_components.IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"||isTooltipVisible},import_react.default.createElement(import_experimental.Icon.Photo,null))))});var import_react2=__toESM(require("react")),import_manager_api2=require("@storybook/manager-api"),import_components2=require("@storybook/components"),import_experimental2=require("@storybook/components/experimental");var GridSelector=(0,import_react2.memo)(function(){var _a;let[globals,updateGlobals]=(0,import_manager_api2.useGlobals)(),{grid}=(0,import_manager_api2.useParameter)(PARAM_KEY,{grid:{disable:!1}});if(grid!=null&&grid.disable)return null;let isActive=((_a=globals[PARAM_KEY])==null?void 0:_a.grid)||!1;return import_react2.default.createElement(import_components2.IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},import_react2.default.createElement(import_experimental2.Icon.Grid,null))});import_manager_api3.addons.register(ADDON_ID,()=>{import_manager_api3.addons.add(ADDON_ID,{title:"Backgrounds",type:import_manager_api3.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>import_react3.default.createElement(import_react3.Fragment,null,import_react3.default.createElement(BackgroundSelector,null),import_react3.default.createElement(GridSelector,null))})});

package/dist/manager.mjs

@@ -3,7 +3,8 @@ import React, { memo, useState, useMemo, useCallback, Fragment } from 'react';
 import { useParameter, useGlobals, addons, types } from '@storybook/manager-api';
 import memoize from 'memoizerific';
 import { logger } from '@storybook/client-logger';
-import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
+import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
+import { Icon } from '@storybook/components/experimental';
 import { styled } from '@storybook/theming';
 
-var ColorIcon=styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var createBackgroundSelectorItem=memoize(1e3)((id,name,value,hasSwatch,change,active)=>({id:id||name,title:name,onClick:()=>{change({selected:value,name});},value,right:hasSwatch?React.createElement(ColorIcon,{background:value}):void 0,active})),getDisplayedItems=memoize(10)((backgrounds,selectedBackgroundColor,change)=>{let backgroundSelectorItems=backgrounds.map(({name,value})=>createBackgroundSelectorItem(null,name,value,!0,change,value===selectedBackgroundColor));return selectedBackgroundColor!=="transparent"?[createBackgroundSelectorItem("reset","Clear background","transparent",null,change,!1),...backgroundSelectorItems]:backgroundSelectorItems}),DEFAULT_BACKGROUNDS_CONFIG={default:null,disable:!0,values:[]},BackgroundSelector=memo(function(){let backgroundsConfig=useParameter(PARAM_KEY,DEFAULT_BACKGROUNDS_CONFIG),[isTooltipVisible,setIsTooltipVisible]=useState(!1),[globals,updateGlobals]=useGlobals(),globalsBackgroundColor=globals[PARAM_KEY]?.value,selectedBackgroundColor=useMemo(()=>getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]);Array.isArray(backgroundsConfig)&&logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let onBackgroundChange=useCallback(value=>{updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],value}});},[backgroundsConfig,globals,updateGlobals]);return backgroundsConfig.disable?null:React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide();})}),onVisibleChange:setIsTooltipVisible},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"||isTooltipVisible},React.createElement(Icons,{icon:"photo"}))))});var GridSelector=memo(function(){let[globals,updateGlobals]=useGlobals(),{grid}=useParameter(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React.createElement(IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React.createElement(Icons,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React.createElement(Fragment,null,React.createElement(BackgroundSelector,null),React.createElement(GridSelector,null))});});
+var ColorIcon=styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var createBackgroundSelectorItem=memoize(1e3)((id,name,value,hasSwatch,change,active)=>({id:id||name,title:name,onClick:()=>{change({selected:value,name});},value,right:hasSwatch?React.createElement(ColorIcon,{background:value}):void 0,active})),getDisplayedItems=memoize(10)((backgrounds,selectedBackgroundColor,change)=>{let backgroundSelectorItems=backgrounds.map(({name,value})=>createBackgroundSelectorItem(null,name,value,!0,change,value===selectedBackgroundColor));return selectedBackgroundColor!=="transparent"?[createBackgroundSelectorItem("reset","Clear background","transparent",null,change,!1),...backgroundSelectorItems]:backgroundSelectorItems}),DEFAULT_BACKGROUNDS_CONFIG={default:null,disable:!0,values:[]},BackgroundSelector=memo(function(){let backgroundsConfig=useParameter(PARAM_KEY,DEFAULT_BACKGROUNDS_CONFIG),[isTooltipVisible,setIsTooltipVisible]=useState(!1),[globals,updateGlobals]=useGlobals(),globalsBackgroundColor=globals[PARAM_KEY]?.value,selectedBackgroundColor=useMemo(()=>getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]);Array.isArray(backgroundsConfig)&&logger.warn("Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md");let onBackgroundChange=useCallback(value=>{updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],value}});},[backgroundsConfig,globals,updateGlobals]);return backgroundsConfig.disable?null:React.createElement(Fragment,null,React.createElement(WithTooltip,{placement:"top",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide();})}),onVisibleChange:setIsTooltipVisible},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"||isTooltipVisible},React.createElement(Icon.Photo,null))))});var GridSelector=memo(function(){let[globals,updateGlobals]=useGlobals(),{grid}=useParameter(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React.createElement(IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React.createElement(Icon.Grid,null))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React.createElement(Fragment,null,React.createElement(BackgroundSelector,null),React.createElement(GridSelector,null))});});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.2.3",
+  "version": "7.3.0",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -76,14 +76,14 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.2.3",
-    "@storybook/components": "7.2.3",
-    "@storybook/core-events": "7.2.3",
+    "@storybook/client-logger": "7.3.0",
+    "@storybook/components": "7.3.0",
+    "@storybook/core-events": "7.3.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.2.3",
-    "@storybook/preview-api": "7.2.3",
-    "@storybook/theming": "7.2.3",
-    "@storybook/types": "7.2.3",
+    "@storybook/manager-api": "7.3.0",
+    "@storybook/preview-api": "7.3.0",
+    "@storybook/theming": "7.3.0",
+    "@storybook/types": "7.3.0",
     "memoizerific": "^1.11.3",
     "ts-dedent": "^2.0.0"
   },