feat(apollo-vertex): multi-step form wizard and stepper [AGVSOL-4703] by frankkluijtmans · Pull Request #906 · UiPath/apollo-ui

frankkluijtmans · 2026-07-13T14:55:32Z

⚠️ Important: Please check the component page on the preview deployment for more details. This is PR #1 in a 2 PR series. The second will expand a bit on using it in headless mode for more customizability.

Adds multi-step wizard forms to Apollo Vertex, built on the existing TanStack Form and Zod foundation. Each step is validated against a partial schema derived (via .pick()) from a single master schema, so validation rules live in one place and cannot drift between steps. The wizard supports conditional steps (hidden from navigation, the stepper, and submit validation) and optional localStorage persistence (via useLocalStorage from @mantine/hooks) that hydrates and clears automatically. A new composable, shadcn-native Stepper primitive backs the progress indicator and is independently installable. Includes a demo, docs page, nav entry, and i18n keys, with typecheck, lint, format, and registry build all passing.

👨 Generated with Kluijt Code

github-actions · 2026-07-13T14:55:45Z

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

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

github-actions · 2026-07-13T14:56:38Z

📊 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`	37.2%	—	7.38 MB	28.15 MB	±0
`@uipath/apollo-wind`	40.3%	—	395.2 KB	2.57 MB	+12 B
`@uipath/ap-chat`	85.8%	—	43.43 MB	55.92 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 multi-step form wizard feature to Apollo Vertex (the Vertex docs/demo app), building on the existing TanStack Form + Zod patterns and introducing a reusable Stepper primitive for progress indication.

Changes:

Introduces a composable Stepper UI primitive and registers it for installation.
Adds FormWizard components + useFormWizard hook with conditional steps, per-step schema picking, and optional local/session persistence.
Adds demo + docs page + navigation metadata + i18n keys, and wires required dependencies.

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
pnpm-lock.yaml	Updates lockfile for new deps and re-resolution; currently includes GitHub Packages tarball URLs for `@uipath/*`.
apps/apollo-vertex/tsconfig.json	Adds path aliases for the new `form-wizard` and `stepper` components.
apps/apollo-vertex/registry/stepper/stepper.tsx	New Stepper primitive (orientation + states + composed subparts).
apps/apollo-vertex/registry/form-wizard/wizard-schema.ts	Step definition types + visible-step filtering + per-step schema picking helpers.
apps/apollo-vertex/registry/form-wizard/use-form-wizard.ts	New wizard hook: navigation, per-step validation, conditional visibility, persistence.
apps/apollo-vertex/registry/form-wizard/index.ts	Public exports for the form-wizard package.
apps/apollo-vertex/registry/form-wizard/form-wizard.tsx	Wizard container + Stepper-backed steps rendering + step slot component.
apps/apollo-vertex/registry/form-wizard/form-wizard-nav.tsx	Back/Next/Submit navigation controls with i18n labels.
apps/apollo-vertex/registry.json	Registers `stepper` and `form-wizard` for the registry installer.
apps/apollo-vertex/package.json	Adds `@tanstack/react-store` dependency.
apps/apollo-vertex/locales/en.json	Adds wizard demo + navigation i18n strings.
apps/apollo-vertex/app/components/form-wizard/page.mdx	New docs page describing installation and usage.
apps/apollo-vertex/app/components/form-wizard/form-wizard-demo.tsx	New demo showing conditional step + session persistence + translated validation keys.
apps/apollo-vertex/app/components/_meta.ts	Adds docs nav entry for the new Form Wizard page.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

github-actions · 2026-07-14T12:45:35Z

Dependency License Review

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

License distribution

License	Packages
MIT	1720
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

Copilot

Pull request overview

Copilot reviewed 13 out of 14 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 3 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 20 out of 21 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

Copilot

Pull request overview

Copilot reviewed 20 out of 21 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 20 out of 21 changed files in this pull request and generated 5 comments.

Files not reviewed (1)

pnpm-lock.yaml: Generated file

+    <button
+      // Spread first so component-controlled attributes below can't be overridden.
+      {...props}
+      {...(interactive ? { onClick } : { "aria-disabled": true, tabIndex: -1 })}
+      type="button"


+  const persistKey = persist?.key ?? "";
+  const [persisted, setPersisted, removePersisted] = useLocalStorage<
+    PersistedState<TValues> | undefined
+  >({ key: persistKey, getInitialValueInEffect: false });


+
+- **One form instance.** `useFormWizard` creates a single `useAppForm` from your `formOptions`, wires `revalidateLogic()` and a full-form `onDynamic` schema for the final submit, and owns step navigation, conditional visibility, and optional persistence.
+- **Nested values per step.** `defaultValues` is grouped by step (`{ account: {...}, plan: {...} }`), so each step owns a slice of the form.
+- **Per-step schemas via `FormGroup`.** Each step is a `withForm` component whose `form.FormGroup` validates only that step's slice with its own schema on advance. The full `schema` passed to `useFormWizard` is not sliced per step; it is only the final-submit backstop.


+      "name": "form-wizard",
+      "type": "registry:ui",
+      "title": "Form Wizard",
+      "description": "A multi-step wizard built on TanStack Form and Zod. Each step is a withForm component that validates its own slice through a FormGroup, with conditional steps and optional persistence.",


+## Installation
+
+```bash
+npx shadcn@latest add @uipath/form-wizard


Copilot AI review requested due to automatic review settings July 13, 2026 14:55

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

Copilot started reviewing on behalf of frankkluijtmans July 13, 2026 14:56 View session

Copilot AI reviewed Jul 13, 2026

View reviewed changes

frankkluijtmans mentioned this pull request Jul 14, 2026

feat(apollo-vertex): customizable form wizard chrome [AGVSOL-4703] #914

Draft

frankkluijtmans changed the title ~~feat(apollo-vertex): multi-step form wizard and stepper~~ feat(apollo-vertex): multi-step form wizard and stepper [AGVSOL-4703] Jul 14, 2026

Copilot AI review requested due to automatic review settings July 14, 2026 12:25

frankkluijtmans force-pushed the frankkluijtmans/wizard-forms-vertex branch from 1ea8024 to c1170ac Compare July 14, 2026 12:25

frankkluijtmans marked this pull request as ready for review July 14, 2026 12:26

frankkluijtmans requested a review from a team as a code owner July 14, 2026 12:26

frankkluijtmans requested review from KokoMilev and ruudandriessen July 14, 2026 12:26

Copilot started reviewing on behalf of frankkluijtmans July 14, 2026 12:26 View session