@storybook/addon-backgrounds 7.0.0-beta.8 → 7.0.0-beta.9
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.js +1 -1
- package/dist/manager.js +4 -4
- package/dist/preview.js +16 -16
- package/package.json +9 -9
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var
|
|
1
|
+
var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var src_exports={};__export(src_exports,{default:()=>src_default});module.exports=__toCommonJS(src_exports);module&&module.hot&&module.hot.decline&&module.hot.decline();var src_default={};0&&(module.exports={});
|
package/dist/manager.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var
|
|
2
|
-
Backgrounds Addon: could not find the default color "${
|
|
1
|
+
var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var import_react3=__toESM(require("react")),import_manager_api3=require("@storybook/manager-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_react=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_manager_api=require("@storybook/manager-api"),import_client_logger2=require("@storybook/client-logger"),import_components=require("@storybook/components");var import_theming=require("@storybook/theming"),ColorIcon=import_theming.styled.span(({background})=>({borderRadius:"1rem",display:"block",height:"1rem",width:"1rem",background}),({theme})=>({boxShadow:`${theme.appBorderColor} 0 0 0 1px inset`}));var import_global=__toESM(require("global")),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.default;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(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
|
|
2
|
+
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
3
3
|
These are the available colors for your story based on your configuration:
|
|
4
|
-
${
|
|
5
|
-
`)}return"transparent"};var
|
|
4
|
+
${availableColors}.
|
|
5
|
+
`)}return"transparent"};var createBackgroundSelectorItem=(0,import_memoizerific.default)(1e3)((id,name,value,hasSwatch,change,active)=>({id:id||name,title:name,onClick:()=>{change({selected:value,name})},value,right:hasSwatch?import_react.default.createElement(ColorIcon,{background:value}):void 0,active})),getDisplayedItems=(0,import_memoizerific.default)(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=(0,import_react.memo)(function(){var _a;let backgroundsConfig=(0,import_manager_api.useParameter)(PARAM_KEY,DEFAULT_BACKGROUNDS_CONFIG),[globals,updateGlobals]=(0,import_manager_api.useGlobals)(),globalsBackgroundColor=(_a=globals[PARAM_KEY])==null?void 0:_a.value,selectedBackgroundColor=(0,import_react.useMemo)(()=>getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]);Array.isArray(backgroundsConfig)&&import_client_logger2.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=(0,import_react.useCallback)(value=>{updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],value}})},[backgroundsConfig,globals,updateGlobals]);return backgroundsConfig.disable?null:import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",trigger:"click",closeOnClick:!0,tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})})},import_react.default.createElement(import_components.IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"},import_react.default.createElement(import_components.Icons,{icon:"photo"}))))});var import_react2=__toESM(require("react")),import_manager_api2=require("@storybook/manager-api"),import_components2=require("@storybook/components");var GridSelector=(0,import_react2.memo)(function(){var _a;let[globals,updateGlobals]=(0,import_manager_api2.useGlobals)(),{grid}=(0,import_manager_api2.useParameter)(PARAM_KEY,{grid:{disable:!1}});if(grid!=null&&grid.disable)return null;let isActive=((_a=globals[PARAM_KEY])==null?void 0:_a.grid)||!1;return import_react2.default.createElement(import_components2.IconButton,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},import_react2.default.createElement(import_components2.Icons,{icon:"grid"}))});import_manager_api3.addons.register(ADDON_ID,()=>{import_manager_api3.addons.add(ADDON_ID,{title:"Backgrounds",type:import_manager_api3.types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>import_react3.default.createElement(import_react3.Fragment,null,import_react3.default.createElement(BackgroundSelector,null),import_react3.default.createElement(GridSelector,null))})});
|
package/dist/preview.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
var
|
|
2
|
-
Backgrounds Addon: could not find the default color "${
|
|
1
|
+
var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0})},__copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod)),__toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:!0}),mod);var preview_exports={};__export(preview_exports,{decorators:()=>decorators,globals:()=>globals,parameters:()=>parameters});module.exports=__toCommonJS(preview_exports);var import_preview_api=require("@storybook/preview-api");var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var EVENTS={UPDATE:`${ADDON_ID}/update`};var import_global=__toESM(require("global")),import_ts_dedent=require("ts-dedent"),import_client_logger=require("@storybook/client-logger"),{document,window}=import_global.default,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(", ");import_client_logger.logger.warn(import_ts_dedent.dedent`
|
|
2
|
+
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
3
3
|
These are the available colors for your story based on your configuration:
|
|
4
|
-
${
|
|
5
|
-
`)}return"transparent"}
|
|
6
|
-
${
|
|
7
|
-
background: ${
|
|
8
|
-
${
|
|
4
|
+
${availableColors}.
|
|
5
|
+
`)}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)=>{var _a;let{globals:globals2,parameters:parameters2}=context,globalsBackgroundColor=(_a=globals2[PARAM_KEY])==null?void 0:_a.value,backgroundsConfig=parameters2[PARAM_KEY],selectedBackgroundColor=(0,import_preview_api.useMemo)(()=>backgroundsConfig.disable?"transparent":getBackgroundColorByName(globalsBackgroundColor,backgroundsConfig.values,backgroundsConfig.default),[backgroundsConfig,globalsBackgroundColor]),isActive=(0,import_preview_api.useMemo)(()=>selectedBackgroundColor&&selectedBackgroundColor!=="transparent",[selectedBackgroundColor]),selector=context.viewMode==="docs"?`#anchor--${context.id} .docs-story`:".sb-show-main",backgroundStyles=(0,import_preview_api.useMemo)(()=>{let transitionStyle="transition: background-color 0.3s;";return`
|
|
6
|
+
${selector} {
|
|
7
|
+
background: ${selectedBackgroundColor} !important;
|
|
8
|
+
${isReduceMotionEnabled()?"":transitionStyle}
|
|
9
9
|
}
|
|
10
|
-
`},[
|
|
11
|
-
${
|
|
12
|
-
background-size: ${
|
|
13
|
-
background-position: ${
|
|
10
|
+
`},[selectedBackgroundColor,selector]);return(0,import_preview_api.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 import_preview_api2=require("@storybook/preview-api");var withGrid=(StoryFn,context)=>{var _a;let{globals:globals2,parameters:parameters2}=context,gridParameters=parameters2[PARAM_KEY].grid,isActive=((_a=globals2[PARAM_KEY])==null?void 0:_a.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=(0,import_preview_api2.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
|
+
${selector} {
|
|
12
|
+
background-size: ${backgroundSize} !important;
|
|
13
|
+
background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
|
|
14
14
|
background-blend-mode: difference !important;
|
|
15
|
-
background-image: linear-gradient(rgba(130, 130, 130, ${
|
|
16
|
-
linear-gradient(90deg, rgba(130, 130, 130, ${
|
|
17
|
-
linear-gradient(rgba(130, 130, 130, ${
|
|
18
|
-
linear-gradient(90deg, rgba(130, 130, 130, ${
|
|
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
19
|
}
|
|
20
|
-
`},[
|
|
20
|
+
`},[cellSize]);return(0,import_preview_api2.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};0&&(module.exports={decorators,globals,parameters});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "7.0.0-beta.
|
|
3
|
+
"version": "7.0.0-beta.9",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -75,13 +75,13 @@
|
|
|
75
75
|
"prep": "../../../scripts/prepare/bundle.ts"
|
|
76
76
|
},
|
|
77
77
|
"dependencies": {
|
|
78
|
-
"@storybook/client-logger": "7.0.0-beta.
|
|
79
|
-
"@storybook/components": "7.0.0-beta.
|
|
80
|
-
"@storybook/core-events": "7.0.0-beta.
|
|
81
|
-
"@storybook/manager-api": "7.0.0-beta.
|
|
82
|
-
"@storybook/preview-api": "7.0.0-beta.
|
|
83
|
-
"@storybook/theming": "7.0.0-beta.
|
|
84
|
-
"@storybook/types": "7.0.0-beta.
|
|
78
|
+
"@storybook/client-logger": "7.0.0-beta.9",
|
|
79
|
+
"@storybook/components": "7.0.0-beta.9",
|
|
80
|
+
"@storybook/core-events": "7.0.0-beta.9",
|
|
81
|
+
"@storybook/manager-api": "7.0.0-beta.9",
|
|
82
|
+
"@storybook/preview-api": "7.0.0-beta.9",
|
|
83
|
+
"@storybook/theming": "7.0.0-beta.9",
|
|
84
|
+
"@storybook/types": "7.0.0-beta.9",
|
|
85
85
|
"global": "^4.4.0",
|
|
86
86
|
"memoizerific": "^1.11.3",
|
|
87
87
|
"ts-dedent": "^2.0.0"
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"./src/preview.tsx"
|
|
112
112
|
]
|
|
113
113
|
},
|
|
114
|
-
"gitHead": "
|
|
114
|
+
"gitHead": "c466d4f77c3e8b99f28aaf508acdb9fd863550fd",
|
|
115
115
|
"storybook": {
|
|
116
116
|
"displayName": "Backgrounds",
|
|
117
117
|
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|