storybook-addon-datalayer-watcher/dist/manager.mjs

Get GTM's dataLayer events in Storybook

import { addons, types, useAddonState, useChannel } from 'storybook/manager-api';
import n, { useEffect, useCallback } from 'react';
import { AddonPanel, Button } from 'storybook/internal/components';
import { ObjectInspector } from 'react-inspector';
import { isEqual } from 'lodash';
import { styled, withTheme } from 'storybook/theming';
import { STORY_CHANGED } from 'storybook/internal/core-events';

var i="storybook/storybook-addon-datalayer-watcher",u=`${i}/panel`,a=Symbol("count");var m=()=>document.getElementById("storybook-preview-iframe");var y=styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 24px;
  margin: 12px;
  width: 100%;
  color: ${({theme:t})=>t.color.positive};
`,x=styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
`,h=styled.span`
  padding: 0 8px;
  border-radius: 4px;
  font-size: ${({theme:t})=>t.typography.size.code};
  background-color: ${({theme:t})=>t.color.dark};
  color: ${({theme:t})=>t.color.lightest};
`;var b=styled.div`
  position: sticky;
  top: 0;
  height: 40px;
  width: 100%;
  background-color: ${({theme:t})=>t.background.content};
  z-index: 9999999;
`,I=styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 0 12px;

  height: 40px;
  width: 100%;
`;var C=()=>{let t=useCallback(()=>{let e=m();e?.contentWindow&&(e.contentWindow.dataLayer=[]);},[]);return n.createElement(b,null,n.createElement(I,null,n.createElement(Button,{onClick:t},"\u{1F5D1}\uFE0F Clear dataLayer")))};var d=()=>{let t=n.useRef(null),[e,c]=useAddonState(i,[]),L=withTheme(({key:o,theme:r,...s})=>n.createElement(ObjectInspector,{theme:r.addonActionsTheme||"chromeLight",table:!1,expandLevel:0,sortObjectKeys:!0,showNonenumerable:!1,key:o,...s})),D=e.reduce((o,r,s,A)=>(isEqual(A[s-1],r)?o[o.length-1][a]+=1:o.push({...r,[a]:1}),o),[]);return useChannel({[STORY_CHANGED]:()=>{let o=m();o?.contentWindow&&(o.contentWindow.dataLayer=[]);}}),useEffect(()=>{let o=setInterval(()=>{let r=m()?.contentWindow?.dataLayer??[];e.length!==r.length&&(isEqual(e,r)||c([...r]));},100);return ()=>clearInterval(o)},[e,c]),useEffect(()=>{e.length&&t.current?.scrollIntoView({behavior:"smooth",block:"end"});},[e.length]),n.createElement(n.Fragment,null,n.createElement(C,null),n.createElement(y,null,D.map((o,r)=>{let s=typeof o[a]=="number"&&o[a]>1;return n.createElement(x,null,s&&n.createElement(h,null,o[a]),n.createElement(L,{key:r,name:String(o.event),data:o}))}),n.createElement("div",{ref:t})))};var f=t=>n.createElement(AddonPanel,{...t},n.createElement(d,null));function M(){let[t]=useAddonState(i,[]),e="";return t.length>0&&(e=` (${t.length})`),`\u{1F440} dataLayer watcher${e}`}addons.register(i,()=>{addons.add(u,{type:types.PANEL,title:M,match:({viewMode:t})=>t==="story",render:f});});
//# sourceMappingURL=out.js.map
//# sourceMappingURL=manager.mjs.map