feat: custom form fields

README.md

@@ -170,15 +170,45 @@ import {formSchema} from '@sanity/form-toolkit/form-schema'
 
 export default defineConfig({
   //...
-  plugins: [formSchema()],
+  plugins: [
+    formSchema({
+      // Optionally, use your own schemas for additional formFields
+      fields: [
+        defineField({
+          name: 'myField',
+          type: 'myObjectType',
+        }),
+      ],
+    }),
+  ],
+})
+```
+
+This will create a "form" document type.
+Then, add a field to your schema with type `form`
+
+```ts
+// ./src/schemaTypes/page.ts
+import {defineField, defineType} from 'sanity'
+
+export default defineType({
+  name: 'page',
+  type: 'document',
+  fields: [
+    defineField({
+      name: 'form',
+      type: 'reference',
+      to: [{type: 'form'}],
+    }),
+  ],
 })
 ```
 
-Then pass a `form` document to the `FormRenderer` component
+Finally, pass a `form` document to the `FormRenderer` component
 
 ```tsx
 import React, {type FC} from 'react'
-import {FormRenderer, type FormDataProps} from '@sanity/form-toolkit/form-schema'
+import {FormRenderer, type FormDataProps} from '@sanity/form-toolkit/form-renderer'
 
 interface NativeFormExampleProps {
   formData: FormDataProps

package.json

@@ -39,6 +39,11 @@
       "import": "./dist/form-schema/index.mjs",
       "default": "./dist/form-schema/index.js"
     },
+    "./form-renderer": {
+      "source": "./src/form-renderer/index.ts",
+      "import": "./dist/form-renderer/index.mjs",
+      "default": "./dist/form-renderer/index.js"
+    },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
@@ -55,6 +60,9 @@
       ],
       "form-schema": [
         "./dist/form-schema/index.d.ts"
+      ],
+      "form-renderer": [
+        "./dist/form-renderer/index.d.ts"
       ]
     }
   },

src/form-schema/components/default-field.tsx → src/form-renderer/components/default-field.tsx

@@ -3,9 +3,12 @@
 import type {FieldComponentProps} from './types'
 
 export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}) => {
-  const {type, label, name, options = {}, choices = []} = field
+  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 = (
@@ -34,10 +37,11 @@
           <textarea
             ref={ref as LegacyRef<HTMLTextAreaElement>}
             name={name}
-            value={value ?? ''}
             onChange={handleChange}
             onBlur={onBlur}
             placeholder={options.placeholder}
+            {...validationRules}
+            value={value ?? ''}
           />
         )
 
@@ -47,11 +51,12 @@
             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>
             ))}
@@ -60,15 +65,16 @@
 
       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>
@@ -76,15 +82,16 @@
 
       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>
@@ -97,7 +104,8 @@
             ref={ref as LegacyRef<HTMLInputElement>}
             name={name}
             value={value ?? options.defaultValue ?? ''}
             onChange={handleChange}
+            {...validationRules}
             onBlur={onBlur}
             placeholder={options.placeholder}
           />

src/form-schema/components/types.ts → src/form-renderer/components/types.ts

@@ -1,4 +1,3 @@
-// types.ts
 export type ValidationRule = {
   type: string
   value: string
@@ -32,7 +31,6 @@ export type FormDataProps = {
     current: string
   }
   fields?: FormField[]
-
   submitButton?: {
     text: string
     position: 'left' | 'center' | 'right'

src/form-renderer/index.ts

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

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

@@ -0,0 +1,14 @@
+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)
+}

src/form-schema/index.ts

@@ -1,7 +1,7 @@
-import {definePlugin} from 'sanity'
+import {definePlugin, type FieldDefinition} from 'sanity'
 
 // import {structureTool} from 'sanity/structure'
-import {FormRenderer} from './components/form-renderer'
+// import {FormRenderer} from './components/form-renderer'
 import {schema} from './schema-types'
 // import {defaultDocumentNode} from './structure'
 
@@ -18,12 +18,18 @@ import {schema} from './schema-types'
  * })
  * ```
  */
-export type {FormDataProps} from './components/types'
-export {FormRenderer}
-export const formSchema = definePlugin(() => {
+export type FieldsOption = Array<FieldDefinition>
+interface FormSchemaPluginOptions {
+  /**
+   * Array of field definitions to be used in the form schema.
+   */
+  fields?: FieldsOption
+}
+
+export const formSchema = definePlugin(({fields = []}: FormSchemaPluginOptions) => {
   return {
     name: 'form-toolkit_form-schema',
-    schema,
+    schema: schema(fields),
     // plugins: [structureTool({defaultDocumentNode})],
   }
 })

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

@@ -1,31 +1,33 @@
 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 = {
-  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 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',
@@ -114,40 +116,52 @@ export const formFieldType = defineType({
       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({
+      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',