@storybook/addon-backgrounds 7.0.0-alpha.37 → 7.0.0-alpha.39

package/dist/preview.js

@@ -1,25 +1,20 @@
-var G=Object.create;var k=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var K=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var O=(r,e)=>{for(var t in e)k(r,t,{get:e[t],enumerable:!0})},h=(r,e,t,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of K(e))!N.call(r,o)&&o!==t&&k(r,o,{get:()=>e[o],enumerable:!(n=D(e,o))||n.enumerable});return r};var w=(r,e,t)=>(t=r!=null?G(Y(r)):{},h(e||!r||!r.__esModule?k(t,"default",{value:r,enumerable:!0}):t,r)),j=r=>h(k({},"__esModule",{value:!0}),r);var Z={};O(Z,{decorators:()=>J,parameters:()=>Q});module.exports=j(Z);var p=require("@storybook/addons");var U="storybook/background",l="backgrounds";var ee={UPDATE:`${U}/update`};var B=w(require("global")),v=require("ts-dedent"),T=require("@storybook/client-logger"),{document:d,window:X}=B.default,C=()=>X.matchMedia("(prefers-reduced-motion: reduce)").matches,F=(r,e=[],t)=>{if(r==="transparent")return"transparent";if(e.find(o=>o.value===r))return r;let n=e.find(o=>o.name===t);if(n)return n.value;if(t){let o=e.map(i=>i.name).join(", ");T.logger.warn(v.dedent`
+var H=Object.create;var b=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var D=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var I=(e,r)=>{for(var t in r)b(e,t,{get:r[t],enumerable:!0})},S=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of _(r))!G.call(e,o)&&o!==t&&b(e,o,{get:()=>r[o],enumerable:!(n=P(r,o))||n.enumerable});return e};var K=(e,r,t)=>(t=e!=null?H(D(e)):{},S(r||!e||!e.__esModule?b(t,"default",{value:e,enumerable:!0}):t,e)),Y=e=>S(b({},"__esModule",{value:!0}),e);var X={};I(X,{decorators:()=>U,parameters:()=>j});module.exports=Y(X);var g=require("@storybook/addons");var z="storybook/background",p="backgrounds";var J={UPDATE:`${z}/update`};var E=K(require("global")),w=require("ts-dedent"),B=require("@storybook/client-logger"),{document:d,window:N}=E.default,h=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(e,r=[],t)=>{if(e==="transparent")return"transparent";if(r.find(o=>o.value===e))return e;let n=r.find(o=>o.name===t);if(n)return n.value;if(t){let o=r.map(i=>i.name).join(", ");B.logger.warn(w.dedent`
         Backgrounds Addon: could not find the default color "${t}".
         These are the available colors for your story based on your configuration:
         ${o}.
-      `)}return"transparent"},S=r=>{(Array.isArray(r)?r:[r]).forEach(W)},W=r=>{let e=d.getElementById(r);e&&e.parentElement.removeChild(e)},L=(r,e)=>{let t=d.getElementById(r);if(t)t.innerHTML!==e&&(t.innerHTML=e);else{let n=d.createElement("style");n.setAttribute("id",r),n.innerHTML=e,d.head.appendChild(n)}},R=(r,e,t)=>{let n=d.getElementById(r);if(n)n.innerHTML!==e&&(n.innerHTML=e);else{let o=d.createElement("style");o.setAttribute("id",r),o.innerHTML=e;let i=`addon-backgrounds-grid${t?`-docs-${t}`:""}`,a=d.getElementById(i);a?a.parentElement.insertBefore(o,a):d.head.appendChild(o)}};var H=(r,e)=>{var s;let{globals:t,parameters:n}=e,o=(s=t[l])==null?void 0:s.value,i=n[l],a=(0,p.useMemo)(()=>i.disable?"transparent":F(o,i.values,i.default),[i,o]),u=(0,p.useMemo)(()=>a&&a!=="transparent",[a]),c=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",g=(0,p.useMemo)(()=>{let m="transition: background-color 0.3s;";return`
+      `)}return"transparent"},k=e=>{(Array.isArray(e)?e:[e]).forEach(O)},O=e=>{let r=d.getElementById(e);r&&r.parentElement.removeChild(r)},C=(e,r)=>{let t=d.getElementById(e);if(t)t.innerHTML!==r&&(t.innerHTML=r);else{let n=d.createElement("style");n.setAttribute("id",e),n.innerHTML=r,d.head.appendChild(n)}},F=(e,r,t)=>{let n=d.getElementById(e);if(n)n.innerHTML!==r&&(n.innerHTML=r);else{let o=d.createElement("style");o.setAttribute("id",e),o.innerHTML=r;let i=`addon-backgrounds-grid${t?`-docs-${t}`:""}`,a=d.getElementById(i);a?a.parentElement.insertBefore(o,a):d.head.appendChild(o)}};var T=(e,r)=>{var x;let{globals:t,parameters:n}=r,o=(x=t[p])==null?void 0:x.value,i=n[p],a=(0,g.useMemo)(()=>i.disable?"transparent":v(o,i.values,i.default),[i,o]),s=(0,g.useMemo)(()=>a&&a!=="transparent",[a]),c=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",u=(0,g.useMemo)(()=>{let l="transition: background-color 0.3s;";return`
       ${c} {
         background: ${a} !important;
-        ${C()?"":m}
+        ${h()?"":l}
       }
-    `},[a,c]);return(0,p.useEffect)(()=>{let m=e.viewMode==="docs"?`addon-backgrounds-docs-${e.id}`:"addon-backgrounds-color";if(!u){S(m);return}R(m,g,e.viewMode==="docs"?e.id:null)},[u,g,e]),r()};var P=require("ts-dedent"),z=w(require("util-deprecate")),$=require("@storybook/addons");var q=(0,z.default)(()=>{},P.dedent`
-    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
-  `),I=(r,e)=>{var M,E;let{globals:t,parameters:n}=e,o=n[l].grid,i=((M=t[l])==null?void 0:M.grid)===!0&&o.disable!==!0,{cellAmount:a,cellSize:u,opacity:c}=o,g=e.viewMode==="docs",s;(E=n.grid)!=null&&E.cellSize?(s=n.grid.cellSize,q()):s=u;let A=n.layout===void 0||n.layout==="padded"?16:0,f=o.offsetX??(g?20:A),y=o.offsetY??(g?20:A),x=(0,$.useMemo)(()=>{let b=e.viewMode==="docs"?`#anchor--${e.id} .docs-story`:".sb-show-main",_=[`${s*a}px ${s*a}px`,`${s*a}px ${s*a}px`,`${s}px ${s}px`,`${s}px ${s}px`].join(", ");return`
-      ${b} {
-        background-size: ${_} !important;
-        background-position: ${f}px ${y}px, ${f}px ${y}px, ${f}px ${y}px, ${f}px ${y}px !important;
+    `},[a,c]);return(0,g.useEffect)(()=>{let l=r.viewMode==="docs"?`addon-backgrounds-docs-${r.id}`:"addon-backgrounds-color";if(!s){k(l);return}F(l,u,r.viewMode==="docs"?r.id:null)},[s,u,r]),e()};var $=require("@storybook/addons");var L=(e,r)=>{var M;let{globals:t,parameters:n}=r,o=n[p].grid,i=((M=t[p])==null?void 0:M.grid)===!0&&o.disable!==!0,{cellAmount:a,cellSize:s,opacity:c}=o,u=r.viewMode==="docs",l=n.layout===void 0||n.layout==="padded"?16:0,m=o.offsetX??(u?20:l),f=o.offsetY??(u?20:l),A=(0,$.useMemo)(()=>{let y=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",R=[`${s*a}px ${s*a}px`,`${s*a}px ${s*a}px`,`${s}px ${s}px`,`${s}px ${s}px`].join(", ");return`
+      ${y} {
+        background-size: ${R} !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, ${c}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${c}) 1px, transparent 1px),
          linear-gradient(rgba(130, 130, 130, ${c/2}) 1px, transparent 1px),
          linear-gradient(90deg, rgba(130, 130, 130, ${c/2}) 1px, transparent 1px) !important;
       }
-    `},[s]);return(0,$.useEffect)(()=>{let b=e.viewMode==="docs"?`addon-backgrounds-grid-docs-${e.id}`:"addon-backgrounds-grid";if(!i){S(b);return}L(b,x)},[i,x,e]),r()};var J=[I,H],Q={backgrounds:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}};0&&(module.exports={decorators,parameters});
+    `},[s]);return(0,$.useEffect)(()=>{let y=r.viewMode==="docs"?`addon-backgrounds-grid-docs-${r.id}`:"addon-backgrounds-grid";if(!i){k(y);return}C(y,A)},[i,A,r]),e()};var U=[L,T],j={backgrounds:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}};0&&(module.exports={decorators,parameters});

