1351 implement cda gui code formatter (#1460)

Adds Husky/Prettier to `cda-gui` following behind Groundwork and
Groundwork-Water's formatting setups.

@jbkolze, you might see if i've missed anything? 

Files of interest:
- cda-gui/.husky/pre-commit
- cda-gui/.prettierrc
- cda-gui/README.md
- cda-gui/package.json

Via:
-
a72ea0d
-
7953176
-
697ae6b

Author: krowvin

.github/workflows/build.yml

@@ -32,18 +32,6 @@ jobs:
           distribution: 'temurin'
           java-version: ${{matrix.jdk}}
           cache: 'gradle'
-      - name: install node for cda-gui audit
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-          cache-dependency-path: cda-gui/package-lock.json
-
-      - name: run cda-gui audit for high CVE
-        working-directory: ./cda-gui
-        run: |
-          npm install --package-lock-only
-          npm audit --audit-level=high
       - name: build and test
         id: thebuild
         run: ./gradlew build --info --init-script init.gradle

.github/workflows/web-gui-checks.yml

@@ -0,0 +1,37 @@
+name: CDA Web GUI NPM Audit (CVE)
+
+on:
+  push:
+    branches:
+      - develop
+    pull_request:
+      branches:
+        - develop
+    # Only run when relevant files change (i.e. packages are bumped into new NPM versions)
+    paths:
+      - "cda-gui/**"
+      - ".github/workflows/web-gui-*.yml"
+
+  # Allow running audits adhoc via "run task" in the UI
+  workflow_dispatch:
+
+jobs:
+  audit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: install node for cda-gui audit
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+          cache-dependency-path: cda-gui/package-lock.json
+
+      - name: run cda-gui audit for critical CVE
+        working-directory: ./cda-gui
+        # disable husky git hooks during CI runs
+        run: |
+          HUSKY=0 npm ci
+          npm audit --audit-level=critical

cda-gui/.eslintrc.cjs

@@ -2,20 +2,17 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'eslint:recommended',
-    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
-    'plugin:react-hooks/recommended',
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
-  settings: { react: { version: '18.2' } },
-  plugins: ['react-refresh'],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parserOptions: { ecmaVersion: "latest", sourceType: "module" },
+  settings: { react: { version: "18.2" } },
+  plugins: ["react-refresh"],
   rules: {
-    'react/jsx-no-target-blank': 'off',
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
+    "react/jsx-no-target-blank": "off",
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
   },
-}
+};

cda-gui/.husky/pre-commit

@@ -0,0 +1,2 @@
+cd cda-gui
+npx lint-staged

cda-gui/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 88,
+  "tabWidth": 2,
+  "useTabs": false,
+  "jsxSingleQuote": false,
+  "singleQuote": false
+}

cda-gui/README.md

@@ -1,13 +1,30 @@
 # CDA Landing Page Source
 
-*The React+Vite project for CDA*
+_The React+Vite project for CDA_
 
+## Setup
+Setup the project by running:
+1. `cd cda-gui`
+2. `npm install` (With nodejs installed)
+
+## Development
 
 To run the project in dev:
 `npm run dev`
 
+## Production Files
 To build the project:
 `npm run build`
-*NOTE*: Building the project will also deploy it to the required tomcat webapps directory `webapp`
 
-To see the available scripts for this project, including how to run and deploy, look at the `package.json` file. 
+To see the available scripts for this project, including how to run and deploy, look at the `package.json` file.
+
+
+## Formatting
+
+Formatting is done with [husky](https://typicode.github.io/husky/) and styled using [prettier](https://prettier.io/docs/). Husky requires a minimum Git version of 2.9
+
+When you commit, after running the install command above, husky will format files for you! But you can also run the formatter with:
+`npx prettier --write myfile.html` or `npm run prepare`
+
+Or check files with:
+`format:check`

cda-gui/index.html

@@ -1,9 +1,9 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>CDA - CWMS Data API</title>
     <meta name="Description" content="CDA CWMS Data API" />
   </head>