Add pre-commit check and static code analysis (#94)

* Add precommit checks

* Add static code analysis

* Fix ESLint issues

Author: compulim

.eslintrc.react.yml

@@ -0,0 +1,118 @@
+env:
+  browser: true
+
+extends:
+  - ./.eslintrc.yml
+  - plugin:react/recommended
+  - plugin:react-hooks/recommended
+
+parserOptions:
+  ecmaFeatures:
+    jsx: true
+
+plugins:
+  - react
+  - react-hooks
+
+rules:
+  react/button-has-type: error
+  react/default-props-match-prop-types: error
+  react/destructuring-assignment: error
+  react/display-name: off
+  react/forbid-component-props:
+    - error
+    - forbid:
+        - style
+  react/forbid-dom-props:
+    - error
+    - forbid:
+        - id
+
+  # Need to set "children" prop types to "any"
+  # react/forbid-prop-types: error
+
+  react/no-access-state-in-setstate: error
+  react/no-array-index-key: error
+  react/no-danger: error
+  react/no-did-mount-set-state: error
+  react/no-did-update-set-state: error
+  react/no-redundant-should-component-update: error
+  react/no-typos: error
+  react/no-this-in-sfc: error
+  react/no-unescaped-entities: error
+  react/no-unsafe: error
+  react/no-unused-prop-types: error
+  react/no-unused-state: error
+  react/no-will-update-set-state: error
+  react/prefer-es6-class: error
+  react/prefer-read-only-props: error
+  react/require-default-props: error
+  react/self-closing-comp: error
+  react/sort-prop-types:
+    - error
+    - ignoreCase: true
+  react/state-in-constructor: error
+  react/static-property-placement:
+    - error
+    - property assignment
+  react/style-prop-object: error
+  react/void-dom-elements-no-children: error
+  react/jsx-boolean-value:
+    - error
+    - always
+  react/jsx-closing-bracket-location:
+    - error
+    - tag-aligned
+  react/jsx-closing-tag-location: error
+  react/jsx-equals-spacing:
+    - error
+    - never
+  react/jsx-first-prop-new-line:
+    - error
+    - multiline-multiprop
+  react/jsx-handler-names: error
+  react/jsx-indent:
+    - error
+    - 2
+  react/jsx-indent-props:
+    - error
+    - 2
+  react/jsx-max-props-per-line:
+    - error
+    - maximum: 1
+      when: multiline
+  react/jsx-no-bind: error
+  react/jsx-no-literals: error
+
+  # Conflicts with prettier
+  # react/jsx-one-expression-per-line:
+  # - error
+  # - allow: literal
+
+  react/jsx-fragments:
+    - error
+    - element
+  react/jsx-pascal-case: error
+  react/jsx-props-no-multi-spaces: error
+  react/jsx-sort-default-props:
+    - error
+    - ignoreCase: true
+  react/jsx-sort-props:
+    - error
+    - ignoreCase: true
+  react/jsx-tag-spacing:
+    - error
+    - afterOpening: never
+      beforeClosing: never
+      beforeSelfClosing: always
+      closingSlash: never
+
+  # Conflict with no-extra-parens
+  react/jsx-wrap-multilines: error
+
+  react-hooks/rules-of-hooks: error
+  react-hooks/exhaustive-deps: warn
+
+settings:
+  react:
+    version: detect

.eslintrc.yml

@@ -1,12 +1,15 @@
-env:
-  browser: true
-  es6: true
-  jest: true
 extends:
-- eslint:recommended
-globals:
-  React: readonly
+  - eslint:recommended
+
+parserOptions:
+  ecmaVersion: 12
+  sourceType: module
+
+plugins:
+  - prettier
+
 root: true
+
 rules:
   # Only list rules that are not in *:recommended set
   # If rules are set to disable the one in *:recommended, please elaborate the reason
@@ -15,28 +18,28 @@ rules:
   no-async-promise-executor: error
   no-await-in-loop: error
   no-console:
-  - error
-  - allow:
     - error
-    - warn
+    - allow:
+        - error
+        - warn
   # no-extra-parens: error # conflicts with prettier
   no-misleading-character-class: error
   no-template-curly-in-string: error
   require-atomic-updates: error
   accessor-pairs: error
   block-scoped-var: error
   class-methods-use-this:
-  - error
-  - exceptMethods:
-    - render
+    - error
+    - exceptMethods:
+        - render
   complexity: error
   curly: error
   default-case: error
   dot-notation: error
   eqeqeq: error
   max-classes-per-file:
-  - error
-  - 2
+    - error
+    - 2
   no-alert: error
   no-caller: error
   no-div-regex: error
@@ -54,13 +57,13 @@ rules:
   no-labels: error
   no-lone-blocks: error
   no-magic-numbers:
-  - error
-  - ignore:
-    - 0
-    - 1
+    - error
+    - ignore:
+        - 0
+        - 1
   no-multi-spaces:
-  - error
-  - ignoreEOLComments: true
+    - error
+    - ignoreEOLComments: true
   no-multi-str: error
   no-new: error
   no-new-func: error
@@ -75,9 +78,9 @@ rules:
   no-throw-literal: error
   no-unmodified-loop-condition: error
   no-unused-expressions:
-  - error
-  - allowShortCircuit: true
-    allowTernary: true
+    - error
+    - allowShortCircuit: true
+      allowTernary: true
   no-useless-call: error
   no-useless-catch: error
   no-useless-concat: error
@@ -94,11 +97,11 @@ rules:
   # Group - Variables
   no-label-var: error
 
-  # Re-enable later
+  # Too easy for false positive
   # no-shadow:
-  # - error
-  # - builtinGlobals: true
-  #   hoist: all
+  #   - error
+  #   - builtinGlobals: true
+  #     hoist: all
 
   no-shadow-restricted-names: error
   no-undef-init: error
@@ -107,33 +110,28 @@ rules:
   # no-undefined: off
 
   no-unused-vars:
-  - error
-  - argsIgnorePattern: ^_$
-    varsIgnorePattern: ^_
-  no-use-before-define: error
+    - error
+    - argsIgnorePattern: ^_$
+      varsIgnorePattern: ^_
 
-  # Group - Node.js and CommonJS
-  callback-return: error
-  global-require: error
-  handle-callback-err: error
-  no-buffer-constructor: error
-  no-mixed-requires: error
-  no-new-require: error
-  no-path-concat: error
-  no-sync: error
+  no-use-before-define: error
 
   # Group - ECMAScript 6
   arrow-body-style:
-  - error
-  - as-needed
+    - error
+    - as-needed
+
   arrow-parens:
-  - error
-  - as-needed
+    - error
+    - as-needed
+
   arrow-spacing:
-  - error
-  - after: true
-    before: true
-  # generator-star-spacing: # conflicts with prettier
+    - error
+    - after: true
+      before: true
+
+  # Conflicts with Prettier
+  # generator-star-spacing:
   # - error
   # - after
 
@@ -158,20 +156,27 @@ rules:
   # prefer-template: error
 
   rest-spread-spacing:
-  - error
-  - never
+    - error
+    - never
 
   # Cannot group global or local imports and sort in differently
-  # sort-imports:
-  # - error
-  # - ignoreCase: true
+  sort-imports:
+    - error
+    - allowSeparatedGroups: true
+      ignoreCase: true
+      memberSyntaxSortOrder:
+        - none
+        - all
+        - single
+        - multiple
 
   template-curly-spacing:
-  - error
-  - never
+    - error
+    - never
+
   yield-star-spacing:
-  - error
-  - after
-settings:
-  react:
-    version: detect
+    - error
+    - after
+
+  # plugin:prettier
+  prettier/prettier: error

.github/workflows/ci.yml

@@ -104,8 +104,12 @@ jobs:
         run: npm run bootstrap
 
       - name: Propagating versions
+        run: node_modules/.bin/lerna version --force-publish --no-git-tag-version --no-push --yes `cat package.json | jq -r .version`
+
+      - name: Running static code analysis
         run: |
-          node_modules/.bin/lerna version --force-publish --no-git-tag-version --no-push --yes `cat package.json | jq -r .version`
+          cd packages/component
+          npm run precommit src/
 
       - name: Building for instrumentation
         env:

.husky/.gitattributes

@@ -0,0 +1 @@
+pre-commit eol=lf

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run precommit

lint-staged.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  'packages/component/src/**/*.js': ['npm run precommit:component']
+};