chore(eslint): Setup eslint and prettier (#6572)

* 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 * Switch awshome_s_code to async to fix track errors * 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 * simplify typing for Platform
aws-amplify · Dec 5, 2023 · 868c9fa · 868c9fa
1 parent 4add6af
commit 868c9fa
Show file tree

Hide file tree

Showing 28 changed files with 792 additions and 647 deletions.
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "react-hooks/exhaustive-deps": "error"
+  }
+}
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -2,3 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 yarn spellcheck-diff
+
+yarn lint-staged
diff --git a/.lintstagedrc.js b/.lintstagedrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  '**/*.(ts|tsx|js|css|mjs)': (filenames) => [
+    `yarn eslint ${filenames.join(' ')}`,
+    `yarn prettier --write ${filenames.join(' ')}`
+  ]
+};
diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,12 @@
-docs
+.github
+.husky
+.next
+.vscode
+client
+node_modules
+public
+README-assets
+yarn.lock
+redirects.json
+*.md
+*.mdx
diff --git a/.prettierrc b/.prettierrc
@@ -10,4 +10,4 @@
   "tabWidth": 2,
   "trailingComma": "none",
   "useTabs": false
-}
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -7,7 +7,7 @@ import rehypeImgSize from 'rehype-img-size';
 import remarkGfm from 'remark-gfm';
 dotenv.config({ path: './.env.custom' });
 
