feat: migrating flow to typescript (#47)

This PR convert the code base to Typescript, the changes are the following:

- migrate code base to Typescript (3.4.x)
- enable `eslint` and `@typescript-eslint/eslint-plugin` (warnings still need to be addressed in future pull request
- update relevant dependencies for this PR (linting, etc)
- enable `bundlezise` (it was disabled for some reason)

* refactor: refactoring to typescript

* refactor: migrating to typescript

* refactor: applied feedbacks

* fix: fixed conflicts

* refactored: changed registry

* refactor: updated registry & removed unnecessary lib

* fix: fixed registry ur

* fix: fixed page load

* refactor: refactored footer wip

* refactor: converting to ts..wip

* refactor: converting to ts. wip

* refactor: converting to ts. wip

* refactor: converting to ts

* refactor: converting to ts

* fix: fixed load errors

* refactor: converted files to ts

* refactor: removed flow from tests

* fix: removed transpiled files

* refactor: added ts-ignore

* fix: fixed errors

* fix: fixed types

* fix: fixing jest import -.-

* fix: fixing lint errors

* fix: fixing lint errors

* fix: fixed lint errors

* refactor: removed unnecessary tsconfig's config

* fix: fixing errors

* fix: fixed warning

* fix: fixed test

* refactor: wip

* refactor: wip

* refactor: wip

* fix: fixing tests: wip

* wip

* wip

* fix: fixed search test

* wip

* fix: fixing lint errors

* fix: re-added stylelint

* refactor: updated stylelint script

* fix: fixed: 'styles.js'  were found.

* fix: fixed Search tests

* chore: enable eslint

eslint needs expecitely to know which file has to lint, by default is JS, in this case we need also ts,tsx files eslint . --ext .js,.ts

* chore: vcode eslint settings

* chore: restore eslint previous conf

* chore: clean jest config

* chore: fix eslint warnings

* chore: eslint errors cleared

chore: clean warnings

chore: remove github actions test phases

chore: remove dupe rule

* chore: update handler name

* chore: restore logo from img to url css prop

- loading images with css is more performant than using img html tags, switching this might be a breaking change
- restore no-empty-source seems the linting do not accept false
- update snapshots
- remove @material-ui/styles

* chore: update stylelint linting

* chore: update stylelint linting

* chore: fix a mistake on move tabs to a function

* chore: eanble bundlezie

* chore: use default_executor in circleci

* chore: update readme

Author: priscilawebdev

.babelrc

@@ -1,3 +1,5 @@
 {
-  "presets": [["@verdaccio", { "flow": true }]]
+  "presets": [
+    ["@verdaccio", { "typescript": true }]
+  ]
 }

.circleci/config.yml

@@ -76,6 +76,14 @@ jobs:
           key: *repo_key
           paths:
             - ~/ui-theme
+  test_bundlesize:
+    <<: *defaults
+    <<: *default_executor
+    steps:
+      - *restore_repo
+      - run:
+          name: Test BundleSize
+          command: yarn test:size
 
   test_node11:
     <<: *defaults
@@ -84,7 +92,7 @@ jobs:
       - *restore_repo
       - run:
           name: Test with Node 11
-          command: yarn run test
+          command: yarn test
 
   test_node8:
     <<: *defaults
@@ -156,12 +164,16 @@ workflows:
           requires:
             - prepare
           <<: *ignore_non_dev_branches
-      - coverage:
+      - test_bundlesize:
           requires:
             - test_node11
             - test_node8
             - test_node10
           <<: *ignore_non_dev_branches
+      - coverage:
+          requires:
+            - test_bundlesize
+          <<: *ignore_non_dev_branches
       - publish_package:
           requires:
             - coverage

.eslintignore

@@ -1,17 +1,12 @@
 node_modules
 coverage/
-wiki/
 static/
-flow-typed/
-website/
-build/
+.github/
+.circleci/
 *.md
 *.lock
 *.yaml
 Dockerfile
-*.rpi
 *.html
 *.scss
 *.png
-*.jpg
-test/unit/partials/

.eslintrc

@@ -1,50 +1,49 @@
 {
-  "plugins": [
-    "babel",
-    "react",
-    "flowtype",
-    "jest",
-    "verdaccio",
-    "jsx-a11y"
-  ],
   "extends": [
-    "eslint:recommended",
-    "google",
-    "plugin:flowtype/recommended",
+    "@verdaccio",
+    "plugin:react/recommended",
     "plugin:jest/recommended",
     "plugin:prettier/recommended",
-    "plugin:react/recommended",
     "plugin:verdaccio/recommended",
     "plugin:jsx-a11y/recommended"
   ],
+  "plugins": [
+    "react",
+    "jest",
+    "prettier",
+    "verdaccio",
+    "jsx-a11y"
+  ],
   "settings": {
     "react": {
-      "pragma": "React",
-      "version": "16.4.2",
-      "flowVersion": "0.81.0"
+      "version":  "detect"
     }
   },
-  "parser": "babel-eslint",
   "parserOptions": {
-    "sourceType": "module",
-    "ecmaVersion": 7,
     "ecmaFeatures": {
-      "impliedStrict": true,
       "jsx": true
     }
   },
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true,
-    "jest": true
-  },
-  "globals": {
-    "__APP_VERSION__": true
-  },
   "rules": {
-    "babel/no-invalid-this": 1,
-    "prettier/prettier": ["error", null, "@prettier"],
+    "babel/no-invalid-this": 0,
+    "no-invalid-this": 0,
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/indent": 0,
+    "@typescript-eslint/explicit-member-accessibility": ["warn",
+      {
+        "accessibility": "explicit",
+        "overrides": {
+          "constructors": "off"
+        }
+      }
+    ],
+    "@typescript-eslint/explicit-function-return-type": ["warn",
+      {
+          "allowExpressions": true,
+          "allowTypedFunctionExpressions": true
+    }],
     "react/no-deprecated": 1,
     "react/jsx-no-target-blank": 1,
     "react/destructuring-assignment": ["error", "always"],
@@ -88,8 +87,9 @@
     "react/jsx-no-duplicate-props": ["error"],
     "react/jsx-no-literals": ["error"],
     "react/jsx-no-undef": ["error"],
+    "react/prop-types": 0,
     "react/jsx-one-expression-per-line": ["error", {"allow": "single-child"}],
-    "react/jsx-curly-brace-presence": ["error", { "props": "always", "children": "ignore" }],
+    "react/jsx-curly-brace-presence": ["warn", { "props": "ignore", "children": "ignore" }],
     "react/jsx-pascal-case": ["error"],
     "react/jsx-props-no-multi-spaces": ["error"],
     "react/jsx-sort-default-props": ["error"],
@@ -106,23 +106,19 @@
       2,
       "always"
     ],
-    "semi": ["error"],
-    "comma-dangle": ["error"],
-    "camelcase": 0,
-    "no-useless-escape": ["error"],
-    "no-invalid-this": 0,
-    "handle-callback-err": ["error"],
-    "no-fallthrough": ["error"],
-    "no-new-require": ["error"],
-    "max-len": ["error", 160],
-    "require-jsdoc": 0,
-    "valid-jsdoc": 0,
-    "prefer-spread": 1,
-    "prefer-rest-params": 1,
-    "linebreak-style": 0,
-    "quote-props":["error", "as-needed"],
     "verdaccio/jsx-no-style": ["warn"],
     "verdaccio/jsx-spread": ["warn"],
-    "jest/expect-expect": 0
+    "jest/expect-expect": 0,
+    "quote-props":["error", "as-needed"],
+    "max-len": ["error", 160],
+    "prefer-spread": 1,
+    "linebreak-style": 0
+  },
+  "globals": {
+    "__DEBUG__": true
+  },
+  "env": {
+    "browser": true,
+    "jest/globals": true
   }
 }

.flowconfig

@@ -1,166 +1,3 @@
-################################################
-# Workflow for a branch push 
-################################################
-workflow "build and test on branch" {
-  resolves = [
-    "branch.lint.node.10",
-    "branch.test.node.10",
-    "branch.test.node.8",
-    # "branch.test.node.12"
-  ]
-  on = "push"
-}
-
-# node 10 
-action "branch.filter" {
-  uses = "actions/bin/filter@master"
-  args = "branch"
-}
-
-action "branch.install.node.10" {
-  needs = ["branch.filter"]
-  uses = "docker://node:10"
-  args = "yarn install"
-}
-
-action "branch.build.node.10" {
-  uses = "docker://node:10"
-  needs = ["branch.install.node.10"]
-  args = "yarn run build"
-}
-
-action "branch.lint.node.10" {
-  uses = "docker://node:10"
-  needs = ["branch.install.node.10"]
-  args = "yarn run lint"
-}
-
-action "branch.test.node.10" {
-  uses = "docker://node:10"
-  needs = ["branch.build.node.10"]
-  args = "yarn run test"
-}
-
-# node 8
-action "branch.install.node.8" {
-  needs = ["branch.filter"]
-  uses = "docker://node:8"
-  args = "yarn install"
-}
-
-action "branch.build.node.8" {
-  uses = "docker://node:8"
-  needs = ["branch.install.node.8"]
-  args = "yarn run build"
-}
-
-action "branch.test.node.8" {
-  uses = "docker://node:8"
-  needs = ["branch.build.node.8"]
-  args = "yarn run test"
-}
-
-# @todo node 12
-# action "branch.install.node.12" {
-#   needs = ["branch.filter"]
-#   uses = "docker://node:12"
-#   args = "yarn install"
-# }
-
-# action "branch.build.node.12" {
-#   uses = "docker://node:12"
-#   needs = ["branch.install.node.12"]
-#   args = "yarn run build"
-# }
-
-# action "branch.test.node.12" {
-#   uses = "docker://node:12"
-#   needs = ["branch.build.node.12"]
-#   args = "yarn run test"
-# }
-
-################################################
-# Workflow for a Pull request
-################################################
-workflow "build and test on PR" {
-  resolves = [
-    "pr.lint.node.10",
-    "pr.test.node.10",
-    "pr.test.node.8",
-    # "pr.test.node.12"
-  ]
-  on = "pull_request"
-}
-
-# node 10 
-action "pr.filter" {
-  uses = "actions/bin/filter@master"
-  args = "action 'opened|synchronize|reopened'"
-}
-
-action "pr.install.node.10" {
-  needs = ["pr.filter"]
-  uses = "docker://node:10"
-  args = "yarn install"
-}
-
-action "pr.build.node.10" {
-  uses = "docker://node:10"
-  needs = ["pr.install.node.10"]
-  args = "yarn run build"
-}
-
-action "pr.lint.node.10" {
-  uses = "docker://node:10"
-  needs = ["pr.install.node.10"]
-  args = "yarn run lint"
-}
-
-action "pr.test.node.10" {
-  uses = "docker://node:10"
-  needs = ["pr.build.node.10"]
-  args = "yarn run test"
-}
-
-# node 8
-action "pr.install.node.8" {
-  needs = ["pr.filter"]
-  uses = "docker://node:8"
-  args = "yarn install"
-}
-
-action "pr.build.node.8" {
-  uses = "docker://node:8"
-  needs = ["pr.install.node.8"]
-  args = "yarn run build"
-}
-
-action "pr.test.node.8" {
-  uses = "docker://node:8"
-  needs = ["pr.build.node.8"]
-  args = "yarn run test"
-}
-
-# @todo node 12
-# action "pr.install.node.12" {
-#   needs = ["pr.filter"]
-#   uses = "docker://node:12"
-#   args = "yarn install"
-# }
-
-# action "pr.build.node.12" {
-#   uses = "docker://node:12"
-#   needs = ["pr.install.node.12"]
-#   args = "yarn run build"
-# }
-
-# action "pr.test.node.12" {
-#   uses = "docker://node:12"
-#   needs = ["pr.build.node.12"]
-#   args = "yarn run test"
-# }
-
-
 ################################################
 # Workflow for a github release when a tag is
 # pushed