chore: add eslint and configs. (#255)

Format the code and fix all linting issues

Author: xobotyi

.eslintrc.js

@@ -0,0 +1,73 @@
+module.exports = {
+  root: true,
+
+  ignorePatterns: [
+    'node_modules',
+    'coverage',
+    'dist',
+    '.github/workflows',
+    '.husky',
+    'CHANGELOG.md',
+  ],
+
+  parserOptions: {
+    project: './tsconfig.eslint.json',
+    tsconfigRootDir: __dirname,
+    extraFileExtensions: ['.mdx', '.md'],
+  },
+
+  overrides: [
+    {
+      files: ['*.js', '*.ts', '*.jsx', '*.tsx'],
+      extends: ['@react-hookz/eslint-config/react'],
+      rules: {
+        // ToDo: remove below after refactoring
+        'no-underscore-dangle': 'off',
+        'import/no-default-export': 'off',
+        'no-bitwise': 'off',
+        '@typescript-eslint/naming-convention': 'off',
+        'react/destructuring-assignment': 'off',
+        'unicorn/consistent-destructuring': 'off',
+        'react/no-unused-class-component-methods': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
+    {
+      files: ['tests/*.js', 'tests/*.ts', 'tests/*.jsx', 'tests/*.tsx'],
+      extends: ['@react-hookz/eslint-config/react'],
+      rules: {
+        // ToDo: remove below after refactoring
+        'no-underscore-dangle': 'off',
+        'import/no-default-export': 'off',
+        '@typescript-eslint/naming-convention': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        'no-prototype-builtins': 'off',
+        '@typescript-eslint/no-unused-vars': 'off',
+        'no-bitwise': 'off',
+        'func-names': 'off',
+        '@typescript-eslint/restrict-plus-operands': 'off',
+        'react/jsx-no-bind': 'off',
+        'react/no-unused-state': 'off',
+        'react/destructuring-assignment': 'off',
+        'unicorn/consistent-destructuring': 'off',
+        'react/no-unused-class-component-methods': 'off',
+        'no-use-before-define': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+      },
+    },
+    {
+      files: ['*.md', '*.mdx'],
+      extends: ['@react-hookz/eslint-config/mdx'],
+    },
+  ],
+};

.github/workflows/ci.yaml

@@ -13,6 +13,27 @@ env:
   HUSKY: 0
 
 jobs:
+  lint:
+    name: "Lint"
+    runs-on: ubuntu-latest
+    steps:
+      - name: "Checkout"
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - uses: bahmutov/npm-install@v1
+        with:
+          useRollingCache: true
+          install-command: yarn --frozen-lockfile
+
+      - name: "Lint"
+        run: yarn lint -f @jamesacarr/github-actions
+
   test:
     name: "Test"
     runs-on: ubuntu-latest
@@ -44,7 +65,7 @@ jobs:
   dependabot-merge:
     name: "Dependabot automerge"
     runs-on: ubuntu-latest
-    needs: [ "test" ]
+    needs: [ "test", "lint" ]
     permissions:
       pull-requests: write
       contents: write

.prettierrc.js

@@ -0,0 +1,3 @@
+const config = require("@react-hookz/eslint-config/.prettierrc.js");
+
+module.exports = config;

README.md

@@ -50,11 +50,11 @@ Underneath `react-scrollbars-custom` uses `requestAnimationFrame` loop, which ch
 The `<Scrollbar />` component works out of the box, with only need of `width` and `height` to be set, inline or via CSS;
 
 ```typescript jsx
-import { Scrollbar } from "react-scrollbars-custom";
+import { Scrollbar } from 'react-scrollbars-custom';
 
 <Scrollbar style={{ width: 250, height: 250 }}>
   <p>Hello world!</p>
-</Scrollbar>
+</Scrollbar>;
 ```
 
 ### Internet Explorer
@@ -75,9 +75,7 @@ It'll change the generated markup:
 // scrollbar.scrollerElement
 <div class="ScrollbarsCustom native trackYVisible trackXVisible">
   // scrollbar.contentElement - the one that holds tour content
-  <div class="ScrollbarsCustom-Content">
-    // YOUR CONTENT IS HERE
-  </div>
+  <div class="ScrollbarsCustom-Content">// YOUR CONTENT IS HERE</div>
 </div>
 ```
 
@@ -113,51 +111,51 @@ You can do absolutely what ever you want y simply passing renderer SFC to the ne
 
 ```typescript jsx
 <Scrollbar
-  renderer={props => {
+  renderer={(props) => {
     const { elementRef, ...restProps } = props;
     return <span {...restProps} ref={elementRef} className="MyAwesomeScrollbarsHolder" />;
   }}
   wrapperProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="MyAwesomeScrollbarsWrapper" />;
-    }
+    },
   }}
   scrollerProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="MyAwesomeScrollbarsScroller" />;
-    }
+    },
   }}
   contentProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="Content" />;
-    }
+    },
   }}
   trackXProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="TrackX" />;
-    }
+    },
   }}
   trackYProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="trackY" />;
-    }
+    },
   }}
   thumbXProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="ThUmBX" />;
-    }
+    },
   }}
   thumbYProps={{
-    renderer: props => {
+    renderer: (props) => {
       const { elementRef, ...restProps } = props;
       return <span {...restProps} ref={elementRef} className="tHuMbY" />;
-    }
+    },
   }}
 />
 ```
@@ -172,9 +170,7 @@ You can do absolutely what ever you want y simply passing renderer SFC to the ne
     // scrollbar.scrollerElement - the one that actually has browser's scrollbars
     <div class="ScrollbarsCustom-Scroller">
       // scrollbar.contentElement - the one that holds tour content
-      <div class="ScrollbarsCustom-Content">
-        // YOUR CONTENT IS HERE
-      </div>
+      <div class="ScrollbarsCustom-Content">// YOUR CONTENT IS HERE</div>
     </div>
   </div>
   // scrollbar.trackYElement

karma.conf.ts

@@ -1,18 +1,19 @@
+// eslint-disable-next-line unicorn/prefer-module
 module.exports = (cfg) => {
   cfg.set({
-    browsers: ["ChromeHeadless"],
+    browsers: ['ChromeHeadless'],
 
     singleRun: true,
     autoWatch: false,
 
-    frameworks: ["jasmine", "karma-typescript"],
-    reporters: ["progress", "karma-typescript"],
+    frameworks: ['jasmine', 'karma-typescript'],
+    reporters: ['progress', 'karma-typescript'],
     preprocessors: {
-      "**/*.ts": "karma-typescript",
-      "**/*.tsx": "karma-typescript",
+      '**/*.ts': 'karma-typescript',
+      '**/*.tsx': 'karma-typescript',
     },
 
-    files: ["./src/**/*.ts", "./src/**/*.tsx", "./tests/**/*.spec.ts", "./tests/**/*.spec.tsx"],
+    files: ['./src/**/*.ts', './src/**/*.tsx', './tests/**/*.spec.ts', './tests/**/*.spec.tsx'],
 
     client: {
       jasmine: {
@@ -23,33 +24,33 @@ module.exports = (cfg) => {
     karmaTypescriptConfig: {
       bundlerOptions: {
         constants: {
-          "process.env": {
-            NODE_ENV: "production",
+          'process.env': {
+            NODE_ENV: 'production',
           },
         },
       },
       compilerOptions: {
-        target: "es2017",
-        module: "commonjs",
-        moduleResolution: "node",
-        jsx: "react",
-        lib: ["dom", "es2017"],
+        target: 'es2017',
+        module: 'commonjs',
+        moduleResolution: 'node',
+        jsx: 'react',
+        lib: ['dom', 'es2017'],
       },
       coverageOptions: {
         exclude: /(node_modules|tests|spec)/i,
       },
       reports: {
         lcovonly: {
-          directory: "./coverage",
-          subdirectory: () => "",
-          filename: "lcov.info",
+          directory: './coverage',
+          subdirectory: () => '',
+          filename: 'lcov.info',
         },
         html: {
-          directory: "./coverage",
-          subdirectory: () => "",
+          directory: './coverage',
+          subdirectory: () => '',
         },
       },
-      include: ["./src/**/*", "./tests/**/*"],
+      include: ['./src/**/*', './tests/**/*'],
     },
   });
 };

package.json

@@ -47,18 +47,23 @@
   "devDependencies": {
     "@babel/core": "^7.18.9",
     "@babel/preset-env": "^7.18.9",
+    "@jamesacarr/eslint-formatter-github-actions": "^0.1.0",
+    "@react-hookz/eslint-config": "^1.6.1",
     "@types/jasmine": "^4.0.3",
     "@types/karma": "^6.3.3",
-    "@types/react": "^16.9.35",
+    "@types/react": "^17",
+    "@types/react-dom": "^17",
     "cross-env": "^7.0.3",
     "jasmine-core": "^4.3.0",
     "karma": "^6.4.0",
     "karma-chrome-launcher": "^3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-jasmine": "^5.1.0",
     "karma-typescript": "^5.5.3",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "lint-staged": "^13.0.3",
+    "prettier": "^2.7.1",
+    "react": "^17",
+    "react-dom": "^17",
     "rimraf": "^3.0.2",
     "rollup": "^2.77.0",
     "rollup-plugin-babel": "^4.4.0",
@@ -67,12 +72,14 @@
     "tslib": "^2.0.0",
     "typescript": "^4.7.4"
   },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md,mdx}": "eslint --fix"
+  },
   "scripts": {
+    "lint": "eslint ./ --ext ts,js,tsx,jsx,md,mdx",
+    "lint:fix": "yarn lint --fix",
     "devserver": "cd ./testbench && npm i && npm run devserver",
     "build": "rimraf ./dist && rollup --config",
     "test": "cross-env NODE_ENV=production karma start"
-  },
-  "prettier": {
-    "printWidth": 120
   }
 }