Add CI Workflow for linting and formatting (#114)

* fix: add parser to eslint for plugins * feat: add lint and format workflow * ci: add test linting * chore: add format fix script * chore: format files
fluidity-money · Aug 5, 2024 · ac28b88 · ac28b88
1 parent ad23a42
commit ac28b88
Show file tree

Hide file tree

Showing 58 changed files with 5,977 additions and 2,679 deletions.
diff --git a/.github/workflows/lint-format-js.yml b/.github/workflows/lint-format-js.yml
@@ -0,0 +1,41 @@
+name: Lint and Format Web App
+
+on:
+  push:
+    branches: 
+      - development
+    paths: 
+      - 'web/e2e/**'
+      - 'web/__tests__/**'
+      - 'web/src/**'
+      - '.github/workflows/lint-format-js.yml'
+  pull_request:
+    branches: 
+      - development
+
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: './web'
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.15.0
+
+      - name: Enable pnpm
+        run: corepack enable pnpm
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Check Linting
+        run: pnpm lint:next && pnpm lint:tests
+
+      - name: Check Formating
+        run: pnpm format:check
+
diff --git a/web/.eslintrc.json b/web/.eslintrc.json
@@ -1,10 +1,18 @@
 {
+  "root": true,
   "extends": [
     "next/core-web-vitals",
     "prettier",
     "plugin:tailwindcss/recommended"
   ],
-  "plugins": ["@stylistic/ts", "jest"],
+  "plugins": ["@stylistic/ts"],
+  "parser": "@typescript-eslint/parser",
+  "rules": {
+    "no-warning-comments": [
+      "error",
+      { "terms": ["todo", "fixme"], "location": "anywhere" }
+    ]
+  },
   "overrides": [
     {
       "files": ["*.ts", "*.tsx"],
@@ -14,6 +22,14 @@
       "files": ["*.graphql"],
       "parser": "@graphql-eslint/eslint-plugin",
       "plugins": ["@graphql-eslint"]
+    },
+    {
+      "files": "__tests__/**",
+      "extends": "plugin:jest/recommended"
+    },
+    {
+      "files": "e2e/**",
+      "extends": "plugin:playwright/recommended"
     }
   ]
 }
diff --git a/web/package.json b/web/package.json
@@ -7,14 +7,17 @@
     "dev": "next dev",
     "build": "next build",
     "start": "npx serve@latest out",
-    "lint": "next lint --fix",
+    "lint:next": "next lint",
+    "lint:tests": "eslint '__tests__/**/*.{ts,tsx}' && eslint 'e2e/**/*.{ts,tsx}'",
     "codegen": "graphql-codegen --config codegen.ts",
     "codegen:watch": "graphql-codegen --config codegen.ts --watch",
     "clean": "cross-env NODE_V8_COVERAGE=.v8-coverage node ./scripts/clean.js",
     "test:start": "cross-env NODE_V8_COVERAGE=.v8-coverage NODE_OPTIONS=--inspect=9229 next dev",
     "test:command": "pnpm clean && pnpm test:start",
     "test:unit": "jest",
-    "test:e2e": "playwright test"
+    "test:e2e": "playwright test",
+    "format:check": "prettier --check 'src/**/*.{ts,tsx,js,jsx,json,css,md}'",
+    "format:fix": "prettier --write 'src/**/*.{ts,tsx,js,jsx,json,css,md}'"
   },
   "dependencies": {
     "@graphql-typed-document-node/core": "^3.2.0",
@@ -96,6 +99,7 @@
     "eslint-config-next": "14.2.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jest": "^28.6.0",
+    "eslint-plugin-playwright": "^1.6.2",
     "eslint-plugin-tailwindcss": "^3.17.4",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml
diff --git a/web/src/app/_layout/FaucetDropdown.tsx b/web/src/app/_layout/FaucetDropdown.tsx
@@ -38,12 +38,20 @@ export const FaucetDropdown = () => {
             "-mt-2 flex w-[--radix-dropdown-menu-trigger-width] flex-col gap-0.5 rounded-2xl rounded-t-none border border-t-0 border-black bg-black p-2 text-xs text-white",
           )}
         >
