Init from plain-react

trungdq88 · Jun 23, 2016 · f7037d5 · f7037d5
commit f7037d5
Show file tree

Hide file tree

Showing 24 changed files with 870 additions and 0 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,20 @@
+{
+  "extends": "airbnb",
+  "globals": {
+    "describe": true,
+    "it": true,
+    "sinon": true
+  },
+  "rules": {
+    "react/prop-types": 0,
+    "react/no-multi-comp": 0,
+    "no-unused-expressions": 0,
+    "no-alert": 0,
+    "id-length": 0,
+    "camelcase": 0, /* In a perfect world I'd love to enforce this, but in our
+                       not-so-perfect situation we have APIs that return
+                       non-camelcase names. Better fix the API once we've got
+                       more time. */
+    "new-cap": 0
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+.DS_Store
+.idea
+*.iml
+node_modules
+bower_components
+coverage
diff --git a/.nvimrc b/.nvimrc
@@ -0,0 +1,4 @@
+let g:syntastic_javascript_eslint_exec = './node_modules/.bin/eslint'
+" let g:syntastic_javascript_eslint_exec = './node_modules/.bin/eslint'
+let g:neomake_javascript_eslint_exe = './node_modules/.bin/eslint'
+let g:neomake_javascript_enabled_makers = ['eslint']
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js:
+  - "6"
+script:
+  - npm run test-travis
diff --git a/README.md b/README.md
@@ -0,0 +1,39 @@
+[![Build status](https://travis-ci.org/trungdq88/github-explorer.svg?branch=master)](https://travis-ci.org/trungdq88/github-explorer)
+[![Dependencies](https://img.shields.io/david/trungdq88/github-explorer.svg)]()
+[![Dev dependencies](https://img.shields.io/david/dev/trungdq88/github-explorer.svg)]()
+[![Coverage Status](https://coveralls.io/repos/trungdq88/github-explorer/badge.svg?branch=master&service=github)](https://coveralls.io/github/trungdq88/github-explorer?branch=master)
+
+
+# About
+My favorite boilerplate to create static web app with React.
+
+# Initial dev setup
+Make sure you have NodeJS v6 or above. 
+
+```bash  
+npm install 
+npm start 
+``` 
+
+`http://localhost:8123` should now be live with Hot Module Replacement.
+
+# Production build
+
+```bash
+npm install 
+npm run build 
+```
+
+Production code placed at `build`
+
+# Test
+
+```bash
+npm test
+```
+
+Coverage report placed in `./coverage/` directory
+
+# Other commands
+- `npm lint`: linting.
+
diff --git a/bower.json b/bower.json
@@ -0,0 +1,25 @@
+{
+  "name": "plain-react",
+  "version": "0.0.0",
+  "homepage": "https://github.com/trungdq88/plain-react",
+  "authors": [
+    "Dinh Quang Trung <trungdq88@gmail.com>"
+  ],
+  "description": "",
+  "main": "",
+  "moduleType": [
+    "globals"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "bootstrap": "~3.3.5"
+  }
+}
diff --git a/build/assets/glyphicons-halflings-regular.svg b/build/assets/glyphicons-halflings-regular.svg
diff --git a/build/css/app.0.0.0.css b/build/css/app.0.0.0.css
diff --git a/build/index.html b/build/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>App</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <link type="text/css" rel="stylesheet" media="all" href="css/app.0.0.0.css" />
+</head>
+
+<body>
+
+<div id="root"></div>
+<script src="js/app.0.0.0.js" type="text/javascript" charset="utf-8"></script>
+</body>
+
+</html>
diff --git a/build/js/app.0.0.0.js b/build/js/app.0.0.0.js
diff --git a/dev-server.js b/dev-server.js
@@ -0,0 +1,23 @@
+var util = require('util');
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var opn = require('opn');
+var pkg = require('./package.json');
+
+var port = pkg.config.devPort;
+var host = pkg.config.devHost;
+
+var configPath = process.argv[2] || './webpack/config';
+var config = require(configPath);
+
+var server = new WebpackDevServer(
+  webpack(config),
+  config.devServer
+);
+
+server.listen(port, host, function (err) {
+  if (err) { console.log(err); }
+  var url = util.format('http://%s:%d', host, port);
+  console.log('Listening at %s', url);
+  opn(url);
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,4 @@
+<script>
+  // Simply redirect to build directory
+  location.href = 'build';
+</script>
diff --git a/karma.conf.js b/karma.conf.js
@@ -0,0 +1,42 @@
+const webpackConfig = require('./webpack/config.test');
+module.exports = config => {
+  config.set({
+    basePath: '',
+    frameworks: ['source-map-support', 'mocha', 'sinon'],
+    files: [
+      'src/tests.js',
+    ],
+    exclude: [],
+    preprocessors: {
+      'src/tests.js': ['webpack', 'sourcemap'],
+    },
+    reporters: ['mocha', 'coverage', 'coveralls'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: [/* 'Chrome', */'PhantomJS'],
+    singleRun: false,
+    webpack: webpackConfig,
+    webpackMiddleware: {
+      noInfo: true,
+    },
+    plugins: [
+      'karma-chai',
+      'karma-chrome-launcher',
+      'karma-coverage',
+      'karma-coveralls',
+      'karma-mocha',
+      'karma-mocha-reporter',
+      'karma-phantomjs-launcher',
+      'karma-sinon',
+      'karma-source-map-support',
+      'karma-sourcemap-loader',
+      'karma-webpack',
+    ],
+    coverageReporter: {
+      type: 'lcov', // lcov or lcovonly are required for generating lcov.info files
+      dir: 'coverage/',
+    },
+  });
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,99 @@
+{
+  "name": "github-explorer",
+  "version": "0.0.0",
+  "description": "Boilerplate for Admin UI application built on React and Flux",
+  "main": "src/app.jsx",
+  "scripts": {
+    "build": "NODE_ENV=production npm run webpack",
+    "clean": "rimraf $npm_package_config_buildDir && mkdir $npm_package_config_buildDir",
+    "env": "env",
+    "lint": "eslint --ext .jsx ./src && echo No linting errors.",
+    "prebuild": "npm run clean",
+    "pretest": "bower install && npm install && npm run lint",
+    "pretest-travis": "npm install && npm run lint",
+    "start": "NODE_ENV=development node dev-server ./webpack/config",
+    "test": "NODE_ENV=test karma start",
+    "test-travis": "NODE_ENV=test karma start --single-run",
+    "webpack": "webpack --colors --progress --config ./webpack/config"
+  },
+  "repository": {
+    "type": "git+git@github.com:trungdq88/github-explorer.git",
+    "url": "https://github.com/trungdq88/github-explorer"
+  },
+  "author": "Trung Dinh Quang",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/trungdq88/github-explorer/issues"
+  },
+  "config": {
+    "buildDir": "./build",
+    "devHost": "localhost",
+    "devPort": 8763
+  },
+  "homepage": "https://github.com/trungdq88/github-explorer",
+  "babel": {
+    "presets": [
+      "es2015",
+      "react"
+    ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.0.3",
+    "babel-core": "^6.10.4",
+    "babel-eslint": "^6.1.0",
+    "babel-loader": "^6.1.0",
+    "babel-plugin-rewire": "^0.1.8",
+    "babel-polyfill": "^6.9.1",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.1.4",
+    "babel-runtime": "^6.9.2",
+    "chai": "^3.4.1",
+    "classnames": "^2.1.5",
+    "css-loader": "^0.23.1",
+    "eslint": "^2.13.1",
+    "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.9.2",
+    "eslint-plugin-jsx-a11y": "^1.5.3",
+    "eslint-plugin-react": "^5.2.2",
+    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^0.9.0",
+    "glob": "^7.0.5",
+    "imports-loader": "^0.6.4",
+    "istanbul-instrumenter-loader": "^0.2.0",
+    "karma": "^0.13.15",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^1.0.1",
+    "karma-cli": "^1.0.0",
+    "karma-coverage": "^1.0.0",
+    "karma-coveralls": "^1.1.2",
+    "karma-mocha": "^1.0.1",
+    "karma-mocha-reporter": "^2.0.4",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sinon": "^1.0.4",
+    "karma-source-map-support": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.5",
+    "karma-webpack": "^1.5.1",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.1",
+    "lodash": "^4.13.1",
+    "mocha": "^2.5.3",
+    "mocha-loader": "^0.7.1",
+    "opn": "^4.0.2",
+    "phantomjs": "^2.1.7",
+    "phantomjs-prebuilt": "^2.1.7",
+    "postcss-loader": "^0.9.1",
+    "react": "^15.1.0",
+    "react-addons-test-utils": "^15.1.0",
+    "react-dom": "^15.1.0",
+    "react-hot-loader": "^1.3.0",
+    "rimraf": "^2.4.3",
+    "script-loader": "^0.7.0",
+    "sinon": "^1.15.4",
+    "style-loader": "^0.13.0",
+    "template-html-loader": "0.0.3",
+    "url-loader": "^0.5.6",
+    "webpack": "^1.13.1",
+    "webpack-dev-server": "^1.12.0"
+  },
+  "dependencies": {}
+}
diff --git a/src/app.jsx b/src/app.jsx
@@ -0,0 +1,11 @@
+/**
+ * Created by dinhquangtrung on 11/1/15.
+ */
+
+import './index.html';
+import './third-party/bootstrap.js';
+import App from './components/App';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+export default () => (
+  <div>
+    Welcome!
+    <button id="the-bootstrap-btn" className="btn btn-primary">It's bootstrap!</button>
+  </div>
+);
diff --git a/src/components/__tests__/App-test.jsx b/src/components/__tests__/App-test.jsx
@@ -0,0 +1,21 @@
+/**
+ * Created by dinhquangtrung on 11/10/15.
+ */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import TestUtils from 'react-addons-test-utils';
+import App from '../App.jsx';
+import { expect } from 'chai';
+
+describe('App', () => {
+  it('Should have the bootstrap button', () => {
+    // We need an extra <div> to wrap the stateless component
+    const app = TestUtils.renderIntoDocument(
+      <div>
+        <App />
+      </div>
+    );
+    const appElement = ReactDOM.findDOMNode(app);
+    expect(appElement.querySelectorAll('#the-bootstrap-btn').length).to.equal(1);
+  });
+});
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>App</title>
+    <!-- Tell the browser to be responsive to screen width -->
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+    <% if (environment !== 'development') { %>
+    <link type="text/css" rel="stylesheet" media="all" href="css/app.<%= version %>.css" />
+    <% } %>
+    <script>
+        window.CONTAINER_ENV = '<%= environment %>';
+    </script>
+</head>
+
+<body>
+
+<div id="root"></div>
+<script src="js/app.<%= version %>.js" type="text/javascript" charset="utf-8"></script>
+</body>
+
+</html>
diff --git a/src/tests.js b/src/tests.js
@@ -0,0 +1,4 @@
+import 'babel-polyfill';
+
+const context = require.context('.', true, /-test\.jsx?$/);
+context.keys().forEach(context);
diff --git a/src/third-party/bootstrap.js b/src/third-party/bootstrap.js
@@ -0,0 +1,7 @@
+/**
+ * Created by dinhquangtrung on 11/10/15.
+ */
+
+import 'script!../../bower_components/jquery/dist/jquery.js';
+import 'script!../../bower_components/bootstrap/dist/js/bootstrap.js';
+import '../../bower_components/bootstrap/dist/css/bootstrap.css';