@sanity/form-toolkit 2.2.3 → 3.0.0

package/src/form-renderer/components/default-field.tsx

@@ -1,123 +0,0 @@
-import type {ChangeEvent, FC, LegacyRef} from 'react'
-
-import type {FieldComponentProps} from './types'
-
-export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}) => {
-  const {type, label, name, options = {}, choices = [], validation = []} = field
-  if (!type || !name) return null
-  const validationRules = validation.reduce((acc: Record<string, string>, v) => {
-    acc[v.type] = v.value
-    return acc
-  }, {})
-  const {value, onChange, onBlur, ref} = fieldState
-
-  const handleChange = (
-    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,
-  ) => {
-    onChange(e.target.value)
-  }
-
-  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>, choiceValue: string) => {
-    if (Array.isArray(value)) {
-      const newValue = e.target.checked
-        ? [...value, choiceValue]
-        : value.filter((v: string) => v !== choiceValue)
-      onChange(newValue)
-    } else {
-      onChange(e.target.checked ? choiceValue : '')
-    }
-  }
-
-  const renderInput = () => {
-    switch (type) {
-      case 'submit':
-        return <button type="submit">{label || 'Submit'}</button>
-      case 'textarea':
-        return (
-          <textarea
-            ref={ref as LegacyRef<HTMLTextAreaElement>}
-            name={name}
-            onChange={handleChange}
-            onBlur={onBlur}
-            placeholder={options.placeholder}
-            {...validationRules}
-            value={value ?? ''}
-          />
-        )
-
-      case 'select':
-        return (
-          <select
-            ref={ref as LegacyRef<HTMLSelectElement>}
-            name={name}
-            value={value ?? ''}
-            onChange={handleChange}
-            {...validationRules}
-            onBlur={onBlur}
-          >
-            {choices?.map((choice, i) => (
-              <option key={i} value={choice.value}>
-                {choice.label}
-              </option>
-            ))}
-          </select>
-        )
-
-      case 'radio':
-        return choices?.map((choice, i) => (
-          <label key={i}>
-            <input
-              type="radio"
-              name={name}
-              ref={ref as LegacyRef<HTMLInputElement>}
-              value={choice.value}
-              checked={value === choice.value}
-              onChange={handleChange}
-              onBlur={onBlur}
-              {...validationRules}
-            />
-            {choice.label}
-          </label>
-        ))
-
-      case 'checkbox':
-        return choices?.map((choice, i) => (
-          <label key={i}>
-            <input
-              type="checkbox"
-              name={name}
-              ref={ref as LegacyRef<HTMLInputElement>}
-              value={choice.value}
-              checked={Array.isArray(value) ? value.includes(choice.value) : value === choice.value}
-              onChange={(e) => handleCheckboxChange(e, choice.value)}
-              onBlur={onBlur}
-              {...validationRules}
-            />
-            {choice.label}
-          </label>
-        ))
-
-      default:
-        return (
-          <input
-            type={type}
-            ref={ref as LegacyRef<HTMLInputElement>}
-            name={name}
-            value={value ?? options.defaultValue ?? ''}
-            onChange={handleChange}
-            {...validationRules}
-            onBlur={onBlur}
-            placeholder={options.placeholder}
-          />
-        )
-    }
-  }
-
-  return (
-    <>
-      {label && !['hidden', 'submit'].includes(type) && <label htmlFor={name}>{label}</label>}
-      {renderInput()}
-      {error && <span className="error">{error}</span>}
-    </>
-  )
-}

package/src/form-renderer/components/form-renderer.tsx

