@storybook/addon-backgrounds 7.0.0-beta.4 → 7.0.0-beta.41

Sign up to get free protection for your applications and to get access to all the features.
package/README.md CHANGED
@@ -19,7 +19,7 @@ npm i -D @storybook/addon-backgrounds
19
19
  Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/overview#configure-your-storybook-project):
20
20
 
21
21
  ```js
22
- module.exports = {
22
+ export default {
23
23
  addons: ['@storybook/addon-backgrounds'],
24
24
  };
25
25
  ```
@@ -1,4 +1,4 @@
1
- var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};import global from"global";import{dedent}from"ts-dedent";import{logger}from"@storybook/client-logger";var{document,window}=global,isReduceMotionEnabled=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,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(", ");logger.warn(dedent`
1
+ var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};import{global}from"@storybook/global";import{dedent}from"ts-dedent";import{logger}from"@storybook/client-logger";var{document,window}=global,isReduceMotionEnabled=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,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(", ");logger.warn(dedent`
2
2
  Backgrounds Addon: could not find the default color "${defaultName}".
3
3
  These are the available colors for your story based on your configuration:
4
4
  ${availableColors}.
package/dist/index.js CHANGED
@@ -1 +1 @@
1
- var t=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var h=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var c=(o,e)=>{for(var l in e)t(o,l,{get:e[l],enumerable:!0})},f=(o,e,l,u)=>{if(e&&typeof e=="object"||typeof e=="function")for(let d of h(e))!i.call(o,d)&&d!==l&&t(o,d,{get:()=>e[d],enumerable:!(u=m(e,d))||u.enumerable});return o};var n=o=>f(t({},"__esModule",{value:!0}),o);var p={};c(p,{default:()=>a});module.exports=n(p);module&&module.hot&&module.hot.decline&&module.hot.decline();var a={};0&&(module.exports={});
1
+ var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{default:()=>src_default});module.exports=__toCommonJS(src_exports);module&&module.hot&&module.hot.decline&&module.hot.decline();var src_default={};0&&(module.exports={});
package/dist/manager.js CHANGED
@@ -1,5 +1,5 @@
1
- var _=Object.create;var A=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,O=Object.prototype.hasOwnProperty;var K=(r,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of H(t))!O.call(r,o)&&o!==e&&A(r,o,{get:()=>t[o],enumerable:!(n=v(t,o))||n.enumerable});return r};var c=(r,t,e)=>(e=r!=null?_(F(r)):{},K(t||!r||!r.__esModule?A(e,"default",{value:r,enumerable:!0}):e,r));var d=c(require("react")),g=require("@storybook/manager-api");var p="storybook/background",a="backgrounds";var $={UPDATE:`${p}/update`};var i=c(require("react")),b=c(require("memoizerific")),u=require("@storybook/manager-api"),G=require("@storybook/client-logger"),l=require("@storybook/components");var C=require("@storybook/theming"),E=C.styled.span(({background:r})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:r}),({theme:r})=>({boxShadow:`${r.appBorderColor} 0 0 0 1px inset`}));var S=c(require("global")),M=require("ts-dedent"),I=require("@storybook/client-logger"),{document:j,window:W}=S.default;var T=(r,t=[],e)=>{if(r==="transparent")return"transparent";if(t.find(o=>o.value===r))return r;let n=t.find(o=>o.name===e);if(n)return n.value;if(e){let o=t.map(s=>s.name).join(", ");I.logger.warn(M.dedent`
2
- Backgrounds Addon: could not find the default color "${e}".
1
+ 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`
2
+ Backgrounds Addon: could not find the default color "${defaultName}".
3
3
  These are the available colors for your story based on your configuration:
4
- ${o}.
5
- `)}return"transparent"};var x=(0,b.default)(1e3)((r,t,e,n,o,s)=>({id:r||t,title:t,onClick:()=>{o({selected:e,name:t})},value:e,right:n?i.default.createElement(E,{background:e}):void 0,active:s})),N=(0,b.default)(10)((r,t,e)=>{let n=r.map(({name:o,value:s})=>x(null,o,s,!0,e,s===t));return t!=="transparent"?[x("reset","Clear background","transparent",null,e,!1),...n]:n}),w={default:null,disable:!0,values:[]},L=(0,i.memo)(function(){var B;let t=(0,u.useParameter)(a,w),[e,n]=(0,u.useGlobals)(),o=(B=e[a])==null?void 0:B.value,s=(0,i.useMemo)(()=>T(o,t.values,t.default),[t,o]);Array.isArray(t)&&G.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 P=(0,i.useCallback)(y=>{n({[a]:{...e[a],value:y}})},[t,e,n]);return t.disable?null:i.default.createElement(i.Fragment,null,i.default.createElement(l.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide:y})=>i.default.createElement(l.TooltipLinkList,{links:N(t.values,s,({selected:h})=>{s!==h&&P(h),y()})})},i.default.createElement(l.IconButton,{key:"background",title:"Change the background of the preview",active:s!=="transparent"},i.default.createElement(l.Icons,{icon:"photo"}))))});var m=c(require("react")),f=require("@storybook/manager-api"),k=require("@storybook/components");var D=(0,m.memo)(function(){var s;let[t,e]=(0,f.useGlobals)(),{grid:n}=(0,f.useParameter)(a,{grid:{disable:!1}});if(n!=null&&n.disable)return null;let o=((s=t[a])==null?void 0:s.grid)||!1;return m.default.createElement(k.IconButton,{key:"background",active:o,title:"Apply a grid to the preview",onClick:()=>e({[a]:{...t[a],grid:!o}})},m.default.createElement(k.Icons,{icon:"grid"}))});g.addons.register(p,()=>{g.addons.add(p,{title:"Backgrounds",type:g.types.TOOL,match:({viewMode:r})=>!!(r&&r.match(/^(story|docs)$/)),render:()=>d.default.createElement(d.Fragment,null,d.default.createElement(L,null),d.default.createElement(D,null))})});
4
+ ${availableColors}.
5
+ `)}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),[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",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})})},import_react.default.createElement(import_components.IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"},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))})});
package/dist/manager.mjs CHANGED
@@ -1 +1 @@
1
- import{ADDON_ID,PARAM_KEY,getBackgroundColorByName}from"./chunk-HZTLTKXL.mjs";import React3,{Fragment as Fragment2}from"react";import{addons,types}from"@storybook/manager-api";import React,{Fragment,useCallback,useMemo,memo}from"react";import memoize from"memoizerific";import{useParameter,useGlobals}from"@storybook/manager-api";import{logger}from"@storybook/client-logger";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";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),[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",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})})},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"},React.createElement(Icons,{icon:"photo"}))))});import React2,{memo as memo2}from"react";import{useGlobals as useGlobals2,useParameter as useParameter2}from"@storybook/manager-api";import{Icons as Icons2,IconButton as IconButton2}from"@storybook/components";var GridSelector=memo2(function(){let[globals,updateGlobals]=useGlobals2(),{grid}=useParameter2(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React2.createElement(IconButton2,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React2.createElement(Icons2,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React3.createElement(Fragment2,null,React3.createElement(BackgroundSelector,null),React3.createElement(GridSelector,null))})});
1
+ import{ADDON_ID,PARAM_KEY,getBackgroundColorByName}from"./chunk-GRJZJKJ4.mjs";import React3,{Fragment as Fragment2}from"react";import{addons,types}from"@storybook/manager-api";import React,{Fragment,useCallback,useMemo,memo}from"react";import memoize from"memoizerific";import{useParameter,useGlobals}from"@storybook/manager-api";import{logger}from"@storybook/client-logger";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";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),[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",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})})},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"},React.createElement(Icons,{icon:"photo"}))))});import React2,{memo as memo2}from"react";import{useGlobals as useGlobals2,useParameter as useParameter2}from"@storybook/manager-api";import{Icons as Icons2,IconButton as IconButton2}from"@storybook/components";var GridSelector=memo2(function(){let[globals,updateGlobals]=useGlobals2(),{grid}=useParameter2(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React2.createElement(IconButton2,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React2.createElement(Icons2,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React3.createElement(Fragment2,null,React3.createElement(BackgroundSelector,null),React3.createElement(GridSelector,null))})});
package/dist/preview.js CHANGED
@@ -1,20 +1,20 @@
1
- var H=Object.create;var b=Object.defineProperty;var _=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(r,e)=>{for(var o in e)b(r,o,{get:e[o],enumerable:!0})},E=(r,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of F(e))!Y.call(r,t)&&t!==o&&b(r,t,{get:()=>e[t],enumerable:!(n=_(e,t))||n.enumerable});return r};var G=(r,e,o)=>(o=r!=null?H(K(r)):{},E(e||!r||!r.__esModule?b(o,"default",{value:r,enumerable:!0}):o,r)),I=r=>E(b({},"__esModule",{value:!0}),r);var q={};D(q,{decorators:()=>U,globals:()=>X,parameters:()=>j});module.exports=I(q);var g=require("@storybook/preview-api");var z="storybook/background",d="backgrounds";var Q={UPDATE:`${z}/update`};var A=G(require("global")),B=require("ts-dedent"),h=require("@storybook/client-logger"),{document:c,window:N}=A.default,R=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(r,e=[],o)=>{if(r==="transparent")return"transparent";if(e.find(t=>t.value===r))return r;let n=e.find(t=>t.name===o);if(n)return n.value;if(o){let t=e.map(i=>i.name).join(", ");h.logger.warn(B.dedent`
2
- Backgrounds Addon: could not find the default color "${o}".
1
+ var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__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 __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,globals:()=>globals,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_preview_api=require("@storybook/preview-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_global=require("@storybook/global"),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.global,isReduceMotionEnabled=()=>window.matchMedia("(prefers-reduced-motion: reduce)").matches,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`
2
+ Backgrounds Addon: could not find the default color "${defaultName}".
3
3
  These are the available colors for your story based on your configuration:
4
- ${t}.
5
- `)}return"transparent"},$=r=>{(Array.isArray(r)?r:[r]).forEach(O)},O=r=>{let e=c.getElementById(r);e&&e.parentElement.removeChild(e)},w=(r,e)=>{let o=c.getElementById(r);if(o)o.innerHTML!==e&&(o.innerHTML=e);else{let n=c.createElement("style");n.setAttribute("id",r),n.innerHTML=e,c.head.appendChild(n)}},C=(r,e,o)=>{let n=c.getElementById(r);if(n)n.innerHTML!==e&&(n.innerHTML=e);else{let t=c.createElement("style");t.setAttribute("id",r),t.innerHTML=e;let i=`addon-backgrounds-grid${o?`-docs-${o}`:""}`,s=c.getElementById(i);s?s.parentElement.insertBefore(t,s):c.head.appendChild(t)}};var T=(r,e)=>{var M;let{globals:o,parameters:n}=e,t=(M=o[d])==null?void 0:M.value,i=n[d],s=(0,g.useMemo)(()=>i.disable?"transparent":v(t,i.values,i.default),[i,t]),a=(0,g.useMemo)(()=>s&&s!=="transparent",[s]),l=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",u=(0,g.useMemo)(()=>{let p="transition: background-color 0.3s;";return`
6
- ${l} {
7
- background: ${s} !important;
8
- ${R()?"":p}
4
+ ${availableColors}.
5
+ `)}return"transparent"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle)},clearStyle=selector=>{let element=document.getElementById(selector);element&&element.parentElement.removeChild(element)},addGridStyle=(selector,css)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else{let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css,document.head.appendChild(style)}},addBackgroundStyle=(selector,css,storyId)=>{let existingStyle=document.getElementById(selector);if(existingStyle)existingStyle.innerHTML!==css&&(existingStyle.innerHTML=css);else{let style=document.createElement("style");style.setAttribute("id",selector),style.innerHTML=css;let gridStyleSelector=`addon-backgrounds-grid${storyId?`-docs-${storyId}`:""}`,existingGridStyle=document.getElementById(gridStyleSelector);existingGridStyle?existingGridStyle.parentElement.insertBefore(style,existingGridStyle):document.head.appendChild(style)}};var withBackground=(StoryFn,context)=>{var _a;let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=(_a=globals2[PARAM_KEY])==null?void 0:_a.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=(0,import_preview_api.useMemo)(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=(0,import_preview_api.useMemo)(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=(0,import_preview_api.useMemo)(()=>{let transitionStyle="transition: background-color 0.3s;";return`
6
+ ${selector} {
7
+ background: ${selectedBackgroundColor} !important;
8
+ ${isReduceMotionEnabled()?"":transitionStyle}
9
9
  }
10
- `},[s,l]);return(0,g.useEffect)(()=>{let p=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!a){$(p);return}C(p,u,e.viewMode==="docs"?e.id:null)},[a,u,e]),r()};var x=require("@storybook/preview-api");var L=(r,e)=>{var S;let{globals:o,parameters:n}=e,t=n[d].grid,i=((S=o[d])==null?void 0:S.grid)===!0&&t.disable!==!0,{cellAmount:s,cellSize:a,opacity:l}=t,u=e.viewMode==="docs",p=n.layout===void 0||n.layout==="padded"?16:0,m=t.offsetX??(u?20:p),f=t.offsetY??(u?20:p),k=(0,x.useMemo)(()=>{let y=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",P=[`${a*s}px ${a*s}px`,`${a*s}px ${a*s}px`,`${a}px ${a}px`,`${a}px ${a}px`].join(", ");return`
11
- ${y} {
12
- background-size: ${P} !important;
13
- background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
10
+ `},[selectedBackgroundColor,selector]);return(0,import_preview_api.useEffect)(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-docs-${context.id}`:"addon-backgrounds-color";if(!isActive){clearStyles(selectorId);return}addBackgroundStyle(selectorId,backgroundStyles,context.viewMode==="docs"?context.id:null)},[isActive,backgroundStyles,context]),StoryFn()};var import_preview_api2=require("@storybook/preview-api");var withGrid=(StoryFn,context)=>{var _a;let{globals:globals2,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=((_a=globals2[PARAM_KEY])==null?void 0:_a.grid)===!0&&gridParameters.disable!==!0,{cellAmount,cellSize,opacity}=gridParameters,isInDocs=context.viewMode==="docs",defaultOffset=parameters2.layout===void 0||parameters2.layout==="padded"?16:0,offsetX=gridParameters.offsetX??(isInDocs?20:defaultOffset),offsetY=gridParameters.offsetY??(isInDocs?20:defaultOffset),gridStyles=(0,import_preview_api2.useMemo)(()=>{let selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", ");return`
11
+ ${selector} {
12
+ background-size: ${backgroundSize} !important;
13
+ background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
14
14
  background-blend-mode: difference !important;
15
- background-image: linear-gradient(rgba(130, 130, 130, ${l}) 1px, transparent 1px),
16
- linear-gradient(90deg, rgba(130, 130, 130, ${l}) 1px, transparent 1px),
17
- linear-gradient(rgba(130, 130, 130, ${l/2}) 1px, transparent 1px),
18
- linear-gradient(90deg, rgba(130, 130, 130, ${l/2}) 1px, transparent 1px) !important;
15
+ background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
16
+ linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
17
+ linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
18
+ linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
19
19
  }
20
- `},[a]);return(0,x.useEffect)(()=>{let y=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!i){$(y);return}w(y,k)},[i,k,e]),r()};var U=[L,T],j={[d]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},X={[d]:null};0&&(module.exports={decorators,globals,parameters});
20
+ `},[cellSize]);return(0,import_preview_api2.useEffect)(()=>{let selectorId=context.viewMode==="docs"?`addon-backgrounds-grid-docs-${context.id}`:"addon-backgrounds-grid";if(!isActive){clearStyles(selectorId);return}addGridStyle(selectorId,gridStyles)},[isActive,gridStyles,context]),StoryFn()};var decorators=[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}},globals={[PARAM_KEY]:null};0&&(module.exports={decorators,globals,parameters});
package/dist/preview.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import{PARAM_KEY,addBackgroundStyle,addGridStyle,clearStyles,getBackgroundColorByName,isReduceMotionEnabled}from"./chunk-HZTLTKXL.mjs";import{useMemo,useEffect}from"@storybook/preview-api";var withBackground=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=globals2[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=useMemo(()=>{let transitionStyle="transition: background-color 0.3s;";return`
1
+ import{PARAM_KEY,addBackgroundStyle,addGridStyle,clearStyles,getBackgroundColorByName,isReduceMotionEnabled}from"./chunk-GRJZJKJ4.mjs";import{useMemo,useEffect}from"@storybook/preview-api";var withBackground=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=globals2[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=useMemo(()=>{let transitionStyle="transition: background-color 0.3s;";return`
2
2
  ${selector} {
3
3
  background: ${selectedBackgroundColor} !important;
4
4
  ${isReduceMotionEnabled()?"":transitionStyle}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/addon-backgrounds",
3
- "version": "7.0.0-beta.4",
3
+ "version": "7.0.0-beta.41",
4
4
  "description": "Switch backgrounds to view components in different settings",
5
5
  "keywords": [
6
6
  "addon",
@@ -10,7 +10,7 @@
10
10
  "essentials",
11
11
  "design"
12
12
  ],
13
- "homepage": "https://github.com/storybookjs/storybook/tree/main/addons/backgrounds",
13
+ "homepage": "https://github.com/storybookjs/storybook/tree/next/code/addons/backgrounds",
14
14
  "bugs": {
15
15
  "url": "https://github.com/storybookjs/storybook/issues"
16
16
  },
@@ -27,6 +27,7 @@
27
27
  "author": "jbaxleyiii",
28
28
  "exports": {
29
29
  ".": {
30
+ "node": "./dist/index.js",
30
31
  "require": "./dist/index.js",
31
32
  "import": "./dist/index.mjs",
32
33
  "types": "./dist/index.d.ts"
@@ -75,14 +76,14 @@
75
76
  "prep": "../../../scripts/prepare/bundle.ts"
76
77
  },
77
78
  "dependencies": {
78
- "@storybook/client-logger": "7.0.0-beta.4",
79
- "@storybook/components": "7.0.0-beta.4",
80
- "@storybook/core-events": "7.0.0-beta.4",
81
- "@storybook/manager-api": "7.0.0-beta.4",
82
- "@storybook/preview-api": "7.0.0-beta.4",
83
- "@storybook/theming": "7.0.0-beta.4",
84
- "@storybook/types": "7.0.0-beta.4",
85
- "global": "^4.4.0",
79
+ "@storybook/client-logger": "7.0.0-beta.41",
80
+ "@storybook/components": "7.0.0-beta.41",
81
+ "@storybook/core-events": "7.0.0-beta.41",
82
+ "@storybook/global": "^5.0.0",
83
+ "@storybook/manager-api": "7.0.0-beta.41",
84
+ "@storybook/preview-api": "7.0.0-beta.41",
85
+ "@storybook/theming": "7.0.0-beta.41",
86
+ "@storybook/types": "7.0.0-beta.41",
86
87
  "memoizerific": "^1.11.3",
87
88
  "ts-dedent": "^2.0.0"
88
89
  },
@@ -111,7 +112,7 @@
111
112
  "./src/preview.tsx"
112
113
  ]
113
114
  },
114
- "gitHead": "4d869ed6f7166e0d06f2bef5a1b872fa77a0cf2d",
115
+ "gitHead": "b73df3011fe6ccda407ebb6ed15b80e0d01d4230",
115
116
  "storybook": {
116
117
  "displayName": "Backgrounds",
117
118
  "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",