@sanity/form-toolkit 2.0.0 → 2.2.0

package/dist/form-schema/index.mjs

@@ -1,119 +1,7 @@
-import { defineType, defineField, definePlugin } from "sanity";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { defineType, defineField, useFormValue, definePlugin } from "sanity";
 import { FaWpforms } from "react-icons/fa";
 import { LuTextCursorInput } from "react-icons/lu";
-const DefaultField = ({ field, fieldState, error }) => {
-  const { type, label, name, options = {}, choices = [] } = field;
-  if (!type || !name) return null;
-  const { value, onChange, onBlur, ref } = fieldState, handleChange = (e) => {
-    onChange(e.target.value);
-  }, handleCheckboxChange = (e, choiceValue) => {
-    if (Array.isArray(value)) {
-      const newValue = e.target.checked ? [...value, choiceValue] : value.filter((v) => v !== choiceValue);
-      onChange(newValue);
-    } else
-      onChange(e.target.checked ? choiceValue : "");
-  }, renderInput = () => {
-    switch (type) {
-      case "textarea":
-        return /* @__PURE__ */ jsx(
-          "textarea",
-          {
-            ref,
-            name,
-            value: value ?? "",
-            onChange: handleChange,
-            onBlur,
-            placeholder: options.placeholder
-          }
-        );
-      case "select":
-        return /* @__PURE__ */ jsx(
-          "select",
-          {
-            ref,
-            name,
-            value: value ?? "",
-            onChange: handleChange,
-            onBlur,
-            children: choices?.map((choice, i) => /* @__PURE__ */ jsx("option", { value: choice.value, children: choice.label }, i))
-          }
-        );
-      case "radio":
-        return choices?.map((choice, i) => /* @__PURE__ */ jsxs("label", { children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "radio",
-              name,
-              ref,
-              value: choice.value,
-              checked: value === choice.value,
-              onChange: handleChange,
-              onBlur
-            }
-          ),
-          choice.label
-        ] }, i));
-      case "checkbox":
-        return choices?.map((choice, i) => /* @__PURE__ */ jsxs("label", { children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "checkbox",
-              name,
-              ref,
-              value: choice.value,
-              checked: Array.isArray(value) ? value.includes(choice.value) : value === choice.value,
-              onChange: (e) => handleCheckboxChange(e, choice.value),
-              onBlur
-            }
-          ),
-          choice.label
-        ] }, i));
-      default:
-        return /* @__PURE__ */ jsx(
-          "input",
-          {
-            type,
-            ref,
-            name,
-            value: value ?? options.defaultValue ?? "",
-            onChange: handleChange,
-            onBlur,
-            placeholder: options.placeholder
-          }
-        );
-    }
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    label && type != "hidden" && /* @__PURE__ */ jsx("label", { htmlFor: name, children: label }),
-    renderInput(),
-    error && /* @__PURE__ */ jsx("span", { className: "error", children: error })
-  ] });
-}, FormRenderer = (props) => {
-  const {
-    formData,
-    getFieldState = (name) => ({
-      value: void 0,
-      onChange: () => {
-      },
-      name
-      // Pass name to field for native form handling
-    }),
-    getFieldError,
-    fieldComponents = {},
-    children
-  } = props, renderField = (field) => {
-    const CustomComponent = fieldComponents[field.type], fieldState = getFieldState(field.name), error = getFieldError?.(field.name);
-    return CustomComponent ? /* @__PURE__ */ jsx(CustomComponent, { field, fieldState, error }) : /* @__PURE__ */ jsx(DefaultField, { field, fieldState, error });
-  }, elProps = Object.assign({}, props);
-  return delete elProps.formData, delete elProps.getFieldState, delete elProps.getFieldError, delete elProps.fieldComponents, /* @__PURE__ */ jsxs("form", { ...elProps, id: elProps.id ?? formData?.id?.current, children: [
-    formData?.fields?.map((field) => /* @__PURE__ */ jsx("div", { className: "form-field", children: renderField(field) }, field._key)),
-    children,
-    /* @__PURE__ */ jsx("button", { type: "submit", children: formData?.submitButton?.text || "Submit" })
-  ] });
-}, formType = defineType({
+const formType = (fields) => defineType({
   name: "form",
   title: "Form",
   type: "document",
@@ -139,7 +27,7 @@ const DefaultField = ({ field, fieldState, error }) => {
       name: "fields",
       title: "Form Fields",
       type: "array",
-      of: [{ type: "formField" }]
+      of: [{ type: "formField" }, ...fields]
     }),
     defineField({
       name: "submitButton",
@@ -152,36 +40,30 @@ const DefaultField = ({ field, fieldState, error }) => {
           type: "string",
           initialValue: "Submit"
         })
-        // defineField({
-        //   name: 'position',
-        //   title: 'Button Position',
-        //   type: 'string',
-        //   options: {
-        //     list: ['left', 'center', 'right'],
-        //   },
-        //   initialValue: 'center',
-        // }),
       ]
     })
   ]
-}), 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"]
+}), ValidationType = (props) => {
+  const { type } = useFormValue([...props.path.slice(0, 2)]);
+  return type && props.schemaType?.options && (props.schemaType.options.list = validationTypesByFieldType[type]), props.renderDefault(props);
+}, validationTypesByFieldType = {
+  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"]
 }, formFieldType = defineType({
   name: "formField",
   title: "Form Field",
@@ -236,39 +118,52 @@ const DefaultField = ({ field, fieldState, error }) => {
       type: "boolean",
       initialValue: !1
     }),
-    // 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 !0;
+        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",
@@ -324,15 +219,12 @@ const DefaultField = ({ field, fieldState, error }) => {
       };
     }
   }
-}), schema = {
-  types: [formType, formFieldType]
-}, formSchema = definePlugin(() => ({
+}), schema = (fields) => ({ types: [formType(fields), formFieldType] }), formSchema = definePlugin(({ fields = [] }) => ({
   name: "form-toolkit_form-schema",
-  schema
+  schema: schema(fields)
   // plugins: [structureTool({defaultDocumentNode})],
 }));
 export {
-  FormRenderer,
   formSchema
 };
 //# sourceMappingURL=index.mjs.map

package/dist/form-schema/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/form-schema/components/default-field.tsx","../../src/form-schema/components/form-renderer.tsx","../../src/form-schema/schema-types/form.ts","../../src/form-schema/schema-types/form-field.ts","../../src/form-schema/schema-types/index.ts","../../src/form-schema/index.ts"],"sourcesContent":["import type {ChangeEvent, FC, LegacyRef} from 'react'\n\nimport type {FieldComponentProps} from './types'\n\nexport const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}) => {\n  const {type, label, name, options = {}, choices = []} = field\n  if (!type || !name) return null\n\n  const {value, onChange, onBlur, ref} = fieldState\n\n  const handleChange = (\n    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>,\n  ) => {\n    onChange(e.target.value)\n  }\n\n  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>, choiceValue: string) => {\n    if (Array.isArray(value)) {\n      const newValue = e.target.checked\n        ? [...value, choiceValue]\n        : value.filter((v: string) => v !== choiceValue)\n      onChange(newValue)\n    } else {\n      onChange(e.target.checked ? choiceValue : '')\n    }\n  }\n\n  const renderInput = () => {\n    switch (type) {\n      case 'textarea':\n        return (\n          <textarea\n            ref={ref as LegacyRef<HTMLTextAreaElement>}\n            name={name}\n            value={value ?? ''}\n            onChange={handleChange}\n            onBlur={onBlur}\n            placeholder={options.placeholder}\n          />\n        )\n\n      case 'select':\n        return (\n          <select\n            ref={ref as LegacyRef<HTMLSelectElement>}\n            name={name}\n            value={value ?? ''}\n            onChange={handleChange}\n            onBlur={onBlur}\n          >\n            {choices?.map((choice, i) => (\n              <option key={i} value={choice.value}>\n                {choice.label}\n              </option>\n            ))}\n          </select>\n        )\n\n      case 'radio':\n        return choices?.map((choice, i) => (\n          <label key={i}>\n            <input\n              type=\"radio\"\n              name={name}\n              ref={ref as LegacyRef<HTMLInputElement>}\n              value={choice.value}\n              checked={value === choice.value}\n              onChange={handleChange}\n              onBlur={onBlur}\n            />\n            {choice.label}\n          </label>\n        ))\n\n      case 'checkbox':\n        return choices?.map((choice, i) => (\n          <label key={i}>\n            <input\n              type=\"checkbox\"\n              name={name}\n              ref={ref as LegacyRef<HTMLInputElement>}\n              value={choice.value}\n              checked={Array.isArray(value) ? value.includes(choice.value) : value === choice.value}\n              onChange={(e) => handleCheckboxChange(e, choice.value)}\n              onBlur={onBlur}\n            />\n            {choice.label}\n          </label>\n        ))\n\n      default:\n        return (\n          <input\n            type={type}\n            ref={ref as LegacyRef<HTMLInputElement>}\n            name={name}\n            value={value ?? options.defaultValue ?? ''}\n            onChange={handleChange}\n            onBlur={onBlur}\n            placeholder={options.placeholder}\n          />\n        )\n    }\n  }\n\n  return (\n    <>\n      {label && type != 'hidden' && <label htmlFor={name}>{label}</label>}\n      {renderInput()}\n      {error && <span className=\"error\">{error}</span>}\n    </>\n  )\n}\n","import type {ComponentType, FC, HTMLProps} from 'react'\n\nimport {DefaultField} from './default-field'\nimport type {FieldComponentProps, FieldState, FormDataProps, FormField} from './types'\n\ninterface FormRendererProps extends HTMLProps<HTMLFormElement> {\n  formData?: FormDataProps\n  // Function to get field state for a given field name\n  getFieldState?: (fieldName: string) => FieldState\n  // Function to get field error for a given field name\n  getFieldError?: (fieldName: string) => string | undefined\n  // Override default field components\n  fieldComponents?: Record<string, ComponentType<FieldComponentProps>>\n}\n\nexport const FormRenderer: FC<FormRendererProps> = (props) => {\n  const {\n    formData,\n    getFieldState = (name) => ({\n      value: undefined,\n      onChange: () => {},\n      name, // Pass name to field for native form handling\n    }),\n    getFieldError,\n    fieldComponents = {},\n    children,\n  } = props\n  const renderField = (field: FormField) => {\n    const CustomComponent = fieldComponents[field.type]\n    const fieldState = getFieldState(field.name)\n    const error = getFieldError?.(field.name)\n\n    if (CustomComponent) {\n      return <CustomComponent field={field} fieldState={fieldState} error={error} />\n    }\n\n    return <DefaultField field={field} fieldState={fieldState} error={error} />\n  }\n  const elProps = Object.assign({}, props)\n  delete elProps.formData\n  delete elProps.getFieldState\n  delete elProps.getFieldError\n  delete elProps.fieldComponents\n\n  return (\n    <form {...elProps} id={elProps.id ?? formData?.id?.current}>\n      {formData?.fields?.map((field) => (\n        <div key={field._key} className=\"form-field\">\n          {renderField(field)}\n        </div>\n      ))}\n\n      {children}\n\n      <button type=\"submit\">{formData?.submitButton?.text || 'Submit'}</button>\n    </form>\n  )\n}\n","import {FaWpforms} from 'react-icons/fa'\nimport {defineField, defineType} from 'sanity'\n\nexport const formType = defineType({\n  name: 'form',\n  title: 'Form',\n  type: 'document',\n  icon: FaWpforms,\n  fields: [\n    defineField({\n      name: 'title',\n      title: 'Form Title',\n      type: 'string',\n      description: 'Internal title for the form',\n      validation: (Rule) => Rule.required(),\n    }),\n    defineField({\n      name: 'id',\n      title: 'Form ID',\n      type: 'slug',\n      options: {\n        source: 'title',\n      },\n      // validation: (Rule) => Rule.required(),\n    }),\n    defineField({\n      name: 'fields',\n      title: 'Form Fields',\n      type: 'array',\n      of: [{type: 'formField'}],\n    }),\n    defineField({\n      name: 'submitButton',\n      title: 'Submit Button',\n      type: 'object',\n      fields: [\n        defineField({\n          name: 'text',\n          title: 'Button Text',\n          type: 'string',\n          initialValue: 'Submit',\n        }),\n        // defineField({\n        //   name: 'position',\n        //   title: 'Button Position',\n        //   type: 'string',\n        //   options: {\n        //     list: ['left', 'center', 'right'],\n        //   },\n        //   initialValue: 'center',\n        // }),\n      ],\n    }),\n  ],\n})\n","import {LuTextCursorInput} from 'react-icons/lu'\nimport {defineField, defineType} from 'sanity'\n\ninterface ValidationContextDocument {\n  fields?: Array<{\n    name: string\n    type?: string\n  }>\n}\n// Validation options by field type\nexport const validationTypesByFieldType = {\n  checkbox: ['minSelectedCount', 'maxSelectedCount', 'custom'],\n  color: ['custom'],\n  date: ['minDate', 'maxDate', 'custom'],\n  'datetime-local': ['minDate', 'maxDate', 'custom'],\n  email: ['pattern', 'custom'],\n  file: ['maxSize', 'fileType', 'custom'],\n  hidden: ['custom'],\n  number: ['min', 'max', 'custom'],\n  // password: ['minLength', 'pattern', 'custom'],\n  radio: ['custom'],\n  range: ['min', 'max', 'step', 'custom'],\n  select: ['custom'],\n  tel: ['pattern', 'custom'],\n  text: ['minLength', 'maxLength', 'pattern', 'custom'],\n  textarea: ['minLength', 'maxLength', 'custom'],\n  time: ['custom'],\n  url: ['pattern', 'custom'],\n}\nexport const formFieldType = defineType({\n  name: 'formField',\n  title: 'Form Field',\n  type: 'object',\n  icon: LuTextCursorInput,\n  fields: [\n    defineField({\n      name: 'type',\n      title: 'Field Type',\n      type: 'string',\n      options: {\n        list: Object.keys(validationTypesByFieldType).map((type) => {\n          const title = (fieldType: string) => {\n            switch (fieldType) {\n              case 'datetime-local':\n                return 'Date & Time'\n              case 'textarea':\n                return 'Text Area'\n              case 'tel':\n                return 'Phone Number'\n              default:\n                return fieldType.charAt(0).toUpperCase() + fieldType.slice(1)\n            }\n          }\n          return {title: title(type), value: type}\n        }),\n      },\n    }),\n    defineField({\n      name: 'label',\n      title: 'Field Label',\n      type: 'string',\n    }),\n    defineField({\n      name: 'name',\n      title: 'Field Name',\n      type: 'string',\n      description:\n        'Must start with a letter and contain only letters, numbers, underscores, or hyphens. Must be unique within the form.',\n      validation: (Rule) =>\n        Rule.required().custom((name, context) => {\n          if (!name) {\n            return 'Required'\n          }\n          // Check format (HTML ID/name rules)\n          if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(name)) {\n            return 'Field name must start with a letter and contain only letters, numbers, underscores, or hyphens'\n          }\n\n          // Check uniqueness across all fields\n          const doc = context.document as ValidationContextDocument\n          const allFieldNames = doc?.fields?.map((field) => field.name) || []\n\n          // Count occurrences of this name\n          const nameCount = allFieldNames.filter((n) => n === name).length\n\n          // If we find more than one occurrence (including current field), it's not unique\n          if (nameCount > 1) {\n            return 'Field name must be unique across all form fields'\n          }\n\n          // Check for reserved HTML form attributes\n          const reservedNames = [\n            'action',\n            'method',\n            'target',\n            'enctype',\n            'accept-charset',\n            'autocomplete',\n            'novalidate',\n            'rel',\n            'submit',\n            'reset',\n          ]\n          if (reservedNames.includes(name.toLowerCase())) {\n            return 'This name is reserved for HTML form attributes. Please choose a different name.'\n          }\n\n          return true\n        }),\n    }),\n    defineField({\n      name: 'required',\n      title: 'Required',\n      type: 'boolean',\n      initialValue: false,\n    }),\n    // defineField({\n    //   name: 'validation',\n    //   title: 'Validation Rules',\n    //   type: 'array',\n    //   of: [\n    //     {\n    //       type: 'object',\n    //       fields: [\n    //         defineField({\n    //           name: 'type',\n    //           title: 'Validation Type',\n    //           type: 'string',\n\n    //           hidden: ({parent}) => !parent?.type,\n    //           options: {\n    //             // TODO: I think this needs to be a custom input component?\n    //             // list: ({parent}) => (parent?.type ? validationTypesByFieldType[parent.type] : []),\n    //             list: [],\n    //           },\n    //         }),\n    //         defineField({\n    //           name: 'value',\n    //           title: 'Value',\n    //           type: 'string',\n    //         }),\n    //         defineField({\n    //           name: 'message',\n    //           title: 'Error Message',\n    //           type: 'string',\n    //         }),\n    //       ],\n    //     },\n    //   ],\n    // }),\n    defineField({\n      name: 'choices',\n      title: 'Choices',\n      type: 'array',\n      hidden: ({parent}) => {\n        return !['select', 'radio', 'checkbox'].includes(parent?.type)\n      },\n      of: [\n        {\n          type: 'object',\n          fields: [\n            defineField({\n              name: 'label',\n              title: 'Label',\n              type: 'string',\n            }),\n            defineField({\n              name: 'value',\n              title: 'Value',\n              type: 'string',\n            }),\n          ],\n        },\n      ],\n    }),\n    defineField({\n      name: 'options',\n      title: 'Field Options',\n      type: 'object',\n      hidden: ({parent}) => {\n        return ['select', 'radio', 'checkbox', 'file'].includes(parent?.type)\n      },\n      fields: [\n        defineField({\n          name: 'placeholder',\n          title: 'Placeholder',\n          type: 'string',\n        }),\n        defineField({\n          name: 'defaultValue',\n          title: 'Default Value',\n          type: 'string',\n        }),\n      ],\n    }),\n  ],\n  preview: {\n    select: {\n      label: 'label',\n      name: 'name',\n      type: 'type',\n    },\n    prepare({label, name, type}) {\n      return {\n        title: label || name,\n        subtitle: type,\n      }\n    },\n  },\n})\n","import type {SchemaTypeDefinition} from 'sanity'\n\nimport {formType} from './form'\nimport {formFieldType} from './form-field'\n\nexport const schema: {types: SchemaTypeDefinition[]} = {\n  types: [formType, formFieldType],\n}\n","import {definePlugin} from 'sanity'\n\n// import {structureTool} from 'sanity/structure'\nimport {FormRenderer} from './components/form-renderer'\nimport {schema} from './schema-types'\n// import {defaultDocumentNode} from './structure'\n\n/**\n * Usage in `sanity.config.ts` (or .js)\n *\n * ```ts\n * import {defineConfig} from 'sanity'\n * import {formSchema} from '@sanity/form-toolkit'\n *\n * export default defineConfig({\n *   // ...\n *   plugins: [formSchema()],\n * })\n * ```\n */\nexport type {FormDataProps} from './components/types'\nexport {FormRenderer}\nexport const formSchema = definePlugin(() => {\n  return {\n    name: 'form-toolkit_form-schema',\n    schema,\n    // plugins: [structureTool({defaultDocumentNode})],\n  }\n})\n"],"names":[],"mappings":";;;;AAIO,MAAM,eAAwC,CAAC,EAAC,OAAO,YAAY,YAAW;AAC7E,QAAA,EAAC,MAAM,OAAO,MAAM,UAAU,IAAI,UAAU,CAAC,EAAA,IAAK;AACxD,MAAI,CAAC,QAAQ,CAAC,KAAa,QAAA;AAErB,QAAA,EAAC,OAAO,UAAU,QAAQ,QAAO,YAEjC,eAAe,CACnB,MACG;AACM,aAAA,EAAE,OAAO,KAAK;AAAA,EAAA,GAGnB,uBAAuB,CAAC,GAAkC,gBAAwB;AAClF,QAAA,MAAM,QAAQ,KAAK,GAAG;AACxB,YAAM,WAAW,EAAE,OAAO,UACtB,CAAC,GAAG,OAAO,WAAW,IACtB,MAAM,OAAO,CAAC,MAAc,MAAM,WAAW;AACjD,eAAS,QAAQ;AAAA,IACnB;AACE,eAAS,EAAE,OAAO,UAAU,cAAc,EAAE;AAAA,EAEhD,GAEM,cAAc,MAAM;AACxB,YAAQ,MAAM;AAAA,MACZ,KAAK;AAED,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,OAAO,SAAS;AAAA,YAChB,UAAU;AAAA,YACV;AAAA,YACA,aAAa,QAAQ;AAAA,UAAA;AAAA,QACvB;AAAA,MAGJ,KAAK;AAED,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA,OAAO,SAAS;AAAA,YAChB,UAAU;AAAA,YACV;AAAA,YAEC,UAAS,SAAA,IAAI,CAAC,QAAQ,MACrB,oBAAC,UAAe,EAAA,OAAO,OAAO,OAC3B,UAAO,OAAA,MAAA,GADG,CAEb,CACD;AAAA,UAAA;AAAA,QACH;AAAA,MAGJ,KAAK;AACH,eAAO,SAAS,IAAI,CAAC,QAAQ,2BAC1B,SACC,EAAA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,OAAO,OAAO;AAAA,cACd,SAAS,UAAU,OAAO;AAAA,cAC1B,UAAU;AAAA,cACV;AAAA,YAAA;AAAA,UACF;AAAA,UACC,OAAO;AAAA,QAAA,EAAA,GAVE,CAWZ,CACD;AAAA,MAEH,KAAK;AACH,eAAO,SAAS,IAAI,CAAC,QAAQ,2BAC1B,SACC,EAAA,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA;AAAA,cACA,OAAO,OAAO;AAAA,cACd,SAAS,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,OAAO,KAAK,IAAI,UAAU,OAAO;AAAA,cAChF,UAAU,CAAC,MAAM,qBAAqB,GAAG,OAAO,KAAK;AAAA,cACrD;AAAA,YAAA;AAAA,UACF;AAAA,UACC,OAAO;AAAA,QAAA,EAAA,GAVE,CAWZ,CACD;AAAA,MAEH;AAEI,eAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA,OAAO,SAAS,QAAQ,gBAAgB;AAAA,YACxC,UAAU;AAAA,YACV;AAAA,YACA,aAAa,QAAQ;AAAA,UAAA;AAAA,QACvB;AAAA,IAAA;AAAA,EAGR;AAEA,SAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,SAAS,QAAQ,YAAY,oBAAC,SAAM,EAAA,SAAS,MAAO,UAAM,OAAA;AAAA,IAC1D,YAAY;AAAA,IACZ,SAAS,oBAAC,QAAK,EAAA,WAAU,SAAS,UAAM,MAAA,CAAA;AAAA,EAAA,GAC3C;AAEJ,GCjGa,eAAsC,CAAC,UAAU;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,gBAAgB,CAAC,UAAU;AAAA,MACzB,OAAO;AAAA,MACP,UAAU,MAAM;AAAA,MAAC;AAAA,MACjB;AAAA;AAAA,IAAA;AAAA,IAEF;AAAA,IACA,kBAAkB,CAAC;AAAA,IACnB;AAAA,EAAA,IACE,OACE,cAAc,CAAC,UAAqB;AACxC,UAAM,kBAAkB,gBAAgB,MAAM,IAAI,GAC5C,aAAa,cAAc,MAAM,IAAI,GACrC,QAAQ,gBAAgB,MAAM,IAAI;AAEpC,WAAA,kBACM,oBAAA,iBAAA,EAAgB,OAAc,YAAwB,MAAc,CAAA,IAGtE,oBAAA,cAAA,EAAa,OAAc,YAAwB,MAAc,CAAA;AAAA,KAErE,UAAU,OAAO,OAAO,CAAA,GAAI,KAAK;AAChC,SAAA,OAAA,QAAQ,UACf,OAAO,QAAQ,eACf,OAAO,QAAQ,eACf,OAAO,QAAQ,iBAGZ,qBAAA,QAAA,EAAM,GAAG,SAAS,IAAI,QAAQ,MAAM,UAAU,IAAI,SAChD,UAAA;AAAA,IAAA,UAAU,QAAQ,IAAI,CAAC,UACrB,oBAAA,OAAA,EAAqB,WAAU,cAC7B,UAAY,YAAA,KAAK,EADV,GAAA,MAAM,IAEhB,CACD;AAAA,IAEA;AAAA,wBAEA,UAAO,EAAA,MAAK,UAAU,UAAU,UAAA,cAAc,QAAQ,SAAS,CAAA;AAAA,EAAA,GAClE;AAEJ,GCtDa,WAAW,WAAW;AAAA,EACjC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY,CAAC,SAAS,KAAK,SAAS;AAAA,IAAA,CACrC;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,QAAQ;AAAA,MAAA;AAAA;AAAA,IACV,CAED;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,IAAI,CAAC,EAAC,MAAM,YAAY,CAAA;AAAA,IAAA,CACzB;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM;AAAA,UACN,cAAc;AAAA,QACf,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,IAWJ,CAAA;AAAA,EAAA;AAEL,CAAC,GC5CY,6BAA6B;AAAA,EACxC,UAAU,CAAC,oBAAoB,oBAAoB,QAAQ;AAAA,EAC3D,OAAO,CAAC,QAAQ;AAAA,EAChB,MAAM,CAAC,WAAW,WAAW,QAAQ;AAAA,EACrC,kBAAkB,CAAC,WAAW,WAAW,QAAQ;AAAA,EACjD,OAAO,CAAC,WAAW,QAAQ;AAAA,EAC3B,MAAM,CAAC,WAAW,YAAY,QAAQ;AAAA,EACtC,QAAQ,CAAC,QAAQ;AAAA,EACjB,QAAQ,CAAC,OAAO,OAAO,QAAQ;AAAA;AAAA,EAE/B,OAAO,CAAC,QAAQ;AAAA,EAChB,OAAO,CAAC,OAAO,OAAO,QAAQ,QAAQ;AAAA,EACtC,QAAQ,CAAC,QAAQ;AAAA,EACjB,KAAK,CAAC,WAAW,QAAQ;AAAA,EACzB,MAAM,CAAC,aAAa,aAAa,WAAW,QAAQ;AAAA,EACpD,UAAU,CAAC,aAAa,aAAa,QAAQ;AAAA,EAC7C,MAAM,CAAC,QAAQ;AAAA,EACf,KAAK,CAAC,WAAW,QAAQ;AAC3B,GACa,gBAAgB,WAAW;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,IACN,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,QACP,MAAM,OAAO,KAAK,0BAA0B,EAAE,IAAI,CAAC,UAa1C,EAAC,QAZM,CAAC,cAAsB;AACnC,kBAAQ,WAAW;AAAA,YACjB,KAAK;AACI,qBAAA;AAAA,YACT,KAAK;AACI,qBAAA;AAAA,YACT,KAAK;AACI,qBAAA;AAAA,YACT;AACS,qBAAA,UAAU,OAAO,CAAC,EAAE,gBAAgB,UAAU,MAAM,CAAC;AAAA,UAAA;AAAA,QAG7C,GAAA,IAAI,GAAG,OAAO,OACpC;AAAA,MAAA;AAAA,IACH,CACD;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,IAAA,CACP;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,aACE;AAAA,MACF,YAAY,CAAC,SACX,KAAK,SAAW,EAAA,OAAO,CAAC,MAAM,YACvB,OAIA,2BAA2B,KAAK,IAAI,KAK7B,QAAQ,UACO,QAAQ,IAAI,CAAC,UAAU,MAAM,IAAI,KAAK,CAAA,GAGjC,OAAO,CAAC,MAAM,MAAM,IAAI,EAAE,SAG1C,IACP,qDAIa;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,EAEgB,SAAS,KAAK,YAAA,CAAa,IACpC,oFAGF,KAhCE,mGAJA,UAqCV;AAAA,IAAA,CACJ;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,cAAc;AAAA,IAAA,CACf;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAmCD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ,CAAC,EAAC,OACD,MAAA,CAAC,CAAC,UAAU,SAAS,UAAU,EAAE,SAAS,QAAQ,IAAI;AAAA,MAE/D,IAAI;AAAA,QACF;AAAA,UACE,MAAM;AAAA,UACN,QAAQ;AAAA,YACN,YAAY;AAAA,cACV,MAAM;AAAA,cACN,OAAO;AAAA,cACP,MAAM;AAAA,YAAA,CACP;AAAA,YACD,YAAY;AAAA,cACV,MAAM;AAAA,cACN,OAAO;AAAA,cACP,MAAM;AAAA,YACP,CAAA;AAAA,UAAA;AAAA,QACH;AAAA,MACF;AAAA,IACF,CACD;AAAA,IACD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,QAAQ,CAAC,EAAC,OACD,MAAA,CAAC,UAAU,SAAS,YAAY,MAAM,EAAE,SAAS,QAAQ,IAAI;AAAA,MAEtE,QAAQ;AAAA,QACN,YAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM;AAAA,QAAA,CACP;AAAA,QACD,YAAY;AAAA,UACV,MAAM;AAAA,UACN,OAAO;AAAA,UACP,MAAM;AAAA,QACP,CAAA;AAAA,MAAA;AAAA,IAEJ,CAAA;AAAA,EACH;AAAA,EACA,SAAS;AAAA,IACP,QAAQ;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,IACR;AAAA,IACA,QAAQ,EAAC,OAAO,MAAM,QAAO;AACpB,aAAA;AAAA,QACL,OAAO,SAAS;AAAA,QAChB,UAAU;AAAA,MACZ;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC,GC5MY,SAA0C;AAAA,EACrD,OAAO,CAAC,UAAU,aAAa;AACjC,GCea,aAAa,aAAa,OAC9B;AAAA,EACL,MAAM;AAAA,EACN;AAAA;AAEF,EACD;"}
+{"version":3,"file":"index.mjs","sources":["../../src/form-schema/schema-types/form.ts","../../src/form-schema/components/validation-type.tsx","../../src/form-schema/schema-types/form-field.ts","../../src/form-schema/schema-types/index.ts","../../src/form-schema/index.ts"],"sourcesContent":["import {FaWpforms} from 'react-icons/fa'\nimport {defineField, defineType, type SchemaTypeDefinition} from 'sanity'\n\nimport type {FieldsOption} from '..'\n\nexport const formType = (fields: FieldsOption): SchemaTypeDefinition => {\n  // const fieldsOf =\n  //   fields && fields.length ? [{type: 'formField'}, ...fields] : [{type: 'formField'}]\n  return defineType({\n    name: 'form',\n    title: 'Form',\n    type: 'document',\n    icon: FaWpforms,\n    fields: [\n      defineField({\n        name: 'title',\n        title: 'Form Title',\n        type: 'string',\n        description: 'Internal title for the form',\n        validation: (Rule) => Rule.required(),\n      }),\n      defineField({\n        name: 'id',\n        title: 'Form ID',\n        type: 'slug',\n        options: {\n          source: 'title',\n        },\n        // validation: (Rule) => Rule.required(),\n      }),\n      defineField({\n        name: 'fields',\n        title: 'Form Fields',\n        type: 'array',\n        of: [{type: 'formField'}, ...fields],\n      }),\n      defineField({\n        name: 'submitButton',\n        title: 'Submit Button',\n        type: 'object',\n        fields: [\n          defineField({\n            name: 'text',\n            title: 'Button Text',\n            type: 'string',\n            initialValue: 'Submit',\n          }),\n        ],\n      }),\n    ],\n  })\n}\n","import type {StringInputProps} from 'sanity'\nimport {useFormValue} from 'sanity'\n\nimport type {FormField} from '../../form-renderer/components/types'\nimport {validationTypesByFieldType} from '../schema-types/form-field'\n\nexport const ValidationType = (props: StringInputProps) => {\n  const {type} = useFormValue([...props.path.slice(0, 2)]) as FormField\n  if (!type) return props.renderDefault(props)\n  if (props.schemaType?.options) {\n    props.schemaType.options.list = validationTypesByFieldType[type]\n  }\n  return props.renderDefault(props)\n}\n","import {LuTextCursorInput} from 'react-icons/lu'\nimport {defineField, defineType} from 'sanity'\n\nimport {ValidationType} from '../components/validation-type'\ninterface ValidationContextDocument {\n  fields?: Array<{\n    name: string\n    type?: string\n  }>\n}\n\n// Validation options by field type\nexport const validationTypesByFieldType: Record<string, string[]> = {\n  checkbox: ['minSelectedCount', 'maxSelectedCount'],\n  color: [],\n  date: ['minDate', 'maxDate'],\n  'datetime-local': ['minDate', 'maxDate'],\n  email: ['pattern'],\n  file: ['maxSize', 'fileType'],\n  hidden: [],\n  number: ['min', 'max'],\n  // password: ['minLength', 'pattern'],\n  radio: [],\n  range: ['min', 'max', 'step'],\n  select: [],\n  tel: ['pattern'],\n  text: ['minLength', 'maxLength', 'pattern'],\n  textarea: ['minLength', 'maxLength'],\n  time: [],\n  url: ['pattern'],\n}\nexport const formFieldType = defineType({\n  name: 'formField',\n  title: 'Form Field',\n  type: 'object',\n  icon: LuTextCursorInput,\n  fields: [\n    defineField({\n      name: 'type',\n      title: 'Field Type',\n      type: 'string',\n      options: {\n        list: Object.keys(validationTypesByFieldType).map((type) => {\n          const title = (fieldType: string) => {\n            switch (fieldType) {\n              case 'datetime-local':\n                return 'Date & Time'\n              case 'textarea':\n                return 'Text Area'\n              case 'tel':\n                return 'Phone Number'\n              default:\n                return fieldType.charAt(0).toUpperCase() + fieldType.slice(1)\n            }\n          }\n          return {title: title(type), value: type}\n        }),\n      },\n    }),\n    defineField({\n      name: 'label',\n      title: 'Field Label',\n      type: 'string',\n    }),\n    defineField({\n      name: 'name',\n      title: 'Field Name',\n      type: 'string',\n      description:\n        'Must start with a letter and contain only letters, numbers, underscores, or hyphens. Must be unique within the form.',\n      validation: (Rule) =>\n        Rule.required().custom((name, context) => {\n          if (!name) {\n            return 'Required'\n          }\n          // Check format (HTML ID/name rules)\n          if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(name)) {\n            return 'Field name must start with a letter and contain only letters, numbers, underscores, or hyphens'\n          }\n\n          // Check uniqueness across all fields\n          const doc = context.document as ValidationContextDocument\n          const allFieldNames = doc?.fields?.map((field) => field.name) || []\n\n          // Count occurrences of this name\n          const nameCount = allFieldNames.filter((n) => n === name).length\n\n          // If we find more than one occurrence (including current field), it's not unique\n          if (nameCount > 1) {\n            return 'Field name must be unique across all form fields'\n          }\n\n          // Check for reserved HTML form attributes\n          const reservedNames = [\n            'action',\n            'method',\n            'target',\n            'enctype',\n            'accept-charset',\n            'autocomplete',\n            'novalidate',\n            'rel',\n            'submit',\n            'reset',\n          ]\n          if (reservedNames.includes(name.toLowerCase())) {\n            return 'This name is reserved for HTML form attributes. Please choose a different name.'\n          }\n\n          return true\n        }),\n    }),\n    defineField({\n      name: 'required',\n      title: 'Required',\n      type: 'boolean',\n      initialValue: false,\n    }),\n    defineField({\n      name: 'validation',\n      title: 'Validation Rules',\n      type: 'array',\n      hidden: ({parent}) => {\n        if (!parent?.type) return true\n        const validationTypes = validationTypesByFieldType[parent.type]\n        return !validationTypes || validationTypes.length === 0\n      },\n      of: [\n        {\n          type: 'object',\n          fields: [\n            defineField({\n              name: 'type',\n              title: 'Validation Type',\n              type: 'string',\n              options: {\n                // TODO: I think this needs to be a custom input component?\n                // list: ({parent}) => (parent?.type ? validationTypesByFieldType[parent.type] : []),\n                list: [],\n              },\n              components: {\n                input: ValidationType,\n              },\n            }),\n            defineField({\n              name: 'value',\n              title: 'Value',\n              type: 'string',\n            }),\n            defineField({\n              name: 'message',\n              title: 'Error Message',\n              type: 'string',\n            }),\n          ],\n          preview: {\n            select: {\n              title: 'type',\n              subtitle: 'value',\n            },\n          },\n        },\n      ],\n    }),\n    defineField({\n      name: 'choices',\n      title: 'Choices',\n      type: 'array',\n      hidden: ({parent}) => {\n        return !['select', 'radio', 'checkbox'].includes(parent?.type)\n      },\n      of: [\n        {\n          type: 'object',\n          fields: [\n            defineField({\n              name: 'label',\n              title: 'Label',\n              type: 'string',\n            }),\n            defineField({\n              name: 'value',\n              title: 'Value',\n              type: 'string',\n            }),\n          ],\n        },\n      ],\n    }),\n    defineField({\n      name: 'options',\n      title: 'Field Options',\n      type: 'object',\n      hidden: ({parent}) => {\n        return ['select', 'radio', 'checkbox', 'file'].includes(parent?.type)\n      },\n      fields: [\n        defineField({\n          name: 'placeholder',\n          title: 'Placeholder',\n          type: 'string',\n        }),\n        defineField({\n          name: 'defaultValue',\n          title: 'Default Value',\n          type: 'string',\n        }),\n      ],\n    }),\n  ],\n  preview: {\n    select: {\n      label: 'label',\n      name: 'name',\n      type: 'type',\n    },\n    prepare({label, name, type}) {\n      return {\n        title: label || name,\n        subtitle: type,\n      }\n    },\n  },\n})\n","import type {SchemaTypeDefinition} from 'sanity'\n\nimport type {FieldsOption} from '..'\nimport {formType} from './form'\nimport {formFieldType} from './form-field'\n\nexport const schema = (fields: FieldsOption): {types: SchemaTypeDefinition[]} => {\n  return {types: [formType(fields), formFieldType]}\n}\n","import {definePlugin, type FieldDefinition} from 'sanity'\n\n// import {structureTool} from 'sanity/structure'\n// import {FormRenderer} from './components/form-renderer'\nimport {schema} from './schema-types'\n// import {defaultDocumentNode} from './structure'\n\n/**\n * Usage in `sanity.config.ts` (or .js)\n *\n * ```ts\n * import {defineConfig} from 'sanity'\n * import {formSchema} from '@sanity/form-toolkit'\n *\n * export default defineConfig({\n *   // ...\n *   plugins: [formSchema()],\n * })\n * ```\n */\nexport type FieldsOption = Array<FieldDefinition>\ninterface FormSchemaPluginOptions {\n  /**\n   * Array of field definitions to be used in the form schema.\n   */\n  fields?: FieldsOption\n}\n\nexport const formSchema = definePlugin(({fields = []}: FormSchemaPluginOptions) => {\n  return {\n    name: 'form-toolkit_form-schema',\n    schema: schema(fields),\n    // plugins: [structureTool({defaultDocumentNode})],\n  }\n})\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/form-toolkit",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Tool kit for integrating forms with a Sanity Studio",
   "keywords": [
     "sanity",
@@ -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"
       ]
     }
   },

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

@@ -3,9 +3,12 @@ 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
+  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 = (
@@ -27,15 +30,18 @@ export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}
 
   const renderInput = () => {
     switch (type) {
+      case 'submit':
+        return <button type="submit">{label || 'Submit'}</button>
       case 'textarea':
         return (
           <textarea
             ref={ref as LegacyRef<HTMLTextAreaElement>}
             name={name}
-            value={value ?? ''}
             onChange={handleChange}
             onBlur={onBlur}
             placeholder={options.placeholder}
+            {...validationRules}
+            value={value ?? ''}
           />
         )
 
@@ -46,6 +52,7 @@ export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}
             name={name}
             value={value ?? ''}
             onChange={handleChange}
+            {...validationRules}
             onBlur={onBlur}
           >
             {choices?.map((choice, i) => (
@@ -67,6 +74,7 @@ export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}
               checked={value === choice.value}
               onChange={handleChange}
               onBlur={onBlur}
+              {...validationRules}
             />
             {choice.label}
           </label>
@@ -83,6 +91,7 @@ export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}
               checked={Array.isArray(value) ? value.includes(choice.value) : value === choice.value}
               onChange={(e) => handleCheckboxChange(e, choice.value)}
               onBlur={onBlur}
+              {...validationRules}
             />
             {choice.label}
           </label>
@@ -96,6 +105,7 @@ export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}
             name={name}
             value={value ?? options.defaultValue ?? ''}
             onChange={handleChange}
+            {...validationRules}
             onBlur={onBlur}
             placeholder={options.placeholder}
           />
@@ -105,7 +115,7 @@ export const DefaultField: FC<FieldComponentProps> = ({field, fieldState, error}
 
   return (
     <>
-      {label && type != 'hidden' && <label htmlFor={name}>{label}</label>}
+      {label && !['hidden', 'submit'].includes(type) && <label htmlFor={name}>{label}</label>}
       {renderInput()}
       {error && <span className="error">{error}</span>}
     </>

package/src/{form-schema → form-renderer}/components/form-renderer.tsx

@@ -52,7 +52,11 @@ export const FormRenderer: FC<FormRendererProps> = (props) => {
 
       {children}
 
-      <button type="submit">{formData?.submitButton?.text || 'Submit'}</button>
+      {renderField({
+        type: 'submit',
+        name: 'submit',
+        label: formData?.submitButton?.text || 'Submit',
+      })}
     </form>
   )
 }

package/src/{form-schema → form-renderer}/components/types.ts

@@ -1,4 +1,3 @@
-// types.ts
 export type ValidationRule = {
   type: string
   value: string
@@ -19,11 +18,11 @@ export type FormField = {
   type: string
   label?: string
   name: string
-  required: boolean
+  required?: boolean
   validation?: ValidationRule[]
   options?: FieldOptions
   choices?: FieldChoice[]
-  _key: string
+  _key?: string
 }
 
 export type FormDataProps = {
@@ -32,7 +31,6 @@ export type FormDataProps = {
     current: string
   }
   fields?: FormField[]
-
   submitButton?: {
     text: string
     position: 'left' | 'center' | 'right'

package/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}

package/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)
+}

package/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})],
   }
 })