storybook-addon-remix-react-router/dist/manager.cjs

Use Remix React Router in your stories. (Formerly storybook-addon-react-router-v6)

'use strict';var managerApi=require('@storybook/manager-api'),m=require('react'),components=require('@storybook/components'),coreEvents=require('@storybook/core-events'),compareVersions=require('compare-versions'),theming=require('@storybook/theming'),reactInspector=require('react-inspector');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var m__default=/*#__PURE__*/_interopDefault(m);var s="storybook/react-router-v6",E=`${s}/panel`,f="reactRouter",o={CLEAR:`${s}/clear`,NAVIGATION:`${s}/navigation`,STORY_LOADED:`${s}/story-loaded`,ROUTE_MATCHES:`${s}/route-matches`,ACTION_INVOKED:`${s}/action_invoked`,ACTION_SETTLED:`${s}/action_settled`,LOADER_INVOKED:`${s}/loader_invoked`,LOADER_SETTLED:`${s}/loader_settled`};function l(){let[e,r]=m.useState(),[a,i]=m.useState();m.useEffect(()=>{let t=new AbortController;return fetch("https://registry.npmjs.org/storybook-addon-remix-react-router/latest",{signal:t.signal}).then(p=>p.json()).then(p=>i(p.version)).catch(()=>{}),()=>t.abort()},[]),m.useEffect(()=>{L().then(t=>r(t));},[]);let n=!a||!e?void 0:compareVersions.compareVersions(a,e)===1;return {currentAddonVersion:e,latestAddonVersion:a,addonUpdateAvailable:n}}async function L(){try{return (await import('../package.json')).version}catch{return (await import('../package.json')).version}}var T=theming.styled.p`
  background: #ffebba;
  padding: 5px;
  margin-top: 0;
`;var C=theming.styled.div({flex:1,padding:"0 0 0 5px"});var N=theming.styled.div({display:"flex",padding:0,borderLeft:"5px solid transparent",borderBottom:"1px solid transparent",transition:"all 0.1s",alignItems:"flex-start",whiteSpace:"pre"});var h=theming.withTheme(({theme:e,...r})=>m__default.default.createElement(reactInspector.ObjectInspector,{theme:e.addonActionsTheme||"chromeLight",...r}));var H=components.ScrollArea,O=({routerEvents:e,onClear:r})=>m__default.default.createElement(m.Fragment,null,m__default.default.createElement(D,{title:"reactRouterLogger"},e.map((a,i)=>m__default.default.createElement(N,{key:i},m__default.default.createElement(C,null,m__default.default.createElement(h,{name:U[a.type],data:a.data,showNonenumerable:!1,sortObjectKeys:!1,expandPaths:["$.routeParams","$.searchParams","$.routeMatches.*","$.routeMatches.*.*","$.matches","$.matches.*","$.matches.*.*"]}))))),m__default.default.createElement(components.ActionBar,{actionItems:[{title:"Clear",onClick:r}]})),U={[o.NAVIGATION]:"Navigate",[o.STORY_LOADED]:"Story rendered",[o.ROUTE_MATCHES]:"New route matches",[o.ACTION_INVOKED]:"Action invoked",[o.ACTION_SETTLED]:"Action settled",[o.LOADER_INVOKED]:"Loader invoked",[o.LOADER_SETTLED]:"Loader settled"},D=theming.styled(({children:e,title:r})=>m__default.default.createElement(H,{horizontal:!0,vertical:!0,title:r},e))({margin:0,padding:"10px 5px 20px"});D.displayName="Wrapper";var I=e=>{let[r,a]=m.useState([]),{latestAddonVersion:i,addonUpdateAvailable:n}=l(),t=c=>{a(R=>[...R,c]);};managerApi.useChannel({[o.ROUTE_MATCHES]:t,[o.NAVIGATION]:t,[o.STORY_LOADED]:t,[o.ACTION_INVOKED]:t,[o.ACTION_SETTLED]:t,[o.LOADER_INVOKED]:t,[o.LOADER_SETTLED]:t,[coreEvents.STORY_CHANGED]:()=>a([])});let p=()=>{e.api.emit(o.CLEAR),a([]);};return m__default.default.createElement(components.AddonPanel,{...e},n&&m__default.default.createElement(T,null,"Version ",i," is now available !"," ",m__default.default.createElement("a",{href:`https://github.com/JesusTheHun/storybook-addon-remix-react-router/releases/tag/v${i}`},"Changelog"),"."),m__default.default.createElement(O,{routerEvents:r,onClear:p}))};function S(){let{api:e}=m.useContext(managerApi.ManagerContext),{addonUpdateAvailable:r}=l(),[a,i]=m.useState(0),n=()=>i(c=>c+1),t=()=>i(0);m.useEffect(()=>(e.on(coreEvents.STORY_CHANGED,t),e.on(o.ROUTE_MATCHES,n),e.on(o.NAVIGATION,n),e.on(o.ACTION_INVOKED,n),e.on(o.ACTION_SETTLED,n),e.on(o.LOADER_INVOKED,n),e.on(o.LOADER_SETTLED,n),e.on(o.CLEAR,t),()=>{e.off(coreEvents.STORY_CHANGED,t),e.off(o.ROUTE_MATCHES,n),e.off(o.NAVIGATION,n),e.off(o.ACTION_INVOKED,n),e.off(o.ACTION_SETTLED,n),e.off(o.LOADER_INVOKED,n),e.off(o.LOADER_SETTLED,n),e.off(o.CLEAR,t);}),[e]);let p=[];return r&&p.push("\u26A1\uFE0F"),a&&p.push(`(${a})`),m__default.default.createElement(m__default.default.Fragment,null,"React Router ",p.join(" "))}managerApi.addons.register(s,e=>{managerApi.addons.add(E,{type:managerApi.types.PANEL,paramKey:f,title:m__default.default.createElement(S,null),match:({viewMode:r})=>r==="story",render:({active:r})=>m__default.default.createElement(I,{active:r||!1,api:e,key:s})});});
//# sourceMappingURL=manager.cjs.map
//# sourceMappingURL=manager.cjs.map