UI: Migrate router to react-router

examples/official-storybook/package.json

@@ -35,6 +35,7 @@
     "@storybook/jest": "0.0.0-alpha.5",
     "@storybook/node-logger": "6.4.0-beta.19",
     "@storybook/react": "6.4.0-beta.19",
+    "@storybook/router": "6.4.0-beta.19",
     "@storybook/source-loader": "6.4.0-beta.19",
     "@storybook/testing-library": "0.0.0-alpha.3",
     "@storybook/theming": "6.4.0-beta.19",

lib/api/package.json

@@ -38,21 +38,18 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@reach/router": "^1.3.4",
     "@storybook/channels": "6.4.0-beta.19",
     "@storybook/client-logger": "6.4.0-beta.19",
     "@storybook/core-events": "6.4.0-beta.19",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/router": "6.4.0-beta.19",
     "@storybook/semver": "^7.3.2",
     "@storybook/theming": "6.4.0-beta.19",
-    "@types/reach__router": "^1.3.7",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
     "lodash": "^4.17.20",
     "memoizerific": "^1.11.3",
-    "qs": "^6.10.0",
     "regenerator-runtime": "^0.13.7",
     "store2": "^2.12.0",
     "telejson": "^5.3.2",

lib/api/src/index.tsx

@@ -18,7 +18,7 @@ import {
   SHARED_STATE_SET,
   SET_STORIES,
 } from '@storybook/core-events';
-import { RenderData as RouterData } from '@storybook/router';
+import { RouterData } from '@storybook/router';
 import { Listener } from '@storybook/channels';
 
 import { createContext } from './context';

lib/api/src/modules/addons.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { WindowLocation } from '@reach/router';
+import type { RenderData } from '@storybook/router';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 
@@ -35,13 +35,13 @@ export interface RenderOptions {
 export interface RouteOptions {
   storyId: string;
   viewMode: ViewMode;
-  location: WindowLocation;
+  location: RenderData['location'];
   path: string;
 }
 export interface MatchOptions {
   storyId: string;
   viewMode: ViewMode;
-  location: WindowLocation;
+  location: RenderData['location'];
   path: string;
 }
 

lib/api/src/modules/url.ts

@@ -1,12 +1,11 @@
-import { navigate as navigateRouter, NavigateOptions } from '@reach/router';
 import { once } from '@storybook/client-logger';
 import {
   NAVIGATE_URL,
   STORY_ARGS_UPDATED,
   SET_CURRENT_STORY,
   GLOBALS_UPDATED,
 } from '@storybook/core-events';
-import { queryFromLocation, navigate as queryNavigate, buildArgsParam } from '@storybook/router';
+import { queryFromLocation, buildArgsParam, NavigateOptions } from '@storybook/router';
 import { toId, sanitize } from '@storybook/csf';
 import deepEqual from 'fast-deep-equal';
 import global from 'global';
@@ -28,15 +27,6 @@ const parseBoolean = (value: string) => {
   return undefined;
 };
 
-const navigateTo = (path: string, queryParams: Record<string, string> = {}, options = {}) => {
-  const params = Object.entries(queryParams)
-    .filter(([, v]) => v)
-    .sort(([a], [b]) => (a < b ? -1 : 1))
-    .map(([k, v]) => `${k}=${v}`);
-  const to = [path, ...params].join('&');
-  return queryNavigate(to, options);
-};
-
 // Initialize the state based on the URL.
 // NOTE:
 //   Although we don't change the URL when you change the state, we do support setting initial state
@@ -130,7 +120,7 @@ export interface QueryParams {
 }
 
 export interface SubAPI {
-  navigateUrl: (url: string, options: NavigateOptions<{}>) => void;
+  navigateUrl: (url: string, options: NavigateOptions) => void;
   getQueryParam: (key: string) => string | undefined;
   getUrlState: () => {
     queryParams: QueryParams;
@@ -143,6 +133,15 @@ export interface SubAPI {
 }
 
 export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...rest }) => {
+  const navigateTo = (path: string, queryParams: Record<string, string> = {}, options = {}) => {
+    const params = Object.entries(queryParams)
+      .filter(([, v]) => v)
+      .sort(([a], [b]) => (a < b ? -1 : 1))
+      .map(([k, v]) => `${k}=${v}`);
+    const to = [path, ...params].join('&');
+    return navigate(to, options);
+  };
+
   const api: SubAPI = {
     getQueryParam(key) {
       const { customQueryParams } = store.getState();
@@ -167,8 +166,8 @@ export const init: ModuleFn = ({ store, navigate, state, provider, fullAPI, ...r
       const equal = deepEqual(customQueryParams, update);
       if (!equal) store.setState({ customQueryParams: update });
     },
-    navigateUrl(url: string, options: NavigateOptions<{}>) {
-      navigateRouter(url, options);
+    navigateUrl(url, options) {
+      navigate(url, { ...options, plain: true });
     },
   };
 

lib/api/src/tests/url.test.js

@@ -1,12 +1,10 @@
 import qs from 'qs';
 
 import { SET_CURRENT_STORY, GLOBALS_UPDATED } from '@storybook/core-events';
-import { navigate as reachNavigate } from '@reach/router';
 
 import { init as initURL } from '../modules/url';
 
 jest.mock('@storybook/client-logger');
-jest.mock('@reach/router');
 jest.useFakeTimers();
 
 describe('initial state', () => {
@@ -193,7 +191,9 @@ describe('initModule', () => {
   it('updates args param on SET_CURRENT_STORY', async () => {
     store.setState(storyState('test--story'));
 
-    const { api, init } = initURL({ store, state: { location: {} }, fullAPI });
+    const navigate = jest.fn();
+
+    const { api, init } = initURL({ store, state: { location: {} }, navigate, fullAPI });
     Object.assign(fullAPI, api, {
       getCurrentStoryData: () => ({
         args: { a: 1, b: 2 },
@@ -204,8 +204,8 @@ describe('initModule', () => {
     init();
 
     fullAPI.emit(SET_CURRENT_STORY);
-    expect(reachNavigate).toHaveBeenCalledWith(
-      '/?path=/story/test--story&args=b:2',
+    expect(navigate).toHaveBeenCalledWith(
+      '/story/test--story&args=b:2',
       expect.objectContaining({ replace: true })
     );
     expect(store.getState().customQueryParams).toEqual({ args: 'b:2' });
@@ -214,36 +214,39 @@ describe('initModule', () => {
   it('updates globals param on GLOBALS_UPDATED', async () => {
     store.setState(storyState('test--story'));
 
-    const { api, init } = initURL({ store, state: { location: {} }, fullAPI });
+    const navigate = jest.fn();
+
+    const { api, init } = initURL({ store, state: { location: {} }, navigate, fullAPI });
     Object.assign(fullAPI, api);
     init();
 
     fullAPI.emit(GLOBALS_UPDATED, { globals: { a: 2 }, initialGlobals: { a: 1, b: 1 } });
-    expect(reachNavigate).toHaveBeenCalledWith(
-      '/?path=/story/test--story&globals=a:2;b:!undefined',
+    expect(navigate).toHaveBeenCalledWith(
+      '/story/test--story&globals=a:2;b:!undefined',
       expect.objectContaining({ replace: true })
     );
     expect(store.getState().customQueryParams).toEqual({ globals: 'a:2;b:!undefined' });
   });
 
   it('adds url params alphabetically', async () => {
     store.setState({ ...storyState('test--story'), customQueryParams: { full: 1 } });
+    const navigate = jest.fn();
 
-    const { api, init } = initURL({ store, state: { location: {} }, fullAPI });
+    const { api, init } = initURL({ store, state: { location: {} }, navigate, fullAPI });
     Object.assign(fullAPI, api, {
       getCurrentStoryData: () => ({ args: { a: 1 }, isLeaf: true }),
     });
     init();
 
     fullAPI.emit(GLOBALS_UPDATED, { globals: { g: 2 } });
-    expect(reachNavigate).toHaveBeenCalledWith(
-      '/?path=/story/test--story&full=1&globals=g:2',
+    expect(navigate).toHaveBeenCalledWith(
+      '/story/test--story&full=1&globals=g:2',
       expect.objectContaining({ replace: true })
     );
 
     fullAPI.emit(SET_CURRENT_STORY);
-    expect(reachNavigate).toHaveBeenCalledWith(
-      '/?path=/story/test--story&args=a:1&full=1&globals=g:2',
+    expect(navigate).toHaveBeenCalledWith(
+      '/story/test--story&args=a:1&full=1&globals=g:2',
       expect.objectContaining({ replace: true })
     );
   });

lib/core-common/src/types.ts

@@ -261,10 +261,13 @@ export type Preset =
  */
 export type Entry = string;
 
-type StorybookRefs = Record<string, {
-  title: string;
-  url: string;
-}>;
+type StorybookRefs = Record<
+  string,
+  {
+    title: string;
+    url: string;
+  }
+>;
 
 /**
  * The interface for Storybook configuration in `main.ts` files.
@@ -337,7 +340,7 @@ export interface StorybookConfig {
   /**
    * References external Storybooks
    */
-  refs?: StorybookRefs | ((config: Configuration, options: Options) => StorybookRefs)
+  refs?: StorybookRefs | ((config: Configuration, options: Options) => StorybookRefs);
 
   /**
    * Modify or return a custom Webpack config.

lib/router/README.md

@@ -1,5 +1,5 @@
 # Storybook Router
 
-Storybook Router is a wrapper library for reach/router.
+Storybook Router is a wrapper library for react-router.
 It ensures a single version of the router is used everywhere.
 It also includes some ready to use utils to read the path, query, viewMode and storyId from location.

lib/router/package.json

@@ -40,15 +40,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@reach/router": "^1.3.4",
     "@storybook/client-logger": "6.4.0-beta.19",
-    "@types/reach__router": "^1.3.7",
     "core-js": "^3.8.2",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
+    "history": "^5.0.1",
     "lodash": "^4.17.20",
     "memoizerific": "^1.11.3",
     "qs": "^6.10.0",
+    "react-router": "^6.0.0-beta.7",
+    "react-router-dom": "^6.0.0-beta.7",
     "ts-dedent": "^2.0.0"
   },
   "peerDependencies": {

lib/router/src/router.tsx

@@ -1,17 +1,14 @@
 import global from 'global';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback } from 'react';
 
 import {
   Link,
-  Location,
-  navigate,
-  LocationProvider,
-  RouteComponentProps,
-  LocationContext,
-  NavigateFn,
+  BrowserRouter,
+  useNavigate,
+  useLocation,
   NavigateOptions,
-  History,
-} from '@reach/router';
+  Router,
+} from 'react-router-dom';
 import { ToggleVisibility } from './visibility';
 import { queryFromString, parsePath, getMatch, StoryData } from './utils';
 
@@ -22,9 +19,12 @@ interface Other extends StoryData {
   singleStory?: boolean;
 }
 
-export type RenderData = Pick<LocationContext, 'location'> &
-  Partial<Pick<LocationContext, 'navigate'>> &
-  Other;
+export type RouterData = {
+  location: Partial<Location>;
+  navigate: ReturnType<typeof useQueryNavigate>;
+} & Other;
+
+export type RenderData = Pick<RouterData, 'location'> & Other;
 
 interface MatchingData {
   match: null | { path: string };
@@ -52,8 +52,26 @@ export interface QueryLinkProps {
 
 const getBase = () => `${document.location.pathname}?`;
 
-const queryNavigate: NavigateFn = (to: string | number, options?: NavigateOptions<{}>) =>
-  typeof to === 'number' ? navigate(to) : navigate(`${getBase()}path=${to}`, options);
+type ExpandedNavigateOptions = NavigateOptions & { plain?: boolean };
+
+// const queryNavigate: NavigateFn = (to: string | number, options?: NavigateOptions<{}>) =>
+//   typeof to === 'number' ? navigate(to) : navigate(`${getBase()}path=${to}`, options);
+
+const useQueryNavigate = () => {
+  const navigate = useNavigate();
+
+  return useCallback((to: string | number, options?: ExpandedNavigateOptions) => {
+    if (typeof to === 'string') {
+      const target = options?.plain ? to : `?path=${to}`;
+      return navigate(target, options);
+    }
+    if (typeof to === 'number') {
+      return navigate(to);
+    }
+
+    return undefined;
+  }, []);
+};
 
 // A component that will navigate to a new location/path when clicked
 const QueryLink = ({ to, children, ...rest }: QueryLinkProps) => (
@@ -65,24 +83,24 @@ QueryLink.displayName = 'QueryLink';
 
 // A render-prop component where children is called with a location
 // and will be called whenever it changes when it changes
-const QueryLocation = ({ children }: QueryLocationProps) => (
-  <Location>
-    {({ location }: RouteComponentProps): ReactNode => {
-      const { path, singleStory } = queryFromString(location.search);
-      const { viewMode, storyId, refId } = parsePath(path);
+const QueryLocation = ({ children }: QueryLocationProps) => {
+  const location = useLocation();
+  const { path, singleStory } = queryFromString(location.search);
+  const { viewMode, storyId, refId } = parsePath(path);
 
-      return children({
+  return (
+    <>
+      {children({
         path,
         location,
-        navigate: queryNavigate,
         viewMode,
         storyId,
         refId,
         singleStory: singleStory === 'true',
-      });
-    }}
-  </Location>
-);
+      })}
+    </>
+  );
+};
 QueryLocation.displayName = 'QueryLocation';
 
 // A render-prop component for rendering when a certain path is hit.
@@ -117,6 +135,10 @@ export { QueryLink as Link };
 export { QueryMatch as Match };
 export { QueryLocation as Location };
 export { Route };
-export { queryNavigate as navigate };
-export { LocationProvider };
-export type { History };
+export { useQueryNavigate as useNavigate };
+export { BrowserRouter as LocationProvider };
+export { Router as BaseLocationProvider };
+export { useNavigate as usePlainNavigate };
+
+// eslint-disable-next-line no-undef
+export type { ExpandedNavigateOptions as NavigateOptions };

lib/router/src/utils.ts

@@ -139,7 +139,7 @@ interface Query {
 export const queryFromString = memoize(1000)(
   (s: string): Query => qs.parse(s, { ignoreQueryPrefix: true })
 );
-export const queryFromLocation = (location: { search: string }) => queryFromString(location.search);
+export const queryFromLocation = (location: Partial<Location>) => queryFromString(location.search);
 export const stringifyQuery = (query: Query) =>
   qs.stringify(query, { addQueryPrefix: true, encode: false });