-export default () => {
+const nextJSConfig = () => {
   const withMDX = createMDX({
     extension: /\.mdx$/,
     options: {
@@ -23,21 +23,15 @@ export default () => {
     distDir: 'client/www/next-build',
     env: {
       BUILD_ENV: process.env.BUILD_ENV,
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_imageFolderPath: 'public',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_exportFolderPath: 'out',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_quality: '75',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_storePicturesInWEBP: 'true',
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_exportFolderName: 'nextImageExportOptimizer',
 
       // If you do not want to use blurry placeholder images, then you can set
       // nextImageExportOptimizer_generateAndUseBlurImages to false and pass
       // `placeholder="empty"` to all <ExportedImage> components.
-      // eslint-disable-next-line @typescript-eslint/camelcase
       nextImageExportOptimizer_generateAndUseBlurImages: 'true'
     },
     images: {
@@ -61,7 +55,6 @@ export default () => {
   });
 
   if (shouldAnalyzeBundles) {
-    // eslint-disable-next-line @typescript-eslint/no-var-requires
     const withNextBundleAnalyzer = require('next-bundle-analyzer')({
       format: ['json'],
       reportDir: '../.github/analyze',
@@ -76,3 +69,5 @@ export default () => {
 
   return nextConfig;
 };
+
+export default nextJSConfig;
diff --git a/package.json b/package.json
@@ -39,25 +39,23 @@
     "@types/node": "^12.12.9",
     "@types/react": "^18.0.0",
     "@types/url-parse": "^1.4.3",
-    "@typescript-eslint/eslint-plugin": "^2.7.0",
-    "@typescript-eslint/parser": "^2.7.0",
     "axios": "^1.3.4",
     "classnames": "^2.3.2",
     "cross-env": "^7.0.3",
     "cspell": "^6.2.3",
     "dotenv": "^16.0.0",
-    "eslint": "^6.6.0",
-    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-next": "^13.2.4",
-    "eslint-config-prettier": "^6.5.0",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
+    "eslint": "8.54.0",
+    "eslint-config-next": "14.0.3",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-next": "^0.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
     "fs-extra": "^9.0.1",
     "git-jiggy": "1.1.1",
     "husky": "^8.0.1",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "json5": "^2.2.3",
+    "lint-staged": "^14.0.0",
     "next-bundle-analyzer": "^0.6.7",
     "prettier": "^3.0.3",
     "puppeteer": "^20.8.2",
@@ -133,6 +131,7 @@
     "next-start": "next start",
     "prepare": "husky install",
     "analyze": "ANALYZE=true yarn next-build",
-    "prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs"
+    "prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs",
+    "lint": "next lint"
   }
 }
diff --git a/src/components/Banner/Banner.tsx b/src/components/Banner/Banner.tsx
@@ -19,11 +19,11 @@ export const Banner: React.FC<BannerProps> = ({ url = '/gen2' }) => {
         <Flex className="message-banner__inner">
           <Flex direction="column" gap="xxs">
             <Text as="span" className="message-banner__heading">
-              Preview: AWS Amplify's new code-first DX (Gen 2)
+              Preview: AWS Amplify&apos;s new code-first DX (Gen 2)
             </Text>
             <Text className="message-banner__content">
-              The next generation of Amplify's backend building experience with
-              a TypeScript-first DX.
+              The next generation of Amplify&apos;s backend building experience
+              with a TypeScript-first DX.
             </Text>
           </Flex>
 

diff --git a/src/components/Block/__tests__/Block.test.tsx b/src/components/Block/__tests__/Block.test.tsx
@@ -5,7 +5,7 @@ import Block from '../index';
 describe('Block', () => {
   it('should render the Block component', async () => {
     const child = <div>Block Child</div>;
-    render(<Block name={`test-block`} children={child} />);
+    render(<Block name={`test-block`}>{child}</Block>);
 
     const blockNode = await screen.findByText('Block Child');
     expect(blockNode).toBeInTheDocument();

diff --git a/src/components/GetStartedPopover/GetStartedPopover.tsx b/src/components/GetStartedPopover/GetStartedPopover.tsx
@@ -115,7 +115,7 @@ export const GetStartedPopover = (platform) => {
     if (expanded) {
       contentRef?.current?.focus();
     }
-  }, [expanded]);
+  }, [expanded, contentRef]);
 
   const handleBlur = (e) => {
     // Use relatedTarget to see if the target receiving focus is outside of the popover

diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -80,37 +80,6 @@ export const Layout = ({
   const [tocHeadings, setTocHeadings] = useState<HeadingInterface[]>([]);
   const menuButtonRef = useRef<HTMLButtonElement>(null);
   const sidebarMenuButtonRef = useRef<HTMLButtonElement>(null);
-
-  useEffect(() => {
-    const headings: HeadingInterface[] = [];
-
-    const defaultHeadings = '.main > h2, .main > h3';
-    const cliCommandHeadings =
-      '.commands-list__command > h2, .commands-list__command > .commands-list__command__subcommands > h3';
-    const headingSelectors = [defaultHeadings, cliCommandHeadings];
-
-    const pageHeadings = document.querySelectorAll(headingSelectors.join(', '));
-
-    pageHeadings.forEach((node) => {
-      const { innerText, id, localName } = node as HTMLElement;
-      if (innerText && id && (localName == 'h2' || localName == 'h3')) {
-        headings.push({
-          linkText: innerText,
-          hash: id,
-          level: localName
-        });
-      }
-    });
-    setTocHeadings(headings);
-
-    if (pageType === 'home') {
-      document.addEventListener('scroll', handleScroll);
-      return () => {
-        document.removeEventListener('scroll', handleScroll);
-      };
-    }
-  }, [children, pageType]);
-
   const mainId = 'pageMain';
   const showTOC = hasTOC && tocHeadings.length > 0;
   const router = useRouter();
@@ -141,8 +110,8 @@ export const Layout = ({
     currentPlatform = platform
       ? platform
       : PLATFORMS.includes(asPathPlatform)
-        ? asPathPlatform
-        : DEFAULT_PLATFORM;
+      ? asPathPlatform
+      : DEFAULT_PLATFORM;
   }
 
   const title = [
@@ -155,15 +124,6 @@ export const Layout = ({
 
   const description = `${pageDescription} AWS Amplify Documentation`;
 
-  const handleScroll = debounce((e) => {
-    const bodyScroll = e.target.documentElement.scrollTop;
-    if (bodyScroll > 20) {
-      document.body.classList.add('scrolled');
-    } else if (document.body.classList.contains('scrolled')) {
-      document.body.classList.remove('scrolled');
-    }
-  }, 20);
-
   const handleMenuToggle = () => {
     if (!menuOpen) {
       toggleMenuOpen(true);
@@ -176,6 +136,46 @@ export const Layout = ({
     }
   };
 
+  const handleScroll = debounce((e) => {
+    const bodyScroll = e.target.documentElement.scrollTop;
+    if (bodyScroll > 20) {
+      document.body.classList.add('scrolled');
+    } else if (document.body.classList.contains('scrolled')) {
+      document.body.classList.remove('scrolled');
+    }
+  }, 20);
+
+  useEffect(() => {
+    const headings: HeadingInterface[] = [];
+
+    const defaultHeadings = '.main > h2, .main > h3';
+    const cliCommandHeadings =
+      '.commands-list__command > h2, .commands-list__command > .commands-list__command__subcommands > h3';
+    const headingSelectors = [defaultHeadings, cliCommandHeadings];
+
+    const pageHeadings = document.querySelectorAll(headingSelectors.join(', '));
+
+    pageHeadings.forEach((node) => {
+      const { innerText, id, localName } = node as HTMLElement;
+      if (innerText && id && (localName == 'h2' || localName == 'h3')) {
+        headings.push({
+          linkText: innerText,
+          hash: id,
+          level: localName
+        });
+      }
+    });
+    setTocHeadings(headings);
+  }, [children, pageType]);
+
+  useEffect(() => {
+    if (pageType === 'home') {
+      document.addEventListener('scroll', handleScroll);
+      return () => {
+        document.removeEventListener('scroll', handleScroll);
+      };
+    }
+  });
   return (
     <>
       <Head>
@@ -190,7 +190,9 @@ export const Layout = ({
         <meta property="og:url" content={metaUrl} key="og:url" />
         <meta
           property="og:image"
-          content={`https://docs.amplify.aws/assets/${isGen2 ? 'gen2' : 'classic'}-og.png`}
+          content={`https://docs.amplify.aws/assets/${
+            isGen2 ? 'gen2' : 'classic'
+          }-og.png`}
           key="og:image"
         />
         <meta property="description" content={description} key="description" />
@@ -203,7 +205,9 @@ export const Layout = ({
         />
         <meta
           property="twitter:image"
-          content={`https://docs.amplify.aws/assets/${isGen2 ? 'gen2' : 'classic'}-og.png`}
+          content={`https://docs.amplify.aws/assets/${
+            isGen2 ? 'gen2' : 'classic'
+          }-og.png`}
           key="twitter:image"
         />
       </Head>
@@ -294,7 +298,10 @@ export const Layout = ({
                     )}
 
                     <div className="layout-sidebar-menu">
-                      <Menu currentPlatform={currentPlatform} path={asPathWithNoHash} />
+                      <Menu
+                        currentPlatform={currentPlatform}
+                        path={asPathWithNoHash}
+                      />
                       <div className="layout-sidebar-feedback">
                         <RepoActions router={router}></RepoActions>
                         <Feedback router={router}></Feedback>

diff --git a/src/components/LinkCards/LinkCards.tsx b/src/components/LinkCards/LinkCards.tsx
@@ -38,7 +38,7 @@ const LinkCards: React.FC<LinkCardsProps> = ({ platform }) => {
           href={linkCardPlatformData.roadmap}
           icon={() => <IconAmplify fontSize="2rem" />}
         >
-          What's next for Amplify
+          What&apos;s next for Amplify
         </LinkCard>
       ) : null}
       <LinkCard

diff --git a/src/components/MDXComponents/MDXCode.tsx b/src/components/MDXComponents/MDXCode.tsx
@@ -52,7 +52,7 @@ export const MDXCode = (props) => {
 
   React.useEffect(() => {
     setCode(addVersions(codeString));
-  }, []);
+  }, [codeString]);
 
   return (
     <Highlight theme={theme} code={code} language={language}>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,5 @@
		. "$(dirname -- "$0")/_/husky.sh"

		yarn spellcheck-diff

		yarn lint-staged