@storybook/addon-interactions 8.0.1 → 8.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/manager.js +2 -2
- package/dist/preset.js +1 -1
- package/package.json +11 -11
package/dist/manager.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React10 from 'react';
|
|
2
2
|
import React10__default, { memo, useState, useRef, useEffect, useMemo, Fragment, useCallback } from 'react';
|
|
3
3
|
import { useAddonState, useChannel, useParameter, addons, types, Consumer, useStorybookApi } from '@storybook/manager-api';
|
|
4
|
-
import { Button, TooltipNote, IconButton, Separator, P, AddonPanel, Bar, WithTooltip, Link, Spaced, Badge } from '@storybook/components';
|
|
4
|
+
import { Button, TooltipNote, IconButton, Separator, P, AddonPanel, Bar, WithTooltip, EmptyTabContent, Link, Spaced, Badge } from '@storybook/components';
|
|
5
5
|
import { CallStates, EVENTS } from '@storybook/instrumenter';
|
|
6
6
|
import { global } from '@storybook/global';
|
|
7
7
|
import { STORY_RENDER_PHASE_CHANGED, STORY_THREW_EXCEPTION, PLAY_FUNCTION_THREW_EXCEPTION, UNHANDLED_ERRORS_WHILE_PLAYING, FORCE_REMOUNT } from '@storybook/core-events';
|
|
@@ -12,4 +12,4 @@ import { RewindIcon, PlayBackIcon, PlayNextIcon, FastForwardIcon, SyncIcon, Circ
|
|
|
12
12
|
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 __commonJS=(cb,mod)=>function(){return mod||(0, cb[__getOwnPropNames(cb)[0]])((mod={exports:{}}).exports,mod),mod.exports};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 require_extends=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/extends.js"(exports,module){function _extends5(){return module.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends5.apply(this,arguments)}module.exports=_extends5;}});var require_objectWithoutPropertiesLoose=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var require_defineProperty=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module.exports=_defineProperty;}});var require_objectSpread2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module){var defineProperty=require_defineProperty();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols);}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target}module.exports=_objectSpread22;}});var require_objectWithoutPropertiesLoose2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties2=__commonJS({"../../node_modules/@devtools-ds/themes/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose2();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var require_defineProperty2=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/defineProperty.js"(exports,module){function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}module.exports=_defineProperty;}});var require_objectSpread22=__commonJS({"../../node_modules/@devtools-ds/object-inspector/node_modules/@babel/runtime/helpers/objectSpread2.js"(exports,module){var defineProperty=require_defineProperty2();function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);enumerableOnly&&(symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable})),keys.push.apply(keys,symbols);}return keys}function _objectSpread22(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};i%2?ownKeys(source,!0).forEach(function(key){defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(source).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target}module.exports=_objectSpread22;}});var require_extends2=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/extends.js"(exports,module){function _extends5(){return module.exports=_extends5=Object.assign||function(target){for(var i=1;i<arguments.length;i++){var source=arguments[i];for(var key in source)Object.prototype.hasOwnProperty.call(source,key)&&(target[key]=source[key]);}return target},_extends5.apply(this,arguments)}module.exports=_extends5;}});var require_objectWithoutPropertiesLoose3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js"(exports,module){function _objectWithoutPropertiesLoose(source,excluded){if(source==null)return {};var target={},sourceKeys=Object.keys(source),key,i;for(i=0;i<sourceKeys.length;i++)key=sourceKeys[i],!(excluded.indexOf(key)>=0)&&(target[key]=source[key]);return target}module.exports=_objectWithoutPropertiesLoose;}});var require_objectWithoutProperties3=__commonJS({"../../node_modules/@devtools-ds/tree/node_modules/@babel/runtime/helpers/objectWithoutProperties.js"(exports,module){var objectWithoutPropertiesLoose=require_objectWithoutPropertiesLoose3();function _objectWithoutProperties6(source,excluded){if(source==null)return {};var target=objectWithoutPropertiesLoose(source,excluded),key,i;if(Object.getOwnPropertySymbols){var sourceSymbolKeys=Object.getOwnPropertySymbols(source);for(i=0;i<sourceSymbolKeys.length;i++)key=sourceSymbolKeys[i],!(excluded.indexOf(key)>=0)&&Object.prototype.propertyIsEnumerable.call(source,key)&&(target[key]=source[key]);}return target}module.exports=_objectWithoutProperties6;}});var ADDON_ID="storybook/interactions",PANEL_ID=`${ADDON_ID}/panel`,TUTORIAL_VIDEO_LINK="https://youtu.be/Waht9qq7AoA",DOCUMENTATION_LINK="writing-tests/interaction-testing";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 React10__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}}})),Note=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),StyledIconButton=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(StyledIconButton)({marginLeft:9}),JumpToEndButton=styled(StyledButton)({marginLeft:9,marginRight:9,marginBottom:1,lineHeight:"12px"}),RerunButton=styled(StyledIconButton)(({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 React10__default.createElement(SubnavWrapper,null,React10__default.createElement(Bar,null,React10__default.createElement(StyledSubnav,null,React10__default.createElement(Group,null,React10__default.createElement(StatusBadge,{status}),React10__default.createElement(JumpToEndButton,{onClick:onScrollToEnd,disabled:!onScrollToEnd},buttonText),React10__default.createElement(StyledSeparator,null),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go to start"})},React10__default.createElement(RewindButton,{"aria-label":"Go to start",containsIcon:!0,onClick:controls.start,disabled:!controlStates.start},React10__default.createElement(RewindIcon,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go back"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go back",containsIcon:!0,onClick:controls.back,disabled:!controlStates.back},React10__default.createElement(PlayBackIcon,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go forward"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go forward",containsIcon:!0,onClick:controls.next,disabled:!controlStates.next},React10__default.createElement(PlayNextIcon,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Go to end"})},React10__default.createElement(StyledIconButton,{"aria-label":"Go to end",containsIcon:!0,onClick:controls.end,disabled:!controlStates.end},React10__default.createElement(FastForwardIcon,null))),React10__default.createElement(WithTooltip,{trigger:"hover",hasChrome:!1,tooltip:React10__default.createElement(Note,{note:"Rerun"})},React10__default.createElement(RerunButton,{"aria-label":"Rerun",containsIcon:!0,onClick:controls.rerun},React10__default.createElement(SyncIcon,null)))),storyFileName&&React10__default.createElement(Group,null,React10__default.createElement(StyledLocation,null,storyFileName)))))};var import_extends4=__toESM(require_extends()),import_objectWithoutProperties5=__toESM(require_objectWithoutProperties());function toVal(mix){var k,y,str="";if(mix)if(typeof mix=="object")if(Array.isArray(mix))for(k=0;k<mix.length;k++)mix[k]&&(y=toVal(mix[k]))&&(str&&(str+=" "),str+=y);else for(k in mix)mix[k]&&(y=toVal(k))&&(str&&(str+=" "),str+=y);else typeof mix!="boolean"&&!mix.call&&(str&&(str+=" "),str+=mix);return str}function clsx_m_default(){for(var i=0,x,str="";i<arguments.length;)(x=toVal(arguments[i++]))&&(str&&(str+=" "),str+=x);return str}var isArray=val=>Array.isArray(val)||ArrayBuffer.isView(val)&&!(val instanceof DataView),isObject=val=>val!==null&&typeof val=="object"&&!isArray(val)&&!(val instanceof Date)&&!(val instanceof RegExp)&&!(val instanceof Error)&&!(val instanceof WeakMap)&&!(val instanceof WeakSet),isKnownObject=val=>isObject(val)||isArray(val)||typeof val=="function"||val instanceof Promise,getPromiseState=promise=>{let unique=/unique/;return Promise.race([promise,unique]).then(result=>result===unique?["pending"]:["fulfilled",result],e=>["rejected",e])},buildAST=async(key,value,depth,sortKeys,isPrototype,showPrototype)=>{let astNode={key,depth,value,type:"value",parent:void 0};if(value&&isKnownObject(value)&&depth<100){let children=[],t="object";if(isArray(value)){for(let i=0;i<value.length;i++)children.push(async()=>{let child=await buildAST(i.toString(),value[i],depth+1,sortKeys);return child.parent=astNode,child});t="array";}else {let keys=Object.getOwnPropertyNames(value);sortKeys&&keys.sort();for(let i=0;i<keys.length;i++){let safeValue;try{safeValue=value[keys[i]];}catch{}children.push(async()=>{let child=await buildAST(keys[i],safeValue,depth+1,sortKeys);return child.parent=astNode,child});}if(typeof value=="function"&&(t="function"),value instanceof Promise){let[status,result]=await getPromiseState(value);children.push(async()=>{let child=await buildAST("<state>",status,depth+1,sortKeys);return child.parent=astNode,child}),status!=="pending"&&children.push(async()=>{let child=await buildAST("<value>",result,depth+1,sortKeys);return child.parent=astNode,child}),t="promise";}if(value instanceof Map){let parsedEntries=Array.from(value.entries()).map(entry=>{let[entryKey,entryValue]=entry;return {"<key>":entryKey,"<value>":entryValue}});children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="map";}if(value instanceof Set){let parsedEntries=Array.from(value.entries()).map(entry=>entry[1]);children.push(async()=>{let child=await buildAST("<entries>",parsedEntries,depth+1,sortKeys);return child.parent=astNode,child}),children.push(async()=>{let child=await buildAST("size",value.size,depth+1,sortKeys);return child.parent=astNode,child}),t="set";}}value!==Object.prototype&&showPrototype&&children.push(async()=>{let child=await buildAST("<prototype>",Object.getPrototypeOf(value),depth+1,sortKeys,!0);return child.parent=astNode,child}),astNode.type=t,astNode.children=children,astNode.isPrototype=isPrototype;}return astNode},parse=(data,sortKeys,includePrototypes)=>buildAST("root",data,0,sortKeys===!1?sortKeys:!0,void 0,includePrototypes===!1?includePrototypes:!0);var import_objectSpread2=__toESM(require_objectSpread2()),import_objectWithoutProperties=__toESM(require_objectWithoutProperties2());var _excluded=["children"];var ThemeContext=React10__default.createContext({theme:"chrome",colorScheme:"light"});var ThemeProvider=_ref=>{let{children}=_ref,value=(0, import_objectWithoutProperties.default)(_ref,_excluded),wrappedTheme=React10__default.useContext(ThemeContext);return React10__default.createElement(ThemeContext.Provider,{value:(0, import_objectSpread2.default)((0, import_objectSpread2.default)({},wrappedTheme),value)},children)},useTheme=(props,styles={})=>{let themeContext=React10__default.useContext(ThemeContext),currentTheme=props.theme||themeContext.theme||"chrome",currentColorScheme=props.colorScheme||themeContext.colorScheme||"light",themeClass=clsx_m_default(styles[currentTheme],styles[currentColorScheme]);return {currentColorScheme,currentTheme,themeClass}};var import_objectSpread22=__toESM(require_objectSpread22());var import_extends=__toESM(require_extends2()),import_objectWithoutProperties2=__toESM(require_objectWithoutProperties3());var TreeContext=React10__default.createContext({isChild:!1,depth:0,hasHover:!0}),TreeContext_default=TreeContext;var Tree_css_default={tree:"Tree-tree-fbbbe38",item:"Tree-item-353d6f3",group:"Tree-group-d3c3d8a",label:"Tree-label-d819155",focusWhite:"Tree-focusWhite-f1e00c2",arrow:"Tree-arrow-03ab2e7",hover:"Tree-hover-3cc4e5d",open:"Tree-open-3f1a336",dark:"Tree-dark-1b4aa00",chrome:"Tree-chrome-bcbcac6",light:"Tree-light-09174ee"};var _excluded2=["theme","hover","colorScheme","children","label","className","onUpdate","onSelect","open"],Tree=props=>{let{theme,hover,colorScheme,children,label,className,onUpdate,onSelect,open}=props,html=(0, import_objectWithoutProperties2.default)(props,_excluded2),{themeClass,currentTheme}=useTheme({theme,colorScheme},Tree_css_default),[isOpen,setOpen]=useState(open);useEffect(()=>{setOpen(open);},[open]);let updateState=value=>{setOpen(value),onUpdate&&onUpdate(value);},hasChildren=React10__default.Children.count(children)>0,updateFocus=(newNode,previousNode)=>{if(newNode.isSameNode(previousNode||null))return;let focusableNode=newNode.querySelector('[tabindex="-1"]');focusableNode?.focus(),newNode.setAttribute("aria-selected","true"),previousNode?.removeAttribute("aria-selected");},getParent=(node,role)=>{let parent=node;for(;parent&&parent.parentElement;){if(parent.getAttribute("role")===role)return parent;parent=parent.parentElement;}return null},getListElements=node=>{let tree=getParent(node,"tree");return tree?Array.from(tree.querySelectorAll("li")):[]},moveBack=node=>{let group=getParent(node,"group"),toggle=group?.previousElementSibling;if(toggle&&toggle.getAttribute("tabindex")==="-1"){let toggleParent=toggle.parentElement,nodeParent=node.parentElement;updateFocus(toggleParent,nodeParent);}},moveHome=(node,direction)=>{let elements=getListElements(node);elements.forEach(element=>{element.removeAttribute("aria-selected");}),direction==="start"&&elements[0]&&updateFocus(elements[0]),direction==="end"&&elements[elements.length-1]&&updateFocus(elements[elements.length-1]);},moveFocusAdjacent=(node,direction)=>{let elements=getListElements(node)||[];for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){direction==="up"&&elements[i-1]?updateFocus(elements[i-1],currentNode):direction==="down"&&elements[i+1]&&updateFocus(elements[i+1],currentNode);return}}updateFocus(elements[0]);},handleKeypress=(event,isChild2)=>{let node=event.target;(event.key==="Enter"||event.key===" ")&&updateState(!isOpen),event.key==="ArrowRight"&&isOpen&&!isChild2?moveFocusAdjacent(node,"down"):event.key==="ArrowRight"&&updateState(!0),event.key==="ArrowLeft"&&(!isOpen||isChild2)?moveBack(node):event.key==="ArrowLeft"&&updateState(!1),event.key==="ArrowDown"&&moveFocusAdjacent(node,"down"),event.key==="ArrowUp"&&moveFocusAdjacent(node,"up"),event.key==="Home"&&moveHome(node,"start"),event.key==="End"&&moveHome(node,"end");},handleClick=(event,isChild2)=>{let node=event.target,parent=getParent(node,"treeitem"),elements=getListElements(node)||[],found=!1;for(let i=0;i<elements.length;i++){let currentNode=elements[i];if(currentNode.getAttribute("aria-selected")==="true"){parent&&(found=!0,updateFocus(parent,currentNode));break}}!found&&parent&&updateFocus(parent),isChild2||updateState(!isOpen);},handleBlur=event=>{let node=event.currentTarget;!node.contains(document.activeElement)&&node.getAttribute("role")==="tree"&&node.setAttribute("tabindex","0");},handleFocus=event=>{let node=event.target;if(node.getAttribute("role")==="tree"){let selected=node.querySelector('[aria-selected="true"]');selected?updateFocus(selected):moveFocusAdjacent(node,"down"),node.setAttribute("tabindex","-1");}},handleButtonFocus=()=>{onSelect?.();},getPaddingStyles=depth2=>{let space=depth2*.9+.3;return {paddingLeft:`${space}em`,width:`calc(100% - ${space}em)`}},{isChild,depth,hasHover}=React10__default.useContext(TreeContext_default),showHover=hasHover?hover:!1;if(!isChild)return React10__default.createElement("ul",(0, import_extends.default)({role:"tree",tabIndex:0,className:clsx_m_default(Tree_css_default.tree,Tree_css_default.group,themeClass,className),onFocus:handleFocus,onBlur:handleBlur},html),React10__default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:0,hasHover:showHover}},React10__default.createElement(Tree,props)));if(!hasChildren)return React10__default.createElement("li",(0, import_extends.default)({role:"treeitem",className:Tree_css_default.item},html),React10__default.createElement("div",{role:"button",className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),tabIndex:-1,style:getPaddingStyles(depth),onKeyDown:e=>{handleKeypress(e,isChild);},onClick:e=>handleClick(e,!0),onFocus:handleButtonFocus},React10__default.createElement("span",null,label)));let arrowClass=clsx_m_default(Tree_css_default.arrow,{[Tree_css_default.open]:isOpen});return React10__default.createElement("li",{role:"treeitem","aria-expanded":isOpen,className:Tree_css_default.item},React10__default.createElement("div",{role:"button",tabIndex:-1,className:clsx_m_default(Tree_css_default.label,{[Tree_css_default.hover]:showHover,[Tree_css_default.focusWhite]:currentTheme==="firefox"}),style:getPaddingStyles(depth),onClick:e=>handleClick(e),onKeyDown:e=>handleKeypress(e),onFocus:handleButtonFocus},React10__default.createElement("span",null,React10__default.createElement("span",{"aria-hidden":!0,className:arrowClass}),React10__default.createElement("span",null,label))),React10__default.createElement("ul",(0, import_extends.default)({role:"group",className:clsx_m_default(className,Tree_css_default.group)},html),isOpen&&React10__default.Children.map(children,child=>React10__default.createElement(TreeContext_default.Provider,{value:{isChild:!0,depth:depth+1,hasHover:showHover}},child))))};Tree.defaultProps={open:!1,hover:!0};var import_extends2=__toESM(require_extends()),import_objectWithoutProperties3=__toESM(require_objectWithoutProperties());var ObjectInspector_css_default={"object-inspector":"ObjectInspector-object-inspector-0c33e82",objectInspector:"ObjectInspector-object-inspector-0c33e82","object-label":"ObjectInspector-object-label-b81482b",objectLabel:"ObjectInspector-object-label-b81482b",text:"ObjectInspector-text-25f57f3",key:"ObjectInspector-key-4f712bb",value:"ObjectInspector-value-f7ec2e5",string:"ObjectInspector-string-c496000",regex:"ObjectInspector-regex-59d45a3",error:"ObjectInspector-error-b818698",boolean:"ObjectInspector-boolean-2dd1642",number:"ObjectInspector-number-a6daabb",undefined:"ObjectInspector-undefined-3a68263",null:"ObjectInspector-null-74acb50",function:"ObjectInspector-function-07bbdcd","function-decorator":"ObjectInspector-function-decorator-3d22c24",functionDecorator:"ObjectInspector-function-decorator-3d22c24",prototype:"ObjectInspector-prototype-f2449ee",dark:"ObjectInspector-dark-0c96c97",chrome:"ObjectInspector-chrome-2f3ca98",light:"ObjectInspector-light-78bef54"};var _excluded3=["ast","theme","showKey","colorScheme","className"],buildValue=(key,value,valueClass,showKey,depth)=>{let computedKey=key.includes("-")?`"${key}"`:key,isRoot=depth<=0;return React10__default.createElement("span",{className:ObjectInspector_css_default.text},!isRoot&&showKey&&React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{className:ObjectInspector_css_default.key},computedKey),React10__default.createElement("span",null,":\xA0")),React10__default.createElement("span",{className:valueClass},value))},ObjectValue=props=>{let{ast,theme,showKey,colorScheme,className}=props,html=(0, import_objectWithoutProperties3.default)(props,_excluded3),{themeClass}=useTheme({theme,colorScheme},ObjectInspector_css_default),[asyncValue,setAsyncValue]=useState(React10__default.createElement("span",null)),value=React10__default.createElement("span",null);return useEffect(()=>{ast.value instanceof Promise&&(async promise=>{setAsyncValue(buildValue(ast.key,`Promise { "${await getPromiseState(promise)}" }`,ObjectInspector_css_default.key,showKey,ast.depth));})(ast.value);},[ast,showKey]),typeof ast.value=="number"||typeof ast.value=="bigint"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.number,showKey,ast.depth):typeof ast.value=="boolean"?value=buildValue(ast.key,String(ast.value),ObjectInspector_css_default.boolean,showKey,ast.depth):typeof ast.value=="string"?value=buildValue(ast.key,`"${ast.value}"`,ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value>"u"?value=buildValue(ast.key,"undefined",ObjectInspector_css_default.undefined,showKey,ast.depth):typeof ast.value=="symbol"?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.string,showKey,ast.depth):typeof ast.value=="function"?value=buildValue(ast.key,`${ast.value.name}()`,ObjectInspector_css_default.key,showKey,ast.depth):typeof ast.value=="object"&&(ast.value===null?value=buildValue(ast.key,"null",ObjectInspector_css_default.null,showKey,ast.depth):Array.isArray(ast.value)?value=buildValue(ast.key,`Array(${ast.value.length})`,ObjectInspector_css_default.key,showKey,ast.depth):ast.value instanceof Date?value=buildValue(ast.key,`Date ${ast.value.toString()}`,ObjectInspector_css_default.value,showKey,ast.depth):ast.value instanceof RegExp?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.regex,showKey,ast.depth):ast.value instanceof Error?value=buildValue(ast.key,ast.value.toString(),ObjectInspector_css_default.error,showKey,ast.depth):isObject(ast.value)?value=buildValue(ast.key,"{\u2026}",ObjectInspector_css_default.key,showKey,ast.depth):value=buildValue(ast.key,ast.value.constructor.name,ObjectInspector_css_default.key,showKey,ast.depth)),React10__default.createElement("span",(0, import_extends2.default)({className:clsx_m_default(themeClass,className)},html),asyncValue,value)};ObjectValue.defaultProps={showKey:!0};var ObjectValue_default=ObjectValue;var import_extends3=__toESM(require_extends()),import_objectWithoutProperties4=__toESM(require_objectWithoutProperties());var _excluded4=["ast","theme","previewMax","open","colorScheme","className"],buildPreview=(children,previewMax,showKey)=>{let previews=[];for(let i=0;i<children.length;i++){let child=children[i];if(child.isPrototype||(previews.push(React10__default.createElement(ObjectValue_default,{key:child.key,ast:child,showKey})),i<children.length-1?previews.push(", "):previews.push(" ")),child.isPrototype&&i===children.length-1&&(previews.pop(),previews.push(" ")),i===previewMax-1&&children.length>previewMax){previews.push("\u2026 ");break}}return previews},getArrayLabel=(ast,open,previewMax,theme)=>{let l=ast.value.length;return open?React10__default.createElement("span",null,"Array(",l,")"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`${theme==="firefox"?"Array":""}(${l}) [ `),buildPreview(ast.children,previewMax,!1),React10__default.createElement("span",null,"]"))},getObjectLabel=(ast,open,previewMax,theme)=>ast.isPrototype?React10__default.createElement("span",null,`Object ${theme==="firefox"?"{ \u2026 }":""}`):open?React10__default.createElement("span",null,"{\u2026}"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`${theme==="firefox"?"Object ":""}{ `),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}")),getPromiseLabel=(ast,open,previewMax)=>open?React10__default.createElement("span",null,`Promise { "${String(ast.children[0].value)}" }`):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,"Promise { "),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}")),getMapLabel=(ast,open,previewMax,theme)=>{let{size}=ast.value;return open?React10__default.createElement("span",null,`Map(${size})`):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`Map${theme==="chrome"?`(${size})`:""} { `),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}"))},getSetLabel=(ast,open,previewMax)=>{let{size}=ast.value;return open?React10__default.createElement("span",null,"Set(",size,")"):React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",null,`Set(${ast.value.size}) {`),buildPreview(ast.children,previewMax,!0),React10__default.createElement("span",null,"}"))},ObjectLabel=props=>{let{ast,theme,previewMax,open,colorScheme,className}=props,html=(0, import_objectWithoutProperties4.default)(props,_excluded4),{themeClass,currentTheme}=useTheme({theme,colorScheme},ObjectInspector_css_default),isPrototype=ast.isPrototype||!1,classes=clsx_m_default(ObjectInspector_css_default.objectLabel,themeClass,className,{[ObjectInspector_css_default.prototype]:isPrototype}),isRoot=ast.depth<=0,Key=()=>React10__default.createElement("span",{className:isPrototype?ObjectInspector_css_default.prototype:ObjectInspector_css_default.key},isRoot?"":`${ast.key}: `);return ast.type==="array"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getArrayLabel(ast,open,previewMax,currentTheme)):ast.type==="function"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),currentTheme==="chrome"&&React10__default.createElement("span",{className:ObjectInspector_css_default.functionDecorator},"\u0192 "),React10__default.createElement("span",{className:clsx_m_default({[ObjectInspector_css_default.function]:!isPrototype})},`${ast.value.name}()`)):ast.type==="promise"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getPromiseLabel(ast,open,previewMax)):ast.type==="map"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getMapLabel(ast,open,previewMax,currentTheme)):ast.type==="set"?React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getSetLabel(ast,open,previewMax)):React10__default.createElement("span",(0, import_extends3.default)({className:classes},html),React10__default.createElement(Key,null),getObjectLabel(ast,open,previewMax,currentTheme))};ObjectLabel.defaultProps={previewMax:8,open:!1};var ObjectLabel_default=ObjectLabel;var ObjectInspectorItem=props=>{let{ast,expandLevel,depth}=props,[resolved,setResolved]=useState(),[open,setOpen]=useState(depth<expandLevel);return useEffect(()=>{(async()=>{if(ast.type!=="value"){let promises=ast.children.map(f=>f()),children=await Promise.all(promises),r=(0, import_objectSpread22.default)((0, import_objectSpread22.default)({},ast),{},{children});setResolved(r);}})();},[ast]),resolved?React10__default.createElement(Tree,{hover:!1,open,label:React10__default.createElement(ObjectLabel_default,{open,ast:resolved}),onSelect:()=>{var _props$onSelect;(_props$onSelect=props.onSelect)===null||_props$onSelect===void 0||_props$onSelect.call(props,ast);},onUpdate:value=>{setOpen(value);}},resolved.children.map(child=>React10__default.createElement(ObjectInspectorItem,{key:child.key,ast:child,depth:depth+1,expandLevel,onSelect:props.onSelect}))):React10__default.createElement(Tree,{hover:!1,label:React10__default.createElement(ObjectValue_default,{ast}),onSelect:()=>{var _props$onSelect2;(_props$onSelect2=props.onSelect)===null||_props$onSelect2===void 0||_props$onSelect2.call(props,ast);}})};ObjectInspectorItem.defaultProps={expandLevel:0,depth:0};var ObjectInspectorItem_default=ObjectInspectorItem;var _excluded5=["data","expandLevel","sortKeys","includePrototypes","className","theme","colorScheme","onSelect"],ObjectInspector=props=>{let{data,expandLevel,sortKeys,includePrototypes,className,theme,colorScheme,onSelect}=props,html=(0, import_objectWithoutProperties5.default)(props,_excluded5),[ast,setAST]=useState(void 0),{themeClass,currentTheme,currentColorScheme}=useTheme({theme,colorScheme},ObjectInspector_css_default);return useEffect(()=>{(async()=>{setAST(await parse(data,sortKeys,includePrototypes));})();},[data,sortKeys,includePrototypes]),React10__default.createElement("div",(0, import_extends4.default)({className:clsx_m_default(ObjectInspector_css_default.objectInspector,className,themeClass)},html),ast&&React10__default.createElement(ThemeProvider,{theme:currentTheme,colorScheme:currentColorScheme},React10__default.createElement(ObjectInspectorItem_default,{ast,expandLevel,onSelect})))};ObjectInspector.defaultProps={expandLevel:0,sortKeys:!0,includePrototypes:!0};var colorsLight={base:"#444",nullish:"#7D99AA",string:"#16B242",number:"#5D40D0",boolean:"#f41840",objectkey:"#698394",instance:"#A15C20",function:"#EA7509",muted:"#7D99AA",tag:{name:"#6F2CAC",suffix:"#1F99E5"},date:"#459D9C",error:{name:"#D43900",message:"#444"},regex:{source:"#A15C20",flags:"#EA7509"},meta:"#EA7509",method:"#0271B6"},colorsDark={base:"#eee",nullish:"#aaa",string:"#5FE584",number:"#6ba5ff",boolean:"#ff4191",objectkey:"#accfe6",instance:"#E3B551",function:"#E3B551",muted:"#aaa",tag:{name:"#f57bff",suffix:"#8EB5FF"},date:"#70D4D3",error:{name:"#f40",message:"#eee"},regex:{source:"#FAD483",flags:"#E3B551"},meta:"#FAD483",method:"#5EC1FF"},useThemeColors=()=>{let{base}=useTheme$1();return base==="dark"?colorsDark:colorsLight},special=/[^A-Z0-9]/i,trimEnd=/[\s.,…]+$/gm,ellipsize=(string,maxlength)=>{if(string.length<=maxlength)return string;for(let i=maxlength-1;i>=0;i-=1)if(special.test(string[i])&&i>10)return `${string.slice(0,i).replace(trimEnd,"")}\u2026`;return `${string.slice(0,maxlength).replace(trimEnd,"")}\u2026`},stringify=value=>{try{return JSON.stringify(value,null,1)}catch{return String(value)}},interleave=(nodes,separator)=>nodes.flatMap((node,index)=>index===nodes.length-1?[node]:[node,React10__default.cloneElement(separator,{key:`sep${index}`})]),Node=({value,nested,showObjectInspector,callsById,...props})=>{switch(!0){case value===null:return React10__default.createElement(NullNode,{...props});case value===void 0:return React10__default.createElement(UndefinedNode,{...props});case Array.isArray(value):return React10__default.createElement(ArrayNode,{...props,value,callsById});case typeof value=="string":return React10__default.createElement(StringNode,{...props,value});case typeof value=="number":return React10__default.createElement(NumberNode,{...props,value});case typeof value=="boolean":return React10__default.createElement(BooleanNode,{...props,value});case Object.prototype.hasOwnProperty.call(value,"__date__"):return React10__default.createElement(DateNode,{...props,...value.__date__});case Object.prototype.hasOwnProperty.call(value,"__error__"):return React10__default.createElement(ErrorNode,{...props,...value.__error__});case Object.prototype.hasOwnProperty.call(value,"__regexp__"):return React10__default.createElement(RegExpNode,{...props,...value.__regexp__});case Object.prototype.hasOwnProperty.call(value,"__function__"):return React10__default.createElement(FunctionNode,{...props,...value.__function__});case Object.prototype.hasOwnProperty.call(value,"__symbol__"):return React10__default.createElement(SymbolNode,{...props,...value.__symbol__});case Object.prototype.hasOwnProperty.call(value,"__element__"):return React10__default.createElement(ElementNode,{...props,...value.__element__});case Object.prototype.hasOwnProperty.call(value,"__class__"):return React10__default.createElement(ClassNode,{...props,...value.__class__});case Object.prototype.hasOwnProperty.call(value,"__callId__"):return React10__default.createElement(MethodCall,{call:callsById.get(value.__callId__),callsById});case Object.prototype.toString.call(value)==="[object Object]":return React10__default.createElement(ObjectNode,{value,showInspector:showObjectInspector,callsById,...props});default:return React10__default.createElement(OtherNode,{value,...props})}},NullNode=props=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.nullish},...props},"null")},UndefinedNode=props=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.nullish},...props},"undefined")},StringNode=({value,...props})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.string},...props},JSON.stringify(ellipsize(value,50)))},NumberNode=({value,...props})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.number},...props},value)},BooleanNode=({value,...props})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.boolean},...props},String(value))},ArrayNode=({value,nested=!1,callsById})=>{let colors=useThemeColors();if(nested)return React10__default.createElement("span",{style:{color:colors.base}},"[\u2026]");let nodes=value.slice(0,3).map(v=>React10__default.createElement(Node,{key:JSON.stringify(v),value:v,nested:!0,callsById})),nodelist=interleave(nodes,React10__default.createElement("span",null,", "));return value.length<=3?React10__default.createElement("span",{style:{color:colors.base}},"[",nodelist,"]"):React10__default.createElement("span",{style:{color:colors.base}},"(",value.length,") [",nodelist,", \u2026]")},ObjectNode=({showInspector,value,callsById,nested=!1})=>{let isDarkMode=useTheme$1().base==="dark",colors=useThemeColors();if(showInspector)return React10__default.createElement(React10__default.Fragment,null,React10__default.createElement(ObjectInspector,{id:"interactions-object-inspector",data:value,includePrototypes:!1,colorScheme:isDarkMode?"dark":"light"}));if(nested)return React10__default.createElement("span",{style:{color:colors.base}},"{\u2026}");let nodelist=interleave(Object.entries(value).slice(0,2).map(([k,v])=>React10__default.createElement(Fragment,{key:k},React10__default.createElement("span",{style:{color:colors.objectkey}},k,": "),React10__default.createElement(Node,{value:v,callsById,nested:!0}))),React10__default.createElement("span",null,", "));return Object.keys(value).length<=2?React10__default.createElement("span",{style:{color:colors.base}},"{ ",nodelist," }"):React10__default.createElement("span",{style:{color:colors.base}},"(",Object.keys(value).length,") ","{ ",nodelist,", \u2026 }")},ClassNode=({name})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.instance}},name)},FunctionNode=({name})=>{let colors=useThemeColors();return name?React10__default.createElement("span",{style:{color:colors.function}},name):React10__default.createElement("span",{style:{color:colors.nullish,fontStyle:"italic"}},"anonymous")},ElementNode=({prefix,localName,id,classNames=[],innerText})=>{let name=prefix?`${prefix}:${localName}`:localName,colors=useThemeColors();return React10__default.createElement("span",{style:{wordBreak:"keep-all"}},React10__default.createElement("span",{key:`${name}_lt`,style:{color:colors.muted}},"<"),React10__default.createElement("span",{key:`${name}_tag`,style:{color:colors.tag.name}},name),React10__default.createElement("span",{key:`${name}_suffix`,style:{color:colors.tag.suffix}},id?`#${id}`:classNames.reduce((acc,className)=>`${acc}.${className}`,"")),React10__default.createElement("span",{key:`${name}_gt`,style:{color:colors.muted}},">"),!id&&classNames.length===0&&innerText&&React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{key:`${name}_text`},innerText),React10__default.createElement("span",{key:`${name}_close_lt`,style:{color:colors.muted}},"<"),React10__default.createElement("span",{key:`${name}_close_tag`,style:{color:colors.tag.name}},"/",name),React10__default.createElement("span",{key:`${name}_close_gt`,style:{color:colors.muted}},">")))},DateNode=({value})=>{let[date,time,ms]=value.split(/[T.Z]/),colors=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors.date}},date,React10__default.createElement("span",{style:{opacity:.7}},"T"),time==="00:00:00"?React10__default.createElement("span",{style:{opacity:.7}},time):time,ms==="000"?React10__default.createElement("span",{style:{opacity:.7}},".",ms):`.${ms}`,React10__default.createElement("span",{style:{opacity:.7}},"Z"))},ErrorNode=({name,message})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.error.name}},name,message&&": ",message&&React10__default.createElement("span",{style:{color:colors.error.message},title:message.length>50?message:""},ellipsize(message,50)))},RegExpNode=({flags,source})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors.regex.flags}},"/",React10__default.createElement("span",{style:{color:colors.regex.source}},source),"/",flags)},SymbolNode=({description})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{whiteSpace:"nowrap",color:colors.instance}},"Symbol(",description&&React10__default.createElement("span",{style:{color:colors.meta}},'"',description,'"'),")")},OtherNode=({value})=>{let colors=useThemeColors();return React10__default.createElement("span",{style:{color:colors.meta}},stringify(value))},StepNode=({label})=>{let colors=useThemeColors(),{typography:typography4}=useTheme$1();return React10__default.createElement("span",{style:{color:colors.base,fontFamily:typography4.fonts.base,fontSize:typography4.size.s2-1}},label)},MethodCall=({call,callsById})=>{if(!call)return null;if(call.method==="step"&&call.path.length===0)return React10__default.createElement(StepNode,{label:call.args[0]});let path=call.path.flatMap((elem,index)=>{let callId=elem.__callId__;return [callId?React10__default.createElement(MethodCall,{key:`elem${index}`,call:callsById.get(callId),callsById}):React10__default.createElement("span",{key:`elem${index}`},elem),React10__default.createElement("wbr",{key:`wbr${index}`}),React10__default.createElement("span",{key:`dot${index}`},".")]}),args=call.args.flatMap((arg,index,array)=>{let node=React10__default.createElement(Node,{key:`node${index}`,value:arg,callsById});return index<array.length-1?[node,React10__default.createElement("span",{key:`comma${index}`},",\xA0"),React10__default.createElement("wbr",{key:`wbr${index}`})]:[node]}),colors=useThemeColors();return React10__default.createElement(React10__default.Fragment,null,React10__default.createElement("span",{style:{color:colors.base}},path),React10__default.createElement("span",{style:{color:colors.method}},call.method),React10__default.createElement("span",{style:{color:colors.base}},"(",React10__default.createElement("wbr",null),args,React10__default.createElement("wbr",null),")"))};var getParams=(line,fromIndex=0)=>{for(let i=fromIndex,depth=1;i<line.length;i+=1)if(line[i]==="("?depth+=1:line[i]===")"&&(depth-=1),depth===0)return line.slice(fromIndex,i);return ""},parseValue=value=>{try{return value==="undefined"?void 0:JSON.parse(value)}catch{return value}},StyledExpected=styled.span(({theme})=>({color:theme.base==="light"?theme.color.positiveText:theme.color.positive})),StyledReceived=styled.span(({theme})=>({color:theme.base==="light"?theme.color.negativeText:theme.color.negative})),Received=({value,parsed})=>parsed?React10__default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#D43900"}}):React10__default.createElement(StyledReceived,null,value),Expected=({value,parsed})=>parsed?typeof value=="string"&&value.startsWith("called with")?React10__default.createElement(React10__default.Fragment,null,value):React10__default.createElement(Node,{showObjectInspector:!0,value,style:{color:"#16B242"}}):React10__default.createElement(StyledExpected,null,value),MatcherResult=({message,style={}})=>{let lines=message.split(`
|
|
13
13
|
`);return React10__default.createElement("pre",{style:{margin:0,padding:"8px 10px 8px 36px",fontSize:typography.size.s1,...style}},lines.flatMap((line,index)=>{if(line.startsWith("expect(")){let received=getParams(line,7),remainderIndex=received&&7+received.length,matcher=received&&line.slice(remainderIndex).match(/\.(to|last|nth)[A-Z]\w+\(/);if(matcher){let expectedIndex=remainderIndex+matcher.index+matcher[0].length,expected=getParams(line,expectedIndex);if(expected)return ["expect(",React10__default.createElement(Received,{key:`received_${received}`,value:received}),line.slice(remainderIndex,expectedIndex),React10__default.createElement(Expected,{key:`expected_${expected}`,value:expected}),line.slice(expectedIndex+expected.length),React10__default.createElement("br",{key:`br${index}`})]}}if(line.match(/^\s*- /))return [React10__default.createElement(Expected,{key:line+index,value:line}),React10__default.createElement("br",{key:`br${index}`})];if(line.match(/^\s*\+ /))return [React10__default.createElement(Received,{key:line+index,value:line}),React10__default.createElement("br",{key:`br${index}`})];let[,assertionLabel,assertionValue]=line.match(/^(Expected|Received): (.*)$/)||[];if(assertionLabel&&assertionValue)return assertionLabel==="Expected"?["Expected: ",React10__default.createElement(Expected,{key:line+index,value:parseValue(assertionValue),parsed:!0}),React10__default.createElement("br",{key:`br${index}`})]:["Received: ",React10__default.createElement(Received,{key:line+index,value:parseValue(assertionValue),parsed:!0}),React10__default.createElement("br",{key:`br${index}`})];let[,prefix,numberOfCalls]=line.match(/(Expected number|Received number|Number) of calls: (\d+)$/i)||[];if(prefix&&numberOfCalls)return [`${prefix} of calls: `,React10__default.createElement(Node,{key:line+index,value:Number(numberOfCalls)}),React10__default.createElement("br",{key:`br${index}`})];let[,receivedValue]=line.match(/^Received has value: (.+)$/)||[];return receivedValue?["Received has value: ",React10__default.createElement(Node,{key:line+index,value:parseValue(receivedValue)}),React10__default.createElement("br",{key:`br${index}`})]:[React10__default.createElement("span",{key:line+index},line),React10__default.createElement("br",{key:`br${index}`})]}))};var WarningContainer=styled.div({width:14,height:14,display:"flex",alignItems:"center",justifyContent:"center"}),StatusIcon=({status})=>{let theme=useTheme$1();switch(status){case CallStates.DONE:return React10__default.createElement(CheckIcon,{color:theme.color.positive,"data-testid":"icon-done"});case CallStates.ERROR:return React10__default.createElement(StopAltIcon,{color:theme.color.negative,"data-testid":"icon-error"});case CallStates.ACTIVE:return React10__default.createElement(PlayIcon,{color:theme.color.secondary,"data-testid":"icon-active"});case CallStates.WAITING:return React10__default.createElement(WarningContainer,{"data-testid":"icon-waiting"},React10__default.createElement(CircleIcon,{color:transparentize(.5,"#CCCCCC"),size:6}));default:return null}};function isTestAssertionError(error){return isChaiError(error)||isJestError(error)}function isChaiError(error){return error&&typeof error=="object"&&"name"in error&&typeof error.name=="string"&&error.name==="AssertionError"}function isJestError(error){return error&&typeof error=="object"&&"message"in error&&typeof error.message=="string"&&error.message.startsWith("expect(")}var MethodCallWrapper=styled.div(()=>({fontFamily:typography.fonts.mono,fontSize:typography.size.s1,overflowWrap:"break-word",inlineSize:"calc( 100% - 40px )"})),RowContainer=styled("div",{shouldForwardProp:prop=>!["call","pausedAt"].includes(prop.toString())})(({theme,call})=>({position:"relative",display:"flex",flexDirection:"column",borderBottom:`1px solid ${theme.appBorderColor}`,fontFamily:typography.fonts.base,fontSize:13,...call.status===CallStates.ERROR&&{backgroundColor:theme.base==="dark"?transparentize(.93,theme.color.negative):theme.background.warning},paddingLeft:call.ancestors.length*20}),({theme,call,pausedAt})=>pausedAt===call.id&&{"&::before":{content:'""',position:"absolute",top:-5,zIndex:1,borderTop:"4.5px solid transparent",borderLeft:`7px solid ${theme.color.warning}`,borderBottom:"4.5px solid transparent"},"&::after":{content:'""',position:"absolute",top:-1,zIndex:1,width:"100%",borderTop:`1.5px solid ${theme.color.warning}`}}),RowHeader=styled.div(({theme,isInteractive})=>({display:"flex","&:hover":isInteractive?{}:{background:theme.background.hoverable}})),RowLabel=styled("button",{shouldForwardProp:prop=>!["call"].includes(prop.toString())})(({theme,disabled,call})=>({flex:1,display:"grid",background:"none",border:0,gridTemplateColumns:"15px 1fr",alignItems:"center",minHeight:40,margin:0,padding:"8px 15px",textAlign:"start",cursor:disabled||call.status===CallStates.ERROR?"default":"pointer","&:focus-visible":{outline:0,boxShadow:`inset 3px 0 0 0 ${call.status===CallStates.ERROR?theme.color.warning:theme.color.secondary}`,background:call.status===CallStates.ERROR?"transparent":theme.background.hoverable},"& > div":{opacity:call.status===CallStates.WAITING?.5:1}})),RowActions=styled.div({padding:6}),StyledIconButton2=styled(IconButton)(({theme})=>({color:theme.textMutedColor,margin:"0 3px"})),Note2=styled(TooltipNote)(({theme})=>({fontFamily:theme.typography.fonts.base})),RowMessage=styled("div")(({theme})=>({padding:"8px 10px 8px 36px",fontSize:typography.size.s1,color:theme.color.defaultText,pre:{margin:0,padding:0}})),Exception=({exception})=>{if(isJestError(exception))return React10.createElement(MatcherResult,{...exception});let paragraphs=exception.message.split(`
|
|
14
14
|
|
|
15
|
-
`),more=paragraphs.length>1;return React10.createElement(RowMessage,null,React10.createElement("pre",null,paragraphs[0]),exception.showDiff&&exception.diff?React10.createElement(React10.Fragment,null,React10.createElement("br",null),React10.createElement(MatcherResult,{message:exception.diff,style:{padding:0}})):React10.createElement("pre",null,React10.createElement("br",null),exception.expected&&React10.createElement(React10.Fragment,null,"Expected: ",React10.createElement(Expected,{value:exception.expected}),React10.createElement("br",null)),exception.actual&&React10.createElement(React10.Fragment,null,"Received: ",React10.createElement(Received,{value:exception.actual}),React10.createElement("br",null))),more&&React10.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]=React10.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React10.createElement(RowContainer,{call,pausedAt},React10.createElement(RowHeader,{isInteractive},React10.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React10.createElement(StatusIcon,{status:isHovered?CallStates.ACTIVE:call.status}),React10.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React10.createElement(MethodCall,{call,callsById}))),React10.createElement(RowActions,null,childCallIds?.length>0&&React10.createElement(WithTooltip,{hasChrome:!1,tooltip:React10.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React10.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React10.createElement(ListUnorderedIcon,null))))),call.status===CallStates.ERROR&&call.exception?.callId===call.id&&React10.createElement(Exception,{exception:call.exception}))};var Wrapper=styled.div(({theme})=>({height:"100%",display:"flex",padding:0,alignItems:"center",justifyContent:"center",flexDirection:"column",gap:15,background:theme.background.content})),Content=styled.div({display:"flex",flexDirection:"column",gap:4,maxWidth:415}),Title=styled.div(({theme})=>({fontWeight:theme.typography.weight.bold,fontSize:theme.typography.size.s2-1,textAlign:"center",color:theme.textColor})),Description=styled.div(({theme})=>({fontWeight:theme.typography.weight.regular,fontSize:theme.typography.size.s2-1,textAlign:"center",color:theme.textMutedColor})),Links=styled.div(({theme})=>({display:"flex",fontSize:theme.typography.size.s2-1,gap:25})),Divider=styled.div(({theme})=>({width:1,height:16,backgroundColor:theme.appBorderColor})),Empty=()=>{let[isLoading,setIsLoading]=useState(!0),docsUrl=useStorybookApi().getDocsUrl({subpath:DOCUMENTATION_LINK,versioned:!0,renderer:!0});return useEffect(()=>{let load=setTimeout(()=>{setIsLoading(!1);},100);return ()=>clearTimeout(load)},[]),isLoading?null:React10__default.createElement(Wrapper,null,React10__default.createElement(Content,null,React10__default.createElement(Title,null,"Interaction testing"),React10__default.createElement(Description,null,"Interaction tests allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here.")),React10__default.createElement(Links,null,React10__default.createElement(Link,{href:TUTORIAL_VIDEO_LINK,target:"_blank",withArrow:!0},React10__default.createElement(VideoIcon,null)," Watch 8m video"),React10__default.createElement(Divider,null),React10__default.createElement(Consumer,null,({state})=>React10__default.createElement(Link,{href:docsUrl,target:"_blank",withArrow:!0},React10__default.createElement(DocumentIcon,null)," Read docs"))))};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=React10.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,onScrollToEnd,endRef}){return React10.createElement(Container,null,(interactions.length>0||hasException)&&React10.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates.ACTIVE:hasException?CallStates.ERROR:CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React10.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React10.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)&&React10.createElement(CaughtException,null,React10.createElement(CaughtExceptionTitle,null,"Caught exception in ",React10.createElement(CaughtExceptionCode,null,"play")," function"),React10.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},printSerializedError(caughtException))),unhandledErrors&&React10.createElement(CaughtException,null,React10.createElement(CaughtExceptionTitle,null,"Unhandled Errors"),React10.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",React10.createElement(CaughtExceptionCode,null,"test.dangerouslyIgnoreUnhandledErrors")," ","parameter to ",React10.createElement(CaughtExceptionCode,null,"true"),"."),unhandledErrors.map((error,i)=>React10.createElement(CaughtExceptionStack,{key:i,"data-chromatic":"ignore"},printSerializedError(error)))),React10.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React10.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}));},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{set(s=>({...s,caughtException:e}));},[UNHANDLED_ERRORS_WHILE_PLAYING]:e=>{set(s=>({...s,unhandledErrors:e}));}},[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?React10__default.createElement(Fragment,{key:"interactions"}):React10__default.createElement(Fragment,{key:"interactions"},React10__default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});var TabIcon=styled(StatusIcon)({marginLeft:5});function Title2(){let[addonState={}]=useAddonState(ADDON_ID),{hasException,interactionsCount}=addonState;return React10__default.createElement("div",null,React10__default.createElement(Spaced,{col:1},React10__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?React10__default.createElement(Badge,{status:"neutral"},interactionsCount):null,hasException?React10__default.createElement(TabIcon,{status:CallStates.ERROR}):null))}addons.register(ADDON_ID,api=>{addons.add(PANEL_ID,{type:types.PANEL,title:Title2,match:({viewMode})=>viewMode==="story",render:({active})=>{let newLocal=useCallback(({state})=>({storyId:state.storyId}),[]);return React10__default.createElement(AddonPanel,{active},React10__default.createElement(Consumer,{filter:newLocal},({storyId})=>React10__default.createElement(Panel,{storyId})))}});});
|
|
15
|
+
`),more=paragraphs.length>1;return React10.createElement(RowMessage,null,React10.createElement("pre",null,paragraphs[0]),exception.showDiff&&exception.diff?React10.createElement(React10.Fragment,null,React10.createElement("br",null),React10.createElement(MatcherResult,{message:exception.diff,style:{padding:0}})):React10.createElement("pre",null,React10.createElement("br",null),exception.expected&&React10.createElement(React10.Fragment,null,"Expected: ",React10.createElement(Expected,{value:exception.expected}),React10.createElement("br",null)),exception.actual&&React10.createElement(React10.Fragment,null,"Received: ",React10.createElement(Received,{value:exception.actual}),React10.createElement("br",null))),more&&React10.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]=React10.useState(!1),isInteractive=!controlStates.goto||!call.interceptable||!!call.ancestors.length;return isHidden?null:React10.createElement(RowContainer,{call,pausedAt},React10.createElement(RowHeader,{isInteractive},React10.createElement(RowLabel,{"aria-label":"Interaction step",call,onClick:()=>controls.goto(call.id),disabled:isInteractive,onMouseEnter:()=>controlStates.goto&&setIsHovered(!0),onMouseLeave:()=>controlStates.goto&&setIsHovered(!1)},React10.createElement(StatusIcon,{status:isHovered?CallStates.ACTIVE:call.status}),React10.createElement(MethodCallWrapper,{style:{marginLeft:6,marginBottom:1}},React10.createElement(MethodCall,{call,callsById}))),React10.createElement(RowActions,null,childCallIds?.length>0&&React10.createElement(WithTooltip,{hasChrome:!1,tooltip:React10.createElement(Note2,{note:`${isCollapsed?"Show":"Hide"} interactions`})},React10.createElement(StyledIconButton2,{containsIcon:!0,onClick:toggleCollapsed},React10.createElement(ListUnorderedIcon,null))))),call.status===CallStates.ERROR&&call.exception?.callId===call.id&&React10.createElement(Exception,{exception:call.exception}))};var Links=styled.div(({theme})=>({display:"flex",fontSize:theme.typography.size.s2-1,gap:25})),Divider=styled.div(({theme})=>({width:1,height:16,backgroundColor:theme.appBorderColor})),Empty=()=>{let[isLoading,setIsLoading]=useState(!0),docsUrl=useStorybookApi().getDocsUrl({subpath:DOCUMENTATION_LINK,versioned:!0,renderer:!0});return useEffect(()=>{let load=setTimeout(()=>{setIsLoading(!1);},100);return ()=>clearTimeout(load)},[]),isLoading?null:React10__default.createElement(EmptyTabContent,{title:"Interaction testing",description:React10__default.createElement(React10__default.Fragment,null,"Interaction tests allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here."),footer:React10__default.createElement(Links,null,React10__default.createElement(Link,{href:TUTORIAL_VIDEO_LINK,target:"_blank",withArrow:!0},React10__default.createElement(VideoIcon,null)," Watch 8m video"),React10__default.createElement(Divider,null),React10__default.createElement(Link,{href:docsUrl,target:"_blank",withArrow:!0},React10__default.createElement(DocumentIcon,null)," Read docs"))})};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=React10.memo(function({calls,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,onScrollToEnd,endRef}){return React10.createElement(Container,null,(interactions.length>0||hasException)&&React10.createElement(Subnav,{controls,controlStates,status:isPlaying?CallStates.ACTIVE:hasException?CallStates.ERROR:CallStates.DONE,storyFileName:fileName,onScrollToEnd}),React10.createElement("div",{"aria-label":"Interactions list"},interactions.map(call=>React10.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)&&React10.createElement(CaughtException,null,React10.createElement(CaughtExceptionTitle,null,"Caught exception in ",React10.createElement(CaughtExceptionCode,null,"play")," function"),React10.createElement(CaughtExceptionStack,{"data-chromatic":"ignore"},printSerializedError(caughtException))),unhandledErrors&&React10.createElement(CaughtException,null,React10.createElement(CaughtExceptionTitle,null,"Unhandled Errors"),React10.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",React10.createElement(CaughtExceptionCode,null,"test.dangerouslyIgnoreUnhandledErrors")," ","parameter to ",React10.createElement(CaughtExceptionCode,null,"true"),"."),unhandledErrors.map((error,i)=>React10.createElement(CaughtExceptionStack,{key:i,"data-chromatic":"ignore"},printSerializedError(error)))),React10.createElement("div",{ref:endRef}),!isPlaying&&!caughtException&&interactions.length===0&&React10.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}));},[PLAY_FUNCTION_THREW_EXCEPTION]:e=>{set(s=>({...s,caughtException:e}));},[UNHANDLED_ERRORS_WHILE_PLAYING]:e=>{set(s=>({...s,unhandledErrors:e}));}},[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?React10__default.createElement(Fragment,{key:"interactions"}):React10__default.createElement(Fragment,{key:"interactions"},React10__default.createElement(InteractionsPanel,{calls:calls.current,controls,controlStates,interactions,fileName,hasException,caughtException,unhandledErrors,isPlaying,pausedAt,endRef,onScrollToEnd:scrollTarget&&scrollToTarget}))});var TabIcon=styled(StatusIcon)({marginLeft:5});function Title(){let[addonState={}]=useAddonState(ADDON_ID),{hasException,interactionsCount}=addonState;return React10__default.createElement("div",null,React10__default.createElement(Spaced,{col:1},React10__default.createElement("span",{style:{display:"inline-block",verticalAlign:"middle"}},"Interactions"),interactionsCount&&!hasException?React10__default.createElement(Badge,{status:"neutral"},interactionsCount):null,hasException?React10__default.createElement(TabIcon,{status:CallStates.ERROR}):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 React10__default.createElement(AddonPanel,{active},React10__default.createElement(Consumer,{filter:newLocal},({storyId})=>React10__default.createElement(Panel,{storyId})))}});});
|
package/dist/preset.js
CHANGED
|
@@ -522,7 +522,7 @@ ${error.message}`:execaMessage,message=[shortMessage,stderr,stdout].filter(Boole
|
|
|
522
522
|
`),!mainConfigPath)throw new import_server_errors.MainFileMissingError({location:configDir})}function loadCustomPresets({configDir}){validateConfigurationFiles(configDir);let presets=serverRequire2(import_path2.default.resolve(configDir,"presets"));if(serverRequire2(import_path2.default.resolve(configDir,"main"))){let resolved=serverResolve(import_path2.default.resolve(configDir,"main"));if(resolved)return [resolved]}return presets||[]}var import_resolve_from=__toESM2(require_resolve_from()),safeResolveFrom=(path18,file)=>{try{return (0,import_resolve_from.default)(path18,file)}catch{return}},safeResolve=file=>{try{return __require.resolve(file)}catch{return}},import_path32=__toESM2(__require("path"));function normalizePath(id){return import_path32.default.posix.normalize(slash(id))}function stripAbsNodeModulesPath(absPath){let splits=absPath.split(`node_modules${import_path32.default.sep}`);return normalizePath(splits[splits.length-1])}var isObject=val=>val!=null&&typeof val=="object"&&Array.isArray(val)===!1,isFunction=val=>typeof val=="function";function filterPresetsConfig(presetsConfig){return presetsConfig.filter(preset=>{let presetName=typeof preset=="string"?preset:preset.name;return !/@storybook[\\\\/]preset-typescript/.test(presetName)})}function resolvePathToMjs(filePath){let{dir,name}=(0, import_path4.parse)(filePath),mjsPath=(0, import_path4.join)(dir,`${name}.mjs`);return safeResolve(mjsPath)?mjsPath:filePath}function resolvePresetFunction(input,presetOptions,storybookOptions){return isFunction(input)?[...input({...storybookOptions,...presetOptions})]:Array.isArray(input)?[...input]:[]}var resolveAddonName=(configDir,name,options)=>{let resolve=name.startsWith("/")?safeResolve:safeResolveFrom.bind(null,configDir),resolved=resolve(name);if(resolved){let{dir:fdir,name:fname}=(0, import_path4.parse)(resolved);if(name.match(/\/(manager|register(-panel)?)(\.(js|mjs|ts|tsx|jsx))?$/))return {type:"virtual",name,managerEntries:[resolvePathToMjs((0, import_path4.join)(fdir,fname))]};if(name.match(/\/(preset)(\.(js|mjs|ts|tsx|jsx))?$/))return {type:"presets",name:resolved}}let checkExists=exportName=>{if(resolve(`${name}${exportName}`))return `${name}${exportName}`},absolutizeExport=(exportName,preferMJS)=>{let found=resolve(`${name}${exportName}`);if(found)return preferMJS?resolvePathToMjs(found):found},managerFile=absolutizeExport("/manager",!0),registerFile=absolutizeExport("/register",!0)||absolutizeExport("/register-panel",!0),previewFile=checkExists("/preview"),previewFileAbsolute=absolutizeExport("/preview",!0),presetFile=absolutizeExport("/preset",!1);if(!(managerFile||previewFile)&&presetFile)return {type:"presets",name:presetFile};if(managerFile||registerFile||previewFile||presetFile){let managerEntries=[];return managerFile&&managerEntries.push(managerFile),!managerFile&®isterFile&&!presetFile&&managerEntries.push(registerFile),{type:"virtual",name,...managerEntries.length?{managerEntries}:{},...previewFile?{previewAnnotations:[previewFileAbsolute?{bare:previewFile.includes("node_modules")?stripAbsNodeModulesPath(previewFile):previewFile,absolute:previewFileAbsolute}:previewFile]}:{},...presetFile?{presets:[{name:presetFile,options}]}:{}}}if(resolved)return {type:"presets",name:resolved}},map=({configDir})=>item=>{let options=isObject(item)&&item.options||void 0,name=isObject(item)?item.name:item,resolved;try{resolved=resolveAddonName(configDir,name,options);}catch{import_node_logger2.logger.error(`Addon value should end in /manager or /preview or /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
|
|
523
523
|
${item}`);return}if(!resolved){import_node_logger2.logger.warn(`Could not resolve addon "${name}", skipping. Is it installed?`);return}return {...options?{options}:{},...resolved}};async function getContent(input){if(input.type==="virtual"){let{type,name:name2,...rest}=input;return rest}let name=input.name?input.name:input;return interopRequireDefault(name)}async function loadPreset(input,level,storybookOptions){let presetName=input.name?input.name:input;try{let presetOptions=input.options?input.options:{},contents=await getContent(input);if(typeof contents=="function"&&(contents=contents(storybookOptions,presetOptions)),Array.isArray(contents))return await loadPresets(contents,level+1,storybookOptions);if(isObject(contents)){let{addons:addonsInput=[],presets:presetsInput=[],...rest}=contents,filter=i=>!0;storybookOptions.isCritical!==!0&&(storybookOptions.build?.test?.disabledAddons?.length||0)>0&&(filter=i=>{let name=i.name?i.name:i;return !storybookOptions.build?.test?.disabledAddons?.find(n=>name.includes(n))});let subPresets=resolvePresetFunction(presetsInput,presetOptions,storybookOptions).filter(filter),subAddons=resolvePresetFunction(addonsInput,presetOptions,storybookOptions).filter(filter);return [...await loadPresets([...subPresets],level+1,storybookOptions),...await loadPresets([...subAddons.map(map(storybookOptions))].filter(Boolean),level+1,storybookOptions),{name:presetName,preset:rest,options:presetOptions}]}throw new Error(import_ts_dedent2.dedent`
|
|
524
524
|
${input} is not a valid preset
|
|
525
|
-
`)}catch(error){if(storybookOptions?.isCritical)throw new import_server_errors2.CriticalPresetLoadError({error,presetName});let warning=level>0?` Failed to load preset: ${JSON.stringify(input)} on level ${level}`:` Failed to load preset: ${JSON.stringify(input)}`;return import_node_logger2.logger.warn(warning),import_node_logger2.logger.error(error),[]}}async function loadPresets(presets,level,storybookOptions){return !presets||!Array.isArray(presets)||!presets.length?[]:(await Promise.all(presets.map(async preset=>loadPreset(preset,level,storybookOptions)))).reduce((acc,loaded)=>acc.concat(loaded),[])}function applyPresets(presets,extension,config,args,storybookOptions){let presetResult=new Promise(res=>res(config));return presets.length?presets.reduce((accumulationPromise,{preset,options})=>{let change=preset[extension];if(!change)return accumulationPromise;if(typeof change=="function"){let extensionFn=change,context={preset,combinedOptions:{...storybookOptions,...args,...options,presetsList:presets,presets:{apply:async(ext,c,a={})=>applyPresets(presets,ext,c,a,storybookOptions)}}};return accumulationPromise.then(newConfig=>extensionFn.call(context.preset,newConfig,context.combinedOptions))}return accumulationPromise.then(newConfig=>Array.isArray(newConfig)&&Array.isArray(change)?[...newConfig,...change]:isObject(newConfig)&&isObject(change)?{...newConfig,...change}:change)},presetResult):presetResult}async function getPresets(presets,storybookOptions){let loadedPresets=await loadPresets(presets,0,storybookOptions);return {apply:async(extension,config,args={})=>applyPresets(loadedPresets,extension,config,args,storybookOptions)}}async function loadAllPresets(options){let{corePresets=[],overridePresets=[],...restOptions}=options,presetsConfig=[...corePresets,...loadCustomPresets(options),...overridePresets],filteredPresetConfig=filterPresetsConfig(presetsConfig);return filteredPresetConfig.length<presetsConfig.length&&import_node_logger2.logger.warn("Storybook now supports TypeScript natively. You can safely remove `@storybook/preset-typescript`."),getPresets(filteredPresetConfig,restOptions)}var import_file_system_cache=__toESM2(require_lib2());function createFileSystemCache(options){return (0, import_file_system_cache.default)(options)}var import_path5=__toESM2(__require("path")),import_find_cache_dir=__toESM2(require_find_cache_dir());function resolvePathInStorybookCache(fileOrDirectoryName,sub="default"){let cacheDirectory=(0, import_find_cache_dir.default)({name:"storybook"});return cacheDirectory||=import_path5.default.join(process.cwd(),".cache","storybook"),import_path5.default.join(cacheDirectory,sub,fileOrDirectoryName)}var cache=createFileSystemCache({basePath:resolvePathInStorybookCache("dev-server"),ns:"storybook"}),import_fs_extra2=require_lib3(),import_path7=__require("path"),import_tempy=__toESM2(require_tempy()),import_path6=__toESM2(__require("path")),import_fs_extra=__toESM2(require_lib3());function getStorybookConfiguration(storybookScript,shortName,longName){if(!storybookScript)return null;let parts=storybookScript.split(/[\s='"]+/),index=parts.indexOf(longName);return index===-1&&(index=parts.indexOf(shortName)),index===-1?null:parts[index+1]}var rendererPackages={"@storybook/react":"react","@storybook/vue3":"vue3","@storybook/angular":"angular","@storybook/html":"html","@storybook/web-components":"web-components","@storybook/polymer":"polymer","@storybook/ember":"ember","@storybook/svelte":"svelte","@storybook/preact":"preact","@storybook/server":"server","storybook-framework-qwik":"qwik","storybook-solidjs":"solid","@storybook/vue":"vue"},frameworkPackages={"@storybook/angular":"angular","@storybook/ember":"ember","@storybook/html-vite":"html-vite","@storybook/html-webpack5":"html-webpack5","@storybook/nextjs":"nextjs","@storybook/preact-vite":"preact-vite","@storybook/preact-webpack5":"preact-webpack5","@storybook/react-vite":"react-vite","@storybook/react-webpack5":"react-webpack5","@storybook/server-webpack5":"server-webpack5","@storybook/svelte-vite":"svelte-vite","@storybook/svelte-webpack5":"svelte-webpack5","@storybook/sveltekit":"sveltekit","@storybook/vue3-vite":"vue3-vite","@storybook/vue3-webpack5":"vue3-webpack5","@storybook/web-components-vite":"web-components-vite","@storybook/web-components-webpack5":"web-components-webpack5","storybook-framework-qwik":"qwik","storybook-solidjs-vite":"solid"},builderPackages=["@storybook/builder-webpack5","@storybook/builder-vite"],logger2=console,findDependency=({dependencies,devDependencies,peerDependencies},predicate)=>[Object.entries(dependencies||{}).find(predicate),Object.entries(devDependencies||{}).find(predicate),Object.entries(peerDependencies||{}).find(predicate)],getRendererInfo=packageJson=>{let[dep,devDep,peerDep]=findDependency(packageJson,([key])=>rendererPackages[key]),[pkg,version]=dep||devDep||peerDep||[];return dep&&devDep&&dep[0]===devDep[0]&&logger2.warn(`Found "${dep[0]}" in both "dependencies" and "devDependencies". This is probably a mistake.`),dep&&peerDep&&dep[0]===peerDep[0]&&logger2.warn(`Found "${dep[0]}" in both "dependencies" and "peerDependencies". This is probably a mistake.`),{version,frameworkPackage:pkg}},validConfigExtensions=["ts","js","tsx","jsx","mjs","cjs"],findConfigFile=(prefix,configDir)=>{let filePrefix=import_path6.default.join(configDir,prefix),extension=validConfigExtensions.find(ext=>import_fs_extra.default.existsSync(`${filePrefix}.${ext}`));return extension?`${filePrefix}.${extension}`:null},getConfigInfo=(packageJson,configDir)=>{let storybookConfigDir=configDir??".storybook",storybookScript=packageJson.scripts?.storybook;if(storybookScript&&!configDir){let configParam=getStorybookConfiguration(storybookScript,"-c","--config-dir");configParam&&(storybookConfigDir=configParam);}return {configDir:storybookConfigDir,mainConfig:findConfigFile("main",storybookConfigDir),previewConfig:findConfigFile("preview",storybookConfigDir),managerConfig:findConfigFile("manager",storybookConfigDir)}},getStorybookInfo=(packageJson,configDir)=>{let rendererInfo=getRendererInfo(packageJson),configInfo=getConfigInfo(packageJson,configDir);return {...rendererInfo,...configInfo}},versions_default={"@storybook/addon-a11y":"8.0.1","@storybook/addon-actions":"8.0.1","@storybook/addon-backgrounds":"8.0.1","@storybook/addon-controls":"8.0.1","@storybook/addon-docs":"8.0.1","@storybook/addon-essentials":"8.0.1","@storybook/addon-highlight":"8.0.1","@storybook/addon-interactions":"8.0.1","@storybook/addon-jest":"8.0.1","@storybook/addon-links":"8.0.1","@storybook/addon-mdx-gfm":"8.0.1","@storybook/addon-measure":"8.0.1","@storybook/addon-onboarding":"8.0.1","@storybook/addon-outline":"8.0.1","@storybook/addon-storysource":"8.0.1","@storybook/addon-themes":"8.0.1","@storybook/addon-toolbars":"8.0.1","@storybook/addon-viewport":"8.0.1","@storybook/angular":"8.0.1","@storybook/blocks":"8.0.1","@storybook/builder-manager":"8.0.1","@storybook/builder-vite":"8.0.1","@storybook/builder-webpack5":"8.0.1","@storybook/channels":"8.0.1","@storybook/cli":"8.0.1","@storybook/client-logger":"8.0.1","@storybook/codemod":"8.0.1","@storybook/components":"8.0.1","@storybook/core-common":"8.0.1","@storybook/core-events":"8.0.1","@storybook/core-server":"8.0.1","@storybook/core-webpack":"8.0.1","@storybook/csf-plugin":"8.0.1","@storybook/csf-tools":"8.0.1","@storybook/docs-tools":"8.0.1","@storybook/ember":"8.0.1","@storybook/html":"8.0.1","@storybook/html-vite":"8.0.1","@storybook/html-webpack5":"8.0.1","@storybook/instrumenter":"8.0.1","@storybook/manager":"8.0.1","@storybook/manager-api":"8.0.1","@storybook/nextjs":"8.0.1","@storybook/node-logger":"8.0.1","@storybook/preact":"8.0.1","@storybook/preact-vite":"8.0.1","@storybook/preact-webpack5":"8.0.1","@storybook/preset-create-react-app":"8.0.1","@storybook/preset-html-webpack":"8.0.1","@storybook/preset-preact-webpack":"8.0.1","@storybook/preset-react-webpack":"8.0.1","@storybook/preset-server-webpack":"8.0.1","@storybook/preset-svelte-webpack":"8.0.1","@storybook/preset-vue3-webpack":"8.0.1","@storybook/preview":"8.0.1","@storybook/preview-api":"8.0.1","@storybook/react":"8.0.1","@storybook/react-dom-shim":"8.0.1","@storybook/react-vite":"8.0.1","@storybook/react-webpack5":"8.0.1","@storybook/router":"8.0.1","@storybook/server":"8.0.1","@storybook/server-webpack5":"8.0.1","@storybook/source-loader":"8.0.1","@storybook/svelte":"8.0.1","@storybook/svelte-vite":"8.0.1","@storybook/svelte-webpack5":"8.0.1","@storybook/sveltekit":"8.0.1","@storybook/telemetry":"8.0.1","@storybook/test":"8.0.1","@storybook/theming":"8.0.1","@storybook/types":"8.0.1","@storybook/vue3":"8.0.1","@storybook/vue3-vite":"8.0.1","@storybook/vue3-webpack5":"8.0.1","@storybook/web-components":"8.0.1","@storybook/web-components-vite":"8.0.1","@storybook/web-components-webpack5":"8.0.1",sb:"8.0.1",storybook:"8.0.1"};function parseList(str){return str.split(",").map(item=>item.trim()).filter(item=>item.length>0)}async function getCoercedStorybookVersion(packageManager){return (await Promise.all(Object.keys(rendererPackages).map(async pkg=>({name:pkg,version:await packageManager.getPackageVersion(pkg)})))).filter(({version})=>!!version)[0]?.version}function getEnvConfig(program,configEnv){Object.keys(configEnv).forEach(fieldName=>{let envVarName=configEnv[fieldName],envVarValue=process.env[envVarName];envVarValue&&(program[fieldName]=envVarValue);});}var createLogStream=async(logFileName="storybook.log")=>{let finalLogPath=(0, import_path7.join)(process.cwd(),logFileName),temporaryLogPath=import_tempy.default.file({name:logFileName}),logStream=(0, import_fs_extra2.createWriteStream)(temporaryLogPath,{encoding:"utf8"});return new Promise((resolve,reject)=>{logStream.once("open",()=>{resolve({logStream,moveLogFile:async()=>(0, import_fs_extra2.move)(temporaryLogPath,finalLogPath,{overwrite:!0}),clearLogFile:async()=>(0, import_fs_extra2.writeFile)(temporaryLogPath,""),removeLogFile:async()=>(0, import_fs_extra2.remove)(temporaryLogPath),readLogFile:async()=>(0, import_fs_extra2.readFile)(temporaryLogPath,"utf8")});}),logStream.once("error",reject);})},isCorePackage=pkg=>Object.keys(versions_default).includes(pkg),import_node_logger3=require_dist(),predicateFor=addon=>entry=>{let name=entry.name||entry;return name&&name.replaceAll(/(\\){1,2}/g,"/").includes(addon)},isCorrectOrder=(addons,before,after)=>{let essentialsIndex=addons.findIndex(predicateFor("@storybook/addon-essentials")),beforeIndex=addons.findIndex(predicateFor(before.name)),afterIndex=addons.findIndex(predicateFor(after.name));return beforeIndex===-1&&before.inEssentials&&(beforeIndex=essentialsIndex),afterIndex===-1&&after.inEssentials&&(afterIndex=essentialsIndex),beforeIndex!==-1&&afterIndex!==-1&&beforeIndex<=afterIndex},checkAddonOrder2=async({before,after,configFile,getConfig})=>{try{let config=await getConfig(configFile);if(!config?.addons){import_node_logger3.logger.warn("Unable to find 'addons' config in main Storybook config");return}if(!isCorrectOrder(config.addons,before,after)){let orEssentials=" (or '@storybook/addon-essentials')",beforeText=`'${before.name}'${before.inEssentials?orEssentials:""}`,afterText=`'${after.name}'${after.inEssentials?orEssentials:""}`;import_node_logger3.logger.warn(`Expected ${beforeText} to be listed before ${afterText} in main Storybook config.`);}}catch{import_node_logger3.logger.warn(`Unable to load config file: ${configFile}`);}},import_lazy_universal_dotenv=require_lib5(),import_path8=__toESM2(__require("path")),import_find_up=__toESM2(require_find_up2()),getProjectRoot=()=>{let result;if(process.env.STORYBOOK_PROJECT_ROOT)return process.env.STORYBOOK_PROJECT_ROOT;try{let found=import_find_up.default.sync(".git",{type:"directory"});found&&(result=import_path8.default.join(found,".."));}catch{}try{let found=import_find_up.default.sync(".svn",{type:"directory"});found&&(result=result||import_path8.default.join(found,".."));}catch{}try{let found=import_find_up.default.sync(".hg",{type:"directory"});found&&(result=result||import_path8.default.join(found,".."));}catch{}try{let found=import_find_up.default.sync(".yarn",{type:"directory"});found&&(result=result||import_path8.default.join(found,".."));}catch{}try{result=result||__dirname.split("node_modules")[0];}catch{}return result||process.cwd()},nodePathsToArray=nodePath=>nodePath.split(process.platform==="win32"?";":":").filter(Boolean).map(p=>import_path8.default.resolve("./",p)),relativePattern=/^\.{1,2}([/\\]|$)/;function normalizeStoryPath(filename){return relativePattern.test(filename)?filename:`.${import_path8.default.sep}${filename}`}function loadEnvs(options={}){let defaultNodeEnv=options.production?"production":"development",env={NODE_ENV:process.env.NODE_ENV||defaultNodeEnv,NODE_PATH:process.env.NODE_PATH||"",STORYBOOK:process.env.STORYBOOK||"true",PUBLIC_URL:options.production?".":""};Object.keys(process.env).filter(name=>/^STORYBOOK_/.test(name)).forEach(name=>{env[name]=process.env[name];});let base=Object.entries(env).reduce((acc,[k,v])=>Object.assign(acc,{[k]:JSON.stringify(v)}),{}),{stringified,raw}=(0, import_lazy_universal_dotenv.getEnvironment)({nodeEnv:env.NODE_ENV}),fullRaw={...env,...raw};return fullRaw.NODE_PATH=nodePathsToArray(fullRaw.NODE_PATH||""),{stringified:{...base,...stringified},raw:fullRaw}}var stringifyEnvs=raw=>Object.entries(raw).reduce((acc,[key,value])=>(acc[key]=JSON.stringify(value),acc),{}),stringifyProcessEnvs=raw=>Object.entries(raw).reduce((acc,[key,value])=>(acc[`process.env.${key}`]=JSON.stringify(value),acc),{}),NODE_MODULES_RE=/node_modules/,commonGlobOptions=glob2=>NODE_MODULES_RE.test(glob2)?{}:{ignore:["**/node_modules/**"]};async function getBuilderOptions(options){let framework=await options.presets.apply("framework",{},options);if(typeof framework!="string"&&framework?.options?.builder)return framework.options.builder;let{builder}=await options.presets.apply("core",{},options);return typeof builder!="string"&&builder?.options?builder.options:{}}var import_ts_dedent3=__require("ts-dedent");async function getFrameworkName(options){let framework=await options.presets.apply("framework","",options);if(!framework)throw new Error(import_ts_dedent3.dedent`
|
|
525
|
+
`)}catch(error){if(storybookOptions?.isCritical)throw new import_server_errors2.CriticalPresetLoadError({error,presetName});let warning=level>0?` Failed to load preset: ${JSON.stringify(input)} on level ${level}`:` Failed to load preset: ${JSON.stringify(input)}`;return import_node_logger2.logger.warn(warning),import_node_logger2.logger.error(error),[]}}async function loadPresets(presets,level,storybookOptions){return !presets||!Array.isArray(presets)||!presets.length?[]:(await Promise.all(presets.map(async preset=>loadPreset(preset,level,storybookOptions)))).reduce((acc,loaded)=>acc.concat(loaded),[])}function applyPresets(presets,extension,config,args,storybookOptions){let presetResult=new Promise(res=>res(config));return presets.length?presets.reduce((accumulationPromise,{preset,options})=>{let change=preset[extension];if(!change)return accumulationPromise;if(typeof change=="function"){let extensionFn=change,context={preset,combinedOptions:{...storybookOptions,...args,...options,presetsList:presets,presets:{apply:async(ext,c,a={})=>applyPresets(presets,ext,c,a,storybookOptions)}}};return accumulationPromise.then(newConfig=>extensionFn.call(context.preset,newConfig,context.combinedOptions))}return accumulationPromise.then(newConfig=>Array.isArray(newConfig)&&Array.isArray(change)?[...newConfig,...change]:isObject(newConfig)&&isObject(change)?{...newConfig,...change}:change)},presetResult):presetResult}async function getPresets(presets,storybookOptions){let loadedPresets=await loadPresets(presets,0,storybookOptions);return {apply:async(extension,config,args={})=>applyPresets(loadedPresets,extension,config,args,storybookOptions)}}async function loadAllPresets(options){let{corePresets=[],overridePresets=[],...restOptions}=options,presetsConfig=[...corePresets,...loadCustomPresets(options),...overridePresets],filteredPresetConfig=filterPresetsConfig(presetsConfig);return filteredPresetConfig.length<presetsConfig.length&&import_node_logger2.logger.warn("Storybook now supports TypeScript natively. You can safely remove `@storybook/preset-typescript`."),getPresets(filteredPresetConfig,restOptions)}var import_file_system_cache=__toESM2(require_lib2());function createFileSystemCache(options){return (0, import_file_system_cache.default)(options)}var import_path5=__toESM2(__require("path")),import_find_cache_dir=__toESM2(require_find_cache_dir());function resolvePathInStorybookCache(fileOrDirectoryName,sub="default"){let cacheDirectory=(0, import_find_cache_dir.default)({name:"storybook"});return cacheDirectory||=import_path5.default.join(process.cwd(),".cache","storybook"),import_path5.default.join(cacheDirectory,sub,fileOrDirectoryName)}var cache=createFileSystemCache({basePath:resolvePathInStorybookCache("dev-server"),ns:"storybook"}),import_fs_extra2=require_lib3(),import_path7=__require("path"),import_tempy=__toESM2(require_tempy()),import_path6=__toESM2(__require("path")),import_fs_extra=__toESM2(require_lib3());function getStorybookConfiguration(storybookScript,shortName,longName){if(!storybookScript)return null;let parts=storybookScript.split(/[\s='"]+/),index=parts.indexOf(longName);return index===-1&&(index=parts.indexOf(shortName)),index===-1?null:parts[index+1]}var rendererPackages={"@storybook/react":"react","@storybook/vue3":"vue3","@storybook/angular":"angular","@storybook/html":"html","@storybook/web-components":"web-components","@storybook/polymer":"polymer","@storybook/ember":"ember","@storybook/svelte":"svelte","@storybook/preact":"preact","@storybook/server":"server","storybook-framework-qwik":"qwik","storybook-solidjs":"solid","@storybook/vue":"vue"},frameworkPackages={"@storybook/angular":"angular","@storybook/ember":"ember","@storybook/html-vite":"html-vite","@storybook/html-webpack5":"html-webpack5","@storybook/nextjs":"nextjs","@storybook/preact-vite":"preact-vite","@storybook/preact-webpack5":"preact-webpack5","@storybook/react-vite":"react-vite","@storybook/react-webpack5":"react-webpack5","@storybook/server-webpack5":"server-webpack5","@storybook/svelte-vite":"svelte-vite","@storybook/svelte-webpack5":"svelte-webpack5","@storybook/sveltekit":"sveltekit","@storybook/vue3-vite":"vue3-vite","@storybook/vue3-webpack5":"vue3-webpack5","@storybook/web-components-vite":"web-components-vite","@storybook/web-components-webpack5":"web-components-webpack5","storybook-framework-qwik":"qwik","storybook-solidjs-vite":"solid"},builderPackages=["@storybook/builder-webpack5","@storybook/builder-vite"],logger2=console,findDependency=({dependencies,devDependencies,peerDependencies},predicate)=>[Object.entries(dependencies||{}).find(predicate),Object.entries(devDependencies||{}).find(predicate),Object.entries(peerDependencies||{}).find(predicate)],getRendererInfo=packageJson=>{let[dep,devDep,peerDep]=findDependency(packageJson,([key])=>rendererPackages[key]),[pkg,version]=dep||devDep||peerDep||[];return dep&&devDep&&dep[0]===devDep[0]&&logger2.warn(`Found "${dep[0]}" in both "dependencies" and "devDependencies". This is probably a mistake.`),dep&&peerDep&&dep[0]===peerDep[0]&&logger2.warn(`Found "${dep[0]}" in both "dependencies" and "peerDependencies". This is probably a mistake.`),{version,frameworkPackage:pkg}},validConfigExtensions=["ts","js","tsx","jsx","mjs","cjs"],findConfigFile=(prefix,configDir)=>{let filePrefix=import_path6.default.join(configDir,prefix),extension=validConfigExtensions.find(ext=>import_fs_extra.default.existsSync(`${filePrefix}.${ext}`));return extension?`${filePrefix}.${extension}`:null},getConfigInfo=(packageJson,configDir)=>{let storybookConfigDir=configDir??".storybook",storybookScript=packageJson.scripts?.storybook;if(storybookScript&&!configDir){let configParam=getStorybookConfiguration(storybookScript,"-c","--config-dir");configParam&&(storybookConfigDir=configParam);}return {configDir:storybookConfigDir,mainConfig:findConfigFile("main",storybookConfigDir),previewConfig:findConfigFile("preview",storybookConfigDir),managerConfig:findConfigFile("manager",storybookConfigDir)}},getStorybookInfo=(packageJson,configDir)=>{let rendererInfo=getRendererInfo(packageJson),configInfo=getConfigInfo(packageJson,configDir);return {...rendererInfo,...configInfo}},versions_default={"@storybook/addon-a11y":"8.0.2","@storybook/addon-actions":"8.0.2","@storybook/addon-backgrounds":"8.0.2","@storybook/addon-controls":"8.0.2","@storybook/addon-docs":"8.0.2","@storybook/addon-essentials":"8.0.2","@storybook/addon-highlight":"8.0.2","@storybook/addon-interactions":"8.0.2","@storybook/addon-jest":"8.0.2","@storybook/addon-links":"8.0.2","@storybook/addon-mdx-gfm":"8.0.2","@storybook/addon-measure":"8.0.2","@storybook/addon-onboarding":"8.0.2","@storybook/addon-outline":"8.0.2","@storybook/addon-storysource":"8.0.2","@storybook/addon-themes":"8.0.2","@storybook/addon-toolbars":"8.0.2","@storybook/addon-viewport":"8.0.2","@storybook/angular":"8.0.2","@storybook/blocks":"8.0.2","@storybook/builder-manager":"8.0.2","@storybook/builder-vite":"8.0.2","@storybook/builder-webpack5":"8.0.2","@storybook/channels":"8.0.2","@storybook/cli":"8.0.2","@storybook/client-logger":"8.0.2","@storybook/codemod":"8.0.2","@storybook/components":"8.0.2","@storybook/core-common":"8.0.2","@storybook/core-events":"8.0.2","@storybook/core-server":"8.0.2","@storybook/core-webpack":"8.0.2","@storybook/csf-plugin":"8.0.2","@storybook/csf-tools":"8.0.2","@storybook/docs-tools":"8.0.2","@storybook/ember":"8.0.2","@storybook/html":"8.0.2","@storybook/html-vite":"8.0.2","@storybook/html-webpack5":"8.0.2","@storybook/instrumenter":"8.0.2","@storybook/manager":"8.0.2","@storybook/manager-api":"8.0.2","@storybook/nextjs":"8.0.2","@storybook/node-logger":"8.0.2","@storybook/preact":"8.0.2","@storybook/preact-vite":"8.0.2","@storybook/preact-webpack5":"8.0.2","@storybook/preset-create-react-app":"8.0.2","@storybook/preset-html-webpack":"8.0.2","@storybook/preset-preact-webpack":"8.0.2","@storybook/preset-react-webpack":"8.0.2","@storybook/preset-server-webpack":"8.0.2","@storybook/preset-svelte-webpack":"8.0.2","@storybook/preset-vue3-webpack":"8.0.2","@storybook/preview":"8.0.2","@storybook/preview-api":"8.0.2","@storybook/react":"8.0.2","@storybook/react-dom-shim":"8.0.2","@storybook/react-vite":"8.0.2","@storybook/react-webpack5":"8.0.2","@storybook/router":"8.0.2","@storybook/server":"8.0.2","@storybook/server-webpack5":"8.0.2","@storybook/source-loader":"8.0.2","@storybook/svelte":"8.0.2","@storybook/svelte-vite":"8.0.2","@storybook/svelte-webpack5":"8.0.2","@storybook/sveltekit":"8.0.2","@storybook/telemetry":"8.0.2","@storybook/test":"8.0.2","@storybook/theming":"8.0.2","@storybook/types":"8.0.2","@storybook/vue3":"8.0.2","@storybook/vue3-vite":"8.0.2","@storybook/vue3-webpack5":"8.0.2","@storybook/web-components":"8.0.2","@storybook/web-components-vite":"8.0.2","@storybook/web-components-webpack5":"8.0.2",sb:"8.0.2",storybook:"8.0.2"};function parseList(str){return str.split(",").map(item=>item.trim()).filter(item=>item.length>0)}async function getCoercedStorybookVersion(packageManager){return (await Promise.all(Object.keys(rendererPackages).map(async pkg=>({name:pkg,version:await packageManager.getPackageVersion(pkg)})))).filter(({version})=>!!version)[0]?.version}function getEnvConfig(program,configEnv){Object.keys(configEnv).forEach(fieldName=>{let envVarName=configEnv[fieldName],envVarValue=process.env[envVarName];envVarValue&&(program[fieldName]=envVarValue);});}var createLogStream=async(logFileName="storybook.log")=>{let finalLogPath=(0, import_path7.join)(process.cwd(),logFileName),temporaryLogPath=import_tempy.default.file({name:logFileName}),logStream=(0, import_fs_extra2.createWriteStream)(temporaryLogPath,{encoding:"utf8"});return new Promise((resolve,reject)=>{logStream.once("open",()=>{resolve({logStream,moveLogFile:async()=>(0, import_fs_extra2.move)(temporaryLogPath,finalLogPath,{overwrite:!0}),clearLogFile:async()=>(0, import_fs_extra2.writeFile)(temporaryLogPath,""),removeLogFile:async()=>(0, import_fs_extra2.remove)(temporaryLogPath),readLogFile:async()=>(0, import_fs_extra2.readFile)(temporaryLogPath,"utf8")});}),logStream.once("error",reject);})},isCorePackage=pkg=>Object.keys(versions_default).includes(pkg),import_node_logger3=require_dist(),predicateFor=addon=>entry=>{let name=entry.name||entry;return name&&name.replaceAll(/(\\){1,2}/g,"/").includes(addon)},isCorrectOrder=(addons,before,after)=>{let essentialsIndex=addons.findIndex(predicateFor("@storybook/addon-essentials")),beforeIndex=addons.findIndex(predicateFor(before.name)),afterIndex=addons.findIndex(predicateFor(after.name));return beforeIndex===-1&&before.inEssentials&&(beforeIndex=essentialsIndex),afterIndex===-1&&after.inEssentials&&(afterIndex=essentialsIndex),beforeIndex!==-1&&afterIndex!==-1&&beforeIndex<=afterIndex},checkAddonOrder2=async({before,after,configFile,getConfig})=>{try{let config=await getConfig(configFile);if(!config?.addons){import_node_logger3.logger.warn("Unable to find 'addons' config in main Storybook config");return}if(!isCorrectOrder(config.addons,before,after)){let orEssentials=" (or '@storybook/addon-essentials')",beforeText=`'${before.name}'${before.inEssentials?orEssentials:""}`,afterText=`'${after.name}'${after.inEssentials?orEssentials:""}`;import_node_logger3.logger.warn(`Expected ${beforeText} to be listed before ${afterText} in main Storybook config.`);}}catch{import_node_logger3.logger.warn(`Unable to load config file: ${configFile}`);}},import_lazy_universal_dotenv=require_lib5(),import_path8=__toESM2(__require("path")),import_find_up=__toESM2(require_find_up2()),getProjectRoot=()=>{let result;if(process.env.STORYBOOK_PROJECT_ROOT)return process.env.STORYBOOK_PROJECT_ROOT;try{let found=import_find_up.default.sync(".git",{type:"directory"});found&&(result=import_path8.default.join(found,".."));}catch{}try{let found=import_find_up.default.sync(".svn",{type:"directory"});found&&(result=result||import_path8.default.join(found,".."));}catch{}try{let found=import_find_up.default.sync(".hg",{type:"directory"});found&&(result=result||import_path8.default.join(found,".."));}catch{}try{let found=import_find_up.default.sync(".yarn",{type:"directory"});found&&(result=result||import_path8.default.join(found,".."));}catch{}try{result=result||__dirname.split("node_modules")[0];}catch{}return result||process.cwd()},nodePathsToArray=nodePath=>nodePath.split(process.platform==="win32"?";":":").filter(Boolean).map(p=>import_path8.default.resolve("./",p)),relativePattern=/^\.{1,2}([/\\]|$)/;function normalizeStoryPath(filename){return relativePattern.test(filename)?filename:`.${import_path8.default.sep}${filename}`}function loadEnvs(options={}){let defaultNodeEnv=options.production?"production":"development",env={NODE_ENV:process.env.NODE_ENV||defaultNodeEnv,NODE_PATH:process.env.NODE_PATH||"",STORYBOOK:process.env.STORYBOOK||"true",PUBLIC_URL:options.production?".":""};Object.keys(process.env).filter(name=>/^STORYBOOK_/.test(name)).forEach(name=>{env[name]=process.env[name];});let base=Object.entries(env).reduce((acc,[k,v])=>Object.assign(acc,{[k]:JSON.stringify(v)}),{}),{stringified,raw}=(0, import_lazy_universal_dotenv.getEnvironment)({nodeEnv:env.NODE_ENV}),fullRaw={...env,...raw};return fullRaw.NODE_PATH=nodePathsToArray(fullRaw.NODE_PATH||""),{stringified:{...base,...stringified},raw:fullRaw}}var stringifyEnvs=raw=>Object.entries(raw).reduce((acc,[key,value])=>(acc[key]=JSON.stringify(value),acc),{}),stringifyProcessEnvs=raw=>Object.entries(raw).reduce((acc,[key,value])=>(acc[`process.env.${key}`]=JSON.stringify(value),acc),{}),NODE_MODULES_RE=/node_modules/,commonGlobOptions=glob2=>NODE_MODULES_RE.test(glob2)?{}:{ignore:["**/node_modules/**"]};async function getBuilderOptions(options){let framework=await options.presets.apply("framework",{},options);if(typeof framework!="string"&&framework?.options?.builder)return framework.options.builder;let{builder}=await options.presets.apply("core",{},options);return typeof builder!="string"&&builder?.options?builder.options:{}}var import_ts_dedent3=__require("ts-dedent");async function getFrameworkName(options){let framework=await options.presets.apply("framework","",options);if(!framework)throw new Error(import_ts_dedent3.dedent`
|
|
526
526
|
You must specify a framework in '.storybook/main.js' config.
|
|
527
527
|
|
|
528
528
|
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-field-mandatory
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/addon-interactions",
|
|
3
|
-
"version": "8.0.
|
|
3
|
+
"version": "8.0.2",
|
|
4
4
|
"description": "Automate, test and debug user interactions",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook-addons",
|
|
@@ -50,22 +50,22 @@
|
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@storybook/global": "^5.0.0",
|
|
53
|
-
"@storybook/instrumenter": "8.0.
|
|
54
|
-
"@storybook/test": "8.0.
|
|
55
|
-
"@storybook/types": "8.0.
|
|
53
|
+
"@storybook/instrumenter": "8.0.2",
|
|
54
|
+
"@storybook/test": "8.0.2",
|
|
55
|
+
"@storybook/types": "8.0.2",
|
|
56
56
|
"polished": "^4.2.2",
|
|
57
57
|
"ts-dedent": "^2.2.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@devtools-ds/object-inspector": "^1.1.2",
|
|
61
|
-
"@storybook/client-logger": "8.0.
|
|
62
|
-
"@storybook/components": "8.0.
|
|
63
|
-
"@storybook/core-common": "8.0.
|
|
64
|
-
"@storybook/core-events": "8.0.
|
|
61
|
+
"@storybook/client-logger": "8.0.2",
|
|
62
|
+
"@storybook/components": "8.0.2",
|
|
63
|
+
"@storybook/core-common": "8.0.2",
|
|
64
|
+
"@storybook/core-events": "8.0.2",
|
|
65
65
|
"@storybook/icons": "^1.2.5",
|
|
66
|
-
"@storybook/manager-api": "8.0.
|
|
67
|
-
"@storybook/preview-api": "8.0.
|
|
68
|
-
"@storybook/theming": "8.0.
|
|
66
|
+
"@storybook/manager-api": "8.0.2",
|
|
67
|
+
"@storybook/preview-api": "8.0.2",
|
|
68
|
+
"@storybook/theming": "8.0.2",
|
|
69
69
|
"@types/node": "^18.0.0",
|
|
70
70
|
"formik": "^2.2.9",
|
|
71
71
|
"react": "^18.2.0",
|