Add ESLint plugins for next and import sort order

.eslintrc

@@ -1,6 +1,12 @@
 {
-  "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
-  "plugins": ["@typescript-eslint", "react-hooks"],
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@next/next/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript"
+  ],
+  "plugins": ["@typescript-eslint", "react-hooks", "import"],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2018,
@@ -24,6 +30,53 @@
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
-    "@typescript-eslint/no-inferrable-types": "off"
+    "@typescript-eslint/no-inferrable-types": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "type",
+          "parent",
+          "sibling",
+          "index",
+          "object"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "next/*",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "next",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "react-*",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "react-*/*",
+            "group": "builtin",
+            "position": "before"
+          },
+          {
+            "pattern": "react",
+            "group": "builtin",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react", "next"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
   }
 }

package.json

@@ -10,10 +10,11 @@
     "build": "cross-env IS_BUILD=true next build",
     "start": "next start",
     "lint": "next lint",
+    "lint:fix": "npm run lint -- --fix",
     "format": "prettier \"src/**/*.{ts,tsx}\" --write",
-    "typecheck": "tsc",
-    "pretest": "npm run format",
-    "test": "npm run lint && npm run typecheck"
+    "format:check": "npm run format -- --check",
+    "typescript": "tsc",
+    "test": "npm run format:check && npm run lint:fix && npm run typescript"
   },
   "dependencies": {
     "@octokit/graphql": "^4.6.4",
@@ -39,6 +40,7 @@
     "cross-env": "^7.0.3",
     "eslint": "7.31.0",
     "eslint-config-next": "11.0.1",
+    "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.3.2",

src/components/champions/ChampionList.tsx

@@ -1,5 +1,5 @@
-import { ChampionCard } from '.'
 import { SimplifiedChampion } from '../../types'
+import { ChampionCard } from '.'
 
 interface Props {
   champions: SimplifiedChampion[]

src/components/common/SearchBar.tsx

@@ -1,6 +1,6 @@
 import { ChangeEvent, FC, KeyboardEventHandler, memo, useCallback, useRef } from 'react'
-import styled from 'styled-components'
 import { FiSearch as SearchIcon, FiX as ClearSearchIcon } from 'react-icons/fi'
+import styled from 'styled-components'
 import { debounce } from '../../utils/debounce'
 
 const Container = styled.div<{ width: string }>`

src/components/common/layout/Header.tsx

@@ -1,11 +1,11 @@
+import { useCallback, useEffect, useState } from 'react'
+import { GoThreeBars as MenuIcon, GoX as CloseIcon } from 'react-icons/go'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import styled from 'styled-components'
-import { GoThreeBars as MenuIcon, GoX as CloseIcon } from 'react-icons/go'
-import { Logo } from '../Logo'
 import { useMediaQuery } from '../../../hooks/useMediaQuery'
-import { useCallback, useEffect, useState } from 'react'
+import { Logo } from '../Logo'
 import { Navigation } from './Navigation'
-import { useRouter } from 'next/router'
 
 const StyledHeader = styled.header`
   background: var(--header-color);

src/components/common/layout/Navigation.tsx

@@ -1,7 +1,7 @@
-import { useRouter } from 'next/router'
+import { FaSun, FaMoon } from 'react-icons/fa'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 import styled from 'styled-components'
-import { FaSun, FaMoon } from 'react-icons/fa'
 import { useTheme } from '../../../hooks/useTheme'
 
 const Nav = styled.nav`

src/components/proposals/DetailsExpander.tsx

@@ -1,12 +1,12 @@
 import Link from 'next/link'
 import styled from 'styled-components'
-import { SanitizedHtml, Heading } from '../common'
-import { StarIcon } from '../common/StarIcon'
-import { GitHubIcon } from '../common/GitHubIcon'
-import { formatStageName } from '../../utils/formatStageName'
 import { Proposal } from '../../types'
+import { formatStageName } from '../../utils/formatStageName'
 import { getGitHubDetails, isGithubProposal } from '../../utils/github'
+import { SanitizedHtml, Heading } from '../common'
 import { Expander } from '../common/Expander'
+import { GitHubIcon } from '../common/GitHubIcon'
+import { StarIcon } from '../common/StarIcon'
 
 const DetailCard = styled.div`
   display: flex;

src/components/proposals/DetailsSidebar.tsx

@@ -1,11 +1,11 @@
 import Link from 'next/link'
 import styled from 'styled-components'
-import { SanitizedHtml, Heading } from '../common'
-import { StarIcon } from '../common/StarIcon'
-import { GitHubIcon } from '../common/GitHubIcon'
-import { formatStageName } from '../../utils/formatStageName'
 import { Proposal } from '../../types'
+import { formatStageName } from '../../utils/formatStageName'
 import { getGitHubDetails, isGithubProposal } from '../../utils/github'
+import { SanitizedHtml, Heading } from '../common'
+import { GitHubIcon } from '../common/GitHubIcon'
+import { StarIcon } from '../common/StarIcon'
 
 const Sidebar = styled.aside`
   display: flex;

src/components/proposals/ProposalCard.tsx

@@ -1,9 +1,9 @@
+import { FC, memo } from 'react'
 import Link from 'next/link'
 import styled from 'styled-components'
-import { SanitizedHtml } from '../common/SanitizedHtml'
 import { Proposal, Stage } from '../../types'
+import { SanitizedHtml } from '../common/SanitizedHtml'
 import { StarIcon } from '../common/StarIcon'
-import { FC, memo } from 'react'
 
 const CardLink = styled.a`
   color: var(--foreground);

src/components/proposals/ProposalList.tsx

@@ -1,11 +1,11 @@
+import { FiEdit2 as PenIcon } from 'react-icons/fi'
+import { IoRibbonSharp as AwardIcon } from 'react-icons/io5'
 import Link from 'next/link'
 import styled from 'styled-components'
-import { SanitizedHtml } from '../common/SanitizedHtml'
-import { IoRibbonSharp as AwardIcon } from 'react-icons/io5'
-import { FiEdit2 as PenIcon } from 'react-icons/fi'
-import { StarIcon } from '../common/StarIcon'
 import { ChampionedProposal } from '../../api/getAllChampions'
 import { useMediaQuery } from '../../hooks/useMediaQuery'
+import { SanitizedHtml } from '../common/SanitizedHtml'
+import { StarIcon } from '../common/StarIcon'
 
 const Badges = styled.div`
   display: flex;

src/components/stages/StageList.tsx

@@ -1,13 +1,13 @@
+import { GiScarecrow, GiTeamUpgrade } from 'react-icons/gi'
+import { HiOutlineLightBulb } from 'react-icons/hi'
+import { RiDraftLine, RiCheckLine, RiCloseLine } from 'react-icons/ri'
+import type { IconType } from 'react-icons'
 import Link from 'next/link'
 import styled from 'styled-components'
+import { useMediaQuery } from '../../hooks/useMediaQuery'
 import { Stage } from '../../types'
 import { formatStageName } from '../../utils/formatStageName'
 import { Heading } from '../common'
-import type { IconType } from 'react-icons'
-import { GiScarecrow, GiTeamUpgrade } from 'react-icons/gi'
-import { RiDraftLine, RiCheckLine, RiCloseLine } from 'react-icons/ri'
-import { HiOutlineLightBulb } from 'react-icons/hi'
-import { useMediaQuery } from '../../hooks/useMediaQuery'
 
 export const List = styled.ul`
   display: flex;

src/components/stages/StageWithProposals.tsx

@@ -2,11 +2,11 @@ import { useCallback } from 'react'
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa'
 import Link from 'next/link'
 import styled from 'styled-components'
-import { ProposalCard } from '../proposals/ProposalCard'
+import { useExpandedStages } from '../../hooks/useExpandedStages'
+import { useMediaQuery } from '../../hooks/useMediaQuery'
 import { Proposal, Stage } from '../../types'
 import { formatStageName } from '../../utils/formatStageName'
-import { useMediaQuery } from '../../hooks/useMediaQuery'
-import { useExpandedStages } from '../../hooks/useExpandedStages'
+import { ProposalCard } from '../proposals/ProposalCard'
 
 const Card = styled.div<{ isExpanded: boolean }>`
   display: flex;

src/pages/_app.tsx

@@ -1,5 +1,5 @@
-import type { AppProps } from 'next/app'
 import { useState } from 'react'
+import type { AppProps } from 'next/app'
 import styled from 'styled-components'
 import { Header, Footer, GlobalStyle } from '../components/common'
 import { ExpandedStagesProvider } from '../hooks/useExpandedStages'

src/pages/_document.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @next/next/no-page-custom-font */
+
 import NextDocument, {
   Html,
   Head,

src/pages/champions/[championName].tsx

@@ -2,11 +2,11 @@ import { Fragment } from 'react'
 import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import type { ParsedUrlQuery } from 'querystring'
-import { Champion } from '../../types'
 import { getAllChampions } from '../../api/getAllChampions'
-import { ProposalList } from '../../components/proposals'
 import { Breadcrumbs, PageContainer } from '../../components/common'
 import { Heading } from '../../components/common/Heading'
+import { ProposalList } from '../../components/proposals'
+import { Champion } from '../../types'
 
 interface Props {
   champion: Champion

src/pages/champions/index.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react'
 import { GetStaticProps } from 'next'
 import Head from 'next/head'
-import { PageContainer, Breadcrumbs, SearchBar, Heading } from '../../components/common'
 import { getAllChampions } from '../../api/getAllChampions'
 import { ChampionList } from '../../components/champions'
+import { PageContainer, Breadcrumbs, SearchBar, Heading } from '../../components/common'
 import { SimplifiedChampion } from '../../types'
 
 interface Props {

src/pages/index.tsx

@@ -1,10 +1,10 @@
 import { Fragment, useState } from 'react'
 import { GetStaticProps } from 'next'
 import Head from 'next/head'
-import { PageContainer, Col, SearchBar } from '../components/common'
 import { getProposalsForStages } from '../api/getProposalsForStages'
-import { ProposalsByStage, allStages } from '../types'
+import { PageContainer, Col, SearchBar } from '../components/common'
 import { StageWithProposals } from '../components/proposals'
+import { ProposalsByStage, allStages } from '../types'
 
 interface Props {
   proposals: ProposalsByStage

src/pages/proposals/[proposalTitle].tsx

@@ -2,17 +2,17 @@ import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import marked from 'marked'
 import type { ParsedUrlQuery } from 'querystring'
-import { getReadmeBaseUrl, isGithubProposal } from '../../utils/github'
-import { Proposal, allStages } from '../../types'
-import { DetailsSidebar } from '../../components/proposals'
-import { Breadcrumbs, PageContainer, Flex } from '../../components/common'
 import { getProposalsForStages } from '../../api/getProposalsForStages'
 import { getReadmeForProposal } from '../../api/getReadmeForProposal'
 import { getRepoDetailsForProposal } from '../../api/getRepoDetailsForProposal'
+import { Breadcrumbs, PageContainer, Flex } from '../../components/common'
+import { DetailsSidebar } from '../../components/proposals'
+import { DetailsExpander } from '../../components/proposals/DetailsExpander'
 import { FallbackDetails } from '../../components/proposals/FallbackDetails'
 import { Readme } from '../../components/proposals/Readme'
 import { useMediaQuery } from '../../hooks/useMediaQuery'
-import { DetailsExpander } from '../../components/proposals/DetailsExpander'
+import { Proposal, allStages } from '../../types'
+import { getReadmeBaseUrl, isGithubProposal } from '../../utils/github'
 import { GlobalMarkdownStyles } from '../../utils/markdownStyles'
 
 interface Props {

src/pages/specifications/index.tsx

@@ -1,8 +1,8 @@
 import { GetStaticProps } from 'next'
 import Head from 'next/head'
-import { Specification } from '../../components/specifications'
-import { Breadcrumbs, Col, PageContainer, Heading } from '../../components/common'
 import { getSpecifications } from '../../api/getSpecifications'
+import { Breadcrumbs, Col, PageContainer, Heading } from '../../components/common'
+import { Specification } from '../../components/specifications'
 import { Specification as SpecificationType } from '../../types'
 
 interface Props {

src/pages/stages/[stageName].tsx

@@ -2,19 +2,19 @@ import { useState } from 'react'
 import { GetStaticPaths, GetStaticProps } from 'next'
 import Head from 'next/head'
 import type { ParsedUrlQuery } from 'querystring'
+import { getProposalsForStages } from '../../api/getProposalsForStages'
+import { getStageDetails } from '../../api/getStageDetails'
 import {
   PageContainer,
   Breadcrumbs,
   SearchBar,
   Heading,
   SanitizedHtml
 } from '../../components/common'
+import { Disclaimer } from '../../components/common/Disclaimer'
 import { ProposalList } from '../../components/proposals'
-import { getProposalsForStages } from '../../api/getProposalsForStages'
-import { formatStageName } from '../../utils/formatStageName'
 import { Proposal, Stage, allStages, ActiveStage } from '../../types'
-import { getStageDetails } from '../../api/getStageDetails'
-import { Disclaimer } from '../../components/common/Disclaimer'
+import { formatStageName } from '../../utils/formatStageName'
 
 interface Props {
   stageName: Stage

src/pages/stages/index.tsx

@@ -1,9 +1,9 @@
 import { GetStaticProps } from 'next'
 import Head from 'next/head'
 import { Breadcrumbs, Heading, PageContainer } from '../../components/common'
+import { Disclaimer } from '../../components/common/Disclaimer'
 import { StageList } from '../../components/stages/StageList'
 import { allStages } from '../../types'
-import { Disclaimer } from '../../components/common/Disclaimer'
 
 export const getStaticProps: GetStaticProps = async () => {
   return {