@storybook/addon-backgrounds 8.3.0-alpha.1 → 8.3.0-alpha.10
Sign up to get free protection for your applications and to get access to all the features.
- 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 +8 -8
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.10",
|
|
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",
|
|
@@ -61,13 +61,13 @@
|
|
|
61
61
|
"ts-dedent": "^2.0.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@storybook/icons": "^1.2.
|
|
64
|
+
"@storybook/icons": "^1.2.10",
|
|
65
65
|
"react": "^18.2.0",
|
|
66
66
|
"react-dom": "^18.2.0",
|
|
67
67
|
"typescript": "^5.3.2"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"storybook": "^8.3.0-alpha.
|
|
70
|
+
"storybook": "^8.3.0-alpha.10"
|
|
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",
|