Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@storybook/addon-viewport
Advanced tools
@storybook/addon-viewport - npm Package Compare versions
Comparing version 0.0.0-pr-28585-sha-af48f0d6 to 0.0.0-pr-28607-sha-54ec63fe
@@ -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 }; |
| '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; |
@@ -1,9 +0,9 @@ | ||
| import * as React from 'react'; | ||
| import React__default, { memo, useState, useEffect, useRef, Fragment } from 'react'; | ||
| 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/internal/theming'; | ||
| import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components'; | ||
| import { GrowIcon, TransferIcon } from '@storybook/icons'; | ||
| var ADDON_ID="storybook/viewport",PARAM_KEY="viewport";var initialGlobals={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,globals,updateGlobals,viewportsKeys)=>{await api.setAddonShortcut(ADDON_ID,{label:"Previous viewport",defaultShortcut:["alt","shift","V"],actionName:"previous",action:()=>{updateGlobals({viewport:getPreviousViewport(viewportsKeys,globals.viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Next viewport",defaultShortcut:["alt","V"],actionName:"next",action:()=>{updateGlobals({viewport:getNextViewport(viewportsKeys,globals.viewport)});}}),await api.setAddonShortcut(ADDON_ID,{label:"Reset viewport",defaultShortcut:["alt","control","V"],actionName:"reset",action:()=>{updateGlobals(initialGlobals);}});};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",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})),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[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)||responsiveViewport,ref=useRef(),styles=getStyles(ref.current,item.styles,globals.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,globals.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:!globals.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)});}); |
@@ -1,2 +0,7 @@ | ||
| declare const initialGlobals: { | ||
| type GlobalState = { | ||
| value: string | undefined; | ||
| isRotated: boolean; | ||
| }; | ||
| declare const initialGlobals: Record<string, GlobalState> | { | ||
| viewport: string; | ||
@@ -3,0 +8,0 @@ viewportRotated: boolean; |
| 'use strict'; | ||
| var initialGlobals={viewport:"reset",viewportRotated:!1}; | ||
| 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; |
| { | ||
| "name": "@storybook/addon-viewport", | ||
| "version": "0.0.0-pr-28585-sha-af48f0d6", | ||
| "version": "0.0.0-pr-28607-sha-54ec63fe", | ||
| "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", | ||
@@ -28,3 +28,2 @@ "keywords": [ | ||
| "types": "./dist/index.d.ts", | ||
| "node": "./dist/index.js", | ||
| "import": "./dist/index.mjs", | ||
@@ -52,4 +51,4 @@ "require": "./dist/index.js" | ||
| "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" | ||
| }, | ||
@@ -61,3 +60,3 @@ "dependencies": { | ||
| "@storybook/global": "^5.0.0", | ||
| "@storybook/icons": "^1.2.5", | ||
| "@storybook/icons": "^1.2.12", | ||
| "react": "^18.2.0", | ||
@@ -68,3 +67,3 @@ "react-dom": "^18.2.0", | ||
| "peerDependencies": { | ||
| "storybook": "^0.0.0-pr-28585-sha-af48f0d6" | ||
| "storybook": "^0.0.0-pr-28607-sha-54ec63fe" | ||
| }, | ||
@@ -76,3 +75,2 @@ "publishConfig": { | ||
| "exportEntries": [ | ||
| "./src/models/index.ts", | ||
| "./src/index.ts" | ||
@@ -79,0 +77,0 @@ ], |
@@ -1,1 +0,1 @@ | ||
| export { globals } from './dist/preview'; | ||
| export * from './dist/preview'; |
@@ -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 @@  | ||
| 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): | ||
@@ -32,2 +32,2 @@ ```js | ||
| 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). |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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 riskPackage 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
LicenseThis 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
- increased by63%
26950
- Lines of code
- increased by261.05%
343
Worsened metrics
- Number of package files
- decreased by-21.43%
11
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes