@hashicorp/react-components 0.0.0-canary.3a0af3d → 0.0.0-canary.3cd4069

package/src/components/marketo-form/index.test.tsx

@@ -1,320 +0,0 @@
-import { render, screen, waitFor } from '@testing-library/react'
-import nock from 'nock'
-import userEvent from '@testing-library/user-event'
-import MarketoForm from './'
-import {
-	BASIC_FORM_PROPS,
-	UTM_FORM_PROPS,
-	VISIBILITY_RULE_FORM_PROPS,
-	COOKIE_UTM_FORM_PROPS,
-	HIDDEN_COOKIE_FIELD_FORM_PROPS,
-} from './fixtures'
-import cookie from 'js-cookie'
-
-describe('MarketoForm', () => {
-	let originalLocation
-	let spy
-
-	beforeAll(() => {
-		originalLocation = window.location
-	})
-
-	beforeEach(() => {
-		nock('http://local.test')
-			.persist()
-			.post('/api/marketo/submit')
-			.reply(200, { success: true, result: [] })
-
-		delete window.location
-		window.location = {
-			// We use an absolute URL here since fetch in Jest can't use relative URLs
-			origin: 'http://local.test',
-			protocol: 'http:',
-			host: 'local.test',
-			pathname: '/testing',
-			href: 'http://local.test/testing?utm_medium=social',
-			search: '?utm_medium=social',
-		}
-
-		spy = vi.spyOn(global, 'fetch')
-	})
-
-	afterEach(() => {
-		vi.resetAllMocks()
-		spy.mockRestore()
-		window.location = originalLocation
-	})
-
-	afterAll(() => {
-		nock.restore()
-	})
-
-	test('renders form with provided fields', async () => {
-		render(<MarketoForm {...BASIC_FORM_PROPS} />)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(firstNameField).toBeInTheDocument()
-		expect(lastNameField).toBeInTheDocument()
-	})
-
-	test('submits form data', async () => {
-		render(<MarketoForm {...BASIC_FORM_PROPS} />)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.type(firstNameField, 'Michael')
-
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(lastNameField).toBeInTheDocument()
-		userEvent.type(lastNameField, 'Burnham')
-
-		const submitButton = screen.getByText('Submit')
-		expect(submitButton).toBeInTheDocument()
-		userEvent.click(submitButton)
-
-		await waitFor(() => expect(spy).toHaveBeenCalled())
-		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				input: [
-					{
-						leadFormFields: {
-							firstName: 'Michael',
-							lastName: 'Burnham',
-						},
-						visitorData: {
-							pageURL: 'http://local.test/testing?utm_medium=social',
-						},
-					},
-				],
-				formId: 9999,
-			}),
-		})
-	})
-
-	test('submits with initial values', async () => {
-		render(
-			<MarketoForm
-				{...BASIC_FORM_PROPS}
-				initialValues={{ LastName: 'Burnham' }}
-			/>
-		)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.type(firstNameField, 'Michael')
-
-		const submitButton = screen.getByText('Submit')
-		expect(submitButton).toBeInTheDocument()
-		userEvent.click(submitButton)
-
-		await waitFor(() => expect(spy).toHaveBeenCalled())
-		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				input: [
-					{
-						leadFormFields: {
-							firstName: 'Michael',
-							lastName: 'Burnham',
-						},
-						visitorData: {
-							pageURL: 'http://local.test/testing?utm_medium=social',
-						},
-					},
-				],
-				formId: 9999,
-			}),
-		})
-	})
-
-	test('submits form data with UTM params', async () => {
-		render(<MarketoForm {...UTM_FORM_PROPS} />)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.type(firstNameField, 'Michael')
-
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(lastNameField).toBeInTheDocument()
-		userEvent.type(lastNameField, 'Burnham')
-
-		const submitButton = screen.getByText('Submit')
-		expect(submitButton).toBeInTheDocument()
-		userEvent.click(submitButton)
-
-		await waitFor(() => expect(spy).toHaveBeenCalled())
-		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				input: [
-					{
-						leadFormFields: {
-							firstName: 'Michael',
-							lastName: 'Burnham',
-							utm_medium__c: 'social',
-							form_page_url__c: 'http://local.test/testing',
-						},
-						visitorData: {
-							pageURL: 'http://local.test/testing?utm_medium=social',
-						},
-					},
-				],
-				formId: 9999,
-			}),
-		})
-	})
-
-	test('submits form data with UTM params from cookies', async () => {
-		cookie.get = vi.fn().mockImplementation(() => {
-			return { utm_content: 'utm-content-cookie-val' }
-		})
-		render(<MarketoForm {...COOKIE_UTM_FORM_PROPS} />)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.type(firstNameField, 'Michael')
-
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(lastNameField).toBeInTheDocument()
-		userEvent.type(lastNameField, 'Burnham')
-
-		const submitButton = screen.getByText('Submit')
-		expect(submitButton).toBeInTheDocument()
-		userEvent.click(submitButton)
-
-		await waitFor(() => expect(spy).toHaveBeenCalled())
-		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				input: [
-					{
-						leadFormFields: {
-							firstName: 'Michael',
-							lastName: 'Burnham',
-							utm_content__c: 'utm-content-cookie-val',
-						},
-						visitorData: {
-							pageURL: 'http://local.test/testing?utm_medium=social',
-						},
-					},
-				],
-				formId: 9999,
-			}),
-		})
-	})
-
-	test('renders built-in error validation messages', async () => {
-		render(<MarketoForm {...BASIC_FORM_PROPS} />)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.click(firstNameField)
-
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(lastNameField).toBeInTheDocument()
-		userEvent.click(lastNameField)
-
-		const errorMessage = await screen.findByText('This field is required.')
-		expect(errorMessage).toBeInTheDocument()
-	})
-
-	test('renders additional error validation messages', async () => {
-		render(
-			<MarketoForm
-				{...BASIC_FORM_PROPS}
-				validateFields={async (values, errors) => {
-					return {
-						values,
-						errors: {
-							...errors,
-							FirstName: {
-								message: `${errors.FirstName.message} Additional message.`,
-							},
-						},
-					}
-				}}
-			/>
-		)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.click(firstNameField)
-
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(lastNameField).toBeInTheDocument()
-		userEvent.click(lastNameField)
-
-		const errorMessage = await screen.findByText(
-			'This field is required. Additional message.'
-		)
-		expect(errorMessage).toBeInTheDocument()
-	})
-
-	test('handles simple visibility rules', async () => {
-		render(<MarketoForm {...VISIBILITY_RULE_FORM_PROPS} />)
-
-		expect(screen.queryByLabelText('Phone Number')).toBeNull()
-
-		const fastTrackField = screen.getByLabelText('Have salesperson contact me')
-		expect(fastTrackField).toBeInTheDocument()
-		userEvent.click(fastTrackField)
-
-		expect(screen.getByLabelText('Phone Number')).toBeInTheDocument()
-	})
-
-	test('submits form with cookie values for hidden fields', async () => {
-		cookie.get = vi.fn().mockImplementation(() => {
-			return 'hidden-cookie-field-val'
-		})
-		render(<MarketoForm {...HIDDEN_COOKIE_FIELD_FORM_PROPS} />)
-
-		const firstNameField = screen.getByLabelText(/First Name/)
-		expect(firstNameField).toBeInTheDocument()
-		userEvent.type(firstNameField, 'Michael')
-
-		const lastNameField = screen.getByLabelText(/Last Name/)
-		expect(lastNameField).toBeInTheDocument()
-		userEvent.type(lastNameField, 'Burnham')
-
-		const submitButton = screen.getByText('Submit')
-		expect(submitButton).toBeInTheDocument()
-		userEvent.click(submitButton)
-
-		await waitFor(() => expect(spy).toHaveBeenCalled())
-		expect(spy).toHaveBeenCalledWith('http://local.test/api/marketo/submit', {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify({
-				input: [
-					{
-						leadFormFields: {
-							firstName: 'Michael',
-							lastName: 'Burnham',
-							cookieHiddenField: 'hidden-cookie-field-val',
-						},
-						visitorData: {
-							pageURL: 'http://local.test/testing?utm_medium=social',
-						},
-					},
-				],
-				formId: 9999,
-			}),
-		})
-	})
-})

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

