chore: fix lint and styles related to lints (#4)

* chore: fix lint and styles related to lints

+ Update node-sass to sass
+ Add prettier

* build: update version

* ci: Add github pages action

.babelrc

@@ -0,0 +1,2 @@
+{
+}

.eslintrc.yml

@@ -1,65 +1,81 @@
 ---
-  extends:
-    airbnb-base
+plugins: [ "prettier" ]
+extends:
+  airbnb-base
 
-  parser: "@babel/eslint-parser"
+parser: "@babel/eslint-parser"
 
-  settings:
-    ecmascript: 7
+settings:
+  ecmascript: 7
 
-  parserOptions:
-    ecmaFeatures:
-      modules: true
-      destructuring: true
-      experimentalObjectRestSpread: true
-      classes: true
-      forOf: true
-      blockBindings: true
-      arrowFunctions: true
+parserOptions:
+  ecmaFeatures:
+    modules: true
+    destructuring: true
+    experimentalObjectRestSpread: true
+    classes: true
+    forOf: true
+    blockBindings: true
+    arrowFunctions: true
 
-  env:
-    browser: true
+env:
+  browser: true
+  jquery: true
+  commonjs: true
+  es6: true
 
-  rules:
-    # -------------
-    # General Rules
-    # -------------
+rules:
+  # -------------
+  # General Rules
+  # -------------
+  prettier/prettier: [ "error",{
+    "printWidth": 100,
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "semi": true,
+    "quoteProps": "preserve",
+    "bracketSpacing": true,
+    "bracketSameLine": true,
+    "endOfLine": "lf"
+  } ]
+  wrap-iife: [ 'error','any' ]
+  newline-per-chained-call: 0
+  arrow-body-style: 0
+  prefer-arrow-callback: 0
+  arrow-parens: 0
+  no-param-reassign: 0
+  no-new: 0
+  consistent-return: 0
+  key-spacing: 0
+  no-multi-spaces: 0
+  no-underscore-dangle: 0
+  one-var: 0
+  global-require: 0
+  class-methods-use-this: 0
+  comma-dangle: [ "error", {
+    "arrays": "always-multiline",
+    "objects": "always-multiline",
+    "imports": "always-multiline",
+    "exports": "always-multiline",
+    "functions": "never"
+  } ]
+  func-names: 0
+  function-paren-newline: 0
+  indent: 2
+  new-cap: 0
+  no-plusplus: 0
+  no-return-assign: 0
+  quote-props: 0
+  template-curly-spacing: 0
+  no-unused-expressions: 0
 
-    arrow-body-style: 0
-    prefer-arrow-callback: 0
-    arrow-parens: 0
-    no-param-reassign: 0
-    no-new: 0
-    consistent-return: 0
-    key-spacing: 0
-    no-multi-spaces: 0
-    no-underscore-dangle: 0
-    one-var: 0
-    global-require: 0
-    class-methods-use-this: 0
-    comma-dangle: ["error", {
-      "arrays": "always-multiline",
-      "objects": "always-multiline",
-      "imports": "always-multiline",
-      "exports": "always-multiline",
-      "functions": "never"
-    }]
-    func-names: 0
-    function-paren-newline: 0
-    indent: 2
-    new-cap: 0
-    no-plusplus: 0
-    no-return-assign: 0
-    quote-props: 0
-    template-curly-spacing: 0
-    no-unused-expressions: 0
 
+  # ------------
+  # Import Rules
+  # ------------
 
-    # ------------
-    # Import Rules
-    # ------------
-
-    import/extensions: 0
-    import/no-extraneous-dependencies: 0
-    import/no-unresolved: 0
-    import/prefer-default-export: 0
+  import/extensions: 0
+  import/no-extraneous-dependencies: 0
+  import/no-unresolved: 0
+  import/prefer-default-export: 0

.github/workflows/gh-pages.yml

@@ -0,0 +1,30 @@
+name: Publish to Github Pages
+
+on:
+  push:
+    branches: [ "master-rtl" ]
+permissions:
+  contents: write
+
+jobs:
+  deploy:
+    concurrency: ci-${{ github.ref }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout 🛎️
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Build ⚙
+        run: |
+          npm install
+          npm run release:minified
+
+      - name: Deploy 🚀
+        uses: JamesIves/github-pages-deploy-action@v4
+        with:
+          folder: 'dist' #

.prettierrc.yaml

@@ -0,0 +1,9 @@
+printWidth: 100
+tabWidth: 2
+useTabs: false
+singleQuote: true
+semi: true
+quoteProps: preserve
+bracketSpacing: true
+bracketSameLine: true
+endOfLine: lf

.stylelintrc.yml

@@ -1,7 +1,17 @@
 ---
-  extends: stylelint-config-standard
+  extends:
+    - stylelint-config-standard
+    - stylelint-config-standard-scss
+    - stylelint-config-prettier-scss
   rules:
-    at-rule-no-unknown: null
     at-rule-empty-line-before: null
-    selector-list-comma-newline-after: null
+    at-rule-no-unknown: null
     block-opening-brace-space-before: null
+    scss/at-mixin-argumentless-call-parentheses: null
+    scss/at-mixin-pattern: null
+    scss/at-rule-conditional-no-parentheses: null
+    scss/dollar-variable-pattern: null
+    selector-class-pattern: null
+    selector-list-comma-newline-after: null
+    selector-pseudo-class-no-unknown: null
+    selector-pseudo-element-no-unknown: null

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "adminator",
-  "version": "2.0.3",
+  "name": "adminator-rtl",
+  "version": "2.0.4",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
@@ -12,7 +12,7 @@
     "release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack",
     "preview": "cross-env webpack server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
-    "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
+    "lint:scss": "stylelint ./src/**/*.scss",
     "lint": "npm run lint:js && npm run lint:scss"
   },
   "devDependencies": {
@@ -35,22 +35,30 @@
     "css-minimizer-webpack-plugin": "^4.2.2",
     "eslint": "^8.29.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-formatter-table": "^7.32.1",
     "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.0",
     "image-minimizer-webpack-plugin": "^3.8.1",
     "mini-css-extract-plugin": "^2.7.2",
-    "node-sass": "^8.0.0",
+    "sass": "^1.57.1",
     "postcss": "^8.4.20",
     "postcss-loader": "^7.0.2",
     "postcss-preset-env": "^7.8.3",
+    "prettier": "^2.8.1",
     "rtlcss": "^4.0.0",
     "sass-loader": "^13.2.0",
     "sharp": "^0.31.2",
     "shx": "^0.3.4",
     "style-loader": "^3.3.1",
     "stylelint": "^14.16.0",
+    "stylelint-config-prettier": "^9.0.4",
+    "stylelint-config-prettier-scss": "^0.0.1",
     "stylelint-config-standard": "^29.0.0",
+    "stylelint-config-standard-scss": "^6.1.0",
     "svgo": "^3.0.2",
+    "terser-webpack-plugin": "^5.3.6",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dashboard": "^3.3.7",

src/assets/scripts/charts/chartJS/index.js

@@ -16,21 +16,24 @@ export default (function () {
       type: 'line',
       data: {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label                : 'Series A',
-          backgroundColor      : 'rgba(237, 231, 246, 0.5)',
-          borderColor          : COLORS['deep-purple-500'],
-          pointBackgroundColor : COLORS['deep-purple-700'],
-          borderWidth          : 2,
-          data                 : [60, 50, 70, 60, 50, 70, 60],
-        }, {
-          label                : 'Series B',
-          backgroundColor      : 'rgba(232, 245, 233, 0.5)',
-          borderColor          : COLORS['blue-500'],
-          pointBackgroundColor : COLORS['blue-700'],
-          borderWidth          : 2,
-          data                 : [70, 75, 85, 70, 75, 85, 70],
-        }],
+        datasets: [
+          {
+            label: 'Series A',
+            backgroundColor: 'rgba(237, 231, 246, 0.5)',
+            borderColor: COLORS['deep-purple-500'],
+            pointBackgroundColor: COLORS['deep-purple-700'],
+            borderWidth: 2,
+            data: [60, 50, 70, 60, 50, 70, 60],
+          },
+          {
+            label: 'Series B',
+            backgroundColor: 'rgba(232, 245, 233, 0.5)',
+            borderColor: COLORS['blue-500'],
+            pointBackgroundColor: COLORS['blue-700'],
+            borderWidth: 2,
+            data: [70, 75, 85, 70, 75, 85, 70],
+          },
+        ],
       },
 
       options: {
@@ -38,7 +41,6 @@ export default (function () {
           display: false,
         },
       },
-
     });
   }
 
@@ -55,19 +57,22 @@ export default (function () {
       type: 'bar',
       data: {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          label           : 'Dataset 1',
-          backgroundColor : COLORS['deep-purple-500'],
-          borderColor     : COLORS['deep-purple-800'],
-          borderWidth     : 1,
-          data            : [10, 50, 20, 40, 60, 30, 70],
-        }, {
-          label           : 'Dataset 2',
-          backgroundColor : COLORS['light-blue-500'],
-          borderColor     : COLORS['light-blue-800'],
-          borderWidth     : 1,
-          data            : [10, 50, 20, 40, 60, 30, 70],
-        }],
+        datasets: [
+          {
+            label: 'Dataset 1',
+            backgroundColor: COLORS['deep-purple-500'],
+            borderColor: COLORS['deep-purple-800'],
+            borderWidth: 1,
+            data: [10, 50, 20, 40, 60, 30, 70],
+          },
+          {
+            label: 'Dataset 2',
+            backgroundColor: COLORS['light-blue-500'],
+            borderColor: COLORS['light-blue-800'],
+            borderWidth: 1,
+            data: [10, 50, 20, 40, 60, 30, 70],
+          },
+        ],
       },
 
       options: {
@@ -92,13 +97,15 @@ export default (function () {
       type: 'line',
       data: {
         labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-        datasets: [{
-          backgroundColor : 'rgba(3, 169, 244, 0.5)',
-          borderColor     : COLORS['light-blue-800'],
-          data            : [10, 50, 20, 40, 60, 30, 70],
-          label           : 'Dataset',
-          fill            : 'start',
-        }],
+        datasets: [
+          {
+            backgroundColor: 'rgba(3, 169, 244, 0.5)',
+            borderColor: COLORS['light-blue-800'],
+            data: [10, 50, 20, 40, 60, 30, 70],
+            label: 'Dataset',
+            fill: 'start',
+          },
+        ],
       },
     });
   }
@@ -114,34 +121,37 @@ export default (function () {
 
     Chart.Scatter(scatterCtx, {
       data: {
-        datasets: [{
-          label           : 'My First dataset',
-          borderColor     : COLORS['red-500'],
-          backgroundColor : COLORS['red-500'],
-          data: [
-            { x: 10, y: 20 },
-            { x: 30, y: 40 },
-            { x: 50, y: 60 },
-            { x: 70, y: 80 },
-            { x: 90, y: 100 },
-            { x: 110, y: 120 },
-            { x: 130, y: 140 },
-          ],
-        }, {
-          label           : 'My Second dataset',
-          borderColor     : COLORS['green-500'],
-          backgroundColor : COLORS['green-500'],
-          data: [
-            { x: 150, y: 160 },
-            { x: 170, y: 180 },
-            { x: 190, y: 200 },
-            { x: 210, y: 220 },
-            { x: 230, y: 240 },
-            { x: 250, y: 260 },
-            { x: 270, y: 280 },
-          ],
-        }],
+        datasets: [
+          {
+            label: 'My First dataset',
+            borderColor: COLORS['red-500'],
+            backgroundColor: COLORS['red-500'],
+            data: [
+              { x: 10, y: 20 },
+              { x: 30, y: 40 },
+              { x: 50, y: 60 },
+              { x: 70, y: 80 },
+              { x: 90, y: 100 },
+              { x: 110, y: 120 },
+              { x: 130, y: 140 },
+            ],
+          },
+          {
+            label: 'My Second dataset',
+            borderColor: COLORS['green-500'],
+            backgroundColor: COLORS['green-500'],
+            data: [
+              { x: 150, y: 160 },
+              { x: 170, y: 180 },
+              { x: 190, y: 200 },
+              { x: 210, y: 220 },
+              { x: 230, y: 240 },
+              { x: 250, y: 260 },
+              { x: 270, y: 280 },
+            ],
+          },
+        ],
       },
     });
   }
-}())
+})();

src/assets/scripts/charts/easyPieChart/index.js

@@ -1,6 +1,7 @@
 import * as $ from 'jquery';
 import 'easy-pie-chart/dist/jquery.easypiechart.min.js';
 
+// noinspection JSVoidFunctionReturnValueUsed
 export default (function () {
   if ($('.easy-pie-chart').length > 0) {
     $('.easy-pie-chart').easyPieChart({
@@ -9,5 +10,4 @@ export default (function () {
       },
     });
   }
-}())
-
+})();

src/assets/scripts/charts/sparkline/index.js

