@storybook/addon-actions/dist/manager.mjs

Get UI feedback when an action is performed on an interactive element

import { ADDON_ID, EVENT_ID, CLEAR_ID, PANEL_ID, PARAM_KEY } from './chunk-VWCVBQ22.mjs';
import React, { Component, useState, Fragment } from 'react';
import { addons, types, useChannel } from '@storybook/manager-api';
import { STORY_CHANGED } from '@storybook/core-events';
import { dequal } from 'dequal';
import { styled, withTheme } from '@storybook/theming';
import { Inspector } from 'react-inspector';
import { ScrollArea, ActionBar } from '@storybook/components';
import { opacify } from 'polished';

var Action=styled.div({display:"flex",padding:0,borderLeft:"5px solid transparent",borderBottom:"1px solid transparent",transition:"all 0.1s",alignItems:"flex-start",whiteSpace:"pre"}),Counter=styled.div(({theme})=>({backgroundColor:opacify(.5,theme.appBorderColor),color:theme.color.inverseText,fontSize:theme.typography.size.s1,fontWeight:theme.typography.weight.bold,lineHeight:1,padding:"1px 5px",borderRadius:20,margin:"2px 0px"})),InspectorContainer=styled.div({flex:1,padding:"0 0 0 5px"});var UnstyledWrapped=({children,className})=>React.createElement(ScrollArea,{horizontal:!0,vertical:!0,className},children),Wrapper=styled(UnstyledWrapped)({margin:0,padding:"10px 5px 20px"}),ThemedInspector=withTheme(({theme,...props})=>React.createElement(Inspector,{theme:theme.addonActionsTheme||"chromeLight",table:!1,...props})),ActionLogger=({actions,onClear})=>React.createElement(Fragment,null,React.createElement(Wrapper,null,actions.map(action=>React.createElement(Action,{key:action.id},action.count>1&&React.createElement(Counter,null,action.count),React.createElement(InspectorContainer,null,React.createElement(ThemedInspector,{sortObjectKeys:!0,showNonenumerable:!1,name:action.data.name,data:action.data.args||action.data}))))),React.createElement(ActionBar,{actionItems:[{title:"Clear",onClick:onClear}]}));var safeDeepEqual=(a,b)=>{try{return dequal(a,b)}catch{return !1}},ActionLogger2=class extends Component{constructor(props){super(props);this.handleStoryChange=()=>{let{actions}=this.state;actions.length>0&&actions[0].options.clearOnStoryChange&&this.clearActions();};this.addAction=action=>{this.setState(prevState=>{let actions=[...prevState.actions],previous=actions.length&&actions[0];return previous&&safeDeepEqual(previous.data,action.data)?previous.count++:(action.count=1,actions.unshift(action)),{actions:actions.slice(0,action.options.limit)}});};this.clearActions=()=>{let{api}=this.props;api.emit(CLEAR_ID),this.setState({actions:[]});};this.mounted=!1,this.state={actions:[]};}componentDidMount(){this.mounted=!0;let{api}=this.props;api.on(EVENT_ID,this.addAction),api.on(STORY_CHANGED,this.handleStoryChange);}componentWillUnmount(){this.mounted=!1;let{api}=this.props;api.off(STORY_CHANGED,this.handleStoryChange),api.off(EVENT_ID,this.addAction);}render(){let{actions=[]}=this.state,{active}=this.props,props={actions,onClear:this.clearActions};return active?React.createElement(ActionLogger,{...props}):null}};function Title({count}){let[_,setRerender]=useState(!1);useChannel({[EVENT_ID]:()=>{setRerender(r=>!r);},[STORY_CHANGED]:()=>{setRerender(r=>!r);},[CLEAR_ID]:()=>{setRerender(r=>!r);}});let suffix=count.current===0?"":` (${count.current})`;return React.createElement(React.Fragment,null,"Actions",suffix)}addons.register(ADDON_ID,api=>{let countRef={current:0};api.on(STORY_CHANGED,id=>{countRef.current=0;}),api.on(EVENT_ID,()=>{countRef.current+=1;}),api.on(CLEAR_ID,()=>{countRef.current=0;}),addons.addPanel(PANEL_ID,{title:React.createElement(Title,{count:countRef}),id:"actions",type:types.PANEL,render:({active,key})=>React.createElement(ActionLogger2,{key,api,active:!!active}),paramKey:PARAM_KEY});});