@storybook/addon-viewport - npm Package Compare versions

Comparing version 0.0.0-pr-30197-sha-3a606792 to 0.0.0-pr-30197-sha-7b4f8199

dist/index.d.ts

@@ -0,1 +1,4 @@
+import * as core_dist_types from 'storybook/internal/types';
+import * as _storybook_csf from '@storybook/csf';
+
 type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
@@ -22,6 +25,55 @@ interface Viewport {
 type GlobalState = {
+    /**
+     * When set, the viewport is applied and cannot be changed using the toolbar. Must match the key
+     * of one of the available viewports.
+     */
     value: string | undefined;
+    /**
+     * When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to
+     * landscape orientation.
+     */
     isRotated: boolean;
 };
 type GlobalStateUpdate = Partial<GlobalState>;
+interface ViewportParameters {
+    /**
+     * Viewport configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/viewport#parameters
+     */
+    viewport: {
+        /**
+         * Specifies the default orientation used when viewing a story. Only available if you haven't
+         * enabled the globals API.
+         */
+        defaultOrientation?: 'landscape' | 'portrait';
+        /**
+         * Specifies the default viewport used when viewing a story. Must match a key in the viewports
+         * (or options) object.
+         */
+        defaultViewport?: string;
+        /**
+         * Remove the addon panel and disable the addon's behavior . If you wish to turn off this addon
+         * for the entire Storybook, you should do so when registering addon-essentials
+         *
+         * @see https://storybook.js.org/docs/essentials/index#disabling-addons
+         */
+        disabled?: boolean;
+        /**
+         * Specify the available viewports. The width and height values must include the unit, e.g.
+         * '320px'.
+         */
+        viewports?: Viewport;
+    };
+}
+interface ViewportGlobals {
+    /**
+     * Viewport configuration
+     *
+     * @see https://storybook.js.org/docs/essentials/viewport#globals
+     */
+    viewport: {
+        [key: string]: GlobalState;
+    };
+}
 
@@ -259,2 +311,4 @@ declare const INITIAL_VIEWPORTS_DATA: {
 
-export { Config, DEFAULT_VIEWPORT, GlobalState, GlobalStateUpdate, INITIAL_VIEWPORTS, InitialViewportKeys, MINIMAL_VIEWPORTS, ModernViewport, Styles, Viewport, ViewportMap, ViewportStyles };
+declare const _default: () => core_dist_types.ProjectAnnotations<_storybook_csf.Renderer>;
+
+export { Config, DEFAULT_VIEWPORT, GlobalState, GlobalStateUpdate, INITIAL_VIEWPORTS, InitialViewportKeys, MINIMAL_VIEWPORTS, ModernViewport, Styles, Viewport, ViewportGlobals, ViewportMap, ViewportParameters, ViewportStyles, _default as default };

dist/index.js

 'use strict';
 
-var INITIAL_VIEWPORTS_DATA={iphone5:{name:"iPhone 5",styles:{height:"568px",width:"320px"},type:"mobile"},iphone6:{name:"iPhone 6",styles:{height:"667px",width:"375px"},type:"mobile"},iphone6p:{name:"iPhone 6 Plus",styles:{height:"736px",width:"414px"},type:"mobile"},iphone8p:{name:"iPhone 8 Plus",styles:{height:"736px",width:"414px"},type:"mobile"},iphonex:{name:"iPhone X",styles:{height:"812px",width:"375px"},type:"mobile"},iphonexr:{name:"iPhone XR",styles:{height:"896px",width:"414px"},type:"mobile"},iphonexsmax:{name:"iPhone XS Max",styles:{height:"896px",width:"414px"},type:"mobile"},iphonese2:{name:"iPhone SE (2nd generation)",styles:{height:"667px",width:"375px"},type:"mobile"},iphone12mini:{name:"iPhone 12 mini",styles:{height:"812px",width:"375px"},type:"mobile"},iphone12:{name:"iPhone 12",styles:{height:"844px",width:"390px"},type:"mobile"},iphone12promax:{name:"iPhone 12 Pro Max",styles:{height:"926px",width:"428px"},type:"mobile"},iphoneSE3:{name:"iPhone SE 3rd generation",styles:{height:"667px",width:"375px"},type:"mobile"},iphone13:{name:"iPhone 13",styles:{height:"844px",width:"390px"},type:"mobile"},iphone13pro:{name:"iPhone 13 Pro",styles:{height:"844px",width:"390px"},type:"mobile"},iphone13promax:{name:"iPhone 13 Pro Max",styles:{height:"926px",width:"428px"},type:"mobile"},iphone14:{name:"iPhone 14",styles:{height:"844px",width:"390px"},type:"mobile"},iphone14pro:{name:"iPhone 14 Pro",styles:{height:"852px",width:"393px"},type:"mobile"},iphone14promax:{name:"iPhone 14 Pro Max",styles:{height:"932px",width:"430px"},type:"mobile"},ipad:{name:"iPad",styles:{height:"1024px",width:"768px"},type:"tablet"},ipad10p:{name:"iPad Pro 10.5-in",styles:{height:"1112px",width:"834px"},type:"tablet"},ipad11p:{name:"iPad Pro 11-in",styles:{height:"1194px",width:"834px"},type:"tablet"},ipad12p:{name:"iPad Pro 12.9-in",styles:{height:"1366px",width:"1024px"},type:"tablet"},galaxys5:{name:"Galaxy S5",styles:{height:"640px",width:"360px"},type:"mobile"},galaxys9:{name:"Galaxy S9",styles:{height:"740px",width:"360px"},type:"mobile"},nexus5x:{name:"Nexus 5X",styles:{height:"660px",width:"412px"},type:"mobile"},nexus6p:{name:"Nexus 6P",styles:{height:"732px",width:"412px"},type:"mobile"},pixel:{name:"Pixel",styles:{height:"960px",width:"540px"},type:"mobile"},pixelxl:{name:"Pixel XL",styles:{height:"1280px",width:"720px"},type:"mobile"}},INITIAL_VIEWPORTS=INITIAL_VIEWPORTS_DATA,DEFAULT_VIEWPORT="responsive",MINIMAL_VIEWPORTS={mobile1:{name:"Small mobile",styles:{height:"568px",width:"320px"},type:"mobile"},mobile2:{name:"Large mobile",styles:{height:"896px",width:"414px"},type:"mobile"},tablet:{name:"Tablet",styles:{height:"1112px",width:"834px"},type:"tablet"}};
+Object.defineProperty(exports, '__esModule', { value: true });
 
+var previewApi = require('storybook/internal/preview-api');
+
+var __defProp=Object.defineProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:!0});};var preview_exports={};__export(preview_exports,{initialGlobals:()=>initialGlobals});var PARAM_KEY="viewport";var modern={[PARAM_KEY]:{value:void 0,isRotated:!1}},legacy={viewport:"reset",viewportRotated:!1},initialGlobals=globalThis.FEATURES?.viewportStoryGlobals?modern:legacy;var INITIAL_VIEWPORTS_DATA={iphone5:{name:"iPhone 5",styles:{height:"568px",width:"320px"},type:"mobile"},iphone6:{name:"iPhone 6",styles:{height:"667px",width:"375px"},type:"mobile"},iphone6p:{name:"iPhone 6 Plus",styles:{height:"736px",width:"414px"},type:"mobile"},iphone8p:{name:"iPhone 8 Plus",styles:{height:"736px",width:"414px"},type:"mobile"},iphonex:{name:"iPhone X",styles:{height:"812px",width:"375px"},type:"mobile"},iphonexr:{name:"iPhone XR",styles:{height:"896px",width:"414px"},type:"mobile"},iphonexsmax:{name:"iPhone XS Max",styles:{height:"896px",width:"414px"},type:"mobile"},iphonese2:{name:"iPhone SE (2nd generation)",styles:{height:"667px",width:"375px"},type:"mobile"},iphone12mini:{name:"iPhone 12 mini",styles:{height:"812px",width:"375px"},type:"mobile"},iphone12:{name:"iPhone 12",styles:{height:"844px",width:"390px"},type:"mobile"},iphone12promax:{name:"iPhone 12 Pro Max",styles:{height:"926px",width:"428px"},type:"mobile"},iphoneSE3:{name:"iPhone SE 3rd generation",styles:{height:"667px",width:"375px"},type:"mobile"},iphone13:{name:"iPhone 13",styles:{height:"844px",width:"390px"},type:"mobile"},iphone13pro:{name:"iPhone 13 Pro",styles:{height:"844px",width:"390px"},type:"mobile"},iphone13promax:{name:"iPhone 13 Pro Max",styles:{height:"926px",width:"428px"},type:"mobile"},iphone14:{name:"iPhone 14",styles:{height:"844px",width:"390px"},type:"mobile"},iphone14pro:{name:"iPhone 14 Pro",styles:{height:"852px",width:"393px"},type:"mobile"},iphone14promax:{name:"iPhone 14 Pro Max",styles:{height:"932px",width:"430px"},type:"mobile"},ipad:{name:"iPad",styles:{height:"1024px",width:"768px"},type:"tablet"},ipad10p:{name:"iPad Pro 10.5-in",styles:{height:"1112px",width:"834px"},type:"tablet"},ipad11p:{name:"iPad Pro 11-in",styles:{height:"1194px",width:"834px"},type:"tablet"},ipad12p:{name:"iPad Pro 12.9-in",styles:{height:"1366px",width:"1024px"},type:"tablet"},galaxys5:{name:"Galaxy S5",styles:{height:"640px",width:"360px"},type:"mobile"},galaxys9:{name:"Galaxy S9",styles:{height:"740px",width:"360px"},type:"mobile"},nexus5x:{name:"Nexus 5X",styles:{height:"660px",width:"412px"},type:"mobile"},nexus6p:{name:"Nexus 6P",styles:{height:"732px",width:"412px"},type:"mobile"},pixel:{name:"Pixel",styles:{height:"960px",width:"540px"},type:"mobile"},pixelxl:{name:"Pixel XL",styles:{height:"1280px",width:"720px"},type:"mobile"}},INITIAL_VIEWPORTS=INITIAL_VIEWPORTS_DATA,DEFAULT_VIEWPORT="responsive",MINIMAL_VIEWPORTS={mobile1:{name:"Small mobile",styles:{height:"568px",width:"320px"},type:"mobile"},mobile2:{name:"Large mobile",styles:{height:"896px",width:"414px"},type:"mobile"},tablet:{name:"Tablet",styles:{height:"1112px",width:"834px"},type:"tablet"}};var src_default=()=>previewApi.definePreview(preview_exports);
+
 exports.DEFAULT_VIEWPORT = DEFAULT_VIEWPORT;
 exports.INITIAL_VIEWPORTS = INITIAL_VIEWPORTS;
 exports.MINIMAL_VIEWPORTS = MINIMAL_VIEWPORTS;