@@ -1,11 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useFormContext, useFormState, useWatch } from 'react-hook-form'
-import Form, { defaultFieldGroupings } from './form'
-import Field from './partials/field'
-
-export { useFormContext, useFormState, useWatch, defaultFieldGroupings, Field }
-export default Form

package/src/components/marketo-form/package.original.json

@@ -1,30 +0,0 @@
-{
-  "name": "@hashicorp/react-marketo-form",
-  "description": "A form component that dynamically renders a Marketo form",
-  "version": "0.9.0",
-  "author": "HashiCorp",
-  "contributors": [
-    "Dylan Staley"
-  ],
-  "dependencies": {
-    "@hashicorp/platform-analytics": "^0.11.2",
-    "@hashicorp/react-button": "^6.2.0",
-    "@hashicorp/react-form-fields": "^0.2.0",
-    "@vercel/fetch": "^6.2.0",
-    "clsx": "^1.1.1",
-    "js-cookie": "^3.0.1",
-    "moize": "^6.1.3",
-    "react-hook-form": "^7.37.0"
-  },
-  "license": "MPL-2.0",
-  "peerDependencies": {
-    "next": ">=11.x",
-    "react": ">=16.x"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "devDependencies": {
-    "@types/js-cookie": "^3.0.2"
-  }
-}

package/src/components/marketo-form/partials/error-message/index.tsx

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import styles from './style.module.css'
-
-const ErrorMessage = ({ error }: { error: string }) => {
-	return <div className={styles.errorText}>{error}</div>
-}
-
-export default ErrorMessage

package/src/components/marketo-form/partials/error-message/style.module.css

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.errorText {
-  --error-text-color: var(--danger);
-
-  composes: g-type-body-small from global;
-  color: var(--error-text-color);
-  line-height: 1.4;
-  margin-top: 4px;
-}

package/src/components/marketo-form/partials/field/index.tsx

@@ -1,90 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import TextField from '../fields/text-field'
-import EmailField from '../fields/email-field'
-import TelephoneField from '../fields/telephone-field'
-import TextareaField from '../fields/textarea-field'
-import SelectField from '../fields/select-field'
-import CheckboxField from '../fields/checkbox-field'
-import HiddenField from '../fields/hidden-field'
-import HtmltextField from '../fields/htmltext-field'
-import RadioButtonsField from '../fields/radio-buttons-field'
-import FormPageUrlField from '../fields/form-page-url-field'
-import type { MarketoFormField, MarketoFormComponents } from '../../types'
-
-const Field = ({
-	field,
-	components,
-}: {
-	field: MarketoFormField
-	components?: MarketoFormComponents
-}) => {
-	switch (field.dataType) {
-		case 'text':
-			if (components && 'text' in components) {
-				const Component = components.text!
-				return <Component field={field} />
-			}
-			return <TextField field={field} />
-		case 'textArea':
-			if (components && 'textArea' in components) {
-				const Component = components.textArea!
-				return <Component field={field} />
-			}
-			return <TextareaField field={field} />
-		case 'email':
-			if (components && 'email' in components) {
-				const Component = components.email!
-				return <Component field={field} />
-			}
-			return <EmailField field={field} />
-		case 'telephone':
-			if (components && 'telephone' in components) {
-				const Component = components.telephone!
-				return <Component field={field} />
-			}
-			return <TelephoneField field={field} />
-		case 'select':
-			if (components && 'select' in components) {
-				const Component = components.select!
-				return <Component field={field} />
-			}
-			return <SelectField field={field} />
-		case 'checkbox':
-			if (components && 'checkbox' in components) {
-				const Component = components.checkbox!
-				return <Component field={field} />
-			}
-			return <CheckboxField field={field} />
-		case 'hidden':
-			if (components && 'hidden' in components) {
-				const Component = components.hidden!
-				return <Component field={field} />
-			}
-			if (field.id === 'form_page_url__c') {
-				return <FormPageUrlField field={field} />
-			}
-			return <HiddenField field={field} />
-		case 'htmltext':
-			if (components && 'htmltext' in components) {
-				const Component = components.htmltext!
-				return <Component field={field} />
-			}
-			return <HtmltextField field={field} />
-		case 'radioButtons':
-			if (components && 'radioButtons' in components) {
-				const Component = components.radioButtons!
-				return <Component field={field} />
-			}
-			return <RadioButtonsField field={field} />
-		default:
-			console.error(`Unknown form field type: ${(field as any).Datatype}`)
-	}
-
-	return null
-}
-
-export default Field

package/src/components/marketo-form/partials/field-wrapper/index.tsx

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import type { ReactNode } from 'react'
-
-const FieldWrapper = ({
-	children,
-	fieldId,
-}: {
-	children: ReactNode
-	fieldId: string
-}) => {
-	return (
-		<div
-			style={{ marginBottom: '1rem' }}
-			className="marketo-form-field-wrapper"
-			data-field-id={fieldId}
-		>
-			{children}
-		</div>
-	)
-}
-
-export default FieldWrapper

package/src/components/marketo-form/partials/fields/checkbox-field/index.tsx

@@ -1,32 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useFormContext } from 'react-hook-form'
-// import CheckboxInput from '@hashicorp/react-form-fields/checkbox'
-import Checkbox from '@hashicorp/react-design-system-components/src/components/form/checkbox'
-import FieldWrapper from '../../field-wrapper'
-import { formattedLabel, useErrorMessage } from '../../../utils'
-import type { MarketoFormCheckboxField } from '../../../types'
-
-const CheckboxField = ({ field }: { field: MarketoFormCheckboxField }) => {
-	const { register, watch } = useFormContext()
-	const error = useErrorMessage(field.id)
-	const checked = watch(field.id, false)
-
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<Checkbox
-				label={formattedLabel(field)}
-				field={{
-					...register(field.id),
-					checked,
-				}}
-				error={error}
-			/>
-		</FieldWrapper>
-	)
-}
-
-export default CheckboxField