package/dist/preview.mjs

@@ -1,21 +1,16 @@
-import{b as d,c as S,d as $,e as m,f as A,g as x}from"./chunk-OCW2MZFJ.mjs";import{useMemo as f,useEffect as v}from"@storybook/addons";var h=(g,r)=>{let{globals:b,parameters:t}=r,a=b[d]?.value,n=t[d],e=f(()=>n.disable?"transparent":$(a,n.values,n.default),[n,a]),c=f(()=>e&&e!=="transparent",[e]),s=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",i=f(()=>{let o="transition: background-color 0.3s;";return`
-      ${s} {
-        background: ${e} !important;
-        ${S()?"":o}
+import{b as s,c as $,d as S,e as m,f as A,g as x}from"./chunk-OCW2MZFJ.mjs";import{useMemo as f,useEffect as C}from"@storybook/addons";var F=(g,o)=>{let{globals:y,parameters:d}=o,e=y[s]?.value,a=d[s],t=f(()=>a.disable?"transparent":S(e,a.values,a.default),[a,e]),r=f(()=>t&&t!=="transparent",[t]),n=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",i=f(()=>{let c="transition: background-color 0.3s;";return`
+      ${n} {
+        background: ${t} !important;
+        ${$()?"":c}
       }
-    `},[e,s]);return v(()=>{let o=r.viewMode==="docs"?`addon-backgrounds-docs-${r.id}`:"addon-backgrounds-color";if(!c){m(o);return}x(o,i,r.viewMode==="docs"?r.id:null)},[c,i,r]),g()};import{dedent as z}from"ts-dedent";import C from"util-deprecate";import{useMemo as B,useEffect as P}from"@storybook/addons";var R=C(()=>{},z`
-    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
-  `),F=(g,r)=>{let{globals:b,parameters:t}=r,a=t[d].grid,n=b[d]?.grid===!0&&a.disable!==!0,{cellAmount:e,cellSize:c,opacity:s}=a,i=r.viewMode==="docs",o;t.grid?.cellSize?(o=t.grid.cellSize,R()):o=c;let y=t.layout===void 0||t.layout==="padded"?16:0,l=a.offsetX??(i?20:y),p=a.offsetY??(i?20:y),k=B(()=>{let u=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",M=[`${o*e}px ${o*e}px`,`${o*e}px ${o*e}px`,`${o}px ${o}px`,`${o}px ${o}px`].join(", ");return`
+    `},[t,n]);return C(()=>{let c=o.viewMode==="docs"?`addon-backgrounds-docs-${o.id}`:"addon-backgrounds-color";if(!r){m(c);return}x(c,i,o.viewMode==="docs"?o.id:null)},[r,i,o]),g()};import{useMemo as h,useEffect as B}from"@storybook/addons";var v=(g,o)=>{let{globals:y,parameters:d}=o,e=d[s].grid,a=y[s]?.grid===!0&&e.disable!==!0,{cellAmount:t,cellSize:r,opacity:n}=e,i=o.viewMode==="docs",b=d.layout===void 0||d.layout==="padded"?16:0,p=e.offsetX??(i?20:b),l=e.offsetY??(i?20:b),k=h(()=>{let u=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",M=[`${r*t}px ${r*t}px`,`${r*t}px ${r*t}px`,`${r}px ${r}px`,`${r}px ${r}px`].join(", ");return`
       ${u} {
         background-size: ${M} !important;
-        background-position: ${l}px ${p}px, ${l}px ${p}px, ${l}px ${p}px, ${l}px ${p}px !important;
+        background-position: ${p}px ${l}px, ${p}px ${l}px, ${p}px ${l}px, ${p}px ${l}px !important;
         background-blend-mode: difference !important;
-        background-image: linear-gradient(rgba(130, 130, 130, ${s}) 1px, transparent 1px),
-         linear-gradient(90deg, rgba(130, 130, 130, ${s}) 1px, transparent 1px),
-         linear-gradient(rgba(130, 130, 130, ${s/2}) 1px, transparent 1px),
-         linear-gradient(90deg, rgba(130, 130, 130, ${s/2}) 1px, transparent 1px) !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${n}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${n}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${n/2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${n/2}) 1px, transparent 1px) !important;
       }
-    `},[o]);return P(()=>{let u=r.viewMode==="docs"?`addon-backgrounds-grid-docs-${r.id}`:"addon-backgrounds-grid";if(!n){m(u);return}A(u,k)},[n,k,r]),g()};var X=[F,h],W={backgrounds:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}};export{X as decorators,W as parameters};
+    `},[r]);return B(()=>{let u=o.viewMode==="docs"?`addon-backgrounds-grid-docs-${o.id}`:"addon-backgrounds-grid";if(!a){m(u);return}A(u,k)},[a,k,o]),g()};var N=[v,F],O={backgrounds:{grid:{cellSize:20,opacity:.5,cellAmount:5},values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}};export{N as decorators,O as parameters};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.37",
+  "version": "7.0.0-alpha.39",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",
@@ -62,17 +62,16 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.37",
-    "@storybook/api": "7.0.0-alpha.37",
-    "@storybook/client-logger": "7.0.0-alpha.37",
-    "@storybook/components": "7.0.0-alpha.37",
-    "@storybook/core-events": "7.0.0-alpha.37",
+    "@storybook/addons": "7.0.0-alpha.39",
+    "@storybook/api": "7.0.0-alpha.39",
+    "@storybook/client-logger": "7.0.0-alpha.39",
+    "@storybook/components": "7.0.0-alpha.39",
+    "@storybook/core-events": "7.0.0-alpha.39",
     "@storybook/csf": "0.0.2--canary.49.258942b.0",
-    "@storybook/theming": "7.0.0-alpha.37",
+    "@storybook/theming": "7.0.0-alpha.39",
     "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.6.3"
@@ -99,7 +98,7 @@
       "./src/preview.tsx"
     ]
   },
-  "gitHead": "82667a655108283aafc828427f00bb3590a334e5",
+  "gitHead": "47386bd49d141ea70daac41ab3e4d52749fc5da9",
   "storybook": {
     "displayName": "Backgrounds",
     "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",

package/register.js

@@ -1,6 +0,0 @@
-import { once } from '@storybook/client-logger';
-import './manager';
-
-once.warn(
-  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
-);