refactor(v2): add missing theme-classic types (#4385)

packages/docusaurus-theme-bootstrap/src/theme/MDXPage/index.tsx

@@ -9,8 +9,9 @@ import React from 'react';
 import Layout from '@theme/Layout';
 import {MDXProvider} from '@mdx-js/react';
 import MDXComponents from '@theme/MDXComponents';
+import type {Props} from '@theme/MDXPage';
 
-function MDXPage(props) {
+function MDXPage(props: Props): JSX.Element {
   const {content: MDXPageContent} = props;
   const {frontMatter, metadata} = MDXPageContent;
   const {title, description} = frontMatter;

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

@@ -8,9 +8,9 @@
 import React from 'react';
 import Link from '@docusaurus/Link';
 import Translate, {translate} from '@docusaurus/Translate';
-import type {Metadata} from '@theme/BlogListPage';
+import type {Props} from '@theme/BlogListPaginator';
 
-function BlogListPaginator(props: {readonly metadata: Metadata}): JSX.Element {
+function BlogListPaginator(props: Props): JSX.Element {
   const {metadata} = props;
   const {previousPage, nextPage} = metadata;
 

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

@@ -172,7 +172,7 @@ function DocSidebarItemLink({
   );
 }
 
-function DocSidebarItem(props) {
+function DocSidebarItem(props): JSX.Element {
   switch (props.item.type) {
     case 'category':
       return <DocSidebarItemCategory {...props} />;

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

@@ -12,7 +12,7 @@ import Link from '@docusaurus/Link';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styles from './styles.module.css';
-import ThemedImage from '@theme/ThemedImage';
+import ThemedImage, {Props as ThemedImageProps} from '@theme/ThemedImage';
 
 function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
   const toUrl = useBaseUrl(to);
@@ -34,7 +34,10 @@ function FooterLink({to, href, label, prependBaseUrlToHref, ...props}: any) {
   );
 }
 
-const FooterLogo = ({sources, alt}) => (
+const FooterLogo = ({
+  sources,
+  alt,
+}: Pick<ThemedImageProps, 'sources' | 'alt'>) => (
   <ThemedImage className="footer__logo" alt={alt} sources={sources} />
 );
 

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {Props} from '@theme/IconArrow';
+import type {Props} from '@theme/IconArrow';
 
 const IconArrow = (props: Props): JSX.Element => {
   return (

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

@@ -8,7 +8,7 @@
 import React from 'react';
 import clsx from 'clsx';
 
-import {Props} from '@theme/IconEdit';
+import type {Props} from '@theme/IconEdit';
 
 import styles from './styles.module.css';
 

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {Props} from '@theme/IconLanguage';
+import type {Props} from '@theme/IconLanguage';
 
 const IconLanguage = ({
   width = 20,

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

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {Props} from '@theme/IconMenu';
+import type {Props} from '@theme/IconMenu';
 
 const IconMenu = ({
   width = 30,

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

@@ -8,6 +8,7 @@
 import React from 'react';
 import styles from './styles.module.css';
 import Translate from '@docusaurus/Translate';
+import type {Props} from '@theme/LastUpdated';
 
 function LastUpdatedAtDate({
   lastUpdatedAt,
@@ -15,7 +16,7 @@ function LastUpdatedAtDate({
 }: {
   lastUpdatedAt: number;
   formattedLastUpdatedAt: string;
-}) {
+}): JSX.Element {
   return (
     <Translate
       id="theme.lastUpdated.atDate"
@@ -34,7 +35,11 @@ function LastUpdatedAtDate({
   );
 }
 
-function LastUpdatedByUser({lastUpdatedBy}: {lastUpdatedBy: string}) {
+function LastUpdatedByUser({
+  lastUpdatedBy,
+}: {
+  lastUpdatedBy: string;
+}): JSX.Element {
   return (
     <Translate
       id="theme.lastUpdated.byUser"
@@ -51,11 +56,7 @@ export default function LastUpdated({
   lastUpdatedAt,
   formattedLastUpdatedAt,
   lastUpdatedBy,
-}: {
+}: Props): JSX.Element {
-  lastUpdatedAt: number | undefined;
-  formattedLastUpdatedAt: string | undefined;
-  lastUpdatedBy: string | undefined;
-}) {
   return (
     <div className="col text--right">
       <em>

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

@@ -9,7 +9,7 @@ import React from 'react';
 import ThemeProvider from '@theme/ThemeProvider';
 import UserPreferencesProvider from '@theme/UserPreferencesProvider';
 import {DocsPreferredVersionContextProvider} from '@docusaurus/theme-common';
-import {Props} from '@theme/LayoutProviders';
+import type {Props} from '@theme/LayoutProviders';
 
 export default function LayoutProviders({children}: Props): JSX.Element {
   return (

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

@@ -8,12 +8,7 @@
 import React from 'react';
 
 import Head from '@docusaurus/Head';
-
+import type {Props} from '@theme/SearchMetadatas';
-type SearchTagMetaProps = {
-  locale?: string;
-  version?: string;
-  tag?: string;
-};
 
 // Note: we don't couple this to Algolia/DocSearch on purpose
 // We may want to support other search engine plugins too
@@ -22,7 +17,7 @@ export default function SearchMetadatas({
   locale,
   version,
   tag,
-}: SearchTagMetaProps): JSX.Element {
+}: Props): JSX.Element {
   return (
     <Head>
       {locale && <meta name="docusaurus_locale" content={`${locale}`} />}

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

@@ -10,20 +10,20 @@ import Translate from '@docusaurus/Translate';
 import {useLocation} from '@docusaurus/router';
 import styles from './styles.module.css';
 
-function programmaticFocus(el) {
+function programmaticFocus(el: HTMLElement) {
   el.setAttribute('tabindex', '-1');
   el.focus();
   el.removeAttribute('tabindex');
 }
 
 function SkipToContent(): JSX.Element {
-  const containerRef = useRef(null);
+  const containerRef = useRef<HTMLDivElement>(null);
   const location = useLocation();
 
   const handleSkip = (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault();
 
-    const targetElement =
+    const targetElement: HTMLElement | null =
       document.querySelector('main:first-of-type') ||
       document.querySelector('.main-wrapper');
 
@@ -34,7 +34,7 @@ function SkipToContent(): JSX.Element {
 
   useEffect(() => {
     if (!location.hash) {
-      programmaticFocus(containerRef.current);
+      programmaticFocus(containerRef.current!);
     }
   }, [location.pathname]);
 

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

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import clsx from 'clsx';
-import type {TOCProps} from '@theme/TOC';
+import type {TOCInlineProps} from '@theme/TOCInline';
 import styles from './styles.module.css';
 import {TOCItem} from '@docusaurus/types';
 
@@ -39,7 +39,7 @@ function HeadingsInline({
   );
 }
 
-function TOCInline({toc}: TOCProps): JSX.Element {
+function TOCInline({toc}: TOCInlineProps): JSX.Element {
   return (
     <div className={clsx(styles.tableOfContentsInline)}>
       <HeadingsInline toc={toc} />

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

@@ -14,7 +14,7 @@ import clsx from 'clsx';
 
 import styles from './styles.module.css';
 
-function isInViewport(element: HTMLElement) {
+function isInViewport(element: HTMLElement): boolean {
   const {top, left, bottom, right} = element.getBoundingClientRect();
   const {innerHeight, innerWidth} = window;
 
@@ -24,7 +24,7 @@ function isInViewport(element: HTMLElement) {
 const keys = {
   left: 37,
   right: 39,
-};
+} as const;
 
 function Tabs(props: Props): JSX.Element {
   const {lazy, block, defaultValue, values, groupId, className} = props;
@@ -79,14 +79,16 @@ function Tabs(props: Props): JSX.Element {
     let focusElement;
 
     switch (event.keyCode) {
-      case keys.right:
+      case keys.right: {
         const nextTab = tabRefs.indexOf(event.target) + 1;
         focusElement = tabRefs[nextTab] || tabRefs[0];
         break;
-      case keys.left:
+      }
+      case keys.left: {
         const prevTab = tabRefs.indexOf(event.target) - 1;
         focusElement = tabRefs[prevTab] || tabRefs[tabRefs.length - 1];
         break;
+      }
       default:
         break;
     }

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

@@ -5,26 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {ComponentProps} from 'react';
+import React, {CSSProperties} from 'react';
 import Toggle from 'react-toggle';
+import type {Props} from '@theme/Toggle';
 import {useThemeConfig} from '@docusaurus/theme-common';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
-const Dark = ({icon, style}) => (
+interface IconProps {
+  icon: string;
+  style: CSSProperties;
+}
+
+const Dark = ({icon, style}: IconProps): JSX.Element => (
   <span className={clsx(styles.toggle, styles.dark)} style={style}>
     {icon}
   </span>
 );
-const Light = ({icon, style}) => (
+const Light = ({icon, style}: IconProps): JSX.Element => (
   <span className={clsx(styles.toggle, styles.light)} style={style}>
     {icon}
   </span>
 );
 
-export default function (props: ComponentProps<typeof Toggle>): JSX.Element {
+export default function (props: Props): JSX.Element {
   const {
     colorMode: {
       switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle},

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

@@ -258,9 +258,43 @@ declare module '@theme/Layout' {
   export default Layout;
 }
 
+declare module '@theme/LayoutHead' {
+  import type {Props} from '@theme/Layout';
+
+  const LayoutHead: (props: Props) => JSX.Element;
+  export default LayoutHead;
+}
+
+declare module '@theme/SearchMetadatas' {
+  export type Props = {
+    locale?: string;
+    version?: string;
+    tag?: string;
+  };
+
+  const SearchMetadatas: (props: Props) => JSX.Element;
+  export default SearchMetadatas;
+}
+
+declare module '@theme/LastUpdated' {
+  export type Props = {
+    lastUpdatedAt?: number;
+    formattedLastUpdatedAt?: string;
+    lastUpdatedBy?: string;
+  };
+
+  const LastUpdated: (props: Props) => JSX.Element;
+  export default LastUpdated;
+}
+
+declare module '@theme/SkipToContent' {
+  const SkipToContent: () => JSX.Element;
+  export default SkipToContent;
+}
+
 declare module '@theme/MDXComponents' {
-  import {ComponentProps} from 'react';
+  import type {ComponentProps} from 'react';
-  import CodeBlock from '@theme/CodeBlock';
+  import type CodeBlock from '@theme/CodeBlock';
 
   export type MDXComponentsObject = {
     readonly code: typeof CodeBlock;
@@ -465,10 +499,12 @@ declare module '@theme/TOCInline' {
 }
 
 declare module '@theme/Toggle' {
-  import {ComponentProps} from 'react';
+  import type {ComponentProps} from 'react';
-  import ReactToggle from 'react-toggle';
+  import type ReactToggle from 'react-toggle';
 
-  const Toggle: (props: ComponentProps<typeof ReactToggle>) => JSX.Element;
+  export type Props = ComponentProps<typeof ReactToggle>;
+
+  const Toggle: (props: Props) => JSX.Element;
   export default Toggle;
 }
 

packages/docusaurus-theme-common/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx

@@ -133,7 +133,7 @@ export function DocsPreferredVersionContextProvider({
   children,
 }: {
   children: ReactNode;
-}) {
+}): JSX.Element {
   if (isDocsPluginEnabled) {
     return (
       <DocsPreferredVersionContextProviderUnsafe>
@@ -149,7 +149,7 @@ function DocsPreferredVersionContextProviderUnsafe({
   children,
 }: {
   children: ReactNode;
-}) {
+}): JSX.Element {
   const contextValue = useContextValue();
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }