feat(react): add ConnectedUIRouter utility component

Author: elboman

package.json

@@ -6,25 +6,32 @@
   "typings": "lib/index.d.ts",
   "jsnext:main": "lib-esm/index.js",
   "scripts": {
-    "prettier":
-      "prettier --single-quote --trailing-comma es5 --write '{core,react,__{tests,mocks}__}/**/*.{js,ts}'",
+    "start": "cross-env NODE_ENV=development webpack-dev-server --host 0.0.0.0 --port 8000 --config ./example/webpack.config.js --history-api-fallback --content-base example",
+    "prettier": "prettier --single-quote --trailing-comma es5 --write '{core,react,__{tests,mocks}__}/**/*.{js,ts}'",
     "clean": "shx rm -rf _bundles lib lib-esm build",
-    "build":
-      "npm run clean && tsc && tsc -m es6 --outDir lib-esm && NODE_ENV=production webpack"
+    "build": "npm run clean && tsc && tsc -m es6 --outDir lib-esm && NODE_ENV=production webpack"
   },
   "author": "Marco Botto",
   "license": "MIT",
   "devDependencies": {
+    "@types/react": "^16.0.5",
+    "@types/react-dom": "^15.5.4",
     "@uirouter/core": "^5.0.6",
+    "@uirouter/react": "^0.5.2",
     "awesome-typescript-loader": "^3.2.3",
+    "cross-env": "^5.0.5",
     "jest": "^21.1.0",
     "prettier": "^1.7.0",
+    "prop-types": "^15.5.10",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
     "redux": "^3.7.2",
     "shelljs": "^0.7.8",
     "shx": "^0.2.2",
     "ts-jest": "^21.0.1",
     "typescript": "^2.5.2",
-    "webpack": "^3.6.0"
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.8.2"
   },
   "dependencies": {}
 }

react/ConnectedUIRouter.tsx

@@ -0,0 +1,32 @@
+import { servicesPlugin, UIRouter, UIRouterProps } from '@uirouter/react';
+import * as PropTypes from 'prop-types';
+import * as React from 'react';
+
+import { createReduxPlugin } from '../core';
+
+export class ConnectedUIRouter extends React.Component<UIRouterProps, any> {
+  reduxPlugin;
+  router;
+
+  static contextTypes = {
+    store: PropTypes.object,
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.reduxPlugin = createReduxPlugin(context.store);
+    this.router = props.router;
+    this.router.plugin(servicesPlugin);
+    props.plugins.forEach(plugin => this.router.plugin(plugin));
+    this.router.plugin(this.reduxPlugin);
+    if (props.config) props.config(this.router);
+    (props.states || []).forEach(state =>
+      this.router.stateRegistry.register(state)
+    );
+  }
+
+  render() {
+    const { children } = this.props;
+    return <UIRouter router={this.router}>{children}</UIRouter>;
+  }
+}

react/index.ts

@@ -0,0 +1 @@
+export * from './ConnectedUIRouter';