storybook-addon-remix-react-router
Advanced tools
Comparing version 3.0.0 to 3.0.1
import * as React from 'react'; | ||
import React__default from 'react'; | ||
declare const withRouter: (...args: any) => any; | ||
declare const withRouter: () => any; | ||
@@ -6,0 +6,0 @@ /** |
import { makeDecorator, addons } from '@storybook/preview-api'; | ||
import P, { useState, useMemo, useCallback, useRef } from 'react'; | ||
import de from '../package.json' assert { type: 'json' }; | ||
import { createMemoryRouter, RouterProvider, UNSAFE_RouteContext, useLocation, useParams, useSearchParams, useNavigationType } from 'react-router-dom'; | ||
var p="storybook/react-router-v6",z="reactRouter",l={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`};de.version;var D=P.createContext([]);var b=P.createContext(void 0);function k(){let[e,t]=useState([]),r=UNSAFE_RouteContext;return r.Provider._context=new Proxy(r.Provider._context??{},{set(n,o,i){return o==="_currentValue"&&i!==void 0&&t(a=>i.matches.length>a.length?i.matches:a),Reflect.set(n,o,i)}}),e}function V(e){let t={};return e.forEach((r,n)=>{if(r instanceof File){t[n]={filename:r.name,filesize:r.size,filetype:r.type};return}t[n]=r;}),t}async function T(e){let t=e.clone(),r=t.headers.get("content-type")||"",n;switch(!0){case r.startsWith("text"):n=await t.text();break;case r.startsWith("application/json"):n=await t.json();break;case r.startsWith("multipart/form-data"):case r.startsWith("application/x-www-form-urlencoded"):{n=V(await t.formData());break}}return n}var w=()=>{let e=useRef(0);return useCallback(async(t,r)=>{e.current++;let n=`${t}_${e.current}`;switch(t){case l.ACTION_INVOKED:{let{request:o,params:i,context:a}=r,c={url:o.url,method:o.method,body:await T(o)};return {key:n,type:t,data:{params:i,request:c,context:a}}}case l.ACTION_SETTLED:return {key:n,type:t,data:r};case l.LOADER_INVOKED:{let{request:o,params:i,context:a}=r,c={url:o.url,method:o.method,body:await T(o)};return {key:n,type:t,data:{params:i,request:c,context:a}}}case l.LOADER_SETTLED:return {key:n,type:t,data:r}}},[])};function B(){let e=addons.getChannel(),t=w();return useCallback(r=>async function(n){if(r===void 0)return;e.emit(l.ACTION_INVOKED,await t(l.ACTION_INVOKED,n));let o=await r(n);return e.emit(l.ACTION_SETTLED,await t(l.ACTION_SETTLED,o)),o},[e,t])}function K(){let e=addons.getChannel(),t=w();return useCallback(r=>async function(n){if(r===void 0)return;e.emit(l.LOADER_INVOKED,await t(l.LOADER_INVOKED,n));let o=await r(n);return e.emit(l.LOADER_SETTLED,await t(l.LOADER_SETTLED,o)),o},[e,t])}function $(){let e=B(),t=K(),r=useCallback(n=>n.map(o=>{let{action:i,loader:a,children:c,lazy:d}=o,h={...o};return d&&(h.lazy=async function(){let s=await d(),f={...s};return s.action&&(f.action=e(s.action)),s.loader&&(f.loader=t(s.loader)),f}),i&&(h.action=e(i)),a&&(h.loader=t(a)),c&&(h.children=r(c)),h}),[e,t]);return r}var x=()=>{let e=P.useContext(b);if(e===void 0)throw new Error("useStory should be used inside <StoryContext>");return e};function L(e,t,r=0){return e.length===1&&(e[0].children===void 0||e[0].children.length===0)?[{...e[0],element:t}]:e.findIndex(o=>o.useStoryElement)!==-1?e.map(o=>o.useStoryElement?{...o,element:t}:o):e.map(o=>o.children?{...o,children:L(o.children,t)}:o)}var W;(function(e){e.Pop="POP",e.Push="PUSH",e.Replace="REPLACE";})(W||(W={}));function Se(e,t){if(e===!1||e===null||typeof e>"u")throw new Error(t)}function Ee(e,t){if(!e){typeof console<"u"&&console.warn(t);try{throw new Error(t)}catch{}}}var Y;(function(e){e.data="data",e.deferred="deferred",e.redirect="redirect",e.error="error";})(Y||(Y={}));function N(e,t){t===void 0&&(t={});let r=e;r.endsWith("*")&&r!=="*"&&!r.endsWith("/*")&&(Ee(!1,'Route path "'+r+'" will be treated as if it were '+('"'+r.replace(/\*$/,"/*")+'" because the `*` character must ')+"always follow a `/` in the pattern. To get rid of this warning, "+('please change the route path to "'+r.replace(/\*$/,"/*")+'".')),r=r.replace(/\*$/,"/*"));let n=r.startsWith("/")?"/":"",o=a=>a==null?"":typeof a=="string"?a:String(a),i=r.split(/\/+/).map((a,c,d)=>{if(c===d.length-1&&a==="*")return o(t["*"]);let s=a.match(/^:([\w-]+)(\??)$/);if(s){let[,f,_]=s,R=t[f];return Se(_==="?"||R!=null,'Missing ":'+f+'" param'),o(R)}return a.replace(/\?$/g,"")}).filter(a=>!!a);return n+i.join("/")}var J=["post","put","patch","delete"];new Set(J);var Pe=["get",...J];new Set(Pe);function G({navigationHistory:e,location:t,routes:r}){if(e!==void 0){let R=[],A,F=Object.values(e);for(let v=0;v<F.length;v++){let{path:O,pathParams:U,searchParams:ie,hash:le,state:se,isInitialLocation:ue}=F[v];ue&&(A=v);let H=M(r),ce=(typeof O=="function"?O(H,U??{}):O)??H;R.push({pathname:N(ce??"/",U),search:new URLSearchParams(ie).toString(),hash:le,state:se});}return A??=R.length-1,{initialEntries:R,initialIndex:A}}let{path:n,pathParams:o,searchParams:i,hash:a,state:c}=t??{},d=M(r),s=(typeof n=="function"?n(d,o??{}):n)??d;return {initialEntries:[{pathname:N(s,o),search:new URLSearchParams(i).toString(),hash:a,state:c}],initialIndex:0}}function M(e=[],t="/"){if(e.length!==1)return t;let r=e[0],n=Ae(t,r.path);return r.children===void 0||r.children.length===0?n:M(r.children,n)}function Ae(e,t=""){let r=["","/"],n=e.split("/").filter(a=>!r.includes(a)),o=t.split("/").filter(a=>!r.includes(a));return "/"+[...n,...o].join("/")}function u(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function y(e,t){if(e===!1||e===null||typeof e>"u")throw console.warn("Test invariant failed:",t),new Error(t)}function S(e){return arguments.length===0?[]:Array.isArray(e)?e:[e]}function q(e){return e===void 0?[{path:"/"}]:typeof e=="string"?[{path:e}]:(e=S(e),e.length===1&&(e[0].path??="/"),e)}var E=()=>P.useContext(D);function X(e){let t={};return e.forEach((r,n)=>{let o=t[n];if(typeof o=="string"){t[n]=[o,r];return}if(Array.isArray(o)){t[n]=[...o,r];return}t[n]=r;}),t}var Q=()=>{let e=useLocation(),t=e.pathname;return e.search.length>0&&(t+=`?${e.search}`),e.hash.length>0&&(t+=`#${e.hash}`),t};var Z=()=>{let e=useRef(0),t=useLocation(),r=useParams(),[n]=useSearchParams(),o=useNavigationType(),i=E(),a=X(n),c=Q(),d=i.map(s=>{let f={path:s.route.path};return Object.keys(s.params).length>0&&(f.params=s.params),f}),h={url:c,path:t.pathname,routeParams:r,searchParams:a,hash:t.hash,routeState:t.state,routeMatches:d};return s=>{e.current++;let f=`${s}_${e.current}`;switch(s){case l.STORY_LOADED:return {key:f,type:s,data:h};case l.NAVIGATION:return {key:f,type:s,data:{...h,navigationType:o}};case l.ROUTE_MATCHES:return {key:f,type:s,data:{matches:d}}}}};function C(){let{renderStory:e,storyContext:t}=x(),r=addons.getChannel(),n=useLocation(),o=E(),i=Z(),a=useRef(),c=useRef(),d=useRef(),h=a.current!==void 0,s=h&&n.key!==a.current;return s&&c.current!==n.key&&(r.emit(l.NAVIGATION,i(l.NAVIGATION)),c.current=n.key),s&&o.length>0&&o!==d.current&&r.emit(l.ROUTE_MATCHES,i(l.ROUTE_MATCHES)),!h&&o.length>0&&(r.emit(l.STORY_LOADED,i(l.STORY_LOADED)),a.current=n.key,d.current=o),d.current=o,P.createElement(P.Fragment,null,e(t))}C.displayName="RouterLogger";function te(){let{addonParameters:e={}}=x(),{hydrationData:t,routing:r,navigationHistory:n,location:o}=e,i=$(),a=useMemo(()=>{let c=q(r),d=i(c),h=L(d,P.createElement(C,null)),{initialEntries:s,initialIndex:f}=G({navigationHistory:n,location:o,routes:h});return createMemoryRouter(h,{initialEntries:s,initialIndex:f,hydrationData:t})},[i,t,o,n,r]);return P.createElement(RouterProvider,{router:a,fallbackElement:P.createElement(ze,null)})}function ze(){return P.createElement("p",null,"Performing initial data load")}var re=({renderStory:e,storyContext:t,addonParameters:r})=>{let n=k();return P.createElement(b.Provider,{value:{renderStory:e,storyContext:t,addonParameters:r}},P.createElement(D.Provider,{value:n},P.createElement(te,null)))};function oe(e){if(P.isValidElement(e))return !0;switch(!0){case P.isValidElement(e):case typeof e=="string":case typeof e=="number":case typeof e=="boolean":case e===null:case e===void 0:case(e instanceof Object&&u(e,Symbol.iterator)):return !0}return !1}function m(e){return oe(e)?{element:e}:e}function ae(e={}){let t=["location","navigationHistory","routing"];if(Object.keys(e??{}).some(o=>t.includes(o)))return e;let n={routing:{},location:{},hydrationData:void 0};if(u(e,"routePath")&&(n.location.path=e.routePath,n.routing.path=e.routePath),u(e,"routeParams")&&(n.location.pathParams=e.routeParams),u(e,"routeState")&&(n.location.state=e.routeState),u(e,"routeHandle")&&(n.routing.handle=e.routeHandle),u(e,"searchParams")&&(n.location.searchParams=e.searchParams),u(e,"browserPath")&&(n.location.path=e.browserPath),u(e,"loader")&&(n.routing.loader=e.loader),u(e,"action")&&(n.routing.action=e.action),u(e,"errorElement")&&(n.routing.errorElement=e.errorElement),u(e,"hydrationData")&&(n.hydrationData=e.hydrationData),u(e,"shouldRevalidate")&&(n.routing.shouldRevalidate=e.shouldRevalidate),u(e,"routeId")&&(n.routing.id=e.routeId),u(e,"outlet")){let o=m(e.outlet);o.path??="",n.routing.children=[o];}return n.routing.useStoryElement=!0,n}var Be=makeDecorator({name:"withRouter",parameterName:z,wrapper:(e,t,{parameters:r})=>{let n=ae(r);return P.createElement(re,{renderStory:e,storyContext:t,addonParameters:n})}});function Ke(e){return e}function g(e){let t={},r=[];return e.length===1&&(t={},r=e[0]),e.length===2&&(t=typeof e[0]=="string"?{path:e[0]}:m(e[0]),r=e[1]),[t,r]}function $e(...e){let[t,r]=g(e);y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used");let n=m(r);return n.index=!0,[{...t,useStoryElement:!0,children:[n]}]}function We(...e){let[t,r]=g(e);return y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used"),[{...t,useStoryElement:!0,children:r}]}function Ye(...e){let[t,r]=g(e);y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used");let n={},o=n;return r.forEach(i=>{let a=m(i);a.path??="",o.children=[a],o=a;},n),[{...t,useStoryElement:!0,children:[n]}]}function Je(...e){let t=e.length===1?{}:e[0],r=S(e.length===1?e[0]:e[1]);y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used");let n={path:"/"},o=n;for(let i=0;i<r.length;i++){let a=r[i],c=m(a);c.path??="",o.children=[c],o=c;}return o.children=[{...t,index:!0,useStoryElement:!0}],[n]}/*! Bundled license information: | ||
var p="storybook/react-router-v6",z="reactRouter",l={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 D=P.createContext([]);var b=P.createContext(void 0);function k(){let[e,t]=useState([]),n=UNSAFE_RouteContext;return n.Provider._context=new Proxy(n.Provider._context??{},{set(r,o,i){return o==="_currentValue"&&i!==void 0&&t(a=>i.matches.length>a.length?i.matches:a),Reflect.set(r,o,i)}}),e}function V(e){let t={};return e.forEach((n,r)=>{if(n instanceof File){t[r]={filename:n.name,filesize:n.size,filetype:n.type};return}t[r]=n;}),t}async function T(e){let t=e.clone(),n=t.headers.get("content-type")||"",r;switch(!0){case n.startsWith("text"):r=await t.text();break;case n.startsWith("application/json"):r=await t.json();break;case n.startsWith("multipart/form-data"):case n.startsWith("application/x-www-form-urlencoded"):{r=V(await t.formData());break}}return r}var w=()=>{let e=useRef(0);return useCallback(async(t,n)=>{e.current++;let r=`${t}_${e.current}`;switch(t){case l.ACTION_INVOKED:{let{request:o,params:i,context:a}=n,c={url:o.url,method:o.method,body:await T(o)};return {key:r,type:t,data:{params:i,request:c,context:a}}}case l.ACTION_SETTLED:return {key:r,type:t,data:n};case l.LOADER_INVOKED:{let{request:o,params:i,context:a}=n,c={url:o.url,method:o.method,body:await T(o)};return {key:r,type:t,data:{params:i,request:c,context:a}}}case l.LOADER_SETTLED:return {key:r,type:t,data:n}}},[])};function B(){let e=addons.getChannel(),t=w();return useCallback(n=>async function(r){if(n===void 0)return;e.emit(l.ACTION_INVOKED,await t(l.ACTION_INVOKED,r));let o=await n(r);return e.emit(l.ACTION_SETTLED,await t(l.ACTION_SETTLED,o)),o},[e,t])}function K(){let e=addons.getChannel(),t=w();return useCallback(n=>async function(r){if(n===void 0)return;e.emit(l.LOADER_INVOKED,await t(l.LOADER_INVOKED,r));let o=await n(r);return e.emit(l.LOADER_SETTLED,await t(l.LOADER_SETTLED,o)),o},[e,t])}function $(){let e=B(),t=K(),n=useCallback(r=>r.map(o=>{let{action:i,loader:a,children:c,lazy:d}=o,h={...o};return d&&(h.lazy=async function(){let s=await d(),f={...s};return s.action&&(f.action=e(s.action)),s.loader&&(f.loader=t(s.loader)),f}),i&&(h.action=e(i)),a&&(h.loader=t(a)),c&&(h.children=n(c)),h}),[e,t]);return n}var x=()=>{let e=P.useContext(b);if(e===void 0)throw new Error("useStory should be used inside <StoryContext>");return e};function L(e,t){return e.length===1&&(e[0].children===void 0||e[0].children.length===0)?[{...e[0],element:t}]:e.findIndex(r=>r.useStoryElement)!==-1?e.map(r=>r.useStoryElement?{...r,element:t}:r):e.map(r=>r.children?{...r,children:L(r.children,t)}:r)}var W;(function(e){e.Pop="POP",e.Push="PUSH",e.Replace="REPLACE";})(W||(W={}));function xe(e,t){if(e===!1||e===null||typeof e>"u")throw new Error(t)}function Se(e,t){if(!e){typeof console<"u"&&console.warn(t);try{throw new Error(t)}catch{}}}var Y;(function(e){e.data="data",e.deferred="deferred",e.redirect="redirect",e.error="error";})(Y||(Y={}));function N(e,t){t===void 0&&(t={});let n=e;n.endsWith("*")&&n!=="*"&&!n.endsWith("/*")&&(Se(!1,'Route path "'+n+'" will be treated as if it were '+('"'+n.replace(/\*$/,"/*")+'" because the `*` character must ')+"always follow a `/` in the pattern. To get rid of this warning, "+('please change the route path to "'+n.replace(/\*$/,"/*")+'".')),n=n.replace(/\*$/,"/*"));let r=n.startsWith("/")?"/":"",o=a=>a==null?"":typeof a=="string"?a:String(a),i=n.split(/\/+/).map((a,c,d)=>{if(c===d.length-1&&a==="*")return o(t["*"]);let s=a.match(/^:([\w-]+)(\??)$/);if(s){let[,f,_]=s,R=t[f];return xe(_==="?"||R!=null,'Missing ":'+f+'" param'),o(R)}return a.replace(/\?$/g,"")}).filter(a=>!!a);return r+i.join("/")}var G=["post","put","patch","delete"];new Set(G);var Ee=["get",...G];new Set(Ee);function J({navigationHistory:e,location:t,routes:n}){if(e!==void 0){let R=[],A,F=Object.values(e);for(let v=0;v<F.length;v++){let{path:O,pathParams:U,searchParams:ie,hash:le,state:se,isInitialLocation:ue}=F[v];ue&&(A=v);let H=M(n),ce=(typeof O=="function"?O(H,U??{}):O)??H;R.push({pathname:N(ce??"/",U),search:new URLSearchParams(ie).toString(),hash:le,state:se});}return A??=R.length-1,{initialEntries:R,initialIndex:A}}let{path:r,pathParams:o,searchParams:i,hash:a,state:c}=t??{},d=M(n),s=(typeof r=="function"?r(d,o??{}):r)??d;return {initialEntries:[{pathname:N(s,o),search:new URLSearchParams(i).toString(),hash:a,state:c}],initialIndex:0}}function M(e=[],t="/"){if(e.length!==1)return t;let n=e[0],r=Pe(t,n.path);return n.children===void 0||n.children.length===0?r:M(n.children,r)}function Pe(e,t=""){let n=["","/"],r=e.split("/").filter(a=>!n.includes(a)),o=t.split("/").filter(a=>!n.includes(a));return "/"+[...r,...o].join("/")}function u(e,t){return Object.prototype.hasOwnProperty.call(e,t)}function y(e,t){if(e===!1||e===null||typeof e>"u")throw console.warn("Test invariant failed:",t),new Error(t)}function S(e){return arguments.length===0?[]:Array.isArray(e)?e:[e]}function q(e){return e===void 0?[{path:"/"}]:typeof e=="string"?[{path:e}]:(e=S(e),e.length===1&&(e[0].path??="/"),e)}var E=()=>P.useContext(D);function X(e){let t={};return e.forEach((n,r)=>{let o=t[r];if(typeof o=="string"){t[r]=[o,n];return}if(Array.isArray(o)){t[r]=[...o,n];return}t[r]=n;}),t}var Q=()=>{let e=useLocation(),t=e.pathname;return e.search.length>0&&(t+=`?${e.search}`),e.hash.length>0&&(t+=`#${e.hash}`),t};var Z=()=>{let e=useRef(0),t=useLocation(),n=useParams(),[r]=useSearchParams(),o=useNavigationType(),i=E(),a=X(r),c=Q(),d=i.map(s=>{let f={path:s.route.path};return Object.keys(s.params).length>0&&(f.params=s.params),f}),h={url:c,path:t.pathname,routeParams:n,searchParams:a,hash:t.hash,routeState:t.state,routeMatches:d};return s=>{e.current++;let f=`${s}_${e.current}`;switch(s){case l.STORY_LOADED:return {key:f,type:s,data:h};case l.NAVIGATION:return {key:f,type:s,data:{...h,navigationType:o}};case l.ROUTE_MATCHES:return {key:f,type:s,data:{matches:d}}}}};function C(){let{renderStory:e,storyContext:t}=x(),n=addons.getChannel(),r=useLocation(),o=E(),i=Z(),a=useRef(),c=useRef(),d=useRef(),h=a.current!==void 0,s=h&&r.key!==a.current;return s&&c.current!==r.key&&(n.emit(l.NAVIGATION,i(l.NAVIGATION)),c.current=r.key),s&&o.length>0&&o!==d.current&&n.emit(l.ROUTE_MATCHES,i(l.ROUTE_MATCHES)),!h&&o.length>0&&(n.emit(l.STORY_LOADED,i(l.STORY_LOADED)),a.current=r.key,d.current=o),d.current=o,P.createElement(P.Fragment,null,e(t))}C.displayName="RouterLogger";function te(){let{addonParameters:e={}}=x(),{hydrationData:t,routing:n,navigationHistory:r,location:o}=e,i=$(),a=useMemo(()=>{let c=q(n),d=i(c),h=L(d,P.createElement(C,null)),{initialEntries:s,initialIndex:f}=J({navigationHistory:r,location:o,routes:h});return createMemoryRouter(h,{initialEntries:s,initialIndex:f,hydrationData:t})},[i,t,o,r,n]);return P.createElement(RouterProvider,{router:a,fallbackElement:P.createElement(He,null)})}function He(){return P.createElement("p",null,"Performing initial data load")}var re=({renderStory:e,storyContext:t,addonParameters:n})=>{let r=k();return P.createElement(b.Provider,{value:{renderStory:e,storyContext:t,addonParameters:n}},P.createElement(D.Provider,{value:r},P.createElement(te,null)))};function oe(e){if(P.isValidElement(e))return !0;switch(!0){case P.isValidElement(e):case typeof e=="string":case typeof e=="number":case typeof e=="boolean":case e===null:case e===void 0:case(e instanceof Object&&u(e,Symbol.iterator)):return !0}return !1}function m(e){return oe(e)?{element:e}:e}function ae(e={}){let t=["location","navigationHistory","routing"];if(Object.keys(e??{}).some(o=>t.includes(o)))return e;let r={routing:{},location:{},hydrationData:void 0};if(u(e,"routePath")&&(r.location.path=e.routePath,r.routing.path=e.routePath),u(e,"routeParams")&&(r.location.pathParams=e.routeParams),u(e,"routeState")&&(r.location.state=e.routeState),u(e,"routeHandle")&&(r.routing.handle=e.routeHandle),u(e,"searchParams")&&(r.location.searchParams=e.searchParams),u(e,"browserPath")&&(r.location.path=e.browserPath),u(e,"loader")&&(r.routing.loader=e.loader),u(e,"action")&&(r.routing.action=e.action),u(e,"errorElement")&&(r.routing.errorElement=e.errorElement),u(e,"hydrationData")&&(r.hydrationData=e.hydrationData),u(e,"shouldRevalidate")&&(r.routing.shouldRevalidate=e.shouldRevalidate),u(e,"routeId")&&(r.routing.id=e.routeId),u(e,"outlet")){let o=m(e.outlet);o.path??="",r.routing.children=[o];}return r.routing.useStoryElement=!0,r}var Ve=makeDecorator({name:"withRouter",parameterName:z,wrapper:(e,t,{parameters:n})=>{let r=ae(n);return P.createElement(re,{renderStory:e,storyContext:t,addonParameters:r})}});function Be(e){return e}function g(e){let t={},n=[];return e.length===1&&(t={},n=e[0]),e.length===2&&(t=typeof e[0]=="string"?{path:e[0]}:m(e[0]),n=e[1]),[t,n]}function Ke(...e){let[t,n]=g(e);y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used");let r=m(n);return r.index=!0,[{...t,useStoryElement:!0,children:[r]}]}function $e(...e){let[t,n]=g(e);return y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used"),[{...t,useStoryElement:!0,children:n}]}function We(...e){let[t,n]=g(e);y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used");let r={},o=r;return n.forEach(i=>{let a=m(i);a.path??="",o.children=[a],o=a;},r),[{...t,useStoryElement:!0,children:[r]}]}function Ye(...e){let t=e.length===1?{}:e[0],n=S(e.length===1?e[0]:e[1]);y(!u(t,"element"),"The story definition cannot contain the `element` property because the story element will be used");let r={path:"/"},o=r;for(let i=0;i<n.length;i++){let a=n[i],c=m(a);c.path??="",o.children=[c],o=c;}return o.children=[{...t,index:!0,useStoryElement:!0}],[r]}/*! Bundled license information: | ||
@@ -21,4 +20,4 @@ @remix-run/router/dist/router.js: | ||
export { m as castRouterRoute, Je as reactRouterNestedAncestors, Ye as reactRouterNestedOutlets, $e as reactRouterOutlet, We as reactRouterOutlets, Ke as reactRouterParameters, Be as withRouter }; | ||
export { m as castRouterRoute, Ye as reactRouterNestedAncestors, We as reactRouterNestedOutlets, Ke as reactRouterOutlet, $e as reactRouterOutlets, Be as reactRouterParameters, Ve as withRouter }; | ||
//# sourceMappingURL=out.js.map | ||
//# sourceMappingURL=index.js.map |
import { addons, types, useChannel, ManagerContext } from '@storybook/manager-api'; | ||
import p, { useState, useContext, useEffect, Fragment } from 'react'; | ||
import L from '../package.json' assert { type: 'json' }; | ||
import m, { useState, useContext, useEffect, Fragment } from 'react'; | ||
import { ScrollArea, AddonPanel, ActionBar } from '@storybook/components'; | ||
@@ -10,8 +9,8 @@ import { STORY_CHANGED } from '@storybook/core-events'; | ||
var a="storybook/react-router-v6",f=`${a}/panel`,A="reactRouter",o={CLEAR:`${a}/clear`,NAVIGATION:`${a}/navigation`,STORY_LOADED:`${a}/story-loaded`,ROUTE_MATCHES:`${a}/route-matches`,ACTION_INVOKED:`${a}/action_invoked`,ACTION_SETTLED:`${a}/action_settled`,LOADER_INVOKED:`${a}/loader_invoked`,LOADER_SETTLED:`${a}/loader_settled`},c=L.version;function l(){let[e,r]=useState();useEffect(()=>{if(e!==void 0)return;let i=new AbortController;return fetch("https://registry.npmjs.org/storybook-addon-remix-react-router/latest",{signal:i.signal}).then(t=>t.json()).then(t=>r(t.version)).catch(()=>{}),()=>i.abort()},[e]);let s=e===void 0?void 0:compareVersions(e,c)===1;return {currentAddonVersion:c,latestAddonVersion:e,addonUpdateAvailable:s}}var u=styled.p` | ||
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]=useState(),[a,i]=useState();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()},[]),useEffect(()=>{x().then(t=>r(t));},[]);let n=!a||!e?void 0:compareVersions(a,e)===1;return {currentAddonVersion:e,latestAddonVersion:a,addonUpdateAvailable:n}}async function x(){try{return (await import('../package.json', { assert: { type: 'json' } })).version}catch{return (await import('../package.json', { assert: { type: 'json' } })).version}}var T=styled.p` | ||
background: #ffebba; | ||
padding: 5px; | ||
margin-top: 0; | ||
`;var T=styled.div({flex:1,padding:"0 0 0 5px"});var O=styled.div({display:"flex",padding:0,borderLeft:"5px solid transparent",borderBottom:"1px solid transparent",transition:"all 0.1s",alignItems:"flex-start",whiteSpace:"pre"});var D=withTheme(({theme:e,...r})=>p.createElement(ObjectInspector,{theme:e.addonActionsTheme||"chromeLight",...r}));var W=ScrollArea,N=({routerEvents:e,onClear:r})=>p.createElement(Fragment,null,p.createElement(C,{title:"reactRouterLogger"},e.map((s,i)=>p.createElement(O,{key:i},p.createElement(T,null,p.createElement(D,{name:j[s.type],data:s.data,showNonenumerable:!1,sortObjectKeys:!1,expandPaths:["$.routeParams","$.searchParams","$.routeMatches.*","$.routeMatches.*.*","$.matches","$.matches.*","$.matches.*.*"]}))))),p.createElement(ActionBar,{actionItems:[{title:"Clear",onClick:r}]})),j={[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"},C=styled(({children:e,title:r})=>p.createElement(W,{horizontal:!0,vertical:!0,title:r},e))({margin:0,padding:"10px 5px 20px"});C.displayName="Wrapper";var I=e=>{let[r,s]=useState([]),{latestAddonVersion:i,addonUpdateAvailable:t}=l(),n=E=>{s(P=>[...P,E]);};useChannel({[o.ROUTE_MATCHES]:n,[o.NAVIGATION]:n,[o.STORY_LOADED]:n,[o.ACTION_INVOKED]:n,[o.ACTION_SETTLED]:n,[o.LOADER_INVOKED]:n,[o.LOADER_SETTLED]:n,[STORY_CHANGED]:()=>s([])});let m=()=>{e.api.emit(o.CLEAR),s([]);};return p.createElement(AddonPanel,{...e},t&&p.createElement(u,null,"Version ",i," is now available !"," ",p.createElement("a",{href:`https://github.com/JesusTheHun/storybook-addon-remix-react-router/releases/tag/v${i}`},"Changelog"),"."),p.createElement(N,{routerEvents:r,onClear:m}))};function v(){let{api:e}=useContext(ManagerContext),{addonUpdateAvailable:r}=l(),[s,i]=useState(0),t=()=>i(E=>E+1),n=()=>i(0);useEffect(()=>(e.on(STORY_CHANGED,n),e.on(o.ROUTE_MATCHES,t),e.on(o.NAVIGATION,t),e.on(o.ACTION_INVOKED,t),e.on(o.ACTION_SETTLED,t),e.on(o.LOADER_INVOKED,t),e.on(o.LOADER_SETTLED,t),e.on(o.CLEAR,n),()=>{e.off(STORY_CHANGED,n),e.off(o.ROUTE_MATCHES,t),e.off(o.NAVIGATION,t),e.off(o.ACTION_INVOKED,t),e.off(o.ACTION_SETTLED,t),e.off(o.LOADER_INVOKED,t),e.off(o.LOADER_SETTLED,t),e.off(o.CLEAR,n);}),[e]);let m=[];return r&&m.push("\u26A1\uFE0F"),s&&m.push(`(${s})`),p.createElement(p.Fragment,null,"React Router ",m.join(" "))}addons.register(a,e=>{addons.add(f,{type:types.PANEL,paramKey:A,title:p.createElement(v,null),match:({viewMode:r})=>r==="story",render:({active:r})=>p.createElement(I,{active:r||!1,api:e,key:a})});}); | ||
`;var h=styled.div({flex:1,padding:"0 0 0 5px"});var O=styled.div({display:"flex",padding:0,borderLeft:"5px solid transparent",borderBottom:"1px solid transparent",transition:"all 0.1s",alignItems:"flex-start",whiteSpace:"pre"});var C=withTheme(({theme:e,...r})=>m.createElement(ObjectInspector,{theme:e.addonActionsTheme||"chromeLight",...r}));var H=ScrollArea,D=({routerEvents:e,onClear:r})=>m.createElement(Fragment,null,m.createElement(I,{title:"reactRouterLogger"},e.map((a,i)=>m.createElement(O,{key:i},m.createElement(h,null,m.createElement(C,{name:U[a.type],data:a.data,showNonenumerable:!1,sortObjectKeys:!1,expandPaths:["$.routeParams","$.searchParams","$.routeMatches.*","$.routeMatches.*.*","$.matches","$.matches.*","$.matches.*.*"]}))))),m.createElement(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"},I=styled(({children:e,title:r})=>m.createElement(H,{horizontal:!0,vertical:!0,title:r},e))({margin:0,padding:"10px 5px 20px"});I.displayName="Wrapper";var N=e=>{let[r,a]=useState([]),{latestAddonVersion:i,addonUpdateAvailable:n}=l(),t=d=>{a(P=>[...P,d]);};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,[STORY_CHANGED]:()=>a([])});let p=()=>{e.api.emit(o.CLEAR),a([]);};return m.createElement(AddonPanel,{...e},n&&m.createElement(T,null,"Version ",i," is now available !"," ",m.createElement("a",{href:`https://github.com/JesusTheHun/storybook-addon-remix-react-router/releases/tag/v${i}`},"Changelog"),"."),m.createElement(D,{routerEvents:r,onClear:p}))};function _(){let{api:e}=useContext(ManagerContext),{addonUpdateAvailable:r}=l(),[a,i]=useState(0),n=()=>i(d=>d+1),t=()=>i(0);useEffect(()=>(e.on(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(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.createElement(m.Fragment,null,"React Router ",p.join(" "))}addons.register(s,e=>{addons.add(E,{type:types.PANEL,paramKey:f,title:m.createElement(_,null),match:({viewMode:r})=>r==="story",render:({active:r})=>m.createElement(N,{active:r||!1,api:e,key:s})});}); | ||
//# sourceMappingURL=out.js.map | ||
//# sourceMappingURL=manager.js.map |
{ | ||
"name": "storybook-addon-remix-react-router", | ||
"version": "3.0.0", | ||
"version": "3.0.1", | ||
"description": "Use Remix React Router in your stories. (Formerly storybook-addon-react-router-v6)", | ||
@@ -20,2 +20,3 @@ "keywords": [ | ||
"license": "Apache-2.0", | ||
"packageManager": "npm@10.7.0", | ||
"exports": { | ||
@@ -54,5 +55,4 @@ ".": { | ||
"start": "concurrently \"npm run build:watch\" \"npm run storybook --quiet\"", | ||
"prerelease": "zx scripts/prepublish-checks.mjs", | ||
"release": "npm run build && auto shipit", | ||
"eject-ts": "zx scripts/eject-typescript.mjs", | ||
"prerelease": "npm run build", | ||
"release": " auto shipit", | ||
"storybook": "storybook dev -p 6006 --no-open", | ||
@@ -102,3 +102,3 @@ "build-storybook": "storybook build", | ||
"@vitejs/plugin-react": "^3.1.0", | ||
"auto": "^11.1.1", | ||
"auto": "^11.2.1", | ||
"boxen": "^5.0.1", | ||
@@ -129,4 +129,3 @@ "chromatic": "^6.17.4", | ||
"vite": "^4.3.9", | ||
"vitest": "^0.29.2", | ||
"zx": "^1.14.1" | ||
"vitest": "^0.29.2" | ||
}, | ||
@@ -133,0 +132,0 @@ "lint-staged": { |
@@ -10,7 +10,12 @@ # Storybook Addon Remix React Router | ||
✨Notice ✨ | ||
The package has been renamed `storybook-addon-remix-react-router`. | ||
The repository has also been renamed, so you are on the right page. | ||
The migration is mandatory to support Storybook 8. | ||
## Recent changes | ||
✅Support for Storybook 8 in version `3.x`. | ||
✅You can now use `useStoryElement` to inject the story at multiple points. | ||
✅The `routing` parameter now accept a string, that will be used both as the route path and the location pathname. | ||
✅ Support for Storybook 8 with `storybook-addon-remix-react-router@3`. | ||
✅ You can now use `useStoryElement` to inject the story at multiple points. | ||
✅ The `routing` parameter now accept a string, that will be used both as the route path and the location pathname. | ||
@@ -17,0 +22,0 @@ ## Getting Started |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
684697
47
205
780