feat: use react-design-system-components (#2412)

* feat: use react-design-system-components

* fix: bump to es2015

* chore(deps): bump react-design-system-components

next-env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="next" />
+/// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -37,7 +37,6 @@ const hideWaypointTipContent = {
 }
 
 module.exports = withHashicorp({
-	nextOptimizedImages: true,
 	css: false,
 })({
 	transpilePackages: [

package.json

@@ -80,9 +80,10 @@
 		"postcss-preset-env": "^6.7.0",
 		"react-test-renderer": "^18.2.0",
 		"rimraf": "^5.0.5",
+		"sass": "^1.75.0",
 		"simple-git-hooks": "^2.7.0",
 		"stylelint": "^13.8.0",
-		"typescript": "^5.3.2",
+		"typescript": "^5.4.5",
 		"vite-tsconfig-paths": "^4.3.2",
 		"vitest": "^1.4.0",
 		"yargs": "^17.6.2"
@@ -110,6 +111,8 @@
 		"@hashicorp/react-code-block": "^6.6.0",
 		"@hashicorp/react-consent-manager": "^9.2.0",
 		"@hashicorp/react-content": "^8.3.0",
+		"@hashicorp/react-design-system-components": "^0.0.0-nightly.0c364f3",
+		"@hashicorp/react-design-system-tokens": "^0.0.0-nightly.0c364f3",
 		"@hashicorp/react-docs-sidenav": "^9.1.0",
 		"@hashicorp/react-enterprise-alert": "^7.0.1",
 		"@hashicorp/react-error-view": "^0.2.0",

src/components/branded-card/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import { CSSProperties } from 'react'
-import Image from 'next/legacy/image'
+import Image, { type StaticImageData } from 'next/legacy/image'
 import { BrandedCardProps } from './types'
 import { ProductSlug } from 'types/products'
 // Note: images are static imports, seems to be a requirement of next/image
@@ -20,7 +20,7 @@ import patternVault from './img/vault.png'
 import patternWaypoint from './img/waypoint.png'
 import s from './branded-card.module.css'
 
-const PATTERN_IMG_MAP: Record<ProductSlug, string> = {
+const PATTERN_IMG_MAP: Record<ProductSlug, StaticImageData> = {
 	boundary: patternBoundary,
 	consul: patternConsul,
 	nomad: patternNomad,

src/pages/_app.tsx

@@ -39,6 +39,7 @@ import { AIFeatureToast } from 'components/chatbox/ai-feature-toast'
 
 // Local imports
 import './style.css'
+import '@hashicorp/react-design-system-components/src/design-system-components.scss'
 
 if (typeof window !== 'undefined' && process.env.AXE_ENABLED) {
 	import('react-dom').then((ReactDOM) => {

src/pages/style.css

@@ -12,12 +12,13 @@
 ***
 */
 @import '~@hashicorp/design-system-tokens/dist/devdot/css/tokens.css';
+@import '~@hashicorp/react-design-system-tokens/dist/css/tokens.css';
+@import '~@hashicorp/react-design-system-tokens/dist/css/dark/tokens.css';
 @import '~@hashicorp/design-system-tokens/dist/devdot/css/helpers/elevation.css';
 @import '~@hashicorp/design-system-tokens/dist/devdot/css/helpers/typography.css';
 
 /* Theme files */
 @import 'styles/themes/global.css';
-@import 'styles/themes/dark.css';
 
 /* Display 600 type style. HDS candidate, only in Dev Dot for now */
 @import 'styles/hds-typography-display-600.css';