@@ -63,70 +63,52 @@ export default (function () {
   // @Other Sparklines
   // ------------------------------------------------------
 
-  $('#sparkline').sparkline(
-    [5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7],
-    {
-      type: 'line',
-      resize: true,
-      height: '20',
-    }
-  );
+  $('#sparkline').sparkline([5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], {
+    type: 'line',
+    resize: true,
+    height: '20',
+  });
 
-  $('#compositebar').sparkline(
-    'html',
-    {
-      type: 'bar',
-      resize: true,
-      barColor: '#aaf',
-      height: '20',
-    }
-  );
-
-  $('#compositebar').sparkline(
-    [4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7],
-    {
-      composite: true,
-      fillColor: false,
-      lineColor: 'red',
-      resize: true,
-      height: '20',
-    }
-  );
+  $('#compositebar').sparkline('html', {
+    type: 'bar',
+    resize: true,
+    barColor: '#aaf',
+    height: '20',
+  });
 
-  $('#normalline').sparkline(
-    'html',
-    {
-      fillColor: false,
-      normalRangeMin: -1,
-      resize: true,
-      normalRangeMax: 8,
-      height: '20',
-    }
-  );
+  $('#compositebar').sparkline([4, 1, 5, 7, 9, 9, 8, 7, 6, 6, 4, 7, 8, 4, 3, 2, 2, 5, 6, 7], {
+    composite: true,
+    fillColor: false,
+    lineColor: 'red',
+    resize: true,
+    height: '20',
+  });
+
+  $('#normalline').sparkline('html', {
+    fillColor: false,
+    normalRangeMin: -1,
+    resize: true,
+    normalRangeMax: 8,
+    height: '20',
+  });
+
+  $('.sparktristate').sparkline('html', {
+    type: 'tristate',
+    resize: true,
+    height: '20',
+  });
 
-  $('.sparktristate').sparkline(
-    'html',
-    {
-      type: 'tristate',
+  $('.sparktristatecols').sparkline('html', {
+    type: 'tristate',
+    colorMap: {
+      '-2': '#fa7',
       resize: true,
+      '2': '#44f',
       height: '20',
-    }
-  );
-
-  $('.sparktristatecols').sparkline(
-    'html',
-    {
-      type: 'tristate',
-      colorMap: {
-        '-2': '#fa7',
-        resize: true,
-        '2': '#44f',
-        height: '20',
-      },
-    }
-  );
+    },
+  });
 
-  const values    = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
+  const values = [5, 4, 5, -2, 0, 3, -5, 6, 7, 9, 9, 5, -3, -2, 2, -4];
   const valuesAlt = [1, 1, 0, 1, -1, -1, 1, -1, 0, 0, 1, 1];
 
   $('.sparkline').sparkline(values, {
@@ -245,4 +227,4 @@ export default (function () {
     borderWidth: 1,
     borderColor: '000',
   });
-}())
+})();

src/assets/scripts/chat/index.js

@@ -1,8 +1,8 @@
 import * as $ from 'jquery';
 
 export default (function () {
-  $('#chat-sidebar-toggle').on('click', e => {
+  $('#chat-sidebar-toggle').on('click', (e) => {
     $('#chat-sidebar').toggleClass('open');
     e.preventDefault();
   });
-}())
+})();

src/assets/scripts/constants/colors.js

