@sanity/form-toolkit 2.1.0 → 2.2.1

package/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/dist/form-renderer/index.d.mts

@@ -0,0 +1,66 @@
+import type {ComponentType} from 'react'
+import type {FC} from 'react'
+import type {HTMLProps} from 'react'
+
+declare type FieldChoice = {
+  label: string
+  value: string
+}
+
+declare interface FieldComponentProps {
+  field: FormField
+  fieldState: FieldState
+  error?: string
+}
+
+declare type FieldOptions = {
+  placeholder?: string
+  defaultValue?: string
+}
+
+declare interface FieldState {
+  value?: string | number | readonly string[]
+  onChange: (value: unknown) => void
+  onBlur?: () => void
+  ref?: unknown
+}
+
+export declare type FormDataProps = {
+  title: string
+  id: {
+    current: string
+  }
+  fields?: FormField[]
+  submitButton?: {
+    text: string
+    position: 'left' | 'center' | 'right'
+  }
+}
+
+declare type FormField = {
+  type: string
+  label?: string
+  name: string
+  required?: boolean
+  validation?: ValidationRule[]
+  options?: FieldOptions
+  choices?: FieldChoice[]
+  _key?: string
+}
+
+export declare const FormRenderer: FC<FormRendererProps>
+
+declare interface FormRendererProps extends HTMLProps<HTMLFormElement> {
+  formData?: FormDataProps
+  getFieldState?: (fieldName: string) => FieldState
+  getFieldError?: (fieldName: string) => string | undefined
+  fieldComponents?: Record<string, ComponentType<FieldComponentProps>>
+}
+
+declare type ValidationRule = {
+  type: string
+  value: string
+  message: string
+}
+
+export {}

package/dist/form-renderer/index.d.ts

@@ -0,0 +1,66 @@
+import type {ComponentType} from 'react'
+import type {FC} from 'react'
+import type {HTMLProps} from 'react'
+
+declare type FieldChoice = {
+  label: string
+  value: string
+}
+
+declare interface FieldComponentProps {
+  field: FormField
+  fieldState: FieldState
+  error?: string
+}
+
+declare type FieldOptions = {
+  placeholder?: string
+  defaultValue?: string
+}
+
+declare interface FieldState {
+  value?: string | number | readonly string[]
+  onChange: (value: unknown) => void
+  onBlur?: () => void
+  ref?: unknown
+}
+
+export declare type FormDataProps = {
+  title: string
+  id: {
+    current: string
+  }
+  fields?: FormField[]
+  submitButton?: {
+    text: string
+    position: 'left' | 'center' | 'right'
+  }
+}
+
+declare type FormField = {
+  type: string
+  label?: string
+  name: string
+  required?: boolean
+  validation?: ValidationRule[]
+  options?: FieldOptions
+  choices?: FieldChoice[]
+  _key?: string
+}
+
+export declare const FormRenderer: FC<FormRendererProps>
+
+declare interface FormRendererProps extends HTMLProps<HTMLFormElement> {
+  formData?: FormDataProps
+  getFieldState?: (fieldName: string) => FieldState
+  getFieldError?: (fieldName: string) => string | undefined
+  fieldComponents?: Record<string, ComponentType<FieldComponentProps>>
+}
+
+declare type ValidationRule = {
+  type: string
+  value: string
+  message: string
+}
+
+export {}

package/dist/form-renderer/index.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var jsxRuntime = require("react/jsx-runtime");
+const DefaultField = ({ field, fieldState, error }) => {
+  const { type, label, name, options = {}, choices = [], validation = [] } = field;
+  if (!type || !name) return null;
+  const validationRules = validation.reduce((acc, v) => (acc[v.type] = v.value, acc), {}), { 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 "submit":
+        return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", children: label || "Submit" });
+      case "textarea":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "textarea",
+          {
+            ref,
+            name,
+            onChange: handleChange,
+            onBlur,
+            placeholder: options.placeholder,
+            ...validationRules,
+            value: value ?? ""
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            ref,
+            name,
+            value: value ?? "",
+            onChange: handleChange,
+            ...validationRules,
+            onBlur,
+            children: choices?.map((choice, i) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: choice.value, children: choice.label }, i))
+          }
+        );
+      case "radio":
+        return choices?.map((choice, i) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              ref,
+              value: choice.value,
+              checked: value === choice.value,
+              onChange: handleChange,
+              onBlur,
+              ...validationRules
+            }
+          ),
+          choice.label
+        ] }, i));
+      case "checkbox":
+        return choices?.map((choice, i) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          /* @__PURE__ */ jsxRuntime.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,
+              ...validationRules
+            }
+          ),
+          choice.label
+        ] }, i));
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type,
+            ref,
+            name,
+            value: value ?? options.defaultValue ?? "",
+            onChange: handleChange,
+            ...validationRules,
+            onBlur,
+            placeholder: options.placeholder
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    label && !["hidden", "submit"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: name, children: label }),
+    renderInput(),
+    error && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CustomComponent, { field, fieldState, error }) : /* @__PURE__ */ jsxRuntime.jsx(DefaultField, { field, fieldState, error });
+  }, elProps = Object.assign({}, props);
+  return delete elProps.formData, delete elProps.getFieldState, delete elProps.getFieldError, delete elProps.fieldComponents, /* @__PURE__ */ jsxRuntime.jsxs("form", { ...elProps, id: elProps.id ?? formData?.id?.current, children: [
+    formData?.fields?.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "form-field", children: renderField(field) }, field._key)),
+    children,
+    renderField({
+      type: "submit",
+      name: "submit",
+      label: formData?.submitButton?.text || "Submit"
+    })
+  ] });
+};
+exports.FormRenderer = FormRenderer;
+//# sourceMappingURL=index.js.map

package/dist/form-renderer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/form-renderer/components/default-field.tsx","../../src/form-renderer/components/form-renderer.tsx"],"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 = [], validation = []} = field\n  if (!type || !name) return null\n  const validationRules = validation.reduce((acc: Record<string, string>, v) => {\n    acc[v.type] = v.value\n    return acc\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 'submit':\n        return <button type=\"submit\">{label || 'Submit'}</button>\n      case 'textarea':\n        return (\n          <textarea\n            ref={ref as LegacyRef<HTMLTextAreaElement>}\n            name={name}\n            onChange={handleChange}\n            onBlur={onBlur}\n            placeholder={options.placeholder}\n            {...validationRules}\n            value={value ?? ''}\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            {...validationRules}\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              {...validationRules}\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              {...validationRules}\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            {...validationRules}\n            onBlur={onBlur}\n            placeholder={options.placeholder}\n          />\n        )\n    }\n  }\n\n  return (\n    <>\n      {label && !['hidden', 'submit'].includes(type) && <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      {renderField({\n        type: 'submit',\n        name: 'submit',\n        label: formData?.submitButton?.text || 'Submit',\n      })}\n    </form>\n  )\n}\n"],"names":["jsx","jsxs","Fragment"],"mappings":"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"}

package/dist/form-renderer/index.mjs

