@sanity/form-toolkit 1.1.0 → 1.2.1

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

@@ -0,0 +1,113 @@
+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 = []} = field
+  if (!type || !name) return null
+
+  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 'textarea':
+        return (
+          <textarea
+            ref={ref as LegacyRef<HTMLTextAreaElement>}
+            name={name}
+            value={value ?? ''}
+            onChange={handleChange}
+            onBlur={onBlur}
+            placeholder={options.placeholder}
+          />
+        )
+
+      case 'select':
+        return (
+          <select
+            ref={ref as LegacyRef<HTMLSelectElement>}
+            name={name}
+            value={value ?? ''}
+            onChange={handleChange}
+            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}
+            />
+            {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}
+            />
+            {choice.label}
+          </label>
+        ))
+
+      default:
+        return (
+          <input
+            type={type}
+            ref={ref as LegacyRef<HTMLInputElement>}
+            name={name}
+            value={value ?? options.defaultValue ?? ''}
+            onChange={handleChange}
+            onBlur={onBlur}
+            placeholder={options.placeholder}
+          />
+        )
+    }
+  }
+
+  return (
+    <>
+      {label && type != 'hidden' && <label htmlFor={name}>{label}</label>}
+      {renderInput()}
+      {error && <span className="error">{error}</span>}
+    </>
+  )
+}

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

@@ -0,0 +1,58 @@
+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}
+
+      <button type="submit">{formData?.submitButton?.text || 'Submit'}</button>
+    </form>
+  )
+}

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

@@ -0,0 +1,53 @@
+// types.ts
+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-schema/index.ts

@@ -1,27 +1,28 @@
 import {definePlugin} from 'sanity'
+// import {structureTool} from 'sanity/structure'
 
+import {FormRenderer} from './components/form-renderer'
 import {schema} from './schema-types'
-interface FormSchemaConfig {
-  /* nothing here yet */
-}
+// import {defaultDocumentNode} from './structure'
 
 /**
  * Usage in `sanity.config.ts` (or .js)
  *
  * ```ts
  * import {defineConfig} from 'sanity'
- * import {formiumInput} from 'sanity-plugin-form-toolkit'
+ * import {formSchema} from '@sanity/form-toolkit'
  *
  * export default defineConfig({
  *   // ...
- *   plugins: [formiumInput()],
+ *   plugins: [formSchema()],
  * })
  * ```
  */
-// Is Formium dead? All attempts to use the API come back with an expired cert https://github.com/formium/formium/issues/77
-export const formSchema = definePlugin<FormSchemaConfig | void>(() => {
+export {FormRenderer}
+export const formSchema = definePlugin(() => {
   return {
-    name: 'sanity-plugin-form-toolkit_form-schema',
+    name: 'form-toolkit_form-schema',
     schema,
+    // plugins: [structureTool({defaultDocumentNode})],
   }
 })

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

@@ -1,146 +1,210 @@
-import {
-  CalendarIcon,
-  ClockIcon,
-  ColorWheelIcon,
-  DocumentIcon,
-  EarthGlobeIcon,
-  EnvelopeIcon,
-  HashIcon,
-  NumberIcon,
-  TextIcon,
-} from '@sanity/icons'
+import {LuTextCursorInput} from 'react-icons/lu'
 import {defineField, defineType} from 'sanity'
 
+interface ValidationContextDocument {
+  fields?: Array<{
+    name: string
+    type?: string
+  }>
+}
+// Validation options by field type
+export const validationTypesByFieldType = {
+  checkbox: ['minSelectedCount', 'maxSelectedCount', 'custom'],
+  color: ['custom'],
+  date: ['minDate', 'maxDate', 'custom'],
+  'datetime-local': ['minDate', 'maxDate', 'custom'],
+  email: ['pattern', 'custom'],
+  file: ['maxSize', 'fileType', 'custom'],
+  hidden: ['custom'],
+  number: ['min', 'max', 'custom'],
+  // password: ['minLength', 'pattern', 'custom'],
+  radio: ['custom'],
+  range: ['min', 'max', 'step', 'custom'],
+  select: ['custom'],
+  tel: ['pattern', 'custom'],
+  text: ['minLength', 'maxLength', 'pattern', 'custom'],
+  textarea: ['minLength', 'maxLength', 'custom'],
+  time: ['custom'],
+  url: ['pattern', 'custom'],
+}
 export const formFieldType = defineType({
   name: 'formField',
+  title: 'Form Field',
   type: 'object',
+  icon: LuTextCursorInput,
   fields: [
     defineField({
-      name: 'label',
+      name: 'type',
+      title: 'Field Type',
       type: 'string',
-      group: 'info',
-    }),
-    defineField({
-      name: 'name',
-      type: 'slug',
-      group: 'info',
-      validation: (rule) => rule.required(),
       options: {
-        source: 'label',
+        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: 'type',
+      name: 'label',
+      title: 'Field Label',
       type: 'string',
-      group: 'info',
-      validation: (rule) => rule.required(),
-      options: {
-        list: [
-          {value: 'color', title: 'Color'},
-          {value: 'date', title: 'Date'},
-          {value: 'datetime-local', title: 'Date-time'},
-          'email',
-          'file',
-          {value: 'month', title: 'Month & year'},
-          'number',
-          {value: 'tel', title: 'Telephone'},
-          'text',
-          'time',
-          'range',
-          {value: 'url', title: 'URL'},
-          'week',
-        ],
-      },
     }),
     defineField({
-      group: 'validation',
-      name: 'required',
-      type: 'boolean',
-      hidden: ({parent}) => {
-        const unallowedTypes = ['hidden', 'range', 'color']
+      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'
+          }
 
-        return unallowedTypes.includes(parent.type)
-      },
-    }),
-    defineField({
-      group: 'validation',
-      name: 'max',
-      type: 'number',
-      hidden: ({parent}) => {
-        const allowedTypes = ['date', 'month', 'week', 'time', 'datetime-local', 'number', 'range']
+          // Check uniqueness across all fields
+          const doc = context.document as ValidationContextDocument
+          const allFieldNames = doc?.fields?.map((field) => field.name) || []
 
-        return !allowedTypes.includes(parent.type)
-      },
-    }),
-    defineField({
-      group: 'validation',
-      name: 'min',
-      type: 'number',
-      hidden: ({parent}) => {
-        const allowedTypes = ['date', 'month', 'week', 'time', 'datetime-local', 'number', 'range']
+          // Count occurrences of this name
+          const nameCount = allFieldNames.filter((n) => n === name).length
 
-        return !allowedTypes.includes(parent.type)
-      },
+          // 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({
-      group: 'validation',
-      name: 'step',
-      type: 'number',
-      hidden: ({parent}) => {
-        const allowedTypes = ['date', 'month', 'week', 'time', 'datetime-local', 'number', 'range']
-
-        return !allowedTypes.includes(parent.type)
-      },
+      name: 'required',
+      title: 'Required',
+      type: 'boolean',
+      initialValue: false,
     }),
+    // defineField({
+    //   name: 'validation',
+    //   title: 'Validation Rules',
+    //   type: 'array',
+    //   of: [
+    //     {
+    //       type: 'object',
+    //       fields: [
+    //         defineField({
+    //           name: 'type',
+    //           title: 'Validation Type',
+    //           type: 'string',
+
+    //           hidden: ({parent}) => !parent?.type,
+    //           options: {
+    //             // TODO: I think this needs to be a custom input component?
+    //             // list: ({parent}) => (parent?.type ? validationTypesByFieldType[parent.type] : []),
+    //             list: [],
+    //           },
+    //         }),
+    //         defineField({
+    //           name: 'value',
+    //           title: 'Value',
+    //           type: 'string',
+    //         }),
+    //         defineField({
+    //           name: 'message',
+    //           title: 'Error Message',
+    //           type: 'string',
+    //         }),
+    //       ],
+    //     },
+    //   ],
+    // }),
     defineField({
-      group: 'validation',
-      name: 'maxlength',
-      title: 'Max length',
-      type: 'number',
+      name: 'choices',
+      title: 'Choices',
+      type: 'array',
       hidden: ({parent}) => {
-        const allowedTypes = ['text', 'search', 'url', 'tel', 'email', 'password']
-
-        return !allowedTypes.includes(parent.type)
+        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({
-      group: 'validation',
-      name: 'minlength',
-      title: 'Min length',
-      type: 'number',
+      name: 'options',
+      title: 'Field Options',
+      type: 'object',
       hidden: ({parent}) => {
-        const allowedTypes = ['text', 'search', 'url', 'tel', 'email', 'password']
-
-        return !allowedTypes.includes(parent.type)
+        return ['select', 'radio', 'checkbox', 'file'].includes(parent?.type)
       },
+      fields: [
+        defineField({
+          name: 'placeholder',
+          title: 'Placeholder',
+          type: 'string',
+        }),
+        defineField({
+          name: 'defaultValue',
+          title: 'Default Value',
+          type: 'string',
+        }),
+      ],
     }),
   ],
-  groups: [{name: 'info'}, {name: 'validation'}],
   preview: {
     select: {
-      title: 'label',
-      subtitle: 'type',
+      label: 'label',
+      name: 'name',
+      type: 'type',
     },
-    prepare: ({title, subtitle}) => {
-      const icon: Record<
-        string,
-        typeof TextIcon | typeof NumberIcon | typeof CalendarIcon | typeof ClockIcon
-      > = {
-        text: TextIcon,
-        number: NumberIcon,
-        date: CalendarIcon,
-        'datetime-local': CalendarIcon,
-        month: CalendarIcon,
-        time: ClockIcon,
-        color: ColorWheelIcon,
-        email: EnvelopeIcon,
-        url: EarthGlobeIcon,
-        file: DocumentIcon,
-        tel: HashIcon,
-        week: CalendarIcon,
-        range: NumberIcon,
+    prepare({label, name, type}) {
+      return {
+        title: label || name,
+        subtitle: type,
       }
-      return {title, subtitle, media: icon[subtitle]}
     },
   },
 })

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

@@ -1,13 +1,55 @@
+import {FaWpforms} from 'react-icons/fa'
 import {defineField, defineType} from 'sanity'
 
 export const formType = defineType({
   name: 'form',
-  type: 'object',
+  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'}],
     }),
+    defineField({
+      name: 'submitButton',
+      title: 'Submit Button',
+      type: 'object',
+      fields: [
+        defineField({
+          name: 'text',
+          title: 'Button Text',
+          type: 'string',
+          initialValue: 'Submit',
+        }),
+        // defineField({
+        //   name: 'position',
+        //   title: 'Button Position',
+        //   type: 'string',
+        //   options: {
+        //     list: ['left', 'center', 'right'],
+        //   },
+        //   initialValue: 'center',
+        // }),
+      ],
+    }),
   ],
 })

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

@@ -4,5 +4,5 @@ import {formType} from './form'
 import {formFieldType} from './form-field'
 
 export const schema: {types: SchemaTypeDefinition[]} = {
-  types: [formFieldType, formType],
+  types: [formType, formFieldType],
 }