@@ -1,274 +1,271 @@
 const COLORS = {
-  'white'                 : '#ffffff',
-  'red-50'                : '#ffebee',
-  'red-100'               : '#ffcdd2',
-  'red-200'               : '#ef9a9a',
-  'red-300'               : '#e57373',
-  'red-400'               : '#ef5350',
-  'red-500'               : '#f44336',
-  'red-600'               : '#e53935',
-  'red-700'               : '#d32f2f',
-  'red-800'               : '#c62828',
-  'red-900'               : '#b71c1c',
-  'red-a100'              : '#ff8a80',
-  'red-a200'              : '#ff5252',
-  'red-a400'              : '#ff1744',
-  'red-a700'              : '#d50000',
-  'pink-50'               : '#fce4ec',
-  'pink-100'              : '#f8bbd0',
-  'pink-200'              : '#f48fb1',
-  'pink-300'              : '#f06292',
-  'pink-400'              : '#ec407a',
-  'pink-500'              : '#e91e63',
-  'pink-600'              : '#d81b60',
-  'pink-700'              : '#c2185b',
-  'pink-800'              : '#ad1457',
-  'pink-900'              : '#880e4f',
-  'pink-a100'             : '#ff80ab',
-  'pink-a200'             : '#ff4081',
-  'pink-a400'             : '#f50057',
-  'pink-a700'             : '#c51162',
-  'purple-50'             : '#f3e5f5',
-  'purple-100'            : '#e1bee7',
-  'purple-200'            : '#ce93d8',
-  'purple-300'            : '#ba68c8',
-  'purple-400'            : '#ab47bc',
-  'purple-500'            : '#9c27b0',
-  'purple-600'            : '#8e24aa',
-  'purple-700'            : '#7b1fa2',
-  'purple-800'            : '#6a1b9a',
-  'purple-900'            : '#4a148c',
-  'purple-a100'           : '#ea80fc',
-  'purple-a200'           : '#e040fb',
-  'purple-a400'           : '#d500f9',
-  'purple-a700'           : '#aa00ff',
-  'deep-purple-50'        : '#ede7f6',
-  'deep-purple-100'       : '#d1c4e9',
-  'deep-purple-200'       : '#b39ddb',
-  'deep-purple-300'       : '#9575cd',
-  'deep-purple-400'       : '#7e57c2',
-  'deep-purple-500'       : '#673ab7',
-  'deep-purple-600'       : '#5e35b1',
-  'deep-purple-700'       : '#512da8',
-  'deep-purple-800'       : '#4527a0',
-  'deep-purple-900'       : '#311b92',
-  'deep-purple-a100'      : '#b388ff',
-  'deep-purple-a200'      : '#7c4dff',
-  'deep-purple-a400'      : '#651fff',
-  'deep-purple-a700'      : '#6200ea',
-  'indigo-50'             : '#e8eaf6',
-  'indigo-100'            : '#c5cae9',
-  'indigo-200'            : '#9fa8da',
-  'indigo-300'            : '#7986cb',
-  'indigo-400'            : '#5c6bc0',
-  'indigo-500'            : '#3f51b5',
-  'indigo-600'            : '#3949ab',
-  'indigo-700'            : '#303f9f',
-  'indigo-800'            : '#283593',
-  'indigo-900'            : '#1a237e',
-  'indigo-a100'           : '#8c9eff',
-  'indigo-a200'           : '#536dfe',
-  'indigo-a400'           : '#3d5afe',
-  'indigo-a700'           : '#304ffe',
-  'blue-50'               : '#e3f2fd',
-  'blue-100'              : '#bbdefb',
-  'blue-200'              : '#90caf9',
-  'blue-300'              : '#64b5f6',
-  'blue-400'              : '#42a5f5',
-  'blue-500'              : '#2196f3',
-  'blue-600'              : '#1e88e5',
-  'blue-700'              : '#1976d2',
-  'blue-800'              : '#1565c0',
-  'blue-900'              : '#0d47a1',
-  'blue-a100'             : '#82b1ff',
-  'blue-a200'             : '#448aff',
-  'blue-a400'             : '#2979ff',
-  'blue-a700'             : '#2962ff',
-  'light-blue-50'         : '#e1f5fe',
-  'light-blue-100'        : '#b3e5fc',
-  'light-blue-200'        : '#81d4fa',
-  'light-blue-300'        : '#4fc3f7',
-  'light-blue-400'        : '#29b6f6',
-  'light-blue-500'        : '#03a9f4',
-  'light-blue-600'        : '#039be5',
-  'light-blue-700'        : '#0288d1',
-  'light-blue-800'        : '#0277bd',
-  'light-blue-900'        : '#01579b',
-  'light-blue-a100'       : '#80d8ff',
-  'light-blue-a200'       : '#40c4ff',
-  'light-blue-a400'       : '#00b0ff',
-  'light-blue-a700'       : '#0091ea',
-  'cyan-50'               : '#e0f7fa',
-  'cyan-100'              : '#b2ebf2',
-  'cyan-200'              : '#80deea',
-  'cyan-300'              : '#4dd0e1',
-  'cyan-400'              : '#26c6da',
-  'cyan-500'              : '#00bcd4',
-  'cyan-600'              : '#00acc1',
-  'cyan-700'              : '#0097a7',
-  'cyan-800'              : '#00838f',
-  'cyan-900'              : '#006064',
-  'cyan-a100'             : '#84ffff',
-  'cyan-a200'             : '#18ffff',
-  'cyan-a400'             : '#00e5ff',
-  'cyan-a700'             : '#00b8d4',
-  'teal-50'               : '#e0f2f1',
-  'teal-100'              : '#b2dfdb',
-  'teal-200'              : '#80cbc4',
-  'teal-300'              : '#4db6ac',
-  'teal-400'              : '#26a69a',
-  'teal-500'              : '#009688',
-  'teal-600'              : '#00897b',
-  'teal-700'              : '#00796b',
-  'teal-800'              : '#00695c',
-  'teal-900'              : '#004d40',
-  'teal-a100'             : '#a7ffeb',
-  'teal-a200'             : '#64ffda',
-  'teal-a400'             : '#1de9b6',
-  'teal-a700'             : '#00bfa5',
-  'green-50'              : '#e8f5e9',
-  'green-100'             : '#c8e6c9',
-  'green-200'             : '#a5d6a7',
-  'green-300'             : '#81c784',
-  'green-400'             : '#66bb6a',
-  'green-500'             : '#4caf50',
-  'green-600'             : '#43a047',
-  'green-700'             : '#388e3c',
-  'green-800'             : '#2e7d32',
-  'green-900'             : '#1b5e20',
-  'green-a100'            : '#b9f6ca',
-  'green-a200'            : '#69f0ae',
-  'green-a400'            : '#00e676',
-  'green-a700'            : '#00c853',
-  'light-green-50'        : '#f1f8e9',
-  'light-green-100'       : '#dcedc8',
-  'light-green-200'       : '#c5e1a5',
-  'light-green-300'       : '#aed581',
-  'light-green-400'       : '#9ccc65',
-  'light-green-500'       : '#8bc34a',
-  'light-green-600'       : '#7cb342',
-  'light-green-700'       : '#689f38',
-  'light-green-800'       : '#558b2f',
-  'light-green-900'       : '#33691e',
-  'light-green-a100'      : '#ccff90',
-  'light-green-a200'      : '#b2ff59',
-  'light-green-a400'      : '#76ff03',
-  'light-green-a700'      : '#64dd17',
-  'lime-50'               : '#f9fbe7',
-  'lime-100'              : '#f0f4c3',
-  'lime-200'              : '#e6ee9c',
-  'lime-300'              : '#dce775',
-  'lime-400'              : '#d4e157',
-  'lime-500'              : '#cddc39',
-  'lime-600'              : '#c0ca33',
-  'lime-700'              : '#afb42b',
-  'lime-800'              : '#9e9d24',
-  'lime-900'              : '#827717',
-  'lime-a100'             : '#f4ff81',
-  'lime-a200'             : '#eeff41',
-  'lime-a400'             : '#c6ff00',
-  'lime-a700'             : '#aeea00',
-  'yellow-50'             : '#fffde7',
-  'yellow-100'            : '#fff9c4',
-  'yellow-200'            : '#fff59d',
-  'yellow-300'            : '#fff176',
-  'yellow-400'            : '#ffee58',
-  'yellow-500'            : '#ffeb3b',
-  'yellow-600'            : '#fdd835',
-  'yellow-700'            : '#fbc02d',
-  'yellow-800'            : '#f9a825',
-  'yellow-900'            : '#f57f17',
-  'yellow-a100'           : '#ffff8d',
-  'yellow-a200'           : '#ffff00',
-  'yellow-a400'           : '#ffea00',
-  'yellow-a700'           : '#ffd600',
-  'amber-50'              : '#fff8e1',
-  'amber-100'             : '#ffecb3',
-  'amber-200'             : '#ffe082',
-  'amber-300'             : '#ffd54f',
-  'amber-400'             : '#ffca28',
-  'amber-500'             : '#ffc107',
-  'amber-600'             : '#ffb300',
-  'amber-700'             : '#ffa000',
-  'amber-800'             : '#ff8f00',
-  'amber-900'             : '#ff6f00',
-  'amber-a100'            : '#ffe57f',
-  'amber-a200'            : '#ffd740',
-  'amber-a400'            : '#ffc400',
-  'amber-a700'            : '#ffab00',
-  'orange-50'             : '#fff3e0',
-  'orange-100'            : '#ffe0b2',
-  'orange-200'            : '#ffcc80',
-  'orange-300'            : '#ffb74d',
-  'orange-400'            : '#ffa726',
-  'orange-500'            : '#ff9800',
-  'orange-600'            : '#fb8c00',
-  'orange-700'            : '#f57c00',
-  'orange-800'            : '#ef6c00',
-  'orange-900'            : '#e65100',
-  'orange-a100'           : '#ffd180',
-  'orange-a200'           : '#ffab40',
-  'orange-a400'           : '#ff9100',
-  'orange-a700'           : '#ff6d00',
-  'deep-orange-50'        : '#fbe9e7',
-  'deep-orange-100'       : '#ffccbc',
-  'deep-orange-200'       : '#ffab91',
-  'deep-orange-300'       : '#ff8a65',
-  'deep-orange-400'       : '#ff7043',
-  'deep-orange-500'       : '#ff5722',
-  'deep-orange-600'       : '#f4511e',
-  'deep-orange-700'       : '#e64a19',
-  'deep-orange-800'       : '#d84315',
-  'deep-orange-900'       : '#bf360c',
-  'deep-orange-a100'      : '#ff9e80',
-  'deep-orange-a200'      : '#ff6e40',
-  'deep-orange-a400'      : '#ff3d00',
-  'deep-orange-a700'      : '#dd2c00',
-  'brown-50'              : '#efebe9',
-  'brown-100'             : '#d7ccc8',
-  'brown-200'             : '#bcaaa4',
-  'brown-300'             : '#a1887f',
-  'brown-400'             : '#8d6e63',
-  'brown-500'             : '#795548',
-  'brown-600'             : '#6d4c41',
-  'brown-700'             : '#5d4037',
-  'brown-800'             : '#4e342e',
-  'brown-900'             : '#3e2723',
-  'grey-50'               : '#fafafa',
-  'grey-100'              : '#f5f5f5',
-  'grey-200'              : '#eeeeee',
-  'grey-300'              : '#e0e0e0',
-  'grey-400'              : '#bdbdbd',
-  'grey-500'              : '#9e9e9e',
-  'grey-600'              : '#757575',
-  'grey-700'              : '#616161',
-  'grey-800'              : '#424242',
-  'grey-900'              : '#212121',
-  'blue-grey-50'          : '#eceff1',
-  'blue-grey-100'         : '#cfd8dc',
-  'blue-grey-200'         : '#b0bec5',
-  'blue-grey-300'         : '#90a4ae',
-  'blue-grey-400'         : '#78909c',
-  'blue-grey-500'         : '#607d8b',
-  'blue-grey-600'         : '#546e7a',
-  'blue-grey-700'         : '#455a64',
-  'blue-grey-800'         : '#37474f',
-  'blue-grey-900'         : '#263238',
+  'white': '#ffffff',
+  'red-50': '#ffebee',
+  'red-100': '#ffcdd2',
+  'red-200': '#ef9a9a',
+  'red-300': '#e57373',
+  'red-400': '#ef5350',
+  'red-500': '#f44336',
+  'red-600': '#e53935',
+  'red-700': '#d32f2f',
+  'red-800': '#c62828',
+  'red-900': '#b71c1c',
+  'red-a100': '#ff8a80',
+  'red-a200': '#ff5252',
+  'red-a400': '#ff1744',
+  'red-a700': '#d50000',
+  'pink-50': '#fce4ec',
+  'pink-100': '#f8bbd0',
+  'pink-200': '#f48fb1',
+  'pink-300': '#f06292',
+  'pink-400': '#ec407a',
+  'pink-500': '#e91e63',
+  'pink-600': '#d81b60',
+  'pink-700': '#c2185b',
+  'pink-800': '#ad1457',
+  'pink-900': '#880e4f',
+  'pink-a100': '#ff80ab',
+  'pink-a200': '#ff4081',
+  'pink-a400': '#f50057',
+  'pink-a700': '#c51162',
+  'purple-50': '#f3e5f5',
+  'purple-100': '#e1bee7',
+  'purple-200': '#ce93d8',
+  'purple-300': '#ba68c8',
+  'purple-400': '#ab47bc',
+  'purple-500': '#9c27b0',
+  'purple-600': '#8e24aa',
+  'purple-700': '#7b1fa2',
+  'purple-800': '#6a1b9a',
+  'purple-900': '#4a148c',
+  'purple-a100': '#ea80fc',
+  'purple-a200': '#e040fb',
+  'purple-a400': '#d500f9',
+  'purple-a700': '#aa00ff',
+  'deep-purple-50': '#ede7f6',
+  'deep-purple-100': '#d1c4e9',
+  'deep-purple-200': '#b39ddb',
+  'deep-purple-300': '#9575cd',
+  'deep-purple-400': '#7e57c2',
+  'deep-purple-500': '#673ab7',
+  'deep-purple-600': '#5e35b1',
+  'deep-purple-700': '#512da8',
+  'deep-purple-800': '#4527a0',
+  'deep-purple-900': '#311b92',
+  'deep-purple-a100': '#b388ff',
+  'deep-purple-a200': '#7c4dff',
+  'deep-purple-a400': '#651fff',
+  'deep-purple-a700': '#6200ea',
+  'indigo-50': '#e8eaf6',
+  'indigo-100': '#c5cae9',
+  'indigo-200': '#9fa8da',
+  'indigo-300': '#7986cb',
+  'indigo-400': '#5c6bc0',
+  'indigo-500': '#3f51b5',
+  'indigo-600': '#3949ab',
+  'indigo-700': '#303f9f',
+  'indigo-800': '#283593',
+  'indigo-900': '#1a237e',
+  'indigo-a100': '#8c9eff',
+  'indigo-a200': '#536dfe',
+  'indigo-a400': '#3d5afe',
+  'indigo-a700': '#304ffe',
+  'blue-50': '#e3f2fd',
+  'blue-100': '#bbdefb',
+  'blue-200': '#90caf9',
+  'blue-300': '#64b5f6',
+  'blue-400': '#42a5f5',
+  'blue-500': '#2196f3',
+  'blue-600': '#1e88e5',
+  'blue-700': '#1976d2',
+  'blue-800': '#1565c0',
+  'blue-900': '#0d47a1',
+  'blue-a100': '#82b1ff',
+  'blue-a200': '#448aff',
+  'blue-a400': '#2979ff',
+  'blue-a700': '#2962ff',
+  'light-blue-50': '#e1f5fe',
+  'light-blue-100': '#b3e5fc',
+  'light-blue-200': '#81d4fa',
+  'light-blue-300': '#4fc3f7',
+  'light-blue-400': '#29b6f6',
+  'light-blue-500': '#03a9f4',
+  'light-blue-600': '#039be5',
+  'light-blue-700': '#0288d1',
+  'light-blue-800': '#0277bd',
+  'light-blue-900': '#01579b',
+  'light-blue-a100': '#80d8ff',
+  'light-blue-a200': '#40c4ff',
+  'light-blue-a400': '#00b0ff',
+  'light-blue-a700': '#0091ea',
+  'cyan-50': '#e0f7fa',
+  'cyan-100': '#b2ebf2',
+  'cyan-200': '#80deea',
+  'cyan-300': '#4dd0e1',
+  'cyan-400': '#26c6da',
+  'cyan-500': '#00bcd4',
+  'cyan-600': '#00acc1',
+  'cyan-700': '#0097a7',
+  'cyan-800': '#00838f',
+  'cyan-900': '#006064',
+  'cyan-a100': '#84ffff',
+  'cyan-a200': '#18ffff',
+  'cyan-a400': '#00e5ff',
+  'cyan-a700': '#00b8d4',
+  'teal-50': '#e0f2f1',
+  'teal-100': '#b2dfdb',
+  'teal-200': '#80cbc4',
+  'teal-300': '#4db6ac',
+  'teal-400': '#26a69a',
+  'teal-500': '#009688',
+  'teal-600': '#00897b',
+  'teal-700': '#00796b',
+  'teal-800': '#00695c',
+  'teal-900': '#004d40',
+  'teal-a100': '#a7ffeb',
+  'teal-a200': '#64ffda',
+  'teal-a400': '#1de9b6',
+  'teal-a700': '#00bfa5',
+  'green-50': '#e8f5e9',
+  'green-100': '#c8e6c9',
+  'green-200': '#a5d6a7',
+  'green-300': '#81c784',
+  'green-400': '#66bb6a',
+  'green-500': '#4caf50',
+  'green-600': '#43a047',
+  'green-700': '#388e3c',
+  'green-800': '#2e7d32',
+  'green-900': '#1b5e20',
+  'green-a100': '#b9f6ca',
+  'green-a200': '#69f0ae',
+  'green-a400': '#00e676',
+  'green-a700': '#00c853',
+  'light-green-50': '#f1f8e9',
+  'light-green-100': '#dcedc8',
+  'light-green-200': '#c5e1a5',
+  'light-green-300': '#aed581',
+  'light-green-400': '#9ccc65',
+  'light-green-500': '#8bc34a',
+  'light-green-600': '#7cb342',
+  'light-green-700': '#689f38',
+  'light-green-800': '#558b2f',
+  'light-green-900': '#33691e',
+  'light-green-a100': '#ccff90',
+  'light-green-a200': '#b2ff59',
+  'light-green-a400': '#76ff03',
+  'light-green-a700': '#64dd17',
+  'lime-50': '#f9fbe7',
+  'lime-100': '#f0f4c3',
+  'lime-200': '#e6ee9c',
+  'lime-300': '#dce775',
+  'lime-400': '#d4e157',
+  'lime-500': '#cddc39',
+  'lime-600': '#c0ca33',
+  'lime-700': '#afb42b',
+  'lime-800': '#9e9d24',
+  'lime-900': '#827717',
+  'lime-a100': '#f4ff81',
+  'lime-a200': '#eeff41',
+  'lime-a400': '#c6ff00',
+  'lime-a700': '#aeea00',
+  'yellow-50': '#fffde7',
+  'yellow-100': '#fff9c4',
+  'yellow-200': '#fff59d',
+  'yellow-300': '#fff176',
+  'yellow-400': '#ffee58',
+  'yellow-500': '#ffeb3b',
+  'yellow-600': '#fdd835',
+  'yellow-700': '#fbc02d',
+  'yellow-800': '#f9a825',
+  'yellow-900': '#f57f17',
+  'yellow-a100': '#ffff8d',
+  'yellow-a200': '#ffff00',
+  'yellow-a400': '#ffea00',
+  'yellow-a700': '#ffd600',
+  'amber-50': '#fff8e1',
+  'amber-100': '#ffecb3',
+  'amber-200': '#ffe082',
+  'amber-300': '#ffd54f',
+  'amber-400': '#ffca28',
+  'amber-500': '#ffc107',
+  'amber-600': '#ffb300',
+  'amber-700': '#ffa000',
+  'amber-800': '#ff8f00',
+  'amber-900': '#ff6f00',
+  'amber-a100': '#ffe57f',
+  'amber-a200': '#ffd740',
+  'amber-a400': '#ffc400',
+  'amber-a700': '#ffab00',
+  'orange-50': '#fff3e0',
+  'orange-100': '#ffe0b2',
+  'orange-200': '#ffcc80',
+  'orange-300': '#ffb74d',
+  'orange-400': '#ffa726',
+  'orange-500': '#ff9800',
+  'orange-600': '#fb8c00',
+  'orange-700': '#f57c00',
+  'orange-800': '#ef6c00',
+  'orange-900': '#e65100',
+  'orange-a100': '#ffd180',
+  'orange-a200': '#ffab40',
+  'orange-a400': '#ff9100',
+  'orange-a700': '#ff6d00',
+  'deep-orange-50': '#fbe9e7',
+  'deep-orange-100': '#ffccbc',
+  'deep-orange-200': '#ffab91',
+  'deep-orange-300': '#ff8a65',
+  'deep-orange-400': '#ff7043',
+  'deep-orange-500': '#ff5722',
+  'deep-orange-600': '#f4511e',
+  'deep-orange-700': '#e64a19',
+  'deep-orange-800': '#d84315',
+  'deep-orange-900': '#bf360c',
+  'deep-orange-a100': '#ff9e80',
+  'deep-orange-a200': '#ff6e40',
+  'deep-orange-a400': '#ff3d00',
+  'deep-orange-a700': '#dd2c00',
+  'brown-50': '#efebe9',
+  'brown-100': '#d7ccc8',
+  'brown-200': '#bcaaa4',
+  'brown-300': '#a1887f',
+  'brown-400': '#8d6e63',
+  'brown-500': '#795548',
+  'brown-600': '#6d4c41',
+  'brown-700': '#5d4037',
+  'brown-800': '#4e342e',
+  'brown-900': '#3e2723',
+  'grey-50': '#fafafa',
+  'grey-100': '#f5f5f5',
+  'grey-200': '#eeeeee',
+  'grey-300': '#e0e0e0',
+  'grey-400': '#bdbdbd',
+  'grey-500': '#9e9e9e',
+  'grey-600': '#757575',
+  'grey-700': '#616161',
+  'grey-800': '#424242',
+  'grey-900': '#212121',
+  'blue-grey-50': '#eceff1',
+  'blue-grey-100': '#cfd8dc',
+  'blue-grey-200': '#b0bec5',
+  'blue-grey-300': '#90a4ae',
+  'blue-grey-400': '#78909c',
+  'blue-grey-500': '#607d8b',
+  'blue-grey-600': '#546e7a',
+  'blue-grey-700': '#455a64',
+  'blue-grey-800': '#37474f',
+  'blue-grey-900': '#263238',
 };
 
 const GREYS = {
-  'grey-100' : '#f9fafb',
-  'grey-200' : '#f2f3f5',
-  'grey-300' : '#e6eaf0',
-  'grey-400' : '#d3d9e3',
-  'grey-500' : '#b9c2d0',
-  'grey-600' : '#7c8695',
-  'grey-700' : '#72777a',
-  'grey-800' : '#565a5c',
-  'grey-900' : '#313435',
+  'grey-100': '#f9fafb',
+  'grey-200': '#f2f3f5',
+  'grey-300': '#e6eaf0',
+  'grey-400': '#d3d9e3',
+  'grey-500': '#b9c2d0',
+  'grey-600': '#7c8695',
+  'grey-700': '#72777a',
+  'grey-800': '#565a5c',
+  'grey-900': '#313435',
 };
 
