@storybook/addon-backgrounds 8.2.0-alpha.0 → 8.2.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/preview.d.ts +2 -2
- package/dist/preview.js +4 -4
- package/dist/preview.mjs +4 -4
- package/package.json +12 -12
package/dist/preview.d.ts
CHANGED
package/dist/preview.js
CHANGED
|
@@ -9,12 +9,12 @@ var PARAM_KEY="backgrounds";var{document,window}=global.global,isReduceMotionEna
|
|
|
9
9
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
10
10
|
These are the available colors for your story based on your configuration:
|
|
11
11
|
${availableColors}.
|
|
12
|
-
`);}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)=>{let{globals
|
|
12
|
+
`);}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)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[PARAM_KEY]?.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=previewApi.useMemo(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=previewApi.useMemo(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=previewApi.useMemo(()=>`
|
|
13
13
|
${selector} {
|
|
14
14
|
background: ${selectedBackgroundColor} !important;
|
|
15
15
|
${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
|
|
16
16
|
}
|
|
17
|
-
`,[selectedBackgroundColor,selector]);return previewApi.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 withGrid=(StoryFn,context)=>{let{globals
|
|
17
|
+
`,[selectedBackgroundColor,selector]);return previewApi.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 withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[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=previewApi.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 `
|
|
18
18
|
${selector} {
|
|
19
19
|
background-size: ${backgroundSize} !important;
|
|
20
20
|
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
@@ -24,8 +24,8 @@ var PARAM_KEY="backgrounds";var{document,window}=global.global,isReduceMotionEna
|
|
|
24
24
|
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
25
25
|
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
26
26
|
}
|
|
27
|
-
`},[cellSize]);return previewApi.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"}]}},
|
|
27
|
+
`},[cellSize]);return previewApi.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"}]}},initialGlobals={[PARAM_KEY]:null};
|
|
28
28
|
|
|
29
29
|
exports.decorators = decorators;
|
|
30
|
-
exports.
|
|
30
|
+
exports.initialGlobals = initialGlobals;
|
|
31
31
|
exports.parameters = parameters;
|
package/dist/preview.mjs
CHANGED
|
@@ -7,12 +7,12 @@ var PARAM_KEY="backgrounds";var{document,window}=global,isReduceMotionEnabled=()
|
|
|
7
7
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
8
8
|
These are the available colors for your story based on your configuration:
|
|
9
9
|
${availableColors}.
|
|
10
|
-
`);}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)=>{let{globals
|
|
10
|
+
`);}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)=>{let{globals,parameters:parameters2}=context,globalsBackgroundColor=globals[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(()=>`
|
|
11
11
|
${selector} {
|
|
12
12
|
background: ${selectedBackgroundColor} !important;
|
|
13
13
|
${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
|
|
14
14
|
}
|
|
15
|
-
`,[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()};var withGrid=(StoryFn,context)=>{let{globals
|
|
15
|
+
`,[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()};var withGrid=(StoryFn,context)=>{let{globals,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=globals[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=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 `
|
|
16
16
|
${selector} {
|
|
17
17
|
background-size: ${backgroundSize} !important;
|
|
18
18
|
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
@@ -22,6 +22,6 @@ var PARAM_KEY="backgrounds";var{document,window}=global,isReduceMotionEnabled=()
|
|
|
22
22
|
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
23
23
|
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
24
24
|
}
|
|
25
|
-
`},[cellSize]);return 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"}]}},
|
|
25
|
+
`},[cellSize]);return 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"}]}},initialGlobals={[PARAM_KEY]:null};
|
|
26
26
|
|
|
27
|
-
export { decorators,
|
|
27
|
+
export { decorators, initialGlobals, parameters };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "8.2.0-alpha.
|
|
3
|
+
"version": "8.2.0-alpha.10",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -29,13 +29,13 @@
|
|
|
29
29
|
".": {
|
|
30
30
|
"types": "./dist/index.d.ts",
|
|
31
31
|
"node": "./dist/index.js",
|
|
32
|
-
"
|
|
33
|
-
"
|
|
32
|
+
"import": "./dist/index.mjs",
|
|
33
|
+
"require": "./dist/index.js"
|
|
34
34
|
},
|
|
35
35
|
"./preview": {
|
|
36
36
|
"types": "./dist/preview.d.ts",
|
|
37
|
-
"
|
|
38
|
-
"
|
|
37
|
+
"import": "./dist/preview.mjs",
|
|
38
|
+
"require": "./dist/preview.js"
|
|
39
39
|
},
|
|
40
40
|
"./manager": "./dist/manager.js",
|
|
41
41
|
"./register": "./dist/manager.js",
|
|
@@ -61,13 +61,13 @@
|
|
|
61
61
|
"ts-dedent": "^2.0.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@storybook/client-logger": "8.2.0-alpha.
|
|
65
|
-
"@storybook/components": "8.2.0-alpha.
|
|
64
|
+
"@storybook/client-logger": "8.2.0-alpha.10",
|
|
65
|
+
"@storybook/components": "8.2.0-alpha.10",
|
|
66
66
|
"@storybook/icons": "^1.2.5",
|
|
67
|
-
"@storybook/manager-api": "8.2.0-alpha.
|
|
68
|
-
"@storybook/preview-api": "8.2.0-alpha.
|
|
69
|
-
"@storybook/theming": "8.2.0-alpha.
|
|
70
|
-
"@storybook/types": "8.2.0-alpha.
|
|
67
|
+
"@storybook/manager-api": "8.2.0-alpha.10",
|
|
68
|
+
"@storybook/preview-api": "8.2.0-alpha.10",
|
|
69
|
+
"@storybook/theming": "8.2.0-alpha.10",
|
|
70
|
+
"@storybook/types": "8.2.0-alpha.10",
|
|
71
71
|
"react": "^18.2.0",
|
|
72
72
|
"react-dom": "^18.2.0",
|
|
73
73
|
"typescript": "^5.3.2"
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"./src/preview.tsx"
|
|
87
87
|
]
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|
|
90
90
|
"storybook": {
|
|
91
91
|
"displayName": "Backgrounds",
|
|
92
92
|
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|