Add new project using webpack

.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    jquery: true
+  },
+  globals: {
+    "fetch": false,
+    "window": true,
+    "document": true
+  },
+  extends: 'eslint:recommended',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  rules: {
+    indent: ['error', 2],
+    'no-unused-vars': [1, { vars: 'local', args: 'none' }],
+    'linebreak-style': 'off',
+    quotes: ['error', 'single'],
+    semi: ['error', 'always']
+  },
+  env: {
+    node: true
+  }
+};

.gitignore

@@ -1 +1,5 @@
-node_modules/
+dist
+node_modules
+package-lock.json
+.DS_Store
+.vscode/settings.json

.stylintrc

@@ -0,0 +1,62 @@
+{
+  "blocks": false,
+  "brackets": { 
+    "expect": "never",
+    "error": true
+  },
+  "colons": { 
+    "expect": "never",
+    "error": true
+  },
+  "colors": "always",
+  "commaSpace": "aways",
+  "commentSpace": "always",
+  "cssLiteral": "never",
+  "customProperties": [],
+  "depthLimit": { 
+    "expect": 3,
+    "error": true
+  },
+  "duplicates": true,
+  "efficient": "always",
+  "extendPref": false,
+  "globalDupe": false,
+  "groupOutputByFile": true,
+  "indentPref": {
+    "expect": 2,
+    "error": true
+  },
+  "leadingZero": "never",
+  "maxErrors": false,
+  "maxWarnings": false,
+  "mixed": false,
+  "mixins": [],
+  "namingConvention": false,
+  "namingConventionStrict": false,
+  "none": "never",
+  "noImportant": false,
+  "parenSpace": false,
+  "placeholders": "always",
+  "prefixVarsWithDollar": "always",
+  "quotePref": false,
+  "reporterOptions": {
+    "columns": ["lineData", "severity", "description", "rule"],
+    "columnSplitter": "  ",
+    "showHeaders": false,
+    "truncate": true
+  },
+  "semicolons": { 
+    "expect": "never",
+    "error": true
+  },
+  "sortOrder": { 
+    "expect": "alphabetical",
+    "error": true
+  },
+  "stackedProperties": "never",
+  "trailingWhitespace": false,
+  "universal": false,
+  "valid": false,
+  "zeroUnits": "never",
+  "zIndexNormalize": false
+}

.travis.yml

@@ -0,0 +1,10 @@
+language: node_js
+node_js: 
+  - "7"
+before_script:
+  - npm i
+cache:
+  directories:
+    - "node_modules"
+script: 
+  - npm run deploy

README.md

@@ -1,39 +1,73 @@
-Survey - Front-End
-=======
+<p align="center">
+  <img src="src/images/logo.png" width="200">
+</p>
 
-Pesquisa de mercado realizada entre front-end developers do Brasil.
+# Survey Front-end Brasil
 
-[Visualizar o projeto](http://www.felipefialho.com/survey)
+> Pesquisa salarial entre frontenders do Brasil
 
-## Contribuição
+[![license](https://img.shields.io/github/license/LFeh/survey.svg)](./license.md)
+[![GitHub contributors](https://img.shields.io/github/contributors/LFeh/survey.svg)](https://github.com/LFeh/survey/graphs/contributors)
 
-Por favor leia o [Coding Style](https://github.com/LFeh/coding-style/) para [Issues](https://github.com/LFeh/survey/issues) e as regras de código.
+## Getting Started
 
-Todas as alterações devem ser feitas na pasta `/dev`. O CSS precisa ser modificado usando o pré-processador **LESS**.
+```sh
+# install dependencies
+$ npm i
 
-Issues e commits devem ser enviados em pt-BR.
+# Run the project
+$ npm start
+```
 
-  ```bash
+With the commands above, you have everything to start.
+
+## About CSS
+
+### Post CSS libs
 
-  # Getting Started
-  # ---------------
+For grid system uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make easy use browser prefixes, [Lost](https://github.com/peterramsing/lost) with some help from, [Rucksack](http://simplaio.github.io/rucksack/) for animations, reset and a lot of great mixins, [Rupture](https://github.com/jenius/rupture) for responsive utilities. And [Font Magician](https://github.com/jonathantneal/postcss-font-magician/) to get the webfonts.
 
-  # 1. Fork esse repositório e clone
-  git clone https://github.com/<your-username>/survey.git
+### CSS Modules
 
-  # 2. Navegue até a nova pasta
-  cd survey
+To make easier create your components and avoid a lot of problems, it boilerplate use [CSS Modules](https://github.com/css-modules/css-modules).
 
-  # 3. Instale as dependências
-  npm install
+Example
 
+```css
+.host
+  text-align center
 
-  # Development
-  # -----------
+.title
+  font-size 4rem
 
-  # Para assistir as alterações no .less e no .js rode o comando
-  grunt w
+.description
+  font-size 2rem
+```
 
-  # Build o projeto para deploy
-  grunt build
-  ``` 
+After the transformation it will become like this
+
+```css
+._host_4897k_1 {
+  text-align: center;
+}
+
+._title_4897k_9 {
+  font-size: 4rem;
+}
+
+._description_4897k_12 {
+  font-size: 2rem;
+}
+```
+
+## Tasks
+
+- `npm start`: run all tasks and initialize watch for changes and a server
+- `npm run build`: run all production tasks create a `dist` folder to deploy
+- `npm run lint`: lint javascript and css
+- `npm run fix`: command to fix all eslint errors
+- `npm run deploy`: run all tasks to build and deploy on gh-pages
+
+## License
+
+MIT License © Felipe Fialho

app.config.json

@@ -0,0 +1,10 @@
+{
+	"title": "Survey - Front-End Brasil 2018",
+	"description": "Pesquisa salarial entre frontenders do Brasil",
+	"url": "https://github.com/LFeh/survey",
+	"logo": "images/logo.png",
+	"theme_color": "#333333",
+	"short_name": "Survey 2018",
+	"ga": "UA-40410936-3",
+	"twitter": "@lfeh"
+}

license

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Felipe Fialho
+
+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.

package.json

@@ -0,0 +1,75 @@
+{
+  "name": "survey",
+  "version": "2.0.0",
+  "title": "Survey",
+  "description": "Pesquisa salarial entre frontenders do Brasil",
+  "homepage": "https://github.com/LFeh/survey",
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "author": {
+    "name": "Felipe Fialho",
+    "email": "[email protected]",
+    "url": "http://www.felipefialho.com"
+  },
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "build": "webpack --mode production",
+    "deploy": "gh-pages-deploy",
+    "analyzer": "npm run build && webpack-bundle-analyzer ./dist/stats.json",
+    "lint": "npm run lint:js && npm run lint:styl",
+    "lint:styl": "stylint src/**/*.styl",
+    "lint:scss": "sass-lint -c sass-lint.json 'src/**/*.scss' -v -q",
+    "lint:js": "eslint ./src/",
+    "fix:js": "eslint ./src/ --fix",
+    "precommit": "npm run lint"
+  },
+  "gh-pages-deploy": {
+    "staticpath": "dist",
+    "prep": [
+      "build"
+    ],
+    "noprompt": true
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "autoprefixer": "^9.0.0",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^0.1.19",
+    "copy-webpack-plugin": "^4.5.2",
+    "css-loader": "^1.0.0",
+    "cssnano": "^4.0.2",
+    "eslint": "^5.1.0",
+    "file-loader": "1.1.11",
+    "gh-pages-deploy": "^0.5.0",
+    "html-webpack-plugin": "^3.2.0",
+    "imagemin-webpack-plugin": "^2.1.5",
+    "lost": "^8.3.0",
+    "mini-css-extract-plugin": "^0.4.1",
+    "node-sass": "^4.9.2",
+    "offline-plugin": "^5.0.5",
+    "postcss-font-magician": "^2.2.1",
+    "postcss-loader": "^2.1.6",
+    "postcss-modules": "^1.1.0",
+    "pug": "^2.0.3",
+    "pug-loader": "^2.4.0",
+    "rucksack-css": "^1.0.2",
+    "rupture": "^0.7.1",
+    "rupture-sass": "^0.3.0",
+    "sass-lint": "^1.12.1",
+    "sass-loader": "^7.0.3",
+    "style-loader": "^0.21.0",
+    "stylint": "^1.5.9",
+    "stylus": "^0.54.5",
+    "stylus-loader": "^3.0.2",
+    "uglifyjs-webpack-plugin": "^1.2.7",
+    "webpack": "^4.16.1",
+    "webpack-bundle-analyzer": "^2.13.1",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "^3.1.4",
+    "webpack-pwa-manifest": "^3.6.2"
+  }
+}

postcss.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  plugins: {
+    'autoprefixer': {},
+    'rucksack-css': {},
+    'lost': {},
+    'postcss-font-magician': {},
+    'cssnano': {},
+    'postcss-modules': {
+      getJSON: function(cssFileName, json, outputFileName) {
+        const fs = require('fs');
+        const path = require('path');
+        const isComponent = /components/.test(path.dirname(cssFileName));
+
+        if (isComponent) {
+          const cssName = path.basename(`${cssFileName}`);
+          const jsonFileName = path.resolve(`${path.dirname(cssFileName)}/${cssName.split('.')[0]}-css.json`);
+          fs.writeFileSync(jsonFileName, JSON.stringify(json));
+        }
+      }
+    }
+  }
+};

src/app.js

@@ -0,0 +1,12 @@
+import * as offline from 'offline-plugin/runtime';
+import './app.styl';
+import './components/welcome/welcome.js';
+import './components/introduction/introduction.js';
+import './components/footer/footer.js';
+
+
+offline.install({
+  onUpdateReady: function() {
+    offline.applyUpdate();
+  }
+});

src/app.styl

@@ -0,0 +1,2 @@
+@import 'styles/core';
+@import 'styles/base';