@storybook/addon-backgrounds 8.1.0-alpha.2 → 8.1.0-alpha.3
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.
- package/dist/preview.d.ts +21 -0
- package/dist/preview.js +13 -9
- package/dist/preview.mjs +27 -0
- package/package.json +12 -8
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Addon_DecoratorFunction } from '@storybook/types';
|
|
2
|
+
|
|
3
|
+
declare const decorators: Addon_DecoratorFunction[];
|
|
4
|
+
declare const parameters: {
|
|
5
|
+
backgrounds: {
|
|
6
|
+
grid: {
|
|
7
|
+
cellSize: number;
|
|
8
|
+
opacity: number;
|
|
9
|
+
cellAmount: number;
|
|
10
|
+
};
|
|
11
|
+
values: {
|
|
12
|
+
name: string;
|
|
13
|
+
value: string;
|
|
14
|
+
}[];
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
declare const globals: {
|
|
18
|
+
backgrounds: any;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export { decorators, globals, parameters };
|
package/dist/preview.js
CHANGED
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
import { global } from '@storybook/global';
|
|
3
|
-
import { dedent } from 'ts-dedent';
|
|
4
|
-
import { logger } from '@storybook/client-logger';
|
|
1
|
+
'use strict';
|
|
5
2
|
|
|
6
|
-
var
|
|
3
|
+
var previewApi = require('@storybook/preview-api');
|
|
4
|
+
var global = require('@storybook/global');
|
|
5
|
+
var tsDedent = require('ts-dedent');
|
|
6
|
+
var clientLogger = require('@storybook/client-logger');
|
|
7
|
+
|
|
8
|
+
var PARAM_KEY="backgrounds";var{document,window}=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(", ");clientLogger.logger.warn(tsDedent.dedent`
|
|
7
9
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
8
10
|
These are the available colors for your story based on your configuration:
|
|
9
11
|
${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: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(()=>`
|
|
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:globals2,parameters:parameters2}=context,globalsBackgroundColor=globals2[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(()=>`
|
|
11
13
|
${selector} {
|
|
12
14
|
background: ${selectedBackgroundColor} !important;
|
|
13
15
|
${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
|
|
14
16
|
}
|
|
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: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=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 `
|
|
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: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=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 `
|
|
16
18
|
${selector} {
|
|
17
19
|
background-size: ${backgroundSize} !important;
|
|
18
20
|
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
@@ -22,6 +24,8 @@ var PARAM_KEY="backgrounds";var{document,window}=global,isReduceMotionEnabled=()
|
|
|
22
24
|
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
23
25
|
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
24
26
|
}
|
|
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"}]}},globals={[PARAM_KEY]:null};
|
|
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"}]}},globals={[PARAM_KEY]:null};
|
|
26
28
|
|
|
27
|
-
|
|
29
|
+
exports.decorators = decorators;
|
|
30
|
+
exports.globals = globals;
|
|
31
|
+
exports.parameters = parameters;
|
package/dist/preview.mjs
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useMemo, useEffect } from '@storybook/preview-api';
|
|
2
|
+
import { global } from '@storybook/global';
|
|
3
|
+
import { dedent } from 'ts-dedent';
|
|
4
|
+
import { logger } from '@storybook/client-logger';
|
|
5
|
+
|
|
6
|
+
var PARAM_KEY="backgrounds";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`
|
|
7
|
+
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
8
|
+
These are the available colors for your story based on your configuration:
|
|
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: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(()=>`
|
|
11
|
+
${selector} {
|
|
12
|
+
background: ${selectedBackgroundColor} !important;
|
|
13
|
+
${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
|
|
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: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=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
|
+
${selector} {
|
|
17
|
+
background-size: ${backgroundSize} !important;
|
|
18
|
+
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
19
|
+
background-blend-mode: difference !important;
|
|
20
|
+
background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
21
|
+
linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
22
|
+
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
23
|
+
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
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"}]}},globals={[PARAM_KEY]:null};
|
|
26
|
+
|
|
27
|
+
export { decorators, globals, parameters };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "8.1.0-alpha.
|
|
3
|
+
"version": "8.1.0-alpha.3",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -32,8 +32,12 @@
|
|
|
32
32
|
"require": "./dist/index.js",
|
|
33
33
|
"import": "./dist/index.mjs"
|
|
34
34
|
},
|
|
35
|
+
"./preview": {
|
|
36
|
+
"types": "./dist/preview.d.ts",
|
|
37
|
+
"require": "./dist/preview.js",
|
|
38
|
+
"import": "./dist/preview.mjs"
|
|
39
|
+
},
|
|
35
40
|
"./manager": "./dist/manager.js",
|
|
36
|
-
"./preview": "./dist/preview.js",
|
|
37
41
|
"./register": "./dist/manager.js",
|
|
38
42
|
"./package.json": "./package.json"
|
|
39
43
|
},
|
|
@@ -57,13 +61,13 @@
|
|
|
57
61
|
"ts-dedent": "^2.0.0"
|
|
58
62
|
},
|
|
59
63
|
"devDependencies": {
|
|
60
|
-
"@storybook/client-logger": "8.1.0-alpha.
|
|
61
|
-
"@storybook/components": "8.1.0-alpha.
|
|
64
|
+
"@storybook/client-logger": "8.1.0-alpha.3",
|
|
65
|
+
"@storybook/components": "8.1.0-alpha.3",
|
|
62
66
|
"@storybook/icons": "^1.2.5",
|
|
63
|
-
"@storybook/manager-api": "8.1.0-alpha.
|
|
64
|
-
"@storybook/preview-api": "8.1.0-alpha.
|
|
65
|
-
"@storybook/theming": "8.1.0-alpha.
|
|
66
|
-
"@storybook/types": "8.1.0-alpha.
|
|
67
|
+
"@storybook/manager-api": "8.1.0-alpha.3",
|
|
68
|
+
"@storybook/preview-api": "8.1.0-alpha.3",
|
|
69
|
+
"@storybook/theming": "8.1.0-alpha.3",
|
|
70
|
+
"@storybook/types": "8.1.0-alpha.3",
|
|
67
71
|
"react": "^18.2.0",
|
|
68
72
|
"react-dom": "^18.2.0",
|
|
69
73
|
"typescript": "^5.3.2"
|