@@ -1,62 +0,0 @@
-import type {ComponentType, FC, HTMLProps} from 'react'
-
-import {DefaultField} from './default-field'
-import type {FieldComponentProps, FieldState, FormDataProps, FormField} from './types'
-
-interface FormRendererProps extends HTMLProps<HTMLFormElement> {
-  formData?: FormDataProps
-  // Function to get field state for a given field name
-  getFieldState?: (fieldName: string) => FieldState
-  // Function to get field error for a given field name
-  getFieldError?: (fieldName: string) => string | undefined
-  // Override default field components
-  fieldComponents?: Record<string, ComponentType<FieldComponentProps>>
-}
-
-export const FormRenderer: FC<FormRendererProps> = (props) => {
-  const {
-    formData,
-    getFieldState = (name) => ({
-      value: undefined,
-      onChange: () => {},
-      name, // Pass name to field for native form handling
-    }),
-    getFieldError,
-    fieldComponents = {},
-    children,
-  } = props
-  const renderField = (field: FormField) => {
-    const CustomComponent = fieldComponents[field.type]
-    const fieldState = getFieldState(field.name)
-    const error = getFieldError?.(field.name)
-
-    if (CustomComponent) {
-      return <CustomComponent field={field} fieldState={fieldState} error={error} />
-    }
-
-    return <DefaultField field={field} fieldState={fieldState} error={error} />
-  }
-  const elProps = Object.assign({}, props)
-  delete elProps.formData
-  delete elProps.getFieldState
-  delete elProps.getFieldError
-  delete elProps.fieldComponents
-
-  return (
-    <form {...elProps} id={elProps.id ?? formData?.id?.current}>
-      {formData?.fields?.map((field) => (
-        <div key={field._key} className="form-field">
-          {renderField(field)}
-        </div>
-      ))}
-
-      {children}
-
-      {renderField({
-        type: 'submit',
-        name: 'submit',
-        label: formData?.submitButton?.text || 'Submit',
-      })}
-    </form>
-  )
-}

package/src/form-renderer/components/types.ts

@@ -1,51 +0,0 @@
-export type ValidationRule = {
-  type: string
-  value: string
-  message: string
-}
-
-export type FieldChoice = {
-  label: string
-  value: string
-}
-
-export type FieldOptions = {
-  placeholder?: string
-  defaultValue?: string
-}
-
-export type FormField = {
-  type: string
-  label?: string
-  name: string
-  required?: boolean
-  validation?: ValidationRule[]
-  options?: FieldOptions
-  choices?: FieldChoice[]
-  _key?: string
-}
-
-export type FormDataProps = {
-  title: string
-  id: {
-    current: string
-  }
-  fields?: FormField[]
-  submitButton?: {
-    text: string
-    position: 'left' | 'center' | 'right'
-  }
-}
-
-export interface FieldState {
-  value?: string | number | readonly string[]
-  onChange: (value: unknown) => void
-  onBlur?: () => void
-  ref?: unknown
-}
-
-export interface FieldComponentProps {
-  field: FormField
-  fieldState: FieldState
-  error?: string
-}

package/src/form-renderer/index.ts

@@ -1,4 +0,0 @@
-import {FormRenderer} from './components/form-renderer'
-import type {FormDataProps} from './components/types'
-export type {FormDataProps}
-export {FormRenderer}

package/src/form-schema/components/validation-type.tsx

@@ -1,14 +0,0 @@
-import type {StringInputProps} from 'sanity'
-import {useFormValue} from 'sanity'
-
-import type {FormField} from '../../form-renderer/components/types'
-import {validationTypesByFieldType} from '../schema-types/form-field'
-
-export const ValidationType = (props: StringInputProps) => {
-  const {type} = useFormValue([...props.path.slice(0, 2)]) as FormField
-  if (!type) return props.renderDefault(props)
-  if (props.schemaType?.options) {
-    props.schemaType.options.list = validationTypesByFieldType[type]
-  }
-  return props.renderDefault(props)
-}

package/src/form-schema/index.ts

@@ -1,35 +0,0 @@
-import {definePlugin, type FieldDefinition} from 'sanity'
-
-// import {structureTool} from 'sanity/structure'
-// import {FormRenderer} from './components/form-renderer'
-import {schema} from './schema-types'
-// import {defaultDocumentNode} from './structure'
-
-/**
- * Usage in `sanity.config.ts` (or .js)
- *
- * ```ts
- * import {defineConfig} from 'sanity'
- * import {formSchema} from '@sanity/form-toolkit'
- *
- * export default defineConfig({
- *   // ...
- *   plugins: [formSchema()],
- * })
- * ```
- */
-export type FieldsOption = Array<FieldDefinition>
-interface FormSchemaPluginOptions {
-  /**
-   * Array of field definitions to be used in the form schema.
-   */
-  fields?: FieldsOption
-}
-
-export const formSchema = definePlugin((options: FormSchemaPluginOptions | undefined) => {
-  return {
-    name: 'form-toolkit_form-schema',
-    schema: schema(options?.fields ?? []),
-    // plugins: [structureTool({defaultDocumentNode})],
-  }
-})

package/src/form-schema/schema-types/form-field.ts

@@ -1,224 +0,0 @@
-import {LuTextCursorInput} from 'react-icons/lu'
-import {defineField, defineType} from 'sanity'
-
-import {ValidationType} from '../components/validation-type'
-interface ValidationContextDocument {
-  fields?: Array<{
-    name: string
-    type?: string
-  }>
-}
-
-// Validation options by field type
-export const validationTypesByFieldType: Record<string, string[]> = {
-  checkbox: ['minSelectedCount', 'maxSelectedCount'],
-  color: [],
-  date: ['minDate', 'maxDate'],
-  'datetime-local': ['minDate', 'maxDate'],
-  email: ['pattern'],
-  file: ['maxSize', 'fileType'],
-  hidden: [],
-  number: ['min', 'max'],
-  // password: ['minLength', 'pattern'],
-  radio: [],
-  range: ['min', 'max', 'step'],
-  select: [],
-  tel: ['pattern'],
-  text: ['minLength', 'maxLength', 'pattern'],
-  textarea: ['minLength', 'maxLength'],
-  time: [],
-  url: ['pattern'],
-}
-export const formFieldType = defineType({
-  name: 'formField',
-  title: 'Form Field',
-  type: 'object',
-  icon: LuTextCursorInput,
-  fields: [
-    defineField({
-      name: 'type',
-      title: 'Field Type',
-      type: 'string',
-      options: {
-        list: Object.keys(validationTypesByFieldType).map((type) => {
-          const title = (fieldType: string) => {
-            switch (fieldType) {
-              case 'datetime-local':
-                return 'Date & Time'
-              case 'textarea':
-                return 'Text Area'
-              case 'tel':
-                return 'Phone Number'
-              default:
-                return fieldType.charAt(0).toUpperCase() + fieldType.slice(1)
-            }
-          }
-          return {title: title(type), value: type}
-        }),
-      },
-    }),
-    defineField({
-      name: 'label',
-      title: 'Field Label',
-      type: 'string',
-    }),
-    defineField({
-      name: 'name',
-      title: 'Field Name',
-      type: 'string',
-      description:
-        'Must start with a letter and contain only letters, numbers, underscores, or hyphens. Must be unique within the form.',
-      validation: (Rule) =>
-        Rule.required().custom((name, context) => {
-          if (!name) {
-            return 'Required'
-          }
-          // Check format (HTML ID/name rules)
-          if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(name)) {
-            return 'Field name must start with a letter and contain only letters, numbers, underscores, or hyphens'
-          }
-
-          // Check uniqueness across all fields
-          const doc = context.document as ValidationContextDocument
-          const allFieldNames = doc?.fields?.map((field) => field.name) || []
-
-          // Count occurrences of this name
-          const nameCount = allFieldNames.filter((n) => n === name).length
-
-          // If we find more than one occurrence (including current field), it's not unique
-          if (nameCount > 1) {
-            return 'Field name must be unique across all form fields'
-          }
-
-          // Check for reserved HTML form attributes
-          const reservedNames = [
-            'action',
-            'method',
-            'target',
-            'enctype',
-            'accept-charset',
-            'autocomplete',
-            'novalidate',
-            'rel',
-            'submit',
-            'reset',
-          ]
-          if (reservedNames.includes(name.toLowerCase())) {
-            return 'This name is reserved for HTML form attributes. Please choose a different name.'
-          }
-
-          return true
-        }),
-    }),
-    defineField({
-      name: 'required',
-      title: 'Required',
-      type: 'boolean',
-      initialValue: false,
-    }),
-    defineField({
-      name: 'validation',
-      title: 'Validation Rules',
-      type: 'array',
-      hidden: ({parent}) => {
-        if (!parent?.type) return true
-        const validationTypes = validationTypesByFieldType[parent.type]
-        return !validationTypes || validationTypes.length === 0
-      },
-      of: [
-        {
-          type: 'object',
-          fields: [
-            defineField({
-              name: 'type',
-              title: 'Validation Type',
-              type: 'string',
-              options: {
-                // TODO: I think this needs to be a custom input component?
-                // list: ({parent}) => (parent?.type ? validationTypesByFieldType[parent.type] : []),
-                list: [],
-              },
-              components: {
-                input: ValidationType,
-              },
-            }),
-            defineField({
-              name: 'value',
-              title: 'Value',
-              type: 'string',
-            }),
-            defineField({
-              name: 'message',
-              title: 'Error Message',
-              type: 'string',
-            }),
-          ],
-          preview: {
-            select: {
-              title: 'type',
-              subtitle: 'value',
-            },
-          },
-        },
-      ],
-    }),
-    defineField({
-      name: 'choices',
-      title: 'Choices',
-      type: 'array',
-      hidden: ({parent}) => {
-        return !['select', 'radio', 'checkbox'].includes(parent?.type)
-      },
-      of: [
-        {
-          type: 'object',
-          fields: [
-            defineField({
-              name: 'label',
-              title: 'Label',
-              type: 'string',
-            }),
-            defineField({
-              name: 'value',
-              title: 'Value',
-              type: 'string',
-            }),
-          ],
-        },
-      ],
-    }),
-    defineField({
-      name: 'options',
-      title: 'Field Options',
-      type: 'object',
-      hidden: ({parent}) => {
-        return ['select', 'radio', 'checkbox', 'file'].includes(parent?.type)
-      },
-      fields: [
-        defineField({
-          name: 'placeholder',
-          title: 'Placeholder',
-          type: 'string',
-        }),
-        defineField({
-          name: 'defaultValue',
-          title: 'Default Value',
-          type: 'string',
-        }),
-      ],
-    }),
-  ],
-  preview: {
-    select: {
-      label: 'label',
-      name: 'name',
-      type: 'type',
-    },
-    prepare({label, name, type}) {
-      return {
-        title: label || name,
-        subtitle: type,
-      }
-    },
-  },
-})

package/src/form-schema/schema-types/form.ts

@@ -1,52 +0,0 @@
-import {FaWpforms} from 'react-icons/fa'
-import {defineField, defineType, type SchemaTypeDefinition} from 'sanity'
-
-import type {FieldsOption} from '..'
-
-export const formType = (fields: FieldsOption): SchemaTypeDefinition => {
-  // const fieldsOf =
-  //   fields && fields.length ? [{type: 'formField'}, ...fields] : [{type: 'formField'}]
-  return defineType({
-    name: 'form',
-    title: 'Form',
-    type: 'document',
-    icon: FaWpforms,
-    fields: [
-      defineField({
-        name: 'title',
-        title: 'Form Title',
-        type: 'string',
-        description: 'Internal title for the form',
-        validation: (Rule) => Rule.required(),
-      }),
-      defineField({
-        name: 'id',
-        title: 'Form ID',
-        type: 'slug',
-        options: {
-          source: 'title',
-        },
-        // validation: (Rule) => Rule.required(),
-      }),
-      defineField({
-        name: 'fields',
-        title: 'Form Fields',
-        type: 'array',
-        of: [{type: 'formField'}, ...fields],
-      }),
-      defineField({
-        name: 'submitButton',
-        title: 'Submit Button',
-        type: 'object',
-        fields: [
-          defineField({
-            name: 'text',
-            title: 'Button Text',
-            type: 'string',
-            initialValue: 'Submit',
-          }),
-        ],
-      }),
-    ],
-  })
-}

package/src/form-schema/schema-types/index.ts

@@ -1,9 +0,0 @@
-import type {SchemaTypeDefinition} from 'sanity'
-
-import type {FieldsOption} from '..'
-import {formType} from './form'
-import {formFieldType} from './form-field'
-
-export const schema = (fields: FieldsOption): {types: SchemaTypeDefinition[]} => {
-  return {types: [formType(fields), formFieldType]}
-}

package/src/formium/index.ts

@@ -1,52 +0,0 @@
-import {createClient, type Form} from '@formium/client'
-import {asyncList} from '@sanity/sanity-plugin-async-list'
-import {definePlugin} from 'sanity'
-
-interface FormiumInputConfig {
-  /* nothing here yet */
-}
-
-/**
- * Usage in `sanity.config.ts` (or .js)
- *
- * ```ts
- * import {defineConfig} from 'sanity'
- * import {formiumInput} from 'sanity-plugin-form-toolkit'
- *
- * export default defineConfig({
- *   // ...
- *   plugins: [formiumInput()],
- * })
- * ```
- */
-// Is Formium dead? All attempts to use the API come back with an expired cert https://github.com/formium/formium/issues/77
-export const formiumInput = definePlugin<FormiumInputConfig | void>(() => {
-  return {
-    name: 'sanity-plugin-form-toolkit_formium-input',
-    plugins: [
-      asyncList({
-        schemaType: 'formiumInput',
-        secrets: {
-          keys: [
-            {key: 'projectId', title: 'Project ID'},
-            {key: 'token', title: 'Token'},
-          ],
-        },
-        loader: async ({secrets}) => {
-          const formium = createClient(secrets?.projectId || '', {
-            apiToken: secrets?.token,
-          })
-          const {data}: {data: Form[]} = await formium.findForms()
-          return data && data.length
-            ? data.map(({name, id}) => {
-                return {
-                  title: name,
-                  value: id,
-                }
-              })
-            : []
-        },
-      }),
-    ],
-  }
-})

package/src/hubspot/components/option.tsx

@@ -1,17 +0,0 @@
-import {Card, Text} from '@sanity/ui'
-import type {ReactElement} from 'react'
-
-export const Option = (option: {value: string; name: string}): ReactElement => {
-  return (
-    <Card data-as="button" padding={3} radius={2} tone="inherit">
-      <Text size={2} textOverflow="ellipsis">
-        {option.name}
-      </Text>
-      <Card paddingTop={2} tone="inherit" style={{background: 'inherit'}}>
-        <Text size={1} textOverflow="ellipsis">
-          {`ID: ${option.value}`}
-        </Text>
-      </Card>
-    </Card>
-  )
-}

package/src/hubspot/create-handler.ts

@@ -1,6 +0,0 @@
-import createHandler from '../shared/create-handler'
-import {fetchHubSpotData} from './fetch-hubspot-data'
-
-export const hubSpotHandler = ({token}: {token: string}) => {
-  return createHandler(() => fetchHubSpotData({token}))
-}

package/src/hubspot/fetch-hubspot-data.ts

@@ -1,33 +0,0 @@
-type HubSpotForm = {
-  id: string
-  name: string
-  [key: string]: unknown // Additional properties from the API response
-}
-
-type MappedResult = HubSpotForm & {
-  value: string
-}
-export async function fetchHubSpotData({token}: {token: string}): Promise<MappedResult[] | null> {
-  try {
-    const apiResponse = await fetch('https://api.hubapi.com/marketing/v3/forms/?limit=9999', {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    })
-
-    if (!apiResponse.ok) {
-      console.error(`Failed to fetch data: ${apiResponse.statusText}`)
-      return null
-    }
-
-    const {results}: {results: HubSpotForm[]} = await apiResponse.json()
-
-    return results.map((result) => ({
-      ...result,
-      value: result.id,
-    }))
-  } catch (e: unknown) {
-    console.error(e)
-    return null // Explicitly return null on error
-  }
-}