fix(eslint): update eslint to v9 (#1336)

.prettierrc.json

@@ -2,7 +2,7 @@
   "arrowParens": "always",
   "bracketSpacing": true,
   "endOfLine": "lf",
-  "printWidth": 80,
+  "printWidth": 120,
   "semi": false,
   "singleQuote": true,
   "tabWidth": 2,

app/post/[slug]/page.tsx

@@ -1,5 +1,5 @@
-import type { ParsedUrlQuery } from 'node:querystring'
 import type { Metadata } from 'next'
+import type { ParsedUrlQuery } from 'node:querystring'
 import { Article } from '@/components'
 import { getMetadata } from '@/config'
 import { PostLayout } from '@/layouts'

app/tag/[tag]/page.tsx

@@ -1,5 +1,5 @@
-import type { ParsedUrlQuery } from 'node:querystring'
 import type { Metadata } from 'next'
+import type { ParsedUrlQuery } from 'node:querystring'
 import { PostsList, TagsCloud } from '@/components'
 import { getMetadata } from '@/config'
 import { Layout } from '@/layouts'

components/Article/Article.test.tsx

@@ -1,6 +1,6 @@
-import Article from './Article'
 import mockData from '@/mocks/data'
 import { render } from '@/utils'
+import Article from './Article'
 
 describe('Article', () => {
   const mockBasePost = mockData.basePosts[0]

components/Article/Article.tsx

@@ -1,14 +1,14 @@
-import ArticleComments from './ArticleComments'
-import ArticleContent from './ArticleContent'
-import ArticleHeader from './ArticleHeader'
-import ArticleNav from './ArticleNav'
-import ArticleToc from './ArticleToc'
+import type { PostType, SiteConfig } from '@/types'
 import Container from '@/components/Container'
 import Divider from '@/components/Divider'
 import { Comment } from '@/components/Icons'
 import SocialGroup from '@/components/SocialGroup'
 import { siteConfig } from '@/config'
-import type { PostType, SiteConfig } from '@/types'
+import ArticleComments from './ArticleComments'
+import ArticleContent from './ArticleContent'
+import ArticleHeader from './ArticleHeader'
+import ArticleNav from './ArticleNav'
+import ArticleToc from './ArticleToc'
 
 interface Props {
   post: PostType

components/Article/ArticleComments.test.tsx

@@ -1,6 +1,6 @@
+import { render } from '@/utils'
 import { axe } from 'jest-axe'
 import ArticleComments from './ArticleComments'
-import { render } from '@/utils'
 
 describe('ArticleComments', () => {
   it('should render correctly (snapshot)', () => {

components/Article/ArticleComments.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import cx from 'classnames'
-import styles from './ArticleComments.module.css'
 import { siteConfig } from '@/config'
 import { useDisqus } from '@/hooks'
+import cx from 'classnames'
+import styles from './ArticleComments.module.css'
 
 interface Props {
   url?: string

components/Article/ArticleContent.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { MDXRemote } from '@alisowski/next-mdx-remote'
-import MDX from '@/components/MDX'
 import type { PostType } from '@/types'
+import MDX from '@/components/MDX'
+import { MDXRemote } from '@alisowski/next-mdx-remote'
 
 interface Props {
   source: PostType['source']

components/Article/ArticleHeader.tsx

@@ -1,10 +1,10 @@
-import styles from './ArticleHeader.module.css'
+import type { PostMeta } from '@/types'
 import { H1 } from '@/components/Headings'
 import { Calendar, ClockCircle, Edit } from '@/components/Icons'
 import { Slide } from '@/components/Motion'
 import { IconTag, LinkTag } from '@/components/Tags'
 import { siteConfig } from '@/config'
-import type { PostMeta } from '@/types'
+import styles from './ArticleHeader.module.css'
 
 interface Props {
   post: PostMeta

components/Article/ArticleNav.tsx

@@ -1,8 +1,8 @@
+import type { PostMeta } from '@/types'
 import FlexContainer from '@/components/FlexContainer'
 import { ArrowLeft, ArrowRight, Home } from '@/components/Icons'
 import Link from '@/components/Link'
 import { Bounce } from '@/components/Motion'
-import type { PostMeta } from '@/types'
 
 interface Props {
   prevPost: PostMeta['prevPost']

components/Article/ArticleToc.test.tsx

@@ -1,5 +1,5 @@
-import ArticleToc from './ArticleToc'
 import { render } from '@/utils'
+import ArticleToc from './ArticleToc'
 
 describe('ArticleToc', () => {
   it('should render correctly (snapshot)', () => {

components/Article/ArticleToc.tsx

@@ -1,8 +1,8 @@
 'use client'
 
+import Anchor from '@/components/Anchor'
 import { useEffect, useState } from 'react'
 import styles from './ArticleToc.module.css'
-import Anchor from '@/components/Anchor'
 
 interface Props {
   slug: string

components/Aside/Aside.test.tsx

@@ -1,5 +1,5 @@
-import Aside from './Aside'
 import { render } from '@/utils'
+import Aside from './Aside'
 
 describe('Aside', () => {
   const types = [

components/Aside/Aside.tsx

@@ -1,7 +1,7 @@
-import cx from 'classnames'
 import type { ReactNode } from 'react'
-import styles from './Aside.module.css'
 import Alert from '@/components/Alert'
+import cx from 'classnames'
+import styles from './Aside.module.css'
 
 interface Props {
   type?: string
@@ -24,6 +24,7 @@ function normalizeType(type?: string) {
     case 'error':
     case 'danger':
       return 'error'
+    case undefined:
     default:
       return 'info'
   }

components/Blockquote/Blockquote.test.tsx

@@ -1,5 +1,5 @@
-import Blockquote from './Blockquote'
 import { render } from '@/utils'
+import Blockquote from './Blockquote'
 
 describe('Blockquote', () => {
   it('should render correctly (snapshot)', () => {

components/Blockquote/Blockquote.tsx

@@ -1,5 +1,5 @@
-import cx from 'classnames'
 import type { BlockquoteHTMLAttributes } from 'react'
+import cx from 'classnames'
 import styles from './Blockquote.module.css'
 
 interface Props extends BlockquoteHTMLAttributes<HTMLElement> {}

components/BooksGrid/BookCard.tsx

@@ -1,11 +1,11 @@
 'use client'
 
+import type { Book } from '@/types'
 import Badge from '@/components/Badge'
 import { Card, Meta } from '@/components/Card'
 import { Book as BookIcon } from '@/components/Icons'
 import { Span } from '@/components/Texts'
 import { getColorByName } from '@/config'
-import type { Book } from '@/types'
 
 interface Props {
   book: Book

components/BooksGrid/BooksGrid.test.tsx

@@ -1,6 +1,6 @@
+import { render } from '@/utils'
 import { axe } from 'jest-axe'
 import BooksGrid from './BooksGrid'
-import { render } from '@/utils'
 
 describe('BooksGrid', () => {
   it('should render correctly (snapshot)', () => {

components/BooksGrid/BooksGrid.tsx

@@ -1,8 +1,8 @@
-import BookCard from './BookCard'
+import type { Book } from '@/types'
 import Col from '@/components/Col'
 import Row from '@/components/Row'
 import { siteConfig } from '@/config'
-import type { Book } from '@/types'
+import BookCard from './BookCard'
 
 interface Props {
   books?: Book[]

components/Card/Card.tsx

@@ -1,5 +1,5 @@
-import { Card as AntCard } from 'antd'
 import type { CardMetaProps, CardProps } from 'antd/lib/card'
+import { Card as AntCard } from 'antd'
 import cx from 'classnames'
 
 interface Props extends CardProps {}

components/CodeBlocks/BlockCode.tsx

@@ -1,5 +1,5 @@
-import cx from 'classnames'
 import type { Language } from 'prism-react-renderer'
+import cx from 'classnames'
 import Highlight, { defaultProps } from 'prism-react-renderer'
 import styles from './BlockCode.module.css'
 import theme from './monokai'

components/CodeBlocks/InlineCode.test.tsx

@@ -1,5 +1,5 @@
-import InlineCode from './InlineCode'
 import { render } from '@/utils'
+import InlineCode from './InlineCode'
 
 describe('InlineCode', () => {
   it('should render correctly (snapshot)', () => {

components/CodeBlocks/LiveCode.test.tsx

@@ -1,5 +1,5 @@
-import LiveCode from './LiveCode'
 import { render } from '@/utils'
+import LiveCode from './LiveCode'
 
 describe('LiveCode', () => {
   it('should render live code correctly (snapshot)', () => {

components/CodeBlocks/Pre.test.tsx

@@ -1,5 +1,5 @@
-import Pre from './Pre'
 import { render } from '@/utils'
+import Pre from './Pre'
 
 describe('Pre', () => {
   const languages = [

components/CodeBlocks/Pre.tsx

@@ -1,6 +1,7 @@
+import type { HTMLProps, ReactElement } from 'react'
+import CopyButton from '@/components/CopyButton'
 import cx from 'classnames'
 import dynamic from 'next/dynamic'
-import type { HTMLProps, ReactElement } from 'react'
 import BlockCode from './BlockCode'
 import styles from './Pre.module.css'
 import {
@@ -9,7 +10,6 @@ import {
   normalizeLanguageName,
   normalizeLines,
 } from './utils'
-import CopyButton from '@/components/CopyButton'
 
 const LiveCode = dynamic(async () => import('./LiveCode'))
 

components/CodeBlocks/utils.ts

@@ -1,5 +1,5 @@
-import parseNumericRange from 'parse-numeric-range'
 import type { Language } from 'prism-react-renderer'
+import parseNumericRange from 'parse-numeric-range'
 
 const normalizeCode = (code: string = '') => code.replace(/\n+$/, '')
 

components/Container/Container.test.tsx

@@ -1,6 +1,6 @@
+import { render, screen } from '@/utils'
 import { axe } from 'jest-axe'
 import Container from './Container'
-import { render, screen } from '@/utils'
 
 describe('Container', () => {
   it('should render correctly (snapshot)', () => {

components/Container/Container.tsx

@@ -1,5 +1,5 @@
-import cx from 'classnames'
 import type { CSSProperties, HTMLProps, ReactNode } from 'react'
+import cx from 'classnames'
 
 interface Props extends HTMLProps<HTMLDivElement> {
   children: ReactNode

components/CopyButton/CopyButton.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import cx from 'classnames'
-import { useReducedMotion } from 'framer-motion'
-import styles from './CopyButton.module.css'
 import { Check, Copy } from '@/components/Icons'
 import { Toggle } from '@/components/Motion'
 import { useCopyToClipboard } from '@/hooks'
+import cx from 'classnames'
+import { useReducedMotion } from 'framer-motion'
+import styles from './CopyButton.module.css'
 
 interface Props {
   code: string

components/Editor/Editor.test.tsx

@@ -1,5 +1,5 @@
-import Editor from './Editor'
 import { render, screen } from '@/utils'
+import Editor from './Editor'
 
 describe('Editor', () => {
   it('should render sandpack correctly', () => {

components/Editor/Editor.tsx

@@ -1,7 +1,7 @@
 import type { SandpackPredefinedTemplate } from '@codesandbox/sandpack-react'
+import type { ReactElement, ReactNode } from 'react'
 import { Sandpack } from '@codesandbox/sandpack-react'
 import { monokaiPro } from '@codesandbox/sandpack-themes'
-import type { ReactElement, ReactNode } from 'react'
 import { Children } from 'react'
 import { normalizeFilepath } from './utils'
 

components/Editor/utils.ts

@@ -14,6 +14,7 @@ function languageToFilepath(language?: string): string {
       return '/App.tsx'
     case 'vue':
       return '/src/App.vue'
+    case undefined:
     default:
       return '/App.tsx'
   }

components/ErrorBoundary/ErrorBoundary.test.tsx

@@ -1,7 +1,7 @@
-import { axe } from 'jest-axe'
 import type { JSXElementConstructor, ReactNode } from 'react'
-import ErrorBoundary from './ErrorBoundary'
 import { render, screen } from '@/utils'
+import { axe } from 'jest-axe'
+import ErrorBoundary from './ErrorBoundary'
 
 describe('ErrorBoundary', () => {
   const ComponentWithError = ({ shouldThrow }: { shouldThrow?: boolean }) => {

components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import type { ErrorInfo } from 'react'
-import { Component } from 'react'
 import Paragraph from '@/components/Paragraph'
 import Result from '@/components/Result'
 import { Text } from '@/components/Texts'
+import { Component } from 'react'
 
 interface Props {
   children: JSX.Element

components/FlexContainer/FlexContainer.test.tsx

@@ -1,6 +1,6 @@
+import { render, screen } from '@/utils'
 import { axe } from 'jest-axe'
 import FlexContainer from './FlexContainer'
-import { render, screen } from '@/utils'
 
 describe('FlexContainer', () => {
   it('should render correctly (snapshot)', () => {

components/FlexContainer/FlexContainer.tsx

@@ -1,5 +1,5 @@
-import cx from 'classnames'
 import type { CSSProperties, HTMLProps, ReactNode } from 'react'
+import cx from 'classnames'
 
 interface Props extends HTMLProps<HTMLDivElement> {
   children: ReactNode

components/Footer/Footer.test.tsx

@@ -1,7 +1,7 @@
-import { axe } from 'jest-axe'
-import Footer from './Footer'
 import mockData from '@/mocks/data'
 import { render } from '@/utils'
+import { axe } from 'jest-axe'
+import Footer from './Footer'
 
 describe('Footer', () => {
   const mockTime = mockData.time

components/Footer/Footer.tsx

@@ -1,11 +1,11 @@
-import FooterTime from './FooterTime'
+import type { BuildTime, SiteConfig, SocialType } from '@/types'
 import Col from '@/components/Col'
 import Container from '@/components/Container'
 import Divider from '@/components/Divider'
 import Row from '@/components/Row'
 import SocialButton from '@/components/SocialButton'
 import { siteConfig, socialList } from '@/config'
-import type { BuildTime, SiteConfig, SocialType } from '@/types'
+import FooterTime from './FooterTime'
 
 interface Props {
   buildTime: BuildTime

components/Footnote/Footnote.test.tsx

@@ -1,5 +1,5 @@
-import Footnote from './Footnote'
 import { render } from '@/utils'
+import Footnote from './Footnote'
 
 describe('Footnote', () => {
   it('should render correctly (snapshot)', () => {

components/Footnote/Footnote.tsx

@@ -1,5 +1,5 @@
-import cx from 'classnames'
 import type { ReactNode } from 'react'
+import cx from 'classnames'
 import styles from './Footnote.module.css'
 
 interface Props {

components/GithubCard/GithubCard.test.tsx

@@ -1,7 +1,7 @@
-import { axe } from 'jest-axe'
-import GithubCard from './GithubCard'
 import mockData from '@/mocks/data'
 import { render } from '@/utils'
+import { axe } from 'jest-axe'
+import GithubCard from './GithubCard'
 
 describe('GithubCard', () => {
   const mockBaseProfile = mockData.baseProfile