@storybook/addon-backgrounds 7.6.0-alpha.6 → 7.6.0-beta.0
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/index.js +5 -1
- package/dist/manager.js +11 -2
- package/dist/preview.js +11 -4
- package/package.json +21 -53
- package/dist/chunk-OKHCZ3TL.mjs +0 -11
- package/dist/manager.d.ts +0 -2
- package/dist/manager.mjs +0 -9
- package/dist/preview.d.ts +0 -21
- package/dist/preview.mjs +0 -21
package/dist/index.js
CHANGED
|
@@ -1 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var src_default={};
|
|
4
|
+
|
|
5
|
+
module.exports = src_default;
|
package/dist/manager.js
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
import React, { memo, useState, useMemo, useCallback, Fragment } from 'react';
|
|
2
|
+
import { useParameter, useGlobals, addons, types } from '@storybook/manager-api';
|
|
3
|
+
import memoize from 'memoizerific';
|
|
4
|
+
import { logger } from '@storybook/client-logger';
|
|
5
|
+
import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
|
|
6
|
+
import { styled } from '@storybook/theming';
|
|
7
|
+
import '@storybook/global';
|
|
8
|
+
import { dedent } from 'ts-dedent';
|
|
9
|
+
|
|
10
|
+
var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var ColorIcon=styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var 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`
|
|
2
11
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
3
12
|
These are the available colors for your story based on your configuration:
|
|
4
13
|
${availableColors}.
|
|
5
|
-
`)}return"transparent"};var createBackgroundSelectorItem=(
|
|
14
|
+
`);}return "transparent"};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),[isTooltipVisible,setIsTooltipVisible]=useState(!1),[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",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide();})}),onVisibleChange:setIsTooltipVisible},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"||isTooltipVisible},React.createElement(Icons,{icon:"photo"}))))});var GridSelector=memo(function(){let[globals,updateGlobals]=useGlobals(),{grid}=useParameter(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React.createElement(IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React.createElement(Icons,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React.createElement(Fragment,null,React.createElement(BackgroundSelector,null),React.createElement(GridSelector,null))});});
|
package/dist/preview.js
CHANGED
|
@@ -1,13 +1,18 @@
|
|
|
1
|
-
|
|
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`
|
|
2
7
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
3
8
|
These are the available colors for your story based on your configuration:
|
|
4
9
|
${availableColors}.
|
|
5
|
-
`)}return"transparent"},clearStyles=selector=>{(Array.isArray(selector)?selector:[selector]).forEach(clearStyle)},clearStyle=selector=>{
|
|
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(()=>{let transitionStyle="transition: background-color 0.3s;";return `
|
|
6
11
|
${selector} {
|
|
7
12
|
background: ${selectedBackgroundColor} !important;
|
|
8
13
|
${isReduceMotionEnabled()?"":transitionStyle}
|
|
9
14
|
}
|
|
10
|
-
`},[selectedBackgroundColor,selector]);return
|
|
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 `
|
|
11
16
|
${selector} {
|
|
12
17
|
background-size: ${backgroundSize} !important;
|
|
13
18
|
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
@@ -17,4 +22,6 @@
|
|
|
17
22
|
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
18
23
|
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
19
24
|
}
|
|
20
|
-
`},[cellSize]);return
|
|
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": "7.6.0-
|
|
3
|
+
"version": "7.6.0-beta.0",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -32,39 +32,14 @@
|
|
|
32
32
|
"require": "./dist/index.js",
|
|
33
33
|
"import": "./dist/index.mjs"
|
|
34
34
|
},
|
|
35
|
-
"./manager":
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
"import": "./dist/manager.mjs"
|
|
39
|
-
},
|
|
40
|
-
"./preview": {
|
|
41
|
-
"types": "./dist/preview.d.ts",
|
|
42
|
-
"require": "./dist/preview.js",
|
|
43
|
-
"import": "./dist/preview.mjs"
|
|
44
|
-
},
|
|
45
|
-
"./register": {
|
|
46
|
-
"types": "./dist/manager.d.ts",
|
|
47
|
-
"require": "./dist/manager.js",
|
|
48
|
-
"import": "./dist/manager.mjs"
|
|
49
|
-
},
|
|
35
|
+
"./manager": "./dist/manager.js",
|
|
36
|
+
"./preview": "./dist/preview.js",
|
|
37
|
+
"./register": "./dist/manager.js",
|
|
50
38
|
"./package.json": "./package.json"
|
|
51
39
|
},
|
|
52
40
|
"main": "dist/index.js",
|
|
53
41
|
"module": "dist/index.mjs",
|
|
54
42
|
"types": "dist/index.d.ts",
|
|
55
|
-
"typesVersions": {
|
|
56
|
-
"*": {
|
|
57
|
-
"*": [
|
|
58
|
-
"dist/index.d.ts"
|
|
59
|
-
],
|
|
60
|
-
"manager": [
|
|
61
|
-
"dist/manager.d.ts"
|
|
62
|
-
],
|
|
63
|
-
"preview": [
|
|
64
|
-
"dist/preview.d.ts"
|
|
65
|
-
]
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
43
|
"files": [
|
|
69
44
|
"dist/**/*",
|
|
70
45
|
"README.md",
|
|
@@ -73,43 +48,36 @@
|
|
|
73
48
|
"!src/**/*"
|
|
74
49
|
],
|
|
75
50
|
"scripts": {
|
|
76
|
-
"check": "../../../scripts/prepare/check.ts",
|
|
77
|
-
"prep": "../../../scripts/prepare/bundle.ts"
|
|
51
|
+
"check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
|
|
52
|
+
"prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
|
|
78
53
|
},
|
|
79
54
|
"dependencies": {
|
|
80
|
-
"@storybook/client-logger": "7.6.0-alpha.6",
|
|
81
|
-
"@storybook/components": "7.6.0-alpha.6",
|
|
82
|
-
"@storybook/core-events": "7.6.0-alpha.6",
|
|
83
55
|
"@storybook/global": "^5.0.0",
|
|
84
|
-
"@storybook/manager-api": "7.6.0-alpha.6",
|
|
85
|
-
"@storybook/preview-api": "7.6.0-alpha.6",
|
|
86
|
-
"@storybook/theming": "7.6.0-alpha.6",
|
|
87
|
-
"@storybook/types": "7.6.0-alpha.6",
|
|
88
56
|
"memoizerific": "^1.11.3",
|
|
89
57
|
"ts-dedent": "^2.0.0"
|
|
90
58
|
},
|
|
91
59
|
"devDependencies": {
|
|
60
|
+
"@storybook/client-logger": "7.6.0-beta.0",
|
|
61
|
+
"@storybook/components": "7.6.0-beta.0",
|
|
62
|
+
"@storybook/manager-api": "7.6.0-beta.0",
|
|
63
|
+
"@storybook/preview-api": "7.6.0-beta.0",
|
|
64
|
+
"@storybook/theming": "7.6.0-beta.0",
|
|
65
|
+
"@storybook/types": "7.6.0-beta.0",
|
|
66
|
+
"react": "^16.8.0",
|
|
67
|
+
"react-dom": "^16.8.0",
|
|
92
68
|
"typescript": "~4.9.3"
|
|
93
69
|
},
|
|
94
|
-
"peerDependencies": {
|
|
95
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
96
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
97
|
-
},
|
|
98
|
-
"peerDependenciesMeta": {
|
|
99
|
-
"react": {
|
|
100
|
-
"optional": true
|
|
101
|
-
},
|
|
102
|
-
"react-dom": {
|
|
103
|
-
"optional": true
|
|
104
|
-
}
|
|
105
|
-
},
|
|
106
70
|
"publishConfig": {
|
|
107
71
|
"access": "public"
|
|
108
72
|
},
|
|
109
73
|
"bundler": {
|
|
110
|
-
"
|
|
111
|
-
"./src/index.ts"
|
|
112
|
-
|
|
74
|
+
"exportEntries": [
|
|
75
|
+
"./src/index.ts"
|
|
76
|
+
],
|
|
77
|
+
"managerEntries": [
|
|
78
|
+
"./src/manager.tsx"
|
|
79
|
+
],
|
|
80
|
+
"previewEntries": [
|
|
113
81
|
"./src/preview.tsx"
|
|
114
82
|
]
|
|
115
83
|
},
|
package/dist/chunk-OKHCZ3TL.mjs
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { global } from '@storybook/global';
|
|
2
|
-
import { dedent } from 'ts-dedent';
|
|
3
|
-
import { logger } from '@storybook/client-logger';
|
|
4
|
-
|
|
5
|
-
var ADDON_ID="storybook/background",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`
|
|
6
|
-
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
7
|
-
These are the available colors for your story based on your configuration:
|
|
8
|
-
${availableColors}.
|
|
9
|
-
`);}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);}};
|
|
10
|
-
|
|
11
|
-
export { ADDON_ID, PARAM_KEY, addBackgroundStyle, addGridStyle, clearStyles, getBackgroundColorByName, isReduceMotionEnabled };
|
package/dist/manager.d.ts
DELETED
package/dist/manager.mjs
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { PARAM_KEY, getBackgroundColorByName, ADDON_ID } from './chunk-OKHCZ3TL.mjs';
|
|
2
|
-
import React, { memo, useState, useMemo, useCallback, Fragment } from 'react';
|
|
3
|
-
import { useParameter, useGlobals, addons, types } from '@storybook/manager-api';
|
|
4
|
-
import memoize from 'memoizerific';
|
|
5
|
-
import { logger } from '@storybook/client-logger';
|
|
6
|
-
import { WithTooltip, TooltipLinkList, IconButton, Icons } from '@storybook/components';
|
|
7
|
-
import { styled } from '@storybook/theming';
|
|
8
|
-
|
|
9
|
-
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),[isTooltipVisible,setIsTooltipVisible]=useState(!1),[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",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide();})}),onVisibleChange:setIsTooltipVisible},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"||isTooltipVisible},React.createElement(Icons,{icon:"photo"}))))});var GridSelector=memo(function(){let[globals,updateGlobals]=useGlobals(),{grid}=useParameter(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React.createElement(IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React.createElement(Icons,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React.createElement(Fragment,null,React.createElement(BackgroundSelector,null),React.createElement(GridSelector,null))});});
|
package/dist/preview.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
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.mjs
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { PARAM_KEY, getBackgroundColorByName, isReduceMotionEnabled, clearStyles, addBackgroundStyle, addGridStyle } from './chunk-OKHCZ3TL.mjs';
|
|
2
|
-
import { useMemo, useEffect } from '@storybook/preview-api';
|
|
3
|
-
|
|
4
|
-
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 `
|
|
5
|
-
${selector} {
|
|
6
|
-
background: ${selectedBackgroundColor} !important;
|
|
7
|
-
${isReduceMotionEnabled()?"":transitionStyle}
|
|
8
|
-
}
|
|
9
|
-
`},[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 `
|
|
10
|
-
${selector} {
|
|
11
|
-
background-size: ${backgroundSize} !important;
|
|
12
|
-
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
13
|
-
background-blend-mode: difference !important;
|
|
14
|
-
background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
15
|
-
linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
16
|
-
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
17
|
-
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
18
|
-
}
|
|
19
|
-
`},[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};
|
|
20
|
-
|
|
21
|
-
export { decorators, globals, parameters };
|