@sanity/form-toolkit 1.1.0 → 1.2.1

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

@@ -0,0 +1,78 @@
+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

@@ -0,0 +1,11 @@
+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()])
+}

package/src/index.ts

@@ -1,5 +1,5 @@
-// import {formSchema} from './form-schema'
-// import {formiumInput} from './formium'
+import {FormRenderer, formSchema} from './form-schema'
+import type {FormDataProps} from './form-schema/components/types'
 import {hubSpotInput} from './hubspot'
 import {hubSpotHandler} from './hubspot/create-handler'
 import {fetchHubSpotData} from './hubspot/fetch-hubspot-data'
@@ -9,6 +9,9 @@ import {fetchMailchimpData, mailchimpHandler} from './mailchimp/create-handler'
 export {
   fetchHubSpotData,
   fetchMailchimpData,
+  type FormDataProps,
+  FormRenderer,
+  formSchema,
   hubSpotHandler,
   hubSpotInput,
   mailchimpHandler,

package/src/shared/create-handler.ts

@@ -1,4 +1,4 @@
-import {defineEventHandler, H3Event} from 'h3' // For Nuxt.js/Nitro
+import {defineEventHandler, type H3Event} from 'h3' // For Nuxt.js/Nitro
 import type {IncomingMessage, ServerResponse} from 'http'
 
 // Utility function to detect the framework at runtime