Skip to content

feat!: Add TanStack adapter for AutoForm - #204

Merged
vantezzen merged 1 commit into
vantezzen:mainfrom
adityacodepublic:autoform-tanstack-main-pr
Jul 8, 2026
Merged

feat!: Add TanStack adapter for AutoForm#204
vantezzen merged 1 commit into
vantezzen:mainfrom
adityacodepublic:autoform-tanstack-main-pr

Conversation

@adityacodepublic

Copy link
Copy Markdown
Collaborator

Hi @vantezzen, this PR is ready for review!

The diff is large, so here's a quick summary of what changed:


This PR adds TanStack Form as a second supported adapter alongside RHF, plus supporting work: external formControl, wrapper overrides, registry, docs, and CI/tooling updates.

1. TanStack Form Adapter

  • Adds TanStack support in the main React package under packages/react/src/tanstack-form, alongside the existing RHF path under packages/react/src/react-hook-form.
  • UI packages now expose explicit adapter entry points: react-hook-form and tanstack-form.
  • Shadcn components are split into RHF/TanStack adapter files, and the registry installs only the files needed for the selected adapter.

2. External Form Control

  • Adds formControl support in packages/react for both adapters.
  • RHF uses createFormControl; TanStack uses useAppForm.
  • Covered by new form-control.cy.tsx specs across the UI packages.

3. Field Wrapper Overrides

  • Extends fieldConfig so individual fields can override fieldWrapper, objectWrapper, arrayWrapper, and arrayElementWrapper.
  • Covered in customization docs, examples, and Cypress UI customization tests shadcn-zod\ui-customization.cy.tsx.

4. Shadcn Registry Split

  • Replaces the single shadcn AutoForm registry item with separate autoform-rhf and autoform-tanstack. CLI installs adapter specfic files only.
  • Adds separate editable React package source registry files for RHF and TanStack, so users can customize the React package source directly.
  • Updates both package-level registry files and the root registry.json.

5. Docs And Examples

  • Adds separate RHF and TanStack docs for getting started, API, customization, form control, and examples.
  • Adds practical demos for custom fields, dialog submit/control, checkout, multistep, nested forms, realtime validation, and interactive schema editing.
  • Adds shadcn CLI install commands for the demos.

6. AI / LLM Discovery

  • Adds skills/autoform with SKILL.md and reference files for installation, schema providers, RHF, TanStack, customization, and examples.
  • Adds docs routes for llms.txt, markdown docs output by appending .md to routes, and .well-known/agent-skills/index.json.

7. Cypress Tests

  • Adds shared adapter-contract coverage and per-package specs for form control and TanStack form APIs.
  • Removes all.cy.tsx aggregate specs because Cypress already discovers all specs in run command; keeping aggregates made specs run twice.
  • Enables Cypress UI batch runs with experimentalRunAllSpecs, so folder-level batch runs can be started from the Cypress UI.

8. Tooling / Package Boundaries

  • Moves workspace setup to pnpm and tsdown.
  • Adds scripts/check-package-boundaries.mjs to verify package exports, built files, and RHF/TanStack adapter isolation.
  • Updates CI to install with pnpm, build packages, and run Cypress directly.

This is a major change.
Let me know if anything's unclear or needs adjusting.

After the merge, changeset version and publish will be remaining.
Feel free to edit.

@changeset-bot

changeset-bot Bot commented Jul 6, 2026

Copy link
Copy Markdown

馃 Changeset detected

Latest commit: 6224b91

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@autoform/ant Major
@autoform/chakra Major
@autoform/core Major
@autoform/joi Major
@autoform/mantine Major
@autoform/mui Major
@autoform/react Major
@autoform/shadcn Major
@autoform/yup Major
@autoform/zod Major
docs Major
web Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@adityacodepublic

adityacodepublic commented Jul 7, 2026

Copy link
Copy Markdown
Collaborator Author

