fix: remove errant TypeScript types (#1062)

* fix: remove errant TypeScript types

* ci: apply automated fixes and generate docs

* chore: fix ui libraries example

* ci: apply automated fixes and generate docs

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

docs/framework/react/reference/functions/useform.md

@@ -31,4 +31,4 @@ This API encapsulates all the necessary functionalities related to the form. It
 
 ## Defined in
 
-[packages/react-form/src/useForm.tsx:67](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L67)
+[packages/react-form/src/useForm.tsx:57](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L57)

docs/framework/react/reference/interfaces/reactformapi.md

@@ -59,46 +59,4 @@ A `Subscribe` function that allows you to listen and react to changes in the for
 
 #### Defined in
 
-[packages/react-form/src/useForm.tsx:35](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L35)
-
-***
-
-### useField
-
-```ts
-useField: UseField<TFormData, TFormValidator>;
-```
-
-A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-
-#### Defined in
-
 [packages/react-form/src/useForm.tsx:25](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L25)
-
-***
-
-### useStore()
-
-```ts
-useStore: <TSelected>(selector?) => TSelected;
-```
-
-A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-
-#### Type Parameters
-
-• **TSelected** = `FormState`\<`TFormData`\>
-
-#### Parameters
-
-##### selector?
-
-(`state`) => `TSelected`
-
-#### Returns
-
-`TSelected`
-
-#### Defined in
-
-[packages/react-form/src/useForm.tsx:29](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L29)

docs/framework/react/reference/type-aliases/reactformextendedapi.md

@@ -19,4 +19,4 @@ An extended version of the `FormApi` class that includes React-specific function
 
 ## Defined in
 
-[packages/react-form/src/useForm.tsx:44](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L44)
+[packages/react-form/src/useForm.tsx:34](https://github.com/TanStack/form/blob/main/packages/react-form/src/useForm.tsx#L34)

examples/react/ui-libraries/src/MainComponent.tsx

@@ -1,12 +1,12 @@
 import '@mantine/core/styles.css'
 
-import { MantineProvider, TextInput, Checkbox } from '@mantine/core'
+import { Checkbox, MantineProvider, TextInput } from '@mantine/core'
 import { useForm } from '@tanstack/react-form'
 import TextField from '@mui/material/TextField'
 import { Checkbox as MuiCheckbox } from '@mui/material'
 
 export default function MainComponent() {
-  const { Field, Subscribe, handleSubmit, state, useStore } = useForm({
+  const form = useForm({
     defaultValues: {
       firstName: '',
       lastName: '',
@@ -18,19 +18,17 @@ export default function MainComponent() {
       console.log(value)
     },
   })
-  console.log({
-    values: useStore((state) => state.values),
-  })
+
   return (
     <MantineProvider>
       <form
         onSubmit={(e) => {
           e.preventDefault()
           e.stopPropagation()
-          handleSubmit()
+          form.handleSubmit()
         }}
       >
-        <Field
+        <form.Field
           name="firstName"
           children={({ state, handleChange, handleBlur }) => {
             return (
@@ -43,7 +41,7 @@ export default function MainComponent() {
             )
           }}
         />
-        <Field
+        <form.Field
           name="lastName"
           children={({ state, handleChange, handleBlur }) => {
             return (
@@ -59,7 +57,7 @@ export default function MainComponent() {
             )
           }}
         />
-        <Field
+        <form.Field
           name="isChecked"
           children={({ state, handleChange, handleBlur }) => {
             return (
@@ -71,7 +69,7 @@ export default function MainComponent() {
             )
           }}
         />
-        <Field
+        <form.Field
           name="isMuiCheckBox"
           children={({ state, handleChange, handleBlur }) => {
             return (
@@ -83,7 +81,7 @@ export default function MainComponent() {
             )
           }}
         />
-        <Subscribe
+        <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
           children={([canSubmit, isSubmitting]) => (
             <button type="submit" disabled={!canSubmit}>
@@ -92,9 +90,6 @@ export default function MainComponent() {
           )}
         />
       </form>
-      <div>
-        <pre>{JSON.stringify(state.values, null, 2)}</pre>
-      </div>
     </MantineProvider>
   )
 }

packages/react-form/src/useForm.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react'
 import { Field } from './useField'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type { PropsWithChildren, ReactNode } from 'react'
-import type { FieldComponent, UseField } from './useField'
+import type { FieldComponent } from './useField'
 import type { NoInfer } from '@tanstack/react-store'
 import type { FormOptions, FormState, Validator } from '@tanstack/form-core'
 
@@ -19,16 +19,6 @@ export interface ReactFormApi<
    * A React component to render form fields. With this, you can render and manage individual form fields.
    */
   Field: FieldComponent<TFormData, TFormValidator>
-  /**
-   * A custom React hook that provides functionalities related to individual form fields. It gives you access to field values, errors, and allows you to set or update field values.
-   */
-  useField: UseField<TFormData, TFormValidator>
-  /**
-   * A `useStore` hook that connects to the internal store of the form. It can be used to access the form's current state or any other related state information. You can optionally pass in a selector function to cherry-pick specific parts of the state
-   */
-  useStore: <TSelected = NoInfer<FormState<TFormData>>>(
-    selector?: (state: NoInfer<FormState<TFormData>>) => TSelected,
-  ) => TSelected
   /**
    * A `Subscribe` function that allows you to listen and react to changes in the form's state. It's especially useful when you need to execute side effects or render specific components in response to state updates.
    */