@@ -0,0 +1,128 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+const DefaultField = ({ field, fieldState, error }) => {
+  const { type, label, name, options = {}, choices = [], validation = [] } = field;
+  if (!type || !name) return null;
+  const validationRules = validation.reduce((acc, v) => (acc[v.type] = v.value, acc), {}), { 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 "submit":
+        return /* @__PURE__ */ jsx("button", { type: "submit", children: label || "Submit" });
+      case "textarea":
+        return /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            ref,
+            name,
+            onChange: handleChange,
+            onBlur,
+            placeholder: options.placeholder,
+            ...validationRules,
+            value: value ?? ""
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ jsx(
+          "select",
+          {
+            ref,
+            name,
+            value: value ?? "",
+            onChange: handleChange,
+            ...validationRules,
+            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,
+              ...validationRules
+            }
+          ),
+          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,
+              ...validationRules
+            }
+          ),
+          choice.label
+        ] }, i));
+      default:
+        return /* @__PURE__ */ jsx(
+          "input",
+          {
+            type,
+            ref,
+            name,
+            value: value ?? options.defaultValue ?? "",
+            onChange: handleChange,
+            ...validationRules,
+            onBlur,
+            placeholder: options.placeholder
+          }
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label && !["hidden", "submit"].includes(type) && /* @__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,
+    renderField({
+      type: "submit",
+      name: "submit",
+      label: formData?.submitButton?.text || "Submit"
+    })
+  ] });
+};
+export {
+  FormRenderer
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/form-renderer/components/default-field.tsx","../../src/form-renderer/components/form-renderer.tsx"],"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 = [], validation = []} = field\n  if (!type || !name) return null\n  const validationRules = validation.reduce((acc: Record<string, string>, v) => {\n    acc[v.type] = v.value\n    return acc\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 'submit':\n        return <button type=\"submit\">{label || 'Submit'}</button>\n      case 'textarea':\n        return (\n          <textarea\n            ref={ref as LegacyRef<HTMLTextAreaElement>}\n            name={name}\n            onChange={handleChange}\n            onBlur={onBlur}\n            placeholder={options.placeholder}\n            {...validationRules}\n            value={value ?? ''}\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            {...validationRules}\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              {...validationRules}\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              {...validationRules}\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            {...validationRules}\n            onBlur={onBlur}\n            placeholder={options.placeholder}\n          />\n        )\n    }\n  }\n\n  return (\n    <>\n      {label && !['hidden', 'submit'].includes(type) && <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      {renderField({\n        type: 'submit',\n        name: 'submit',\n        label: formData?.submitButton?.text || 'Submit',\n      })}\n    </form>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/form-schema/index.d.mts

@@ -1,69 +1,28 @@
-import type {ComponentType} from 'react'
-import type {FC} from 'react'
-import type {HTMLProps} from 'react'
+import {FieldDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 
-declare type FieldChoice = {
-  label: string
-  value: string
-}
-
-declare interface FieldComponentProps {
-  field: FormField
-  fieldState: FieldState
-  error?: string
-}
-
-declare type FieldOptions = {
-  placeholder?: string
-  defaultValue?: string
-}
-
-declare interface FieldState {
-  value?: string | number | readonly string[]
-  onChange: (value: unknown) => void
-  onBlur?: () => void
-  ref?: unknown
-}
-
-export declare type FormDataProps = {
-  title: string
-  id: {
-    current: string
-  }
-  fields?: FormField[]
-  submitButton?: {
-    text: string
-    position: 'left' | 'center' | 'right'
-  }
-}
-
-declare type FormField = {
-  type: string
-  label?: string
-  name: string
-  required?: boolean
-  validation?: ValidationRule[]
-  options?: FieldOptions
-  choices?: FieldChoice[]
-  _key?: string
-}
-
-export declare const FormRenderer: FC<FormRendererProps>
-
-declare interface FormRendererProps extends HTMLProps<HTMLFormElement> {
-  formData?: FormDataProps
-  getFieldState?: (fieldName: string) => FieldState
-  getFieldError?: (fieldName: string) => string | undefined
-  fieldComponents?: Record<string, ComponentType<FieldComponentProps>>
-}
-
-export declare const formSchema: Plugin_2<void>
-
-declare type ValidationRule = {
-  type: string
-  value: string
-  message: string
+/**
+ * Usage in `sanity.config.ts` (or .js)
+ *
+ * ```ts
+ * import {defineConfig} from 'sanity'
+ * import {formSchema} from '@sanity/form-toolkit'
+ *
+ * export default defineConfig({
+ *   // ...
+ *   plugins: [formSchema()],
+ * })
+ * ```
+ */
+export declare type FieldsOption = Array<FieldDefinition>
+
+export declare const formSchema: Plugin_2<FormSchemaPluginOptions | undefined>
+
+declare interface FormSchemaPluginOptions {
+  /**
+   * Array of field definitions to be used in the form schema.
+   */
+  fields?: FieldsOption
 }
 
 export {}

package/dist/form-schema/index.d.ts

@@ -1,69 +1,28 @@
-import type {ComponentType} from 'react'
-import type {FC} from 'react'
-import type {HTMLProps} from 'react'
+import {FieldDefinition} from 'sanity'
 import {Plugin as Plugin_2} from 'sanity'
 
-declare type FieldChoice = {
-  label: string
-  value: string
-}
-
-declare interface FieldComponentProps {
-  field: FormField
-  fieldState: FieldState
-  error?: string
-}
-
-declare type FieldOptions = {
-  placeholder?: string
-  defaultValue?: string
-}
-
-declare interface FieldState {
-  value?: string | number | readonly string[]
-  onChange: (value: unknown) => void
-  onBlur?: () => void
-  ref?: unknown
-}
-
-export declare type FormDataProps = {
-  title: string
-  id: {
-    current: string
-  }
-  fields?: FormField[]
-  submitButton?: {
-    text: string
-    position: 'left' | 'center' | 'right'
-  }
-}
-
-declare type FormField = {
-  type: string
-  label?: string
-  name: string
-  required?: boolean
-  validation?: ValidationRule[]
-  options?: FieldOptions
-  choices?: FieldChoice[]
-  _key?: string
-}
-
-export declare const FormRenderer: FC<FormRendererProps>
-
-declare interface FormRendererProps extends HTMLProps<HTMLFormElement> {
-  formData?: FormDataProps
-  getFieldState?: (fieldName: string) => FieldState
-  getFieldError?: (fieldName: string) => string | undefined
-  fieldComponents?: Record<string, ComponentType<FieldComponentProps>>
-}
-
-export declare const formSchema: Plugin_2<void>
-
-declare type ValidationRule = {
-  type: string
-  value: string
-  message: string
+/**
+ * Usage in `sanity.config.ts` (or .js)
+ *
+ * ```ts
+ * import {defineConfig} from 'sanity'
+ * import {formSchema} from '@sanity/form-toolkit'
+ *
+ * export default defineConfig({
+ *   // ...
+ *   plugins: [formSchema()],
+ * })
+ * ```
+ */
+export declare type FieldsOption = Array<FieldDefinition>
+
+export declare const formSchema: Plugin_2<FormSchemaPluginOptions | undefined>
+
+declare interface FormSchemaPluginOptions {
+  /**
+   * Array of field definitions to be used in the form schema.
+   */
+  fields?: FieldsOption
 }
 
 export {}