feat(v2): Support swizzling TypeScript components (#2671)

* feat(v2): Support swizzling TypeScript components

* Add tsc --noEmit to tsc script in theme-classic

Now everything can pass the type checker! (although still a lot of any)

* Add tsconfig and types.d.ts to website

Improve developer experience.

As an example, I converted NotFound to tsx

* Apply type annotation suggestions

* Do not fallback to `getThemePath` if getTypeScriptThemePath is undefined

* Fix tsc

* Add module declaration for @theme-original/*

* Move babel cli to root package.json

packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {useState, useCallback, useEffect} from 'react';
+import {useLocation} from '@docusaurus/router';
+import useLocationHash from '@theme/hooks/useLocationHash';
+import useScrollPosition from '@theme/hooks/useScrollPosition';
+
+const useHideableNavbar = (hideOnScroll: boolean) => {
+  const [isNavbarVisible, setIsNavbarVisible] = useState(true);
+  const [isFocusedAnchor, setIsFocusedAnchor] = useState(false);
+  const [lastScrollTop, setLastScrollTop] = useState(0);
+  const [navbarHeight, setNavbarHeight] = useState(0);
+  const navbarRef = useCallback((node) => {
+    if (node !== null) {
+      setNavbarHeight(node.getBoundingClientRect().height);
+    }
+  }, []);
+  const location = useLocation();
+  const [hash, setHash] = useLocationHash(location.hash);
+
+  useScrollPosition(
+    ({scrollY: scrollTop}) => {
+      if (!hideOnScroll) {
+        return;
+      }
+
+      if (scrollTop === 0) {
+        setIsNavbarVisible(true);
+      }
+
+      if (scrollTop < navbarHeight) {
+        return;
+      }
+
+      if (isFocusedAnchor) {
+        setIsFocusedAnchor(false);
+        setIsNavbarVisible(false);
+        setLastScrollTop(scrollTop);
+        return;
+      }
+
+      const documentHeight =
+        document.documentElement.scrollHeight - navbarHeight;
+      const windowHeight = window.innerHeight;
+
+      if (lastScrollTop && scrollTop >= lastScrollTop) {
+        setIsNavbarVisible(false);
+      } else if (scrollTop + windowHeight < documentHeight) {
+        setIsNavbarVisible(true);
+      }
+
+      setLastScrollTop(scrollTop);
+    },
+    [lastScrollTop, navbarHeight],
+  );
+
+  useEffect(() => {
+    if (!hideOnScroll) {
+      return;
+    }
+
+    setIsNavbarVisible(true);
+    setHash(location.hash);
+  }, [location]);
+
+  useEffect(() => {
+    if (!hideOnScroll) {
+      return;
+    }
+
+    if (!hash) {
+      return;
+    }
+
+    setIsFocusedAnchor(true);
+  }, [hash]);
+
+  return {
+    navbarRef,
+    isNavbarVisible,
+  };
+};
+
+export default useHideableNavbar;