CI Github Action Improvement

.github/workflows/ci.yml

@@ -4,13 +4,18 @@ on:
   pull_request:
     branches:
       - master
+    paths:
+      - 'src/**'
     types: [opened, synchronize, reopened]
+  # Support manual trigger of the CI in case we need to retry
+  workflow_dispatch:
 
 permissions:
-  contents: write
+  contents: read
 
 jobs:
   run-ci:
+    name: CI
     runs-on: ubuntu-latest
     steps:
       # Checkout Action: https://github.com/actions/checkout
@@ -27,16 +32,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Run Prettier
-        run: npm run prettier
-
-      # Auto Commit Action Repo: https://github.com/stefanzweifel/git-auto-commit-action
-      - name: Commit and push formatting changes
-        uses: stefanzweifel/git-auto-commit-action@v7
-        with:
-          commit_message: "style: auto-format code with prettier"
-          commit_user_name: "github-actions[bot]"
-          commit_user_email: "github-actions[bot]@users.noreply.github.com"
+      # Prettier Check: Verifies all files in src/ adhere to .prettierrc convention
+      - name: Check Prettier formatting
+        run: npx prettier --check src/
 
+      # ESLint: Enforces style and syntax rules
       - name: Run ESLint
         run: npm run lint

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

CONTRIBUTING.md

@@ -35,18 +35,17 @@ This repository requires `node`/`npm`
 1. Fork the repository
 2. Clone the fork of the repository
 3. `cd` into the project directory
-4. `npm install` to install necessary dependencies
+4. `npm install` to install necessary dependencies + necessary hooks
 5. `npm run start` to start local version of the app
 6. The site should be locally accessible from `localhost:3000`
 
 ## Submitting a PR
 
-Before creating a pull request, please ensure your code passes ESLint and Prettier by running the following commands:
+Before creating a pull request, ensure that the only committed changes are in files relevant to the PR. Do not push changes to package-lock.json, node_modules or anything else that is unrelated to your ticket!
 
--   `npm run lint`
--   `npm run prettier`
-
-Also ensure that the only committed changes are in files relevant to the PR. Do not push changes to package-lock.json, node_modules or anything else that is unrelated to your ticket!
+The ESLint and Prettier formatting standards are automatically applied for each JS/TS file under `src/` you modify on commit via a hook. To double check that your code meets the standards, you can run the below commands:
+- `npm run lint`
+- `npm run prettier`
 
 To make a PR:
 
@@ -55,4 +54,5 @@ To make a PR:
 3. Base repo should be csvistool/master and head repo should be the relevant branch on your fork
 4. Name the PR something simple and descriptive
 5. In the description, make sure to reference the issue you worked on (such as “closes #155”, “addresses #150”, etc)
-6. Add anything else to the description that you think makes your changes more understandable
+6. Add anything else to the description that you think makes your changes more understandable
+7. Verify that the CI check passes! If there are any failures, please fix those and update the PR

package.json

@@ -1,44 +1,52 @@
-{
-	"name": "visualization-tool",
-	"version": "0.1.0",
-	"private": true,
-	"homepage": "https://csvistool.com/",
-	"dependencies": {
-		"@emotion/react": "^11.10.5",
-		"@emotion/styled": "^11.10.5",
-		"@mui/material": "5.11.7",
-		"@mui/styles": "^5.11.7",
-		"babel-eslint": "^10.1.0",
-		"gh-pages": "^2.1.1",
-		"js-cookie": "^3.0.5",
-		"prop-types": "^15.7.2",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-ga4": "^2.0.0",
-		"react-icons": "^4.10.1",
-		"react-router-dom": "^6.26.2",
-		"react-scripts": "5.0.1"
-	},
-	"devDependencies": {
-		"eslint": "^7.32.0",
-		"eslint-config-react-app": "^5.1.0",
-		"eslint-plugin-flowtype": "^8.0.3",
-		"eslint-plugin-import": "^2.27.5",
-		"eslint-plugin-react": "^7.17.0",
-		"eslint-plugin-react-hooks": "^4.6",
-		"prettier": "^2.8.3"
-	},
-	"scripts": {
-		"predeploy": "npm run build",
-		"deploy": "gh-pages -d build",
-		"start": "react-scripts start",
-		"build": "react-scripts build",
-		"test": "react-scripts test",
-		"eject": "react-scripts eject",
-		"lint": "eslint src/.",
-		"prettier": "prettier --write src/."
-	},
-	"browserslist": [
-		"defaults"
-	]
-}
+{
+	"name": "visualization-tool",
+	"version": "0.1.0",
+	"private": true,
+	"homepage": "https://csvistool.com/",
+	"dependencies": {
+		"@emotion/react": "^11.10.5",
+		"@emotion/styled": "^11.10.5",
+		"@mui/material": "5.11.7",
+		"@mui/styles": "^5.11.7",
+		"babel-eslint": "^10.1.0",
+		"gh-pages": "^2.1.1",
+		"js-cookie": "^3.0.5",
+		"prop-types": "^15.7.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-ga4": "^2.0.0",
+		"react-icons": "^4.10.1",
+		"react-router-dom": "^6.26.2",
+		"react-scripts": "5.0.1"
+	},
+	"devDependencies": {
+		"eslint": "^7.32.0",
+		"eslint-config-react-app": "^5.1.0",
+		"eslint-plugin-flowtype": "^8.0.3",
+		"eslint-plugin-import": "^2.27.5",
+		"eslint-plugin-react": "^7.17.0",
+		"eslint-plugin-react-hooks": "^4.6",
+		"husky": "^9.1.7",
+		"lint-staged": "^17.6.0",
+		"prettier": "^2.8.3"
+	},
+	"scripts": {
+		"predeploy": "npm run build",
+		"deploy": "gh-pages -d build",
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"lint": "eslint src/.",
+		"prettier": "prettier --write src/.",
+		"prepare": "husky"
+	},
+	"lint-staged": {
+		"src/**/*.{js,jsx,json,css}": [
+			"prettier --write"
+		]
+	},
+	"browserslist": [
+		"defaults"
+	]
+}