Merge pull request #262 from CBIIT/eslint-linting

DX: Prettier Integration

.eslintrc.cjs

@@ -1,77 +1,106 @@
 /* eslint-env node */
-module.exports = {
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+const config = {
   extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:jsx-a11y/recommended",
-    'airbnb',
-    'airbnb-typescript',
+    "airbnb",
+    "airbnb-typescript",
+    "prettier",
   ],
-  parser: '@typescript-eslint/parser',
+  parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
+      jsx: true,
     },
     ecmaVersion: 11,
     project: "./tsconfig.json",
-    sourceType: "module"
+    sourceType: "module",
   },
-  plugins: ["react", "@typescript-eslint", "jsx-a11y"],
+  plugins: ["react", "@typescript-eslint", "jsx-a11y", "prettier"],
   settings: {
     react: {
       pragma: "React",
       fragment: "Fragment",
-      version: "detect"
-    }
+      version: "detect",
+    },
   },
   root: true,
   ignorePatterns: ["public/js/*.js"],
   rules: {
-    "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx", ".tsx", ".ts"] }],
-    "no-empty-function": "warn",
-    "@typescript-eslint/no-empty-function": "error",
-    "prettier/prettier": "off",
-    "import/no-unresolved": "off",
-    "import/extensions": "off",
-    "react/display-name": "off",
-    "@typescript-eslint/comma-dangle": "off",
+    /* base prettier rule */
+    "prettier/prettier": "error",
+
     "import/prefer-default-export": "off",
-    "comma-dangle": "off",
     "max-len": "off",
     "no-console": "warn",
     "no-param-reassign": "off",
-    "no-plusplus": "off",
-    "no-return-assign": "off",
     "object-curly-newline": "off",
+    "no-underscore-dangle": ["off"],
+    "arrow-body-style": ["warn"],
+    "eol-last": ["warn"],
+    "no-unreachable": ["warn"],
+
+    /* typescript-eslint overwritten rules */
+    "no-use-before-define": "off",
+    "no-unused-vars": "off",
+    "no-loss-of-precision": "off",
+    "no-shadow": "off",
+    "no-empty-function": "off",
+
+    /* react rules */
+    "react/prop-types": "off",
+    "react/jsx-filename-extension": [
+      1,
+      { extensions: [".js", ".jsx", ".tsx", ".ts"] },
+    ],
     "react/jsx-props-no-spreading": "off",
     "react/react-in-jsx-scope": "off",
     "react/require-default-props": "off",
-    "typescript-eslint/no-unused-vars": "off",
-    "import/no-extraneous-dependencies": "off",
-    "react/no-unescaped-entities": "off",
-    "react/forbid-prop-types": "off",
-    "react/jsx-max-props-per-line": [
-      1,
+    "react/jsx-max-props-per-line": [1, { maximum: 1, when: "multiline" }],
+    "react/function-component-definition": [
+      "error",
       {
-        maximum: 2,
-        when: "multiline"
-      }
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
     ],
-    indent: "off",
-    "react/jsx-indent": ["warn"],
-    "@typescript-eslint/indent": [0],
-    "no-underscore-dangle": ["off"],
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["off"],
+    "react/jsx-key": [
+      "error",
+      {
+        checkFragmentShorthand: true,
+        checkKeyMustBeforeSpread: true,
+        warnOnDuplicates: true,
+      },
+    ],
+    "react/destructuring-assignment": [
+      "error",
+      "always",
+      { destructureInSignature: "always" },
+    ],
+
+    /* typescript-eslint rules */
+    "@typescript-eslint/no-empty-function": "error",
+    "@typescript-eslint/no-use-before-define": ["error"],
     "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-loss-of-precision": "error",
+    "@typescript-eslint/no-redundant-type-constituents": "error",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "error",
     "@typescript-eslint/no-shadow": ["off"],
     "@typescript-eslint/dot-notation": ["off"],
-    "@typescript-eslint/quotes": ["off"],
-    "react/prop-types": ["off"],
-    "@typescript-eslint/naming-convention": ["off"],
-    "react/function-component-definition": ["off"],
-    "arrow-body-style": ["warn"],
+    "@typescript-eslint/naming-convention": [
+      "error",
+      {
+        selector: "variable",
+        format: ["camelCase", "PascalCase", "UPPER_CASE"],
+        leadingUnderscore: "allow",
+      },
+    ],
     "@typescript-eslint/ban-ts-comment": ["off"],
-    "eol-last": ["warn"],
-  }
+  },
 };
+
+module.exports = config;

.github/workflows/lint.yml

@@ -42,7 +42,7 @@ jobs:
         run: npm install --legacy-peer-deps
 
       - name: Run Typecheck
-        run: npm run check:ci
+        run: npm run typecheck
 
       - name: Run Linter
         run: npm run lint:ci

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run typecheck
+npm run lint:ci

.prettierrc.cjs

@@ -0,0 +1,12 @@
+/**
+ * @type {import("prettier").Config}
+ */
+const config = {
+  trailingComma: "es5",
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: false,
+};
+
+module.exports = config;

README.md

@@ -1,18 +1,26 @@
 # CRDC Data Hub
 
 [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+[![Coverage Status](https://coveralls.io/repos/github/CBIIT/crdc-datahub-ui/badge.svg?branch=main)](https://coveralls.io/github/CBIIT/crdc-datahub-ui?branch=main)
 
-CRDC Data Hub is a React application designed to provide a user-friendly interface for accessing and managing data using various technologies and tools. This project utilizes TypeScript, React v18, Material-UI v5, ESLint, React Router DOM, GraphQL, and Apollo.
-
+CRDC Data Hub is a React application designed to provide a user-friendly interface for accessing and managing data using various technologies and tools. This project utilizes Node `20.11`, TypeScript, React `v18`, Material-UI `v5`, GraphQL, and Apollo.
 
 ## Installation
 
 To run the CRDC Data Hub project locally, follow these steps:
 
 1. Clone the repository
 2. Navigate to the project directory
-3. Install the dependencies: `npm ci`
-4. Start the development server: `npm start`
-5. Open your browser and visit `http://localhost:3000` to access the application.
+3. Copy `.env.example` to `.env` and update the environment variables as needed
+4. Install the dependencies: `npm ci`
+5. Start the development server: `npm start`
+6. Open your browser and visit `http://localhost:3010` to access the application.
 
 Please see the instructions in [nginx/README.md](./nginx/README.md) for configuring Nginx.
+
+## Contributing
+
+We use Husky to run a pre-commit hook that will run ESLint and Prettier checks on staged files. If there are any issues, you will need to fix them before you can commit your changes.
+
+If you need to bypass the pre-commit hook, you can use the Git `--no-verify` flag when committing your changes.
+These same issues will still be caught by the CI/CD pipeline.