Merge pull request #148 from lexicongovernance/120-replicate-backend-…

…linter-and-format-requirements

Implement format and linting ci/cd

.eslintrc.cjs

@@ -1,16 +1,42 @@
 module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended',
     'plugin:@tanstack/eslint-plugin-query/recommended',
+    'prettier'
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
+  plugins: ['react-refresh', '@typescript-eslint'],
+  root: true,
+  env: { browser: true, es2020: true },
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
   rules: {
+    // 1. 'react-refresh/only-export-components': Ensure React components are exported properly
+    //    Warn because it's important but not necessarily an error
     'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+
+    // 2. '@typescript-eslint/ban-ts-comment': Avoid using @ts-ignore comments
+    //    Warn to discourage usage, but doesn't necessarily break the build
+    '@typescript-eslint/ban-ts-comment': 'warn',
+
+    // 3. '@typescript-eslint/no-var-requires': Discourage using require() in favor of ES6 imports
+    //    Warn to discourage usage, but doesn't necessarily break the build
+    '@typescript-eslint/no-var-requires': 'warn',
+
+    // 4. '@typescript-eslint/no-explicit-any': Avoid using explicit 'any' types
+    //    Warn to encourage type safety, could be upgraded to 'error' for stricter enforcement
+    '@typescript-eslint/no-explicit-any': 'warn',
+
+    // 5. '@tanstack/query/exhaustive-deps': Ensure exhaustive dependency arrays in React hooks
+    //    Warn to highlight potential issues, but doesn't necessarily break the build
+    '@tanstack/query/exhaustive-deps': 'warn',
+
+    // 6. '@typescript-eslint/no-unused-vars': Avoid unused variables, enforcing cleaner code
+    //    Error to ensure unused variables are caught during linting
+    '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^_ignored', ignoreRestSiblings: true },
+    ],
   },
-};
+};

.github/workflows/check-formatting.yml

