From 8cdb6348cb8c81f16db18fe70acb90797230ceb2 Mon Sep 17 00:00:00 2001
From: Dongyeon Park <26868715+plzfday@users.noreply.github.com>
Date: Wed, 31 Jul 2024 11:19:16 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Add=20ESLinter=20and=20Pret?=
=?UTF-8?q?tier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.eslintrc.json | 20 ++++-
.github/workflows/ci.yml | 21 ++++-
.prettierrc | 10 +++
__tests__/pages/landing.test.tsx | 4 +-
jest.config.ts | 10 +--
package.json | 9 +-
src/app/layout.tsx | 2 +
src/app/login/SubmitBox.tsx | 6 +-
src/app/login/page.tsx | 11 +--
src/app/page.tsx | 5 +-
src/components/Copyright.tsx | 12 +--
src/components/Navigation.tsx | 10 +--
tailwind.config.ts | 14 ++--
yarn.lock | 136 +++++++++++++++++++++++++++++--
14 files changed, 213 insertions(+), 57 deletions(-)
create mode 100644 .prettierrc
diff --git a/.eslintrc.json b/.eslintrc.json
index bffb357..2a706ec 100644
--- a/.eslintrc.json
+++ b/.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"
+ }
+}
\ No newline at end of file
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index bbb5ab3..c163ebc 100644
--- a/.github/workflows/ci.yml
+++ b/.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
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..7b238f4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+ "singleQuote": true,
+ "jsxSingleQuote": true,
+ "semi": true,
+ "useTabs": false,
+ "tabWidth": 2,
+ "trailingComma": "all",
+ "printWidth": 88,
+ "arrowParens": "always"
+}
diff --git a/__tests__/pages/landing.test.tsx b/__tests__/pages/landing.test.tsx
index 846e596..7d8a6e1 100644
--- a/__tests__/pages/landing.test.tsx
+++ b/__tests__/pages/landing.test.tsx
@@ -5,8 +5,6 @@ import Home from '@/app/page';
it('renders 6 change logs', () => {
render();
// 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);
});
diff --git a/jest.config.ts b/jest.config.ts
index aff8277..541b7f5 100644
--- a/jest.config.ts
+++ b/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,7 +31,7 @@ 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: [
@@ -39,7 +39,7 @@ const config: Config = {
// ],
// 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: {},
diff --git a/package.json b/package.json
index e7dda38..5b35534 100644
--- a/package.json
+++ b/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": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 31f20f0..fd534e0 100644
--- a/src/app/layout.tsx
+++ b/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';
diff --git a/src/app/login/SubmitBox.tsx b/src/app/login/SubmitBox.tsx
index f2795ff..920cc69 100644
--- a/src/app/login/SubmitBox.tsx
+++ b/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) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index f631f72..ebbba0e 100644
--- a/src/app/login/page.tsx
+++ b/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={}
label='Remember me'
/>
-