Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

storybook-addon-remix-react-router

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-addon-remix-react-router - npm Package Compare versions

Comparing version 3.0.0 to 3.0.1

2

dist/index.d.ts
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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc