REFACTOR router into @storybook/router

- ensure we can migrate to a different router without updating all users
- ensure single version
- easier api
- separate from @storybook/component makes it lighter

lib/components/package.json

@@ -20,8 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@reach/router": "^1.2.1",
     "@storybook/addons": "5.0.0-alpha.1",
+    "@storybook/router": "5.0.0-alpha.1",
     "@storybook/client-logger": "5.0.0-alpha.1",
     "@storybook/core-events": "5.0.0-alpha.1",
     "@storybook/theming": "5.0.0-alpha.1",
@@ -32,7 +32,6 @@
     "lodash.throttle": "^4.1.1",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.6.2",
-    "qs": "^6.5.2",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-focus-lock": "^1.17.6",

lib/components/src/index.js

@@ -1,5 +1,3 @@
-import * as Router from './router/router';
-
 export { default as Typography } from './typography/index';
 
 export { default as HighlightButton } from './highlight_button';
@@ -23,4 +21,3 @@ export { Preview } from './preview/preview';
 export { IconButton, Separator, Toolbar } from './preview/toolbar';
 
 export { default as Icons } from './icon/icon';
-export { Router };

lib/components/src/preview/components.js

@@ -1,6 +1,5 @@
 import { styled } from '@storybook/theming';
-
-import { Link } from '../router/router';
+import { Link } from '@storybook/router';
 
 export const Frame = styled.div({
   position: 'absolute',

lib/components/src/preview/preview.js

@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 import Events from '@storybook/core-events';
 import { types } from '@storybook/addons';
 import { Global, css } from '@storybook/theming';
+import { Route } from '@storybook/router';
 
 import { IconButton, Toolbar, Separator } from './toolbar';
 import Icons from '../icon/icon';
-import { Route } from '../router/router';
 import { TabButton, TabBar } from '../tabs/tabs';
 
 import Zoom from './tools/zoom';

lib/components/src/router/router.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@storybook/theming';
-import qs from 'qs';
-import memoize from 'memoizerific';
-
-import { Link, Location, navigate, createHistory, LocationProvider } from '@reach/router';
-
-const memoizedQueryParse = memoize(1000)(s => qs.parse(s, { ignoreQueryPrefix: true }));
-
-const componentParams = memoize(1000)(path => {
-  const result = {};
-
-  if (path) {
-    const [, p1, p2] = path.match(/\/([^/]+)\/([^/]+)?/) || [];
-    if (p1 && p1.match(/(components|info)/)) {
-      Object.assign(result, {
-        viewMode: p1,
-        storyId: p2,
-      });
-    }
-  }
-  return result;
-});
-
-const parseQuery = location => memoizedQueryParse(location.search);
-const stringifyQuery = query => qs.stringify(query, { addQueryPrefix: true, encode: false });
-
-const QueryLink = ({ to, children, ...rest }) => (
-  <Link to={`?path=${to}`} {...rest}>
-    {children}
-  </Link>
-);
-
-QueryLink.propTypes = {
-  to: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-};
-
-const QueryMatch = ({ children, path: targetPath, startsWith }) => (
-  <QueryLocation>
-    {({ path: urlPath, ...rest }) => {
-      let match;
-      if (!urlPath) {
-        return null;
-      }
-      if (startsWith) {
-        match = urlPath.startsWith(targetPath) ? { path: urlPath } : null;
-      }
-      if (typeof targetPath === 'string') {
-        match = urlPath === targetPath ? { path: urlPath } : null;
-      }
-      if (targetPath) {
-        match = urlPath.match(targetPath) ? { path: urlPath } : null;
-      }
-      return children({ match, ...rest });
-    }}
-  </QueryLocation>
-);
-QueryMatch.propTypes = {
-  children: PropTypes.func.isRequired,
-  path: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.instanceOf(RegExp)]).isRequired,
-  startsWith: PropTypes.bool,
-};
-QueryMatch.defaultProps = {
-  startsWith: false,
-};
-
-const queryNavigate = to => {
-  navigate(`?path=${to}`);
-};
-
-const QueryLocation = ({ children }) => (
-  <Location>
-    {({ location }) => {
-      const { path } = memoizedQueryParse(location.search);
-      return children({ path, location, navigate: queryNavigate, ...componentParams(path) });
-    }}
-  </Location>
-);
-QueryLocation.propTypes = {
-  children: PropTypes.func.isRequired,
-};
-
-const ToggleVisibility = styled.div(({ hidden }) =>
-  hidden
-    ? {
-        display: 'none',
-      }
-    : {}
-);
-
-// Renders when path matches
-const Route = ({ path, children, startsWith, hideOnly }) => (
-  <QueryMatch path={path} startsWith={startsWith}>
-    {({ match }) => {
-      if (hideOnly) {
-        return <ToggleVisibility hidden={!match}>{children}</ToggleVisibility>;
-      }
-      return match ? children : null;
-    }}
-  </QueryMatch>
-);
-Route.propTypes = {
-  children: PropTypes.node.isRequired,
-  path: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.instanceOf(RegExp)]).isRequired,
-  startsWith: PropTypes.bool,
-  hideOnly: PropTypes.bool,
-};
-Route.defaultProps = {
-  startsWith: false,
-  hideOnly: false,
-};
-Route.displayName = 'Route';
-
-export {
-  QueryLink as Link,
-  QueryMatch as Match,
-  QueryLocation as Location,
-  Route,
-  parseQuery,
-  stringifyQuery,
-  queryNavigate as navigate,
-  createHistory,
-  LocationProvider,
-};

lib/router/README.md

@@ -0,0 +1,6 @@
+# Storybook Theming
+
+Storybook Theming is a wrapper library for emotion.
+It ensures a single version of emotion is used everywhere.
+
+It also includes some ready to use themes: light (normal) and dark.

lib/router/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@storybook/router",
+  "version": "5.0.0-alpha.1",
+  "description": "Core Storybook Router",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/lib/router",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/theming": "5.0.0-alpha.1",
+    "@reach/router": "^1.2.1",
+    "memoizerific": "^1.11.3",
+    "global": "^4.3.2",
+    "qs": "^6.5.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

lib/router/src/index.ts

@@ -0,0 +1,2 @@
+export * from './utils';
+export * from './router';

lib/router/src/router.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+
+import { Link, Location, navigate, LocationProvider } from '@reach/router';
+import { ToggleVisibility } from './visibility';
+import { queryFromString, storyDataFromString } from './utils';
+
+interface RenderData {
+  path: string;
+  location: object;
+  navigate: (to: string) => void;
+  viewMode?: string;
+  storyId?: string;
+}
+interface MatchingData {
+  match: null | { path: string };
+}
+
+interface QueryLocationType {
+  children: (a: RenderData) => React.ReactNode;
+}
+interface QueryMatchType {
+  path: string;
+  startsWith: boolean;
+  children: (a: MatchingData) => React.ReactNode;
+}
+interface RouteType {
+  path: string;
+  startsWith: boolean;
+  hideOnly: boolean;
+  children: (a: RenderData) => React.ReactNode;
+}
+
+const queryNavigate = (to: string) => {
+  navigate(`?path=${to}`);
+};
+
+const QueryLink = ({ to, children, ...rest }: { to: string; children: React.ReactNode }) => (
+  <Link to={`?path=${to}`} {...rest}>
+    {children}
+  </Link>
+);
+QueryLink.displayName = 'QueryLink';
+
+const QueryLocation = ({ children }: QueryLocationType) => (
+  <Location>
+    {({ location }: { location: { search: string } }) => {
+      const { path } = queryFromString(location.search);
+      const { viewMode, storyId } = storyDataFromString(path);
+      return children({ path, location, navigate: queryNavigate, viewMode, storyId });
+    }}
+  </Location>
+);
+QueryLocation.displayName = 'QueryLocation';
+
+const QueryMatch = ({ children, path: targetPath, startsWith = false }: QueryMatchType) => (
+  <QueryLocation>
+    {({ path: urlPath, ...rest }) => {
+      let match;
+      if (!urlPath) {
+        return null;
+      }
+      if (startsWith) {
+        match = urlPath.startsWith(targetPath) ? { path: urlPath } : null;
+      }
+      if (typeof targetPath === 'string') {
+        match = urlPath === targetPath ? { path: urlPath } : null;
+      }
+      if (targetPath) {
+        match = urlPath.match(targetPath) ? { path: urlPath } : null;
+      }
+      return children({ match, ...rest });
+    }}
+  </QueryLocation>
+);
+QueryMatch.displayName = 'QueryMatch';
+
+const Route = ({ path, children, startsWith = false, hideOnly = false }: RouteType) => (
+  <QueryMatch path={path} startsWith={startsWith}>
+    {({ match }) => {
+      if (hideOnly) {
+        return <ToggleVisibility hidden={!match}>{children}</ToggleVisibility>;
+      }
+      return match ? children : null;
+    }}
+  </QueryMatch>
+);
+Route.displayName = 'Route';
+
+export { QueryLink as Link };
+export { QueryMatch as Match };
+export { QueryLocation as Location };
+export { Route };
+export { queryNavigate as navigate };
+export { LocationProvider };

