First draft on GH repo component with simple URL parsing

package.json

@@ -36,6 +36,7 @@
     "nconf": "^0.8.4",
     "nconf-yaml": "^1.0.2",
     "normalize.css": "^5.0.0",
+    "parse-github-url": "^0.3.2",
     "raven": "^0.12.3",
     "react": "^15.4.0",
     "react-dom": "^15.4.0",

src/common/components/repository-input/index.js

@@ -0,0 +1,53 @@
+import React, { Component } from 'react';
+
+import parseGitHubUrl from 'parse-github-url';
+
+export class RepositoryInput extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      message: '',
+      repository: null,
+      repositoryInput: ''
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <label>Repository URL:</label>
+        <input type='text' value={this.state.repositoryInput} onChange={this.onInputChange.bind(this)} />
+        <button onClick={this.onButtonClick.bind(this)}>Parse</button>
+        <div>
+          {this.state.message}
+        </div>
+      </div>
+    );
+  }
+
+  onInputChange(event) {
+    this.setState({
+      repositoryInput: event.target.value
+    });
+  }
+
+  onButtonClick() {
+    const gitHubRepo = parseGitHubUrl(this.state.repositoryInput);
+    const repo = gitHubRepo ? gitHubRepo.repo : null;
+    let message;
+
+    if (repo) {
+      let repoUrl = `https://github.com/${repo}.git`;
+      message = <span>Repository: {repo}, URL: <a href={repoUrl}>{repoUrl}</a></span>;
+    } else {
+      message = 'Invalid repository URL';
+    }
+
+    this.setState({
+      message: message
+    });
+  }
+}
+
+export default RepositoryInput;

src/common/containers/home.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 
 import HelloWorld from '../components/hello-world';
+import RepositoryInput from '../components/repository-input';
 
 import styles from './container.css';
 
@@ -14,6 +15,7 @@ export default class Home extends Component {
           title='Home'
         />
         <HelloWorld />
+        <RepositoryInput />
       </div>
     );
   }