feat: convert packages to TypeScript

.changeset/orange-lions-worry.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-command-line-terminal': major
+---
+
+Add TypeScript types

.changeset/perfect-swans-hammer.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-docs-page': major
+---
+
+Add TypeScript types

.changeset/rich-bears-brake.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-enterprise-alert': major
+---
+
+Add TypeScript types

.changeset/stupid-items-fold.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-hashi-stack-menu': major
+---
+
+Add TypeScript types

.changeset/stupid-laws-hang.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-text-split': major
+---
+
+Add TypeScript types

.changeset/three-schools-refuse.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-sentinel-embedded': major
+---
+
+Add TypeScript types

.changeset/wet-papayas-argue.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-call-to-action': major
+---
+
+Add TypeScript types

.changeset/wild-panthers-nail.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-select-input': major
+---
+
+Add TypeScript types

packages/call-to-action/index.js → packages/call-to-action/index.tsx

@@ -1,4 +1,5 @@
 import Button from '@hashicorp/react-button'
+import type { Products } from '@hashicorp/platform-product-meta'
 import classNames from 'classnames'
 import variantCentered from './styles/variant-centered.module.css'
 import variantCompact from './styles/variant-compact.module.css'
@@ -10,6 +11,20 @@ const stylesDict = {
   links: variantLinks,
 }
 
