@sanity/form-toolkit 2.1.0 → 2.2.0

package/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',

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

@@ -1,55 +1,52 @@
 import {FaWpforms} from 'react-icons/fa'
-import {defineField, defineType} from 'sanity'
+import {defineField, defineType, type SchemaTypeDefinition} from 'sanity'
 
-export const formType = 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'}],
-    }),
-    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',
-        // }),
-      ],
-    }),
-  ],
-})
+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,8 +1,9 @@
 import type {SchemaTypeDefinition} from 'sanity'
 
+import type {FieldsOption} from '..'
 import {formType} from './form'
 import {formFieldType} from './form-field'
 
-export const schema: {types: SchemaTypeDefinition[]} = {
-  types: [formType, formFieldType],
+export const schema = (fields: FieldsOption): {types: SchemaTypeDefinition[]} => {
+  return {types: [formType(fields), formFieldType]}
 }

package/src/form-schema/structure/document-view.tsx

@@ -1,78 +0,0 @@
-import {type FC, type FormEvent, useState} from 'react'
-
-import {FormRenderer} from '../components/form-renderer'
-import type {FieldState, FormDataProps} from '../components/types'
-
-interface UseStateExampleProps {
-  formData: FormDataProps
-  onSubmit?: (data: Record<string, unknown>) => void
-}
-
-const UseStateExample: FC<UseStateExampleProps> = ({formData, onSubmit = () => null}) => {
-  const [values, setValues] = useState<Record<string, FieldState['value']>>({})
-  const [errors, setErrors] = useState<Record<string, string | undefined>>({})
-
-  const getFieldState = (fieldName: string) => ({
-    value: values[fieldName],
-    onChange: (value: unknown) => {
-      // @ts-expect-error todo: fix this
-      setValues((prev) => ({
-        ...prev,
-        [fieldName]: value,
-      }))
-      // Clear error when value changes
-      if (errors[fieldName]) {
-        setErrors((prev) => ({
-          ...prev,
-          [fieldName]: undefined,
-        }))
-      }
-    },
-    onBlur: () => {
-      // Example validation on blur
-      const field = formData.fields
-        ?.flatMap((formField) => formField)
-        .find((formField) => formField?.name === fieldName)
-
-      if (field?.required && !values[fieldName]) {
-        setErrors((prev) => ({
-          ...prev,
-          [fieldName]: 'This field is required',
-        }))
-      }
-    },
-  })
-
-  const getFieldError = (fieldName: string) => errors[fieldName]
-
-  const handleSubmit = (e: FormEvent) => {
-    e.preventDefault()
-    onSubmit(values)
-  }
-
-  return (
-    <>
-      <style>
-        {`
-        .form-field  > label {
-         display: block;
-        }
-        .form-field {
-          margin-bottom: 1rem;
-        }
-
-      `}
-      </style>
-      <FormRenderer
-        formData={formData}
-        onSubmit={handleSubmit}
-        getFieldState={getFieldState}
-        getFieldError={getFieldError}
-      />
-    </>
-  )
-}
-export const DocumentView = (props: {document: {displayed: FormDataProps}}) => {
-  // console.log('props', props)
-  return <UseStateExample formData={props.document.displayed} />
-}

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

@@ -1,11 +0,0 @@
-import type {DefaultDocumentNodeResolver} from 'sanity/structure'
-
-import {DocumentView} from './document-view'
-
-export const defaultDocumentNode: DefaultDocumentNodeResolver = (S, {schemaType}) => {
-  // Conditionally return a different configuration based on the schema type
-  if (schemaType === 'form') {
-    return S.document().views([S.view.form(), S.view.component(DocumentView).title('Web')])
-  }
-  return S.document().views([S.view.form()])
-}