@storybook/addon-backgrounds 7.6.0-alpha.5 → 7.6.0-alpha.7
Sign up to get free protection for your applications and to get access to all the features.
- 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-alpha.
|
|
3
|
+
"version": "7.6.0-alpha.7",
|
|
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.5",
|
|
81
|
-
"@storybook/components": "7.6.0-alpha.5",
|
|
82
|
-
"@storybook/core-events": "7.6.0-alpha.5",
|
|
83
55
|
"@storybook/global": "^5.0.0",
|
|
84
|
-
"@storybook/manager-api": "7.6.0-alpha.5",
|
|
85
|
-
"@storybook/preview-api": "7.6.0-alpha.5",
|
|
86
|
-
"@storybook/theming": "7.6.0-alpha.5",
|
|
87
|
-
"@storybook/types": "7.6.0-alpha.5",
|
|
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-alpha.7",
|
|
61
|
+
"@storybook/components": "7.6.0-alpha.7",
|
|
62
|
+
"@storybook/manager-api": "7.6.0-alpha.7",
|
|
63
|
+
"@storybook/preview-api": "7.6.0-alpha.7",
|
|
64
|
+
"@storybook/theming": "7.6.0-alpha.7",
|
|
65
|
+
"@storybook/types": "7.6.0-alpha.7",
|
|
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 };
|