(deleted) Enforce types checking

package.json

@@ -65,14 +65,15 @@
     "test": "jest",
     "test-watch": "jest --watch",
     "test-ci": "npm run test -- --coverage",
-    "lint": "npm run lint:js && npm run lint:md",
+    "lint": "npm run type-check && npm run lint:js && npm run lint:md",
     "lint:js": "eslint .",
     "lint:md": "remark -qf .",
     "lint:fix": "npm run lint -- --fix",
     "serve": "npm run build && clear && gatsby serve",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook -o ./public/storybook",
-    "a11y": "./node_modules/pa11y/bin/pa11y.js localhost:8000"
+    "a11y": "./node_modules/pa11y/bin/pa11y.js localhost:8000",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",
@@ -82,7 +83,11 @@
     "@testing-library/react": "^11.0.4",
     "@types/classnames": "^2.3.1",
     "@types/jest": "^26.0.22",
+    "@types/color": "^3.0.1",
+    "@types/color-string": "^1.5.0",
+    "@types/dompurify": "^2.2.1",
     "@types/react-helmet": "6.1.1",
+    "@types/react-dom": "^17.0.3",
     "@types/throttle-debounce": "^2.1.0",
     "@typescript-eslint/eslint-plugin": "4.20.0",
     "@typescript-eslint/parser": "^4.20.0",

src/components/Article/__tests__/__snapshots__/article.test.tsx.snap

@@ -144,3 +144,118 @@ exports[`Article component renders correctly in blog mode 1`] = `
   </article>
 </div>
 `;
+
+exports[`Article component renders correctly in case html ref is null 1`] = `
+<div>
+  <article
+    class="article-reader"
+  >
+    <h1
+      class="article-reader__headline"
+    >
+      test-title
+    </h1>
+    <details
+      class="toc"
+    >
+      <summary>
+        <h6>
+          TABLE OF CONTENTS
+        </h6>
+      </summary>
+      <div>
+        test-description
+      </div>
+    </details>
+    <div>
+      <span>
+        Test html
+      </span>
+    </div>
+    <ul
+      class="list"
+    >
+      <h5>
+        Contributors
+      </h5>
+      <li>
+        <a
+          class="link"
+          href="https://github.com/test-user1"
+          rel="noopener noreferrer"
+          style="margin-left: 0px;"
+          target="_blank"
+          title="test-user1"
+        >
+          <img
+            alt="test-user1"
+            class="img"
+            src="https://github.com/test-user1.png?size=60"
+          />
+        </a>
+      </li>
+      <li>
+        <a
+          class="link"
+          href="https://github.com/test-user2"
+          rel="noopener noreferrer"
+          target="_blank"
+          title="test-user2"
+        >
+          <img
+            alt="test-user2"
+            class="img"
+            src="https://github.com/test-user2.png?size=60"
+          />
+        </a>
+      </li>
+    </ul>
+    <div
+      class="edit"
+    >
+      <a
+        class="link"
+        href="https://github.com/nodejs/nodejs.dev/edit/master/src/documentation/test-path"
+      >
+        <span>
+          Edit this page on GitHub
+        </span>
+
+        <svg
+          class="icon"
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 40 40"
+          width="1em"
+        >
+          <path
+            d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"
+          />
+        </svg>
+      </a>
+    </div>
+    <ul
+      class="pagination"
+    >
+      <li>
+        <a
+          class="link"
+          href="/learn/test-slug"
+          rel="prev"
+        >
+          ←   Prev
+        </a>
+      </li>
+      <li>
+        <a
+          class="link"
+          href="/learn/test-slug"
+          rel="next"
+        >
+          Next   →
+        </a>
+      </li>
+    </ul>
+  </article>
+</div>
+`;

src/components/Article/__tests__/article.test.tsx

@@ -70,6 +70,36 @@ describe('Article component', () => {
     expect(container).toMatchSnapshot();
   });
 
+  it('renders correctly in case html ref is null', () => {
+    const {
+      title,
+      description,
+      html,
+      next,
+      previous,
+      authors,
+      relativePath,
+    } = getArticleProps();
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    jest.spyOn(React, 'useRef').mockReturnValueOnce(null);
+
+    const { container } = render(
+      <Article
+        title={title}
+        tableOfContents={description}
+        html={html}
+        next={next}
+        previous={previous}
+        authors={authors}
+        relativePath={relativePath}
+      />
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
   it('renders correctly in blog mode', () => {
     const {
       title,
@@ -82,8 +112,9 @@ describe('Article component', () => {
 
     const authors = [
       {
-        id: 1,
+        id: '1',
         name: 'test-user',
+        url: '',
       },
     ];
 

src/components/Article/index.tsx

@@ -34,15 +34,11 @@ const Article = ({
   blog,
   date,
 }: Props): JSX.Element => {
-  const element = React.useRef<HTMLElement | null>(null);
-
-  const handleRef = (ref?: HTMLElement | null): void => {
-    if (ref) {
-      element.current = ref;
-    }
-  };
+  const element = React.useRef<HTMLDivElement>(null);
 
   React.useEffect((): (() => void) => {
+    const currentElementRef = element;
+
     if (window.history.state && window.history.state.articleScrollTo) {
       window.scrollTo({
         top: window.history.state.articleScrollTo,
@@ -88,14 +84,22 @@ const Article = ({
       }
     );
 
-    Array.from(element.current.children).forEach((children): void => {
-      observer.observe(children);
-    });
+    if (currentElementRef && currentElementRef.current) {
+      Array.from(currentElementRef.current.children).forEach(
+        (children): void => {
+          observer.observe(children);
+        }
+      );
+    }
 
     return (): void => {
-      Array.from(element.current.children).forEach((children): void => {
-        observer.unobserve(children);
-      });
+      if (currentElementRef && currentElementRef.current) {
+        Array.from(currentElementRef.current.children).forEach(
+          (children): void => {
+            observer.unobserve(children);
+          }
+        );
+      }
     };
   }, []);
 
@@ -109,7 +113,7 @@ const Article = ({
         <TOC heading="TABLE OF CONTENTS" tableOfContents={tableOfContents} />
       )}
       {/* eslint-disable-next-line react/no-danger */}
-      <div ref={handleRef} dangerouslySetInnerHTML={{ __html: html }} />
+      <div ref={element} dangerouslySetInnerHTML={{ __html: html }} />
       {!blog && <AuthorsList authors={authors as string[]} />}
       {!blog && <EditLink relativePath={relativePath} editPath={editPath} />}
       {!blog && <Pagination previous={previous} next={next} />}

src/components/Author/__tests__/author.test.tsx

@@ -5,14 +5,14 @@ import Author from '..';
 describe('Author component', () => {
   it('renders correctly', () => {
     const username = 'test-author';
-    const { container } = render(<Author username={username} size="60" />);
+    const { container } = render(
+      <Author index={1} username={username} size="60" />
+    );
     expect(container).toMatchSnapshot();
   });
 
   it('does not render without a username', () => {
-    const { container } = render(
-      <Author key={null} username={null} size={null} />
-    );
+    const { container } = render(<Author index={0} username="" size="" />);
     expect(container).toMatchSnapshot();
   });
 });

src/components/Pagination/__tests__/pagination.test.tsx

@@ -26,7 +26,7 @@ describe('Pagination component', () => {
 
   it('only renders links to pages that has a title', () => {
     const paginationInfo = createPaginationInfo();
-    const nextPaginationInfo = { slug: 'test-slug', title: null };
+    const nextPaginationInfo = { slug: 'test-slug', title: '' };
     const { container } = render(
       <Pagination next={nextPaginationInfo} previous={paginationInfo} />
     );

src/containers/Navigation/__tests__/__snapshots__/navigation.test.tsx.snap

@@ -3,6 +3,7 @@
 exports[`Navigation component renders correctly 1`] = `
 <div>
   <nav
+    aria-label=""
     class="side-nav"
   >
     <button

src/containers/Navigation/__tests__/navigation.test.tsx

@@ -23,6 +23,8 @@ describe('Navigation component', (): void => {
             },
           ],
         }}
+        previousSlug=""
+        label=""
       />
     );
     expect(container).toMatchSnapshot();

src/hooks/useMediaQuery.tsx

@@ -12,6 +12,8 @@ export function useMediaQuery(query: string): boolean | undefined {
       mq.addListener(handler);
       return (): void => mq.removeListener(handler);
     }
+
+    return undefined;
   }, [query]);
 
   return matches;

stories/Design.stories.tsx

@@ -54,7 +54,9 @@ export const TextStyles = (): JSX.Element => (
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const Colors = () => {
   const colorSquares = Object.keys(tokens).map(key => {
-    const bgIsDark = Color(colorString.get.rgb(tokens[key])).isDark();
+    const bgIsDark = Color(
+      colorString.get.rgb(tokens[key]) as number[]
+    ).isDark();
 
     return (
       // eslint-disable-next-line react/jsx-key