diff --git a/packages/docusaurus-theme-bootstrap/src/theme/MDXPage/index.tsx b/packages/docusaurus-theme-bootstrap/src/theme/MDXPage/index.tsx index e58723a01a..de2406baa9 100644 --- a/packages/docusaurus-theme-bootstrap/src/theme/MDXPage/index.tsx +++ b/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; diff --git a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx index 5e46342d63..3114bc0060 100644 --- a/packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.tsx +++ b/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; diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx index c78a6a9911..8a310d2e17 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx +++ b/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 ; diff --git a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx b/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx index 22713c1fe4..0c1ebe6749 100644 --- a/packages/docusaurus-theme-classic/src/theme/Footer/index.tsx +++ b/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) => ( ); diff --git a/packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx index 058a7ca185..e19eab27e8 100644 --- a/packages/docusaurus-theme-classic/src/theme/IconArrow/index.tsx +++ b/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 ( diff --git a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx index e38d7d119d..b5f7bfbba0 100644 --- a/packages/docusaurus-theme-classic/src/theme/IconEdit/index.tsx +++ b/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'; diff --git a/packages/docusaurus-theme-classic/src/theme/IconLanguage/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconLanguage/index.tsx index 13e4f940a4..5c7c212f80 100644 --- a/packages/docusaurus-theme-classic/src/theme/IconLanguage/index.tsx +++ b/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, diff --git a/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx b/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx index 407325570f..6f6e324186 100644 --- a/packages/docusaurus-theme-classic/src/theme/IconMenu/index.tsx +++ b/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, diff --git a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx b/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx index bd77e088b7..210259b9e2 100644 --- a/packages/docusaurus-theme-classic/src/theme/LastUpdated/index.tsx +++ b/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 ( diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx index 3bb0fa48da..7ebc7d29cc 100644 --- a/packages/docusaurus-theme-classic/src/theme/LayoutProviders/index.tsx +++ b/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 ( diff --git a/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx b/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx index bb66c40f51..a3986de708 100644 --- a/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx +++ b/packages/docusaurus-theme-classic/src/theme/SearchMetadatas/index.tsx @@ -8,12 +8,7 @@ import React from 'react'; import Head from '@docusaurus/Head'; - -type SearchTagMetaProps = { - locale?: string; - version?: string; - tag?: string; -}; +import type {Props} from '@theme/SearchMetadatas'; // 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 ( {locale && } diff --git a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx b/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx index 5c830fd042..e98db76d26 100644 --- a/packages/docusaurus-theme-classic/src/theme/SkipToContent/index.tsx +++ b/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(null); const location = useLocation(); const handleSkip = (e: React.MouseEvent) => { 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]); diff --git a/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx b/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx index 152c076b66..1753f0d4c5 100644 --- a/packages/docusaurus-theme-classic/src/theme/TOCInline/index.tsx +++ b/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 (
diff --git a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx b/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx index 9e1a1414ac..45396412d0 100644 --- a/packages/docusaurus-theme-classic/src/theme/Tabs/index.tsx +++ b/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; } diff --git a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx b/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx index 06e119fdec..48cbac92f4 100644 --- a/packages/docusaurus-theme-classic/src/theme/Toggle/index.tsx +++ b/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 => ( {icon} ); -const Light = ({icon, style}) => ( +const Light = ({icon, style}: IconProps): JSX.Element => ( {icon} ); -export default function (props: ComponentProps): JSX.Element { +export default function (props: Props): JSX.Element { const { colorMode: { switchConfig: {darkIcon, darkIconStyle, lightIcon, lightIconStyle}, diff --git a/packages/docusaurus-theme-classic/src/types.d.ts b/packages/docusaurus-theme-classic/src/types.d.ts index ba860b2046..db097f87d7 100644 --- a/packages/docusaurus-theme-classic/src/types.d.ts +++ b/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 CodeBlock from '@theme/CodeBlock'; + import type {ComponentProps} from 'react'; + 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 ReactToggle from 'react-toggle'; + import type {ComponentProps} from 'react'; + import type ReactToggle from 'react-toggle'; - const Toggle: (props: ComponentProps) => JSX.Element; + export type Props = ComponentProps; + + const Toggle: (props: Props) => JSX.Element; export default Toggle; } diff --git a/packages/docusaurus-theme-common/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx b/packages/docusaurus-theme-common/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx index f34215e498..5cf52bd4ce 100644 --- a/packages/docusaurus-theme-common/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx +++ b/packages/docusaurus-theme-common/src/utils/docsPreferredVersion/DocsPreferredVersionProvider.tsx @@ -133,7 +133,7 @@ export function DocsPreferredVersionContextProvider({ children, }: { children: ReactNode; -}) { +}): JSX.Element { if (isDocsPluginEnabled) { return ( @@ -149,7 +149,7 @@ function DocsPreferredVersionContextProviderUnsafe({ children, }: { children: ReactNode; -}) { +}): JSX.Element { const contextValue = useContextValue(); return {children}; }