Merge pull request #43 from yeutech-lab/dev

feat(Link): allow a different engine to navigate than react-router us…

package.json

@@ -170,8 +170,8 @@
     "lint-staged"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.8.3",
-    "@babel/core": "^7.8.3",
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.8.4",
     "@babel/plugin-external-helpers": "^7.8.3",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
@@ -184,53 +184,52 @@
     "@babel/plugin-transform-react-constant-elements": "^7.8.3",
     "@babel/plugin-transform-react-inline-elements": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-env": "^7.8.4",
     "@babel/preset-react": "^7.8.3",
-    "@rollup-umd/documentation": "^2.0.11",
+    "@rollup-umd/documentation": "^2.0.13",
     "@rollup-umd/rollup": "^1.1.1",
     "@rollup-umd/ncu": "^1.0.9",
-    "@semantic-release/changelog": "^3.0.6",
-    "@semantic-release/git": "^8.0.0",
-    "@semantic-release/github": "^6.0.1",
-    "@semantic-release/npm": "^6.0.0",
+    "@semantic-release/changelog": "^5.0.0",
+    "@semantic-release/git": "^9.0.0",
+    "@semantic-release/github": "^7.0.3",
+    "@semantic-release/npm": "^7.0.2",
     "@yeutech-lab/documentation": "^2.0.2",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
+    "babel-jest": "^25.1.0",
     "babel-loader": "^8.0.6",
     "babel-merge": "^3.0.0",
     "babel-plugin-add-module-exports": "^1.0.2",
     "babel-plugin-array-includes": "^2.0.3",
     "babel-plugin-dynamic-import-node": "^2.3.0",
-    "babel-plugin-inline-react-svg": "^1.1.0",
+    "babel-plugin-inline-react-svg": "^1.1.1",
     "babel-plugin-react-transform": "^3.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "cz-conventional-changelog": "^3.0.2",
+    "cz-conventional-changelog": "^3.1.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
-    "eslint-plugin-import": "^2.20.0",
+    "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-react": "^7.18.3",
     "exports-loader": "^0.7.0",
     "istanbul-api": "^3.0.0",
     "istanbul-reports": "^3.0.0",
-    "jest-cli": "^24.9.0",
+    "jest-cli": "^25.1.0",
     "jest-sonar-reporter": "^2.0.0",
-    "lint-staged": "^9.5.0",
+    "lint-staged": "^10.0.7",
     "pre-commit": "^1.2.2",
     "raf": "^3.4.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-router": "^5.1.2",
-    "react-router-dom": "^4.2.2",
     "react-test-renderer": "^16.12.0",
