@storybook/addon-backgrounds 8.3.0-alpha.3 → 8.3.0-alpha.5
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/manager.js +6 -7
- package/dist/preview.d.ts +25 -2
- package/dist/preview.js +18 -4
- package/dist/preview.mjs +19 -5
- package/package.json +7 -7
package/dist/manager.js
CHANGED
|
@@ -1,15 +1,14 @@
|
|
|
1
|
-
import React, { memo, useState,
|
|
1
|
+
import React, { memo, useState, useCallback, Fragment, useMemo } from 'react';
|
|
2
2
|
import { useParameter, useGlobals, addons, types } from 'storybook/internal/manager-api';
|
|
3
|
-
import
|
|
3
|
+
import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
|
|
4
|
+
import { GridIcon, RefreshIcon, CircleIcon, PhotoIcon } from '@storybook/icons';
|
|
4
5
|
import { logger } from 'storybook/internal/client-logger';
|
|
5
|
-
import
|
|
6
|
-
import { PhotoIcon, GridIcon } from '@storybook/icons';
|
|
6
|
+
import memoize from 'memoizerific';
|
|
7
7
|
import { styled } from 'storybook/internal/theming';
|
|
8
|
-
import '@storybook/global';
|
|
9
8
|
import { dedent } from 'ts-dedent';
|
|
10
9
|
|
|
11
|
-
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`
|
|
10
|
+
var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var emptyBackgroundMap={},BackgroundTool=memo(function(){let config=useParameter(PARAM_KEY),[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),{options=emptyBackgroundMap,disable=!0}=config||{};if(disable)return null;let data=globals[PARAM_KEY]||{},backgroundName=data.value,isGridActive=data.grid||!1,item=options[backgroundName],isLocked=!!storyGlobals?.[PARAM_KEY],length=Object.keys(options).length;return React.createElement(Pure,{length,backgroundMap:options,item,updateGlobals,backgroundName,setIsTooltipVisible,isLocked,isGridActive,isTooltipVisible})}),Pure=memo(function(props){let{item,length,updateGlobals,setIsTooltipVisible,backgroundMap,backgroundName,isLocked,isGridActive:isGrid,isTooltipVisible}=props,update=useCallback(input=>{updateGlobals({[PARAM_KEY]:input});},[updateGlobals]);return React.createElement(Fragment,null,React.createElement(IconButton,{key:"grid",active:isGrid,disabled:isLocked,title:"Apply a grid to the preview",onClick:()=>update({value:backgroundName,grid:!isGrid})},React.createElement(GridIcon,null)),length>0?React.createElement(WithTooltip,{key:"background",placement:"top",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:[...item?[{id:"reset",title:"Reset background",icon:React.createElement(RefreshIcon,null),onClick:()=>{update({value:void 0,grid:isGrid}),onHide();}}]:[],...Object.entries(backgroundMap).map(([k,value])=>({id:k,title:value.name,icon:React.createElement(CircleIcon,{color:value?.value||"grey"}),active:k===backgroundName,onClick:()=>{update({value:k,grid:isGrid}),onHide();}}))]}),onVisibleChange:setIsTooltipVisible},React.createElement(IconButton,{disabled:isLocked,key:"background",title:"Change the background of the preview",active:!!item||isTooltipVisible},React.createElement(PhotoIcon,null))):null)});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)||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`
|
|
12
11
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
13
12
|
These are the available colors for your story based on your configuration:
|
|
14
13
|
${availableColors}.
|
|
15
|
-
`);}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:[]},
|
|
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:[]},BackgroundToolLegacy=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(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(PhotoIcon,null)))});var GridToolLegacy=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(GridIcon,null))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode,tabId})=>!!(viewMode&&viewMode.match(/^(story|docs)$/))&&!tabId,render:()=>FEATURES?.backgroundsStoryGlobals?React.createElement(BackgroundTool,null):React.createElement(Fragment,null,React.createElement(BackgroundToolLegacy,null),React.createElement(GridToolLegacy,null))});});
|
package/dist/preview.d.ts
CHANGED
|
@@ -1,21 +1,44 @@
|
|
|
1
1
|
import { Addon_DecoratorFunction } from 'storybook/internal/types';
|
|
2
2
|
|
|
3
|
+
type GlobalState = {
|
|
4
|
+
value: string | undefined;
|
|
5
|
+
grid: boolean;
|
|
6
|
+
};
|
|
7
|
+
|
|
3
8
|
declare const decorators: Addon_DecoratorFunction[];
|
|
4
9
|
declare const parameters: {
|
|
5
10
|
backgrounds: {
|
|
11
|
+
options: {
|
|
12
|
+
light: {
|
|
13
|
+
name: string;
|
|
14
|
+
value: string;
|
|
15
|
+
};
|
|
16
|
+
dark: {
|
|
17
|
+
name: string;
|
|
18
|
+
value: string;
|
|
19
|
+
};
|
|
20
|
+
};
|
|
6
21
|
grid: {
|
|
7
22
|
cellSize: number;
|
|
8
23
|
opacity: number;
|
|
9
24
|
cellAmount: number;
|
|
10
25
|
};
|
|
26
|
+
disable: false;
|
|
27
|
+
} | {
|
|
11
28
|
values: {
|
|
12
29
|
name: string;
|
|
13
30
|
value: string;
|
|
14
31
|
}[];
|
|
32
|
+
grid: {
|
|
33
|
+
cellSize: number;
|
|
34
|
+
opacity: number;
|
|
35
|
+
cellAmount: number;
|
|
36
|
+
};
|
|
37
|
+
disable: false;
|
|
15
38
|
};
|
|
16
39
|
};
|
|
17
|
-
declare const initialGlobals: {
|
|
18
|
-
backgrounds:
|
|
40
|
+
declare const initialGlobals: Record<string, GlobalState> | {
|
|
41
|
+
backgrounds: null;
|
|
19
42
|
};
|
|
20
43
|
|
|
21
44
|
export { decorators, initialGlobals, parameters };
|
package/dist/preview.js
CHANGED
|
@@ -2,14 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
var previewApi = require('storybook/internal/preview-api');
|
|
4
4
|
var global = require('@storybook/global');
|
|
5
|
-
var tsDedent = require('ts-dedent');
|
|
6
5
|
var clientLogger = require('storybook/internal/client-logger');
|
|
6
|
+
var tsDedent = require('ts-dedent');
|
|
7
7
|
|
|
8
|
-
var PARAM_KEY="backgrounds";var{document,window}=global.global,isReduceMotionEnabled=()
|
|
8
|
+
var PARAM_KEY="backgrounds";var{document,window}=global.global,isReduceMotionEnabled=()=>!!window?.matchMedia("(prefers-reduced-motion: reduce)")?.matches,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 defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE="addon-backgrounds",GRID_SELECTOR_BASE="addon-backgrounds-grid",transitionStyle=isReduceMotionEnabled()?"":"transition: background-color 0.3s;",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options={},disable,grid=defaultGrid}=parameters2[PARAM_KEY]||{},data=globals[PARAM_KEY]||{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value||"transparent",showGrid=data.grid||!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",gridSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",isLayoutPadded=parameters2.layout===void 0||parameters2.layout==="padded",defaultOffset=viewMode==="docs"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode==="docs"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode==="docs"?id:null;previewApi.useEffect(()=>{let backgroundStyles=`
|
|
9
|
+
${backgroundSelector} {
|
|
10
|
+
background: ${value} !important;
|
|
11
|
+
${transitionStyle}
|
|
12
|
+
}`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode==="docs"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return previewApi.useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", "),gridStyles=`
|
|
13
|
+
${gridSelector} {
|
|
14
|
+
background-size: ${gridSize} !important;
|
|
15
|
+
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
16
|
+
background-blend-mode: difference !important;
|
|
17
|
+
background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
18
|
+
linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
19
|
+
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
20
|
+
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
21
|
+
}
|
|
22
|
+
`;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return "transparent";if(backgrounds.find(background=>background.value===currentSelectedValue)||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`
|
|
9
23
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
10
24
|
These are the available colors for your story based on your configuration:
|
|
11
25
|
${availableColors}.
|
|
12
|
-
`);}return "transparent"}
|
|
26
|
+
`);}return "transparent"};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
27
|
${selector} {
|
|
14
28
|
background: ${selectedBackgroundColor} !important;
|
|
15
29
|
${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
|
|
@@ -24,7 +38,7 @@ var PARAM_KEY="backgrounds";var{document,window}=global.global,isReduceMotionEna
|
|
|
24
38
|
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
25
39
|
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
26
40
|
}
|
|
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};
|
|
41
|
+
`},[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=FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...FEATURES?.backgroundsStoryGlobals?{options:{light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}}}:{values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
|
|
28
42
|
|
|
29
43
|
exports.decorators = decorators;
|
|
30
44
|
exports.initialGlobals = initialGlobals;
|
package/dist/preview.mjs
CHANGED
|
@@ -1,13 +1,27 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useEffect, useMemo } from 'storybook/internal/preview-api';
|
|
2
2
|
import { global } from '@storybook/global';
|
|
3
|
-
import { dedent } from 'ts-dedent';
|
|
4
3
|
import { logger } from 'storybook/internal/client-logger';
|
|
4
|
+
import { dedent } from 'ts-dedent';
|
|
5
5
|
|
|
6
|
-
var PARAM_KEY="backgrounds";var{document,window}=global,isReduceMotionEnabled=()
|
|
6
|
+
var PARAM_KEY="backgrounds";var{document,window}=global,isReduceMotionEnabled=()=>!!window?.matchMedia("(prefers-reduced-motion: reduce)")?.matches,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 defaultGrid={cellSize:100,cellAmount:10,opacity:.8},BG_SELECTOR_BASE="addon-backgrounds",GRID_SELECTOR_BASE="addon-backgrounds-grid",transitionStyle=isReduceMotionEnabled()?"":"transition: background-color 0.3s;",withBackgroundAndGrid=(StoryFn,context)=>{let{globals,parameters:parameters2,viewMode,id}=context,{options={},disable,grid=defaultGrid}=parameters2[PARAM_KEY]||{},data=globals[PARAM_KEY]||{},backgroundName=data.value,item=backgroundName?options[backgroundName]:void 0,value=item?.value||"transparent",showGrid=data.grid||!1,shownBackground=!!item&&!disable,backgroundSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",gridSelector=viewMode==="docs"?`#anchor--${id} .docs-story`:".sb-show-main",isLayoutPadded=parameters2.layout===void 0||parameters2.layout==="padded",defaultOffset=viewMode==="docs"?20:isLayoutPadded?16:0,{cellAmount,cellSize,opacity,offsetX=defaultOffset,offsetY=defaultOffset}=grid,backgroundSelectorId=viewMode==="docs"?`${BG_SELECTOR_BASE}-docs-${id}`:`${BG_SELECTOR_BASE}-color`,backgroundTarget=viewMode==="docs"?id:null;useEffect(()=>{let backgroundStyles=`
|
|
7
|
+
${backgroundSelector} {
|
|
8
|
+
background: ${value} !important;
|
|
9
|
+
${transitionStyle}
|
|
10
|
+
}`;if(!shownBackground){clearStyles(backgroundSelectorId);return}addBackgroundStyle(backgroundSelectorId,backgroundStyles,backgroundTarget);},[backgroundSelector,backgroundSelectorId,backgroundTarget,shownBackground,value]);let gridSelectorId=viewMode==="docs"?`${GRID_SELECTOR_BASE}-docs-${id}`:`${GRID_SELECTOR_BASE}`;return useEffect(()=>{if(!showGrid){clearStyles(gridSelectorId);return}let gridSize=[`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize*cellAmount}px ${cellSize*cellAmount}px`,`${cellSize}px ${cellSize}px`,`${cellSize}px ${cellSize}px`].join(", "),gridStyles=`
|
|
11
|
+
${gridSelector} {
|
|
12
|
+
background-size: ${gridSize} !important;
|
|
13
|
+
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
14
|
+
background-blend-mode: difference !important;
|
|
15
|
+
background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
16
|
+
linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
|
|
17
|
+
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
18
|
+
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
19
|
+
}
|
|
20
|
+
`;addGridStyle(gridSelectorId,gridStyles);},[cellAmount,cellSize,gridSelector,gridSelectorId,showGrid,offsetX,offsetY,opacity]),StoryFn()};var getBackgroundColorByName=(currentSelectedValue,backgrounds=[],defaultName)=>{if(currentSelectedValue==="transparent")return "transparent";if(backgrounds.find(background=>background.value===currentSelectedValue)||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
21
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
8
22
|
These are the available colors for your story based on your configuration:
|
|
9
23
|
${availableColors}.
|
|
10
|
-
`);}return "transparent"}
|
|
24
|
+
`);}return "transparent"};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
25
|
${selector} {
|
|
12
26
|
background: ${selectedBackgroundColor} !important;
|
|
13
27
|
${isReduceMotionEnabled()?"":"transition: background-color 0.3s;"}
|
|
@@ -22,6 +36,6 @@ var PARAM_KEY="backgrounds";var{document,window}=global,isReduceMotionEnabled=()
|
|
|
22
36
|
linear-gradient(rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px),
|
|
23
37
|
linear-gradient(90deg, rgba(130, 130, 130, ${opacity/2}) 1px, transparent 1px) !important;
|
|
24
38
|
}
|
|
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};
|
|
39
|
+
`},[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=FEATURES?.backgroundsStoryGlobals?[withBackgroundAndGrid]:[withGrid,withBackground],parameters={[PARAM_KEY]:{grid:{cellSize:20,opacity:.5,cellAmount:5},disable:!1,...FEATURES?.backgroundsStoryGlobals?{options:{light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}}}:{values:[{name:"light",value:"#F8F8F8"},{name:"dark",value:"#333333"}]}}},modern={[PARAM_KEY]:{value:void 0,grid:!1}},initialGlobals=FEATURES?.backgroundsStoryGlobals?modern:{[PARAM_KEY]:null};
|
|
26
40
|
|
|
27
41
|
export { decorators, initialGlobals, parameters };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "8.3.0-alpha.
|
|
3
|
+
"version": "8.3.0-alpha.5",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -28,9 +28,9 @@
|
|
|
28
28
|
"exports": {
|
|
29
29
|
".": {
|
|
30
30
|
"types": "./dist/index.d.ts",
|
|
31
|
-
"node": "./dist/index.js",
|
|
32
31
|
"import": "./dist/index.mjs",
|
|
33
|
-
"require": "./dist/index.js"
|
|
32
|
+
"require": "./dist/index.js",
|
|
33
|
+
"node": "./dist/index.js"
|
|
34
34
|
},
|
|
35
35
|
"./preview": {
|
|
36
36
|
"types": "./dist/preview.d.ts",
|
|
@@ -52,8 +52,8 @@
|
|
|
52
52
|
"!src/**/*"
|
|
53
53
|
],
|
|
54
54
|
"scripts": {
|
|
55
|
-
"check": "
|
|
56
|
-
"prep": "
|
|
55
|
+
"check": "jiti ../../../scripts/prepare/check.ts",
|
|
56
|
+
"prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
59
|
"@storybook/global": "^5.0.0",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"typescript": "^5.3.2"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"storybook": "^8.3.0-alpha.
|
|
70
|
+
"storybook": "^8.3.0-alpha.5"
|
|
71
71
|
},
|
|
72
72
|
"publishConfig": {
|
|
73
73
|
"access": "public"
|
|
@@ -80,7 +80,7 @@
|
|
|
80
80
|
"./src/manager.tsx"
|
|
81
81
|
],
|
|
82
82
|
"previewEntries": [
|
|
83
|
-
"./src/preview.
|
|
83
|
+
"./src/preview.ts"
|
|
84
84
|
]
|
|
85
85
|
},
|
|
86
86
|
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
|