-export {
-  COLORS,
-  GREYS,
-};
+export { COLORS, GREYS };

src/assets/scripts/datatable/index.js

@@ -3,4 +3,4 @@ import 'datatables';
 
 export default (function () {
   $('#dataTable').DataTable();
-}());
+})();

src/assets/scripts/datepicker/index.js

@@ -5,4 +5,4 @@ import 'bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
 export default (function () {
   $('.start-date').datepicker();
   $('.end-date').datepicker();
-}())
+})();

src/assets/scripts/email/index.js

@@ -1,13 +1,13 @@
 import * as $ from 'jquery';
 
 export default (function () {
-  $('.email-side-toggle').on('click', e => {
+  $('.email-side-toggle').on('click', (e) => {
     $('.email-app').toggleClass('side-active');
     e.preventDefault();
   });
 
-  $('.email-list-item, .back-to-mailbox').on('click', e => {
+  $('.email-list-item, .back-to-mailbox').on('click', (e) => {
     $('.email-content').toggleClass('open');
     e.preventDefault();
   });
-}())
+})();

src/assets/scripts/fullcalendar/index.js

@@ -4,20 +4,20 @@ import dayGridPlugin from '@fullcalendar/daygrid';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import listPlugin from '@fullcalendar/list';
 
-document.addEventListener('DOMContentLoaded', function() {
-  var calendarEl = document.getElementById('calendar');
+document.addEventListener('DOMContentLoaded', function () {
+  const calendarEl = document.getElementById('calendar');
 
   // element found in dom ?
   if (calendarEl == null) {
-    return
+    return;
   }
 
-  var calendar = new Calendar(calendarEl, {
-    plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
+  const calendar = new Calendar(calendarEl, {
+    plugins: [interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin],
     headerToolbar: {
       left: 'prev,next today',
       center: 'title',
-      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
+      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek',
     },
     initialDate: '2018-01-12',
     navLinks: true, // can click day/week names to navigate views
@@ -31,54 +31,54 @@ document.addEventListener('DOMContentLoaded', function() {
       {
         title: 'Long Event',
         start: '2018-01-07',
-        end: '2018-01-10'
+        end: '2018-01-10',
       },
       {
         groupId: 999,
         title: 'Repeating Event',
-        start: '2018-01-09T16:00:00'
+        start: '2018-01-09T16:00:00',
       },
       {
         groupId: 999,
         title: 'Repeating Event',
-        start: '2018-01-16T16:00:00'
+        start: '2018-01-16T16:00:00',
       },
       {
         title: 'Conference',
         start: '2018-01-11',
-        end: '2018-01-13'
+        end: '2018-01-13',
       },
       {
         title: 'Meeting',
         start: '2018-01-12T10:30:00',
-        end: '2018-01-12T12:30:00'
+        end: '2018-01-12T12:30:00',
       },
       {
         title: 'Lunch',
-        start: '2018-01-12T12:00:00'
+        start: '2018-01-12T12:00:00',
       },
       {
         title: 'Meeting',
-        start: '2018-01-12T14:30:00'
+        start: '2018-01-12T14:30:00',
       },
       {
         title: 'Happy Hour',
-        start: '2018-01-12T17:30:00'
+        start: '2018-01-12T17:30:00',
       },
       {
         title: 'Dinner',
-        start: '2018-01-12T20:00:00'
+        start: '2018-01-12T20:00:00',
       },
       {
         title: 'Birthday Party',
-        start: '2018-01-13T07:00:00'
+        start: '2018-01-13T07:00:00',
       },
       {
         title: 'Click for Google',
         url: 'http://google.com/',
-        start: '2018-01-28'
-      }
-    ]
+        start: '2018-01-28',
+      },
+    ],
   });
 
   calendar.render();

src/assets/scripts/googleMaps/index.js

@@ -1,78 +1,85 @@
 import * as $ from 'jquery';
-import loadGoogleMapsAPI  from 'load-google-maps-api';
+import loadGoogleMapsAPI from 'load-google-maps-api';
 
 export default (function () {
   if ($('#google-map').length > 0) {
     loadGoogleMapsAPI({
       key: 'AIzaSyDW8td30_gj6sGXjiMU0ALeMu1SDEwUnEA',
     }).then(() => {
-      const latitude  = 26.8206;
+      const latitude = 26.8206;
       const longitude = 30.8025;
-      const mapZoom   = 5;
-      const { google }    = window;
+      const mapZoom = 5;
+      const { google } = window;
 
       const mapOptions = {
-        center    : new google.maps.LatLng(latitude, longitude),
-        zoom      : mapZoom,
-        mapTypeId : google.maps.MapTypeId.ROADMAP,
-        styles: [{
-          'featureType': 'landscape',
-          'stylers': [
-            { 'hue'        : '#FFBB00' },
-            { 'saturation' : 43.400000000000006 },
-            { 'lightness'  : 37.599999999999994 },
-            { 'gamma'      : 1 },
-          ],
-        }, {
-          'featureType': 'road.highway',
-          'stylers': [
-            { 'hue'        : '#FFC200' },
-            { 'saturation' : -61.8 },
-            { 'lightness'  : 45.599999999999994 },
-            { 'gamma'      : 1 },
-          ],
-        }, {
-          'featureType': 'road.arterial',
-          'stylers': [
-            { 'hue'        : '#FF0300' },
-            { 'saturation' : -100 },
-            { 'lightness'  : 51.19999999999999 },
-            { 'gamma'      : 1 },
-          ],
-        }, {
-          'featureType': 'road.local',
-          'stylers': [
-            { 'hue'        : '#FF0300' },
-            { 'saturation' : -100 },
-            { 'lightness'  : 52 },
-            { 'gamma'      : 1 },
-          ],
-        }, {
-          'featureType': 'water',
-          'stylers': [
-            { 'hue'        : '#0078FF' },
-            { 'saturation' : -13.200000000000003 },
-            { 'lightness'  : 2.4000000000000057 },
-            { 'gamma'      : 1 },
-          ],
-        }, {
-          'featureType': 'poi',
-          'stylers': [
-            { 'hue'        : '#00FF6A' },
-            { 'saturation' : -1.0989010989011234 },
-            { 'lightness'  : 11.200000000000017 },
-            { 'gamma'      : 1 },
-          ],
-        }],
+        center: new google.maps.LatLng(latitude, longitude),
+        zoom: mapZoom,
+        mapTypeId: google.maps.MapTypeId.ROADMAP,
+        styles: [
+          {
+            'featureType': 'landscape',
+            'stylers': [
+              { 'hue': '#FFBB00' },
+              { 'saturation': 43.400000000000006 },
+              { 'lightness': 37.599999999999994 },
+              { 'gamma': 1 },
+            ],
+          },
+          {
+            'featureType': 'road.highway',
+            'stylers': [
+              { 'hue': '#FFC200' },
+              { 'saturation': -61.8 },
+              { 'lightness': 45.599999999999994 },
+              { 'gamma': 1 },
+            ],
+          },
+          {
+            'featureType': 'road.arterial',
+            'stylers': [
+              { 'hue': '#FF0300' },
+              { 'saturation': -100 },
+              { 'lightness': 51.19999999999999 },
+              { 'gamma': 1 },
+            ],
+          },
+          {
+            'featureType': 'road.local',
+            'stylers': [
+              { 'hue': '#FF0300' },
+              { 'saturation': -100 },
+              { 'lightness': 52 },
+              { 'gamma': 1 },
+            ],
+          },
+          {
+            'featureType': 'water',
+            'stylers': [
+              { 'hue': '#0078FF' },
+              { 'saturation': -13.200000000000003 },
+              { 'lightness': 2.4000000000000057 },
+              { 'gamma': 1 },
+            ],
+          },
+          {
+            'featureType': 'poi',
+            'stylers': [
+              { 'hue': '#00FF6A' },
+              { 'saturation': -1.0989010989011234 },
+              { 'lightness': 11.200000000000017 },
+              { 'gamma': 1 },
+            ],
+          },
+        ],
       };
 
       const map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
 
       new google.maps.Marker({
         map,
-        position : new google.maps.LatLng(latitude, longitude),
-        visible  : true,
+        position: new google.maps.LatLng(latitude, longitude),
+        visible: true,
       });
     });
   }
-}())
+})();

src/assets/scripts/index.js

@@ -1,4 +1,5 @@
 // import "@popperjs/core";
+// eslint-disable-next-line no-unused-vars
 import bootstrap from 'bootstrap';
 
 import '../styles/index.scss';

src/assets/scripts/masonry/index.js

@@ -11,4 +11,4 @@ export default (function () {
       });
     }
   });
-}());
+})();

src/assets/scripts/popover/index.js

@@ -1,22 +1,24 @@
 // import * as $ from 'jquery';
-import * as bootstrap from 'bootstrap'
+import * as bootstrap from 'bootstrap';
 
 export default (function () {
   // ------------------------------------------------------
   // @Popover
   // ------------------------------------------------------
 
-  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-  return new bootstrap.Popover(popoverTriggerEl)
-})
+  const popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
+  // eslint-disable-next-line no-unused-vars
+  const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+    return new bootstrap.Popover(popoverTriggerEl);
+  });
 
   // ------------------------------------------------------
   // @Tooltips
   // ------------------------------------------------------
 
-  var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
-var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-  return new bootstrap.Tooltip(tooltipTriggerEl)
-})
-}());
+  const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+  // eslint-disable-next-line no-unused-vars
+  const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+})();

src/assets/scripts/scrollbar/index.js

@@ -8,4 +8,4 @@ export default (function () {
       new PerfectScrollbar(el);
     });
   }
-}());
+})();

src/assets/scripts/search/index.js

@@ -1,9 +1,9 @@
 import * as $ from 'jquery';
 
 export default (function () {
-  $('.search-toggle').on('click', e => {
+  $('.search-toggle').on('click', (e) => {
     $('.search-box, .search-input').toggleClass('active');
     $('.search-input input').focus();
     e.preventDefault();
   });
-}());
+})();

src/assets/scripts/sidebar/index.js

@@ -13,26 +13,9 @@ export default (function () {
           $this.parent().removeClass('open');
         });
     } else {
-      $this
-        .parent()
-        .parent()
-        .children('li.open')
-        .children('.dropdown-menu')
-        .slideUp(200);
-
-      $this
-        .parent()
-        .parent()
-        .children('li.open')
-        .children('a')
-        .removeClass('open');
-
-      $this
-        .parent()
-        .parent()
-        .children('li.open')
-        .removeClass('open');
-
+      $this.parent().parent().children('li.open').children('.dropdown-menu').slideUp(200);
+      $this.parent().parent().children('li.open').children('a').removeClass('open');
+      $this.parent().parent().children('li.open').removeClass('open');
       $this
         .parent()
         .children('.dropdown-menu')
@@ -52,12 +35,12 @@ export default (function () {
     .filter(function () {
       const href = $(this).attr('href');
       const pattern = href[0] === '/' ? href.substr(1) : href;
-      return pattern === (window.location.pathname).substr(1);
+      return pattern === window.location.pathname.substr(1);
     })
     .addClass('active');
 
   // ٍSidebar Toggle
-  $('.sidebar-toggle').on('click', e => {
+  $('.sidebar-toggle').on('click', (e) => {
     $('.app').toggleClass('is-collapsed');
     e.preventDefault();
   });
@@ -67,10 +50,10 @@ export default (function () {
    * then trigger window resize event in order to recalculate
    * masonry layout widths and gutters.
    */
-  $('#sidebar-toggle').click(e => {
+  $('#sidebar-toggle').click((e) => {
     e.preventDefault();
     setTimeout(() => {
       window.dispatchEvent(window.EVENT);
     }, 300);
   });
-}());
+})();

src/assets/scripts/skycons/index.js

@@ -4,7 +4,7 @@ const Skycons = SkyconsInit(window);
 
 export default (function () {
   const icons = new Skycons({ 'color': '#ff6849' });
-  const list  = [
+  const list = [
     'clear-day',
     'clear-night',
     'partly-cloudy-day',
@@ -19,9 +19,8 @@ export default (function () {
   let i = list.length;
 
   while (i--) {
-    const
-      weatherType = list[i],
-      elements    = document.getElementsByClassName(weatherType);
+    const weatherType = list[i],
+      elements = document.getElementsByClassName(weatherType);
     let j = elements.length;
 
     while (j--) {
@@ -30,4 +29,4 @@ export default (function () {
   }
 
   icons.play();
-}());
+})();

src/assets/scripts/utils/index.js

@@ -12,7 +12,6 @@ export default (function () {
   window.EVENT = EVENT;
   EVENT.initUIEvent('resize', true, false, window, 0);
 
-
   window.addEventListener('load', () => {
     /**
      * Trigger window resize event after page load
@@ -40,4 +39,4 @@ export default (function () {
   document.addEventListener('click', () => {
     window.dispatchEvent(window.EVENT);
   });
-}());
+})();

src/assets/scripts/vectorMaps/index.js

@@ -31,9 +31,9 @@ export default (function () {
         borderOpacity: 0.25,
         borderWidth: 0,
         color: '#e6e6e6',
-        regionStyle : {
-          initial : {
-            fill : '#e4ecef',
+        regionStyle: {
+          initial: {
+            fill: '#e4ecef',
           },
         },
 
@@ -41,41 +41,49 @@ export default (function () {
           initial: {
             r: 7,
             'fill': '#fff',
-            'fill-opacity':1,
+            'fill-opacity': 1,
             'stroke': '#000',
-            'stroke-width' : 2,
+            'stroke-width': 2,
             'stroke-opacity': 0.4,
           },
         },
 
-        markers : [{
-          latLng : [21.00, 78.00],
-          name : 'INDIA : 350',
-        }, {
-          latLng : [-33.00, 151.00],
-          name : 'Australia : 250',
-        }, {
-          latLng : [36.77, -119.41],
-          name : 'USA : 250',
-        }, {
-          latLng : [55.37, -3.41],
-          name : 'UK   : 250',
-        }, {
-          latLng : [25.20, 55.27],
-          name : 'UAE : 250',
-        }],
+        markers: [
+          {
+            latLng: [21.0, 78.0],
+            name: 'INDIA : 350',
+          },
+          {
+            latLng: [-33.0, 151.0],
+            name: 'Australia : 250',
+          },
+          {
+            latLng: [36.77, -119.41],
+            name: 'USA : 250',
+          },
+          {
+            latLng: [55.37, -3.41],
+            name: 'UK   : 250',
+          },
+          {
+            latLng: [25.2, 55.27],
+            name: 'UAE : 250',
+          },
+        ],
         series: {
-          regions: [{
-            values: {
-              'US': 298,
-              'SA': 200,
-              'AU': 760,
-              'IN': 200,
-              'GB': 120,
+          regions: [
+            {
+              values: {
+                'US': 298,
+                'SA': 200,
+                'AU': 760,
+                'IN': 200,
+                'GB': 120,
+              },
+              scale: ['#03a9f3', '#02a7f1'],
+              normalizeFunction: 'polynomial',
             },
-            scale: ['#03a9f3', '#02a7f1'],
-            normalizeFunction: 'polynomial',
-          }],
+          ],
         },
         hoverOpacity: null,
         normalizeFunction: 'linear',

src/assets/styles/spec/components/forms.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable no-descending-specificity */
 .checkbox label {
   display: inline-block;
   vertical-align: middle;
@@ -19,8 +20,6 @@
   border: 1px solid $grey-300;
   border-radius: 3px;
   background-color: $md-white;
-  -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-  -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
   transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
 }
 
@@ -51,7 +50,7 @@
 }
 
 .checkbox input[type="checkbox"]:checked + label::after {
-  font-family: 'FontAwesome';
+  font-family: FontAwesome, serif;
   content: "\f00c";
   font-size: 13px;
 }
@@ -137,11 +136,9 @@
   height: 17px;
   left: 0;
   margin-left: -20px;
-  border: 1px solid #cccccc;
+  border: 1px solid #ccc;
   border-radius: 50%;
   background-color: #fff;
-  -webkit-transition: border 0.15s ease-in-out;
-  -o-transition: border 0.15s ease-in-out;
   transition: border 0.15s ease-in-out;
 }
 
@@ -155,14 +152,11 @@
   top: 3px;
   margin-left: -20px;
   border-radius: 50%;
-  background-color: #555555;
-  -webkit-transform: scale(0, 0);
-  -ms-transform: scale(0, 0);
-  -o-transform: scale(0, 0);
+  background-color: #555;
   transform: scale(0, 0);
-  -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-  -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
-  -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
+  transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
   transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
 }
 
@@ -178,9 +172,6 @@
 }
 
 .radio input[type="radio"]:checked + label::after {
-  -webkit-transform: scale(1, 1);
-  -ms-transform: scale(1, 1);
-  -o-transform: scale(1, 1);
   transform: scale(1, 1);
 }
 
@@ -255,3 +246,4 @@
 .radio-success input[type="radio"]:checked + label::after {
   background-color: #5cb85c;
 }
+/* stylelint-enable no-descending-specificity */

src/assets/styles/spec/components/index.scss

@@ -4,6 +4,5 @@
 @import 'progressBar';
 @import 'easyPieChart';
 @import 'forms';
-@import 'masonry';
 @import 'loader';
 @import 'footer';

src/assets/styles/spec/components/loader.scss

@@ -19,24 +19,24 @@
   left: calc(50% - 20px);
   background-color: #333;
   border-radius: 100%;
-  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
   animation: sk-scaleout 1.0s infinite ease-in-out;
 }
 
-@-webkit-keyframes sk-scaleout {
-  0% { -webkit-transform: scale(0) }
+@keyframes sk-scaleout {
+  0% { transform: scale(0) }
+
   100% {
-    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
     opacity: 0;
   }
 }
 
 @keyframes sk-scaleout {
   0% {
-    -webkit-transform: scale(0);
     transform: scale(0);
-  } 100% {
-    -webkit-transform: scale(1.0);
+  }
+
+ 100% {
     transform: scale(1.0);
     opacity: 0;
   }

src/assets/styles/spec/components/masonry.scss

@@ -1 +0,0 @@
-

src/assets/styles/spec/components/sidebar.scss

@@ -11,7 +11,7 @@
 // ---------------------------------------------------------
 // @Sidebar
 // ---------------------------------------------------------
-
+/* stylelint-disable no-descending-specificity */
 .sidebar {
   background-color: $default-white;
   bottom: 0;
@@ -175,6 +175,7 @@
 
 .sidebar-menu {
   @include clearfix;
+
   border-right: 1px solid $border-color;
   height: calc(100vh - #{$header-height});
   list-style: none;
@@ -446,3 +447,4 @@
     }
   }
 }
+/* stylelint-enable no-descending-specificity */

src/assets/styles/spec/components/topbar.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // ---------------------------------------------------------
 // @TOC
 
@@ -91,11 +93,12 @@
         }
       }
     }
-
+    /* stylelint-disable no-descending-specificity */
     .dropdown-menu {
       // display: block;
       margin: 0;
       transform-origin: top right;
+
       // transform: scale(0, 0);
       transition: transform 0.15s ease-out;
 
@@ -141,6 +144,7 @@
         }
       }
     }
+    /* stylelint-enable no-descending-specificity */
   }
 
   .search-box {
@@ -181,7 +185,7 @@
       }
 
       @include placeholder {
-        color: lighten($default-text-color, 20%);
+        color: color.adjust($default-text-color, $lightness: 20%);
         font-style: italic;
       }
     }

src/assets/styles/spec/generic/base.scss

@@ -1,8 +1,12 @@
-html, html a, body {
+@use "sass:color";
+
+/* stylelint-disable */
+html, body {
   -webkit-font-smoothing: antialiased;
 }
 
 a {
+  -webkit-font-smoothing: antialiased;
   transition: all 0.3s ease-in-out;
   text-decoration: none;
 }
@@ -30,9 +34,10 @@ h6 {
     font-family: $font-secondary;
   }
 
+
   small {
     font-weight: 300;
-    color: lighten($default-dark, 5%);
+    color: color.adjust($default-dark, $lightness: 5%);
   }
 }
 
@@ -55,7 +60,7 @@ a {
   &:hover,
   &:focus {
     text-decoration: none;
-    color: darken($default-info, 10%);
+    color: color.adjust($default-info, $lightness: -10%);
   }
 
   &:focus {
@@ -81,17 +86,19 @@ hr {
 
 
 a.btn {
-    color:#fff;
-  }
+  color: #fff;
+}
 
 a.btn:hover {
-  color:#fff;
+  color: #fff;
 }
 
 .btn-color {
-  color:#fff;
+  color: #fff;
 }
 
 .btn-color:hover {
-  color:#fff;
+  color: #fff;
 }
+
+/* stylelint-enable */

src/assets/styles/spec/screens/email.scss

@@ -1,3 +1,4 @@
+
 .email-app {
   .email-side-nav {
     background: $default-white;
@@ -56,6 +57,7 @@
       position: relative;
       padding: 0;
       background-color: $default-white;
+
       // min-height: calc(100vh - #{$header-height});
 
       &.no-inbox-view {
@@ -80,6 +82,7 @@
 
       .email-compose {
         position: relative;
+
       .email-compose-body {
         padding: 30px 20px;
 

src/assets/styles/spec/settings/baseColors.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------
@@ -25,7 +27,6 @@ $grey-600             : #7c8695;
 $grey-700             : #72777a;
 $grey-800             : #565a5c;
 $grey-900             : #313435;
-
 $grey-colors-alt: (
   grey-100 : #f9fafb,
   grey-200 : #f2f3f5,
@@ -71,11 +72,11 @@ $default-white        : #fff;
 // @Inverted Colors
 // ---------------------------------------------------------
 
-$inverse-danger       : lighten($default-danger, 35%);
-$inverse-info         : lighten($default-info, 45%);
-$inverse-primary      : lighten($default-primary, 30%);
-$inverse-success      : lighten($default-success, 45%);
-$inverse-warning      : lighten($default-warning, 45%);
+$inverse-danger       : color.adjust($default-danger, $lightness: 35%);
+$inverse-info         : color.adjust($default-info, $lightness: 45%);
+$inverse-primary      : color.adjust($default-primary, $lightness: 30%);
+$inverse-success      : color.adjust($default-success, $lightness: 45%);
+$inverse-warning      : color.adjust($default-warning, $lightness: 45%);
 
 // ---------------------------------------------------------
 // @Others
@@ -86,7 +87,7 @@ $collapsed-size       : 70px;
 $header-height        : 65px;
 $offscreen-size       : 280px;
 $side-nav-dark        : #313644;
-$side-nav-dark-border : rgba(120, 130, 140, 0.3);
+$side-nav-dark-border : rgb(120 130 140 / 30%);
 $side-nav-dark-font   : #99abb4;
 
 // ---------------------------------------------------------
@@ -94,7 +95,7 @@ $side-nav-dark-font   : #99abb4;
 // ---------------------------------------------------------
 
 $theme-danger         : #f53f61;
-$theme-dark           : lighten($side-nav-dark, 10%);
+$theme-dark           : color.adjust($side-nav-dark, $lightness: 10%);
 $theme-info           : $default-info;
 $theme-primary        : $default-primary;
-$theme-success        : desaturate($default-success, 5%);
+$theme-success        : color.adjust($default-success, $saturation: -5%);

src/assets/styles/spec/settings/borders.scss

@@ -3,4 +3,4 @@
 // ---------------------------------------------------------
 
 $border-width: 1px;
-$border-color: rgba(0, 0, 0, 0.0625);
+$border-color: rgb(0 0 0 / 6.25%);

src/assets/styles/spec/settings/breakpoints.scss

@@ -7,7 +7,6 @@ $breakpoint-lg : 1200px;
 $breakpoint-md : 992px;
 $breakpoint-sm : 768px;
 $breakpoint-xs : 0;
-
 $breakpoints: (
   "xl\\+" "screen and (min-width: #{$breakpoint-xl})",
   "lg\\+" "screen and (min-width: #{$breakpoint-lg})",

src/assets/styles/spec/settings/fonts.scss

@@ -1,4 +1,4 @@
 $font-primary:
-  Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  roboto, -apple-system, system-ui, blinkmacsystemfont, "Segoe UI", "Helvetica Neue", arial, sans-serif;
 $font-secondary: $font-primary;
 $font-size-base:              0.875rem;

src/assets/styles/spec/settings/index.scss

@@ -1,6 +1,6 @@
 @import 'breakpoints';
 @import 'fonts';
-@import 'brand-colors/dist/latest/scss/brand-colors.latest.scss';
+@import 'brand-colors/dist/latest/scss/brand-colors.latest';
 @import 'materialColors';
 @import 'baseColors';
 @import 'borders';

src/assets/styles/spec/settings/materialColors.scss

@@ -12,7 +12,6 @@ $md-red-a100              : #ff8a80;
 $md-red-a200              : #ff5252;
 $md-red-a400              : #ff1744;
 $md-red-a700              : #d50000;
-
 $md-pink-50               : #fce4ec;
 $md-pink-100              : #f8bbd0;
 $md-pink-200              : #f48fb1;
@@ -27,7 +26,6 @@ $md-pink-a100             : #ff80ab;
 $md-pink-a200             : #ff4081;
 $md-pink-a400             : #f50057;
 $md-pink-a700             : #c51162;
-
 $md-purple-50             : #f3e5f5;
 $md-purple-100            : #e1bee7;
 $md-purple-200            : #ce93d8;
@@ -41,8 +39,7 @@ $md-purple-900            : #4a148c;
 $md-purple-a100           : #ea80fc;
 $md-purple-a200           : #e040fb;
 $md-purple-a400           : #d500f9;
-$md-purple-a700           : #aa00ff;
-
+$md-purple-a700           : #a0f;
 $md-deep-purple-50        : #ede7f6;
 $md-deep-purple-100       : #d1c4e9;
 $md-deep-purple-200       : #b39ddb;
@@ -57,7 +54,6 @@ $md-deep-purple-a100      : #b388ff;
 $md-deep-purple-a200      : #7c4dff;
 $md-deep-purple-a400      : #651fff;
 $md-deep-purple-a700      : #6200ea;
-
 $md-indigo-50             : #e8eaf6;
 $md-indigo-100            : #c5cae9;
 $md-indigo-200            : #9fa8da;
@@ -72,7 +68,6 @@ $md-indigo-a100           : #8c9eff;
 $md-indigo-a200           : #536dfe;
 $md-indigo-a400           : #3d5afe;
 $md-indigo-a700           : #304ffe;
-
 $md-blue-50               : #e3f2fd;
 $md-blue-100              : #bbdefb;
 $md-blue-200              : #90caf9;
@@ -87,7 +82,6 @@ $md-blue-a100             : #82b1ff;
 $md-blue-a200             : #448aff;
 $md-blue-a400             : #2979ff;
 $md-blue-a700             : #2962ff;
-
 $md-light-blue-50         : #e1f5fe;
 $md-light-blue-100        : #b3e5fc;
 $md-light-blue-200        : #81d4fa;
@@ -102,7 +96,6 @@ $md-light-blue-a100       : #80d8ff;
 $md-light-blue-a200       : #40c4ff;
 $md-light-blue-a400       : #00b0ff;
 $md-light-blue-a700       : #0091ea;
-
 $md-cyan-50               : #e0f7fa;
 $md-cyan-100              : #b2ebf2;
 $md-cyan-200              : #80deea;
@@ -117,7 +110,6 @@ $md-cyan-a100             : #84ffff;
 $md-cyan-a200             : #18ffff;
 $md-cyan-a400             : #00e5ff;
 $md-cyan-a700             : #00b8d4;
-
 $md-teal-50               : #e0f2f1;
 $md-teal-100              : #b2dfdb;
 $md-teal-200              : #80cbc4;
@@ -132,7 +124,6 @@ $md-teal-a100             : #a7ffeb;
 $md-teal-a200             : #64ffda;
 $md-teal-a400             : #1de9b6;
 $md-teal-a700             : #00bfa5;
-
 $md-green-50              : #e8f5e9;
 $md-green-100             : #c8e6c9;
 $md-green-200             : #a5d6a7;
@@ -147,7 +138,6 @@ $md-green-a100            : #b9f6ca;
 $md-green-a200            : #69f0ae;
 $md-green-a400            : #00e676;
 $md-green-a700            : #00c853;
-
 $md-light-green-50        : #f1f8e9;
 $md-light-green-100       : #dcedc8;
 $md-light-green-200       : #c5e1a5;
@@ -162,7 +152,6 @@ $md-light-green-a100      : #ccff90;
 $md-light-green-a200      : #b2ff59;
 $md-light-green-a400      : #76ff03;
 $md-light-green-a700      : #64dd17;
-
 $md-lime-50               : #f9fbe7;
 $md-lime-100              : #f0f4c3;
 $md-lime-200              : #e6ee9c;
@@ -177,7 +166,6 @@ $md-lime-a100             : #f4ff81;
 $md-lime-a200             : #eeff41;
 $md-lime-a400             : #c6ff00;
 $md-lime-a700             : #aeea00;
-
 $md-yellow-50             : #fffde7;
 $md-yellow-100            : #fff9c4;
 $md-yellow-200            : #fff59d;
@@ -189,10 +177,9 @@ $md-yellow-700            : #fbc02d;
 $md-yellow-800            : #f9a825;
 $md-yellow-900            : #f57f17;
 $md-yellow-a100           : #ffff8d;
-$md-yellow-a200           : #ffff00;
+$md-yellow-a200           : #ff0;
 $md-yellow-a400           : #ffea00;
 $md-yellow-a700           : #ffd600;
-
 $md-amber-50              : #fff8e1;
 $md-amber-100             : #ffecb3;
 $md-amber-200             : #ffe082;
@@ -207,7 +194,6 @@ $md-amber-a100            : #ffe57f;
 $md-amber-a200            : #ffd740;
 $md-amber-a400            : #ffc400;
 $md-amber-a700            : #ffab00;
-
 $md-orange-50             : #fff3e0;
 $md-orange-100            : #ffe0b2;
 $md-orange-200            : #ffcc80;
@@ -222,7 +208,6 @@ $md-orange-a100           : #ffd180;
 $md-orange-a200           : #ffab40;
 $md-orange-a400           : #ff9100;
 $md-orange-a700           : #ff6d00;
-
 $md-deep-orange-50        : #fbe9e7;
 $md-deep-orange-100       : #ffccbc;
 $md-deep-orange-200       : #ffab91;
@@ -237,7 +222,6 @@ $md-deep-orange-a100      : #ff9e80;
 $md-deep-orange-a200      : #ff6e40;
 $md-deep-orange-a400      : #ff3d00;
 $md-deep-orange-a700      : #dd2c00;
-
 $md-brown-50              : #efebe9;
 $md-brown-100             : #d7ccc8;
 $md-brown-200             : #bcaaa4;
@@ -248,10 +232,9 @@ $md-brown-600             : #6d4c41;
 $md-brown-700             : #5d4037;
 $md-brown-800             : #4e342e;
 $md-brown-900             : #3e2723;
-
 $md-grey-50               : #fafafa;
 $md-grey-100              : #f5f5f5;
-$md-grey-200              : #eeeeee;
+$md-grey-200              : #eee;
 $md-grey-300              : #e0e0e0;
 $md-grey-400              : #bdbdbd;
 $md-grey-500              : #9e9e9e;
@@ -259,7 +242,6 @@ $md-grey-600              : #757575;
 $md-grey-700              : #616161;
 $md-grey-800              : #424242;
 $md-grey-900              : #212121;
-
 $md-blue-grey-50          : #eceff1;
 $md-blue-grey-100         : #cfd8dc;
 $md-blue-grey-200         : #b0bec5;
@@ -270,29 +252,22 @@ $md-blue-grey-600         : #546e7a;
 $md-blue-grey-700         : #455a64;
 $md-blue-grey-800         : #37474f;
 $md-blue-grey-900         : #263238;
-
-$md-dark-text-primary     : rgba(0, 0, 0, 0.87);
-$md-dark-text-secondary   : rgba(0, 0, 0, 0.54);
-$md-dark-text-disabled    : rgba(0, 0, 0, 0.38);
-$md-dark-text-dividers    : rgba(0, 0, 0, 0.12);
-
-$md-light-text-primary    : rgba(255, 255, 255, 1);
-$md-light-text-secondary  : rgba(255, 255, 255, 0.7);
-$md-light-text-disabled   : rgba(255, 255, 255, 0.5);
-$md-light-text-dividers   : rgba(255, 255, 255, 0.12);
-
-$md-dark-icons-active     : rgba(0, 0, 0, 0.54);
-$md-dark-icons-inactive   : rgba(0, 0, 0, 0.38);
-
-$md-light-icons-active    : rgba(255, 255, 255, 1);
-$md-light-icons-inactive  : rgba(255, 255, 255, 0.5);
-
-$md-white                 : #ffffff;
-
-$md-black                 : #000000;
-
+$md-dark-text-primary     : rgb(0 0 0 / 87%);
+$md-dark-text-secondary   : rgb(0 0 0 / 54%);
+$md-dark-text-disabled    : rgb(0 0 0 / 38%);
+$md-dark-text-dividers    : rgb(0 0 0 / 12%);
+$md-light-text-primary    : rgb(255 255 255 / 100%);
+$md-light-text-secondary  : rgb(255 255 255 / 70%);
+$md-light-text-disabled   : rgb(255 255 255 / 50%);
+$md-light-text-dividers   : rgb(255 255 255 / 12%);
+$md-dark-icons-active     : rgb(0 0 0 / 54%);
+$md-dark-icons-inactive   : rgb(0 0 0 / 38%);
+$md-light-icons-active    : rgb(255 255 255 / 100%);
+$md-light-icons-inactive  : rgb(255 255 255 / 50%);
+$md-white                 : #fff;
+$md-black                 : #000;
 $md-colors: (
-  white                 : #ffffff,
+  white                 : #fff,
   red-50                : #ffebee,
   red-100               : #ffcdd2,
   red-200               : #ef9a9a,
@@ -334,7 +309,7 @@ $md-colors: (
   purple-a100           : #ea80fc,
   purple-a200           : #e040fb,
   purple-a400           : #d500f9,
-  purple-a700           : #aa00ff,
+  purple-a700           : #a0f,
   deep-purple-50        : #ede7f6,
   deep-purple-100       : #d1c4e9,
   deep-purple-200       : #b39ddb,
@@ -472,7 +447,7 @@ $md-colors: (
   yellow-800            : #f9a825,
   yellow-900            : #f57f17,
   yellow-a100           : #ffff8d,
-  yellow-a200           : #ffff00,
+  yellow-a200           : #ff0,
   yellow-a400           : #ffea00,
   yellow-a700           : #ffd600,
   amber-50              : #fff8e1,
@@ -529,7 +504,7 @@ $md-colors: (
   brown-900             : #3e2723,
   grey-50               : #fafafa,
   grey-100              : #f5f5f5,
-  grey-200              : #eeeeee,
+  grey-200              : #eee,
   grey-300              : #e0e0e0,
   grey-400              : #bdbdbd,
   grey-500              : #9e9e9e,
@@ -547,4 +522,4 @@ $md-colors: (
   blue-grey-700         : #455a64,
   blue-grey-800         : #37474f,
   blue-grey-900         : #263238,
-) !global;
+);

src/assets/styles/spec/tools/mixins/clearfix.scss

@@ -1,6 +1,6 @@
-//----------------------------------------------------------
+// ----------------------------------------------------------
 // @Clearfix
-//----------------------------------------------------------
+// ----------------------------------------------------------
 
 @mixin clearfix {
   &::before,

src/assets/styles/spec/tools/mixins/placeholder.scss

@@ -1,10 +1,10 @@
-//----------------------------------------------------------
+// ----------------------------------------------------------
 // @Placeholder
-//----------------------------------------------------------
+// ----------------------------------------------------------
 
 @mixin placeholder {
-  &::-webkit-input-placeholder { @content; }
-  &:-moz-placeholder { @content; }
-  &::-moz-placeholder { @content; }
-  &:-ms-input-placeholder { @content; }
+  &::input-placeholder { @content; }
+  &:placeholder { @content; }
+  &::placeholder { @content; }
+  &:input-placeholder { @content; }
 }

src/assets/styles/spec/utils/colors.scss

@@ -10,11 +10,11 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $md-colors {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }
 
 // ---------------------------------------------------------
@@ -22,9 +22,9 @@
 // ---------------------------------------------------------
 
 @each $item, $color in $grey-colors-alt {
-  .c-#{$item},     .cH-#{$item}:hover      { color: $color !important; }
-  .bgc-#{$item},   .bgcH-#{$item}:hover    { background-color: $color !important; }
-  .bdc-#{$item},   .bdcH-#{$item}:hover    { border-color: $color !important; }
-  .fill-#{$item},  .fillH-#{$item}:hover   { fill: $color !important; }
-  .str-#{$item},   .strH-#{$item}:hover    { stroke: $color !important; }
+  .c-#{"" + $item},     .cH-#{"" + $item}:hover      { color: $color !important; }
+  .bgc-#{"" + $item},   .bgcH-#{"" + $item}:hover    { background-color: $color !important; }
+  .bdc-#{"" + $item},   .bdcH-#{"" + $item}:hover    { border-color: $color !important; }
+  .fill-#{"" + $item},  .fillH-#{"" + $item}:hover   { fill: $color !important; }
+  .str-#{"" + $item},   .strH-#{"" + $item}:hover    { stroke: $color !important; }
 }

src/assets/styles/spec/utils/layout/helpers/margin.scss

@@ -246,7 +246,9 @@ $responsive: true;
 // ---------------------------------------------------------
 
 .m-a  { margin: auto !important; }
-.mX-a { margin-left: auto !important; margin-right: auto !important; }
+
+.mX-a { margin-left: auto !important;
+        margin-right: auto !important; }
 .mT-a { margin-top: auto !important; }
 .mR-a { margin-right: auto !important; }
 .mB-a { margin-bottom: auto !important; }
@@ -255,7 +257,8 @@ $responsive: true;
 @if ($responsive == true) {
   @include generateResponsive() {
     .m-a\@#{$breakpointAlias}  { margin: auto !important; }
-    .mX-a\@#{$breakpointAlias} { margin-left: auto !important; margin-right: auto !important; }
+    .mX-a\@#{$breakpointAlias} { margin-left: auto !important;
+                                 margin-right: auto !important; }
     .mT-a\@#{$breakpointAlias} { margin-top: auto !important; }
     .mR-a\@#{$breakpointAlias} { margin-right: auto !important; }
     .mB-a\@#{$breakpointAlias} { margin-bottom: auto !important; }

src/assets/styles/spec/utils/layout/helpers/sizes.scss

@@ -56,7 +56,7 @@ $responsive: true;
 // @Relative Width
 // ---------------------------------------------------------
 
-.w-0     { width: 0px; }
+.w-0     { width: 0; }
 .w-10p   { width: 10%; }
 .w-20p   { width: 20%; }
 .w-30p   { width: 30%; }
@@ -72,7 +72,7 @@ $responsive: true;
 
 @if ($responsive == true) {
   @include generateResponsive() {
-    .w-0\@#{$breakpointAlias}     { width: 0px; }
+    .w-0\@#{$breakpointAlias}     { width: 0; }
     .w-10p\@#{$breakpointAlias}   { width: 10%; }
     .w-20p\@#{$breakpointAlias}   { width: 20%; }
     .w-30p\@#{$breakpointAlias}   { width: 30%; }

src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 // ---------------------------------------------------------
 // @Responsive Suffix Generator
 // ---------------------------------------------------------
@@ -7,8 +9,8 @@
 
 @mixin generateResponsive() {
   @each $breakpoint in $breakpoints {
-    $breakpointAlias     : nth($breakpoint, 1) !global;
-    $breakpointCondition : nth($breakpoint, 2);
+    $breakpointAlias     : list.nth($breakpoint, 1) !global;
+    $breakpointCondition : list.nth($breakpoint, 2);
 
     @include mediaQueryCondition($breakpointAlias) {
       @content;

src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss

@@ -1,3 +1,5 @@
+@use "sass:list";
+
 // ---------------------------------------------------------
 // @Media Queries Generator
 // ---------------------------------------------------------
@@ -8,8 +10,8 @@
   $breakpointFound: false;
 
   @each $breakpoint in $breakpoints {
-    $alias: nth($breakpoint, 1);
-    $condition: nth($breakpoint, 2);
+    $alias: list.nth($breakpoint, 1);
+    $condition: list.nth($breakpoint, 2);
 
     @if $mq == $alias and $condition {
       $breakpointFound: true;

src/assets/styles/spec/utils/layout/utils/gap.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // ---------------------------------------------------------
 // @TOC
 // ---------------------------------------------------------
@@ -29,60 +31,60 @@ $responsive: true;
 
 @for $i from 0 through 4 {
   .gapX-#{$i} {
-    margin-left: #{($i / -2)}px !important;
-    margin-right: #{($i / -2)}px !important;
+    margin-left: #{math.div($i, -2)}px !important;
+    margin-right: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding-left: #{($i / 2)}px !important;
-      padding-right: #{($i / 2)}px !important;
+      padding-left: #{($i * 0.5)}px !important;
+      padding-right: #{($i * 0.5)}px !important;
     }
   }
 
   .gapY-#{$i} {
-    margin-top: #{($i / -2)}px !important;
-    margin-bottom: #{($i / -2)}px !important;
+    margin-top: #{math.div($i, -2)}px !important;
+    margin-bottom: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding-top: #{($i / 2)}px !important;
-      padding-bottom: #{($i / 2)}px !important;
+      padding-top: #{($i * 0.5)}px !important;
+      padding-bottom: #{($i * 0.5)}px !important;
     }
   }
 
   .gap-#{$i} {
-    margin: #{($i / -2)}px !important;
+    margin: #{math.div($i, -2)}px !important;
 
     & > * {
-      padding: #{($i / 2)}px !important;
+      padding: #{($i * 0.5)}px !important;
     }
   }
 
   @if ($responsive == true) {
     @include generateResponsive() {
       .gapX-#{$i}\@#{$breakpointAlias} {
-        margin-left: #{($i / -2)}px !important;
-        margin-right: #{($i / -2)}px !important;
+        margin-left: #{math.div($i, -2)}px !important;
+        margin-right: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding-left: #{($i / 2)}px !important;
-          padding-right: #{($i / 2)}px !important;
+          padding-left: #{($i * 0.5)}px !important;
+          padding-right: #{($i * 0.5)}px !important;
         }
       }
 
       .gapY-#{$i}\@#{$breakpointAlias} {
-        margin-top: #{($i / -2)}px !important;
-        margin-bottom: #{($i / -2)}px !important;
+        margin-top: #{math.div($i, -2)}px !important;
+        margin-bottom: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding-top: #{($i / 2)}px !important;
-          padding-bottom: #{($i / 2)}px !important;
+          padding-top: #{($i * 0.5)}px !important;
+          padding-bottom: #{($i * 0.5)}px !important;
         }
       }
 
       .gap-#{$i}\@#{$breakpointAlias} {
-        margin: #{($i / -2)}px !important;
+        margin: #{math.div($i, -2)}px !important;
 
         & > * {
-          padding: #{($i / 2)}px !important;
+          padding: #{($i * 0.5)}px !important;
         }
       }
     }
@@ -96,60 +98,60 @@ $responsive: true;
 @for $i from 5 through 35 {
   @if $i % 5 == 0 {
     .gapX-#{$i} {
-      margin-left: #{($i / -2)}px !important;
-      margin-right: #{($i / -2)}px !important;
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-left: #{($i / 2)}px !important;
-        padding-right: #{($i / 2)}px !important;
+        padding-left: #{($i * 0.5)}px !important;
+        padding-right: #{($i * 0.5)}px !important;
       }
     }
 
     .gapY-#{$i} {
-      margin-top: #{($i / -2)}px !important;
-      margin-bottom: #{($i / -2)}px !important;
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-top: #{($i / 2)}px !important;
-        padding-bottom: #{($i / 2)}px !important;
+        padding-top: #{($i * 0.5)}px !important;
+        padding-bottom: #{($i * 0.5)}px !important;
       }
     }
 
     .gap-#{$i} {
-      margin: #{($i / -2)}px !important;
+      margin: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding: #{($i / 2)}px !important;
+        padding: #{($i * 0.5)}px !important;
       }
     }
 
     @if ($responsive == true) {
       @include generateResponsive() {
         .gapX-#{$i}\@#{$breakpointAlias} {
-          margin-left: #{($i / -2)}px !important;
-          margin-right: #{($i / -2)}px !important;
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-left: #{($i / 2)}px !important;
-            padding-right: #{($i / 2)}px !important;
+            padding-left: #{($i * 0.5)}px !important;
+            padding-right: #{($i * 0.5)}px !important;
           }
         }
 
         .gapY-#{$i}\@#{$breakpointAlias} {
-          margin-top: #{($i / -2)}px !important;
-          margin-bottom: #{($i / -2)}px !important;
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-top: #{($i / 2)}px !important;
-            padding-bottom: #{($i / 2)}px !important;
+            padding-top: #{($i * 0.5)}px !important;
+            padding-bottom: #{($i * 0.5)}px !important;
           }
         }
 
         .gap-#{$i}\@#{$breakpointAlias} {
-          margin: #{($i / -2)}px !important;
+          margin: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding: #{($i / 2)}px !important;
+            padding: #{($i * 0.5)}px !important;
           }
         }
       }
@@ -164,60 +166,60 @@ $responsive: true;
 @for $i from 40 through 160 {
   @if $i % 10 == 0 {
     .gapX-#{$i} {
-      margin-left: #{($i / -2)}px !important;
-      margin-right: #{($i / -2)}px !important;
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-left: #{($i / 2)}px !important;
-        padding-right: #{($i / 2)}px !important;
+        padding-left: #{($i * 0.5)}px !important;
+        padding-right: #{($i * 0.5)}px !important;
       }
     }
 
     .gapY-#{$i} {
-      margin-top: #{($i / -2)}px !important;
-      margin-bottom: #{($i / -2)}px !important;
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding-top: #{($i / 2)}px !important;
-        padding-bottom: #{($i / 2)}px !important;
+        padding-top: #{($i * 0.5)}px !important;
+        padding-bottom: #{($i * 0.5)}px !important;
       }
     }
 
     .gap-#{$i} {
-      margin: #{($i / -2)}px !important;
+      margin: #{math.div($i, -2)}px !important;
 
       & > * {
-        padding: #{($i / 2)}px !important;
+        padding: #{($i * 0.5)}px !important;
       }
     }
 
     @if ($responsive == true) {
       @include generateResponsive() {
         .gapX-#{$i}\@#{$breakpointAlias} {
-          margin-left: #{($i / -2)}px !important;
-          margin-right: #{($i / -2)}px !important;
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-left: #{($i / 2)}px !important;
-            padding-right: #{($i / 2)}px !important;
+            padding-left: #{($i * 0.5)}px !important;
+            padding-right: #{($i * 0.5)}px !important;
           }
         }
 
         .gapY-#{$i}\@#{$breakpointAlias} {
-          margin-top: #{($i / -2)}px !important;
-          margin-bottom: #{($i / -2)}px !important;
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding-top: #{($i / 2)}px !important;
-            padding-bottom: #{($i / 2)}px !important;
+            padding-top: #{($i * 0.5)}px !important;
+            padding-bottom: #{($i * 0.5)}px !important;
           }
         }
 
         .gap-#{$i}\@#{$breakpointAlias} {
-          margin: #{($i / -2)}px !important;
+          margin: #{math.div($i, -2)}px !important;
 
           & > * {
-            padding: #{($i / 2)}px !important;
+            padding: #{($i * 0.5)}px !important;
           }
         }
       }

src/assets/styles/spec/utils/layout/utils/peers.scss

@@ -18,6 +18,7 @@
 
 .peer-greed {
   flex: 1 1 auto;
+
   // overflow: hidden;
 }
 

src/assets/styles/vendor/datepicker.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .datepicker {
   border-radius: 0;
   padding: 25px;
@@ -95,7 +97,7 @@
 
     &.active {
       border-radius: 0;
-      border-color: lighten($default-info, 20%);
+      border-color: color.adjust($default-info, $lightness: 20%);
     }
   }
 
@@ -107,14 +109,15 @@
     }
   }
 