This PR also addresses these issues.

  • Fixes Mantine SelectField in array doesn't update聽#201 - Reworks adapter bindings and Mantine select handling so array select changes update form state.

    Related files changed
    • packages/mantine/src/components/SelectField.tsx
    • packages/mantine/src/field-context.ts
    • packages/mantine/src/react-hook-form.tsx
    • packages/mantine/src/tanstack-form.tsx
    • apps/web/cypress/component/autoform/mantine-zod/arrays.cy.tsx
    • apps/web/cypress/component/autoform/mantine-zod/controlled-form.cy.tsx






  • Fixes Array Input Validation Warning Issue聽#146 - Adds error message and focus on nested fields inside array or object.

    Related files changed
    • packages/react/src/react-hook-form/AutoForm.tsx
    • packages/react/src/tanstack-form/AutoForm.tsx

  • Fixes Key prop spread聽#129 - Fixes key prop spreading issues in UI package components.

    Related files changed
    • packages/mui/src/components/SelectField.tsx

  • Closes How to implement real-time validation without causing re-renders?聽#197 - Adds realtime validation examples in docs for both React Hook Form and TanStack Form.

    Related files changed
    • apps/docs/components/examples/faq/realtime-validation-demo.tsx
    • apps/docs/components/examples/faq/tanstack-realtime-validation-demo.tsx
    • apps/docs/content/docs/react/faq-examples.mdx
    • apps/docs/content/docs/tanstack/faq-examples.mdx
    • packages/shadcn/registry/realtime-validation-demo.json
    • packages/shadcn/registry/tanstack-realtime-validation-demo.json

  • Closes create component FILE UPLOAD聽#196 - Adds a file upload custom field example in the docs FAQ custom fields section.

    Related files changed
    • apps/docs/components/examples/faq/custom-field-components.tsx
    • apps/docs/components/examples/faq/custom-fields-demo.tsx
    • apps/docs/content/docs/react/faq-examples.mdx
    • packages/shadcn/registry/custom-fields-demo.json

  • Closes Add LICENCE file(s)聽#139 - Adds MIT LICENSE files to the package directories.

    Related files changed
    • LICENSE
    • packages/ant/LICENSE
    • packages/chakra/LICENSE
    • packages/core/LICENSE
    • packages/joi/LICENSE
    • packages/mantine/LICENSE
    • packages/mui/LICENSE
    • packages/react/LICENSE
    • packages/yup/LICENSE
    • packages/zod/LICENSE

  • Resolves Improved AutoForm, TanStack Form adapter, bug fixes, and better docs (open to PR)聽#202 - Adds the TanStack Form adapter, bug fixes, docs, examples and other changes.

    Related files changed
    • packages/react/src/tanstack-form/
    • packages/react/src/react-hook-form/
    • packages/react/src/
    • packages/shadcn/registry/autoform-rhf.json
    • packages/shadcn/registry/autoform-tanstack.json
    • apps/docs/content/docs/tanstack
    • apps/docs/content/docs/react
    • apps/web/cypress/component/autoform/shared/adapter-contracts.tsx


  • Resolves Add formRef prop support聽#175 - Adds external formControl support so forms can be controlled from outside AutoForm.
    Adds formProps to AutoForm, which allows passing props (e.g., ref, className) to the underlying form element.
    Adds Submit Button examples in docs.

    Related files changed
    • packages/react/src/types.ts
    • packages/react/src/react-hook-form/AutoForm.tsx
    • packages/react/src/tanstack-form/AutoForm.tsx
    • apps/docs/content/docs/react/customization
    • apps/docs/content/docs/react/form-control.mdx
    • apps/docs/content/docs/tanstack/form-control.mdx
    • apps/docs/components/examples/faq/external-dialog-submit-demo.tsx
    • apps/docs/components/examples/faq/external-dialog-form-control-demo.tsx
    • apps/web/cypress/component/autoform/ant-zod/form-control.cy.tsx
    • apps/web/cypress/component/autoform/mantine-zod/form-control.cy.tsx
    • apps/web/cypress/component/autoform/shadcn-zod/form-props.cy.tsx

  • Resolves Feature request: expose AutoFormField component聽#172 - Exports AutoFormField from the React adapters. Added example of using another AutoForm as a field inside AutoForm. Added installation of the react package via registry for advanced customization.

    Related files changed
    • packages/react/src/react-hook-form/index.ts
    • packages/react/src/tanstack-form/index.ts
    • apps/docs/components/examples/faq/nested-autoform-demo.tsx
    • apps/docs/components/examples/faq/tanstack-nested-autoform-demo.tsx
    • packages/shadcn/registry/autoform-react-source-rhf.json
    • packages/shadcn/registry/autoform-react-source-tanstack.json

These issues should automatically get closed if this PR is merged into main.

@vantezzen

Copy link
Copy Markdown
Owner

Thank you, nice one! I had two small issues I noticed (lint scripts are broken and package-boundary check is not run in CI yet) - I'll fix those after merging

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants