Optylon · guilhermemdasilva · Nov 18, 2017
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,7 @@
+{
+  "presets": [
+      "es2015",
+      "stage-0",
+      "react"
+  ]
+}
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,19 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.js]
+trim_trailing_whitespace = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+insert_final_newline = true
+max_line_length = 100
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,87 @@
+module.exports = {
+  root: true,
+  globals: {
+    preval: false,
+  },
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+    jest: true,
+  },
+  extends: ['airbnb', 'plugin:import/recommended'],
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 7,
+    sourceType: 'module',
+  },
+  plugins: ['babel', 'import', 'prettier'],
+  rules: {
+    'jsx-a11y/heading-has-content' : 'off',
+    'linebreak-style': 'off', // Problem with Windows.
+    'arrow-body-style': 'off',
+    'arrow-parens': 'off', // Incompatible with prettier
+    'indent': 'off', // Incompatible with prettier
+    'space-before-function-paren': 'off', // Incompatible with prettier
+    'no-mixed-operators': 'off', // Incompatible with prettier
+    'consistent-this': ['error', 'self'],
+    'max-len': ['error', 100, 2, { ignoreUrls: true, },], // airbnb is allowing some edge cases
+    'no-console': ['error', { allow: ['warn', 'error'] }], // airbnb is using warn
+    'no-alert': 'error', // airbnb is using warn
+    'no-param-reassign': 'off',
+    'no-prototype-builtins': 'off', // airbnb use error
+    'object-curly-spacing': 'off', // use babel plugin rule
+    'no-restricted-properties': 'off', // To remove once react-docgen support ** operator.
+
+    'babel/object-curly-spacing': ['error', 'always'],
+
+    'import/unambiguous': 'off', // scripts
+    'import/namespace': ['error', { allowComputed: true }],
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+    'import/no-named-as-default': 'off',
+    'jsx-a11y/href-no-hash': 'off',
+    'jsx-a11y/no-static-element-interactions': 'off',
+    'jsx-a11y/no-noninteractive-tabindex': 'off',
+
+    'react/jsx-indent': 'off', // Incompatible with prettier
+    'react/jsx-closing-bracket-location': 'off', // Incompatible with prettier
+    'react/jsx-wrap-multilines': 'off', // Incompatible with prettier
+    'react/jsx-indent-props': 'off', // Incompatible with prettier
+    'react/jsx-handler-names': [
+      'error',
+      {
+        // airbnb is disabling this rule
+        eventHandlerPrefix: 'handle',
+        eventHandlerPropPrefix: 'on',
+      },
+    ],
+    'react/require-default-props': 'off', // airbnb use error
+    'react/forbid-prop-types': 'off', // airbnb use error
+    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }], // airbnb is using .jsx
+    'react/no-danger': 'error', // airbnb is using warn
+    'react/no-direct-mutation-state': 'error', // airbnb is disabling this rule
+    'react/no-find-dom-node': 'off', // I don't know
+    'react/sort-prop-types': 'error', // airbnb do nothing here.
+    'react/sort-comp': [2, {
+      order: [
+        'type-annotations',
+        'static-methods',
+        'lifecycle',
+        'everything-else',
+        '/^render.+$/',
+        'render',
+      ],
+    },],
+
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        printWidth: 100,
+        trailingComma: 'all',
+        jsxBracketSameLine: true
+      },
+    ],
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -8,6 +8,7 @@
 
 # production
 /build
+/buildRelease
 
 # misc
 .DS_Store
@@ -16,3 +17,6 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+# VSCode stuff
+.vscode/
+.history/
diff --git a/index.html b/index.html
@@ -0,0 +1,20 @@
+<!--suppress HtmlUnknownTarget -->
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
+  <meta charset="utf-8">
+  <meta name="theme-color" content="transparent">
+  <meta name="defaultLanguage" content="en-US">
+  <meta name="availableLanguages" content="en-US">
+
+  <title></title>
+
+</head>
+
+<body role="application" class="theme-productivity">
+<div id="root"></div>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -2,17 +2,80 @@
   "name": "test-app",
   "version": "0.1.0",
   "private": true,
