@hashicorp/react-components 0.0.0-nightly.f535c63 → 0.0.0-nightly.f8bc604

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

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

@@ -1,13 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.name {
-  display: grid;
-  grid-gap: 8px;
-  @media (--medium-up) {
-    grid-gap: 32px;
-    grid-template-columns: 1fr 1fr;
-  }
-}

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

@@ -1,48 +0,0 @@
-import { useFormContext } from 'react-hook-form'
-import RadioCard, {
-	RadioCardGroup,
-} from '@hashicorp/react-design-system-components/src/components/form/radio-card'
-import FieldWrapper from '../../field-wrapper'
-import type { MarketoFormRadioButtonsField } from '../../../types'
-
-const RadioCardField = ({ field }: { field: MarketoFormRadioButtonsField }) => {
-	const {
-		register,
-		watch,
-		formState: { errors },
-	} = useFormContext()
-	const error = errors[field.id]?.message as string
-	const currentSelection = watch(field.id)
-
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<RadioCardGroup
-				error={error}
-				layout="vertical"
-				isRequired={field.required}
-				legend={field.label}
-				id={field.id}
-				aria-describedby={error && `error-${field.id}-error`}
-			>
-				{field.fieldMetaData.values.map(({ label, value }) => (
-					<RadioCard
-						controlPosition="left"
-						key={value}
-						label={label}
-						field={{
-							...register(field.id, { required: field.validationMessage }),
-							checked: currentSelection === value,
-							value,
-							name: field.id,
-							required: field.required,
-							'aria-invalid': Boolean(errors[field.id]),
-							'aria-describedby': error && `error-${field.id}-error`,
-						}}
-					/>
-				))}
-			</RadioCardGroup>
-		</FieldWrapper>
-	)
-}
-
-export default RadioCardField

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

@@ -1,39 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useFormContext } from 'react-hook-form'
-import Select from '@hashicorp/react-design-system-components/src/components/form/select'
-import FieldWrapper from '../../field-wrapper'
-import { formattedLabel, useErrorMessage } from '../../../utils'
-import type { MarketoFormSelectField } from '../../../types'
-import s from './style.module.css'
-
-const SelectField = ({ field }: { field: MarketoFormSelectField }) => {
-	const { register } = useFormContext()
-	const error = useErrorMessage(field.id)
-
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<Select
-				field={{ ...register(field.id) }}
-				size="large"
-				label={formattedLabel(field)}
-				error={error}
-				isRequired={field.required}
-				className={s.selectConstrainWidth}
-			>
-				{field.fieldMetaData.values
-					? field.fieldMetaData.values.map(({ label, value }) => (
-							<option key={label} value={value}>
-								{label}
-							</option>
-					  ))
-					: []}
-			</Select>
-		</FieldWrapper>
-	)
-}
-
-export default SelectField

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

@@ -1,5 +0,0 @@
-.selectConstrainWidth {
-	& select {
-		width: 100%;
-	}
-}

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

@@ -1,30 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useFormContext } from 'react-hook-form'
-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 { MarketoFormTelephoneField } from '../../../types'
-
-const TelephoneField = ({ field }: { field: MarketoFormTelephoneField }) => {
-	const { register } = useFormContext()
-	const error = useErrorMessage(field.id)
-
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<TextInput
-				label={formattedLabel(field)}
-				type="tel"
-				field={{ ...register(field.id), placeholder: field.hintText }}
-				size="large"
-				error={error}
-				isRequired={field.required}
-			/>
-		</FieldWrapper>
-	)
-}
-
-export default TelephoneField

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

@@ -1,30 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useFormContext } from 'react-hook-form'
-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 { MarketoFormTextField } from '../../../types'
-
-const Index = ({ field }: { field: MarketoFormTextField }) => {
-	const { register } = useFormContext()
-	const error = useErrorMessage(field.id)
-
-	return (
-		<FieldWrapper fieldId={field.id}>
-			<TextInput
-				label={formattedLabel(field)}
-				type="text"
-				field={{ ...register(field.id), placeholder: field.hintText }}
-				size="large"
-				error={error}
-				isRequired={field.required}
-			/>
-		</FieldWrapper>
-	)
-}
-
-export default Index

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

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

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

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import clsx from 'clsx'
-import s from './style.module.css'
-
-interface LabelProps {
-	label: string
-	fieldName: string
-	className?: string
-}
-
-export default function Label({ label, fieldName, className }: LabelProps) {
-	return (
-		<label
-			htmlFor={fieldName}
-			className={clsx(className && className, s.label)}
-		>
-			{label}
-		</label>
-	)
-}

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

@@ -1,12 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-.label {
-  color: var(--gray-3);
-  composes: g-type-label from global;
-  display: block;
-  padding-bottom: 8px;
-  text-transform: uppercase;
-}

package/src/components/marketo-form/partials/visibility-rule/index.tsx

@@ -1,84 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { useMemo } from 'react'
-import { useFormContext } from 'react-hook-form'
-import Field from '../field'
-import type {
-	MarketoFormField,
-	MarketoFormComponents,
-	VisibilityRule as VisibilityRuleType,
-} from '../../types'
-
-function ruleApplies(rule: VisibilityRuleType, value: any): boolean {
-	switch (rule.operator) {
-		case 'is':
-			return (
-				rule.values.includes(value) ||
-				(value === false && rule.values.includes('no')) ||
-				(value === true && rule.values.includes('yes'))
-			)
-		case 'isNot':
-			return !rule.values.includes(value)
-		case 'isEmpty':
-			return value === null || typeof value === 'undefined' || value === ''
-		default:
-			return false
-	}
-}
-
-const FieldWithVisibilityRule = ({
-	field,
-	components,
-}: {
-	field: MarketoFormField
-	components?: MarketoFormComponents
-}) => {
-	const { watch } = useFormContext()
-
-	// Currently we only support the first defined rule.
-	const value = watch(field.visibilityRules!.rules![0].subjectField)
-
-	const hasMatchingRule = useMemo(() => {
-		return field.visibilityRules!.rules!.some((rule) =>
-			ruleApplies(rule, value)
-		)
-	}, [field, value])
-
-	if (
-		hasMatchingRule &&
-		(field.visibilityRules!.ruleType === 'show' ||
-			field.visibilityRules!.ruleType === 'hide')
-	) {
-		return field.visibilityRules!.ruleType === 'show' ? (
-			<Field field={field} components={components} />
-		) : null
-	}
-
-	// If the ruleType is show, that means the field is hidden by default.
-	return field.visibilityRules!.ruleType === 'show' ? null : (
-		<Field field={field} components={components} />
-	)
-}
-
-const VisibilityRule = ({
-	field,
-	components,
-}: {
-	field: MarketoFormField
-	components?: MarketoFormComponents
-}) => {
-	if (
-		field.visibilityRules &&
-		(field.visibilityRules.ruleType === 'show' ||
-			field.visibilityRules.ruleType === 'hide')
-	) {
-		return <FieldWithVisibilityRule field={field} components={components} />
-	}
-
-	return <Field field={field} components={components} />
-}
-
-export default VisibilityRule

package/src/components/marketo-form/props.js

@@ -1,66 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-module.exports = {
-	formId: {
-		type: 'number',
-		required: true,
-		description:
-			'The numeric ID of the Marketo form that this component is rendering.',
-	},
-	marketoForm: {
-		type: 'object',
-		required: true,
-		description:
-			'The API response containing the fields of the form this component should render.',
-	},
-	groups: {
-		type: 'object',
-		description:
-			'Mapping of fields that should be rendered with a single component.',
-	},
-	components: {
-		type: 'object',
-		description: 'Custom components to use instead of the built-in components',
-		properties: {
-			text: {
-				type: 'React.ComponentType',
-				description: 'Component to use for text fields',
-			},
-			email: {
-				type: 'React.ComponentType',
-				description: 'Component to use for email fields',
-			},
-			select: {
-				type: 'React.ComponentType',
-				description: 'Component to use for select fields',
-			},
-			checkbox: {
-				type: 'React.ComponentType',
-				description: 'Component to use for checkbox fields',
-			},
-			hidden: {
-				type: 'React.ComponentType',
-				description: 'Component to use for hidden fields',
-			},
-		},
-	},
-	submitTitle: {
-		type: 'string',
-		description: 'Title to use for the submit button',
-	},
-	className: {
-		type: 'string',
-		description: 'Additional classNames passed to the form element.',
-	},
-	onSubmitSuccess: {
-		type: 'function',
-		description: 'Callback function invoked on submission success',
-	},
-	onSubmitFailure: {
-		type: 'function',
-		description: 'Callback function invoked on submission failure',
-	},
-}

package/src/components/marketo-form/server/api-routes.ts

@@ -1,109 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import * as client from './client'
-import { includesSkippedRecords } from '../utils'
-import type { SubmissionFilter, MarketoSubmissionResponse } from '../types'
-import type { NextApiRequest, NextApiResponse } from 'next'
-
-async function notifyError(body: unknown, err: unknown) {
-	if (process.env.MARKETO_ERROR_ZAPIER_WEBHOOK) {
-		try {
-			await fetch(process.env.MARKETO_ERROR_ZAPIER_WEBHOOK, {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json',
-				},
-				body: JSON.stringify({ body, err }, null, 2),
-			})
-		} catch (err) {
-			console.error({ body, err })
-		}
-	}
-
-	return Promise.resolve()
-}
-
-function isE2ETest(req: NextApiRequest): boolean {
-	// running e2e tests locally
-	if (process.env.E2E_TESTS === 'true') {
-		return true
-	}
-
-	// running e2e tests against a Vercel preview
-	if (
-		'input' in req.body &&
-		req.body.input.length > 0 &&
-		req.body.input[0].leadFormFields.email === 'daniela.rod@example.com'
-	) {
-		return true
-	}
-
-	return false
-}
-
-async function submitForm(
-	req: NextApiRequest,
-	res: NextApiResponse,
-	{
-		submissionFilter,
-	}: {
-		submissionFilter?: SubmissionFilter
-	}
-) {
-	// Don't submit forms to the Marketo API when using E2E tests.
-	if (isE2ETest(req)) {
-		res.status(200).json({
-			requestId: '7d85#181a7ae5e56',
-			result: [
-				{
-					id: 25325329,
-					status: 'updated',
-				},
-			],
-			success: true,
-		})
-		return
-	}
-
-	try {
-		const passesSubmissionFilter = submissionFilter
-			? await submissionFilter(req)
-			: true
-		if (!passesSubmissionFilter) {
-			// trick spammers into thinking their form submitted successfully
-			res.status(200).json({ success: true })
-			return
-		}
-		const marketoRes = await client.submitForm(req.body)
-		const form = (await marketoRes.json()) as MarketoSubmissionResponse
-		if (!form.success || includesSkippedRecords(form)) {
-			await notifyError(req.body, form)
-		}
-		res.status(marketoRes.status).json(form)
-	} catch (err) {
-		await notifyError(req.body, err)
-		res.status(500).json({ error: 'internal server error' })
-		throw err
-	}
-}
-
-export function buildApiRoutes({
-	submissionFilter,
-}: {
-	submissionFilter?: SubmissionFilter
-} = {}) {
-	return async function apiRoutes(req: NextApiRequest, res: NextApiResponse) {
-		const route = Array.isArray(req.query.marketo)
-			? req.query.marketo[0]
-			: req.query.marketo
-		switch (route) {
-			case 'submit':
-				return submitForm(req, res, { submissionFilter })
-			default:
-				return res.status(404).json({ error: 'not found' })
-		}
-	}
-}

package/src/components/marketo-form/server/client.ts

@@ -1,98 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import moize from 'moize'
-import type {
-	MarketoFormFieldsResponse,
-	MarketoFormMetadataResponse,
-	MarketoFormAPIResponse,
-} from '../types'
-
-interface MarketoTokenResponse {
-	access_token: string
-}
-
-export async function getToken(): Promise<MarketoTokenResponse> {
-	const url = new URL(`${process.env.MARKETO_IDENTITY}/oauth/token`)
-	url.searchParams.append('grant_type', 'client_credentials')
-	url.searchParams.append('client_id', process.env.MARKETO_CLIENT_ID!)
-	url.searchParams.append('client_secret', process.env.MARKETO_CLIENT_SECRET!)
-	const res = await fetch(url.toString())
-	return await res.json()
-}
-
-export async function getForm(formId: number) {
-	return await fetch(`https://content.hashicorp.com/api/marketo?id=${formId}`)
-}
-
-export async function getDraftFormProps(formId: number) {
-	const { access_token } = await getToken()
-
-	const fieldsResponse = await fetch(
-		`${process.env.MARKETO_ENDPOINT}/asset/v1/form/${formId}/fields.json?status=draft`,
-		{
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${access_token}`,
-			},
-		}
-	)
-
-	const metadataResponse = await fetch(
-		`${process.env.MARKETO_ENDPOINT}/asset/v1/form/${formId}.json?status=draft`,
-		{
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${access_token}`,
-			},
-		}
-	)
-
-	const [fields, metadata] = await Promise.all([
-		fieldsResponse.json(),
-		metadataResponse.json(),
-	])
-
-	return { fields, metadata }
-}
-
-export async function getFormProps(
-	id: number
-): Promise<MarketoFormAPIResponse> {
-	const res = await getForm(id)
-	if (res.status !== 200) {
-		throw new Error(
-			`[marketo-form] non-200 status code when requesting form ${id}: ${res.status}`
-		)
-	}
-
-	const form = (await res.json()) as {
-		result: {
-			fields: MarketoFormFieldsResponse
-			metadata: MarketoFormMetadataResponse
-		}
-	}
-
-	return form.result
-}
-export const memoizedGetFormProps = moize(getFormProps, {
-	isPromise: true,
-	maxAge: 60 * 1000, // 60 seconds
-})
-
-export async function submitForm(body: unknown) {
-	const { access_token } = await getToken()
-	return await fetch(
-		`${process.env.MARKETO_ENDPOINT}/v1/leads/submitForm.json`,
-		{
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-				Authorization: `Bearer ${access_token}`,
-			},
-			body: JSON.stringify(body),
-		}
-	)
-}

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

@@ -1,8 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { buildApiRoutes } from './api-routes'
-
-export { buildApiRoutes }