From 00fb39b8d4cce03015b3a32a669508956856b92e Mon Sep 17 00:00:00 2001
From: Nissim Lebovits <111617674+nlebovits@users.noreply.github.com>
Date: Thu, 18 Jul 2024 09:00:41 +0200
Subject: [PATCH] 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                   | 17 +++++++++--
 .github/workflows/pr_checks.yaml | 51 ++++++++++++++++++++------------
 .prettierrc                      |  5 ++++
 3 files changed, 51 insertions(+), 22 deletions(-)
 create mode 100644 .prettierrc

diff --git a/.eslintrc.json b/.eslintrc.json
index 92360b85..26f3f4aa 100644
--- a/.eslintrc.json
+++ b/.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"
diff --git a/.github/workflows/pr_checks.yaml b/.github/workflows/pr_checks.yaml
index c802adac..81ab11bb 100644
--- a/.github/workflows/pr_checks.yaml
+++ b/.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!"
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 00000000..c3e03287
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}