add CI to frontend (#799)

Added CI.yml for lint, typecheck, build,
Test is currently commented (as it will give a false pos since we
recreate the functions as oppose to importing them)
but will be added in a later PR once we find a compatible setup with
jest.

Other files are linted with ts-config, prettier, and eslintrc.
manually Removed dead files.

.github/workflows/frontend-ci.yml

@@ -0,0 +1,81 @@
+name: frontend CI
+
+on:
+  pull_request:
+    paths:
+      - "frontend/**"
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install Node Dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Test
+        run: npm test
+        working-directory: ./frontend
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install Node Dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Lint
+        run: npm run lint
+        working-directory: ./frontend
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install Node Dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Type Check
+        run: npm run type-check
+        working-directory: ./frontend
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+
+      - name: Install Node Dependencies
+        run: npm install
+        working-directory: ./frontend
+
+      - name: Build
+        run: npm run build
+        working-directory: ./frontend

frontend/.eslintrc.js

@@ -0,0 +1,43 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  env: {
+    es2021: true,
+    jest: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@next/next/recommended',
+    'next/core-web-vitals',
+    'plugin:@typescript-eslint/recommended',
+  ],
+  overrides: [
+    {
+      files: ['./src/**/*.js', './src/**/*.jsx'],
+      parser: 'espree',
+      rules: {
+        semi: ['error', 'always'],
+        'comma-dangle': ['error', 'only-multiline'],
+        'eol-last': ['error', 'always'],
+        '@typescript-eslint/no-empty-function': ['warn', { allow: ['methods'] }],
+      },
+    },
+    {
+      files: ['./src/**/*', './tests/**/*', './**/*.json'],
+      excludedFiles: ['./src/**/*.js', './src/**/*.jsx'],
+      parserOptions: {
+        project: './tsconfig.json',
+      },
+      extends: ['standard-with-typescript'],
+      rules: {
+        '@typescript-eslint/semi': ['error', 'always'],
+        '@typescript-eslint/comma-dangle': ['error', 'only-multiline'],
+        '@typescript-eslint/strict-boolean-expressions': 'off',
+        'eol-last': ['error', 'always'],
+        '@typescript-eslint/no-unused-vars': 'warn',
+        '@typescript-eslint/no-empty-function': ['warn', { allow: ['methods'] }],
+      },
+    },
+  ],
+};

frontend/.prettierrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    semi: true,                  // Add semicolons at the end of statements
+    singleQuote: true,           // Use single quotes instead of double quotes
+    tabWidth: 2,                 // Set the tab width to 2 spaces
+    printWidth: 100,             // Wrap lines that exceed 100 characters
+    trailingComma: 'all',        // Use trailing commas wherever possible (multi-line objects and arrays)
+    arrowParens: 'always',       // Always include parentheses around arrow function parameters
+    endOfLine: 'lf',             // Use LF (line feed) as the line ending
+};

frontend/jest.config.js

@@ -1,16 +1,12 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
-  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json"],
-  moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1',
-  },
   transform: {
-    '^.+\\.tsx?$': 'ts-jest',
-  },
-  globals: {
-    'ts-jest': {
-      tsconfig: 'tsconfig.json',
-    },
+    '^.+\\.[tj]sx?$': 'ts-jest',
   },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  testPathIgnorePatterns: [
+    "/frontend/src/components/Editor/__tests__/Editor.test.js",
+    "/frontend/src/utils/formatters.test.js"
+  ],
 };

frontend/next.config.js

@@ -22,4 +22,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig;
+module.exports = nextConfig;