Skip to content

Abstract onboarding wizard into reusable FormWizard#663

Open
SinhSinhAn wants to merge 1 commit intodevelopfrom
feature/588-abstract-formwizard
Open

Abstract onboarding wizard into reusable FormWizard#663
SinhSinhAn wants to merge 1 commit intodevelopfrom
feature/588-abstract-formwizard

Conversation

@SinhSinhAn
Copy link
Copy Markdown
Contributor

Summary

  • Extracted the onboarding multi-step wizard into reusable form.Wizard and form.WizardStep components that any form can use
  • Fixed a bug where validation blocked backward navigation (now only blocks forward)
  • OnboardingForm shrunk from ~400 lines to ~260 lines, with step content declared inline via <form.WizardStep>

How it works

The wizard registers as a TanStack Form formComponent, so consumers use it as form.Wizard / form.WizardStep:

<form.Wizard startStep={<Intro />} finishStep={<Done />} onComplete={() => router.push('/')}>
  <form.WizardStep label="Name" fields={['firstName', 'lastName']}>
    ...form fields...
  </form.WizardStep>
</form.Wizard>

Each step declares its fields array, which the wizard uses for per-step validation. The wizard handles the MUI Stepper, slide transitions, dynamic height, and navigation buttons automatically.

Files changed

File What
src/components/form/FormWizard/ New directory with types, context, Wizard, and WizardStep
src/utils/form.ts Registered Wizard + WizardStep in formComponents
src/components/getting-started/OnboardingForm.tsx Rewritten to use the new wizard
src/components/getting-started/OnboardingFormStep.tsx Deleted (content moved inline)
src/components/form/FormWizard.tsx Deleted (replaced by directory)

Closes #588

Extract the ~400-line OnboardingForm wizard into a reusable form.Wizard
and form.WizardStep component system that integrates with TanStack Form's
formComponents registry. This enables multi-step wizards for onboarding,
club match, club creation, and event creation forms.

Key changes:
- Create FormWizard/ directory with types, context, and components
- Register Wizard and WizardStep as formComponents in form.ts
- Fix validation to only block forward navigation (not backward)
- Auto-advance to finish step after successful form submission
- Rewrite OnboardingForm from ~400 lines to ~260 lines
- Delete OnboardingFormStep (content moved inline to WizardStep children)

Closes #588
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 31, 2026

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

Project Deployment Actions Updated (UTC)
clubs Ready Ready Preview, Comment Mar 31, 2026 5:02pm

Request Review

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.

Abstract onboarding experience to FormWizard

1 participant