chore(eslint): setup typescript-eslint/recommended (#6577)

* chore: remove unused utils/components/packages

* initial eslint/prettier setup

* merge RemoveUnusedCode

* fix(linting errors): single quotes in text

* Remove WhatsNewBanner

* Remove WhatsNewBanner

* fix(linting errors): single quotes in text

* add rule to throw eslint error for react hooks dependencies instead of a warning

* Remove unused InfoPopover

* Remove unused InfoPopover

* fix(linting errors): do not pass children as prop in Block test

* fix(linting errors): fix next img warnings

* fix(linting errors): missing hook dependency GetStartedPopover

* fix(linting error): move handleScroll to its own useEffect w/o dependency array

* fix(linting error): missing hook dependency in MDXCode

* fix(linting error): order of hooks MDXLink

* fix(linting error): missing hook dependency PlatformNavigator

* fix(linting error): convert findRoute to hook, useRouteFinder, move to separate utils file

* fix(lint errors): MenuItem and type update

* fix(lint errors): make 3rd party scripts load async

* fix(linting error): cleanup function in hook useTabKeyDetection

* change 3rd party scripts to defer

* clean up eslint warnings in next.config.mjs

* use next ExportedImage instead of Image

* chore(eslint): setup typescript-eslint/recommended

* remove @typescript-eslint/parser, its already included

* fix unused vars, const/let

* Switch awshome_s_code to async to fix track errors

* Fix unused imports and const/let variables

* use typescript/eslint for unused vars

* add linting to staged files with husky

* update lintstagedrc

* Add prettier to husky precommit

* downgrade lint-staged to v14 to work with node16

* update prettierignore

* ignore mdx files for now

* Remove SidebarLayoutToggle

* remove unified and mdx-prism

* remove comments

* add eslint ignore for 3rd party script we have to load sync

* add comment about prettier coming last

.eslintrc.json

@@ -1,7 +1,15 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"],
-  "plugins": ["prettier"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier" // prettier should always come last
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier"],
   "rules": {
-    "react-hooks/exhaustive-deps": "error"
+    "react-hooks/exhaustive-deps": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"
   }
 }

package.json

@@ -39,6 +39,7 @@
     "@types/node": "^12.12.9",
     "@types/react": "^18.0.0",
     "@types/url-parse": "^1.4.3",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
     "axios": "^1.3.4",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",

src/components/Breadcrumbs/index.tsx

@@ -44,14 +44,14 @@ function generateBreadcrumbs(
   const breadcrumbs: BreadcrumbItem[] = [];
 
   const pieces = route.split('/').filter((str) => str);
-  let urls: string[] = [];
+  const urls: string[] = [];
   for (let i = 1; i <= pieces.length; i++) {
     urls.push(`/${pieces.slice(0, i).join('/')}`);
   }
 
   urls.forEach((url) => {
     const directoryEntry = findNode(url);
-    let href = {
+    const href = {
       pathname: url
     };
     if (url.includes('[platform]')) {
@@ -75,8 +75,8 @@ function generateBreadcrumbs(
   return breadcrumbs;
 }
 
-function BreadcrumbsComponent({ route, platform, isGen2 }: Props) {
-  const items = generateBreadcrumbs(route, platform, isGen2);
+function BreadcrumbsComponent({ route, platform }: Props) {
+  const items = generateBreadcrumbs(route, platform);
   return items.length > 1 ? (
     <div className={'breadcrumb__container'}>
       <Breadcrumbs.Container>

src/components/CliCommands/Command.tsx

@@ -1,5 +1,5 @@
 import { CliCommand, CliCommandFlag } from '@/data/cli-commands';
-import { Heading, Text, Flex, View } from '@aws-amplify/ui-react';
+import { Text, Flex } from '@aws-amplify/ui-react';
 import { MDXCode } from '../MDXComponents';
 import { CommandHeading, SubCommandHeading } from './CommandHeading';
 import { Fragment } from 'react';

src/components/ExternalLink/index.tsx

@@ -21,7 +21,7 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({
       className={className}
       rel="noopener noreferrer"
       target="_blank"
-      onClick={(e) => {
+      onClick={() => {
         trackLink(href);
       }}
     >

src/components/ExternalLinkButton/ExternalLinkButton.tsx

@@ -32,7 +32,7 @@ export const ExternalLinkButton = ({
       as="a"
       align-items="center"
       className={className}
-      onClick={(e) => {
+      onClick={() => {
         trackLink(href);
       }}
     >

src/components/FeatureFlags/FeatureFlagValues.tsx

@@ -1,14 +1,11 @@
 import {
-  Heading,
   Table,
   TableCell,
   TableBody,
   TableHead,
   TableRow,
-  Text,
   View
 } from '@aws-amplify/ui-react';
-import Link from 'next/link';
 
 export type FeatureFlags = Record<string, Section>;
 

src/components/FeatureLists/FeatureLists.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Heading } from '@aws-amplify/ui-react';
+import { Heading } from '@aws-amplify/ui-react';
 import { Columns } from '@/components/Columns';
 
 interface FeatureListsProps {

src/components/Feedback/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import Feedback from '../index';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as trackModule from '../../../utils/track';
 

src/components/FilterChildren/__tests__/FilterChildren.test.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import FilterChildren from '../index';
+// import * as React from 'react';
+// import { render, screen } from '@testing-library/react';
+// import FilterChildren from '../index';
 
-let routerMock = {
+const routerMock = {
   __esModule: true
 };
 

src/components/FilterContent/__tests__/FilterContent.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import FilterContent from '../index';
 
-let routerMock = {
+const routerMock = {
   __esModule: true
 };
 

src/components/Fragments/__tests__/Fragments.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import Fragments from '../index';
 
-let routerMock = {
+const routerMock = {
   __esModule: true,
   useRouter: () => {
     return {

src/components/Fragments/index.tsx

@@ -1,10 +1,6 @@
 import { Fragment } from 'react';
 import FilterChildren from '../FilterChildren';
 
-type MdxFrontmatterType = {
-  lastUpdated: string;
-};
-
 export default function Fragments({ fragments }) {
   const children: React.ReactNode[] = [];
 

src/components/GetStartedPopover/GetStartedPopover.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import classNames from 'classnames';
 import { Button, Flex, VisuallyHidden, View } from '@aws-amplify/ui-react';
 import Link from 'next/link';
@@ -15,7 +15,6 @@ import {
   IconVue
 } from '@/components/Icons';
 import { useClickOutside } from '@/utils/useClickOutside';
-import { DEFAULT_PLATFORM } from '@/data/platforms';
 import { useTabKeyDetection } from '@/utils/useTabKeyDetection';
 
 const getStartedHref = '/[platform]/start/getting-started/introduction/';

src/components/Icons/IconNext.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 import { Icon } from '@aws-amplify/ui-react';
 import { v4 as uuidv4 } from 'uuid';
 

src/components/InlineFilter/__tests__/InlineFilter.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import InlineFilter from '../index';
 
-let routerMock = {
+const routerMock = {
   __esModule: true,
   useRouter: () => {
     return {

src/components/Layout/Layout.tsx

@@ -36,9 +36,7 @@ import { LayoutProvider } from '@/components/Layout';
 import { TableOfContents } from '@/components/TableOfContents';
 import type { HeadingInterface } from '@/components/TableOfContents/TableOfContents';
 import { PlatformNavigator } from '@/components/PlatformNavigator';
-import directory from 'src/directory/directory.json';
 import flatDirectory from 'src/directory/flatDirectory.json';
-import { PageNode } from 'src/directory/directory';
 import { Breadcrumbs } from '@/components/Breadcrumbs';
 import { debounce } from '@/utils/debounce';
 import { DocSearch } from '@docsearch/react';
@@ -65,7 +63,7 @@ export const Layout = ({
   url,
   useCustomTitle = false
 }: {
-  children: any;
+  children: React.ReactNode;
   hasTOC?: boolean;
   pageDescription?: string;
   pageTitle?: string;

src/components/MDXComponents/MDXLink.tsx

@@ -3,8 +3,13 @@ import ExternalLink from '@/components/ExternalLink';
 import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
 import { usePathWithoutHash } from '@/utils/usePathWithoutHash';
 
-export const MDXLink = (props) => {
-  let { href, children, hash } = props;
+export const MDXLink = ({
+  href: hrefFromProps,
+  children,
+  hash: hashFromProps
+}) => {
+  let href = hrefFromProps;
+  let hash = hashFromProps;
   const isInternal = href && (href.startsWith('/') || href.startsWith('#'));
   const baseURI = usePathWithoutHash();
   const platform = useCurrentPlatform();

src/components/Menu/MenuItem.tsx

@@ -68,7 +68,7 @@ export function MenuItem({
     }
   };
 
-  let pathname = getPathname(pageNode.route, currentPlatform);
+  const pathname = getPathname(pageNode.route, currentPlatform);
 
   const current = asPathWithoutHash === pathname;
 

src/components/MigrationAlert/MigrationAlert.tsx

@@ -1,8 +1,6 @@
-import { useState } from 'react';
 import { Callout } from '../Callout';
 import Link from 'next/link';
 import { useCurrentPlatform } from '@/utils/useCurrentPlatform';
-import { Platform } from '@/data/platforms';
 
 type MigrationAlert = {
   isLegacy: boolean;

src/components/NextPrevious/index.tsx

@@ -24,8 +24,8 @@ export const NextPrevious = () => {
       return { previous, next };
     } else if (children && children.length) {
       for (let i = 0; i < children.length; i++) {
-        let child = children[i];
-        let res = findDirectoryNodes(
+        const child = children[i];
+        const res = findDirectoryNodes(
           route,
           child,
           platform,

src/components/PlatformNavigator/index.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { Button, Flex, Text, View } from '@aws-amplify/ui-react';
 import { IconChevron } from '@/components/Icons';
 import { frameworks } from '@/constants/frameworks';

src/pages/404.tsx

@@ -20,7 +20,7 @@ export function getStaticProps() {
 
 export default function Custom404() {
   const basePath = 'https://docs.amplify.aws';
-  let [href, setHref] = useState(basePath);
+  const [href, setHref] = useState(basePath);
   const path = useRouter().asPath;
   useEffect(() => {
     setHref(basePath + path);

src/pages/[platform]/index.tsx

@@ -4,10 +4,9 @@ import { FrameworkGrid } from '@/components/FrameworkGrid';
 import { IconChevron } from '@/components/Icons';
 import { GetStartedPopover } from '@/components/GetStartedPopover';
 import { InternalLinkButton } from '@/components/InternalLinkButton';
-import { Flex, Heading, Button, Text } from '@aws-amplify/ui-react';
+import { Flex, Heading, Text } from '@aws-amplify/ui-react';
 import LinkCards from '@/components/LinkCards';
 import PlatformFeatureList from '@/components/FeatureLists/PlatformFeatureList';
-import Link from 'next/link';
 
 export const meta = {
   title: 'Overview',

src/pages/[platform]/tools/cli/commands.tsx

@@ -1,5 +1,5 @@
 import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
-import { Flex, Heading, View } from '@aws-amplify/ui-react';
+import { Flex } from '@aws-amplify/ui-react';
 import { commands } from '@/data/cli-commands.mjs';
 import { Command } from '@/components/CliCommands';
 

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { Heading, Text, Flex, Button, Grid } from '@aws-amplify/ui-react';
+import { Heading, Text, Flex } from '@aws-amplify/ui-react';
 import { FrameworkGrid } from '@/components/FrameworkGrid';
 import { GetStartedPopover } from '@/components/GetStartedPopover';
 import { IconChevron } from '@/components/Icons';
@@ -28,7 +28,7 @@ export function getStaticProps() {
 
 export default function Page() {
   //Default platform is javascript
-  let defaultPlatform = DEFAULT_PLATFORM;
+  const defaultPlatform = DEFAULT_PLATFORM;
 
   return (
     <Flex className="home-content">

src/utils/findDirectoryNode.ts

@@ -1,13 +1,13 @@
 import directory from '../directory/directory.json';
 
 export const findDirectoryNode = (route, dir = directory) => {
-    if(dir.route === route){
-        return dir
-    }else if(dir.children && dir.children.length){
-        for(let i = 0; i < dir.children.length; i++){
-            let child = dir.children[i];
-            let res = findDirectoryNode(route, child);
-            if(res) return res;
-        }
+  if (dir.route === route) {
+    return dir;
+  } else if (dir.children && dir.children.length) {
+    for (let i = 0; i < dir.children.length; i++) {
+      const child = dir.children[i];
+      const res = findDirectoryNode(route, child);
+      if (res) return res;
     }
-}
+  }
+};

src/utils/parseLocalStorage.ts

@@ -1,5 +1,5 @@
 export function parseLocalStorage(key: string, fallback: any): any {
-  if (typeof localStorage === "undefined") return fallback;
+  if (typeof localStorage === 'undefined') return fallback;
 
   const result = localStorage.getItem(key);
   if (!result) {

src/utils/track.ts

@@ -27,45 +27,6 @@ export enum AnalyticsEventType {
   PAGE_DATA_FETCH_EXCEPTION = 'PAGE_DATA_FETCH_EXCEPTION'
 }
 
-interface AnalyticsEventPageVisit {
-  type: AnalyticsEventType.PAGE_VISIT;
-  attributes: {
-    url: string;
-    previousUrl: string;
-    referrer: string;
-  };
-}
-
-interface AnalyticsEventInternalLinkClick {
-  type: AnalyticsEventType.INTERNAL_LINK_CLICK;
-  attributes: {
-    from: string;
-    to: string;
-  };
-}
-
-interface AnalyticsEventExternalLinkClick {
-  type: AnalyticsEventType.EXTERNAL_LINK_CLICK;
-  attributes: {
-    from: string;
-    to: string;
-  };
-}
-
-interface AnalyticsEventPageDataFetchException {
-  type: AnalyticsEventType.PAGE_DATA_FETCH_EXCEPTION;
-  attributes: {
-    url: string;
-    exception: Error;
-  };
-}
-
-type AnalyticsEvent =
-  | AnalyticsEventPageVisit
-  | AnalyticsEventInternalLinkClick
-  | AnalyticsEventExternalLinkClick
-  | AnalyticsEventPageDataFetchException;
-
 export const trackPageVisit = (): void => {
   if (typeof window !== 'undefined' && typeof s != 'undefined') {
     s.pageName = window.location.href;
@@ -130,13 +91,7 @@ export const setSearchResultCount = (resultCount: number): void => {
   }
 };
 
-export const trackSearchQuery = (
-  _input,
-  _event,
-  suggestion,
-  _datasetNumber,
-  _context
-): void => {
+export const trackSearchQuery = (_input, _event, suggestion): void => {
   if (typeof window !== 'undefined' && typeof s != 'undefined') {
     s.linkTrackVars =
       'prop39,prop41,prop50,prop61,prop62,eVar26,eVar27,eVar39,eVar41,eVar50,eVar61,eVar62,eVar69,events';