lib/router/src/typings.d.ts

@@ -0,0 +1,3 @@
+// todo the following packages need definition files or a TS migration
+declare module 'qs';
+declare module '@reach/router';

lib/router/src/utils.ts

@@ -0,0 +1,29 @@
+import qs from 'qs';
+import memoize from 'memoizerific';
+
+interface StoryData {
+  viewMode?: string;
+  storyId?: string;
+}
+
+export const storyDataFromString: (path: string) => StoryData = memoize(1000)((path: string | undefined | null) => {
+  const result: StoryData = {
+    viewMode: undefined,
+    storyId: undefined,
+  };
+
+  if (path) {
+    const [, p1, p2] = path.match(/\/([^/]+)\/([^/]+)?/) || [undefined, undefined, undefined];
+    if (p1 && p1.match(/(components|info)/)) {
+      Object.assign(result, {
+        viewMode: p1,
+        storyId: p2,
+      });
+    }
+  }
+  return result;
+});
+
+export const queryFromString = memoize(1000)(s => qs.parse(s, { ignoreQueryPrefix: true }));
+export const queryFromLocation = (location: { search: string }) => queryFromString(location.search);
+export const stringifyQuery = (query: object) => qs.stringify(query, { addQueryPrefix: true, encode: false });

lib/router/src/visibility.ts

@@ -0,0 +1,9 @@
+import { styled } from '@storybook/theming';
+
+export const ToggleVisibility = styled.div(({ hidden }) =>
+  hidden
+    ? {
+        display: 'none',
+      }
+    : {}
+);

lib/router/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}

lib/ui/package.json

@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@reach/router": "^1.2.1",
+    "@storybook/router": "5.0.0-alpha.1",
     "@storybook/addons": "5.0.0-alpha.1",
     "@storybook/client-logger": "5.0.0-alpha.1",
     "@storybook/components": "5.0.0-alpha.1",

lib/ui/src/app.js

@@ -4,7 +4,7 @@ import { styled } from '@storybook/theming';
 import ResizeDetector from 'react-resize-detector';
 import memoize from 'memoizerific';
 
-import { Router } from '@storybook/components';
+import { Route } from '@storybook/router';
 
 import { Mobile } from './components/layout/mobile';
 import { Desktop } from './components/layout/desktop';
@@ -41,9 +41,9 @@ const createProps = memoize(1)(() => ({
       render: () => <SettingsPages />,
       // eslint-disable-next-line react/prop-types
       route: ({ children }) => (
-        <Router.Route path="/settings" startsWith>
+        <Route path="/settings" startsWith>
           {children}
-        </Router.Route>
+        </Route>
       ),
     },
   ],

lib/ui/src/components/nav/bar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { styled } from '@storybook/theming';
 import PropTypes from 'prop-types';
 
-import { Router } from '@storybook/components';
+import { Link } from '@storybook/router';
 
 export const Bar = styled.ul(({ theme }) => ({
   display: 'flex',
@@ -36,7 +36,7 @@ const BarLi = styled.li(({ active, theme }) => ({
 
 export const BarItem = ({ path, children, active }) => (
   <BarLi active={active}>
-    <Router.Link to={path}>{children}</Router.Link>
+    <Link.Link to={path}>{children}</Link.Link>
   </BarLi>
 );
 BarItem.propTypes = {

lib/ui/src/components/nav/explorer.js

@@ -2,12 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@storybook/theming';
 
-import { Explorer, Router } from '@storybook/components';
+import { Explorer } from '@storybook/components';
+import { Location, Link } from '@storybook/router';
 
 const strip = (href, viewMode = 'components') => href.replace('#!', `/${viewMode}/`);
 
 const StyledLink = React.memo(
-  styled(Router.Link)({
+  styled(Link)({
     display: 'flex',
     alignItems: 'center',
     color: 'inherit',
@@ -16,13 +17,13 @@ const StyledLink = React.memo(
 );
 StyledLink.displayName = 'StyledLink';
 const LeafLink = React.memo(({ href, children, ...rest }) => (
-  <Router.Location>
+  <Location>
     {({ viewMode }) => (
       <StyledLink to={strip(href, viewMode)} {...rest}>
         {children}
       </StyledLink>
     )}
-  </Router.Location>
+  </Location>
 ));
 
 LeafLink.propTypes = {

lib/ui/src/components/nav/notifications.js

@@ -1,5 +1,5 @@
 import { styled } from '@storybook/theming';
-import { Router } from '@storybook/components';
+import { Link } from '@storybook/router';
 
 const levelStyle = ({ level, theme }) => {
   switch (level) {
@@ -36,7 +36,7 @@ const baseStyle = {
   userSelect: 'none',
 };
 
-export const NotificationLink = styled(Router.Link)(levelStyle, baseStyle);
+export const NotificationLink = styled(Link)(levelStyle, baseStyle);
 export const Notification = styled.div(levelStyle, baseStyle);
 
 export const NotificationText = styled.span({ flex: 1 });

lib/ui/src/core/url.js

@@ -1,4 +1,4 @@
-import { Router } from '@storybook/components';
+import { queryFromLocation } from '@storybook/router';
 import toId from '../libs/id';
 
 // Initialize the state based on the URL.
@@ -12,7 +12,7 @@ import toId from '../libs/id';
 //   We also support legacy URLs from storybook <5
 const initialUrlSupport = ({ location, path }, navigate) => {
   const addition = {};
-  const query = Router.parseQuery(location);
+  const query = queryFromLocation(location);
   let selectedPanel;
 
   const {

lib/ui/src/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 
-import { Router } from '@storybook/components';
+import { Location, LocationProvider } from '@storybook/router';
 import { ThemeProvider } from '@storybook/theming';
 import { Provider as ManagerProvider } from './core/context';
 
@@ -10,7 +10,6 @@ import App from './app';
 
 import Provider from './provider';
 
-const { Location, LocationProvider } = Router;
 ThemeProvider.displayName = 'ThemeProvider';
 
 const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;

lib/ui/src/settings/about_page.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Router } from '@storybook/components';
+import { Route } from '@storybook/router';
 
 import { Consumer } from '../core/context';
 import AboutScreen from './about';
@@ -27,7 +27,7 @@ NotificationClearer.propTypes = {
 };
 
 export default () => (
-  <Router.Route path="about">
+  <Route path="about">
     <Consumer>
       {({ api }) => (
         <NotificationClearer api={api} notificationId="update">
@@ -35,5 +35,5 @@ export default () => (
         </NotificationClearer>
       )}
     </Consumer>
-  </Router.Route>
+  </Route>
 );

lib/ui/src/settings/shortcuts.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
-import { Icons, Router } from '@storybook/components';
+import { Icons } from '@storybook/components';
+import { Route } from '@storybook/router';
 import { setAll, setItem } from './persist';
 import {
   defaultShortcutSets,
@@ -223,7 +224,7 @@ class ShortcutsPage extends Component {
   render() {
     const layout = this.renderKeyForm();
     return (
-      <Router.Route path="shortcuts">
+      <Route path="shortcuts">
         <Container>
           <Wrapper>
             <Title>
@@ -250,7 +251,7 @@ class ShortcutsPage extends Component {
             </Footer>
           </Wrapper>
         </Container>
-      </Router.Route>
+      </Route>
     );
   }
 }