chore: DocsPage to TypeScript (#337)

.changeset/gentle-penguins-argue.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-docs-page': minor
+---
+
+This converts DocsPage to TypeScript. There are no new changes to the component API!

packages/docs-page/.npmignore

@@ -1,3 +1,3 @@
 docs.mdx
 props.js
-*.test.js
+*.test.*

packages/docs-page/components.ts

@@ -0,0 +1,13 @@
+import defaultMdxComponents from '@hashicorp/platform-docs-mdx'
+import { MDXProviderComponentsProp } from '@mdx-js/react'
+import { ReactElement } from 'react'
+
+export default function generateComponents(
+  productName: string,
+  additionalComponents: MDXProviderComponentsProp = {}
+): Record<string, (p: any) => ReactElement> {
+  return defaultMdxComponents({
+    product: productName,
+    additionalComponents,
+  })
+}

packages/docs-page/components/search-bar/index.jsx

@@ -1,11 +1,12 @@
 import Search from '@hashicorp/react-search'
 import useIsMobile from '../../use-is-mobile'
 
-export default function SearchBar({ product }) {
+export default function SearchBar({ product, className }) {
   const isMobile = useIsMobile()
 
   return (
     <Search
+      className={className}
       renderHitContent={({ hit, Highlight }) => (
         <>
           <span className="name">

packages/docs-page/index.test.js → packages/docs-page/index.test.tsx

@@ -1,7 +1,8 @@
-require('dotenv').config()
+import { config } from 'dotenv'
+config()
 import HashiHead from '@hashicorp/react-head'
 import { render, screen } from '@testing-library/react'
-import DocsPage from './'
+import DocsPage from '.'
 import props from './props'
 import { getTestValues } from 'swingset/testing'
 import renderPageMdx from './render-page-mdx'

packages/docs-page/index.js → packages/docs-page/index.tsx

@@ -1,16 +1,19 @@
-import { useEffect } from 'react'
+import { useEffect, FunctionComponent, ReactElement } from 'react'
 import classNames from 'classnames'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
 import Content from '@hashicorp/react-content'
 import DocsSidenav from '@hashicorp/react-docs-sidenav'
+import { NavData } from '@hashicorp/react-docs-sidenav/types'
 import HashiHead from '@hashicorp/react-head'
-import { MDXRemote } from 'next-mdx-remote'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { SearchProvider } from '@hashicorp/react-search'
 import {
   VersionSelect,
   getVersionFromPath,
 } from '@hashicorp/versioned-docs/client'
+import { MDXProviderComponentsProp } from '@mdx-js/react'
+
 import SearchBar from './components/search-bar'
 import VersionAlert from './components/version-alert'
 import generateComponents from './components'
@@ -19,7 +22,20 @@ import LoadingSkeleton from './components/loading-skeleton'
 import useIsMobile from './use-is-mobile'
 import s from './style.module.css'
 
-export function DocsPageWrapper({
+interface DocsPageWrapperProps {
+  canonicalUrl: string
+  description: string
+  navData: NavData
+  currentPath: string
+  pageTitle: string
+  baseRoute: string
+  githubFileUrl: string
+  product: { name: string; slug: string }
+  showEditPage: boolean
+  versions: { name: string; label: string }[]
+}
+
+const DocsPageWrapper: FunctionComponent<DocsPageWrapperProps> = ({
   canonicalUrl,
   children,
   description,
@@ -31,7 +47,7 @@ export function DocsPageWrapper({
   product: { name, slug },
   showEditPage = true,
   versions,
-}) {
+}) => {
   const isMobile = useIsMobile()
   const { asPath } = useRouter()
   const versionInPath = getVersionFromPath(asPath)
@@ -127,6 +143,25 @@ export function DocsPageWrapper({
   )
 }
 
+export interface DocsPageProps {
+  product: { name: string; slug: string }
+  baseRoute: string
+  showEditPage: boolean
+  additionalComponents: MDXProviderComponentsProp
+  staticProps: {
+    mdxSource: MDXRemoteSerializeResult
+    frontMatter: {
+      canonical_url: string
+      description: string
+      page_title: string
+    }
+    currentPath: string
+    navData: NavData
+    githubFileUrl: string
+    versions: { name: string; label: string }[]
+  }
+}
+
 export default function DocsPage({
   product,
   baseRoute,
@@ -140,7 +175,7 @@ export default function DocsPage({
     githubFileUrl,
     versions,
   },
-}) {
+}: DocsPageProps): ReactElement {
   const router = useRouter()
 
   // This component is written to work with next-mdx-remote -- here it hydrates the content

packages/docs-page/package.json

@@ -3,7 +3,7 @@
   "description": "Create a Hashicorp branded docs page in NextJS projects.",
   "version": "14.0.3",
   "author": "HashiCorp",
-  "contributors": ["Jeff Escalante"],
+  "contributors": ["Jeff Escalante", "Kevin Wang"],
   "dependencies": {
     "@hashicorp/platform-docs-mdx": "^0.1.1",
     "@hashicorp/platform-markdown-utils": "^0.1.3",
@@ -30,5 +30,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@types/mdx-js__react": "^1.5.4"
   }
 }