Allow changing router parameters

package.json

@@ -41,13 +41,14 @@
     "eject-ts": "zx scripts/eject-typescript.mjs"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.1",
-    "@babel/core": "^7.12.3",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.5",
-    "@babel/preset-typescript": "^7.13.0",
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.20.5",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.18.6",
     "@storybook/addon-essentials": "^6.4.0",
     "@storybook/react": "^6.4.0",
+    "@types/react": "^17.0.39",
     "@types/react-inspector": "^4.0.2",
     "auto": "^10.3.0",
     "babel-loader": "^8.1.0",
@@ -56,8 +57,8 @@
     "dedent": "^0.7.0",
     "prettier": "^2.3.1",
     "prop-types": "^15.7.2",
-    "react": "^18.0.1",
-    "react-dom": "^18.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "^3.0.2",

src/Panel.tsx

@@ -1,6 +1,6 @@
 import React, {useState} from "react";
 import {AddonPanel} from "@storybook/components";
-import {PanelContent, PanelContentProps} from "./components/PanelContent";
+import {PanelContent, PanelContentProps, RouteParams} from "./components/PanelContent";
 import {API, useChannel} from '@storybook/api';
 import {EVENTS} from "./constants";
 import {STORY_CHANGED} from "@storybook/core-events";
@@ -33,9 +33,17 @@ export const Panel: React.FC<PanelProps> = (props) => {
     setNavigationEvents([]);
   }
 
+  function push(routeParams: RouteParams) {
+    props.api.emit(EVENTS.PUSH, routeParams)
+  }
+
+  function replace(routeParams: RouteParams) {
+    props.api.emit(EVENTS.REPLACE, routeParams)
+  }
+
   return (
     <AddonPanel {...props}>
-      <PanelContent navigationEvents={navigationEvents} onClear={clear} />
+      <PanelContent navigationEvents={navigationEvents} onClear={clear} onPush={push} onReplace={replace} />
     </AddonPanel>
   );
 };

src/components/Navigator.tsx

@@ -0,0 +1,21 @@
+import {useNavigate} from 'react-router-dom';
+import addons from '@storybook/addons';
+import {EVENTS} from '../constants';
+import React from 'react';
+
+export function Navigator(): null {
+  const navigate = useNavigate();
+  const channel = addons.getChannel();
+  channel.on(EVENTS.PUSH, ({pathname, search, hash, state}) => {
+    navigate({
+      pathname, search, hash,
+    }, {state, replace: false});
+  });
+  channel.on(EVENTS.REPLACE, ({pathname, search, hash, state}) => {
+    navigate({
+      pathname, search, hash,
+    }, {state, replace: true});
+  });
+
+  return null;
+}

src/components/PanelContent.tsx

@@ -1,7 +1,7 @@
-import React, {Fragment} from "react";
+import React, {Fragment, useState} from "react";
 import {styled} from '@storybook/theming';
 import {EVENTS} from "../constants";
-import {ActionBar, ScrollArea, ScrollAreaProps} from "@storybook/components";
+import {ActionBar, Form, ScrollArea, ScrollAreaProps} from "@storybook/components";
 import {RouterEventDisplayWrapper} from "./RouterEventDisplayWrapper";
 import {ThemedInspector} from "./ThemedInspector";
 import {InspectorContainer} from "./InspectorContainer";
@@ -11,15 +11,36 @@ import {FCC} from "../fixes";
 export type PanelContentProps = {
   navigationEvents: RouterEvent[];
   onClear: () => void;
+  onPush: (routeParams: RouteParams) => void;
+  onReplace: (routeParams: RouteParams) => void;
 }
 
 export const PatchedScrollArea = ScrollArea as FCC<ScrollAreaProps>;
 
-export const PanelContent: FCC<PanelContentProps> = ({navigationEvents, onClear}) => {
-
+export const PanelContent: FCC<PanelContentProps> = ({navigationEvents, onClear, onPush}) => {
+  const [location, setLocation] = useState('/')
+  function push () {
+    const url = new URL(location, 'http://localhost');
+    onPush({
+      pathname: url.pathname,
+      search: url.search,
+      hash: url.hash,
+      state: {}
+    })
+  }
   return (
     <Fragment>
       <Wrapper title="reactRouterLogger">
+        <Form.Field label='location'>
+          <Form.Input
+            id={`location`}
+            name={`location`}
+            value={location}
+            onChange={(event) => setLocation((event.target as any).value)}
+            size='flex'
+          />
+        </Form.Field>
+        <Form.Button onClick={push}>Push</Form.Button>
         {navigationEvents.map(event => {
           return (
             <RouterEventDisplayWrapper key={event.key}>
@@ -65,3 +86,10 @@ export const Wrapper = styled(({children, className}) => (
   padding: '10px 5px 20px',
 });
 Wrapper.displayName = "Wrapper";
+
+export interface RouteParams {
+  pathname: string,
+  search: string,
+  hash: string,
+  state: Record<string, unknown>
+}

src/components/StoryRouter.tsx

@@ -5,6 +5,7 @@ import {FCC} from "../fixes";
 import {DeepRouteMatchesContext} from "../contexts/DeepRouteMatches";
 import {UNSAFE_RouteContext} from "react-router";
 import {InitialEntry} from "history";
+import {Navigator} from './Navigator';
 
 export type StoryRouterProps = {
   browserPath?: string;
@@ -48,6 +49,7 @@ export const StoryRouter: FCC<StoryRouterProps> = ({ children, browserPath: user
   return (
     <DeepRouteMatchesContext.Provider value={deepRouteMatches}>
       <MemoryRouter initialEntries={[initialEntry]}>
+        <Navigator />
         <Routes>
           <Route path={routePath} element={
             <RouterLogger>

src/constants.ts

@@ -7,4 +7,6 @@ export const EVENTS = {
   NAVIGATION: `${ADDON_ID}/navigation`,
   STORY_LOADED: `${ADDON_ID}/story-loaded`,
   ROUTE_MATCHES: `${ADDON_ID}/route-matches`,
+  PUSH: `${ADDON_ID}/push`,
+  REPLACE: `${ADDON_ID}/replace`,
 } as const;

src/typings.d.ts

@@ -5,7 +5,7 @@ declare module "global";
 
 export type AddonEvents = typeof EVENTS;
 export type AddonEventsKeys = keyof AddonEvents;
-export type NavigationEventsKeys = Exclude<AddonEventsKeys, 'CLEAR'>;
+export type NavigationEventsKeys = Exclude<AddonEventsKeys, 'CLEAR' | 'PUSH' | 'REPLACE'>;
 export type NavigationEventsValues = AddonEvents[NavigationEventsKeys];
 
 export type RouteMatchesData = Array<[RouteMatch['route']['path'], RouteMatch['params']]>;