@storybook/addon-backgrounds 7.0.0-beta.40 → 7.0.0-beta.42
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/manager.js +1 -1
- package/dist/manager.mjs +1 -1
- package/package.json +9 -9
package/dist/manager.js
CHANGED
|
@@ -2,4 +2,4 @@ var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropD
|
|
|
2
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
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",
|
|
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",closeOnOutsideClick:!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/manager.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{ADDON_ID,PARAM_KEY,getBackgroundColorByName}from"./chunk-GRJZJKJ4.mjs";import React3,{Fragment as Fragment2}from"react";import{addons,types}from"@storybook/manager-api";import React,{Fragment,useCallback,useMemo,memo}from"react";import memoize from"memoizerific";import{useParameter,useGlobals}from"@storybook/manager-api";import{logger}from"@storybook/client-logger";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";import{styled}from"@storybook/theming";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),[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",trigger:"click",
|
|
1
|
+
import{ADDON_ID,PARAM_KEY,getBackgroundColorByName}from"./chunk-GRJZJKJ4.mjs";import React3,{Fragment as Fragment2}from"react";import{addons,types}from"@storybook/manager-api";import React,{Fragment,useCallback,useMemo,memo}from"react";import memoize from"memoizerific";import{useParameter,useGlobals}from"@storybook/manager-api";import{logger}from"@storybook/client-logger";import{Icons,IconButton,WithTooltip,TooltipLinkList}from"@storybook/components";import{styled}from"@storybook/theming";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),[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",trigger:"click",closeOnOutsideClick:!0,tooltip:({onHide})=>React.createElement(TooltipLinkList,{links:getDisplayedItems(backgroundsConfig.values,selectedBackgroundColor,({selected})=>{selectedBackgroundColor!==selected&&onBackgroundChange(selected),onHide()})})},React.createElement(IconButton,{key:"background",title:"Change the background of the preview",active:selectedBackgroundColor!=="transparent"},React.createElement(Icons,{icon:"photo"}))))});import React2,{memo as memo2}from"react";import{useGlobals as useGlobals2,useParameter as useParameter2}from"@storybook/manager-api";import{Icons as Icons2,IconButton as IconButton2}from"@storybook/components";var GridSelector=memo2(function(){let[globals,updateGlobals]=useGlobals2(),{grid}=useParameter2(PARAM_KEY,{grid:{disable:!1}});if(grid?.disable)return null;let isActive=globals[PARAM_KEY]?.grid||!1;return React2.createElement(IconButton2,{key:"background",active:isActive,title:"Apply a grid to the preview",onClick:()=>updateGlobals({[PARAM_KEY]:{...globals[PARAM_KEY],grid:!isActive}})},React2.createElement(Icons2,{icon:"grid"}))});addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"Backgrounds",type:types.TOOL,match:({viewMode})=>!!(viewMode&&viewMode.match(/^(story|docs)$/)),render:()=>React3.createElement(Fragment2,null,React3.createElement(BackgroundSelector,null),React3.createElement(GridSelector,null))})});
|
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.42",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -76,14 +76,14 @@
|
|
|
76
76
|
"prep": "../../../scripts/prepare/bundle.ts"
|
|
77
77
|
},
|
|
78
78
|
"dependencies": {
|
|
79
|
-
"@storybook/client-logger": "7.0.0-beta.
|
|
80
|
-
"@storybook/components": "7.0.0-beta.
|
|
81
|
-
"@storybook/core-events": "7.0.0-beta.
|
|
79
|
+
"@storybook/client-logger": "7.0.0-beta.42",
|
|
80
|
+
"@storybook/components": "7.0.0-beta.42",
|
|
81
|
+
"@storybook/core-events": "7.0.0-beta.42",
|
|
82
82
|
"@storybook/global": "^5.0.0",
|
|
83
|
-
"@storybook/manager-api": "7.0.0-beta.
|
|
84
|
-
"@storybook/preview-api": "7.0.0-beta.
|
|
85
|
-
"@storybook/theming": "7.0.0-beta.
|
|
86
|
-
"@storybook/types": "7.0.0-beta.
|
|
83
|
+
"@storybook/manager-api": "7.0.0-beta.42",
|
|
84
|
+
"@storybook/preview-api": "7.0.0-beta.42",
|
|
85
|
+
"@storybook/theming": "7.0.0-beta.42",
|
|
86
|
+
"@storybook/types": "7.0.0-beta.42",
|
|
87
87
|
"memoizerific": "^1.11.3",
|
|
88
88
|
"ts-dedent": "^2.0.0"
|
|
89
89
|
},
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
"./src/preview.tsx"
|
|
113
113
|
]
|
|
114
114
|
},
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "0b8d11c61742ba9283a6889d0bdac9ac5a8a508f",
|
|
116
116
|
"storybook": {
|
|
117
117
|
"displayName": "Backgrounds",
|
|
118
118
|
"icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
|