chore: upgrade TypeScript & other ESLint related deps (#5963)

* chore: upgrade ESLint related deps

* Upgrade TS

* Fix lock

* Bump Babel

* Update config

packages/docusaurus-plugin-debug/src/theme/DebugContent/index.tsx

@@ -11,26 +11,28 @@ import DebugLayout from '@theme/DebugLayout';
 import DebugJsonView from '@theme/DebugJsonView';
 import type {Props} from '@theme/DebugContent';
 
-const PluginInstanceContent = ({
+function PluginInstanceContent({
   pluginId,
   pluginInstanceContent,
 }: {
   pluginId: string;
   pluginInstanceContent: unknown;
-}) => (
-  <section style={{marginBottom: 30}}>
-    <code>{pluginId}</code>
-    <DebugJsonView src={pluginInstanceContent} collapseDepth={2} />
-  </section>
-);
+}) {
+  return (
+    <section style={{marginBottom: 30}}>
+      <code>{pluginId}</code>
+      <DebugJsonView src={pluginInstanceContent} collapseDepth={2} />
+    </section>
+  );
+}
 
-const PluginContent = ({
+function PluginContent({
   pluginName,
   pluginContent,
 }: {
   pluginName: string;
   pluginContent: Record<string, unknown>;
-}) => {
+}) {
   return (
     <section style={{marginBottom: 60}}>
       <h3>{pluginName}</h3>
@@ -40,19 +42,17 @@ const PluginContent = ({
           .filter(
             ([_pluginId, pluginInstanceContent]) => !!pluginInstanceContent,
           )
-          .map(([pluginId, pluginInstanceContent]) => {
-            return (
-              <PluginInstanceContent
-                key={pluginId}
-                pluginId={pluginId}
-                pluginInstanceContent={pluginInstanceContent}
-              />
-            );
-          })}
+          .map(([pluginId, pluginInstanceContent]) => (
+            <PluginInstanceContent
+              key={pluginId}
+              pluginId={pluginId}
+              pluginInstanceContent={pluginInstanceContent}
+            />
+          ))}
       </div>
     </section>
   );
-};
+}
 
 function DebugContent({allContent}: Props): JSX.Element {
   return (
@@ -66,15 +66,13 @@ function DebugContent({allContent}: Props): JSX.Element {
               (instanceContent) => !!instanceContent,
             ),
           )
-          .map(([pluginName, pluginContent]) => {
-            return (
-              <PluginContent
-                key={pluginName}
-                pluginName={pluginName}
-                pluginContent={pluginContent}
-              />
-            );
-          })}
+          .map(([pluginName, pluginContent]) => (
+            <PluginContent
+              key={pluginName}
+              pluginName={pluginName}
+              pluginContent={pluginContent}
+            />
+          ))}
       </div>
     </DebugLayout>
   );

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/index.tsx

@@ -15,7 +15,7 @@ const RootName = null;
 
 // Seems ReactJson does not work with SSR
 // https://github.com/mac-s-g/react-json-view/issues/121
-const BrowserOnlyReactJson = (props: ReactJsonViewProps) => {
+function BrowserOnlyReactJson(props: ReactJsonViewProps) {
   return (
     <BrowserOnly>
       {() => {
@@ -25,13 +25,11 @@ const BrowserOnlyReactJson = (props: ReactJsonViewProps) => {
       }}
     </BrowserOnly>
   );
-};
+}
 
 function DebugJsonView({src, collapseDepth}: Props): JSX.Element {
   return (
     <BrowserOnlyReactJson
-      // Prop type defined by react-json-view
-      // eslint-disable-next-line @typescript-eslint/ban-types
       src={src as object}
       style={{
         marginTop: '10px',
@@ -41,12 +39,12 @@ function DebugJsonView({src, collapseDepth}: Props): JSX.Element {
       }}
       name={RootName}
       theme="paraiso"
-      shouldCollapse={(field) => {
+      shouldCollapse={(field) =>
         // By default, we collapse the json for performance reasons
         // See https://github.com/mac-s-g/react-json-view/issues/235
         // Non-root elements that are larger than 50 fields are collapsed
-        return field.name !== RootName && Object.keys(field.src).length > 50;
-      }}
+        field.name !== RootName && Object.keys(field.src).length > 50
+      }
       collapsed={collapseDepth}
       groupArraysAfterLength={5}
       enableClipboard={false}

packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.tsx

@@ -10,18 +10,20 @@ import Head from '@docusaurus/Head';
 import Link from '@docusaurus/Link';
 import styles from './styles.module.css';
 
-const DebugNavLink = ({to, children}: {to: string; children: ReactNode}) => (
-  <Link
-    className={styles.navlink}
-    isNavLink
-    to={to}
-    exact
-    activeStyle={{
-      backgroundColor: '#363739',
-    }}>
-    {children}
-  </Link>
-);
+function DebugNavLink({to, children}: {to: string; children: ReactNode}) {
+  return (
+    <Link
+      className={styles.navlink}
+      isNavLink
+      to={to}
+      exact
+      activeStyle={{
+        backgroundColor: '#363739',
+      }}>
+      {children}
+    </Link>
+  );
+}
 
 function DebugLayout({children}: {children: ReactNode}): JSX.Element {
   return (