chore: improve router stories

Author: streamich

.npmrc

@@ -1,16 +1,18 @@
 {
-  "name": "@mol-fe/mol-fe-react",
-  "version": "1.5.0",
-  "description": "MOL React.js utilities",
+  "name": "libreact",
+  "version": "0.0.1",
+  "description": "React standard library",
   "main": "lib/index.js",
   "keywords": [
     "react",
+    "stdlib",
+    "libreact",
     "utilities",
     "MailOnline"
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/MailOnline/mol-fe-react.git"
+    "url": "https://github.com/MailOnline/libreact.git"
   },
   "dependencies": {
     "react": "15",
@@ -66,7 +68,6 @@
     "test:client": "jest",
     "test:client:coverage": "jest --coverage",
     "test:watch": "jest --watch",
-    "pub": "npm publish --registry http://sinopia.devhsk.mol.dmgt.net:4873",
     "storybook": "start-storybook -p 6007",
     "build-storybook": "build-storybook",
     "start": "npm run storybook"

package.json

@@ -32,26 +32,43 @@ const About = () => (
   </div>
 );
 
-const Topics = ({ match }) => (
-  <div>
-    <h2>Topics</h2>
-    <ul>
-      <li>
-          Rendering with React
-      </li>
-      <li>
-          Components
-      </li>
-      <li>
-          Props v. State
-      </li>
-    </ul>
-  </div>
-);
+const Topics = (props) => {
+  const {match} = props;
+
+  console.log('PROPS', props);
+
+  return (
+    <div>
+      <h2>Topics</h2>
+      <ul>
+        <li>
+          <Link to={`${match}/rendering`}>
+            Rendering with React
+          </Link>
+        </li>
+        <li>
+          <Link to={`${match}/components`}>
+            Components
+          </Link>
+        </li>
+        <li>
+          <Link to={`${match}/props-v-state`}>
+            Props v. State
+          </Link>
+        </li>
+      </ul>
+
+      <Route  comp={Topic}/>
+      <Route exact path={match.url} render={() => (
+        <h3>Please select a topic.</h3>
+      )}/>
+    </div>
+  );
+};
 
-const Topic = ({ match }) => (
+const Topic = ({match}) => (
   <div>
-    <h3>{match.params.topicId}</h3>
+    <h3>{match}</h3>
   </div>
 );
 

src/route/__story__/StoryRouteExample2.tsx

@@ -6,18 +6,24 @@ const StoryRouteTruncateRoute = () =>
   <div>
     <Router route='/api/users/123.json'>
       <Route match='/api'>
+        <div>
+          API
         <Route match='/users'>
+          <div>
+            USERS
           <Route match={/.*/}>{(result) =>
             <pre style={{fontFamily: 'monospace'}}>{JSON.stringify(result, null, 4)}</pre>
           }</Route>
+          </div>
         </Route>
+        </div>
       </Route>
     </Router>
 
     <hr />
 
     <pre style={{fontFamily: 'monospace'}}>{`
-<Router route='/api/users/132.json'>
+<Router route='/api/users/123.json'>
   <Route match='/api'>
     <Route match='/users'>
       <Route match={/.*/}>{(result) =>

src/route/__story__/StoryRouteTruncateRoute.tsx

@@ -0,0 +1,11 @@
+export interface IGoParams {
+  replace?: boolean;
+  title?: string;
+  state?: any;
+}
+
+export type TGo = (url: string, params: IGoParams) => void;
+
+export const go = (url, {replace, title = '', state}: IGoParams = {}) => {
+  history[replace ? 'replaceState' : 'pushState'](state, title || '', url);
+};

src/route/go.ts

@@ -99,9 +99,19 @@ export class Route extends Component<IRouteMatch, any> {
     };
   }
 
+  renderChildren (props) {
+    const {comp, children} = this.props;
+
+    return comp ?
+      h(comp, props) :
+      typeof children === 'function' ?
+        children(props) :
+        children;
+  }
+
   render () {
     return h(Consumer, {name: ns(`route/${this.props.ns}`)}, ({route, onMatch, getMathces, parent}) => {
-      const {children, match} = this.props;
+      const {children, match, preserve} = this.props;
 
       if (getMathces() <= this.props.cnt) {
         const matchResult = this.matcher()(route);
@@ -113,14 +123,19 @@ export class Route extends Component<IRouteMatch, any> {
           // Notify <RouteProvider> that we matched.
           onMatch(this, matchResult);
 
-          if (!this.props.preserve && length) {
-            route = route.substr(length);
+          let newRoute = route;
+
+          if (!preserve && length) {
+            newRoute = newRoute.substr(length);
           }
 
-          return h(Router, {route, parent: matchResult},
-            this.props.comp ?
-              h(this.props.comp) :
-              typeof children === 'function' ? children({matches, route, parent}) : children
+          return h(Router, {route: newRoute, parent: matchResult},
+            this.renderChildren({
+              match: route.substr(0, length),
+              matches,
+              route: newRoute,
+              parent
+            })
           );
         }
       }
@@ -130,14 +145,4 @@ export class Route extends Component<IRouteMatch, any> {
   }
 }
 
-export interface IGoParams {
-  replace?: boolean;
-  title?: string;
-  state?: any;
-}
-
-export type TGo = (url: string, params: IGoParams) => void;
-
-export const go = (url, {replace, title = '', state}: IGoParams = {}) => {
-  history[replace ? 'replaceState' : 'pushState'](state, title || '', url);
-};
+export * from './go';