-    "semantic-release": "^16.0.1",
+    "semantic-release": "^17.0.2",
     "toctoc": "^0.3.2",
     "webpack": "^4.41.5"
   },
   "dependencies": {
-    "@babel/runtime": "^7.8.3",
+    "@babel/runtime": "^7.8.4",
     "@yeutech-lab/tree-operations": "^1.0.2",
     "core-js": "^3.6.4",
     "deepmerge": "^4.2.2",
@@ -243,7 +242,7 @@
   "peerDependencies": {
     "react": "*",
     "react-dom": "*",
-    "react-router-dom": "*"
+    "react-router": "*"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -356,7 +355,7 @@
     "coverageThreshold": {
       "global": {
         "statements": 95,
-        "branches": 94,
+        "branches": 93,
         "functions": 91,
         "lines": 93
       }

src/Link.js → src/Link/Link.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withRouter } from 'react-router-dom';
-import makeRoutes from './makeRoutes';
-import matchParamsPath from './matchParamsPath';
+import makeRoutes from '../makeRoutes';
+import matchParamsPath from '../matchParamsPath';
 
 /**
  * @name Link
@@ -37,8 +36,44 @@ import matchParamsPath from './matchParamsPath';
  * );
  * ```
  *
+ * @example
+ *
+ * Then call that link in your application:
+ *
+ * ```javascript
+ * <Link to={pages.home.path}>Home</Link>
+ * ```
+ *
+ * @example
+ * It can work with any navigation engine, if you don't want the Link to detect react-router from the context, just pass the props `push` with the navigate function:
+ * If you want to preload the page, `to` and `routesMap` (already created in the application Link.js) are necessary
+ * ```javascript
+ * <Link to={pages.home.path} push={() => navigate('home')} />
+ * ```
+ *
+ * @example
+ *
+ * It can also work with react-native, but since they use `onPress` massively instead of `onClick`, you need to remap the props to `onClick` before:
+ *
+ * ```javascript
+ * // remap onClick to onPress
+ * const Button = ({
+ *  t,
+ *  onClick,
+ *  onPress,
+ *  ...rest
+ * }) => (
+ *  <ButtonDefault
+ *    mode="contained"
+ *    onPress={onClick || onPress}
+ *    {...rest}
+ *  />
+ * );
+ * ```
+ *
+ * Then pass this component, for example `<Link tag={Button} />`
  */
-class Link extends React.Component {
+export default class Link extends React.Component {
   static propTypes = {
     /** The path the link will go to */
     to: PropTypes.string.isRequired,
@@ -99,11 +134,15 @@ class Link extends React.Component {
      */
     ContextConsumer: PropTypes.any,
     /** @ignore */
-    match: PropTypes.object.isRequired,
+    match: PropTypes.object,
     /** @ignore */
-    location: PropTypes.object.isRequired,
+    location: PropTypes.object,
     /** @ignore */
-    history: PropTypes.object.isRequired,
+    history: PropTypes.object,
+    /** If not set, it will try to use react router context, otherwise, it will skip react router and use push for triggering the page change
+     * This allow to use the link and it's features without react router
+     */
+    push: PropTypes.func,
   };
 
   static defaultProps = {
@@ -120,6 +159,10 @@ class Link extends React.Component {
     routes: [],
     routesMap: new Map(),
     ContextConsumer: null,
+    match: undefined,
+    location: undefined,
+    history: undefined,
+    push: undefined,
   };
 
   // eslint-disable-next-line camelcase
@@ -245,6 +288,7 @@ class Link extends React.Component {
   changePage = (e, path) => {
     const {
       history,
+      push,
       delay,
       onPageChange,
       onBeforePageChange,
@@ -258,7 +302,11 @@ class Link extends React.Component {
       if (onPageChange) {
         onPageChange(e);
       }
-      history.push(path);
+      if (push) {
+        push(path);
+      } else {
+        history.push(path);
+      }
     }, ms);
   };
 
@@ -308,5 +356,3 @@ class Link extends React.Component {
     );
   }
 }
-
-export default withRouter(Link);

src/Link/index.js

@@ -0,0 +1,7 @@
+import { createElement } from 'react';
+import { withRouter } from 'react-router';
+import Link from './Link';
+
+export default ({ push, ...rest }) => push
+  ? createElement(Link, { ...rest, push })
+  : createElement(withRouter(Link), rest);

src/tests/Link.test.js → src/Link/tests/Link.test.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { MemoryRouter } from 'react-router-dom';
-import getRoutesMap from '../getRoutesMap';
-import Link from '../Link';
+import { withRouter, MemoryRouter } from 'react-router';
+import getRoutesMap from '../../getRoutesMap';
+import RRLink from '../Link';
 
+const Link = withRouter(RRLink);
 // this will mock the loadable component
 const LoadableComponent = () => <div />;
 LoadableComponent.preload = () => ({ then: (fn) => fn && fn() });

src/makeRoutes.js

@@ -1,4 +1,4 @@
-import { Redirect, Route } from 'react-router-dom';
+import { Redirect, Route } from 'react-router';
 import React from 'react';
 
 /**

styleguide/styleguide.ext.json

@@ -33,8 +33,7 @@
     {
       "name": "UI Component",
       "components": [
-        "src/**/[A-Z]*.js",
-        "src/**/[A-Z]*/index.js"
+        "src/**/[A-Z]*.js"
       ]
     },
     {