@storybook/addon-viewport - npm Package Compare versions

Comparing version 0.0.0-pr-26243-sha-393e9350 to 0.0.0-pr-26243-sha-c7b1761e

dist/index.d.ts

@@ -1,4 +0,254 @@
-import { ViewportMap } from './models/index.js';
-export { Styles, Viewport, ViewportAddonParameter, ViewportStyles } from './models/index.js';
+type Styles = ViewportStyles | ((s: ViewportStyles | undefined) => ViewportStyles) | null;
+interface Viewport {
+    name: string;
+    styles: Styles;
+    type: 'desktop' | 'mobile' | 'tablet' | 'other';
+}
+interface ModernViewport {
+    name: string;
+    styles: ViewportStyles;
+    type: 'desktop' | 'mobile' | 'tablet' | 'other';
+}
+interface ViewportStyles {
+    height: string;
+    width: string;
+}
+type ViewportMap = Record<string, Viewport>;
+interface Config {
+    options: Record<string, ModernViewport>;
+    disable: boolean;
+}
+type GlobalState = {
+    value: string | undefined;
+    isRotated: boolean;
+};
+type GlobalStateUpdate = Partial<GlobalState>;
 
+declare const INITIAL_VIEWPORTS_DATA: {
+    readonly iphone5: {
+        readonly name: "iPhone 5";
+        readonly styles: {
+            readonly height: "568px";
+            readonly width: "320px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone6: {
+        readonly name: "iPhone 6";
+        readonly styles: {
+            readonly height: "667px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone6p: {
+        readonly name: "iPhone 6 Plus";
+        readonly styles: {
+            readonly height: "736px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone8p: {
+        readonly name: "iPhone 8 Plus";
+        readonly styles: {
+            readonly height: "736px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonex: {
+        readonly name: "iPhone X";
+        readonly styles: {
+            readonly height: "812px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonexr: {
+        readonly name: "iPhone XR";
+        readonly styles: {
+            readonly height: "896px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonexsmax: {
+        readonly name: "iPhone XS Max";
+        readonly styles: {
+            readonly height: "896px";
+            readonly width: "414px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphonese2: {
+        readonly name: "iPhone SE (2nd generation)";
+        readonly styles: {
+            readonly height: "667px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone12mini: {
+        readonly name: "iPhone 12 mini";
+        readonly styles: {
+            readonly height: "812px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone12: {
+        readonly name: "iPhone 12";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone12promax: {
+        readonly name: "iPhone 12 Pro Max";
+        readonly styles: {
+            readonly height: "926px";
+            readonly width: "428px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphoneSE3: {
+        readonly name: "iPhone SE 3rd generation";
+        readonly styles: {
+            readonly height: "667px";
+            readonly width: "375px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone13: {
+        readonly name: "iPhone 13";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone13pro: {
+        readonly name: "iPhone 13 Pro";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone13promax: {
+        readonly name: "iPhone 13 Pro Max";
+        readonly styles: {
+            readonly height: "926px";
+            readonly width: "428px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone14: {
+        readonly name: "iPhone 14";
+        readonly styles: {
+            readonly height: "844px";
+            readonly width: "390px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone14pro: {
+        readonly name: "iPhone 14 Pro";
+        readonly styles: {
+            readonly height: "852px";
+            readonly width: "393px";
+        };
+        readonly type: "mobile";
+    };
+    readonly iphone14promax: {
+        readonly name: "iPhone 14 Pro Max";
+        readonly styles: {
+            readonly height: "932px";
+            readonly width: "430px";
+        };
+        readonly type: "mobile";
+    };
+    readonly ipad: {
+        readonly name: "iPad";
+        readonly styles: {
+            readonly height: "1024px";
+            readonly width: "768px";
+        };
+        readonly type: "tablet";
+    };
+    readonly ipad10p: {
+        readonly name: "iPad Pro 10.5-in";
+        readonly styles: {
+            readonly height: "1112px";
+            readonly width: "834px";
+        };
+        readonly type: "tablet";
+    };
+    readonly ipad11p: {
+        readonly name: "iPad Pro 11-in";
+        readonly styles: {
+            readonly height: "1194px";
+            readonly width: "834px";
+        };
+        readonly type: "tablet";
+    };
+    readonly ipad12p: {
+        readonly name: "iPad Pro 12.9-in";
+        readonly styles: {
+            readonly height: "1366px";
+            readonly width: "1024px";
+        };
+        readonly type: "tablet";
+    };
+    readonly galaxys5: {
+        readonly name: "Galaxy S5";
+        readonly styles: {
+            readonly height: "640px";
+            readonly width: "360px";
+        };
+        readonly type: "mobile";
+    };
+    readonly galaxys9: {
+        readonly name: "Galaxy S9";
+        readonly styles: {
+            readonly height: "740px";
+            readonly width: "360px";
+        };
+        readonly type: "mobile";
+    };
+    readonly nexus5x: {
+        readonly name: "Nexus 5X";
+        readonly styles: {
+            readonly height: "660px";
+            readonly width: "412px";
+        };
+        readonly type: "mobile";
+    };
+    readonly nexus6p: {
+        readonly name: "Nexus 6P";
+        readonly styles: {
+            readonly height: "732px";
+            readonly width: "412px";
+        };
+        readonly type: "mobile";
+    };
+    readonly pixel: {
+        readonly name: "Pixel";
+        readonly styles: {
+            readonly height: "960px";
+            readonly width: "540px";
+        };
+        readonly type: "mobile";
+    };
+    readonly pixelxl: {
+        readonly name: "Pixel XL";
+        readonly styles: {
+            readonly height: "1280px";
+            readonly width: "720px";
+        };
+        readonly type: "mobile";
+    };
+};
+type InitialViewportKeys = keyof typeof INITIAL_VIEWPORTS_DATA;
 declare const INITIAL_VIEWPORTS: ViewportMap;
@@ -8,2 +258,2 @@ declare const DEFAULT_VIEWPORT = "responsive";
 
-export { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS, ViewportMap };
+export { Config, DEFAULT_VIEWPORT, GlobalState, GlobalStateUpdate, INITIAL_VIEWPORTS, InitialViewportKeys, MINIMAL_VIEWPORTS, ModernViewport, Styles, Viewport, ViewportMap, ViewportStyles };

dist/index.js

 'use strict';
 
-var INITIAL_VIEWPORTS={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"}},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 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"}};
 
@@ -5,0 +5,0 @@ exports.DEFAULT_VIEWPORT = DEFAULT_VIEWPORT;

dist/manager.js

@@ -1,9 +0,9 @@
-import * as React from 'react';
-import React__default, { memo, useState, useEffect, useRef, Fragment } from 'react';
-import { useGlobals, useParameter, useStorybookApi, addons, types } from '@storybook/manager-api';
+import * as React2 from 'react';
+import React2__default, { Fragment, useCallback, memo, useState, useEffect, useRef } from 'react';
+import { useGlobals, useParameter, useStorybookApi, addons, types } from 'storybook/internal/manager-api';
+import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
+import { styled, Global } from 'storybook/internal/theming';
+import { BrowserIcon, MobileIcon, TabletIcon, RefreshIcon, GrowIcon, TransferIcon } from '@storybook/icons';
 import memoize from 'memoizerific';
-import { styled, withTheme, Global } from '@storybook/theming';
-import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
-import { GrowIcon, TransferIcon } from '@storybook/icons';
 
-var ADDON_ID="storybook/viewport",PARAM_KEY="viewport";var globals={viewport:"reset",viewportRotated:!1};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,globals2,updateGlobals,viewportsKeys)=>{await api.setAddonShortcut(ADDON_ID,{label:"Previous viewport",defaultShortcut:["alt","shift","V"],actionName:"previous",action:()=>{updateGlobals({viewport:getPreviousViewport(viewportsKeys,globals2.viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Next viewport",defaultShortcut:["alt","V"],actionName:"next",action:()=>{updateGlobals({viewport:getNextViewport(viewportsKeys,globals2.viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Reset viewport",defaultShortcut:["alt","control","V"],actionName:"reset",action:()=>{updateGlobals(globals);}});};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 toList=memoize(50)(items=>[...baseViewports,...Object.entries(items).map(([id,{name,...rest}])=>({...rest,id,title:name}))]),responsiveViewport={id:"reset",title:"Reset viewport",styles:null,type:"other"},baseViewports=[responsiveViewport],toLinks=memoize(50)((list,active,updateGlobals,close)=>list.filter(i=>i.id!==responsiveViewport.id||active.id!==i.id).map(i=>({...i,onClick:()=>{updateGlobals({viewport:i.id}),close();}}))),flip=({width,height,...styles})=>({...styles,height:width,width:height}),ActiveViewportSize=styled.div(()=>({display:"inline-flex"})),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})),getStyles=(prevStyles,styles,isRotated)=>{if(styles===null)return;let result=typeof styles=="function"?styles(prevStyles):styles;return isRotated?flip(result):result},ViewportTool=memo(withTheme(({theme})=>{let[globals2,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,globals2,updateGlobals,Object.keys(viewports));},[viewports,globals2.viewport]),useEffect(()=>{let defaultRotated=defaultOrientation==="landscape";(defaultViewport&&globals2.viewport!==defaultViewport||defaultOrientation&&globals2.viewportRotated!==defaultRotated)&&updateGlobals({viewport:defaultViewport,viewportRotated:defaultRotated});},[defaultOrientation,defaultViewport,globals2,updateGlobals]);let item=list.find(i=>i.id===globals2.viewport)||list.find(i=>i.id===defaultViewport)||list.find(i=>i.default)||responsiveViewport,ref=useRef(),styles=getStyles(ref.current,item.styles,globals2.viewportRotated);return useEffect(()=>{ref.current=styles;},[item]),disable||Object.entries(viewports).length===0?null:React__default.createElement(Fragment,null,React__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>React__default.createElement(TooltipLinkList,{links:toLinks(list,item,updateGlobals,onHide)}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React__default.createElement(IconButtonWithLabel,{key:"viewport",title:"Change the size of the preview",active:isTooltipVisible||!!styles,onDoubleClick:()=>{updateGlobals({viewport:responsiveViewport.id});}},React__default.createElement(GrowIcon,null),styles?React__default.createElement(IconButtonLabel,null,globals2.viewportRotated?`${item.title} (L)`:`${item.title} (P)`):null)),styles?React__default.createElement(ActiveViewportSize,null,React__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{...styles||{width:"100%",height:"100%"}}}}),React__default.createElement(ActiveViewportLabel,{title:"Viewport width"},styles.width.replace("px","")),React__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{updateGlobals({viewportRotated:!globals2.viewportRotated});}},React__default.createElement(TransferIcon,null)),React__default.createElement(ActiveViewportLabel,{title:"Viewport height"},styles.height.replace("px",""))):null)}));addons.register(ADDON_ID,()=>{addons.add(ADDON_ID,{title:"viewport / media-queries",type:types.TOOL,match:({viewMode,tabId})=>viewMode==="story"&&!tabId,render:()=>React.createElement(ViewportTool,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=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.js

@@ -1,3 +0,5 @@
-var globals={viewport:"reset",viewportRotated:!1};
+'use strict';
 
-export { globals };
+var PARAM_KEY="viewport";var modern={[PARAM_KEY]:{value:void 0,isRotated:!1}},legacy={viewport:"reset",viewportRotated:!1},initialGlobals=FEATURES?.viewportStoryGlobals?modern:legacy;
+
+exports.initialGlobals = initialGlobals;

package.json

 {
   "name": "@storybook/addon-viewport",
-  "version": "0.0.0-pr-26243-sha-393e9350",
+  "version": "0.0.0-pr-26243-sha-c7b1761e",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
@@ -28,7 +28,10 @@ "keywords": [
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "require": "./dist/index.js",
-      "import": "./dist/index.mjs"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
     },
-    "./preview": "./dist/preview.js",
+    "./preview": {
+      "types": "./dist/preview.d.ts",
+      "import": "./dist/preview.mjs",
+      "require": "./dist/preview.js"
+    },
     "./manager": "./dist/manager.js",
@@ -48,4 +51,4 @@ "./package.json": "./package.json"
   "scripts": {
-    "check": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/check.ts",
-    "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/addon-bundle.ts"
+    "check": "jiti ../../../scripts/prepare/check.ts",
+    "prep": "jiti ../../../scripts/prepare/addon-bundle.ts"
   },
@@ -56,10 +59,4 @@ "dependencies": {
   "devDependencies": {
-    "@storybook/client-logger": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/components": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/core-events": "0.0.0-pr-26243-sha-393e9350",
     "@storybook/global": "^5.0.0",
-    "@storybook/icons": "^1.2.5",
-    "@storybook/manager-api": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/preview-api": "0.0.0-pr-26243-sha-393e9350",
-    "@storybook/theming": "0.0.0-pr-26243-sha-393e9350",
+    "@storybook/icons": "^1.2.12",
     "react": "^18.2.0",
@@ -69,2 +66,5 @@ "react-dom": "^18.2.0",
   },
+  "peerDependencies": {
+    "storybook": "^0.0.0-pr-26243-sha-c7b1761e"
+  },
   "publishConfig": {
@@ -75,3 +75,2 @@ "access": "public"
     "exportEntries": [
-      "./src/models/index.ts",
       "./src/index.ts"
@@ -86,3 +85,3 @@ ],
   },
-  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae17",
+  "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
   "storybook": {
@@ -89,0 +88,0 @@ "displayName": "Viewport",

preview.js

@@ -1,1 +0,1 @@
-export { globals } from './dist/preview';
+export * from './dist/preview';

README.md

@@ -5,3 +5,3 @@ # Storybook Viewport Addon
 
-[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
 
@@ -12,3 +12,3 @@ ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/viewport/docs/viewport.png)
 
-Viewport 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:
+Viewport is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:
 
@@ -19,3 +19,3 @@ ```sh
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
 
@@ -28,6 +28,6 @@ ```js
 
-You should now be able to see the viewport addon icon in the the toolbar at the top of the screen.
+You should now be able to see the viewport addon icon in the toolbar at the top of the screen.
 
 ## Usage
 
-The usage is documented in the [documentation](https://storybook.js.org/docs/react/essentials/viewport).
+The usage is documented in the [documentation](https://storybook.js.org/docs/essentials/viewport).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26950

increased by64.17%

Dev dependency count

5

decreased by-54.55%

Lines of code

343

increased by294.25%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

11

decreased by-8.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes