@hashicorp/react-components 0.0.0-nightly.8df4a87 → 0.0.0-nightly.928c674

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

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