+  "main": "index.js",
   "dependencies": {
-    "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "bluebird": "^3.5.1",
+    "classnames": "^2.2.5",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   },
   "devDependencies": {
-    "react-scripts": "0.9.5"
+    "babel-core": "^6.26.0",
+    "babel-eslint": "^7.2.3",
+    "babel-jest": "^20.0.3",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-react-app": "^3.0.3",
+    "babel-preset-stage-0": "^6.24.1",
+    "babel-preset-stage-2": "^6.24.1",
+    "babel-register": "^6.26.0",
+    "babel-resolver": "^1.1.0",
+    "browser-env": "^3.2.1",
+    "copy-webpack-plugin": "^4.2.0",
+    "css-loader": "^0.28.7",
+    "enzyme": "^3.1.0",
+    "eslint": "^4.9.0",
+    "eslint-config-airbnb": "^16.1.0",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-flowtype": "^2.39.1",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jest": "^21.2.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-mocha": "^4.11.0",
+    "eslint-plugin-prettier": "^2.3.1",
+    "eslint-plugin-react": "^7.4.0",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^2.30.1",
+    "ignore-styles": "^5.0.1",
+    "jest": "^21.2.1",
+    "jest-cli": "^21.2.1",
+    "jest-css-modules": "^1.1.0",
+    "node-sass": "^4.5.3",
+    "prettier": "^1.7.4",
+    "prop-types": "^15.6.0",
+    "sass-loader": "^6.0.6",
+    "sinon": "^4.0.2",
+    "style-loader": "^0.19.0",
+    "svg-inline-loader": "^0.8.0",
+    "webpack": "^3.8.1"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject"
+    "test": "jest",
+    "testw": "jest --watch",
+    "dev": "yarn install && webpack --watch --progress --config webpack.config.dev.js",
+    "build": "yarn install && webpack --progress --config webpack.config.prod.js",
+    "build:dev": "yarn install && webpack --progress --config webpack.config.dev.js",
+    "build:dev:no-progress": "webpack --config webpack.config.dev.js"
+  },
+  "jest": {
+    "verbose": true,
+    "moduleNameMapper": {
+      "\\.(s?css)$": "jest-css-modules"
+    },
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      "/resources/"
+    ],
+    "transformIgnorePatterns": []
+  },
+  "babel": {
+    "presets": [
+      "es2015",
+      "stage-2",
+      "react"
+    ]
   }
-}
+}
diff --git a/src/App.js → src/App.jsx b/src/App.js → src/App.jsx
@@ -1,13 +1,12 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
-import './App.css';
+import './App.scss';
 import UserInformation from './UserInformation';
 
 class App extends Component {
-
   constructor(props) {
     super(props);
-    this.state = { user: {} }
+    this.state = { user: {} };
   }
 
   getUserInformation() {
@@ -19,6 +18,9 @@ class App extends Component {
          fetching resources (including across the network).
        2) Maybe you want to update the state here.
     */
+    const self = this;
+    const { name } = this.state.user;
+    return { name, self };
   }
 
   render() {
@@ -29,14 +31,12 @@ class App extends Component {
           <h2>Welcome to React</h2>
         </div>
         <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
+          To get started, edit <code>src/App.jsx</code> and save to reload.
         </p>
         <div className="App-intro">
           <hr />
           <p>Click on the button to fetch the user information</p>
-          <button onClick={this.getUserInformation.bind(this)}>
-            Click me
-          </button>
+          <button onClick={this.getUserInformation()}>Click me</button>
         </div>
         <UserInformation />
       </div>

diff --git a/src/App.css → src/App.scss b/src/App.css → src/App.scss
diff --git a/src/UserInformation.jsx b/src/UserInformation.jsx
@@ -1,9 +1,5 @@
 import React from 'react';
 
-const UserInformation = props => (
-  <div>
-    Display the user information here
-  </div>
-);
+const UserInformation = () => <div>Display the user information here</div>;
 
 export default UserInformation;
diff --git a/src/index.js b/src/index.js
@@ -3,7 +3,4 @@ import ReactDOM from 'react-dom';
 import App from './App';
 import './index.css';
 
-ReactDOM.render(
-  <App />,
-  document.getElementById('root')
-);
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
@@ -0,0 +1,55 @@
+/* eslint-disable */
+
+let path = require('path');
+let webpack = require('webpack');
+let ExtractTextPlugin = require('extract-text-webpack-plugin');
+let CopyWebpackPlugin = require('copy-webpack-plugin');
+let HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  resolve: {
+    extensions: ['.js', '.jsx', '.json']
+  },
+  entry: {
+    app: ['./src/index.js'],
+    vendors: ['react', 'react-dom']
+  },
+  output: {
+    path: __dirname + '/build',
+    filename: '[name].js',
+  },
+  module: {
+    loaders: [
+      {
+        test: /.jsx?$/,
+        loader: 'babel-loader?' + 'presets[]=es2015,' + 'presets[]=stage-0,' + 'presets[]=react'
+      },
+      {
+        test: /.jsx?$/,
+        loader: 'eslint-loader?' + 'emitWarning=true,' + 'exclude[]=build/*.js',
+      },
+      {
+        test: /\.(scss|css)$/,
+        loader: ExtractTextPlugin.extract('css-loader!sass-loader')
+      },
+      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
+      {
+        test: /\.svg$/,
+        loader: 'svg-inline-loader'
+      }
+    ]
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': {
+        'NODE_ENV': JSON.stringify('development')
+      }
+    }),
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+    }),
+    new ExtractTextPlugin('style.css', { allChunks: true }),
+    new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.js' })
+  ],
+  devtool: '#source-map'
+};