feat(apollo-vertex): Form component on TanStack Form + Zod by frankkluijtmans · Pull Request #888 · UiPath/apollo-ui

frankkluijtmans · 2026-07-06T13:17:06Z

Adds a composition-first Form component to apollo-vertex built on TanStack Form and Zod (Standard Schema, so schemas pass straight into validators with no resolver), including Apollo-bound field components (Text, Textarea, Select, RadioGroup, Checkbox, Switch), a SubmitButton, and translatable validation errors via FieldError and FormErrorSummary. It replaces the previous React Hook Form form component, migrates the Settings template (WorkspaceSettings) onto useAppForm, and removes the now-unused react-hook-form and @hookform/resolvers dependencies from apollo-vertex. A docs page with a live demo is added and the Settings template docs are updated to match the new approach.

👨 Generated with Kluijt Code

github-actions · 2026-07-06T13:17:15Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (PT)
apollo-design	🟢 Ready	Preview, Logs	Jul 06, 2026, 08:58:13 AM
apollo-docs	🟢 Ready	Preview, Logs	Jul 06, 2026, 08:58:13 AM
apollo-landing	🟢 Ready	Preview, Logs	Jul 06, 2026, 08:58:13 AM
apollo-vertex	🟢 Ready	Preview, Logs	Jul 06, 2026, 08:58:13 AM

github-actions · 2026-07-06T13:18:16Z

📊 Coverage + size by package

Per-package bundle size on this PR (no JS/TS source changes detected under packages/* or web-packages/*).

Package	Coverage	New-line coverage	Packed (gzip)	Unpacked	vs main
`@uipath/apollo-core`	9.0%	—	43.82 MB	57.31 MB	±0
`@uipath/apollo-react`	34.5%	—	7.27 MB	27.60 MB	±0
`@uipath/apollo-wind`	40.1%	—	392.6 KB	2.55 MB	−3 B
`@uipath/ap-chat`	85.8%	—	43.41 MB	55.85 MB	±0

_{"Coverage" is each package's own coverage.include scope (e.g. apollo-core instruments only scripts/). "Packed"/"Unpacked" come from npm pack --dry-run and only cover built packages — "—" means not measured this run (package not affected / not built). "vs main" is the packed (gzipped) delta against the last successful main build (the package-sizes artifact from the Release workflow); "—" there means no main baseline was available this run. The baseline is main's latest build, not this PR's exact merge-base, so it includes any drift since the branch diverged. Packages with no vitest config are omitted.}

Copilot

Pull request overview

Adds a new composition-first Form abstraction to apollo-vertex using TanStack Form + Zod (Standard Schema), replaces the previous React Hook Form-based implementation, and migrates the Settings template and docs to the new API.

Changes:

Replaces the old registry/form/form.tsx (React Hook Form) with a TanStack Form hook (useAppForm) and Apollo-bound field/form components (Text, Textarea, Select, RadioGroup, Checkbox, Switch, SubmitButton, error helpers).
Migrates WorkspaceSettings to the new form API and removes react-hook-form / @hookform/resolvers dependencies.
Updates the component registry entry, docs pages, and adds a live demo with i18n-backed validation messages.

Reviewed changes

Copilot reviewed 22 out of 23 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Removes RHF deps and adds `@tanstack/react-form` (and transitive TanStack form/store packages).
apps/apollo-vertex/tsconfig.json	Updates the `@/components/ui/form` path alias to the new registry entrypoint.
apps/apollo-vertex/templates/settings/WorkspaceSettings.tsx	Migrates settings page form to `useAppForm` + bound field components.
apps/apollo-vertex/registry/form/use-translated-errors.ts	Adds helper for translating validation error messages via `react-i18next`.
apps/apollo-vertex/registry/form/textarea-field.tsx	Adds TanStack Form-bound textarea field component.
apps/apollo-vertex/registry/form/text-field.tsx	Adds TanStack Form-bound text field component.
apps/apollo-vertex/registry/form/switch-field.tsx	Adds TanStack Form-bound switch field component.
apps/apollo-vertex/registry/form/submit-button.tsx	Adds a submit button component that subscribes to form state.
apps/apollo-vertex/registry/form/select-field.tsx	Adds TanStack Form-bound select field component.
apps/apollo-vertex/registry/form/radio-group-field.tsx	Adds TanStack Form-bound radio group field component.
apps/apollo-vertex/registry/form/index.ts	New public export surface for the form package entrypoint.
apps/apollo-vertex/registry/form/form.tsx	Replaces RHF form implementation with `createFormHook` wiring + exports.
apps/apollo-vertex/registry/form/form-error-summary.tsx	Adds a form-level error summary component.
apps/apollo-vertex/registry/form/form-context.ts	Adds TanStack Form hook contexts (field/form).
apps/apollo-vertex/registry/form/field-utils.ts	Adds shared option type + error normalization utilities.
apps/apollo-vertex/registry/form/field-error.tsx	Adds translated FieldError wrapper for custom fields.
apps/apollo-vertex/registry/form/checkbox-field.tsx	Adds TanStack Form-bound checkbox field component.
apps/apollo-vertex/registry.json	Updates the registry metadata for the new Form component and file set.
apps/apollo-vertex/package.json	Removes RHF deps and adds `@tanstack/react-form`.
apps/apollo-vertex/locales/en.json	Adds i18n keys for the form demo validation messages.
apps/apollo-vertex/app/templates/settings/page.mdx	Updates Settings template docs to reference the new Form approach.
apps/apollo-vertex/app/components/form/page.mdx	Rewrites the Form docs page for TanStack Form + Zod + demo.
apps/apollo-vertex/app/components/form/form-demo.tsx	Adds a live demo form used by the docs page.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 22 out of 23 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 22 out of 23 changed files in this pull request and generated 4 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

github-actions · 2026-07-06T15:44:29Z

Dependency License Review

✅ 1948 package(s) scanned
✅ No license issues found
⚠️ 2 package(s) excluded (see details below)

License distribution

License	Packages
MIT	1718
ISC	89
Apache-2.0	55
BSD-3-Clause	27
BSD-2-Clause	23
BlueOak-1.0.0	8
MPL-2.0	4
MIT-0	3
CC0-1.0	3
MIT OR Apache-2.0	2
(MIT OR Apache-2.0)	2
Unlicense	2
LGPL-3.0-or-later	1
Python-2.0	1
CC-BY-4.0	1
(MPL-2.0 OR Apache-2.0)	1
Unknown	1
Artistic-2.0	1
(WTFPL OR MIT)	1
(BSD-2-Clause OR MIT OR Apache-2.0)	1
CC-BY-3.0	1
0BSD	1
(MIT OR CC0-1.0)	1
MIT AND ISC	1

Excluded packages

Package	Version	License	Reason
@img/sharp-libvips-linux-x64	1.2.4	LGPL-3.0-or-later	LGPL pre-built binary, not linked
khroma	2.1.0	Unknown	MIT per GitHub repo, missing license field in package.json

… Form and Zod component

…demo

…omponent

…view fixes

Copilot

Pull request overview

Copilot reviewed 22 out of 23 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

+                      <Switch
+                        id={field.name}
+                        checked={field.state.value}
+                        onCheckedChange={field.handleChange}
+                      />


+                      <Switch
+                        id={field.name}
+                        checked={field.state.value}
+                        onCheckedChange={field.handleChange}
+                      />


+                      <Switch
+                        id={field.name}
+                        checked={field.state.value}
+                        onCheckedChange={field.handleChange}
+                      />


Copilot

Pull request overview

Copilot reviewed 22 out of 23 changed files in this pull request and generated no new comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot AI review requested due to automatic review settings July 6, 2026 13:17

github-actions Bot added app:apollo-vertex size:XXL 1,000+ changed lines. labels Jul 6, 2026

Copilot started reviewing on behalf of frankkluijtmans July 6, 2026 13:17 View session

Copilot AI reviewed Jul 6, 2026

View reviewed changes

Comment thread apps/apollo-vertex/registry/form/form-error-summary.tsx Outdated

Comment thread apps/apollo-vertex/registry/form/radio-group-field.tsx

Comment thread apps/apollo-vertex/app/components/form/form-demo.tsx

frankkluijtmans force-pushed the frankkluijtmans/tanstack-zod-form branch 2 times, most recently from a8ea90f to b494894 Compare July 6, 2026 13:57

Copilot AI review requested due to automatic review settings July 6, 2026 13:57

Copilot started reviewing on behalf of frankkluijtmans July 6, 2026 13:57 View session

frankkluijtmans force-pushed the frankkluijtmans/tanstack-zod-form branch from b494894 to c60c921 Compare July 6, 2026 13:59

frankkluijtmans marked this pull request as ready for review July 6, 2026 13:59

frankkluijtmans requested a review from a team as a code owner July 6, 2026 13:59

frankkluijtmans requested review from angeloaltamiranom and ruudandriessen July 6, 2026 13:59

Copilot AI reviewed Jul 6, 2026

View reviewed changes

Comment thread pnpm-lock.yaml Outdated

Comment thread apps/apollo-vertex/app/components/form/page.mdx Outdated

Comment thread apps/apollo-vertex/registry/form/radio-group-field.tsx Outdated

Comment thread apps/apollo-vertex/registry/form/field-utils.ts

Copilot AI review requested due to automatic review settings July 6, 2026 14:03

Copilot started reviewing on behalf of frankkluijtmans July 6, 2026 14:04 View session

Copilot AI reviewed Jul 6, 2026

View reviewed changes

Comment thread apps/apollo-vertex/registry/form/select-field.tsx

Comment thread apps/apollo-vertex/registry/form/radio-group-field.tsx

Comment thread apps/apollo-vertex/registry/form/switch-field.tsx

Comment thread apps/apollo-vertex/registry/form/checkbox-field.tsx

frankkluijtmans requested a review from Copilot July 6, 2026 15:48

Copilot started reviewing on behalf of frankkluijtmans July 6, 2026 15:49 View session

frankkluijtmans added 5 commits July 6, 2026 17:53

feat(apollo-vertex): replace the React Hook Form form with a TanStack…

fe15249

… Form and Zod component

docs(apollo-vertex): add Form component page with translatable error …

8cdd4e6

…demo

docs(apollo-vertex): align Settings template page with the new Form c…

dfe0351

…omponent

chore(apollo-vertex): remove unused react-hook-form dependencies

2245033

fix(apollo-vertex): correct lockfile registry drift and Form field re…

7592dd9

…view fixes

frankkluijtmans force-pushed the frankkluijtmans/tanstack-zod-form branch from ef22d73 to 7592dd9 Compare July 6, 2026 15:53

Copilot AI reviewed Jul 6, 2026

View reviewed changes

Copilot AI review requested due to automatic review settings July 6, 2026 15:53

Copilot started reviewing on behalf of frankkluijtmans July 6, 2026 15:54 View session

Copilot AI reviewed Jul 6, 2026

View reviewed changes

Uh oh!

Conversation

frankkluijtmans commented Jul 6, 2026

Uh oh!

github-actions Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Coverage + size by package

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 6, 2026

Dependency License Review

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions Bot commented Jul 6, 2026 •

edited

Loading

github-actions Bot commented Jul 6, 2026 •

edited

Loading