✨ feat: Add ESLinter and Prettier

.eslintrc.json

@@ -1,3 +1,19 @@
 {
-  "extends": "next/core-web-vitals"
-}
+  "parser": "@typescript-eslint/parser",
+  "extends": ["eslint:recommended", "next", "next/core-web-vitals", "prettier", "plugin:@typescript-eslint/recommended"],
+  "rules": {
+    "prefer-const": "warn",
+    "no-undef": "off",
+    "import/order": [
+      "warn",
+      {
+        "groups": ["builtin", "external", ["parent", "sibling"], "index"],
+        "newlines-between": "always"
+      }
+    ],
+    "@typescript-eslint/no-unnecessary-type-constraint": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/no-empty-interface": "off"
+  }
+}

.github/workflows/ci.yml

@@ -13,9 +13,6 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Set NODE_ENV
-        run: echo "NODE_ENV=development" >> $GITHUB_ENV
-
       - name: Checkout repository
         uses: actions/checkout@v4
 
@@ -25,6 +22,18 @@ jobs:
           node-version: '20' # Changed to 20, as 22 is not yet stable
           cache: 'yarn'
 
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v4
+        id: yarn-cache
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Install Yarn
         run: corepack enable
 
@@ -33,3 +42,9 @@ jobs:
 
       - name: Run unit tests
         run: yarn run test
+
+      - name: Run linter
+        run: yarn run lint
+
+      - name: Run prettier
+        run: yarn run prettier

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 88,
+  "arrowParens": "always"
+}

__tests__/pages/landing.test.tsx

@@ -5,8 +5,6 @@ import Home from '@/app/page';
 it('renders 6 change logs', () => {
   render(<Home />);
   // Finds all p tags with date logs
-  const numListItems = screen
-    .getByTestId('changelog')
-    .querySelectorAll('p').length;
+  const numListItems = screen.getByTestId('changelog').querySelectorAll('p').length;
   expect(numListItems).toBe(6);
 });

jest.config.ts

@@ -3,13 +3,13 @@
  * https://jestjs.io/docs/configuration
  */
 
-import type {Config} from 'jest';
+import type { Config } from 'jest';
 import nextJest from 'next/jest.js';
 
 const createJestConfig = nextJest({
   // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
   dir: './',
-})
+});
 
 const config: Config = {
   // All imported modules in your tests should be mocked automatically
@@ -31,15 +31,15 @@ const config: Config = {
   // collectCoverageFrom: undefined,
 
   // The directory where Jest should output its coverage files
-  coverageDirectory: "coverage",
+  coverageDirectory: 'coverage',
 
   // An array of regexp pattern strings used to skip coverage collection
   // coveragePathIgnorePatterns: [
   //   "/node_modules/"
   // ],
 
   // Indicates which provider should be used to instrument code for coverage
-  coverageProvider: "v8",
+  coverageProvider: 'v8',
 
   // A list of reporter names that Jest uses when writing coverage reports
   // coverageReporters: [
@@ -152,7 +152,7 @@ const config: Config = {
   // snapshotSerializers: [],
 
   // The test environment that will be used for testing
-  testEnvironment: "jsdom",
+  testEnvironment: 'jsdom',
 
   // Options that will be passed to the testEnvironment
   // testEnvironmentOptions: {},

package.json

@@ -8,6 +8,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
+    "prettier": "npx prettier --config ./.prettierrc --write **/*.{ts,tsx}",
     "test": "jest",
     "test:watch": "jest --watch"
   },
@@ -32,13 +33,19 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "postcss": "^8",
+    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/app/layout.tsx

@@ -1,7 +1,9 @@
 import type { Metadata } from 'next';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v13-appRouter';
 import { Container, ThemeProvider } from '@mui/material';
+
 import theme from '../theme';
+
 import './globals.css';
 import Navigation from '@/components/Navigation';
 

src/app/login/SubmitBox.tsx

@@ -3,11 +3,7 @@ import { FormEvent } from 'react';
 import { Box } from '@mui/material';
 
 // This file holds the handling logic for the login form submission.
-export default function LoginSubmitBox({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
+export default function LoginSubmitBox({ children }: { children: React.ReactNode }) {
   const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const data = new FormData(event.currentTarget);

src/app/login/page.tsx

@@ -9,9 +9,11 @@ import {
   Typography,
 } from '@mui/material';
 import { LockOutlined } from '@mui/icons-material';
+
+import LoginSubmitBox from './SubmitBox';
+
 import Copyright from '@/components/Copyright';
 import CustomLink from '@/components/CustomLink';
-import LoginSubmitBox from './SubmitBox';
 
 export default function Login() {
   return (
@@ -55,12 +57,7 @@ export default function Login() {
             control={<Checkbox value='remember' color='primary' />}
             label='Remember me'
           />
-          <Button
-            type='submit'
-            fullWidth
-            variant='contained'
-            sx={{ mt: 3, mb: 2 }}
-          >
+          <Button type='submit' fullWidth variant='contained' sx={{ mt: 3, mb: 2 }}>
             Login
           </Button>
           <Grid container>

src/app/page.tsx

@@ -19,9 +19,8 @@ export default function Home() {
     <Stack direction={{ sm: 'column', md: 'row' }} gap={2} mt={2}>
       <Paper sx={{ p: 2 }} elevation={3}>
         <Typography variant='body1'>
-          The mission of Polygon is to provide platform for creation of
-          programming contest problems. Polygon supports the whole development
-          cycle:
+          The mission of Polygon is to provide platform for creation of programming
+          contest problems. Polygon supports the whole development cycle:
         </Typography>
         <ul className='list-disc list-inside'>
           <li>problem statement writing</li>

src/components/Copyright.tsx

@@ -1,14 +1,10 @@
-import { Typography } from '@mui/material';
+import { Typography, TypographyProps } from '@mui/material';
+
 import CustomLink from '@/components/CustomLink';
 
-export default function Copyright(props: any) {
+export default function Copyright(props: TypographyProps) {
   return (
-    <Typography
-      variant='body2'
-      color='text.secondary'
-      align='center'
-      {...props}
-    >
+    <Typography variant='body2' color='text.secondary' align='center' {...props}>
       {'Copyright © '}
       <CustomLink color='inherit' href='https://mui.com/'>
         Bibimbap

src/components/Navigation.tsx

@@ -16,6 +16,7 @@ import {
 } from '@mui/material';
 import Image from 'next/image';
 import { useState } from 'react';
+
 import CustomLink from './CustomLink';
 
 interface Props {
@@ -50,11 +51,7 @@ export default function Navigation(props: Props) {
       <List>
         {navItems.map((item) => (
           <ListItem key={item.name} disablePadding>
-            <ListItemButton
-              component='a'
-              href={item.link}
-              sx={{ textAlign: 'center' }}
-            >
+            <ListItemButton component='a' href={item.link} sx={{ textAlign: 'center' }}>
               <ListItemText primary={item.name} />
             </ListItemButton>
           </ListItem>
@@ -63,8 +60,7 @@ export default function Navigation(props: Props) {
     </Box>
   );
 
-  const container =
-    window !== undefined ? () => window().document.body : undefined;
+  const container = window !== undefined ? () => window().document.body : undefined;
 
   return (
     <>

tailwind.config.ts

@@ -1,17 +1,17 @@
-import type { Config } from "tailwindcss";
+import type { Config } from 'tailwindcss';
 
 const config: Config = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
     extend: {
       backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic':
+          'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
     },
   },