storybook-addon-remix-react-router/dist/index.js

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

import {makeDecorator,addons}from'storybook/preview-api';import I,{useState,useMemo,useCallback,useRef}from'react';import {createMemoryRouter,RouterProvider,UNSAFE_RouteContext,generatePath,useLocation,useParams,useSearchParams,useNavigationType}from'react-router';var p="storybook/react-router-v6",F="reactRouter",u={CLEAR:`${p}/clear`,NAVIGATION:`${p}/navigation`,STORY_LOADED:`${p}/story-loaded`,ROUTE_MATCHES:`${p}/route-matches`,ACTION_INVOKED:`${p}/action_invoked`,ACTION_SETTLED:`${p}/action_settled`,LOADER_INVOKED:`${p}/loader_invoked`,LOADER_SETTLED:`${p}/loader_settled`};var P=I.createContext([]);var T=I.createContext(void 0);function H(){let[t,o]=useState([]),r=n=>{n!==void 0&&o(i=>n.matches.length>i.length?n.matches:i);},e=UNSAFE_RouteContext;if(e.Provider?._context!==void 0)e.Provider._context=new Proxy(e.Provider._context,{set(n,i,a){return i==="_currentValue"&&r(a),Reflect.set(n,i,a)}});else {let n=Object.getOwnPropertyDescriptor(e,"_currentValue"),i=n?.set,a=n?.get?n.get.call(e):e._currentValue;Object.defineProperty(e,"_currentValue",{configurable:!0,get(){return a},set(s){a=s,i?.call(e,s),r(s);}});}return t}function K(t){let o={};return t.forEach((r,e)=>{if(r instanceof File){o[e]={filename:r.name,filesize:r.size,filetype:r.type};return}o[e]=r;}),o}async function v(t){let o=t.clone(),r=o.headers.get("content-type")||"",e;switch(!0){case r.startsWith("text"):e=await o.text();break;case r.startsWith("application/json"):e=await o.json();break;case r.startsWith("multipart/form-data"):case r.startsWith("application/x-www-form-urlencoded"):{e=K(await o.formData());break}}return e}var S=()=>{let t=useRef(0);return useCallback(async(o,r)=>{t.current++;let e=`${o}_${t.current}`;switch(o){case u.ACTION_INVOKED:{let{request:n,params:i,context:a}=r,s={url:n.url,method:n.method,body:await v(n)};return {key:e,type:o,data:{params:i,request:s,context:a}}}case u.ACTION_SETTLED:return {key:e,type:o,data:r};case u.LOADER_INVOKED:{let{request:n,params:i,context:a}=r,s={url:n.url,method:n.method,body:await v(n)};return {key:e,type:o,data:{params:i,request:s,context:a}}}case u.LOADER_SETTLED:return {key:e,type:o,data:r}}},[])};function $(){let t=addons.getChannel(),o=S();return useCallback(r=>async function(e){if(r===void 0)return;t.emit(u.ACTION_INVOKED,await o(u.ACTION_INVOKED,e));let n=await r(e);return t.emit(u.ACTION_SETTLED,await o(u.ACTION_SETTLED,n)),n},[t,o])}function z(){let t=addons.getChannel(),o=S();return useCallback(r=>async function(e){if(r===void 0)return;t.emit(u.LOADER_INVOKED,await o(u.LOADER_INVOKED,e));let n=await r(e);return t.emit(u.LOADER_SETTLED,await o(u.LOADER_SETTLED,n)),n},[t,o])}function U(){let t=$(),o=z(),r=useCallback(e=>e.map(n=>{let{action:i,loader:a,children:s,lazy:R}=n,f={...n};return R&&(f.lazy=async function(){let m=await R(),l={...m};return typeof m.action=="function"&&(l.action=t(m.action)),typeof m.loader=="function"&&(l.loader=o(m.loader)),l}),typeof i=="function"&&(f.action=t(i)),typeof a=="function"&&(f.loader=o(a)),s&&(f.children=r(s)),f}),[t,o]);return r}var A=()=>{let t=I.useContext(T);if(t===void 0)throw new Error("useStory should be used inside <StoryContext>");return t};function C(t,o){return t.length===1&&(t[0].children===void 0||t[0].children.length===0)?[{...t[0],element:o}]:t.findIndex(e=>e.useStoryElement)!==-1?t.map(e=>e.useStoryElement?{...e,element:o}:e):t.map(e=>e.children?{...e,children:C(e.children,o)}:e)}function B({navigationHistory:t,location:o,routes:r}){if(t!==void 0){let E=[],O,g=Object.values(t);for(let D=0;D<g.length;D++){let{path:y,pathParams:k,searchParams:rt,hash:nt,state:it,isInitialLocation:at}=g[D];at&&(O=D);let M=w(r),ut=(typeof y=="function"?y(M,k??{}):y)??M;E.push({pathname:generatePath(ut??"/",k),search:new URLSearchParams(rt).toString(),hash:nt,state:it});}return O??=E.length-1,{initialEntries:E,initialIndex:O}}let{path:e,pathParams:n,searchParams:i,hash:a,state:s}=o??{},R=w(r),m=(typeof e=="function"?e(R,n??{}):e)??R;return {initialEntries:[{pathname:generatePath(m,n),search:new URLSearchParams(i).toString(),hash:a,state:s}],initialIndex:0}}function w(t=[],o="/"){if(t.length!==1)return o;let r=t[0],e=Et(o,r.path);return r.children===void 0||r.children.length===0?e:w(r.children,e)}function Et(t,o=""){let r=["","/"],e=t.split("/").filter(a=>!r.includes(a)),n=o.split("/").filter(a=>!r.includes(a));return "/"+[...e,...n].join("/")}function c(t,o){return Object.prototype.hasOwnProperty.call(t,o)}function h(t,o){if(t===!1||t===null||typeof t>"u")throw console.warn("Test invariant failed:",o),new Error(o)}function b(t){return arguments.length===0?[]:Array.isArray(t)?t:[t]}function Y(t){return t===void 0?[{path:"/"}]:typeof t=="string"?[{path:t}]:(t=b(t),t.length===1&&(t[0].path??="/"),t)}var N=()=>I.useContext(P);function W(t){let o={};return t.forEach((r,e)=>{let n=o[e];if(typeof n=="string"){o[e]=[n,r];return}if(Array.isArray(n)){o[e]=[...n,r];return}o[e]=r;}),o}var G=()=>{let t=useLocation(),o=t.pathname;return t.search.length>0&&(o+=`?${t.search}`),t.hash.length>0&&(o+=`#${t.hash}`),o};var J=()=>{let t=useRef(0),o=useLocation(),r=useParams(),[e]=useSearchParams(),n=useNavigationType(),i=N(),a=W(e),s=G(),R=i.map(m=>{let l={path:m.route.path};return Object.keys(m.params).length>0&&(l.params=m.params),l}),f={url:s,path:o.pathname,routeParams:r,searchParams:a,hash:o.hash,routeState:o.state,routeMatches:R};return m=>{t.current++;let l=`${m}_${t.current}`;switch(m){case u.STORY_LOADED:return {key:l,type:m,data:f};case u.NAVIGATION:return {key:l,type:m,data:{...f,navigationType:n}};case u.ROUTE_MATCHES:return {key:l,type:m,data:{matches:R}}}}};function L(){let{renderStory:t,storyContext:o}=A(),r=addons.getChannel(),e=useLocation(),n=N(),i=J(),a=useRef(),s=useRef(),R=useRef(),f=a.current!==void 0,m=f&&e.key!==a.current;return m&&s.current!==e.key&&(r.emit(u.NAVIGATION,i(u.NAVIGATION)),s.current=e.key),m&&n.length>0&&n!==R.current&&r.emit(u.ROUTE_MATCHES,i(u.ROUTE_MATCHES)),!f&&n.length>0&&(r.emit(u.STORY_LOADED,i(u.STORY_LOADED)),a.current=e.key,R.current=n),R.current=n,I.createElement(I.Fragment,null,t(o))}L.displayName="RouterLogger";function X(){let{addonParameters:t={}}=A(),{hydrationData:o,routing:r,navigationHistory:e,location:n,future:i,fallback:a}=t,s=U(),R=useMemo(()=>{let f=Y(r),m=s(f),l=C(m,I.createElement(L,null)),_=a??I.createElement(jt,null),E=l.map(y=>y.hydrateFallbackElement||y.HydrateFallback?y:{...y,hydrateFallbackElement:_}),{initialEntries:O,initialIndex:g}=B({navigationHistory:e,location:n,routes:l}),D={initialEntries:O,initialIndex:g,hydrationData:o};return i&&(D.future=i),createMemoryRouter(E,D)},[s,o,n,e,r,i,a]);return I.createElement(RouterProvider,{router:R})}function jt(){return I.createElement("p",null,"Performing initial data load")}var Z=({renderStory:t,storyContext:o,addonParameters:r})=>{let e=H();return I.createElement(T.Provider,{value:{renderStory:t,storyContext:o,addonParameters:r}},I.createElement(P.Provider,{value:e},I.createElement(X,null)))};function et(t){if(I.isValidElement(t))return !0;switch(!0){case I.isValidElement(t):case typeof t=="string":case typeof t=="number":case typeof t=="boolean":case t===null:case t===void 0:case(t instanceof Object&&c(t,Symbol.iterator)):return !0}return !1}function d(t){return et(t)?{element:t}:t}function ot(t={}){let o=["location","navigationHistory","routing","future"];if(Object.keys(t??{}).some(n=>o.includes(n)))return t;let e={routing:{},location:{},hydrationData:void 0};if(c(t,"routePath")&&(e.location.path=t.routePath,e.routing.path=t.routePath),c(t,"routeParams")&&(e.location.pathParams=t.routeParams),c(t,"routeState")&&(e.location.state=t.routeState),c(t,"routeHandle")&&(e.routing.handle=t.routeHandle),c(t,"searchParams")&&(e.location.searchParams=t.searchParams),c(t,"browserPath")&&(e.location.path=t.browserPath),c(t,"loader")&&(e.routing.loader=t.loader),c(t,"action")&&(e.routing.action=t.action),c(t,"errorElement")&&(e.routing.errorElement=t.errorElement),c(t,"hydrationData")&&(e.hydrationData=t.hydrationData),c(t,"shouldRevalidate")&&(e.routing.shouldRevalidate=t.shouldRevalidate),c(t,"routeId")&&(e.routing.id=t.routeId),c(t,"outlet")){let n=d(t.outlet);n.path??="",e.routing.children=[n];}return e.routing.useStoryElement=!0,e}var _t=makeDecorator({name:"withRouter",parameterName:F,wrapper:(t,o,{parameters:r})=>{let e=ot(r);return I.createElement(Z,{renderStory:t,storyContext:o,addonParameters:e})}});function kt(t){return t}function x(t){let o={},r=[];return t.length===1&&(o={},r=t[0]),t.length===2&&(o=typeof t[0]=="string"?{path:t[0]}:d(t[0]),r=t[1]),[o,r]}function Mt(...t){let[o,r]=x(t);h(!c(o,"element"),"The story definition cannot contain the `element` property because the story element will be used");let e=d(r);return e.index=!0,[{...o,useStoryElement:!0,children:[e]}]}function Ft(...t){let[o,r]=x(t);return h(!c(o,"element"),"The story definition cannot contain the `element` property because the story element will be used"),[{...o,useStoryElement:!0,children:r}]}function Ht(...t){let[o,r]=x(t);h(!c(o,"element"),"The story definition cannot contain the `element` property because the story element will be used");let e={},n=e;return r.forEach(i=>{let a=d(i);a.path??="",n.children=[a],n=a;},e),[{...o,useStoryElement:!0,children:[e]}]}function Kt(...t){let o=t.length===1?{}:t[0],r=b(t.length===1?t[0]:t[1]);h(!c(o,"element"),"The story definition cannot contain the `element` property because the story element will be used");let e={path:"/"},n=e;for(let i=0;i<r.length;i++){let a=r[i],s=d(a);s.path??="",n.children=[s],n=s;}return n.children=[{...o,index:!0,useStoryElement:!0}],[e]}export{d as castRouterRoute,Kt as reactRouterNestedAncestors,Ht as reactRouterNestedOutlets,Mt as reactRouterOutlet,Ft as reactRouterOutlets,kt as reactRouterParameters,_t as withRouter};//# sourceMappingURL=index.js.map
//# sourceMappingURL=index.js.map