feat(core): docs for reusable fields & reusable field utility type

docs/framework/react/guides/reusable-fields.md

@@ -0,0 +1,92 @@
+---
+id: reusable-fields
+title: Creating reusable fields
+---
+
+As TanStack form is a headless library, we provide you the core building blocks and then give you the freedom to build on top of them. This page introduces the concept of creating reusable field-components for your form, allowing you to create fields that you can reuse throughout your app.
+
+## Basic Usage
+
+To create a reusable fields, you can do the following.
+
+```tsx
+import {  InferValidFormKeys, UseFormReturnType } from '@tanstack/react-form';
+
+export default function GenericTextField<
+  TForm,
+  TFormValidator
+>({ name, form }: {
+  name: InferValidFormKeys<TForm, string>;
+  form: UseFormReturnType<TForm, TFormValidator>,
+> }): JSX.Element {
+  return (
+    <form.Field name={name}>
+      {({ handleChange, handleBlur, state }) => (
+        <input
+          value={state.value}
+          onChange={(e) => handleChange(e.target.value as any)}
+          onBlur={handleBlur}
+        />
+      )}
+    </form.Field>
+  );
+}
+```
+
+With the InferValidFormKeys the GenericTextField component's name prop will only accept the names of fields that have a valid value type, in this case a string, as shown here.
+
+```tsx
+  name: InferValidFormKeys<TForm, string>;
+```
+
+Deep values can also be inferred using this method from the parent form.
+
+```tsx
+function App() {
+  const form = useForm({
+    defaultValues: { name: '', id: 0, interests: {hobbies: ''} },
+    onSubmit: ({ value }) => {
+      console.log(value);
+    },
+  });
+
+  return <GenericTextField form={form} name="interests.hobbies" />;
+}
+```
+
+## Full Example
+
+```tsx
+import { InferValidFormKeys, UseFormReturnType } from '@tanstack/react-form';
+
+export default function GenericTextField<
+  TForm,
+  TFormValidator
+>({ name, form }: {
+  name: InferValidFormKeys<TForm, string>;
+  form: UseFormReturnType<TForm, TFormValidator>
+> }): JSX.Element {
+  return (
+    <form.Field name={name}>
+      {({ handleChange, handleBlur, state }) => (
+        <input
+          value={state.value}
+          onChange={(e) => handleChange(e.target.value as any)}
+          onBlur={handleBlur}
+        />
+      )}
+    </form.Field>
+  );
+}
+
+function App() {
+  const form = useForm({
+    defaultValues: { name: '', id: 0, interests: {hobbies: ''} },
+    onSubmit: ({ value }) => {
+      console.log(value);
+    },
+  });
+
+  return <GenericTextField form={form} name="name" />;
+}
+```

docs/reference/index.md

@@ -30,6 +30,7 @@ title: "@tanstack/form-core"
 - [FormState](type-aliases/formstate.md)
 - [FormValidateFn](type-aliases/formvalidatefn.md)
 - [FormValidator](type-aliases/formvalidator.md)
+- [InferValidFormKeys](type-aliases/infervalidformkeys.md)
 - [StandardSchemaV1](type-aliases/standardschemav1.md)
 - [Updater](type-aliases/updater.md)
 - [UpdaterFn](type-aliases/updaterfn.md)

docs/reference/type-aliases/infervalidformkeys.md

@@ -0,0 +1,22 @@
+---
+id: InferValidFormKeys
+title: InferValidFormKeys
+---
+
+# Type Alias: InferValidFormKeys\<TForm, TFieldType\>
+
+```ts
+type InferValidFormKeys<TForm, TFieldType>: { [K in DeepKeys<TForm>]: DeepValue<TForm, K> extends TFieldType ? K : never }[DeepKeys<TForm>];
+```
+
+Infers the form keys of valid fields
+
+## Type Parameters
+
+• **TForm**
+
+• **TFieldType**
+
+## Defined in
+
+[packages/form-core/src/util-types.ts:151](https://github.com/TanStack/form/blob/main/packages/form-core/src/util-types.ts#L151)

packages/form-core/src/util-types.ts

@@ -144,3 +144,15 @@ export type DeepValue<
                 : never
         : // Do not allow `TValue` to be anything else
           never
+
+/**
+ * Infers the form keys of valid fields
+ */
+export type InferValidFormKeys<
+  // Form generic slot
+  TForm,
+  // Desired type of the generic component
+  TFieldType,
+> = {
+  [K in DeepKeys<TForm>]: DeepValue<TForm, K> extends TFieldType ? K : never
+}[DeepKeys<TForm>]

packages/react-form/src/types.ts

@@ -4,7 +4,7 @@ import type {
   FieldApiOptions,
   Validator,
 } from '@tanstack/form-core'
-import type { FunctionComponent } from 'react'
+import { ReactFormExtendedApi } from './useForm'
 
 /**
  * The field options.
@@ -28,3 +28,12 @@ export type UseFieldOptions<
 > & {
   mode?: 'value' | 'array'
 }
+
+/**
+ * The return type use useForm with pre-populated generics
+ */
+export type UseFormReturnType<TForm, TFormValidator> = TFormValidator extends
+  | Validator<TForm, unknown>
+  | undefined
+  ? ReactFormExtendedApi<TForm, TFormValidator>
+  : never