@hashicorp/react-components 0.0.0-nightly.4494e70 → 0.0.0-nightly.5ff9a44

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hashicorp/react-components",
-	"version": "0.0.0-nightly.4494e70",
+	"version": "0.0.0-nightly.5ff9a44",
 	"main": "src/index.ts",
 	"scripts": {
 		"lint": "next-hashicorp lint",
@@ -13,8 +13,11 @@
 		"@hashicorp/platform-util": "^0.2.0",
 		"@hashicorp/react-design-system-components": "*",
 		"@hashicorp/web-mktg-logos": "*",
-		"@radix-ui/react-visually-hidden": "^1.0.3",
+		"@radix-ui/react-navigation-menu": "^1.2.0",
+		"@radix-ui/react-visually-hidden": "^1.1.0",
+		"@vercel/analytics": "^1.3.1",
 		"@vercel/fetch": "^7.0.0",
+		"@vercel/stega": "^0.1.2",
 		"classnames": "^2.3.2",
 		"js-cookie": "^3.0.5",
 		"moize": "^6.1.3",

package/src/components/marketo-form/utils.ts

@@ -426,6 +426,10 @@ export const resolverErrors = (
  * @returns MarketoFormField[] with columnSplit property set
  */
 export function setFieldsColumnSplit(fieldsArr: MarketoFormField[]) {
+	if (!fieldsArr) {
+		return []
+	}
+
 	return fieldsArr.map((f) => {
 		const columnSplit = getFieldColumnSplit(fieldsArr, f)
 		return { ...f, columnSplit }

package/src/components/nav-panel/components/link-list/index.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link'
-import { parseUrl } from '../../../../../../../apps/www/lib/parseUrl'
-import { v } from '@web/cms'
+import { parseUrl } from '../../../../lib/parse-url'
+import { v } from '../../../../lib/v'
 import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'

package/src/components/nav-panel/components/promo/index.tsx

@@ -1,9 +1,9 @@
 import { useCallback } from 'react'
-import { trackNavClickEvent } from '../../../../../../../apps/www/layouts/standard/nav'
-import { v } from '@web/cms'
-import Link from 'next/link'
 import classNames from 'classnames'
-import { parseUrl } from '../../../../../../../apps/www/lib/parseUrl'
+import { v } from '../../../../lib/v'
+import Link from 'next/link'
+import { parseUrl } from '../../../../lib/parse-url'
+import { trackNavClickEvent } from '../../../../lib/track-nav-click-event'
 import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'

package/src/components/nav-panel/product-panel/index.tsx

@@ -4,8 +4,8 @@ import Promo, { type PromoProps } from '../components/promo'
 import { Products } from '@hashicorp/platform-product-meta'
 import FlightIcon from '@hashicorp/react-design-system-components/src/components/flight-icon'
 import { TextPlus } from '@hashicorp/react-design-system-components/src/components/text'
-import { parseUrl } from '../../../../../../apps/www/lib/parseUrl'
-import { trackNavClickEvent } from '../../../../../../apps/www/layouts/standard/nav'
+import { parseUrl } from '../../../lib/parse-url'
+import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
 import * as NavigationMenu from '@radix-ui/react-navigation-menu'
 import s from './style.module.css'
 

package/src/components/nav-panel/standard-panel/index.tsx

@@ -1,4 +1,4 @@
-import { trackNavClickEvent } from '../../../../../../apps/www/layouts/standard/nav'
+import { trackNavClickEvent } from '../../../lib/track-nav-click-event'
 import * as NavPanel from '../components/panel'
 import LinkList, { type LinkListProps } from '../components/link-list'
 import Promo, { type PromoProps } from '../components/promo'

package/src/components/subnav/partials/MenuItemsOverflow/index.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react'
-import { v } from '@web/cms'
+import { v } from '../../../../lib/v'
 import Link from 'next/link'
 import type { Products } from '@hashicorp/platform-product-meta'
 import CtaLinks, { type CtaLinkProps } from '../CtaLinks'

package/src/components/subnav/partials/TitleLink/index.tsx

@@ -7,7 +7,7 @@ import { forwardRef } from 'react'
 import { camelCase } from 'camel-case'
 import Link from 'next/link'
 import Image from 'next/image'
-import { v } from '@web/cms'
+import { v } from '../../../../lib/v'
 import classNames from 'classnames'
 import * as CommunityProductLogosOnDark from './mktg-logos/all-community-product-logos_on-dark'
 import * as CommunityProductLogosOnLight from './mktg-logos/all-community-product-logos_on-light'

package/src/lib/parse-url/index.test.ts

@@ -0,0 +1,30 @@
+import { parseUrl } from '.'
+
+describe('parseUrl', () => {
+	it('detects hashicorp.com URLs as internal', () => {
+		const url = parseUrl('https://hashicorp.com/example')
+		expect(url.href).toBe('/example')
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('detects URLs not containing hashicorp.com as external', () => {
+		const externalUrl = 'https://google.com/example'
+		const url = parseUrl(externalUrl)
+		expect(url.href).toBe(externalUrl)
+		expect(url.linkType).toBe('outbound')
+	})
+
+	it('detects relative URLs as internal', () => {
+		const relativeUrl = '/resources'
+		const url = parseUrl(relativeUrl)
+		expect(url.href).toBe(relativeUrl)
+		expect(url.linkType).toBe('inbound')
+	})
+
+	it('leaves URL search params intact', () => {
+		const url = parseUrl(
+			'https://hashicorp.com/resources?type=case-study&products=terraform'
+		)
+		expect(url.href).toBe('/resources?type=case-study&products=terraform')
+	})
+})

package/src/lib/parse-url/index.ts

@@ -0,0 +1,30 @@
+export function parseUrl(url: string | undefined): {
+	linkType: 'inbound' | 'outbound'
+	href: string
+} {
+	if (!url) {
+		throw new Error('url is required')
+	}
+
+	if (isRelative(url) || isAnchor(url)) {
+		return { linkType: 'inbound', href: url }
+	}
+
+	if (isInternal(url)) {
+		try {
+			const { pathname, search } = new URL(url)
+			const href = pathname + search
+			return { linkType: 'inbound', href }
+		} catch (error) {
+			throw new Error(`Invalid href: ${url}`)
+		}
+	}
+
+	return { linkType: 'outbound', href: url }
+}
+
+const isRelative = (url) => url.startsWith('/')
+const isAnchor = (url) => url.startsWith('#')
+
+export const isInternal = (url) =>
+	new URL(url).hostname.includes('hashicorp.com')

package/src/lib/track-nav-click-event/index.ts

@@ -0,0 +1,22 @@
+import va from '@vercel/analytics'
+
+/**
+ * Pushes a 'Nav link click' custom event to Vercel Analytics.
+ * A wrapper around the Vercel Analytics track method.
+ *
+ * @param {string} name - The name of the nav link
+ * @param {string} href - The href for the nav link
+ * @param {string} [section] - The name of the section of the nav. Top-level links do not have a section.
+ */
+
+export const trackNavClickEvent = (
+	name: string,
+	href: string,
+	section: string
+) => {
+	va.track('Nav link click', {
+		name,
+		href,
+		section,
+	})
+}

package/src/lib/v/index.ts

@@ -0,0 +1,11 @@
+import { vercelStegaSplit } from '@vercel/stega'
+
+/**
+ * Takes in a Vercel Visual Editing string and returns the string without
+ * hidden data.
+ */
+export function v<VercelVEString extends string>(
+	s: VercelVEString
+): VercelVEString {
+	return vercelStegaSplit(s).cleaned as VercelVEString
+}