Skip to content

feat(forms): sweep 6 remaining ConfigForms onto react-hook-form (#325) - #330

Merged
krisarmstrong merged 1 commit into
mainfrom
feat/325-react-hook-form
May 27, 2026
Merged

feat(forms): sweep 6 remaining ConfigForms onto react-hook-form (#325)#330
krisarmstrong merged 1 commit into
mainfrom
feat/325-react-hook-form

Conversation

@krisarmstrong

Copy link
Copy Markdown
Collaborator

Completes the test-config portion of the forms-stack migration started
in the Y.1564 pilot. All 7 ConfigForms now share the same pattern:

  • useConfigForm wires schema + parent-owned config + setConfig
  • register() replaces value/onChange + Number() coercion
  • watch() drives derived displays (summaries, conditional inputs)
  • FieldError renders inline per-field errors
  • Cross-field errors (RFC6349 minRTT≤maxRTT, TSN jitter≤latency)
    render at the form footer

TSN's sub-component decomposition (TestParameters / TimingRequirements /
PTPConfig / SchedulingConfig / TestSummary) is preserved; the form
instance is now shared via FormProvider + useFormContext rather than
prop-drilling config/updateConfig through five layers.

Each migration removes ~10-30 hand-rolled onChange handlers and
adds real field-level validation that the previous HTML5 min/max
hints couldn't enforce (a user could paste a 99999% rate or a
negative VLAN ID and submit without complaint).

Refs #325. Auth/MFA/recovery/setup forms in App.tsx and the
account/security pages follow in the next commits.

Completes the test-config portion of the forms-stack migration started
in the Y.1564 pilot. All 7 ConfigForms now share the same pattern:
  - useConfigForm wires schema + parent-owned config + setConfig
  - register() replaces value/onChange + Number() coercion
  - watch() drives derived displays (summaries, conditional inputs)
  - FieldError renders inline per-field errors
  - Cross-field errors (RFC6349 minRTT≤maxRTT, TSN jitter≤latency)
    render at the form footer

TSN's sub-component decomposition (TestParameters / TimingRequirements /
PTPConfig / SchedulingConfig / TestSummary) is preserved; the form
instance is now shared via FormProvider + useFormContext rather than
prop-drilling config/updateConfig through five layers.

Each migration removes ~10-30 hand-rolled onChange handlers and
adds real field-level validation that the previous HTML5 min/max
hints couldn't enforce (a user could paste a 99999% rate or a
negative VLAN ID and submit without complaint).

Refs #325. Auth/MFA/recovery/setup forms in App.tsx and the
account/security pages follow in the next commits.
@qodo-code-review

Copy link
Copy Markdown

Qodo reviews are paused for this user.

Troubleshooting steps vary by plan Learn more →

On a Teams plan?
Reviews resume once this user has a paid seat and their Git account is linked in Qodo.
Link Git account →

Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center?
These require an Enterprise plan - Contact us
Contact us →

@krisarmstrong
krisarmstrong enabled auto-merge (squash) May 27, 2026 14:47
@github-actions

Copy link
Copy Markdown
Contributor

License Compliance Report

All dependencies pass license compliance checks

Go Dependencies

  • Unknown: 31 package(s)
  • MIT: 26 package(s)
  • BSD-3-Clause: 16 package(s)
  • Apache-2.0: 11 package(s)
  • BSD-2-Clause: 1 package(s)

npm Dependencies

See full report in workflow artifacts

Allowed Licenses: MIT, Apache-2.0, BSD-*, ISC, CC0-1.0, MPL-2.0
Forbidden: GPL, AGPL, SSPL (strong copyleft)

@krisarmstrong
krisarmstrong merged commit 224b39d into main May 27, 2026
26 of 28 checks passed
@krisarmstrong
krisarmstrong deleted the feat/325-react-hook-form branch May 27, 2026 14:51
krisarmstrong pushed a commit that referenced this pull request May 27, 2026
… + Setup (#332)

Final sweep completes the forms-stack migration started in stems #328
(foundation + Y.1564 pilot), #330 (6 ConfigForms), and #331 (MFA
setup + disable modals). All 13 forms in stem are now on
react-hook-form + valibot.

Migrations
- App.tsx login form — username + password, uses LoginSchema
- App.tsx MFA verify form — 6-digit code, uses MfaVerifySchema
- components/recovery/RecoveryForm.tsx — token + new password +
  confirm, uses new RecoveryCompleteSchema (cross-field check for
  password == confirmPassword). PasswordField sub-component refactored
  to accept UseFormRegisterReturn so register('password') threads
  through in one line.
- components/setup/SetupWizard.tsx — password + confirm (username is
  fixed from setup-status prop, not user-edited). Uses revised
  SetupWizardSchema (drops the username field that the form doesn't
  actually accept user input for; the v.check() cross-field rule
  remains).

Schema additions
- RecoveryCompleteSchema in src/schemas/auth.ts. The recovery-token
  flow is distinct from the recovery-code flow (RecoveryEnterSchema
  for the latter, which is still defined but not yet wired — that's
  for a future entry-by-code flow).

Out of scope
- The hand-rolled `passwordValid` / `passwordsMatch` derived state in
  the old RecoveryForm is gone — react-hook-form's formState.isValid
  now drives the submit button. The submit handler no longer
  re-validates because the resolver already gated it.

Closes #332.
krisarmstrong added a commit that referenced this pull request May 27, 2026
… + Setup (#332) (#333)

Final sweep completes the forms-stack migration started in stems #328
(foundation + Y.1564 pilot), #330 (6 ConfigForms), and #331 (MFA
setup + disable modals). All 13 forms in stem are now on
react-hook-form + valibot.

Migrations
- App.tsx login form — username + password, uses LoginSchema
- App.tsx MFA verify form — 6-digit code, uses MfaVerifySchema
- components/recovery/RecoveryForm.tsx — token + new password +
  confirm, uses new RecoveryCompleteSchema (cross-field check for
  password == confirmPassword). PasswordField sub-component refactored
  to accept UseFormRegisterReturn so register('password') threads
  through in one line.
- components/setup/SetupWizard.tsx — password + confirm (username is
  fixed from setup-status prop, not user-edited). Uses revised
  SetupWizardSchema (drops the username field that the form doesn't
  actually accept user input for; the v.check() cross-field rule
  remains).

Schema additions
- RecoveryCompleteSchema in src/schemas/auth.ts. The recovery-token
  flow is distinct from the recovery-code flow (RecoveryEnterSchema
  for the latter, which is still defined but not yet wired — that's
  for a future entry-by-code flow).

Out of scope
- The hand-rolled `passwordValid` / `passwordsMatch` derived state in
  the old RecoveryForm is gone — react-hook-form's formState.isValid
  now drives the submit button. The submit handler no longer
  re-validates because the resolver already gated it.

Closes #332.

Co-authored-by: Kris Armstrong <kris.armstrong@icloud.com>
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.

1 participant