Develop (#18)

Develop > Master

Author: codeBelt

.babelrc

@@ -2,10 +2,10 @@
   "env": {
     "client": {
       "presets": [
-        ["es2015", {"modules": false}],
         "stage-2",
         "react",
         ["env", {
+          "modules": false,
           "targets": {
             "browsers": [
               "last 2 versions"

.stylelintrc

@@ -6,6 +6,7 @@
   "rules": {
     "indentation": 4,
     "color-hex-length": "long",
-    "order/properties-alphabetical-order": true
+    "order/properties-alphabetical-order": true,
+    "at-rule-no-unknown": null
   }
 }

package.json

@@ -33,7 +33,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/codeBelt/hapi-react-hot-loader-example"
+    "url": "https://github.com/codeBelt/typescript-hapi-react-hot-loader-example"
   },
   "keywords": [
     "hapi",
@@ -51,89 +51,86 @@
   "license": "MIT",
   "devDependencies": {
     "@types/classnames": "2.2.3",
-    "@types/fs-extra": "4.0.5",
-    "@types/hapi": "16.1.11",
+    "@types/fs-extra": "5.0.1",
+    "@types/hapi": "17.0.5",
     "@types/history": "4.6.2",
-    "@types/inert": "4.2.4",
-    "@types/node": "8.0.53",
+    "@types/inert": "5.1.0",
+    "@types/node": "9.4.7",
     "@types/node-notifier": "0.0.28",
-    "@types/react": "16.0.25",
-    "@types/react-dom": "16.0.3",
-    "@types/react-hot-loader": "3.0.5",
-    "@types/react-redux": "5.0.13",
-    "@types/react-router": "4.0.18",
-    "@types/react-router-dom": "4.2.2",
-    "@types/react-router-redux": "5.0.10",
-    "@types/redux-form": "7.0.9",
+    "@types/react": "16.0.40",
+    "@types/react-dom": "16.0.4",
+    "@types/react-hot-loader": "3.0.6",
+    "@types/react-redux": "5.0.15",
+    "@types/react-router": "4.0.22",
+    "@types/react-router-dom": "4.2.4",
+    "@types/react-router-redux": "5.0.12",
+    "@types/redux-form": "7.2.2",
     "@types/serialize-javascript": "1.3.2",
-    "@types/webpack": "3.8.1",
-    "@types/webpack-env": "1.13.2",
-    "awesome-typescript-loader": "3.4.0",
+    "@types/webpack": "3.8.10",
+    "@types/webpack-env": "1.13.5",
+    "awesome-typescript-loader": "4.0.1",
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
-    "babel-loader": "7.1.2",
+    "babel-loader": "7.1.4",
     "babel-plugin-system-import-transformer": "3.1.0",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-preset-env": "1.6.1",
-    "babel-preset-es2015": "6.24.1",
     "babel-preset-react": "6.24.1",
     "babel-preset-stage-2": "6.24.1",
     "babel-watch": "2.0.7",
     "concurrently": "3.5.1",
-    "copy-webpack-plugin": "4.2.3",
-    "cross-env": "5.1.1",
-    "css-hot-loader": "1.3.4",
-    "css-loader": "0.28.7",
+    "copy-webpack-plugin": "4.5.1",
+    "cross-env": "5.1.4",
+    "css-hot-loader": "1.3.8",
+    "css-loader": "0.28.10",
     "extract-text-webpack-plugin": "3.0.2",
-    "html-webpack-harddisk-plugin": "0.1.0",
-    "html-webpack-plugin": "2.30.1",
-    "nodemon": "1.12.1",
-    "postcss-apply": "0.8.0",
-    "postcss-cssnext": "3.0.2",
-    "postcss-import": "11.0.0",
-    "postcss-loader": "2.0.9",
+    "html-webpack-harddisk-plugin": "0.2.0",
+    "html-webpack-plugin": "3.0.6",
+    "node-sass": "4.8.1",
+    "nodemon": "1.17.1",
     "rimraf": "2.6.2",
-    "robotstxt-webpack-plugin": "4.0.0",
-    "style-loader": "0.19.0",
-    "stylelint": "8.3.0",
-    "stylelint-config-standard": "18.0.0",
-    "stylelint-order": "0.7.0",
-    "tslib": "1.8.0",
-    "tslint": "5.8.0",
-    "tslint-react": "3.2.0",
-    "typescript": "2.6.1",
-    "webpack-dev-middleware": "1.12.1",
-    "webpack-hot-middleware": "2.20.0",
-    "webpack-simple-progress-plugin": "0.0.3",
+    "robotstxt-webpack-plugin": "4.0.1",
+    "sass-loader": "6.0.7",
+    "style-loader": "0.20.3",
+    "stylelint": "9.1.1",
+    "stylelint-config-standard": "18.2.0",
+    "stylelint-order": "0.8.1",
+    "tslib": "1.9.0",
+    "tslint": "5.9.1",
+    "tslint-react": "3.5.1",
+    "typescript": "2.7.2",
+    "webpack-dev-middleware": "3.0.1",
+    "webpack-hot-middleware": "2.21.2",
+    "webpack-simple-progress-plugin": "0.0.4",
     "write-file-webpack-plugin": "4.2.0"
   },
   "dependencies": {
     "babel-polyfill": "6.26.0",
-    "bootstrap": "next",
+    "bootstrap": "4.0.0",
     "classnames": "2.2.5",
     "fetch-everywhere": "1.0.5",
     "form2js": "1.0.0",
-    "fs-extra": "4.0.2",
-    "hapi": "16.6.2",
-    "hapi-webpack-plugin": "2.0.0",
+    "fs-extra": "5.0.0",
+    "hapi": "17.2.2",
+    "hapi-webpack-plugin": "3.0.0",
     "history": "4.7.2",
-    "inert": "4.2.1",
-    "node-notifier": "5.1.2",
-    "react": "16.1.1",
+    "inert": "5.1.0",
+    "node-notifier": "5.2.1",
+    "react": "16.2.0",
     "react-async-bootstrapper": "1.1.2",
     "react-async-component": "1.0.2",
-    "react-dom": "16.1.1",
+    "react-dom": "16.2.0",
     "react-hot-loader": "3.1.3",
-    "react-redux": "5.0.6",
+    "react-redux": "5.0.7",
     "react-router": "4.2.0",
     "react-router-dom": "4.2.2",
     "react-router-redux": "5.0.0-alpha.8",
     "redux": "3.7.2",
     "redux-devtools-extension": "2.13.2",
-    "redux-form": "7.1.2",
+    "redux-form": "7.3.0",
     "redux-saga": "0.16.0",
     "serialize-javascript": "1.4.0",
-    "webpack": "3.8.1"
+    "webpack": "3.11.0"
   }
 }

postcss.config.js

@@ -1,4 +1,4 @@
 form:not(.u-validate) input:invalid {
     background-color: #fafad2;
-    border: 1px solid var(--COLOR_BRAND_PRIMARY);
+    border: 1px solid $COLOR_BRAND_PRIMARY;
 }

src/assets/styles/base/elements.css src/assets/styles/base/elements.scss

@@ -6,21 +6,21 @@
 .inputField-input {
     appearance: none;
     background-color: #ffffff;
-    border: 1px solid var(--COLOR_DARKGRAY_MEDIUM);
-    box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(0%));
+    border: 1px solid $COLOR_DARKGRAY_MEDIUM;
+    box-shadow: inset 0 0 0 1px rgba($COLOR_PRIMARY, 0);
     font-size: 16px;
     max-width: 100%;
     padding: 9px;
     transition:
-        border-color 300ms var(--EASE_IN_QUAD),
-        box-shadow 300ms var(--EASE_IN_QUAD);
+        border-color 300ms $EASE_IN_QUAD,
+        box-shadow 300ms $EASE_IN_QUAD;
 
     &:focus {
-        border-color: var(--COLOR_PRIMARY);
-        box-shadow: inset 0 0 0 1px color(var(--COLOR_PRIMARY) alpha(100%));
+        border-color: $COLOR_PRIMARY;
+        box-shadow: inset 0 0 0 1px rgba($COLOR_PRIMARY, 100%);
         transition:
-            border-color 250ms var(--EASE_OUT_QUAD),
-            box-shadow 250ms var(--EASE_OUT_QUAD);
+            border-color 250ms $EASE_OUT_QUAD,
+            box-shadow 250ms $EASE_OUT_QUAD;
     }
 }
 
@@ -36,5 +36,5 @@
 }
 
 .inputField_noLabel .inputField-label {
-    @apply --isVisuallyHidden;
+    @include isVisuallyHidden;
 }

src/assets/styles/components/inputField.css src/assets/styles/components/inputField.scss

@@ -6,15 +6,7 @@
     position: fixed;
     right: 0;
     top: 0;
-    z-index: var(--Z_INDEX_MODAL);
-
-    @media (--SM) {
-        padding-top: 50px;
-    }
-
-    @media (--MD) {
-        padding-top: 100px;
-    }
+    z-index: 6;
 }
 
 .modal-overlay {
@@ -23,11 +15,10 @@
     bottom: 0;
     cursor: pointer;
     left: 0;
-    opacity: 0;
     position: fixed;
     right: 0;
     top: 0;
-    z-index: var(--Z_INDEX_MODAL_OVERLAY);
+    z-index: 7;
 }
 
 .modal-overlay_required {
@@ -46,23 +37,12 @@
     margin: auto auto 5px;
     max-width: 800px;
     min-height: 250px;
-    opacity: 0;
     overflow: hidden;
     padding: 20px;
     position: relative;
     transform: translateY(-5px);
     width: calc(100% - 10px);
-    z-index: var(--Z_INDEX_MODAL_CONTENT);
-
-    @media (--SM) {
-        margin-bottom: 20px;
-        transform: translateY(-50px);
-    }
-
-    @media (--MD) {
-        margin-bottom: 20px;
-        transform: translateY(-100px);
-    }
+    z-index: 8;
 }
 
 .modal-content_sm {
@@ -148,11 +128,6 @@
 .modal-footer_stack {
     display: block;
 
-    @media (--XS) {
-        display: flex;
-        justify-content: flex-end;
-    }
-
     & > * {
         margin-bottom: 10px;
         width: 100%;

src/assets/styles/components/modal.css src/assets/styles/components/modal.scss

@@ -0,0 +1,4 @@
+/* stylelint-disable number-no-trailing-zeros */
+$EASE_IN_QUAD: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+$EASE_OUT_QUAD: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+$EASE_OUT_CUBIC: cubic-bezier(0.215, 0.610, 0.355, 1.000);

src/assets/styles/components/modalForm.css src/assets/styles/components/modalForm.scss

@@ -0,0 +1,20 @@
+/* utils
+------------------------------------------------- */
+@mixin isVisuallyHidden() {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.u-isHidden {
+    display: none !important;
+}
+
+.u-isVisuallyHidden {
+    @include isVisuallyHidden;
+}

src/assets/styles/helpers/easing.css

@@ -0,0 +1,10 @@
+/* vars
+------------------------------------------------- */
+$COLOR_PRIMARY: rgb(0, 200, 230);
+$COLOR_SECONDARY: rgb(0, 60, 230);
+$COLOR_BRAND_PRIMARY: rgb(255, 0, 0);
+$COLOR_DARKGRAY_MEDIUM: rgb(112, 112, 112);
+
+$XS: 32.5rem;
+$SM: 48rem;
+$MD: 60rem;