upgrade dependencies

.eslintrc.js

@@ -10,7 +10,14 @@ module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
   plugins: ['import', 'prettier', 'sonarjs', 'smells', 'clean-regex'],
-  extends: ['eslint:recommended', 'plugin:sonarjs/recommended', 'plugin:clean-regex/recommended', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:sonarjs/recommended',
+    'plugin:clean-regex/recommended',
+    'prettier',
+  ],
   env: {
     es6: true,
     node: true,
@@ -21,7 +28,7 @@ module.exports = {
   },
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 6,
+    ecmaVersion: 2018,
     ecmaFeatures: {
       modules: true,
     },
@@ -95,7 +102,10 @@ module.exports = {
     'no-undef-init': 1,
     'no-undefined': 0,
     'no-unused-expressions': 1,
-    'no-unused-vars': [1, { vars: 'all', args: 'after-used' }],
+    'no-unused-vars': 'off',
+    // '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
+    '@typescript-eslint/no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars-experimental': 'error',
     'no-use-before-define': 1,
     'no-with': 1,
     'no-extra-semi': 1,

babel.config.js

@@ -45,6 +45,7 @@ module.exports = function (api) {
       ['@babel/plugin-transform-spread', { loose }],
       ['@babel/plugin-proposal-decorators', { legacy }],
       ['@babel/plugin-proposal-class-properties', { loose }],
+      ['@babel/plugin-proposal-nullish-coalescing-operator'],
       ['@babel/plugin-proposal-optional-chaining', { loose }],
       ['@babel/plugin-transform-template-literals', { loose }],
       ['@babel/plugin-transform-object-assign'],

package.json

@@ -28,6 +28,7 @@
     "@babel/core": "7.14.0",
     "@babel/plugin-proposal-class-properties": "7.13.0",
     "@babel/plugin-proposal-decorators": "7.13.15",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.13.8",
     "@babel/plugin-proposal-object-rest-spread": "7.13.8",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-transform-arrow-functions": "7.13.0",

src/scripts/app.ts

@@ -1,8 +1,30 @@
 import Navigation from '@components/navigation';
+import { useState } from '@hooks/useState';
 
 const modules = [Navigation];
 
+const init = () => {
+  const [getCounter, setCounter] = useState(2);
+
+  const button = document.getElementById('counter');
+  const values: HTMLElement | null = document.getElementById('counter-value');
+
+  const pasteValue = () => {
+    const next = getCounter();
+    values!.innerText = next.toString();
+  };
+
+  pasteValue();
+
+  button?.addEventListener('click', () => {
+    setCounter(Math.random() * 11);
+    setCounter(count => count + 1);
+    pasteValue();
+  });
+};
+
 window.addEventListener('load', () => {
+  init();
   modules?.forEach(module => module?.init());
 });
 

src/scripts/hooks/useState.ts

@@ -0,0 +1,18 @@
+type getStateProps = () => any;
+type setStateProps = (value: any) => void;
+
+type useStateResponse = [getStateProps, setStateProps];
+
+export const useState = (value: any): useStateResponse => {
+  let current = value;
+
+  function getValue() {
+    return current;
+  }
+
+  function setValue(callback) {
+    current = typeof callback === 'function' ? callback(getValue()) : callback;
+  }
+
+  return [getValue, setValue];
+};

src/scripts/tools/ ms.js

@@ -0,0 +1,24 @@
+import ms from 'ms';
+
+ms('2 days'); // 172800000
+ms('1d'); // 86400000
+ms('10h'); // 36000000
+ms('2.5 hrs'); // 9000000
+ms('2h'); // 7200000
+ms('1m'); // 60000
+ms('5s'); // 5000
+ms('1y'); // 31557600000
+ms('100'); // 100
+ms('-3 days'); // -259200000
+ms('-1h'); // -3600000
+ms('-200'); // -200
+
+ms(60000); // "1m"
+ms(2 * 60000); // "2m"
+ms(-3 * 60000); // "-3m"
+ms(ms('10 hours')); // "10h"
+
+ms(60000, { long: true }); // "1 minute"
+ms(2 * 60000, { long: true }); // "2 minutes"
+ms(-3 * 60000, { long: true }); // "-3 minutes"
+ms(ms('10 hours'), { long: true }); // "10 hours"

src/scripts/tools/cookies.js

@@ -0,0 +1,53 @@
+import Cookies from 'cookies-js';
+
+if (Cookies.enabled) {
+  Cookies.set('key', 'value');
+}
+
+
+Cookies.defaults = {
+  path: '/',
+  secure: true
+};
+
+Cookies.set('key', 'value'); // Will be secure and have a path of '/'
+Cookies.expire('key'); // Will expire the cookie with a path of '/'
+
+
+// First set a cookie
+Cookies.set('key', 'value');
+
+// Get the cookie value
+Cookies.get('key'); // "value"
+
+// Using the alias
+Cookies('key'); // "value"
+
+// First set a cookie and get its value
+Cookies.set('key', 'value').get('key'); // "value"
+
+// Expire the cookie and try to get its value
+Cookies.expire('key').get('key'); // undefined
+
+// Using the alias
+Cookies('key', undefined);
+
+
+
+// Setting a cookie value
+Cookies.set('key', 'value');
+
+// Chaining sets together
+Cookies.set('key', 'value').set('hello', 'world');
+
+// Setting cookies with additional options
+Cookies.set('key', 'value', { domain: 'www.example.com', secure: true });
+
+// Setting cookies with expiration values
+Cookies.set('key', 'value', { expires: 600 }); // Expires in 10 minutes
+Cookies.set('key', 'value', { expires: '01/01/2012' });
+Cookies.set('key', 'value', { expires: new Date(2012, 0, 1) });
+Cookies.set('key', 'value', { expires: Infinity });
+
+// Using the alias
+Cookies('key', 'value', { secure: true });

src/scripts/tools/date.js

@@ -0,0 +1,49 @@
+import date from 'date.js';
+
+date('10 minutes from now');
+date('in 5 hours');
+date('at 5pm');
+date('at 12:30');
+date('at 23:35');
+date('in 2 days');
+date('tuesday at 9am');
+date('monday at 1:00am');
+date('last monday at 1:00am');
+date('tomorrow at 3pm');
+date('yesterday at 12:30am');
+date('5pm tonight');
+date('tomorrow at noon');
+date('next week tuesday');
+date('next week tuesday at 4:30pm');
+date('2 weeks from wednesday');
+date('tomorrow night at 9');
+date('tomorrow afternoon');
+date('this morning at 9');
+date('at 12:30pm');
+date('tomorrow at 9 in the morning');
+date('2 years from yesterday at 5pm');
+date('last month');
+date('2nd of January');
+date('1st of March');
+date('1 st of March');
+date('31st of September 4:00am');
+date('1st of January 4:00am');
+date('9th of December 4:00am');
+date('tomorrow afternoon at 4:30pm 1 month from now');
+date('10 seconds ago');
+date('1 minute ago');
+date('2 hours ago');
+date('5 weeks ago');
+date('2 months ago');
+date('1 year ago');
+date('an hour later');
+date('2w from wednesday');
+date('2nd day of January');
+date('two hours later');
+date('a fortnight from wednesday');
+date('a minute ago');
+
+date('at 12:30');
+date('at 12.30');
+date('tuesday at 9');
+date('tomorrow at 15');

src/scripts/tools/domurl.js

@@ -0,0 +1,84 @@
+import Url from 'domurl';
+
+let u = new Url(); // curent document URL will be used
+// or we can instantiate as
+let u2 = new Url('http://example.com/some/path?a=b&c=d#someAnchor');
+// it should support relative URLs also
+let u3 = new Url('/my/site/doc/path?foo=bar#baz');
+
+// get the value of some query string parameter
+alert(u2.query.a);
+// or
+alert(u3.query.foo);
+
+// Manupulating query string parameters
+u.query.a = [1, 2, 3]; // adds/replaces in query string params a=1&a=2&a=3
+u.query.b = 'woohoo'; // adds/replaces in query string param b=woohoo
+
+if (u.query.a instanceof Array) {
+  // the way to add a parameter
+  u.query.a.push(4); // now it's "a=1&a=2&a=3&a=4&b=woohoo"
+} else {
+  // if not an array but scalar value here is a way how to convert to array
+  u.query.a = [u.query.a];
+  u.query.a.push(8);
+}
+
+// The way to remove the parameter:
+delete u.query.a;
+// or:
+delete u.query.a;
+
+// If you need to remove all query string params:
+u.clearQuery();
+alert(u);
+
+// Lookup URL parts:
+alert(
+  'protocol = ' +
+    u.protocol +
+    '\n' +
+    'user = ' +
+    u.user +
+    '\n' +
+    'pass = ' +
+    u.pass +
+    '\n' +
+    'host = ' +
+    u.host +
+    '\n' +
+    'port = ' +
+    u.port +
+    '\n' +
+    'path = ' +
+    u.path +
+    '\n' +
+    'query = ' +
+    u.query +
+    '\n' +
+    'hash = ' +
+    u.hash,
+);
+
+// Manipulating URL parts
+u.path = '/some/new/path'; // the way to change URL path
+console.log(u.paths());
+u.paths(['some', 'new', 'path']); // change path by array of strings
+console.log(u.path);
+u.protocol = 'https'; // the way to force https protocol on the source URL
+
+// inject into string
+// let str = '<a href="' + u + '">My Cool Link</a>';
+
+// or use in DOM context
+let a = document.createElement('a');
+a.href = u;
+a.innerHTML = 'test';
+document.body.appendChild(a);
+
+// Stringify
+u += '';
+String(u);
+u.toString();
+// NOTE, that usually it will be done automatically, so only in special
+//       cases direct stringify is required

src/scripts/tools/form.js

@@ -0,0 +1,50 @@
+import axios from 'axios';
+
+const sendMail = ({ name, phone }) => {
+  const instance = axios.create({
+    baseUrl: '/server/api',
+  });
+
+  instance.post('/', {
+    name,
+    phone,
+  });
+};
+
+function toJSON( form ) {
+  const data = {};
+  const elements = form.querySelectorAll('input, select, textarea');
+
+  elements.forEach(e => {
+    const name = e.name;
+    const value = e.value;
+
+    if (name) {
+      data[name] = value;
+    }
+  });
+
+  return data;
+}
+
+const feedback = () => {
+  const form = document.getElementById('feedback');
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    const json = toJSON(e.target);
+
+    const { name = '', phone = '' } = json;
+
+    console.log({ name, phone }, json);
+
+    sendMail({
+      name,
+      phone,
+    });
+
+    return false;
+  });
+};
+
+export default feedback;

src/scripts/tools/gsap.js

@@ -0,0 +1,11 @@
+// //typical import
+// import { TweenMax, Power2, TimelineLite } from "gsap/TweenMax";
+
+// //or get to the parts that aren't included inside TweenMax:
+// import Draggable from "gsap/Draggable";
+// import ScrollToPlugin from "gsap/ScrollToPlugin";
+
+// //or, as of 2.0, all tools are exported from the "all" file (excluding bonus plugins):
+// // import { TweenMax, CSSPlugin, ScrollToPlugin, Draggable, Elastic } from "gsap/all";
+// //if tree shaking dumps plugins, just reference them somewhere in your code like:
+// // const plugins = [CSSPlugin, ScrollToPlugin];