@storybook/addon-backgrounds 7.6.0-beta.2 → 8.0.0-alpha.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +2 -2
- package/dist/manager.js +3 -2
- package/package.json +11 -10
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Storybook Addon Backgrounds can be used to change background colors inside the p
|
|
|
8
8
|
|
|
9
9
|
## Installation
|
|
10
10
|
|
|
11
|
-
Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials
|
|
11
|
+
Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
|
|
12
12
|
|
|
13
13
|
```sh
|
|
14
14
|
npm i -D @storybook/addon-backgrounds
|
|
@@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds
|
|
|
16
16
|
|
|
17
17
|
## Configuration
|
|
18
18
|
|
|
19
|
-
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure
|
|
19
|
+
Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
|
|
20
20
|
|
|
21
21
|
```js
|
|
22
22
|
export default {
|
package/dist/manager.js
CHANGED
|
@@ -2,7 +2,8 @@ import React, { memo, useState, useMemo, useCallback, Fragment } from 'react';
|
|
|
2
2
|
import { useParameter, useGlobals, addons, types } from '@storybook/manager-api';
|
|
3
3
|
import memoize from 'memoizerific';
|
|
4
4
|
import { logger } from '@storybook/client-logger';
|
|
5
|
-
import { WithTooltip, TooltipLinkList, IconButton
|
|
5
|
+
import { WithTooltip, TooltipLinkList, IconButton } from '@storybook/components';
|
|
6
|
+
import { PhotoIcon, GridIcon } from '@storybook/icons';
|
|
6
7
|
import { styled } from '@storybook/theming';
|
|
7
8
|
import '@storybook/global';
|
|
8
9
|
import { dedent } from 'ts-dedent';
|
|
@@ -11,4 +12,4 @@ var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var ColorIcon=styled
|
|
|
11
12
|
Backgrounds Addon: could not find the default color "${defaultName}".
|
|
12
13
|
These are the available colors for your story based on your configuration:
|
|
13
14
|
${availableColors}.
|
|
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(
|
|
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:[]},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(PhotoIcon,null))))});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(GridIcon,null))});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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-backgrounds",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "8.0.0-alpha.0",
|
|
4
4
|
"description": "Switch backgrounds to view components in different settings",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"addon",
|
|
@@ -53,19 +53,20 @@
|
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
55
|
"@storybook/global": "^5.0.0",
|
|
56
|
+
"@storybook/icons": "^1.2.1",
|
|
56
57
|
"memoizerific": "^1.11.3",
|
|
57
58
|
"ts-dedent": "^2.0.0"
|
|
58
59
|
},
|
|
59
60
|
"devDependencies": {
|
|
60
|
-
"@storybook/client-logger": "
|
|
61
|
-
"@storybook/components": "
|
|
62
|
-
"@storybook/manager-api": "
|
|
63
|
-
"@storybook/preview-api": "
|
|
64
|
-
"@storybook/theming": "
|
|
65
|
-
"@storybook/types": "
|
|
66
|
-
"react": "^
|
|
67
|
-
"react-dom": "^
|
|
68
|
-
"typescript": "
|
|
61
|
+
"@storybook/client-logger": "8.0.0-alpha.0",
|
|
62
|
+
"@storybook/components": "8.0.0-alpha.0",
|
|
63
|
+
"@storybook/manager-api": "8.0.0-alpha.0",
|
|
64
|
+
"@storybook/preview-api": "8.0.0-alpha.0",
|
|
65
|
+
"@storybook/theming": "8.0.0-alpha.0",
|
|
66
|
+
"@storybook/types": "8.0.0-alpha.0",
|
|
67
|
+
"react": "^18.2.0",
|
|
68
|
+
"react-dom": "^18.2.0",
|
|
69
|
+
"typescript": "^5.3.2"
|
|
69
70
|
},
|
|
70
71
|
"publishConfig": {
|
|
71
72
|
"access": "public"
|