@storybook/addon-backgrounds 7.6.0-beta.2 → 8.0.0-alpha.0

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.
Files changed (3) hide show
  1. package/README.md +2 -2
  2. package/dist/manager.js +3 -2
  3. 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/introduction) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
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/overview#configure-your-storybook-project):
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, Icons } from '@storybook/components';
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(Icons,{icon:"photo"}))))});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(Icons,{icon:"grid"}))});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))});});
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": "7.6.0-beta.2",
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": "7.6.0-beta.2",
61
- "@storybook/components": "7.6.0-beta.2",
62
- "@storybook/manager-api": "7.6.0-beta.2",
63
- "@storybook/preview-api": "7.6.0-beta.2",
64
- "@storybook/theming": "7.6.0-beta.2",
65
- "@storybook/types": "7.6.0-beta.2",
66
- "react": "^16.8.0",
67
- "react-dom": "^16.8.0",
68
- "typescript": "~4.9.3"
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"