Socket
Socket
Sign inDemoInstall

@storybook/addon-interactions

Package Overview
Dependencies
Maintainers
11
Versions
961
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@storybook/addon-interactions - npm Package Compare versions

Comparing version 0.0.0-pr-28882-sha-90fe4bc9 to 0.0.0-pr-28882-sha-a04fe375

2

dist/manager.js

@@ -17,2 +17,2 @@ import * as React9 from 'react';

`),more=paragraphs.length>1;return React9.createElement(RowMessage,null,React9.createElement("pre",null,paragraphs[0]),more&&React9.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{let[isHovered,setIsHovered]=React9.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React9.createElement(RowContainer,{call,pausedAt},React9.createElement(RowHeader,{isInteractive},React9.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React9.createElement(StatusIcon,{status:isHovered?CallStates.ACTIVE:call.status}),React9.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React9.createElement(MethodCall,{call,callsById}))),React9.createElement(RowActions,null,childCallIds?.length>0&&React9.createElement(WithTooltip,{hasChrome:!1,tooltip:React9.createElement(Note,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React9.createElement(StyledIconButton,{onClick:toggleCollapsed},React9.createElement(ListUnorderedIcon,null))))),call.status===CallStates.ERROR&&call.exception?.callId===call.id&&React9.createElement(Exception,{exception:call.exception}))};var StyledBadge=styled.div(({theme,status})=>({padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:{[CallStates.DONE]:theme.color.positive,[CallStates.ERROR]:theme.color.negative,[CallStates.ACTIVE]:theme.color.warning,[CallStates.WAITING]:theme.color.warning}[status],color:"white",fontFamily:typography.fonts.base,textTransform:"uppercase",fontSize:typography.size.s1,letterSpacing:3,fontWeight:typography.weight.bold,width:65,textAlign:"center"})),StatusBadge=({status})=>{let badgeText={[CallStates.DONE]:"Pass",[CallStates.ERROR]:"Fail",[CallStates.ACTIVE]:"Runs",[CallStates.WAITING]:"Runs"}[status];return React9__default.createElement(StyledBadge,{"aria-label":"Status of the test run",status},badgeText)};var SubnavWrapper=styled.div(({theme})=>({background:theme.background.app,borderBottom:`1px solid ${theme.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=styled.nav(({theme})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=styled(Button)(({theme})=>({borderRadius:4,padding:6,color:theme.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme.color.secondary}}})),Note2=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),StyledIconButton2=styled(IconButton)(({theme})=>({color:theme.textMutedColor,margin:"0 3px"})),StyledSeparator=styled(Separator)({marginTop:0}),StyledLocation=styled(P)(({theme})=>({color:theme.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=styled.div({display:"flex",alignItems:"center"}),RewindButton=styled(StyledIconButton2)({marginLeft:9}),JumpToEndButton=styled(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=styled(StyledIconButton2)(({theme,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd})=>{let buttonText=status===CallStates.ERROR?"Scroll to error":"Scroll to end";return React9__default.createElement(SubnavWrapper,null,React9__default.createElement(Bar,null,React9__default.createElement(StyledSubnav,null,React9__default.createElement(Group,null,React9__default.createElement(StatusBadge,{status}),React9__default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),React9__default.createElement(StyledSeparator,null),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go to start"})},React9__default.createElement(RewindButton,{"aria-label":"Go to start",onClick:controls.start,disabled:!controlStates.start},React9__default.createElement(RewindIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go back"})},React9__default.createElement(StyledIconButton2,{"aria-label":"Go back",onClick:controls.back,disabled:!controlStates.back},React9__default.createElement(PlayBackIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go forward"})},React9__default.createElement(StyledIconButton2,{"aria-label":"Go forward",onClick:controls.next,disabled:!controlStates.next},React9__default.createElement(PlayNextIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go to end"})},React9__default.createElement(StyledIconButton2,{"aria-label":"Go to end",onClick:controls.end,disabled:!controlStates.end},React9__default.createElement(FastForwardIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Rerun"})},React9__default.createElement(RerunButton,{"aria-label":"Rerun",onClick:controls.rerun},React9__default.createElement(SyncIcon,null)))),storyFileName&&React9__default.createElement(Group,null,React9__default.createElement(StyledLocation,null,storyFileName)))))};var Container=styled.div(({theme})=>({height:"100%",background:theme.background.content})),CaughtException=styled.div(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,backgroundColor:theme.base==="dark"?transparentize(.93,theme.color.negative):theme.background.warning,padding:15,fontSize:theme.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=styled.code(({theme})=>({margin:"0 1px",padding:3,fontSize:theme.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=styled.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=styled.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=styled.pre(({theme})=>({margin:0,padding:0,"&:not(:last-child)":{paddingBottom:16},fontSize:theme.typography.size.s1-1})),InteractionsPanel=React9.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,onScrollToEnd,endRef}){return React9.createElement(Container,null,(interactions.length>0||hasException)&&React9.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates.ACTIVE:hasException?CallStates.ERROR:CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React9.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React9.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!isTestAssertionError(caughtException)&&React9.createElement(CaughtException,null,React9.createElement(CaughtExceptionTitle,null,"Caught exception in ",React9.createElement(CaughtExceptionCode,null,"play")," function"),React9.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},printSerializedError(caughtException))),unhandledErrors&&React9.createElement(CaughtException,null,React9.createElement(CaughtExceptionTitle,null,"Unhandled Errors"),React9.createElement(CaughtExceptionDescription,null,"Found ",unhandledErrors.length," unhandled error",unhandledErrors.length>1?"s":""," ","while running the play function. This might cause false positive assertions. Resolve unhandled errors or ignore unhandled errors with setting the",React9.createElement(CaughtExceptionCode,null,"test.dangerouslyIgnoreUnhandledErrors")," ","parameter to ",React9.createElement(CaughtExceptionCode,null,"true"),"."),unhandledErrors.map((error,i)=>React9.createElement(CaughtExceptionStack,{key:i,"data-chromatic":"ignore"},printSerializedError(error)))),React9.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React9.createElement(Empty,null))});function printSerializedError(error){return error.stack||`${error.name}: ${error.message}`}var INITIAL_CONTROL_STATES={start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId));}),{...calls.get(callId),status,isHidden}}).map(call=>{let status=call.status===CallStates.ERROR&&callsById.get(call.ancestors.slice(-1)[0])?.status===CallStates.ACTIVE?CallStates.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=memo(function({storyId}){let[addonState,set]=useAddonState(ADDON_ID,{controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0,unhandledErrors:void 0}),[scrollTarget,setScrollTarget]=useState(void 0),[collapsed,setCollapsed]=useState(new Set),{controlStates=INITIAL_CONTROL_STATES,isErrored=!1,pausedAt=void 0,interactions=[],isPlaying=!1,caughtException=void 0,unhandledErrors=void 0}=addonState,log=useRef([]),calls=useRef(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=useRef();useEffect(()=>{let observer;return global.IntersectionObserver&&(observer=new global.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:global.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer?.disconnect()},[]);let emit=useChannel({[EVENTS.CALL]:setCall,[EVENTS.SYNC]:payload=>{set(s=>{let list=getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed});return {...s,controlStates:payload.controlStates,pausedAt:payload.pausedAt,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}}),log.current=payload.logItems;},[STORY_RENDER_PHASE_CHANGED]:event=>{if(event.newPhase==="preparing"){set({controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0,unhandledErrors:void 0});return}set(s=>({...s,isPlaying:event.newPhase==="playing",pausedAt:void 0,...event.newPhase==="rendering"?{isErrored:!1,caughtException:void 0}:{}}));},[STORY_THREW_EXCEPTION]:()=>{set(s=>({...s,isErrored:!0,hasException:!0}));},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{set(s=>({...s,caughtException:e,hasException:!0}));},[UNHANDLED_ERRORS_WHILE_PLAYING]:e=>{set(s=>({...s,unhandledErrors:e,hasException:!0}));}},[collapsed]);useEffect(()=>{set(s=>{let list=getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed});return {...s,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}});},[collapsed]);let controls=useMemo(()=>({start:()=>emit(EVENTS.START,{storyId}),back:()=>emit(EVENTS.BACK,{storyId}),goto:callId=>emit(EVENTS.GOTO,{storyId,callId}),next:()=>emit(EVENTS.NEXT,{storyId}),end:()=>emit(EVENTS.END,{storyId}),rerun:()=>{emit(FORCE_REMOUNT,{storyId});}}),[storyId]),storyFilePath=useParameter("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget?.scrollIntoView({behavior:"smooth",block:"end"}),hasException=!!caughtException||!!unhandledErrors||interactions.some(v=>v.status===CallStates.ERROR);return isErrored?React9__default.createElement(Fragment,{key:"interactions"}):React9__default.createElement(Fragment,{key:"interactions"},React9__default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});function Title(){let[addonState={}]=useAddonState(ADDON_ID),{hasException,interactionsCount}=addonState;return React9__default.createElement("div",null,React9__default.createElement(Spaced,{col:1},React9__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?React9__default.createElement(Badge,{status:"neutral"},interactionsCount):null,hasException?React9__default.createElement(Badge,{status:"negative"},interactionsCount):null))}addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{type:types.PANEL,title:Title,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=useCallback(({state})=>({storyId:state.storyId}),[]);return React9__default.createElement(AddonPanel,{active},React9__default.createElement(Consumer,{filter:newLocal},({storyId})=>React9__default.createElement(Panel,{storyId})))}});});
`),more=paragraphs.length>1;return React9.createElement(RowMessage,null,React9.createElement("pre",null,paragraphs[0]),more&&React9.createElement("p",null,"See the full stack trace in the browser console."))},Interaction=({call,callsById,controls,controlStates,childCallIds,isHidden,isCollapsed,toggleCollapsed,pausedAt})=>{let[isHovered,setIsHovered]=React9.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React9.createElement(RowContainer,{call,pausedAt},React9.createElement(RowHeader,{isInteractive},React9.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React9.createElement(StatusIcon,{status:CallStates.ACTIVE}),React9.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React9.createElement(MethodCall,{call,callsById}))),React9.createElement(RowActions,null,childCallIds?.length>0&&React9.createElement(WithTooltip,{hasChrome:!1,tooltip:React9.createElement(Note,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React9.createElement(StyledIconButton,{onClick:toggleCollapsed},React9.createElement(ListUnorderedIcon,null))))),call.status===CallStates.ERROR&&call.exception?.callId===call.id&&React9.createElement(Exception,{exception:call.exception}))};var StyledBadge=styled.div(({theme,status})=>({padding:"4px 6px 4px 8px;",borderRadius:"4px",backgroundColor:{[CallStates.DONE]:theme.color.positive,[CallStates.ERROR]:theme.color.negative,[CallStates.ACTIVE]:theme.color.warning,[CallStates.WAITING]:theme.color.warning}[status],color:"white",fontFamily:typography.fonts.base,textTransform:"uppercase",fontSize:typography.size.s1,letterSpacing:3,fontWeight:typography.weight.bold,width:65,textAlign:"center"})),StatusBadge=({status})=>{let badgeText={[CallStates.DONE]:"Pass",[CallStates.ERROR]:"Fail",[CallStates.ACTIVE]:"Runs",[CallStates.WAITING]:"Runs"}[status];return React9__default.createElement(StyledBadge,{"aria-label":"Status of the test run",status},badgeText)};var SubnavWrapper=styled.div(({theme})=>({background:theme.background.app,borderBottom:`1px solid ${theme.appBorderColor}`,position:"sticky",top:0,zIndex:1})),StyledSubnav=styled.nav(({theme})=>({height:40,display:"flex",alignItems:"center",justifyContent:"space-between",paddingLeft:15})),StyledButton=styled(Button)(({theme})=>({borderRadius:4,padding:6,color:theme.textMutedColor,"&:not(:disabled)":{"&:hover,&:focus-visible":{color:theme.color.secondary}}})),Note2=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),StyledIconButton2=styled(IconButton)(({theme})=>({color:theme.textMutedColor,margin:"0 3px"})),StyledSeparator=styled(Separator)({marginTop:0}),StyledLocation=styled(P)(({theme})=>({color:theme.textMutedColor,justifyContent:"flex-end",textAlign:"right",whiteSpace:"nowrap",marginTop:"auto",marginBottom:1,paddingRight:15,fontSize:13})),Group=styled.div({display:"flex",alignItems:"center"}),RewindButton=styled(StyledIconButton2)({marginLeft:9}),JumpToEndButton=styled(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=styled(StyledIconButton2)(({theme,animating,disabled})=>({opacity:disabled?.5:1,svg:{animation:animating&&`${theme.animation.rotate360} 200ms ease-out`}})),Subnav=({controls,controlStates,status,storyFileName,onScrollToEnd})=>{let buttonText=status===CallStates.ERROR?"Scroll to error":"Scroll to end";return React9__default.createElement(SubnavWrapper,null,React9__default.createElement(Bar,null,React9__default.createElement(StyledSubnav,null,React9__default.createElement(Group,null,React9__default.createElement(StatusBadge,{status}),React9__default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),React9__default.createElement(StyledSeparator,null),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go to start"})},React9__default.createElement(RewindButton,{"aria-label":"Go to start",onClick:controls.start,disabled:!controlStates.start},React9__default.createElement(RewindIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go back"})},React9__default.createElement(StyledIconButton2,{"aria-label":"Go back",onClick:controls.back,disabled:!controlStates.back},React9__default.createElement(PlayBackIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go forward"})},React9__default.createElement(StyledIconButton2,{"aria-label":"Go forward",onClick:controls.next,disabled:!controlStates.next},React9__default.createElement(PlayNextIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Go to end"})},React9__default.createElement(StyledIconButton2,{"aria-label":"Go to end",onClick:controls.end,disabled:!controlStates.end},React9__default.createElement(FastForwardIcon,null))),React9__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React9__default.createElement(Note2,{note:"Rerun"})},React9__default.createElement(RerunButton,{"aria-label":"Rerun",onClick:controls.rerun},React9__default.createElement(SyncIcon,null)))),storyFileName&&React9__default.createElement(Group,null,React9__default.createElement(StyledLocation,null,storyFileName)))))};var Container=styled.div(({theme})=>({height:"100%",background:theme.background.content})),CaughtException=styled.div(({theme})=>({borderBottom:`1px solid ${theme.appBorderColor}`,backgroundColor:theme.base==="dark"?transparentize(.93,theme.color.negative):theme.background.warning,padding:15,fontSize:theme.typography.size.s2-1,lineHeight:"19px"})),CaughtExceptionCode=styled.code(({theme})=>({margin:"0 1px",padding:3,fontSize:theme.typography.size.s1-1,lineHeight:1,verticalAlign:"top",background:"rgba(0, 0, 0, 0.05)",border:`1px solid ${theme.appBorderColor}`,borderRadius:3})),CaughtExceptionTitle=styled.div({paddingBottom:4,fontWeight:"bold"}),CaughtExceptionDescription=styled.p({margin:0,padding:"0 0 20px"}),CaughtExceptionStack=styled.pre(({theme})=>({margin:0,padding:0,"&:not(:last-child)":{paddingBottom:16},fontSize:theme.typography.size.s1-1})),InteractionsPanel=React9.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,onScrollToEnd,endRef}){return React9.createElement(Container,null,(interactions.length>0||hasException)&&React9.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates.ACTIVE:hasException?CallStates.ERROR:CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React9.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React9.createElement(Interaction,{key:call.id,call,callsById:calls,controls,controlStates,childCallIds:call.childCallIds,isHidden:call.isHidden,isCollapsed:call.isCollapsed,toggleCollapsed:call.toggleCollapsed,pausedAt}))),caughtException&&!isTestAssertionError(caughtException)&&React9.createElement(CaughtException,null,React9.createElement(CaughtExceptionTitle,null,"Caught exception in ",React9.createElement(CaughtExceptionCode,null,"play")," function"),React9.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},printSerializedError(caughtException))),unhandledErrors&&React9.createElement(CaughtException,null,React9.createElement(CaughtExceptionTitle,null,"Unhandled Errors"),React9.createElement(CaughtExceptionDescription,null,"Found ",unhandledErrors.length," unhandled error",unhandledErrors.length>1?"s":""," ","while running the play function. This might cause false positive assertions. Resolve unhandled errors or ignore unhandled errors with setting the",React9.createElement(CaughtExceptionCode,null,"test.dangerouslyIgnoreUnhandledErrors")," ","parameter to ",React9.createElement(CaughtExceptionCode,null,"true"),"."),unhandledErrors.map((error,i)=>React9.createElement(CaughtExceptionStack,{key:i,"data-chromatic":"ignore"},printSerializedError(error)))),React9.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React9.createElement(Empty,null))});function printSerializedError(error){return error.stack||`${error.name}: ${error.message}`}var INITIAL_CONTROL_STATES={start:!1,back:!1,goto:!1,next:!1,end:!1},getInteractions=({log,calls,collapsed,setCollapsed})=>{let callsById=new Map,childCallMap=new Map;return log.map(({callId,ancestors,status})=>{let isHidden=!1;return ancestors.forEach(ancestor=>{collapsed.has(ancestor)&&(isHidden=!0),childCallMap.set(ancestor,(childCallMap.get(ancestor)||[]).concat(callId));}),{...calls.get(callId),status,isHidden}}).map(call=>{let status=call.status===CallStates.ERROR&&callsById.get(call.ancestors.slice(-1)[0])?.status===CallStates.ACTIVE?CallStates.ACTIVE:call.status;return callsById.set(call.id,{...call,status}),{...call,status,childCallIds:childCallMap.get(call.id),isCollapsed:collapsed.has(call.id),toggleCollapsed:()=>setCollapsed(ids=>(ids.has(call.id)?ids.delete(call.id):ids.add(call.id),new Set(ids)))}})},Panel=memo(function({storyId}){let[addonState,set]=useAddonState(ADDON_ID,{controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0,unhandledErrors:void 0}),[scrollTarget,setScrollTarget]=useState(void 0),[collapsed,setCollapsed]=useState(new Set),{controlStates=INITIAL_CONTROL_STATES,isErrored=!1,pausedAt=void 0,interactions=[],isPlaying=!1,caughtException=void 0,unhandledErrors=void 0}=addonState,log=useRef([]),calls=useRef(new Map),setCall=({status,...call})=>calls.current.set(call.id,call),endRef=useRef();useEffect(()=>{let observer;return global.IntersectionObserver&&(observer=new global.IntersectionObserver(([end])=>setScrollTarget(end.isIntersecting?void 0:end.target),{root:global.document.querySelector("#panel-tab-content")}),endRef.current&&observer.observe(endRef.current)),()=>observer?.disconnect()},[]);let emit=useChannel({[EVENTS.CALL]:setCall,[EVENTS.SYNC]:payload=>{set(s=>{let list=getInteractions({log:payload.logItems,calls:calls.current,collapsed,setCollapsed});return {...s,controlStates:payload.controlStates,pausedAt:payload.pausedAt,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}}),log.current=payload.logItems;},[STORY_RENDER_PHASE_CHANGED]:event=>{if(event.newPhase==="preparing"){set({controlStates:INITIAL_CONTROL_STATES,isErrored:!1,pausedAt:void 0,interactions:[],isPlaying:!1,hasException:!1,caughtException:void 0,interactionsCount:0,unhandledErrors:void 0});return}set(s=>({...s,isPlaying:event.newPhase==="playing",pausedAt:void 0,...event.newPhase==="rendering"?{isErrored:!1,caughtException:void 0}:{}}));},[STORY_THREW_EXCEPTION]:()=>{set(s=>({...s,isErrored:!0,hasException:!0}));},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{set(s=>({...s,caughtException:e,hasException:!0}));},[UNHANDLED_ERRORS_WHILE_PLAYING]:e=>{set(s=>({...s,unhandledErrors:e,hasException:!0}));}},[collapsed]);useEffect(()=>{set(s=>{let list=getInteractions({log:log.current,calls:calls.current,collapsed,setCollapsed});return {...s,interactions:list,interactionsCount:list.filter(({method})=>method!=="step").length}});},[collapsed]);let controls=useMemo(()=>({start:()=>emit(EVENTS.START,{storyId}),back:()=>emit(EVENTS.BACK,{storyId}),goto:callId=>emit(EVENTS.GOTO,{storyId,callId}),next:()=>emit(EVENTS.NEXT,{storyId}),end:()=>emit(EVENTS.END,{storyId}),rerun:()=>{emit(FORCE_REMOUNT,{storyId});}}),[storyId]),storyFilePath=useParameter("fileName",""),[fileName]=storyFilePath.toString().split("/").slice(-1),scrollToTarget=()=>scrollTarget?.scrollIntoView({behavior:"smooth",block:"end"}),hasException=!!caughtException||!!unhandledErrors||interactions.some(v=>v.status===CallStates.ERROR);return isErrored?React9__default.createElement(Fragment,{key:"interactions"}):React9__default.createElement(Fragment,{key:"interactions"},React9__default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});function Title(){let[addonState={}]=useAddonState(ADDON_ID),{hasException,interactionsCount}=addonState;return React9__default.createElement("div",null,React9__default.createElement(Spaced,{col:1},React9__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?React9__default.createElement(Badge,{status:"neutral"},interactionsCount):null,hasException?React9__default.createElement(Badge,{status:"negative"},interactionsCount):null))}addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{type:types.PANEL,title:Title,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=useCallback(({state})=>({storyId:state.storyId}),[]);return React9__default.createElement(AddonPanel,{active},React9__default.createElement(Consumer,{filter:newLocal},({storyId})=>React9__default.createElement(Panel,{storyId})))}});});

8

package.json
{
"name": "@storybook/addon-interactions",
"version": "0.0.0-pr-28882-sha-90fe4bc9",
"version": "0.0.0-pr-28882-sha-a04fe375",
"description": "Automate, test and debug user interactions",

@@ -57,4 +57,4 @@ "keywords": [

"@storybook/global": "^5.0.0",
"@storybook/instrumenter": "0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/test": "0.0.0-pr-28882-sha-90fe4bc9",
"@storybook/instrumenter": "0.0.0-pr-28882-sha-a04fe375",
"@storybook/test": "0.0.0-pr-28882-sha-a04fe375",
"polished": "^4.2.2",

@@ -73,3 +73,3 @@ "ts-dedent": "^2.2.0"

"peerDependencies": {
"storybook": "^0.0.0-pr-28882-sha-90fe4bc9"
"storybook": "^0.0.0-pr-28882-sha-a04fe375"
},

@@ -76,0 +76,0 @@ "publishConfig": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc