TS migration and some visual tweaks (#923)

* refactor: bunch of stuff, upgrade algolia

* refactor: migrate many things to TS, some visual tweaks

* refactor: more TS refactoring

* refactor: completed migration

* fix: showcase images

* fix: releases sidebar and add withComponent back to "old APIs" section

* refactor: improve UX of sidebar menu

components/Anchor.js → components/Anchor.tsx

@@ -1,9 +1,41 @@
+import { Link as LinkIcon } from '@styled-icons/material';
 import styled, { css } from 'styled-components';
+import { mobile } from '../utils/media';
 import rem from '../utils/rem';
-
-import { Link as LinkIcon } from '@styled-icons/material';
 import { Header, SubHeader, TertiaryHeader } from './Layout';
-import { mobile } from '../utils/media';
+
+export interface AnchorProps {
+  id?: string;
+  level?: number;
+}
+
+export default function Anchor({ children, level, id, ...props }: React.PropsWithChildren<AnchorProps>) {
+  let override = undefined;
+
+  switch (level) {
+    case 3:
+      override = SubHeader;
+      break;
+    case 4:
+      override = TertiaryHeader;
+      break;
+    default:
+      override = Header;
+      break;
+  }
+
+  return (
+    <AnchorHeader {...props} as={override}>
+      <InvisibleAnchor id={id} />
+
+      {children}
+
+      <AnchorPrimitive href={`#${id}`} aria-label={id}>
+        <AnchorIcon />
+      </AnchorPrimitive>
+    </AnchorHeader>
+  );
+}
 
 const InvisibleAnchor = styled.div.attrs((/* props */) => ({
   'aria-hidden': true,
@@ -20,7 +52,7 @@ const InvisibleAnchor = styled.div.attrs((/* props */) => ({
   `)};
 `;
 
-const Anchor = styled.a`
+const AnchorPrimitive = styled.a`
   display: none;
   color: inherit;
   margin-left: ${rem(10)};
@@ -44,42 +76,12 @@ const AnchorHeader = styled.div`
 
   ${mobile(css`
     /* stylelint-disable-next-line */
-    ${Anchor} {
+    ${AnchorPrimitive} {
       display: inline-block;
     }
   `)}
 
-  &:hover ${Anchor} {
+  &:hover ${AnchorPrimitive} {
     display: inline-block;
   }
 `;
-
-const Link = ({ children, level, id, ...props }) => {
-  let override = undefined;
-
-  switch (level) {
-    case 3:
-      override = SubHeader;
-      break;
-    case 4:
-      override = TertiaryHeader;
-      break;
-    default:
-      override = Header;
-      break;
-  }
-
-  return (
-    <AnchorHeader {...props} as={override}>
-      <InvisibleAnchor id={id} />
-
-      {children}
-
-      <Anchor href={`#${id}`} aria-label={id}>
-        <AnchorIcon />
-      </Anchor>
-    </AnchorHeader>
-  );
-};
-
-export default Link;

components/BlmBanner.js → components/BlmBanner.tsx

@@ -1,24 +1,22 @@
-import React from 'react';
-
 import styled from 'styled-components';
 import rem from '../utils/rem';
 
+export const BlmBanner = () => {
+  return (
+    <Banner href="https://support.eji.org/give/153413/#!/donation/checkout">
+      #BlackLivesMatter ✊🏿 <span style={{ textDecoration: `underline` }}>Support the Equal Justice Initiative</span>
+    </Banner>
+  );
+};
+
 const Banner = styled.a`
   background: black;
   color: white;
   display: block;
-  text-align: center;
   font-size: ${rem(15)};
   font-weight: 500;
   justify-content: center;
   padding: 0.75rem 0.5rem;
+  text-align: center;
   width: 100%;
 `;
-
-export const BlmBanner = () => {
-  return (
-    <Banner href="https://support.eji.org/give/153413/#!/donation/checkout">
-      #BlackLivesMatter ✊🏿 <span style={{ textDecoration: `underline` }}>Support the Equal Justice Initiative</span>
-    </Banner>
-  );
-};

components/CaptureScroll.js → components/CaptureScroll.tsx

@@ -1,8 +1,7 @@
 import React from 'react'; // eslint-disable-line
-import { findDOMNode } from 'react-dom';
 
-let isMobile;
-let lastWheelTimestamp;
+let isMobile: boolean;
+let lastWheelTimestamp: number;
 
 if (typeof window !== 'undefined' && window.matchMedia) {
   isMobile = window.matchMedia(`(max-width: ${1000 / 16}em)`).matches;
@@ -14,18 +13,22 @@ if (typeof window !== 'undefined' && window.matchMedia) {
   }
 }
 
-const captureScroll = Component => {
+export default function captureScroll<T extends React.ComponentType>(Component: T) {
   if (isMobile) {
     return Component;
   }
 
-  class CaptureScroll extends React.Component {
-    onScroll = evt => {
+  return function CaptureScroll(props: React.ComponentProps<T>) {
+    const ref = React.useRef<HTMLElement>(null);
+
+    const handleScroll = React.useCallback((evt: Event & { deltaY: number }) => {
+      if (!ref.current) return;
+
       // Don't access window wheel listener
       evt.stopImmediatePropagation();
 
       const { timeStamp, deltaY } = evt;
-      const { offsetHeight, scrollHeight, scrollTop } = this.node;
+      const { offsetHeight, scrollHeight, scrollTop } = ref.current;
 
       // If the window is being scrolled, don't scroll the captured scroll area
       if (timeStamp - lastWheelTimestamp <= 400) {
@@ -52,38 +55,33 @@ const captureScroll = Component => {
 
       // If we're overshooting, we need to set the maximum available position
       if (isReachingTop || isReachingBottom) {
-        this.node.scrollTop = isReachingTop ? 0 : maxScrollTop;
+        ref.current!.scrollTop = isReachingTop ? 0 : maxScrollTop;
       }
-    };
+    }, []);
 
-    onResize = () => {
+    const handleResize = React.useCallback(() => {
       isMobile = window.matchMedia(`(max-width: ${1000 / 16}em)`).matches;
+
       if (isMobile) {
-        this.node.removeEventListener('wheel', this.onScroll);
+        ref.current?.removeEventListener('wheel', handleScroll);
       } else {
-        this.node.addEventListener('wheel', this.onScroll);
+        ref.current?.addEventListener('wheel', handleScroll);
       }
-    };
 
-    componentDidMount() {
-      // eslint-disable-next-line react/no-find-dom-node
-      this.node = findDOMNode(this.ref);
+      return () => ref.current?.removeEventListener('wheel', handleScroll);
+    }, []);
 
-      this.node.addEventListener('wheel', this.onScroll);
-      window.addEventListener('resize', this.onResize);
-    }
+    React.useEffect(() => {
+      ref.current?.addEventListener('wheel', handleScroll);
+      window.addEventListener('resize', handleResize);
 
-    componentWillUnmount() {
-      this.node.removeEventListener('wheel', this.onScroll);
-      window.removeEventListener('resize', this.onResize);
-    }
+      return () => {
+        ref.current?.removeEventListener('wheel', handleScroll);
+        window.removeEventListener('resize', handleResize);
+      };
+    }, []);
 
-    render() {
-      return <Component {...this.props} ref={x => (this.ref = x)} />;
-    }
-  }
-
-  return CaptureScroll;
-};
-
-export default captureScroll;
+    // @ts-expect-error don't think there's a way to infer the proper ref type ahead of time
+    return <Component {...props} ref={ref} />;
+  };
+}

components/Code.js → components/Code.tsx

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
 import { monospace } from '../utils/fonts';
 
-const Code = styled.span`
+const Code = styled.code`
+  border-radius: 3px;
+  background: rgba(10, 10, 10, 0.1);
   display: inline-block;
   font-family: ${monospace};
   font-size: 90%;
-  line-height: 1.4;
+  line-height: 1;
+  padding: 0.3em 0.25em;
   text-decoration: inherit;
   vertical-align: baseline;
 `;

components/CodeBlock.js → components/CodeBlock.tsx

@@ -1,18 +1,22 @@
 import React from 'react';
-import { CodeBlock as Code } from 'react-live-runner';
+import { Language, CodeBlock as RLR, CodeBlockProps as RLRProps } from 'react-live-runner';
 import styled from 'styled-components';
 import { darkGrey } from '../utils/colors';
 import { monospace } from '../utils/fonts';
 import rem from '../utils/rem';
 import { Note } from './Note';
 
-const CodeBlock = styled(({ code, ...rest }) => {
-  const language = (rest.language || 'clike').toLowerCase().trim();
+export interface CodeBlockProps extends RLRProps {
+  code: string;
+}
+
+const CodeBlock = styled(({ code, ...rest }: CodeBlockProps) => {
+  const language = (rest.language || 'clike').toLowerCase().trim() as Language;
 
   return (
-    <Code {...rest} language={language}>
+    <RLR {...rest} language={language}>
       {code}
-    </Code>
+    </RLR>
   );
 })`
   background: ${darkGrey};
@@ -24,6 +28,7 @@ const CodeBlock = styled(({ code, ...rest }) => {
   margin: ${rem(35)} 0;
   overflow-x: hidden;
   white-space: pre-wrap;
+  width: 100%;
 
   ${Note} & {
     margin: ${rem(20)} 0;