@storybook/addon-viewport - npm Package Compare versions

Comparing version 0.0.0-pr-28756-sha-d271575c to 0.0.0-pr-28761-sha-b7b04012

dist/index.d.ts

@@ -1,3 +0,26 @@
-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>;
 
@@ -8,2 +31,2 @@ declare const INITIAL_VIEWPORTS: ViewportMap;
 
-export { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS, ViewportMap };
+export { Config, DEFAULT_VIEWPORT, GlobalState, GlobalStateUpdate, INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS, ModernViewport, Styles, Viewport, ViewportMap, ViewportStyles };

dist/manager.js

@@ -1,9 +0,9 @@
-import * as React from 'react';
-import React__default, { memo, useState, useEffect, useRef, Fragment } from 'react';
+import * as React3 from 'react';
+import React3__default, { memo, useState, useEffect, useRef, Fragment, useCallback } from 'react';
 import { useGlobals, useParameter, useStorybookApi, addons, types } from 'storybook/internal/manager-api';
 import memoize from 'memoizerific';
-import { styled, withTheme, Global } from 'storybook/internal/theming';
+import { styled, Global } from 'storybook/internal/theming';
 import { IconButton, WithTooltip, TooltipLinkList } from 'storybook/internal/components';
-import { GrowIcon, TransferIcon } from '@storybook/icons';
+import { GrowIcon, TransferIcon, BrowserIcon, MobileIcon, TabletIcon, RefreshIcon } 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 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 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},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)||responsiveViewport,ref=useRef(),styles=getStyles(ref.current,item.styles,globals.viewportRotated);return useEffect(()=>{ref.current=styles;},[item]),disable||Object.entries(viewports).length===0?null:React3__default.createElement(Fragment,null,React3__default.createElement(WithTooltip,{placement:"top",tooltip:({onHide})=>React3__default.createElement(TooltipLinkList,{links:toLinks(list,item,updateGlobals,onHide)}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React3__default.createElement(IconButtonWithLabel,{key:"viewport",title:"Change the size of the preview",active:isTooltipVisible||!!styles,onDoubleClick:()=>{updateGlobals({viewport:responsiveViewport.id});}},React3__default.createElement(GrowIcon,null),styles?React3__default.createElement(IconButtonLabel,null,globals.viewportRotated?`${item.title} (L)`:`${item.title} (P)`):null)),styles?React3__default.createElement(ActiveViewportSize,null,React3__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{...styles||{width:"100%",height:"100%"}}}}),React3__default.createElement(ActiveViewportLabel,{title:"Viewport width"},styles.width.replace("px","")),React3__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{updateGlobals({viewportRotated:!globals.viewportRotated});}},React3__default.createElement(TransferIcon,null)),React3__default.createElement(ActiveViewportLabel,{title:"Viewport height"},styles.height.replace("px",""))):null)});var 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})),iconsMap={desktop:React3__default.createElement(BrowserIcon,null),mobile:React3__default.createElement(MobileIcon,null),tablet:React3__default.createElement(TabletIcon,null),other:React3__default.createElement(Fragment,null)},emptyViewportMap={};var responsiveViewport2={name:"Reset viewport",styles:{height:"100%",width:"100%"},type:"desktop"};var ViewportTool=({api})=>{let config=useParameter(PARAM_KEY),[globals,updateGlobals,storyGlobals]=useGlobals(),[isTooltipVisible,setIsTooltipVisible]=useState(!1),{options=emptyViewportMap,disable}=config||{},data=globals?.[PARAM_KEY]||{},viewportName=data.value,isRotated=data.isRotated,item=options[viewportName]||responsiveViewport2,isActive=isTooltipVisible||item!==responsiveViewport2,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:React3__default.createElement(Pure,{item,updateGlobals,viewportMap:options,viewportName,isRotated,setIsTooltipVisible,isLocked,isActive,width,height})},Pure=React3__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 React3__default.createElement(Fragment,null,React3__default.createElement(WithTooltip,{placement:"bottom",tooltip:({onHide})=>React3__default.createElement(TooltipLinkList,{links:[...length>0&&item!==responsiveViewport2?[{id:"reset",title:"Reset viewport",icon:React3__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();}}))]}),closeOnOutsideClick:!0,onVisibleChange:setIsTooltipVisible},React3__default.createElement(IconButtonWithLabel2,{disabled:isLocked,key:"viewport",title:"Change the size of the preview",active:isActive,onDoubleClick:()=>{update({value:void 0,isRotated:!1});}},React3__default.createElement(GrowIcon,null),item!==responsiveViewport2?React3__default.createElement(IconButtonLabel2,null,item.name," ",isRotated?"(L)":"(P)"):null)),React3__default.createElement(Global,{styles:{'iframe[data-is-storybook="true"]':{width,height}}}),item!==responsiveViewport2?React3__default.createElement(ActiveViewportSize2,null,React3__default.createElement(ActiveViewportLabel2,{title:"Viewport width"},width.replace("px","")),isLocked?"/":React3__default.createElement(IconButton,{key:"viewport-rotate",title:"Rotate viewport",onClick:()=>{update({value:viewportName,isRotated:!isRotated});}},React3__default.createElement(TransferIcon,null)),React3__default.createElement(ActiveViewportLabel2,{title:"Viewport height"},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?React3.createElement(ViewportTool,{api}):React3.createElement(ViewportToolLegacy,null)});});

dist/preview.d.ts

@@ -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;

dist/preview.js

 '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;

package.json

 {
   "name": "@storybook/addon-viewport",
-  "version": "0.0.0-pr-28756-sha-d271575c",
+  "version": "0.0.0-pr-28761-sha-b7b04012",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
@@ -65,3 +65,3 @@ "keywords": [
   "peerDependencies": {
-    "storybook": "^0.0.0-pr-28756-sha-d271575c"
+    "storybook": "^0.0.0-pr-28761-sha-b7b04012"
   },
@@ -73,3 +73,2 @@ "publishConfig": {
     "exportEntries": [
-      "./src/models/index.ts",
       "./src/index.ts"
@@ -76,0 +75,0 @@ ],

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

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

20948

increased by26.7%

Lines of code

116

increased by22.11%

Worsened metrics

Number of package files

11

decreased by-21.43%

No dependency changes