+  /* stylelint-disable no-descending-specificity */
   td,
   th {
     border-radius: 0;
     width: 40px;
     height: 35px;
 
-    &.available{
-      &:hover{
+    &.available {
+      &:hover {
         background: $default-primary;
         color: #fff;
       }
@@ -139,6 +142,7 @@
       }
     }
 
+    /* stylelint-enable no-descending-specificity */
     &.start-date {
       border-radius: 0;
 

src/assets/styles/vendor/fullcalendar.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .fc {
   background-color: $default-white;
   border: 1px solid $border-color;
@@ -18,7 +20,7 @@
     background-image: none;
     height: 37px;
     padding: 0 15px;
-    color: darken($default-text-color, 10%);
+    color: color.adjust($default-text-color, $lightness: -10%);
 
     &.fc-state-default {
       border-color: $border-color;

webpack/config.js

@@ -9,30 +9,24 @@
  * + @Exporting Module
  */
 
-
 // ---------------------
 // @Loading Dependencies
 // ---------------------
 
-const
-  path = require('path'),
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+
+const path = require('path'),
   manifest = require('./manifest'),
   devServer = require('./devServer'),
   rules = require('./rules'),
   plugins = require('./plugins');
 
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
-const TerserPlugin = require("terser-webpack-plugin");
-
 // ------------------
 // @Entry Point Setup
 // ------------------
 
-const
-  entry = [
-    path.join(manifest.paths.src, 'assets', 'scripts', manifest.entries.js),
-  ];
-
+const entry = [path.join(manifest.paths.src, 'assets', 'scripts', manifest.entries.js)];
 
 // ---------------
 // @Path Resolving
@@ -40,21 +34,18 @@ const
 
 const resolve = {
   extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js'],
-  modules: [
-    path.join(__dirname, '../node_modules'),
-    path.join(manifest.paths.src, ''),
-  ],
+  modules: [path.join(__dirname, '../node_modules'), path.join(manifest.paths.src, '')],
 };
 
 const optimization = {
-  minimize: manifest.MINIFY
+  minimize: manifest.MINIFY,
 };
 
 if (manifest.MINIFY) {
   optimization.minimizer = [
     ...require('./plugins/imageminPlugin'),
     new CssMinimizerPlugin(),
-    new TerserPlugin()
+    new TerserPlugin(),
   ];
 }
 
@@ -77,9 +68,9 @@ module.exports = {
   },
   performance: {
     maxEntrypointSize: 5120000,
-    maxAssetSize: 5120000
+    maxAssetSize: 5120000,
   },
-  optimization: optimization,
+  optimization,
   resolve,
   plugins,
   devServer,

webpack/devServer.js

@@ -2,9 +2,7 @@
 // @Loading Dependencies
 // ---------------------
 
-const
-  manifest = require('./manifest');
-
+const manifest = require('./manifest');
 
 // ------------------
 // @DevServer Configs
@@ -15,19 +13,19 @@ const
  */
 
 const devServer = {
-  static:{
-    directory:  manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
+  static: {
+    directory: manifest.IS_PRODUCTION ? manifest.paths.build : manifest.paths.src,
     watch: true,
   },
-  historyApiFallback : { index: '/404.html'},
-  port               : manifest.IS_PRODUCTION ? 3001 : 3000,
-  compress           : manifest.IS_PRODUCTION,
-  hot                : !manifest.IS_PRODUCTION,
-  host               : '0.0.0.0',
-  allowedHosts       : "all",// [1]
-  client:{
-    overlay            : true,
-    progress           : true
+  historyApiFallback: { index: '/404.html' },
+  port: manifest.IS_PRODUCTION ? 3001 : 3000,
+  compress: manifest.IS_PRODUCTION,
+  hot: !manifest.IS_PRODUCTION,
+  host: '0.0.0.0',
+  allowedHosts: 'all', // [1]
+  client: {
+    overlay: true,
+    progress: true,
   },
   devMiddleware: {
     stats: {
@@ -42,10 +40,9 @@ const devServer = {
       warnings: true,
       colors: true,
     },
-  }
+  },
 };
 
-
 // -----------------
 // @Exporting Module
 // -----------------

webpack/manifest.js

@@ -12,64 +12,53 @@
  * + @Exporting Module
  */
 
-
 // ---------------------
 // @Loading Dependencies
 // ---------------------
 
 const path = require('path');
 
-
 // --------------------
 // @Environment Holders
 // --------------------
 
-const
-  NODE_ENV       = process.env.NODE_ENV || 'development',
+const NODE_ENV = process.env.NODE_ENV || 'development',
   IS_DEVELOPMENT = NODE_ENV === 'development',
-  IS_PRODUCTION  = NODE_ENV === 'production',
-  MINIFY         = process.env.MINIFY === 'true'? true: IS_PRODUCTION;
+  IS_PRODUCTION = NODE_ENV === 'production',
+  MINIFY = process.env.MINIFY === 'true';
 
 // ------
 // @Utils
 // ------
 
-const
-  dir = src => path.join(__dirname, src);
-
+const dir = (src) => path.join(__dirname, src);
 
 // ----------
 // @App Paths
 // ----------
 
-const
-  paths = {
-    src   : dir('../src'),
-    build : dir('../dist'),
-  };
-
+const paths = {
+  src: dir('../src'),
+  build: dir('../dist'),
+};
 
 // -------------------
 // @Output Files Names
 // -------------------
 
-const
-  outputFiles = {
-    bundle : 'bundle.js',
-    vendor : 'vendor.js',
-    css    : 'style.css',
-  };
-
+const outputFiles = {
+  bundle: 'bundle.js',
+  vendor: 'vendor.js',
+  css: 'style.css',
+};
 
 // --------------------
 // @Entries Files Names
 // --------------------
 
-const
-  entries = {
-    js   : 'index.js',
-  };
-
+const entries = {
+  js: 'index.js',
+};
 
 // -----------------
 // @Exporting Module
@@ -82,5 +71,5 @@ module.exports = {
   NODE_ENV,
   IS_DEVELOPMENT,
   IS_PRODUCTION,
-  MINIFY
+  MINIFY,
 };

webpack/plugins/caseSensitivePlugin.js

@@ -1,4 +1,3 @@
-const
-  CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
+const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 
 module.exports = new CaseSensitivePathsPlugin();

webpack/plugins/copyPlugin.js

@@ -1,13 +1,12 @@
-const
-  path              = require('path'),
-  manifest          = require('../manifest'),
-  CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin'),
+  path = require('path'),
+  manifest = require('../manifest');
 
 module.exports = new CopyWebpackPlugin({
   patterns: [
-  {
-    from : path.join(manifest.paths.src, 'assets/static'),
-    to   : path.join(manifest.paths.build, 'assets/static'),
-  },
-]
+    {
+      from: path.join(manifest.paths.src, 'assets/static'),
+      to: path.join(manifest.paths.build, 'assets/static'),
+    },
+  ],
 });

webpack/plugins/dashboardPlugin.js

@@ -1,4 +1,3 @@
-const
-  DashboardPlugin = require('webpack-dashboard/plugin');
+const DashboardPlugin = require('webpack-dashboard/plugin');
 
 module.exports = new DashboardPlugin();

webpack/plugins/extractPlugin.js

@@ -1,6 +1,5 @@
-const
-  manifest          = require('../manifest'),
-  ExtractTextPlugin = require('mini-css-extract-plugin');
+const ExtractTextPlugin = require('mini-css-extract-plugin'),
+  manifest = require('../manifest');
 
 module.exports = new ExtractTextPlugin({
   filename: manifest.outputFiles.css,

webpack/plugins/htmlPlugin.js

@@ -1,7 +1,6 @@
-const
-  path              = require('path'),
-  manifest          = require('../manifest'),
-  HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path'),
+  HtmlWebpackPlugin = require('html-webpack-plugin'),
+  manifest = require('../manifest');
 
 const titles = {
   'index': 'Dashboard',
@@ -43,13 +42,12 @@ if (manifest.MINIFY) {
   };
 }
 
-
-module.exports = Object.keys(titles).map(title => {
+module.exports = Object.keys(titles).map((title) => {
   return new HtmlWebpackPlugin({
     template: path.join(manifest.paths.src, `${title}.html`),
     path: manifest.paths.build,
     filename: `${title}.html`,
     inject: true,
-    minify: minify
+    minify,
   });
 });

webpack/plugins/imageminPlugin.js

@@ -9,8 +9,8 @@ module.exports = [
           // Your options for `sharp`
           // https://sharp.pixelplumbing.com/api-output
         },
-      }
-    }
+      },
+    },
   }),
   new ImageMinimizerPlugin({
     minimizer: {
@@ -22,7 +22,7 @@ module.exports = [
           plugins: [
             // set of built-in plugins enabled by default
             // see: https://github.com/svg/svgo#default-preset
-            "preset-default",
+            'preset-default',
           ],
         },
       },

webpack/plugins/index.js

@@ -1,11 +1,10 @@
-const
-  manifest          = require('../manifest');
+const manifest = require('../manifest');
 
 const plugins = [];
 
 plugins.push(
-  ...(require('./htmlPlugin')),
-  ...(require('./internal')),
+  ...require('./htmlPlugin'),
+  ...require('./internal'),
   require('./caseSensitivePlugin'),
   require('./extractPlugin'),
   require('./copyPlugin')

webpack/plugins/internal.js

@@ -10,22 +10,18 @@
  * + @Exporting Module
  */
 
-
 // ---------------------
 // @Loading Dependencies
 // ---------------------
 
-const
-  manifest = require('../manifest'),
-  webpack  = require('webpack');
-
+const webpack = require('webpack'),
+  manifest = require('../manifest');
 
 // ---------------
 // @Common Plugins
 // ---------------
 
-const
-  plugins  = [];
+const plugins = [];
 
 plugins.push(
   // new webpack.DefinePlugin({
@@ -34,7 +30,6 @@ plugins.push(
   //   },
   // }),
 
-
   // new webpack.optimize.CommonsChunkPlugin({
   //   name: 'vendor',
   //   filename: manifest.outputFiles.vendor,
@@ -52,7 +47,6 @@ plugins.push(
   })
 );
 
-
 // ---------------------------
 // @Merging Production Plugins
 // ---------------------------
@@ -81,19 +75,14 @@ plugins.push(
 //   );
 // }
 
-
 // ----------------------------
 // @Merging Development Plugins
 // ----------------------------
 
 if (manifest.IS_DEVELOPMENT) {
-  plugins.push(
-    // new webpack.NoEmitOnErrorsPlugin(),
-    // new webpack.NamedModulesPlugin(),
-  );
+  plugins.push();
 }
 
-
 // -----------------
 // @Exporting Module
 // -----------------

webpack/rules/css.js

@@ -10,15 +10,12 @@
  * + @Exporting Module
  */
 
-
 // ---------------------
 // @Loading Dependencies
 // ---------------------
 
-const
-  manifest          = require('../manifest'),
-  ExtractTextPlugin = require('mini-css-extract-plugin');
-
+const ExtractTextPlugin = require('mini-css-extract-plugin'),
+  manifest = require('../manifest');
 
 // ---------------
 // @Common Loaders
@@ -30,13 +27,12 @@ const loaders = [
   {
     loader: 'css-loader',
     options: {
-      sourceMap : manifest.IS_DEVELOPMENT,
+      sourceMap: manifest.IS_DEVELOPMENT,
       importLoaders: 1,
     },
   },
 ];
 
-
 // ---------------------------
 // @Merging Production Loaders
 // ---------------------------
@@ -44,13 +40,14 @@ const loaders = [
 if (manifest.IS_PRODUCTION) {
   rule = {
     test: /\.css$/,
-    use: [{
+    use: [
+      {
         loader: ExtractTextPlugin.loader,
-    }].concat(loaders),
+      },
+    ].concat(loaders),
   };
 }
 
-
 // ----------------------------
 // @Merging Development Loaders
 // ----------------------------
@@ -58,13 +55,14 @@ if (manifest.IS_PRODUCTION) {
 if (manifest.IS_DEVELOPMENT) {
   rule = {
     test: /\.css$/,
-    use: [{
-      loader: 'style-loader',
-    }].concat(loaders),
+    use: [
+      {
+        loader: 'style-loader',
+      },
+    ].concat(loaders),
   };
 }
 
-
 // -----------------
 // @Exporting Module
 // -----------------

webpack/rules/fonts.js

@@ -1,5 +1,5 @@
 module.exports = {
   test: /\.(eot|svg|ttf|woff|woff2)$/,
-  exclude : /(node_modules)/,
+  exclude: /(node_modules)/,
   type: 'asset/resource',
 };

webpack/rules/images.js

@@ -1,5 +1,5 @@
 module.exports = {
-  test    : /\.(png|gif|jpg?g)$/i,
-  exclude : /(node_modules)/,
+  test: /\.(png|gif|jpg?g)$/i,
+  exclude: /(node_modules)/,
   type: 'asset/resource',
 };

webpack/rules/js.js

@@ -1,5 +1,5 @@
 module.exports = {
-  test    : /\.(js)$/,
-  exclude : /(node_modules|build|dist\/)/,
-  use     : ['babel-loader'],
+  test: /\.(js)$/,
+  exclude: /(node_modules|build|dist\/)/,
+  use: ['babel-loader'],
 };

webpack/rules/sass.js

@@ -8,18 +8,16 @@
  * + @Exporting Module
  */
 
-
 // ---------------------
 // @Loading Dependencies
 // ---------------------
 
-const
-  manifest          = require('../manifest'),
-  path              = require('path'),
-  cssNext           = require('postcss-preset-env'),
-  rtlcss            = require('rtlcss'),
-  autoprefixer      = require('autoprefixer'),
-  ExtractTextPlugin = require('mini-css-extract-plugin');
+const path = require('path'),
+  cssNext = require('postcss-preset-env'),
+  rtlcss = require('rtlcss'),
+  autoprefixer = require('autoprefixer'),
+  ExtractTextPlugin = require('mini-css-extract-plugin'),
+  manifest = require('../manifest');
 
 // ---------------
 // @Common Loaders
@@ -29,7 +27,7 @@ const loaders = [
   {
     loader: 'css-loader',
     options: {
-      sourceMap : manifest.IS_DEVELOPMENT
+      sourceMap: manifest.IS_DEVELOPMENT,
     },
   },
   {
@@ -37,11 +35,7 @@ const loaders = [
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
       postcssOptions: {
-        plugins: [
-            cssNext(),
-            rtlcss(),
-            autoprefixer()
-        ],
+        plugins: [cssNext(), rtlcss(), autoprefixer()],
       },
     },
   },
@@ -57,8 +51,8 @@ const loaders = [
           path.join(manifest.paths.src, ''),
         ],
       },
-    }
-  }
+    },
+  },
 ];
 
 if (manifest.IS_PRODUCTION) {
@@ -71,7 +65,7 @@ if (manifest.IS_PRODUCTION) {
 
 const rule = {
   test: /\.scss$/,
-  use: loaders
+  use: loaders,
 };
 
 // -----------------

webpack/rules/svg.js

@@ -1,5 +1,5 @@
 module.exports = {
   test: /\.(svg)$/i,
-  exclude : /(node_modules)/,
-  type: "asset",
+  exclude: /(node_modules)/,
+  type: 'asset',
 };