@@ -0,0 +1,35 @@
+name: Check Formatting
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - develop
+      - main
+
+concurrency:
+  # group runs by <name of the workflow>-<name of job>-<branch name>
+  group: ${{ github.workflow }}-${{ github.job }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  formatting:
+    name: Check formatting
+    timeout-minutes: 2
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Review formatting
+        run: pnpm format

.github/workflows/lint.yml

@@ -0,0 +1,36 @@
+name: Linting
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+    branches:
+      - develop
+      - main
+
+concurrency:
+  # group runs by <name of the workflow>-<name of job>-<branch name>
+  group: ${{ github.workflow }}-${{ github.job }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  linting:
+    name: Check linting
+    timeout-minutes: 2
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Review linting
+        run: pnpm lint

.nvmrc

@@ -0,0 +1 @@
+v20

.prettierrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  tabWidth: 2,
+  singleQuote: true,
+  quoteProps: 'consistent',
+  printWidth: 100,
+};

package.json

@@ -6,14 +6,19 @@
   "scripts": {
     "core:dev": "pnpm -r --filter core dev",
     "core:build": "pnpm -r --filter core build",
-    "core:lint": "pnpm -r --filter core lint",
-    "core:format": "pnpm -r --filter core format",
     "core:preview": "pnpm -r --filter core preview",
     "berlin:dev": "pnpm -r --filter berlin dev",
     "berlin:build": "pnpm -r --filter berlin build",
-    "berlin:lint": "pnpm -r --filter berlin lint",
-    "berlin:format": "pnpm -r --filter berlin format",
-    "berlin:preview": "pnpm -r --filter berlin preview"
+    "berlin:preview": "pnpm -r --filter berlin preview",
+    "format": "prettier --check \"packages/**/*.{ts,md}\"",
+    "format:fix": "prettier --write \"packages/**/*.{ts,md}\"",
+    "lint": "eslint ."
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "engines": {
+    "node": "^20"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
@@ -36,13 +41,14 @@
     "@tanstack/eslint-plugin-query": "^5.18.0",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
-    "prettier": "3.1.0",
+    "prettier": "^3.1.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.17.0"

packages/api/src/fetchEventCycles.ts

@@ -9,7 +9,7 @@ async function fetchEventCycles(eventId: string): Promise<GetCyclesResponse | nu
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
 
     if (!response.ok) {

packages/api/src/fetchForumQuestionStatistics.ts

@@ -1,7 +1,7 @@
 import { GetForumQuestionStatisticsResponse } from './types/ForumQuestionType';
 
 async function fetchForumQuestionStatistics(
-  questionId: string
+  questionId: string,
 ): Promise<GetForumQuestionStatisticsResponse | null> {
   try {
     const response = await fetch(
@@ -11,7 +11,7 @@ async function fetchForumQuestionStatistics(
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
     if (!response.ok) {
       throw new Error(`HTTP Error! Status: ${response.status}`);

packages/api/src/fetchRegistration.ts

@@ -9,7 +9,7 @@ async function fetchRegistration(eventId: string): Promise<GetRegistrationRespon
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
 
     if (!response.ok) {

packages/api/src/fetchRegistrationData.ts

@@ -9,7 +9,7 @@ async function fetchRegistrationData(eventId: string): Promise<GetRegistrationDa
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
 
     if (!response.ok) {

packages/api/src/fetchRegistrationFields.ts

@@ -1,7 +1,7 @@
 import { GetRegistrationFieldsResponse } from './types/RegistrationFieldType';
 
 async function fetchRegistrationFields(
-  eventId: string
+  eventId: string,
 ): Promise<GetRegistrationFieldsResponse | null> {
   try {
     const response = await fetch(
@@ -11,7 +11,7 @@ async function fetchRegistrationFields(
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
 
     if (!response.ok) {

packages/api/src/fetchUserAttributes.ts

@@ -9,7 +9,7 @@ async function fetchUserAttributes(userId: string): Promise<GetUserAttributesRes
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
 
     if (!response.ok) {

packages/api/src/fetchUserVotes.ts

@@ -2,7 +2,7 @@ import { GetUserVotesResponse } from './types/UserVotesType';
 
 async function fetchUserVotes(
   userId: string,
-  cycleId: string
+  cycleId: string,
 ): Promise<GetUserVotesResponse | null> {
   try {
     const response = await fetch(
@@ -12,7 +12,7 @@ async function fetchUserVotes(
         headers: {
           'Content-Type': 'application/json',
         },
-      }
+      },
     );
     if (!response.ok) {
       throw new Error(`HTTP Error! Status: ${response.status}`);

packages/api/src/postRegistrationData.ts

@@ -20,7 +20,7 @@ async function postRegistrationData({
           'Content-Type': 'application/json',
         },
         body: JSON.stringify(body),
-      }
+      },
     );
 
     if (!response.ok) {

packages/berlin/src/store/index.ts

@@ -26,7 +26,7 @@ export const useAppStore = create<AppState>()(
         toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
         reset: () => set(() => ({ userStatus: 'INCOMPLETE' })),
       }),
-      { name: 'lexicon-store' }
-    )
-  )
+      { name: 'lexicon-store' },
+    ),
+  ),
 );

packages/berlin/src/utils/formatGroups.ts

@@ -6,14 +6,16 @@ import { GetGroupsResponse } from '../types/GroupType';
  * @returns An array of formatted group objects with "Other" and "None" placed at the beginning.
  */
 export const formatGroups = (groups: GetGroupsResponse[] | null | undefined) => {
-    return groups
+  return (
+    groups
       ?.sort((a, b) => a.name.localeCompare(b.name))
-      ?.reduce((acc: { name: string; id: string; }[], group) => {
+      ?.reduce((acc: { name: string; id: string }[], group) => {
         if (group.name === 'Other' || group.name === 'None') {
           acc.unshift({ name: group.name, id: group.id });
         } else {
           acc.push({ name: group.name, id: group.id });
         }
         return acc;
-      }, []) || [];
-  };
+      }, []) || []
+  );
+};

packages/core/src/store.ts

@@ -22,7 +22,7 @@ export const useAppStore = create<AppState>()(
           set(() => ({ onboardingStatus: status })),
         reset: () => set(() => ({ userStatus: 'INCOMPLETE' })),
       }),
-      { name: 'lexicon-store' }
-    )
-  )
+      { name: 'lexicon-store' },
+    ),
+  ),
 );

packages/core/src/utils/formatGroups.ts

@@ -6,14 +6,16 @@ import { GetGroupsResponse } from '../types/GroupType';
  * @returns An array of formatted group objects with "Other" and "None" placed at the beginning.
  */
 export const formatGroups = (groups: GetGroupsResponse[] | null | undefined) => {
-    return groups
+  return (
+    groups
       ?.sort((a, b) => a.name.localeCompare(b.name))
-      ?.reduce((acc: { name: string; id: string; }[], group) => {
+      ?.reduce((acc: { name: string; id: string }[], group) => {
         if (group.name === 'Other' || group.name === 'None') {
           acc.unshift({ name: group.name, id: group.id });
         } else {
           acc.push({ name: group.name, id: group.id });
         }
         return acc;
-      }, []) || [];
-  };
+      }, []) || []
+  );
+};

packages/core/src/utils/handleSignatureRequest.ts

@@ -30,7 +30,7 @@ const handleSignatureRequest = (nonce: string | null) => {
     args,
     {
       genericProveScreen: true,
-    }
+    },
   );
 
   openZupassPopup(POPUP_URL, constructProofUrl);