refactor: reduce ESLint warnings / better typing (#5242)

* Fix code block children type

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add return type

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Add types

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix return types

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix details type

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

* Fix type

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>

packages/docusaurus-theme-classic/package.json

@@ -50,7 +50,8 @@
     "rtlcss": "^3.1.2"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.4"
+    "@docusaurus/module-type-aliases": "2.0.0-beta.4",
+    "@types/parse-numeric-range": "^0.0.1"
   },
   "peerDependencies": {
     "react": "^16.8.4 || ^17.0.0",

packages/docusaurus-theme-classic/src/theme/BackToTopButton/index.tsx

@@ -39,11 +39,9 @@ function smoothScrollTopPolyfill(): CancelScrollTop {
   }
   rafRecursion();
 
-  return () => {
+  // Break the recursion
-    // Break the recursion
+  // Prevents the user from "fighting" against that recursion producing a weird UX
-    // Prevents the user from "fighting" against that recursion producing a weird UX
+  return () => raf && cancelAnimationFrame(raf);
-    raf && cancelAnimationFrame(raf);
-  };
 }
 
 type UseSmoothScrollTopReturn = {

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -62,7 +62,7 @@ const getHighlightDirectiveRegex = (
   return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
 };
 // select comment styles based on language
-const highlightDirectiveRegex = (lang) => {
+const highlightDirectiveRegex = (lang: string) => {
   switch (lang) {
     case 'js':
     case 'javascript':
@@ -119,11 +119,12 @@ export default function CodeBlock({
   const prismTheme = usePrismTheme();
 
   // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
-  const content = Array.isArray(children) ? children.join('') : children;
+  const content = Array.isArray(children)
+    ? children.join('')
+    : (children as string);
 
   if (metastring && highlightLinesRangeRegex.test(metastring)) {
     // Tested above
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const highlightLinesRange = metastring.match(highlightLinesRangeRegex)![1];
     highlightLines = rangeParser(highlightLinesRange).filter((n) => n > 0);
   }
@@ -145,7 +146,7 @@ export default function CodeBlock({
     const directiveRegex = highlightDirectiveRegex(language);
     // go through line by line
     const lines = content.replace(/\n$/, '').split('\n');
-    let blockStart;
+    let blockStart: number;
     // loop through lines
     for (let index = 0; index < lines.length; ) {
       const line = lines[index];
@@ -169,7 +170,7 @@ export default function CodeBlock({
             break;
 
           case 'highlight-end':
-            range += `${blockStart}-${lineNumber - 1},`;
+            range += `${blockStart!}-${lineNumber - 1},`;
             break;
 
           default:

packages/docusaurus-theme-classic/src/theme/MDXComponents/index.tsx

@@ -30,10 +30,10 @@ const MDXComponents: MDXComponentsObject = {
   },
   a: (props) => <Link {...props} />,
   pre: (props) => {
-    const {children} = props as {children: any};
+    const {children} = props;
 
     // See comment for `code` above
-    if (isValidElement(children?.props?.children)) {
+    if (isValidElement(children) && isValidElement(children?.props?.children)) {
       return children?.props.children;
     }
 
@@ -46,11 +46,11 @@ const MDXComponents: MDXComponentsObject = {
     );
   },
   details: (props): JSX.Element => {
-    const items = React.Children.toArray(props.children);
+    const items = React.Children.toArray(props.children) as ReactElement[];
     // Split summary item from the rest to pass it as a separate prop to the Detais theme component
-    const summary: ReactElement<
+    const summary: ReactElement<ComponentProps<'summary'>> = items.find(
-      ComponentProps<'summary'>
+      (item) => item?.props?.mdxType === 'summary',
-    > = (items as any[]).find((item) => item?.props?.mdxType === 'summary');
+    )!;
     const children = <>{items.filter((item) => item !== summary)}</>;
 
     return (

packages/docusaurus-theme-classic/src/theme/TOC/index.tsx

@@ -16,7 +16,10 @@ const ACTIVE_LINK_CLASS_NAME = 'table-of-contents__link--active';
 const TOP_OFFSET = 100;
 
 /* eslint-disable jsx-a11y/control-has-associated-label */
-export function TOCHeadings({toc, isChild}: TOCHeadingsProps) {
+export function TOCHeadings({
+  toc,
+  isChild,
+}: TOCHeadingsProps): JSX.Element | null {
   if (!toc.length) {
     return null;
   }

packages/docusaurus-theme-classic/src/theme/TOCCollapsible/index.tsx

@@ -13,7 +13,10 @@ import styles from './styles.module.css';
 import {TOCHeadings} from '@theme/TOC';
 import type {TOCCollapsibleProps} from '@theme/TOCCollapsible';
 
-export default function TOCCollapsible({toc, className}: TOCCollapsibleProps) {
+export default function TOCCollapsible({
+  toc,
+  className,
+}: TOCCollapsibleProps): JSX.Element {
   const {collapsed, toggleCollapsed} = useCollapsible({
     initialState: true,
   });

packages/docusaurus-theme-classic/src/types.d.ts

@@ -65,8 +65,10 @@ declare module '@theme/BlogLayout' {
 }
 
 declare module '@theme/CodeBlock' {
+  import {ReactElement} from 'react';
+
   export type Props = {
-    readonly children: string;
+    readonly children: string | ReactElement;
     readonly className?: string;
     readonly metastring?: string;
     readonly title?: string;

packages/docusaurus-theme-common/src/utils/announcementBarUtils.tsx

@@ -95,7 +95,11 @@ const useAnnouncementBarContextValue = (): AnnouncementBarAPI => {
 
 const AnnouncementBarContext = createContext<AnnouncementBarAPI | null>(null);
 
-export const AnnouncementBarProvider = ({children}: {children: ReactNode}) => {
+export const AnnouncementBarProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}): JSX.Element => {
   const value = useAnnouncementBarContextValue();
   return (
     <AnnouncementBarContext.Provider value={value}>

yarn.lock

@@ -4277,6 +4277,11 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
+"@types/parse-numeric-range@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@types/parse-numeric-range/-/parse-numeric-range-0.0.1.tgz#1a807487565a753f486cb3ee4b2145937d49759d"
+  integrity sha512-nI3rPGKk8BxedokP2VilnW5JyZHYNjGCUDsAZ2JQgISgDflHNUO0wXMfGYP8CkihrKYDm5tilD52XfGhO/ZFCA==
+
 "@types/parse5@^5.0.0":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"