-          <a rel="noopener noreferrer" target="_blank" href="https://faucet.superposition.so">
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://faucet.superposition.so"
+          >
             <DropdownMenu.Item className="flex cursor-pointer flex-row items-center gap-1 p-1 text-xs">
               SPN faucet
             </DropdownMenu.Item>
           </a>
-          <a rel="noopener noreferrer" target="_blank" href="https://faucet.quicknode.com/arbitrum/sepolia">
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://faucet.quicknode.com/arbitrum/sepolia"
+          >
             <DropdownMenu.Item className="flex cursor-pointer flex-row items-center gap-1 p-1 text-xs">
               Arbitrum Sepolia ETH faucet
             </DropdownMenu.Item>
@@ -55,12 +63,20 @@ export const FaucetDropdown = () => {
             </DropdownMenu.Item>
           </a>
           */}
-          <a rel="noopener noreferrer" target="_blank" href="https://sepolia.arbiscan.io/address/0x980b62da83eff3d4576c647993b0c1d7faf17c73#writeProxyContract#F5">
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://sepolia.arbiscan.io/address/0x980b62da83eff3d4576c647993b0c1d7faf17c73#writeProxyContract#F5"
+          >
             <DropdownMenu.Item className="flex cursor-pointer flex-row items-center gap-1 p-1 text-xs">
               Arbitrum Sepolia Create WETH
             </DropdownMenu.Item>
           </a>
-          <a rel="noopener noreferrer" target="_blank" href="https://faucet.circle.com/">
+          <a
+            rel="noopener noreferrer"
+            target="_blank"
+            href="https://faucet.circle.com/"
+          >
             <DropdownMenu.Item className="flex cursor-pointer flex-row items-center gap-1 p-1 text-xs">
               Arbitrum Sepolia USDC faucet
             </DropdownMenu.Item>

diff --git a/web/src/app/_layout/FeatureFlagConfig.tsx b/web/src/app/_layout/FeatureFlagConfig.tsx
@@ -12,7 +12,7 @@ import { Flag, LoaderIcon } from "lucide-react";
 import { FeatureFlags, useFeatureFlag } from "@/hooks/useFeatureFlag";
 import { useQuery } from "@tanstack/react-query";
 
-type FeatureFlagKey = Exclude<keyof FeatureFlags, `graphql${string}`>
+type FeatureFlagKey = Exclude<keyof FeatureFlags, `graphql${string}`>;
 
 const featureFlagsLabels: { [K in FeatureFlagKey]: string } = {
   "ui show demo data": "UI Show Demo Data",
@@ -95,7 +95,9 @@ export const FeatureFlagConfig = () => {
             <Switch checked={override} onCheckedChange={setOverride} />
           </div>
 
-          {(Object.entries(featureFlagsLabels) as [FeatureFlagKey, string][]).map(([key, label]) => (
+          {(
+            Object.entries(featureFlagsLabels) as [FeatureFlagKey, string][]
+          ).map(([key, label]) => (
             <div
               className={"flex flex-row items-center justify-between"}
               key={key}

diff --git a/web/src/app/global-error.tsx b/web/src/app/global-error.tsx
@@ -4,7 +4,11 @@ import * as Sentry from "@sentry/nextjs";
 import NextError from "next/error";
 import { useEffect } from "react";
 
-export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+export default function GlobalError({
+  error,
+}: {
+  error: Error & { digest?: string };
+}) {
   useEffect(() => {
     Sentry.captureException(error);
   }, [error]);
@@ -20,4 +24,4 @@ export default function GlobalError({ error }: { error: Error & { digest?: strin
       </body>
     </html>
   );
-}
+}