Initial

Author: Boy with Silver Wings

.browserslistrc

@@ -0,0 +1,4 @@
+# Browsers that we support
+
+> 3%
+Last 2 versions

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

.eslintignore

@@ -0,0 +1,12 @@
+node_modules
+
+test/fixtures/
+test/output/
+
+build-utils
+webpack.config.js
+postcss.config.js
+
+dist
+
+*.spec.js

.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "airbnb",
+    "prettier"
+  ],
+  "rules": {
+    "no-console": 0,
+    "no-unused-vars": 1 
+  },
+  "globals": {
+    "window": true,
+    "document": true,
+    "navigator": true
+  }
+}

.gitattributes

@@ -0,0 +1,20 @@
+# Automatically normalize line endings for all text-based files
+# http://git-scm.com/docs/gitattributes#_end_of_line_conversion
+* text=auto
+
+# For the following file types, normalize line endings to LF on
+# checkin and prevent conversion to CRLF when they are checked out
+# (this is required in order to prevent newline related issues like,
+# for example, after the build script is run)
+.*      text eol=lf
+*.html  text eol=lf
+*.css   text eol=lf
+*.less  text eol=lf
+*.scss  text eol=lf
+*.sss   text eol=lf
+*.js    text eol=lf
+*.json  text eol=lf
+*.md    text eol=lf
+*.sh    text eol=lf
+*.txt   text eol=lf
+*.xml   text eol=lf

.gitignore

@@ -0,0 +1,23 @@
+.idea
+.vscode
+
+node_modules/
+
+dist/
+
+npm-debug.log
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# testing
+/coverage
+

.stylelintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    
+  }
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Agney Menon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,77 @@
+# React Configuration
+
+Configuration for a react app.
+
+Uses Webpack 4, Babel 7
+
+## Quick Overview
+* `git clone --depth 1` this repository to get started.
+* `npm install` to install needed dependencies.
+* `npm start` to start the application on port 3002
+* `npm build` to build the application.
+
+You can replace these with their `yarn` counterparts, if you prefer. 
+
+## Features
+* ### [POSTCSS Plugins](http://postcss.org/)
+  * [Preset ENV CSS](https://preset-env.cssdb.org)
+    
+    Write future CSS today. Better than using Preprocessors like SASS or LESS because it's pure CSS that you learn. 
+
+    Comes with *autoprefixer* for your styles. 
+  
+  * [Stylelint](https://stylelint.io/)
+
+    Get a whole lot better stylelinting than ESLint. 
+    
+    Follows https://github.com/stylelint/stylelint-config-standard for linting. 
+    Turn rules on or off from `.stylelintrc.json` file.
+
+  * [PostCSS Normalize](https://www.npmjs.com/package/postcss-normalize)
+
+    Normalize stylesheets based on browser support for browserlist.
+
+* ### [ESLint](https://eslint.org)
+  Follows [Airbnb Javascript Style Guide](https://github.com/airbnb/javascript). You can turn rules on or off from `.eslintrc.json`. You can choose to ignore files on whole from `.eslintignore`
+
+  Note: ESLint has it's style formatting options turned off by default, because it is handled by `Prettier` later on. 
+
+* ### [Babel](https://babeljs.io/)
+  Used to compile your modern javascript to es2015 compatible javascript. 
+  You can change the configuration with .babelrc file. 
+
+* ### [Prettier](https://github.com/prettier/prettier)
+  Formats code in place, so you don't have to learn the styling rules. 
+
+* ### [UglifyJS](https://github.com/mishoo/UglifyJS2)
+  Used to minify, mangle and compress javascript code. 
+  Used only during production.
+
+* ### [Workbox](https://developers.google.com/web/tools/workbox)
+  Generates an optimised service worker with support for precaching and offline loading.
+
+* ### Unit Testing
+  Unit testing setup using [Jest](https://facebook.github.io/jest/). Shallow rendering support with [Enzyme](http://airbnb.io/enzyme/)
+  
+## Other enhancements
+1. Code split into `vendor.js` and hashed javascript filenames. 
+This helps in pushing new code without worrying about caching issues.
+2. Webpack automatically looks for and installs plugins that are not installed by default.  
+Just import the required library and let webpack worry about installing it. 
+
+    https://github.com/webpack-contrib/npm-install-webpack-plugin
+3. Extracts CSS to a new file and minifies it.
+    
+    https://github.com/webpack-contrib/extract-text-webpack-plugin
+
+4. Minifies react and react-dom packages.
+
+    https://facebook.github.io/react/docs/optimizing-performance.html#webpack
+5. Removes debugging consoles for Production build
+
+
+
+_Feel free to throw in a pull request._ 
+
+
+

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

babel.config.js

@@ -0,0 +1,22 @@
+const presets = [
+  [
+    "@babel/env",
+    {
+      targets: {
+        edge: "17",
+        firefox: "60",
+        chrome: "67",
+        safari: "11.1"
+      },
+      useBuiltIns: "usage"
+    }
+  ],
+  "@babel/preset-react"
+];
+
+const plugins = [
+  "@babel/plugin-proposal-object-rest-spread",
+  "@babel/plugin-proposal-class-properties"
+];
+
+module.exports = { presets, plugins };

build-utils/common-paths.js

@@ -0,0 +1,9 @@
+const path = require("path");
+const glob = require("glob");
+
+module.exports = {
+  root: path.resolve(__dirname, ".."),
+  outputPath: path.resolve(__dirname, "../", "dist"),
+  appSrc: path.resolve(__dirname, "../", "src"),
+  public: path.resolve(__dirname, "../", "public")
+};

build-utils/webpack.common.js

@@ -0,0 +1,41 @@
+const commonPaths = require("./common-paths");
+const webpack = require("webpack");
+const htmlWebpackPlugin = require("html-webpack-plugin");
+
+const config = {
+  output: {
+    filename: "[hash].bundle.js",
+    path: commonPaths.outputPath,
+    publicPath: "/"
+  },
+  resolve: {
+    extensions: [".js", ".jsx"]
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png|gif|svg|eot|ttf|woff|woff2)$/i,
+        use: [
+          {
+            loader: "url-loader",
+            options: {
+              limit: 1000
+            }
+          }
+        ]
+      },
+      {
+        test: /\.html$/,
+        loader: "html-loader"
+      }
+    ]
+  },
+  plugins: [
+    new webpack.ProgressPlugin(),
+    new htmlWebpackPlugin({
+      template: "public/index.html"
+    })
+  ]
+};
+
+module.exports = config;

build-utils/webpack.dev.js

@@ -0,0 +1,54 @@
+const webpack = require("webpack");
+
+const config = {
+  devServer: {
+    port: 3000,
+    open: true,
+    host: "0.0.0.0",
+    overlay: true,
+    hot: true,
+    useLocalIp: true,
+    historyApiFallback: true
+  },
+  devtool: "eval-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "style-loader"
+          },
+          {
+            loader: "css-loader",
+            options: {
+              importLoaders: 1
+            }
+          },
+          {
+            loader: "postcss-loader"
+          }
+        ]
+      },
+      {
+        enforce: "pre",
+        test: /\.jsx?$/,
+        exclude: /node_modules/,
+        loader: "eslint-loader"
+      },
+      {
+        test: /.jsx?$/,
+        use: {
+          loader: "babel-loader"
+        },
+        exclude: /(node_modules|dist|build-utils|webpack.config.js)/
+      }
+    ]
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+  ]
+};
+
+module.exports = config;