fix linting errors

.eslintrc.js

@@ -5,15 +5,17 @@ module.exports = {
       jsx: true,
     },
   },
+
   extends: [
-    'plugin:import/recommended',
+    'prettier',
     'plugin:react/jsx-runtime',
     'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:prettier/recommended',
     'plugin:github/recommended',
     'plugin:github/browser',
     'plugin:primer-react/recommended',
+    'plugin:markdown/recommended',
   ],
   ignorePatterns: ['node_modules', '.next', 'dist/**/*', 'out/**/*', 'types/**/*', 'CHANGELOG.md'],
   globals: {
@@ -40,7 +42,6 @@ module.exports = {
     'eslint-comments/no-unused-disable': 0,
     'react/prop-types': 0,
     'react/display-name': 0,
-    'react-hooks/exhaustive-deps': 'error',
     camelcase: [
       'error',
       {

packages/theme/.eslintrc.js

@@ -2,6 +2,7 @@ const base = require('../../.eslintrc')
 
 module.exports = {
   ...base,
+  plugins: ['react-hooks'],
   parserOptions: {
     tsconfigRootDir: __dirname,
   },

packages/theme/components/context/color-modes/context.ts

@@ -1,4 +1,4 @@
-import React from 'react'
+import {createContext} from 'react'
 
 export type ColorMode = 'light' | 'dark'
 
@@ -12,4 +12,4 @@ const defaultValues: ColorModeContextProps = {
   setColorMode: () => {},
 }
 
-export const ColorModeContext = React.createContext<ColorModeContextProps>(defaultValues)
+export const ColorModeContext = createContext<ColorModeContextProps>(defaultValues)

packages/theme/components/layout/header/Header.tsx

@@ -1,10 +1,10 @@
 import {MarkGithubIcon, MoonIcon, SearchIcon, SunIcon, ThreeBarsIcon, XIcon} from '@primer/octicons-react'
 import {Box, FormControl, IconButton, TextInput} from '@primer/react'
 import {Heading, Stack, Text} from '@primer/react-brand'
-import clsx from 'clsx'
+import {clsx} from 'clsx'
 import {MdxFile, PageMapItem} from 'nextra'
 import type {PageItem} from 'nextra/normalize-pages'
-import React, {useCallback, useEffect, useMemo} from 'react'
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {debounce} from 'lodash'
 
 import Link from 'next/link'
@@ -28,14 +28,14 @@ type SearchResults = {
 
 export function Header({pageMap, docsDirectories, siteTitle}: HeaderProps) {
   const {colorMode, setColorMode} = useColorMode()
-  const inputRef = React.useRef<HTMLInputElement | null>(null)
-  const searchResultsRef = React.useRef<HTMLElement | null>(null)
+  const inputRef = useRef<HTMLInputElement | null>(null)
+  const searchResultsRef = useRef<HTMLElement | null>(null)
   const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState('768')
-  const [isSearchOpen, setIsSearchOpen] = React.useState(false)
-  const [isSearchResultOpen, setIsSearchResultOpen] = React.useState(false)
-  const [searchResults, setSearchResults] = React.useState<SearchResults[] | undefined>()
-  const [searchTerm, setSearchTerm] = React.useState<string | undefined>('')
-  const [activeDescendant] = React.useState<number>(-1)
+  const [isSearchOpen, setIsSearchOpen] = useState(false)
+  const [isSearchResultOpen, setIsSearchResultOpen] = useState(false)
+  const [searchResults, setSearchResults] = useState<SearchResults[] | undefined>()
+  const [searchTerm, setSearchTerm] = useState<string | undefined>('')
+  const [activeDescendant] = useState<number>(-1)
 
   useEffect(() => {
     if (isSearchOpen && inputRef.current) {

packages/theme/components/layout/nav-drawer/useNavDrawerState.ts

@@ -1,28 +1,28 @@
-import React from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import debounce from 'lodash.debounce'
 
 export function useNavDrawerState(breakpoint): [boolean, (value: boolean) => void] {
   if (typeof breakpoint === 'string') {
     breakpoint = parseInt(breakpoint, 10)
   }
-  const [isOpen, setOpen] = React.useState<boolean>(false)
+  const [isOpen, setOpen] = useState<boolean>(false)
 
-  const onResize = React.useCallback(() => {
+  const onResize = useCallback(() => {
     if (window.innerWidth >= breakpoint) {
       setOpen(false)
     }
   }, [setOpen, breakpoint])
 
-  const handleSetOpen = React.useCallback(
+  const handleSetOpen = useCallback(
     (value: boolean) => {
       setOpen(value)
     },
     [setOpen],
   )
 
-  const debouncedOnResize = React.useMemo(() => debounce(onResize, 250), [onResize])
+  const debouncedOnResize = useMemo(() => debounce(onResize, 250), [onResize])
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isOpen) {
       // eslint-disable-next-line github/prefer-observers
       window.addEventListener('resize', debouncedOnResize)

packages/theme/components/mdx-components/mdx-components.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import type {ComponentProps, ReactElement} from 'react'
-import clsx from 'clsx'
+import {clsx} from 'clsx'
 import type {Components} from 'nextra/mdx'
 
 import {LinkIcon} from '@primer/octicons-react'