refactor: update a few dev deps and convert to using type imports where possible (#2886)

* build: bump deps and add some new eslint rules

* refactor: run eslint --fix on code to convert to type imports where possible

src/components/Common/Button/index.tsx

@@ -1,4 +1,5 @@
-import React, { ForwardedRef } from 'react';
+import type { ForwardedRef } from 'react';
+import React from 'react';
 
 export type ButtonType =
   | 'default'

src/components/Common/ButtonWithDropdown/index.tsx

@@ -1,11 +1,10 @@
 import { ChevronDownIcon } from '@heroicons/react/solid';
-import React, {
+import type {
   AnchorHTMLAttributes,
   ButtonHTMLAttributes,
   ReactNode,
-  useRef,
-  useState,
 } from 'react';
+import React, { useRef, useState } from 'react';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { withProperties } from '../../../utils/typeHelpers';
 import Transition from '../../Transition';

src/components/Common/CachedImage/index.tsx

@@ -1,4 +1,5 @@
-import Image, { ImageProps } from 'next/image';
+import type { ImageProps } from 'next/image';
+import Image from 'next/image';
 import React from 'react';
 import useSettings from '../../../hooks/useSettings';
 

src/components/Common/ImageFader/index.tsx

@@ -1,9 +1,5 @@
-import React, {
-  ForwardRefRenderFunction,
-  HTMLAttributes,
-  useEffect,
-  useState,
-} from 'react';
+import type { ForwardRefRenderFunction, HTMLAttributes } from 'react';
+import React, { useEffect, useState } from 'react';
 import CachedImage from '../CachedImage';
 
 interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {

src/components/Common/ListView/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import {
+import type {
   MovieResult,
   PersonResult,
   TvResult,

src/components/Common/Modal/index.tsx

@@ -1,11 +1,13 @@
-import React, { MouseEvent, ReactNode, useRef } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
+import React, { useRef } from 'react';
 import ReactDOM from 'react-dom';
 import { useIntl } from 'react-intl';
 import useClickOutside from '../../../hooks/useClickOutside';
 import { useLockBodyScroll } from '../../../hooks/useLockBodyScroll';
 import globalMessages from '../../../i18n/globalMessages';
 import Transition from '../../Transition';
-import Button, { ButtonType } from '../Button';
+import type { ButtonType } from '../Button';
+import Button from '../Button';
 import CachedImage from '../CachedImage';
 import LoadingSpinner from '../LoadingSpinner';
 

src/components/Common/PlayButton/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import React from 'react';
 import ButtonWithDropdown from '../ButtonWithDropdown';
 
 interface PlayButtonProps {

src/components/Common/SettingsTabs/index.tsx

@@ -1,7 +1,8 @@
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
-import { hasPermission, Permission } from '../../../../server/lib/permissions';
+import type { Permission } from '../../../../server/lib/permissions';
+import { hasPermission } from '../../../../server/lib/permissions';
 import { useUser } from '../../../hooks/useUser';
 
 export interface SettingsRoute {

src/components/Common/Table/index.tsx

@@ -1,4 +1,5 @@
-import React, { AllHTMLAttributes } from 'react';
+import type { AllHTMLAttributes } from 'react';
+import React from 'react';
 import { withProperties } from '../../../utils/typeHelpers';
 
 const TBody: React.FC = ({ children }) => {