@storybook/addon-viewport/dist/manager.js

Build responsive components by adjusting Storybook’s viewport size and orientation

"use strict";var __create=Object.create;var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __getProtoOf=Object.getPrototypeOf,__hasOwnProp=Object.prototype.hasOwnProperty;var __copyProps=(to,from,except,desc)=>{if(from&&typeof from=="object"||typeof from=="function")for(let key of __getOwnPropNames(from))!__hasOwnProp.call(to,key)&&key!==except&&__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable});return to};var __toESM=(mod,isNodeMode,target)=>(target=mod!=null?__create(__getProtoOf(mod)):{},__copyProps(isNodeMode||!mod||!mod.__esModule?__defProp(target,"default",{value:mod,enumerable:!0}):target,mod));var React2=__toESM(require("react")),import_manager_api2=require("@storybook/manager-api");var ADDON_ID="storybook/viewport",PARAM_KEY="viewport",UPDATE=`${ADDON_ID}/update`,CONFIGURE=`${ADDON_ID}/configure`,SET=`${ADDON_ID}/setStoryDefaultViewport`,CHANGED=`${ADDON_ID}/viewportChanged`;var import_react=__toESM(require("react")),import_memoizerific=__toESM(require("memoizerific")),import_theming=require("@storybook/theming"),import_components=require("@storybook/components"),import_manager_api=require("@storybook/manager-api");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,setState,viewportsKeys)=>{await api.setAddonShortcut(ADDON_ID,{label:"Previous viewport",defaultShortcut:["shift","V"],actionName:"previous",action:()=>{let{selected,isRotated}=api.getAddonState(ADDON_ID);setState({selected:getPreviousViewport(viewportsKeys,selected),isRotated})}}),await api.setAddonShortcut(ADDON_ID,{label:"Next viewport",defaultShortcut:["V"],actionName:"next",action:()=>{let{selected,isRotated}=api.getAddonState(ADDON_ID);setState({selected:getNextViewport(viewportsKeys,selected),isRotated})}}),await api.setAddonShortcut(ADDON_ID,{label:"Reset viewport",defaultShortcut:["alt","V"],actionName:"reset",action:()=>{let{isRotated}=api.getAddonState(ADDON_ID);setState({selected:"reset",isRotated})}})};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=(0,import_memoizerific.default)(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=(0,import_memoizerific.default)(50)((list,active,set,state,close)=>list.filter(i=>i.id!==responsiveViewport.id||active.id!==i.id).map(i=>({...i,onClick:()=>{set({...state,selected:i.id}),close()}}))),wrapperId="storybook-preview-wrapper",flip=({width,height,...styles})=>({...styles,height:width,width:height}),ActiveViewportSize=import_theming.styled.div(()=>({display:"inline-flex"})),ActiveViewportLabel=import_theming.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=(0,import_theming.styled)(import_components.IconButton)(()=>({display:"inline-flex",alignItems:"center"})),IconButtonLabel=import_theming.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=(0,import_react.memo)((0,import_theming.withTheme)(({theme})=>{let{viewports=MINIMAL_VIEWPORTS,defaultOrientation="portrait",defaultViewport=responsiveViewport.id,disable}=(0,import_manager_api.useParameter)(PARAM_KEY,{}),[state,setState]=(0,import_manager_api.useAddonState)(ADDON_ID,{selected:defaultViewport,isRotated:defaultOrientation==="landscape"}),list=toList(viewports),api=(0,import_manager_api.useStorybookApi)(),[isTooltipVisible,setIsTooltipVisible]=(0,import_react.useState)(!1);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.`),(0,import_react.useEffect)(()=>{registerShortcuts(api,setState,Object.keys(viewports))},[viewports]),(0,import_react.useEffect)(()=>{setState({selected:defaultViewport||(state.selected&&viewports[state.selected]?state.selected:responsiveViewport.id),isRotated:defaultOrientation==="landscape"})},[defaultOrientation,defaultViewport]);let{selected,isRotated}=state,item=list.find(i=>i.id===selected)||list.find(i=>i.id===defaultViewport)||list.find(i=>i.default)||responsiveViewport,ref=(0,import_react.useRef)(),styles=getStyles(ref.current,item.styles,isRotated);return(0,import_react.useEffect)(()=>{ref.current=styles},[item]),disable||Object.entries(viewports).length===0?null:import_react.default.createElement(import_react.Fragment,null,import_react.default.createElement(import_components.WithTooltip,{placement:"top",tooltip:({onHide})=>import_react.default.createElement(import_components.TooltipLinkList,{links:toLinks(list,item,setState,state,onHide)}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},import_react.default.createElement(IconButtonWithLabel,{key:"viewport",title:"Change the size of the preview",active:isTooltipVisible||!!styles,onDoubleClick:()=>{setState({...state,selected:responsiveViewport.id})}},import_react.default.createElement(import_components.Icons,{icon:"grow"}),styles?import_react.default.createElement(IconButtonLabel,null,isRotated?`${item.title} (L)`:`${item.title} (P)`):null)),styles?import_react.default.createElement(ActiveViewportSize,null,import_react.default.createElement(import_theming.Global,{styles:{'iframe[data-is-storybook="true"]':{margin:"auto",transition:"none",position:"relative",border:"1px solid black",boxShadow:"0 0 100px 100vw rgba(0,0,0,0.5)",...styles},[`#${wrapperId}`]:{padding:theme.layoutMargin,alignContent:"center",alignItems:"center",justifyContent:"center",justifyItems:"center",overflow:"auto",display:"grid",gridTemplateColumns:"100%",gridTemplateRows:"100%"}}}),import_react.default.createElement(ActiveViewportLabel,{title:"Viewport width"},styles.width.replace("px","")),import_react.default.createElement(import_components.IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{setState({...state,isRotated:!isRotated})}},import_react.default.createElement(import_components.Icons,{icon:"transfer"})),import_react.default.createElement(ActiveViewportLabel,{title:"Viewport height"},styles.height.replace("px",""))):null)}));import_manager_api2.addons.register(ADDON_ID,()=>{import_manager_api2.addons.add(ADDON_ID,{title:"viewport / media-queries",type:import_manager_api2.types.TOOL,match:({viewMode})=>viewMode==="story",render:()=>React2.createElement(ViewportTool,null)})});