+exports.default = src_default;

dist/manager.js

@@ -9,2 +9,2 @@ import * as React2 from 'react';
 
-var ADDON_ID="storybook/viewport",PARAM_KEY="viewport";var MINIMAL_VIEWPORTS={mobile1:{name:"Small mobile",styles:{height:"568px",width:"320px"},type:"mobile"},mobile2:{name:"Large mobile",styles:{height:"896px",width:"414px"},type:"mobile"},tablet:{name:"Tablet",styles:{height:"1112px",width:"834px"},type:"tablet"}};var responsiveViewport={name:"Reset viewport",styles:{height:"100%",width:"100%"},type:"desktop"};var modern={[PARAM_KEY]:{value:void 0,isRotated:!1}},legacy={viewport:"reset",viewportRotated:!1},initialGlobals=globalThis.FEATURES?.viewportStoryGlobals?modern:legacy;var getCurrentViewportIndex=(viewportsKeys,current)=>viewportsKeys.indexOf(current),getNextViewport=(viewportsKeys,current)=>{let currentViewportIndex=getCurrentViewportIndex(viewportsKeys,current);return currentViewportIndex===viewportsKeys.length-1?viewportsKeys[0]:viewportsKeys[currentViewportIndex+1]},getPreviousViewport=(viewportsKeys,current)=>{let currentViewportIndex=getCurrentViewportIndex(viewportsKeys,current);return currentViewportIndex<1?viewportsKeys[viewportsKeys.length-1]:viewportsKeys[currentViewportIndex-1]},registerShortcuts=async(api,viewport,updateGlobals,viewportsKeys)=>{await api.setAddonShortcut(ADDON_ID,{label:"Previous viewport",defaultShortcut:["alt","shift","V"],actionName:"previous",action:()=>{updateGlobals({viewport:getPreviousViewport(viewportsKeys,viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Next viewport",defaultShortcut:["alt","V"],actionName:"next",action:()=>{updateGlobals({viewport:getNextViewport(viewportsKeys,viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Reset viewport",defaultShortcut:["alt","control","V"],actionName:"reset",action:()=>{updateGlobals(initialGlobals);}});};var ActiveViewportSize=styled.div(()=>({display:"inline-flex",alignItems:"center"})),ActiveViewportLabel=styled.div(({theme})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),IconButtonWithLabel=styled(IconButton)(()=>({display:"inline-flex",alignItems:"center"})),IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),iconsMap={desktop:React2__default.createElement(BrowserIcon,null),mobile:React2__default.createElement(MobileIcon,null),tablet:React2__default.createElement(TabletIcon,null),other:React2__default.createElement(Fragment,null)};var ViewportTool=({api})=>{let config=useParameter(PARAM_KEY),[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),{options=MINIMAL_VIEWPORTS,disable}=config||{},data=globals?.[PARAM_KEY]||{},viewportName=data.value,isRotated=data.isRotated,item=options[viewportName]||responsiveViewport,isActive=isTooltipVisible||item!==responsiveViewport,isLocked=PARAM_KEY in storyGlobals,length2=Object.keys(options).length;if(useEffect(()=>{registerShortcuts(api,viewportName,updateGlobals,Object.keys(options));},[options,viewportName,updateGlobals,api]),item.styles===null||!options||length2<1)return null;if(typeof item.styles=="function")return console.warn("Addon Viewport no longer supports dynamic styles using a function, use css calc() instead"),null;let width=isRotated?item.styles.height:item.styles.width,height=isRotated?item.styles.width:item.styles.height;return disable?null:React2__default.createElement(Pure,{item,updateGlobals,viewportMap:options,viewportName,isRotated,setIsTooltipVisible,isLocked,isActive,width,height})},Pure=React2__default.memo(function(props){let{item,viewportMap,viewportName,isRotated,updateGlobals,setIsTooltipVisible,isLocked,isActive,width,height}=props,update=useCallback(input=>updateGlobals({[PARAM_KEY]:input}),[updateGlobals]);return React2__default.createElement(Fragment,null,React2__default.createElement(WithTooltip,{placement:"bottom",tooltip:({onHide})=>React2__default.createElement(TooltipLinkList,{links:[...length>0&&item!==responsiveViewport?[{id:"reset",title:"Reset viewport",icon:React2__default.createElement(RefreshIcon,null),onClick:()=>{update({value:void 0,isRotated:!1}),onHide();}}]:[],...Object.entries(viewportMap).map(([k,value])=>({id:k,title:value.name,icon:iconsMap[value.type],active:k===viewportName,onClick:()=>{update({value:k,isRotated:!1}),onHide();}}))].flat()}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React2__default.createElement(IconButtonWithLabel,{disabled:isLocked,key:"viewport",title:"Change the size of the preview",active:isActive,onDoubleClick:()=>{update({value:void 0,isRotated:!1});}},React2__default.createElement(GrowIcon,null),item!==responsiveViewport?React2__default.createElement(IconButtonLabel,null,item.name," ",isRotated?"(L)":"(P)"):null)),React2__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{width,height}}}),item!==responsiveViewport?React2__default.createElement(ActiveViewportSize,null,React2__default.createElement(ActiveViewportLabel,{title:"Viewport width"},width.replace("px","")),isLocked?"/":React2__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{update({value:viewportName,isRotated:!isRotated});}},React2__default.createElement(TransferIcon,null)),React2__default.createElement(ActiveViewportLabel,{title:"Viewport height"},height.replace("px",""))):null)});var toList=memoize(50)(items=>[...baseViewports,...Object.entries(items).map(([id,{name,...rest}])=>({...rest,id,title:name}))]),responsiveViewport2={id:"reset",title:"Reset viewport",styles:null,type:"other"},baseViewports=[responsiveViewport2],toLinks=memoize(50)((list,active,updateGlobals,close)=>list.filter(i=>i.id!==responsiveViewport2.id||active.id!==i.id).map(i=>({...i,onClick:()=>{updateGlobals({viewport:i.id}),close();}}))),flip=({width,height,...styles})=>({...styles,height:width,width:height}),ActiveViewportSize2=styled.div(()=>({display:"inline-flex",alignItems:"center"})),ActiveViewportLabel2=styled.div(({theme})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),IconButtonWithLabel2=styled(IconButton)(()=>({display:"inline-flex",alignItems:"center"})),IconButtonLabel2=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),getStyles=(prevStyles,styles,isRotated)=>{if(styles===null)return;let result=typeof styles=="function"?styles(prevStyles):styles;return isRotated?flip(result):result},ViewportToolLegacy=memo(function(){let[globals,updateGlobals]=useGlobals(),{viewports=MINIMAL_VIEWPORTS,defaultOrientation,defaultViewport,disable}=useParameter(PARAM_KEY,{}),list=toList(viewports),api=useStorybookApi(),[isTooltipVisible,setIsTooltipVisible]=useState(!1);defaultViewport&&!list.find(i=>i.id===defaultViewport)&&console.warn(`Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`),useEffect(()=>{registerShortcuts(api,globals,updateGlobals,Object.keys(viewports));},[viewports,globals,globals.viewport,updateGlobals,api]),useEffect(()=>{let defaultRotated=defaultOrientation==="landscape";(defaultViewport&&globals.viewport!==defaultViewport||defaultOrientation&&globals.viewportRotated!==defaultRotated)&&updateGlobals({viewport:defaultViewport,viewportRotated:defaultRotated});},[defaultOrientation,defaultViewport,updateGlobals]);let item=list.find(i=>i.id===globals.viewport)||list.find(i=>i.id===defaultViewport)||list.find(i=>i.default)||responsiveViewport2,ref=useRef(),styles=getStyles(ref.current,item.styles,globals.viewportRotated);return useEffect(()=>{ref.current=styles;},[item]),disable||Object.entries(viewports).length===0?null:React2__default.createElement(Fragment,null,React2__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>React2__default.createElement(TooltipLinkList,{links:toLinks(list,item,updateGlobals,onHide)}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React2__default.createElement(IconButtonWithLabel2,{key:"viewport",title:"Change the size of the preview",active:isTooltipVisible||!!styles,onDoubleClick:()=>{updateGlobals({viewport:responsiveViewport2.id});}},React2__default.createElement(GrowIcon,null),styles?React2__default.createElement(IconButtonLabel2,null,globals.viewportRotated?`${item.title} (L)`:`${item.title} (P)`):null)),styles?React2__default.createElement(ActiveViewportSize2,null,React2__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{...styles||{width:"100%",height:"100%"}}}}),React2__default.createElement(ActiveViewportLabel2,{title:"Viewport width"},styles.width.replace("px","")),React2__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{updateGlobals({viewportRotated:!globals.viewportRotated});}},React2__default.createElement(TransferIcon,null)),React2__default.createElement(ActiveViewportLabel2,{title:"Viewport height"},styles.height.replace("px",""))):null)});addons.register(ADDON_ID,api=>{addons.add(ADDON_ID,{title:"viewport / media-queries",type:types.TOOL,match:({viewMode,tabId})=>viewMode==="story"&&!tabId,render:()=>FEATURES?.viewportStoryGlobals?React2.createElement(ViewportTool,{api}):React2.createElement(ViewportToolLegacy,null)});});
+var ADDON_ID="storybook/viewport",PARAM_KEY="viewport";var MINIMAL_VIEWPORTS={mobile1:{name:"Small mobile",styles:{height:"568px",width:"320px"},type:"mobile"},mobile2:{name:"Large mobile",styles:{height:"896px",width:"414px"},type:"mobile"},tablet:{name:"Tablet",styles:{height:"1112px",width:"834px"},type:"tablet"}};var responsiveViewport={name:"Reset viewport",styles:{height:"100%",width:"100%"},type:"desktop"};var modern={[PARAM_KEY]:{value:void 0,isRotated:!1}},legacy={viewport:"reset",viewportRotated:!1},initialGlobals=globalThis.FEATURES?.viewportStoryGlobals?modern:legacy;var getCurrentViewportIndex=(viewportsKeys,current)=>viewportsKeys.indexOf(current),getNextViewport=(viewportsKeys,current)=>{let currentViewportIndex=getCurrentViewportIndex(viewportsKeys,current);return currentViewportIndex===viewportsKeys.length-1?viewportsKeys[0]:viewportsKeys[currentViewportIndex+1]},getPreviousViewport=(viewportsKeys,current)=>{let currentViewportIndex=getCurrentViewportIndex(viewportsKeys,current);return currentViewportIndex<1?viewportsKeys[viewportsKeys.length-1]:viewportsKeys[currentViewportIndex-1]},registerShortcuts=async(api,viewport,updateGlobals,viewportsKeys)=>{await api.setAddonShortcut(ADDON_ID,{label:"Previous viewport",defaultShortcut:["alt","shift","V"],actionName:"previous",action:()=>{updateGlobals({viewport:getPreviousViewport(viewportsKeys,viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Next viewport",defaultShortcut:["alt","V"],actionName:"next",action:()=>{updateGlobals({viewport:getNextViewport(viewportsKeys,viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Reset viewport",defaultShortcut:["alt","control","V"],actionName:"reset",action:()=>{updateGlobals(initialGlobals);}});};var ActiveViewportSize=styled.div({display:"inline-flex",alignItems:"center"}),ActiveViewportLabel=styled.div(({theme})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),IconButtonWithLabel=styled(IconButton)(()=>({display:"inline-flex",alignItems:"center"})),IconButtonLabel=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),iconsMap={desktop:React2__default.createElement(BrowserIcon,null),mobile:React2__default.createElement(MobileIcon,null),tablet:React2__default.createElement(TabletIcon,null),other:React2__default.createElement(Fragment,null)};var ViewportTool=({api})=>{let config=useParameter(PARAM_KEY),[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),{options=MINIMAL_VIEWPORTS,disable}=config||{},data=globals?.[PARAM_KEY]||{},viewportName=data.value,isRotated=data.isRotated,item=options[viewportName]||responsiveViewport,isActive=isTooltipVisible||item!==responsiveViewport,isLocked=PARAM_KEY in storyGlobals,length2=Object.keys(options).length;if(useEffect(()=>{registerShortcuts(api,viewportName,updateGlobals,Object.keys(options));},[options,viewportName,updateGlobals,api]),item.styles===null||!options||length2<1)return null;if(typeof item.styles=="function")return console.warn("Addon Viewport no longer supports dynamic styles using a function, use css calc() instead"),null;let width=isRotated?item.styles.height:item.styles.width,height=isRotated?item.styles.width:item.styles.height;return disable?null:React2__default.createElement(Pure,{item,updateGlobals,viewportMap:options,viewportName,isRotated,setIsTooltipVisible,isLocked,isActive,width,height})},Pure=React2__default.memo(function(props){let{item,viewportMap,viewportName,isRotated,updateGlobals,setIsTooltipVisible,isLocked,isActive,width,height}=props,update=useCallback(input=>updateGlobals({[PARAM_KEY]:input}),[updateGlobals]);return React2__default.createElement(Fragment,null,React2__default.createElement(WithTooltip,{placement:"bottom",tooltip:({onHide})=>React2__default.createElement(TooltipLinkList,{links:[...length>0&&item!==responsiveViewport?[{id:"reset",title:"Reset viewport",icon:React2__default.createElement(RefreshIcon,null),onClick:()=>{update({value:void 0,isRotated:!1}),onHide();}}]:[],...Object.entries(viewportMap).map(([k,value])=>({id:k,title:value.name,icon:iconsMap[value.type],active:k===viewportName,onClick:()=>{update({value:k,isRotated:!1}),onHide();}}))].flat()}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React2__default.createElement(IconButtonWithLabel,{disabled:isLocked,key:"viewport",title:"Change the size of the preview",active:isActive,onDoubleClick:()=>{update({value:void 0,isRotated:!1});}},React2__default.createElement(GrowIcon,null),item!==responsiveViewport?React2__default.createElement(IconButtonLabel,null,item.name," ",isRotated?"(L)":"(P)"):null)),React2__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{width,height}}}),item!==responsiveViewport?React2__default.createElement(ActiveViewportSize,null,React2__default.createElement(ActiveViewportLabel,{title:"Viewport width"},width.replace("px","")),isLocked?"/":React2__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{update({value:viewportName,isRotated:!isRotated});}},React2__default.createElement(TransferIcon,null)),React2__default.createElement(ActiveViewportLabel,{title:"Viewport height"},height.replace("px",""))):null)});var toList=memoize(50)(items=>[...baseViewports,...Object.entries(items).map(([id,{name,...rest}])=>({...rest,id,title:name}))]),responsiveViewport2={id:"reset",title:"Reset viewport",styles:null,type:"other"},baseViewports=[responsiveViewport2],toLinks=memoize(50)((list,active,updateGlobals,close)=>list.filter(i=>i.id!==responsiveViewport2.id||active.id!==i.id).map(i=>({...i,onClick:()=>{updateGlobals({viewport:i.id}),close();}}))),flip=({width,height,...styles})=>({...styles,height:width,width:height}),ActiveViewportSize2=styled.div({display:"inline-flex",alignItems:"center"}),ActiveViewportLabel2=styled.div(({theme})=>({display:"inline-block",textDecoration:"none",padding:10,fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,lineHeight:"1",height:40,border:"none",borderTop:"3px solid transparent",borderBottom:"3px solid transparent",background:"transparent"})),IconButtonWithLabel2=styled(IconButton)(()=>({display:"inline-flex",alignItems:"center"})),IconButtonLabel2=styled.div(({theme})=>({fontSize:theme.typography.size.s2-1,marginLeft:10})),getStyles=(prevStyles,styles,isRotated)=>{if(styles===null)return;let result=typeof styles=="function"?styles(prevStyles):styles;return isRotated?flip(result):result},ViewportToolLegacy=memo(function(){let[globals,updateGlobals]=useGlobals(),{viewports=MINIMAL_VIEWPORTS,defaultOrientation,defaultViewport,disable}=useParameter(PARAM_KEY,{}),list=toList(viewports),api=useStorybookApi(),[isTooltipVisible,setIsTooltipVisible]=useState(!1);defaultViewport&&!list.find(i=>i.id===defaultViewport)&&console.warn(`Cannot find "defaultViewport" of "${defaultViewport}" in addon-viewport configs, please check the "viewports" setting in the configuration.`),useEffect(()=>{registerShortcuts(api,globals,updateGlobals,Object.keys(viewports));},[viewports,globals,globals.viewport,updateGlobals,api]),useEffect(()=>{let defaultRotated=defaultOrientation==="landscape";(defaultViewport&&globals.viewport!==defaultViewport||defaultOrientation&&globals.viewportRotated!==defaultRotated)&&updateGlobals({viewport:defaultViewport,viewportRotated:defaultRotated});},[defaultOrientation,defaultViewport,updateGlobals]);let item=list.find(i=>i.id===globals.viewport)||list.find(i=>i.id===defaultViewport)||list.find(i=>i.default)||responsiveViewport2,ref=useRef(),styles=getStyles(ref.current,item.styles,globals.viewportRotated);return useEffect(()=>{ref.current=styles;},[item]),disable||Object.entries(viewports).length===0?null:React2__default.createElement(Fragment,null,React2__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>React2__default.createElement(TooltipLinkList,{links:toLinks(list,item,updateGlobals,onHide)}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React2__default.createElement(IconButtonWithLabel2,{key:"viewport",title:"Change the size of the preview",active:isTooltipVisible||!!styles,onDoubleClick:()=>{updateGlobals({viewport:responsiveViewport2.id});}},React2__default.createElement(GrowIcon,null),styles?React2__default.createElement(IconButtonLabel2,null,globals.viewportRotated?`${item.title} (L)`:`${item.title} (P)`):null)),styles?React2__default.createElement(ActiveViewportSize2,null,React2__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{...styles||{width:"100%",height:"100%"}}}}),React2__default.createElement(ActiveViewportLabel2,{title:"Viewport width"},styles.width.replace("px","")),React2__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{updateGlobals({viewportRotated:!globals.viewportRotated});}},React2__default.createElement(TransferIcon,null)),React2__default.createElement(ActiveViewportLabel2,{title:"Viewport height"},styles.height.replace("px",""))):null)});addons.register(ADDON_ID,api=>{addons.add(ADDON_ID,{title:"viewport / media-queries",type:types.TOOL,match:({viewMode,tabId})=>viewMode==="story"&&!tabId,render:()=>FEATURES?.viewportStoryGlobals?React2.createElement(ViewportTool,{api}):React2.createElement(ViewportToolLegacy,null)});});

dist/preview.d.ts

 type GlobalState = {
+    /**
+     * When set, the viewport is applied and cannot be changed using the toolbar. Must match the key
+     * of one of the available viewports.
+     */
     value: string | undefined;
+    /**
+     * When true the viewport applied will be rotated 90°, e.g. it will rotate from portrait to
+     * landscape orientation.
+     */
     isRotated: boolean;
@@ -4,0 +12,0 @@ };

package.json

 {
   "name": "@storybook/addon-viewport",
-  "version": "0.0.0-pr-30197-sha-3a606792",
+  "version": "0.0.0-pr-30197-sha-7b4f8199",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
@@ -42,2 +42,12 @@ "keywords": [
   "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
   "files": [
@@ -62,6 +72,6 @@ "dist/**/*",
     "react-dom": "^18.2.0",
-    "typescript": "^5.3.2"
+    "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "storybook": "^0.0.0-pr-30197-sha-3a606792"
+    "storybook": "^0.0.0-pr-30197-sha-7b4f8199"
   },
@@ -68,0 +78,0 @@ "publishConfig": {

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30490

increased by13%

Lines of code

411

increased by19.83%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes