@storybook/addon-backgrounds 7.0.0-alpha.8 → 7.0.0-beta.1

package/README.md

@@ -4,7 +4,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
 
 [Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
 
-![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/backgrounds/docs/addon-backgrounds.gif)
+![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif)
 
 ## Installation
 

package/dist/chunk-HZTLTKXL.mjs

@@ -0,0 +1,5 @@
+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`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `)}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)}};export{ADDON_ID,PARAM_KEY,isReduceMotionEnabled,getBackgroundColorByName,clearStyles,addGridStyle,addBackgroundStyle};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: {};
+
+export { _default as default };

package/dist/index.js

@@ -0,0 +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={});

package/dist/index.mjs

@@ -0,0 +1 @@
+module&&module.hot&&module.hot.decline&&module.hot.decline();var src_default={};export{src_default as default};

package/dist/manager.d.ts

@@ -0,0 +1 @@
+

package/dist/manager.js

@@ -0,0 +1,5 @@
+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`
+        Backgrounds Addon: could not find the default color "${e}".
+        These are the available colors for your story based on your configuration:
+        ${o}.
+      `)}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))})});

package/dist/manager.mjs

@@ -0,0 +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))})});

package/dist/preview.d.ts

@@ -0,0 +1,21 @@
+import * as lib_types_dist from 'lib/types/dist';
+
+declare const decorators: ((StoryFn: lib_types_dist.PartialStoryFn<lib_types_dist.Renderer, lib_types_dist.Args>, context: lib_types_dist.StoryContext<lib_types_dist.Renderer, lib_types_dist.Args>) => unknown)[];
+declare const parameters: {
+    backgrounds: {
+        grid: {
+            cellSize: number;
+            opacity: number;
+            cellAmount: number;
+        };
+        values: {
+            name: string;
+            value: string;
+        }[];
+    };
+};
+declare const globals: {
+    backgrounds: any;
+};
+
+export { decorators, globals, parameters };

package/dist/preview.js

@@ -0,0 +1,20 @@
+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`
+        Backgrounds Addon: could not find the default color "${o}".
+        These are the available colors for your story based on your configuration:
+        ${t}.
+      `)}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`
+      ${l} {
+        background: ${s} !important;
+        ${R()?"":p}
+      }
+    `},[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`
+      ${y} {
+        background-size: ${P} !important;
+        background-position: ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px, ${m}px ${f}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${l}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${l}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${l/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${l/2}) 1px, transparent 1px) !important;
+      }
+    `},[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});

package/dist/preview.mjs

@@ -0,0 +1,16 @@
+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`
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        ${isReduceMotionEnabled()?"":transitionStyle}
+      }
+    `},[selectedBackgroundColor,selector]);return 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()};import{useMemo as useMemo2,useEffect as useEffect2}from"@storybook/preview-api";var withGrid=(StoryFn,context)=>{let{globals:globals2,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals2[PARAM_KEY]?.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=useMemo2(()=>{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`
+      ${selector} {
+        background-size: ${backgroundSize} !important;
+        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
+      }
+    `},[cellSize]);return useEffect2(()=>{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};export{decorators,globals,parameters};

package/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

package/manager.js

@@ -1 +1 @@
-import './dist/esm/manager';
+import './dist/manager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0-beta.1",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -25,9 +25,45 @@
   },
   "license": "MIT",
   "author": "jbaxleyiii",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./manager": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./register": {
+      "require": "./dist/manager.js",
+      "import": "./dist/manager.mjs",
+      "types": "./dist/manager.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -35,21 +71,23 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.8",
-    "@storybook/api": "7.0.0-alpha.8",
-    "@storybook/client-logger": "7.0.0-alpha.8",
-    "@storybook/components": "7.0.0-alpha.8",
-    "@storybook/core-events": "7.0.0-alpha.8",
-    "@storybook/csf": "0.0.2--canary.4566f4d.1",
-    "@storybook/theming": "7.0.0-alpha.8",
-    "core-js": "^3.8.2",
+    "@storybook/client-logger": "7.0.0-beta.1",
+    "@storybook/components": "7.0.0-beta.1",
+    "@storybook/core-events": "7.0.0-beta.1",
+    "@storybook/manager-api": "7.0.0-beta.1",
+    "@storybook/preview-api": "7.0.0-beta.1",
+    "@storybook/theming": "7.0.0-beta.1",
+    "@storybook/types": "7.0.0-beta.1",
     "global": "^4.4.0",
     "memoizerific": "^1.11.3",
-    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2"
+    "ts-dedent": "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~4.9.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -66,7 +104,14 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "24725501c32a073cebc6bf2674a47357136fbe3a",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/manager.tsx",
+      "./src/preview.tsx"
+    ]
+  },
+  "gitHead": "42c08678ac06d9c2c8e7a4c31a91e0a14bf5c2cd",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

package/preview.js

@@ -1 +1 @@
-export * from './dist/esm/preview';
+export * from './dist/preview';

package/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.

package/dist/cjs/components/ColorIcon.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ColorIcon = void 0;
-
-var _theming = require("@storybook/theming");
-
-const ColorIcon = _theming.styled.span(({
-  background
-}) => ({
-  borderRadius: '1rem',
-  display: 'block',
-  height: '1rem',
-  width: '1rem',
-  background
-}), ({
-  theme
-}) => ({
-  boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`
-}));
-
-exports.ColorIcon = ColorIcon;

package/dist/cjs/constants.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.PARAM_KEY = exports.GRID_PARAM_KEY = exports.EVENTS = exports.ADDON_ID = void 0;
-const ADDON_ID = 'storybook/background';
-exports.ADDON_ID = ADDON_ID;
-const PARAM_KEY = 'backgrounds';
-exports.PARAM_KEY = PARAM_KEY;
-const GRID_PARAM_KEY = 'grid';
-exports.GRID_PARAM_KEY = GRID_PARAM_KEY;
-const EVENTS = {
-  UPDATE: `${ADDON_ID}/update`
-};
-exports.EVENTS = EVENTS;

package/dist/cjs/containers/BackgroundSelector.js

@@ -1,113 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BackgroundSelector = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _memoizerific = _interopRequireDefault(require("memoizerific"));
-
-var _api = require("@storybook/api");
-
-var _clientLogger = require("@storybook/client-logger");
-
-var _components = require("@storybook/components");
-
-var _constants = require("../constants");
-
-var _ColorIcon = require("../components/ColorIcon");
-
-var _helpers = require("../helpers");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const createBackgroundSelectorItem = (0, _memoizerific.default)(1000)((id, name, value, hasSwatch, change, active) => ({
-  id: id || name,
-  title: name,
-  onClick: () => {
-    change({
-      selected: value,
-      name
-    });
-  },
-  value,
-  right: hasSwatch ? /*#__PURE__*/_react.default.createElement(_ColorIcon.ColorIcon, {
-    background: value
-  }) : undefined,
-  active
-}));
-const getDisplayedItems = (0, _memoizerific.default)(10)((backgrounds, selectedBackgroundColor, change) => {
-  const backgroundSelectorItems = backgrounds.map(({
-    name,
-    value
-  }) => createBackgroundSelectorItem(null, name, value, true, change, value === selectedBackgroundColor));
-
-  if (selectedBackgroundColor !== 'transparent') {
-    return [createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change, false), ...backgroundSelectorItems];
-  }
-
-  return backgroundSelectorItems;
-});
-const DEFAULT_BACKGROUNDS_CONFIG = {
-  default: null,
-  disable: true,
-  values: []
-};
-const BackgroundSelector = /*#__PURE__*/(0, _react.memo)(() => {
-  const backgroundsConfig = (0, _api.useParameter)(_constants.PARAM_KEY, DEFAULT_BACKGROUNDS_CONFIG);
-  const [globals, updateGlobals] = (0, _api.useGlobals)();
-  const globalsBackgroundColor = globals[_constants.PARAM_KEY]?.value;
-  const selectedBackgroundColor = (0, _react.useMemo)(() => {
-    return (0, _helpers.getBackgroundColorByName)(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
-  }, [backgroundsConfig, globalsBackgroundColor]);
-
-  if (Array.isArray(backgroundsConfig)) {
-    _clientLogger.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');
-  }
-
-  const onBackgroundChange = (0, _react.useCallback)(value => {
-    updateGlobals({
-      [_constants.PARAM_KEY]: Object.assign({}, globals[_constants.PARAM_KEY], {
-        value
-      })
-    });
-  }, [backgroundsConfig, globals, updateGlobals]);
-
-  if (backgroundsConfig.disable) {
-    return null;
-  }
-
-  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_components.WithTooltip, {
-    placement: "top",
-    trigger: "click",
-    closeOnClick: true,
-    tooltip: ({
-      onHide
-    }) => {
-      return /*#__PURE__*/_react.default.createElement(_components.TooltipLinkList, {
-        links: getDisplayedItems(backgroundsConfig.values, selectedBackgroundColor, ({
-          selected
-        }) => {
-          if (selectedBackgroundColor !== selected) {
-            onBackgroundChange(selected);
-          }
-
-          onHide();
-        })
-      });
-    }
-  }, /*#__PURE__*/_react.default.createElement(_components.IconButton, {
-    key: "background",
-    title: "Change the background of the preview",
-    active: selectedBackgroundColor !== 'transparent'
-  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
-    icon: "photo"
-  }))));
-});
-exports.BackgroundSelector = BackgroundSelector;

package/dist/cjs/containers/GridSelector.js

@@ -1,48 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.GridSelector = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _api = require("@storybook/api");
-
-var _components = require("@storybook/components");
-
-var _constants = require("../constants");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const GridSelector = /*#__PURE__*/(0, _react.memo)(() => {
-  const [globals, updateGlobals] = (0, _api.useGlobals)();
-  const {
-    grid
-  } = (0, _api.useParameter)(_constants.PARAM_KEY, {
-    grid: {
-      disable: false
-    }
-  });
-
-  if (grid?.disable) {
-    return null;
-  }
-
-  const isActive = globals[_constants.PARAM_KEY]?.grid || false;
-  return /*#__PURE__*/_react.default.createElement(_components.IconButton, {
-    key: "background",
-    active: isActive,
-    title: "Apply a grid to the preview",
-    onClick: () => updateGlobals({
-      [_constants.PARAM_KEY]: Object.assign({}, globals[_constants.PARAM_KEY], {
-        grid: !isActive
-      })
-    })
-  }, /*#__PURE__*/_react.default.createElement(_components.Icons, {
-    icon: "grid"
-  }));
-});
-exports.GridSelector = GridSelector;

package/dist/cjs/decorators/withBackground.js

@@ -1,52 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withBackground = void 0;
-
-var _addons = require("@storybook/addons");
-
-var _constants = require("../constants");
-
-var _helpers = require("../helpers");
-
-const withBackground = (StoryFn, context) => {
-  const {
-    globals,
-    parameters
-  } = context;
-  const globalsBackgroundColor = globals[_constants.PARAM_KEY]?.value;
-  const backgroundsConfig = parameters[_constants.PARAM_KEY];
-  const selectedBackgroundColor = (0, _addons.useMemo)(() => {
-    if (backgroundsConfig.disable) {
-      return 'transparent';
-    }
-
-    return (0, _helpers.getBackgroundColorByName)(globalsBackgroundColor, backgroundsConfig.values, backgroundsConfig.default);
-  }, [backgroundsConfig, globalsBackgroundColor]);
-  const isActive = (0, _addons.useMemo)(() => selectedBackgroundColor && selectedBackgroundColor !== 'transparent', [selectedBackgroundColor]);
-  const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
-  const backgroundStyles = (0, _addons.useMemo)(() => {
-    const transitionStyle = 'transition: background-color 0.3s;';
-    return `
-      ${selector} {
-        background: ${selectedBackgroundColor} !important;
-        ${(0, _helpers.isReduceMotionEnabled)() ? '' : transitionStyle}
-      }
-    `;
-  }, [selectedBackgroundColor, selector]);
-  (0, _addons.useEffect)(() => {
-    const selectorId = context.viewMode === 'docs' ? `addon-backgrounds-docs-${context.id}` : `addon-backgrounds-color`;
-
-    if (!isActive) {
-      (0, _helpers.clearStyles)(selectorId);
-      return;
-    }
-
-    (0, _helpers.addBackgroundStyle)(selectorId, backgroundStyles, context.viewMode === 'docs' ? context.id : null);
-  }, [isActive, backgroundStyles, context]);
-  return StoryFn();
-};
-
-exports.withBackground = withBackground;

package/dist/cjs/decorators/withGrid.js

@@ -1,82 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withGrid = void 0;
-
-var _tsDedent = _interopRequireDefault(require("ts-dedent"));
-
-var _utilDeprecate = _interopRequireDefault(require("util-deprecate"));
-
-var _addons = require("@storybook/addons");
-
-var _helpers = require("../helpers");
-
-var _constants = require("../constants");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const deprecatedCellSizeWarning = (0, _utilDeprecate.default)(() => {}, (0, _tsDedent.default)`
-    Backgrounds Addon: The cell size parameter has been changed.
-
-    - parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
-    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter
-  `);
-
-const withGrid = (StoryFn, context) => {
-  const {
-    globals,
-    parameters
-  } = context;
-  const gridParameters = parameters[_constants.PARAM_KEY].grid;
-  const isActive = globals[_constants.PARAM_KEY]?.grid === true && gridParameters.disable !== true;
-  const {
-    cellAmount,
-    cellSize,
-    opacity
-  } = gridParameters;
-  const isInDocs = context.viewMode === 'docs';
-  let gridSize;
-
-  if (parameters.grid?.cellSize) {
-    gridSize = parameters.grid.cellSize;
-    deprecatedCellSizeWarning();
-  } else {
-    gridSize = cellSize;
-  }
-
-  const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded'; // 16px offset in the grid to account for padded layout
-
-  const defaultOffset = isLayoutPadded ? 16 : 0;
-  const offsetX = gridParameters.offsetX ?? (isInDocs ? 20 : defaultOffset);
-  const offsetY = gridParameters.offsetY ?? (isInDocs ? 20 : defaultOffset);
-  const gridStyles = (0, _addons.useMemo)(() => {
-    const selector = context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
-    const backgroundSize = [`${gridSize * cellAmount}px ${gridSize * cellAmount}px`, `${gridSize * cellAmount}px ${gridSize * cellAmount}px`, `${gridSize}px ${gridSize}px`, `${gridSize}px ${gridSize}px`].join(', ');
-    return `
-      ${selector} {
-        background-size: ${backgroundSize} !important;
-        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
-        background-blend-mode: difference !important;
-        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
-         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
-         linear-gradient(rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px),
-         linear-gradient(90deg, rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px) !important;
-      }
-    `;
-  }, [gridSize]);
-  (0, _addons.useEffect)(() => {
-    const selectorId = context.viewMode === 'docs' ? `addon-backgrounds-grid-docs-${context.id}` : `addon-backgrounds-grid`;
-
-    if (!isActive) {
-      (0, _helpers.clearStyles)(selectorId);
-      return;
-    }
-
-    (0, _helpers.addGridStyle)(selectorId, gridStyles);
-  }, [isActive, gridStyles, context]);
-  return StoryFn();
-};
-
-exports.withGrid = withGrid;