+interface CallToActionProps {
+  heading?: string
+  content?: string
+  links?: {
+    type: 'inbound' | 'outbound' | 'anchor' | 'download'
+    text: string
+    url: string
+  }[]
+  variant?: 'centered' | 'compact' | 'links'
+  product: Products
+  theme?: 'light' | 'dark' | 'brand'
+  className?: string
+}
+
 function CallToAction({
   heading,
   content,
@@ -18,14 +33,16 @@ function CallToAction({
   product,
   theme = 'light',
   className,
-}) {
+}: CallToActionProps) {
   const s = stylesDict[variant]
   if (!heading && !content) {
     throw new Error('<CallToAction /> requires either heading or content')
   }
   const hasLinks = links && links.length > 0
   if (hasLinks && links.filter((l) => !l.text || !l.url).length > 0) {
-    throw new Error('<CallToAction /> `links` must have both a "text" and a "url" prop')
+    throw new Error(
+      '<CallToAction /> `links` must have both a "text" and a "url" prop'
+    )
   }
   return (
     <div className={classNames(s.root, s[`theme-${theme}`], className)}>

packages/call-to-action/package.json

@@ -7,6 +7,7 @@
     "Zach Shilton"
   ],
   "dependencies": {
+    "@hashicorp/platform-product-meta": "^0.1.0",
     "@hashicorp/react-button": "^6.0.4"
   },
   "peerDependencies": {

packages/docs-page/render-page-mdx.js → packages/docs-page/render-page-mdx.ts

@@ -1,17 +1,29 @@
 import path from 'path'
+import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import markdownDefaults from '@hashicorp/platform-markdown-utils'
+import type { ContentPluginsOptions } from '@hashicorp/platform-markdown-utils'
 import grayMatter from 'gray-matter'
 
+interface Options {
+  mdxContentHook?: (content: string) => string
+  remarkPlugins?: ContentPluginsOptions['addRemarkPlugins']
+  scope?: Record<string, unknown>
+  localPartialsDir?: string
+}
+
 async function renderPageMdx(
-  mdxFileString,
+  mdxFileString: string,
   {
     mdxContentHook = (c) => c,
     remarkPlugins = [],
     scope,
     localPartialsDir = 'content/partials',
-  } = {}
-) {
+  }: Options = {}
+): Promise<{
+  mdxSource: MDXRemoteSerializeResult
+  frontMatter: Record<string, unknown>
+}> {
   const { data: frontMatter, content: rawContent } = grayMatter(mdxFileString)
   const content = mdxContentHook(rawContent)
   const mdxSource = await serialize(content, {

packages/enterprise-alert/index.js → packages/enterprise-alert/index.tsx

@@ -1,8 +1,22 @@
 import useProductMeta from '@hashicorp/platform-product-meta'
-import s from './style.module.css'
+import type { Products } from '@hashicorp/platform-product-meta'
 import classNames from 'classnames'
+import type { ReactNode } from 'react'
+import s from './style.module.css'
+
+interface EnterpriseAlertProps {
+  product?: Products
+  inline?: boolean
+  className?: string
+  children?: ReactNode
+}
 
-function EnterpriseAlert({ product, inline, children, className }) {
+function EnterpriseAlert({
+  product,
+  inline,
+  children,
+  className,
+}: EnterpriseAlertProps) {
   const { name, slug, themeClass } = useProductMeta(product)
   return (
     <div

packages/hashi-stack-menu/index.jsx → packages/hashi-stack-menu/index.tsx

@@ -6,15 +6,19 @@ import NavItem from './nav-item'
 import slugify from 'slugify'
 import HASHI_STACK_MENU_ITEMS from './data'
 
-export default function HashiStackMenu({ onPanelChange }) {
+interface HashiStackMenuProps {
+  onPanelChange?: (activePanelKey: string) => void
+}
+
+export default function HashiStackMenu({ onPanelChange }: HashiStackMenuProps) {
   const [activePanelKey, setActivePanelKey] = useState('')
   const isActive = (a) => activePanelKey === a
 
   useEffect(() => {
     if (onPanelChange) {
       onPanelChange(activePanelKey)
     }
-  }, [activePanelKey])
+  }, [onPanelChange, activePanelKey])
 
   // Redirect to the branding page when someone right-clicks on the
   // HashiCorp logo

packages/select-input/index.js → packages/select-input/index.tsx

@@ -3,6 +3,16 @@ import classNames from 'classnames'
 import Downshift from 'downshift'
 import s from './style.module.css'
 
+interface SelectInputProps {
+  name: string
+  label?: string
+  defaultLabel?: string
+  options: { name: string; label: string }[]
+  value?: { name: string; label: string }
+  onValueChange: (name: string) => void
+  size: 'small' | 'medium'
+}
+
 /**
  * Select input field
  * @prop {String} name - input name attribute
@@ -23,9 +33,11 @@ export default function SelectInput({
   defaultLabel,
   options,
   value,
-  onValueChange = () => {},
+  onValueChange = () => {
+    /* do nothing */
+  },
   size = 'medium',
-}) {
+}: SelectInputProps) {
   const displayLabel = defaultLabel || 'Select an option'
   // Changes to the value prop will re-render this component by updating the key value.
   return (
@@ -58,7 +70,7 @@ export default function SelectInput({
                 {label}
               </label>
             ) : null}
-            <input type="hidden" name={name} value={inputValue} />
+            <input type="hidden" name={name} value={inputValue ?? undefined} />
             <button {...getInputProps()} onClick={toggleMenu} type="button">
               {selectedItem ? selectedItem.label : displayLabel}
               <span className={s.arrow} aria-hidden>

packages/sentinel-embedded/index.js → packages/sentinel-embedded/index.tsx

@@ -2,14 +2,29 @@ import s from '@hashicorp/sentinel-embedded/dist/bundle.module.css'
 import template from '@hashicorp/sentinel-embedded/src/components/playground-template'
 import '@hashicorp/sentinel-embedded'
 
+interface Data {
+  policy: string
+  mocks?: Record<string, string>
+  parameters?: Record<string, string>
+  globals?: Record<string, string>
+}
+
+interface SentinelEmbeddedProps {
+  exampleId?: string
+  exampleData?: Data
+  height: string
+  policyContent?: string
+  [key: string]: unknown
+}
+
 function SentinelEmbedded({
   exampleId,
   exampleData,
   height,
   policyContent,
   ...otherProps
-}) {
-  let example = undefined
+}: SentinelEmbeddedProps) {
+  let example: Data | string | undefined = undefined
   if (typeof exampleData != 'undefined') {
     example = exampleData
   } else if (policyContent) {
@@ -23,6 +38,8 @@ function SentinelEmbedded({
   }
 
   return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore: Augmenting JSX.IntrinsicAttributes doesn't seem to work
     <sentinel-playground
       {...otherProps}
       exampleId={exampleId}

packages/terminal/index.jsx → packages/terminal/index.tsx

@@ -1,14 +1,22 @@
 import { Fragment } from 'react'
 import useProductMeta from '@hashicorp/platform-product-meta'
+import type { Products } from '@hashicorp/platform-product-meta'
 import classNames from 'classnames'
 import s from './style.module.css'
 
+interface CommandLineTerminalProps {
+  lines: { color: 'navy' | 'gray' | 'white'; code: string; short?: boolean }[]
+  title?: string
+  noScroll?: boolean
+  product: Products
+}
+
 export default function CommandLineTerminal({
   lines,
   title,
   noScroll,
   product,
-}) {
+}: CommandLineTerminalProps) {
   const { themeClass } = useProductMeta(product)
   return (
     <div

packages/text-split/index.js → packages/text-split/index.tsx

@@ -1,7 +1,27 @@
+import classNames from 'classnames'
+import type { ReactNode } from 'react'
+import type { Products } from '@hashicorp/platform-product-meta'
 import ButtonGroup from './partials/button-group/index.js'
 import CheckboxList from './partials/checkbox-list/index.js'
-import classNames from 'classnames'
 import s from './style.module.css'
+
+export interface TextSplitProps {
+  heading?: string
+  content?: ReactNode
+  theme?: 'light' | 'dark'
+  product?: Products
+  checkboxes?: string[]
+  links?: {
+    type: 'inbound' | 'outbound' | 'anchor' | 'download'
+    text: string
+    url: string
+  }[]
+  linkStyle?: 'buttons' | 'links'
+  textSide?: 'left'
+  children?: ReactNode
+  className?: string
+}
+
 function TextSplit({
   heading,
   content,
@@ -13,7 +33,7 @@ function TextSplit({
   textSide,
   children,
   className,
-}) {
+}: TextSplitProps) {
   if (!heading && !content) {
     throw new Error('<TextSplit /> requires either heading or content')
   }
@@ -32,7 +52,7 @@ function TextSplit({
             </h2>
           )}
           {hasStringContent ? (
-            <ContentString contentString={content} theme={theme} />
+            <ContentString contentString={content} />
           ) : hasReactContent ? (
             content
           ) : null}