package/src/components/marketo-form/partials/fields/email-field/index.tsx

@@ -1,35 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useFormContext } from 'react-hook-form'
-// import TextInput from '@hashicorp/react-form-fields/text'
-import TextInput from '@hashicorp/react-design-system-components/src/components/form/text-input'
-import FieldWrapper from '../../field-wrapper'
-import { formattedLabel, useErrorMessage } from '../../../utils'
-import type { MarketoFormEmailField } from '../../../types'
-
-const EmailField = ({ field }: { field: MarketoFormEmailField }) => {
-	const { register } = useFormContext()
-	const error = useErrorMessage(field.id)
-
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<TextInput
-				label={formattedLabel(field)}
-				type="email"
-				field={{
-					...register(field.id),
-					type: 'email',
-					placeholder: field.hintText,
-				}}
-				size="large"
-				error={error}
-				isRequired={field.required}
-			/>
-		</FieldWrapper>
-	)
-}
-
-export default EmailField

package/src/components/marketo-form/partials/fields/form-page-url-field/index.tsx

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useEffect } from 'react'
-import { useFormContext } from 'react-hook-form'
-import type { MarketoFormHiddenField } from '../../../types'
-
-const FormPageUrlField = ({ field }: { field: MarketoFormHiddenField }) => {
-	const { register, setValue } = useFormContext()
-
-	useEffect(() => {
-		const { protocol, host, pathname } = window.location
-		setValue(field.id, `${protocol}//${host}${pathname}`)
-	}, [])
-
-	return <input type="hidden" {...register(field.id)} />
-}
-
-export default FormPageUrlField

package/src/components/marketo-form/partials/fields/hidden-field/index.tsx

@@ -1,37 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useEffect } from 'react'
-import { useFormContext } from 'react-hook-form'
-import type { MarketoFormHiddenField } from '../../../types'
-import cookies from 'js-cookie'
-
-const HiddenField = ({ field }: { field: MarketoFormHiddenField }) => {
-	const { register, setValue } = useFormContext()
-
-	useEffect(() => {
-		if (field.autoFill && field.autoFill.valueFrom === 'query') {
-			const searchParams = new URLSearchParams(window.location.search)
-			if (searchParams.has(field.autoFill.parameterName)) {
-				setValue(field.id, searchParams.get(field.autoFill.parameterName))
-			}
-		} else if (
-			field.autoFill &&
-			field.autoFill.valueFrom === 'default' &&
-			field.autoFill.value
-		) {
-			setValue(field.id, field.autoFill.value)
-		} else if (field.autoFill && field.autoFill.valueFrom === 'cookie') {
-			const fieldCookieValue = cookies.get(field.autoFill.parameterName)
-			if (fieldCookieValue) {
-				setValue(field.id, fieldCookieValue)
-			}
-		}
-	}, [field, setValue])
-
-	return <input type="hidden" {...register(field.id)} />
-}
-
-export default HiddenField

package/src/components/marketo-form/partials/fields/htmltext-field/index.tsx

@@ -1,21 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import FieldWrapper from '../../field-wrapper'
-import type { MarketoFormHtmltextField } from '../../../types'
-import styles from './style.module.css'
-
-const Index = ({ field }: { field: MarketoFormHtmltextField }) => {
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<span
-				className={styles.htmltext}
-				dangerouslySetInnerHTML={{ __html: field.text }}
-			/>
-		</FieldWrapper>
-	)
-}
-
-export default Index

package/src/components/marketo-form/partials/fields/htmltext-field/style.module.css

@@ -1,6 +0,0 @@
-.htmltext {
-  composes: g-type-body-small from global;
-  color: var(--wpl-neutral-500);
-  margin-top: var(--wpl-spacing-02);
-  margin-bottom: var(--wpl-spacing-05);
-}

package/src/components/marketo-form/partials/fields/name-field/index.tsx

@@ -1,19 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import TextField from '../text-field'
-import type { MarketoFormField, MarketoFormTextField } from '../../../types'
-import styles from './style.module.css'
-
-const NameFields = ({ fields }: { fields: MarketoFormField[] }) => {
-	return (
-		<div className={styles.name}>
-			<TextField field={fields[0] as MarketoFormTextField} />
-			<TextField field={fields[1] as MarketoFormTextField} />
-		</div>
-	)
-}
-
-export default NameFields