feat: remove @reach/auto-id (#938)

.changeset/good-icons-argue.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-form-fields': minor
+---
+
+Replace @reach/auto-id with React.useId

.changeset/tasty-parrots-battle.md

@@ -0,0 +1,5 @@
+---
+'@hashicorp/react-docs-page': minor
+---
+
+Update TypeScript types to be compatible with React v18

package.json

@@ -41,7 +41,7 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/react": "^17.0.38",
+    "@types/react": "^18.0.37",
     "dotenv": "^14.3.0",
     "eslint": "^7.32.0",
     "identity-obj-proxy": "^3.0.0",

packages/docs-page/components.ts

@@ -5,12 +5,11 @@
 
 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/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { useEffect, FunctionComponent, ReactElement } from 'react'
+import { useEffect, ReactElement, type ReactNode } from 'react'
 import classNames from 'classnames'
 import { useRouter } from 'next/router'
 import Head from 'next/head'
@@ -32,6 +32,7 @@ import type { VersionSelectItem } from './server/loaders/remote-content'
 
 interface DocsPageInnerProps {
   canonicalUrl: string | null
+  children: ReactNode
   description: string
   navData: NavData
   currentPath: string
@@ -48,7 +49,7 @@ interface DocsPageInnerProps {
   projectName?: string
 }
 
-export const DocsPageInner: FunctionComponent<DocsPageInnerProps> = ({
+export const DocsPageInner = ({
   canonicalUrl,
   children,
   description,
@@ -64,7 +65,7 @@ export const DocsPageInner: FunctionComponent<DocsPageInnerProps> = ({
   algoliaConfig,
   optInBanner,
   projectName,
-}) => {
+}: DocsPageInnerProps) => {
   const isMobile = useIsMobile()
   const { asPath } = useRouter()
   const versionInPath = getVersionFromPath(asPath)

packages/form-fields/package.json

@@ -3,7 +3,6 @@
   "version": "0.1.2",
   "dependencies": {
     "@hashicorp/flight-icons": "^2.5.0",
-    "@reach/auto-id": "^0.18.0",
     "clsx": "^1.2.1"
   }
 }

packages/form-fields/partials/choice-group/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { useId } from '@reach/auto-id'
+import { useId } from 'react'
 import Radio from '../../radio'
 import Checkbox from '../../checkbox'
 import Label from '../label'

packages/form-fields/partials/radio-checkbox/index.tsx

@@ -3,8 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import React, { ReactNode, ComponentProps } from 'react'
-import { useId } from '@reach/auto-id'
+import React, { ReactNode, ComponentProps, useId } from 'react'
 import s from './style.module.css'
 import clsx from 'clsx'
 

packages/form-fields/select/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import classNames from 'classnames'
-import { useId } from '@reach/auto-id'
+import { useId } from 'react'
 import s from './style.module.css'
 import type { HTMLProps } from 'react'
 import Label from '../partials/label'

packages/form-fields/text/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import classNames from 'classnames'
-import { useId } from '@reach/auto-id'
+import { useId } from 'react'
 import s from './style.module.css'
 import type { HTMLProps } from 'react'
 import Label from '../partials/label'

packages/form-fields/textarea/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import clsx from 'clsx'
-import { useId } from '@reach/auto-id'
+import { useId } from 'react'
 import s from './style.module.css'
 import { HTMLProps } from 'react'
 import Label from '../partials/label'

swingset-extensions/playground/index.tsx

@@ -7,10 +7,10 @@ import {
   useRef,
   useState,
   Children,
-  FC,
   ElementType,
   ReactElement,
   useEffect,
+  type ReactNode,
 } from 'react'
 import { ErrorBoundary } from 'react-error-boundary'
 import classNames from 'classnames'
@@ -50,6 +50,7 @@ interface PlaygroundProps {
    * WARNING: only one Playground per page can have its state persisted to the URL
    */
   persistStateToUrl?: boolean
+  children: ReactNode
 }
 
 /**
@@ -197,12 +198,12 @@ const PlaygroundInner = ({ layout, persistStateToUrl }) => {
   )
 }
 
-const Playground: FC<PlaygroundProps> = ({
+const Playground = ({
   children,
   title,
   layout,
   persistStateToUrl,
-}) => {
+}: PlaygroundProps) => {
   const [codeChild, styleChild] = Children.toArray(children)
 
   const initialCode =