Lebovits/issu643 add frontend formatting check (#752)

* add formatting + linting checks to front end workflows
* have checks run on PRs to staging, not main

.eslintrc.json

@@ -5,13 +5,24 @@
     "sourceType": "module",
     "project": "./tsconfig.json"
   },
-  "extends": ["next/core-web-vitals", "plugin:react/recommended", "prettier"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
   "rules": {
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
-    "custom-rules/no-text-size-class": "warn"
+    "custom-rules/no-text-size-class": "warn",
+    "prettier/prettier": "error"
   },
-  "plugins": ["react", "eslint-plugin-custom-rules"],
+  "plugins": [
+    "react",
+    "eslint-plugin-custom-rules",
+    "@typescript-eslint",
+    "prettier"
+  ],
   "settings": {
     "react": {
       "version": "detect"

.github/workflows/pr_checks.yaml

@@ -1,27 +1,40 @@
-name: Frontend PR Checks
-on: # see https://docs.github.com/en/actions/using-workflows/events-that-trigger-workflows
-  workflow_dispatch:
-  pull_request:
-    paths:
-      - "src/**/*"
-      - "package.json"
-      - "package-lock.json"
-      - "*.js"
+name: PR Checks
+
+on:
+  push:
+    branches:
+      - staging
+
 jobs:
-  lint_and_build:
+  lint:
     runs-on: ubuntu-latest
+
     steps:
-      - name: Check out repository code
+      - name: Checkout repository
         uses: actions/checkout@v4
-      - name: Setup Node.js
+
+      - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
-          cache: "npm"
-          cache-dependency-path: "package-lock.json"
+          node-version: '20'
+
       - name: Install dependencies
-        run: npm ci
-      - name: Run lints
+        run: npm install
+
+      - name: Run ESLint
         run: npm run lint
-      - name: Check the build
-        run: npm run build
+        continue-on-error: true
+
+      - name: Run Prettier Check
+        run: npm run format:check
+        continue-on-error: true
+
+      - name: Check linting and formatting
+        if: failure()
+        run: |
+          echo "Linting or formatting issues found. Please run 'npm run lint:fix' and 'npm run format' to fix them."
+          exit 1
+
+      - name: Linting and formatting success
+        if: success()
+        run: echo "No linting or formatting issues found. Good job!"

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}