@storybook/addon-backgrounds 7.0.0-alpha.44 → 7.0.0-alpha.46
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var l="storybook/background",
|
|
1
|
+
var l="storybook/background",y="backgrounds";var u={UPDATE:`${l}/update`};import c from"global";import{dedent as g}from"ts-dedent";import{logger as m}from"@storybook/client-logger";var{document:i,window:p}=c,B=()=>p.matchMedia("(prefers-reduced-motion: reduce)").matches,H=(e,t=[],n)=>{if(e==="transparent")return"transparent";if(t.find(o=>o.value===e))return e;let r=t.find(o=>o.name===n);if(r)return r.value;if(n){let o=t.map(s=>s.name).join(", ");m.warn(g`
|
|
2
2
|
Backgrounds Addon: could not find the default color "${n}".
|
|
3
3
|
These are the available colors for your story based on your configuration:
|
|
4
4
|
${o}.
|
|
5
|
-
`)}return"transparent"},L=e=>{(Array.isArray(e)?e:[e]).forEach(f)},f=e=>{let t=i.getElementById(e);t&&t.parentElement.removeChild(t)},h=(e,t)=>{let n=i.getElementById(e);if(n)n.innerHTML!==t&&(n.innerHTML=t);else{let r=i.createElement("style");r.setAttribute("id",e),r.innerHTML=t,i.head.appendChild(r)}},A=(e,t,n)=>{let r=i.getElementById(e);if(r)r.innerHTML!==t&&(r.innerHTML=t);else{let o=i.createElement("style");o.setAttribute("id",e),o.innerHTML=t;let s=`addon-backgrounds-grid${n?`-docs-${n}`:""}`,a=i.getElementById(s);a?a.parentElement.insertBefore(o,a):i.head.appendChild(o)}};export{l as a,
|
|
5
|
+
`)}return"transparent"},L=e=>{(Array.isArray(e)?e:[e]).forEach(f)},f=e=>{let t=i.getElementById(e);t&&t.parentElement.removeChild(t)},h=(e,t)=>{let n=i.getElementById(e);if(n)n.innerHTML!==t&&(n.innerHTML=t);else{let r=i.createElement("style");r.setAttribute("id",e),r.innerHTML=t,i.head.appendChild(r)}},A=(e,t,n)=>{let r=i.getElementById(e);if(r)r.innerHTML!==t&&(r.innerHTML=t);else{let o=i.createElement("style");o.setAttribute("id",e),o.innerHTML=t;let s=`addon-backgrounds-grid${n?`-docs-${n}`:""}`,a=i.getElementById(s);a?a.parentElement.insertBefore(o,a):i.head.appendChild(o)}};export{l as a,y as b,B as c,H as d,L as e,h as f,A as g};
|
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,
|
|
2
|
-
Backgrounds Addon: could not find the default color "${
|
|
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/addons");var p="storybook/background",a="backgrounds";var $={UPDATE:`${p}/update`};var i=c(require("react")),b=c(require("memoizerific")),u=require("@storybook/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}".
|
|
3
3
|
These are the available colors for your story based on your configuration:
|
|
4
|
-
${
|
|
5
|
-
`)}return"transparent"};var x=(0,
|
|
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/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
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a as c,b as e,d as u}from"./chunk-
|
|
1
|
+
import{a as c,b as e,d as u}from"./chunk-JUUG26P2.mjs";import d,{Fragment as Y}from"react";import{addons as h,types as W}from"@storybook/addons";import s,{Fragment as I,useCallback as S,useMemo as G,memo as F}from"react";import k from"memoizerific";import{useParameter as P,useGlobals as O}from"@storybook/api";import{logger as _}from"@storybook/client-logger";import{Icons as D,IconButton as v,WithTooltip as K,TooltipLinkList as N}from"@storybook/components";import{styled as A}from"@storybook/theming";var p=A.span(({background:r})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background:r}),({theme:r})=>({boxShadow:`${r.appBorderColor} 0 0 0 1px inset`}));var f=k(1e3)((r,o,t,n,i,a)=>({id:r||o,title:o,onClick:()=>{i({selected:t,name:o})},value:t,right:n?s.createElement(p,{background:t}):void 0,active:a})),x=k(10)((r,o,t)=>{let n=r.map(({name:i,value:a})=>f(null,i,a,!0,t,a===o));return o!=="transparent"?[f("reset","Clear background","transparent",null,t,!1),...n]:n}),T={default:null,disable:!0,values:[]},b=F(function(){let o=P(e,T),[t,n]=O(),i=t[e]?.value,a=G(()=>u(i,o.values,o.default),[o,i]);Array.isArray(o)&&_.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 y=S(l=>{n({[e]:{...t[e],value:l}})},[o,t,n]);return o.disable?null:s.createElement(I,null,s.createElement(K,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide:l})=>s.createElement(N,{links:x(o.values,a,({selected:g})=>{a!==g&&y(g),l()})})},s.createElement(v,{key:"background",title:"Change the background of the preview",active:a!=="transparent"},s.createElement(D,{icon:"photo"}))))});import B,{memo as E}from"react";import{useGlobals as M,useParameter as w}from"@storybook/api";import{Icons as L,IconButton as U}from"@storybook/components";var C=E(function(){let[o,t]=M(),{grid:n}=w(e,{grid:{disable:!1}});if(n?.disable)return null;let i=o[e]?.grid||!1;return B.createElement(U,{key:"background",active:i,title:"Apply a grid to the preview",onClick:()=>t({[e]:{...o[e],grid:!i}})},B.createElement(L,{icon:"grid"}))});h.register(c,()=>{h.add(c,{title:"Backgrounds",type:W.TOOL,match:({viewMode:r})=>!!(r&&r.match(/^(story|docs)$/)),render:()=>d.createElement(Y,null,d.createElement(b,null),d.createElement(C,null))})});
|
package/dist/preview.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var P=Object.create;var b=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(
|
|
2
|
-
Backgrounds Addon: could not find the default color "${
|
|
1
|
+
var P=Object.create;var b=Object.defineProperty;var H=Object.getOwnPropertyDescriptor;var _=Object.getOwnPropertyNames;var K=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var D=(e,r)=>{for(var o in r)b(e,o,{get:r[o],enumerable:!0})},S=(e,r,o,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of _(r))!Y.call(e,t)&&t!==o&&b(e,t,{get:()=>r[t],enumerable:!(n=H(r,t))||n.enumerable});return e};var G=(e,r,o)=>(o=e!=null?P(K(e)):{},S(r||!e||!e.__esModule?b(o,"default",{value:e,enumerable:!0}):o,e)),I=e=>S(b({},"__esModule",{value:!0}),e);var q={};D(q,{decorators:()=>U,globals:()=>X,parameters:()=>j});module.exports=I(q);var m=require("@storybook/addons");var z="storybook/background",d="backgrounds";var Q={UPDATE:`${z}/update`};var E=G(require("global")),w=require("ts-dedent"),B=require("@storybook/client-logger"),{document:c,window:N}=E.default,h=()=>N.matchMedia("(prefers-reduced-motion: reduce)").matches,v=(e,r=[],o)=>{if(e==="transparent")return"transparent";if(r.find(t=>t.value===e))return e;let n=r.find(t=>t.name===o);if(n)return n.value;if(o){let t=r.map(i=>i.name).join(", ");B.logger.warn(w.dedent`
|
|
2
|
+
Backgrounds Addon: could not find the default color "${o}".
|
|
3
3
|
These are the available colors for your story based on your configuration:
|
|
4
|
-
${
|
|
5
|
-
`)}return"transparent"},k=
|
|
4
|
+
${t}.
|
|
5
|
+
`)}return"transparent"},k=e=>{(Array.isArray(e)?e:[e]).forEach(O)},O=e=>{let r=c.getElementById(e);r&&r.parentElement.removeChild(r)},C=(e,r)=>{let o=c.getElementById(e);if(o)o.innerHTML!==r&&(o.innerHTML=r);else{let n=c.createElement("style");n.setAttribute("id",e),n.innerHTML=r,c.head.appendChild(n)}},F=(e,r,o)=>{let n=c.getElementById(e);if(n)n.innerHTML!==r&&(n.innerHTML=r);else{let t=c.createElement("style");t.setAttribute("id",e),t.innerHTML=r;let i=`addon-backgrounds-grid${o?`-docs-${o}`:""}`,a=c.getElementById(i);a?a.parentElement.insertBefore(t,a):c.head.appendChild(t)}};var T=(e,r)=>{var A;let{globals:o,parameters:n}=r,t=(A=o[d])==null?void 0:A.value,i=n[d],a=(0,m.useMemo)(()=>i.disable?"transparent":v(t,i.values,i.default),[i,t]),s=(0,m.useMemo)(()=>a&&a!=="transparent",[a]),l=r.viewMode==="docs"?`#anchor--${r.id} .docs-story`:".sb-show-main",g=(0,m.useMemo)(()=>{let p="transition: background-color 0.3s;";return`
|
|
6
6
|
${l} {
|
|
7
7
|
background: ${a} !important;
|
|
8
8
|
${h()?"":p}
|
|
9
9
|
}
|
|
10
|
-
`},[a,l]);return(0,m.useEffect)(()=>{let p=r.viewMode==="docs"?`addon-backgrounds-docs-${r.id}`:"addon-backgrounds-color";if(!s){k(p);return}F(p,g,r.viewMode==="docs"?r.id:null)},[s,g,r]),
|
|
10
|
+
`},[a,l]);return(0,m.useEffect)(()=>{let p=r.viewMode==="docs"?`addon-backgrounds-docs-${r.id}`:"addon-backgrounds-color";if(!s){k(p);return}F(p,g,r.viewMode==="docs"?r.id:null)},[s,g,r]),e()};var $=require("@storybook/addons");var L=(e,r)=>{var M;let{globals:o,parameters:n}=r,t=n[d].grid,i=((M=o[d])==null?void 0:M.grid)===!0&&t.disable!==!0,{cellAmount:a,cellSize:s,opacity:l}=t,g=r.viewMode==="docs",p=n.layout===void 0||n.layout==="padded"?16:0,u=t.offsetX??(g?20:p),y=t.offsetY??(g?20:p),x=(0,$.useMemo)(()=>{let f=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`
|
|
11
11
|
${f} {
|
|
12
12
|
background-size: ${R} !important;
|
|
13
13
|
background-position: ${u}px ${y}px, ${u}px ${y}px, ${u}px ${y}px, ${u}px ${y}px !important;
|
|
@@ -17,4 +17,4 @@ var P=Object.create;var b=Object.defineProperty;var H=Object.getOwnPropertyDescr
|
|
|
17
17
|
linear-gradient(rgba(130, 130, 130, ${l/2}) 1px, transparent 1px),
|
|
18
18
|
linear-gradient(90deg, rgba(130, 130, 130, ${l/2}) 1px, transparent 1px) !important;
|
|
19
19
|
}
|
|
20
|
-
`},[s]);return(0,$.useEffect)(()=>{let f=r.viewMode==="docs"?`addon-backgrounds-grid-docs-${r.id}`:"addon-backgrounds-grid";if(!i){k(f);return}C(f,x)},[i,x,r]),
|
|
20
|
+
`},[s]);return(0,$.useEffect)(()=>{let f=r.viewMode==="docs"?`addon-backgrounds-grid-docs-${r.id}`:"addon-backgrounds-grid";if(!i){k(f);return}C(f,x)},[i,x,r]),e()};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
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as e,c as k,d as A,e as m,f as S,g as x}from"./chunk-
|
|
1
|
+
import{b as e,c as k,d as A,e as m,f as S,g as x}from"./chunk-JUUG26P2.mjs";import{useMemo as f,useEffect as C}from"@storybook/addons";var F=(g,o)=>{let{globals:y,parameters:d}=o,a=y[e]?.value,n=d[e],t=f(()=>n.disable?"transparent":A(a,n.values,n.default),[n,a]),r=f(()=>t&&t!=="transparent",[t]),s=o.viewMode==="docs"?`#anchor--${o.id} .docs-story`:".sb-show-main",i=f(()=>{let c="transition: background-color 0.3s;";return`
|
|
2
2
|
${s} {
|
|
3
3
|
background: ${t} !important;
|
|
4
4
|
${k()?"":c}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "7.0.0-alpha.
|
|
3
|
+
"version": "7.0.0-alpha.46",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -62,13 +62,13 @@
|
|
|
62
62
|
"prep": "../../../scripts/prepare/bundle.ts"
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
|
-
"@storybook/addons": "7.0.0-alpha.
|
|
66
|
-
"@storybook/api": "7.0.0-alpha.
|
|
67
|
-
"@storybook/client-logger": "7.0.0-alpha.
|
|
68
|
-
"@storybook/components": "7.0.0-alpha.
|
|
69
|
-
"@storybook/core-events": "7.0.0-alpha.
|
|
70
|
-
"@storybook/theming": "7.0.0-alpha.
|
|
71
|
-
"@storybook/types": "7.0.0-alpha.
|
|
65
|
+
"@storybook/addons": "7.0.0-alpha.46",
|
|
66
|
+
"@storybook/api": "7.0.0-alpha.46",
|
|
67
|
+
"@storybook/client-logger": "7.0.0-alpha.46",
|
|
68
|
+
"@storybook/components": "7.0.0-alpha.46",
|
|
69
|
+
"@storybook/core-events": "7.0.0-alpha.46",
|
|
70
|
+
"@storybook/theming": "7.0.0-alpha.46",
|
|
71
|
+
"@storybook/types": "7.0.0-alpha.46",
|
|
72
72
|
"global": "^4.4.0",
|
|
73
73
|
"memoizerific": "^1.11.3",
|
|
74
74
|
"ts-dedent": "^2.0.0"
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
"./src/preview.tsx"
|
|
99
99
|
]
|
|
100
100
|
},
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "c64b5be851ed2affac56e1daaac3f453fbe6f230",
|
|
102
102
|
"storybook": {
|
|
103
103
|
"displayName": "Backgrounds",
|
|
104
104
|
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|