Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@storybook/addon-backgrounds

Package Overview
Dependencies
Maintainers
11
Versions
2004
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-backgrounds - npm Package Compare versions

Comparing version 0.0.0-pr-29544-sha-fd7f82f1 to 0.0.0-pr-29627-sha-69905647

2

dist/manager.js

@@ -10,3 +10,3 @@ import React, { memo, useState, useCallback, Fragment, useMemo } from 'react';

var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}};var BackgroundTool=memo(function(){let config=useParameter(PARAM_KEY),[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),{options=DEFAULT_BACKGROUNDS,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`
var ADDON_ID="storybook/background",PARAM_KEY="backgrounds";var DEFAULT_BACKGROUNDS={light:{name:"light",value:"#F8F8F8"},dark:{name:"dark",value:"#333"}};var BackgroundTool=memo(function(){let config=useParameter(PARAM_KEY),[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),{options=DEFAULT_BACKGROUNDS,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();}}))].flat()}),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`
Backgrounds Addon: could not find the default color "${defaultName}".

@@ -13,0 +13,0 @@ These are the available colors for your story based on your configuration:

{
"name": "@storybook/addon-backgrounds",
"version": "0.0.0-pr-29544-sha-fd7f82f1",
"version": "0.0.0-pr-29627-sha-69905647",
"description": "Switch backgrounds to view components in different settings",

@@ -69,3 +69,3 @@ "keywords": [

"peerDependencies": {
"storybook": "^0.0.0-pr-29544-sha-fd7f82f1"
"storybook": "^0.0.0-pr-29627-sha-69905647"
},

@@ -72,0 +72,0 @@ "publishConfig": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc