Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
📝 WalkthroughWalkthroughIntroduces a new Step Wizard UI component with reducer-based state management, enabling multi-step navigation with step registration, forward/backward movement, completion callbacks, and derived positioning metadata. Changes
Sequence DiagramsequenceDiagram
participant User
participant StepWizardRoot
participant StepWizardStep
participant Reducer
participant Context
User->>StepWizardRoot: Render StepWizard.Root with steps
StepWizardRoot->>Reducer: Initialize state (empty steps)
StepWizardStep->>Reducer: REGISTER_STEP on mount
Reducer->>Reducer: Add step to state, update activeStepId
Reducer->>Context: Publish state update
Context->>StepWizardStep: Provide position, canGoBack, canGoForward
User->>Context: Call next() action
Context->>Reducer: GO_NEXT action
Reducer->>Reducer: Advance activeStepId, compute position
Reducer->>Context: Update context value
Context->>StepWizardStep: Re-render active step with transitions
User->>Context: Call back() action
Context->>Reducer: GO_BACK action (if canGoBack)
Reducer->>Reducer: Decrement activeStepId
Reducer->>Context: Publish updated state
StepWizardStep->>Reducer: UNREGISTER_STEP on unmount
Reducer->>Reducer: Remove step from state
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Comment |
Contributor
Author
This was referenced Mar 2, 2026
Merged
19 tasks
ogzhanolguncu
requested review from
Flo4604,
MichaelUnkey,
chronark,
imeyer,
mcstepp and
perkinsjr
as code owners
chronark
approved these changes
Mar 2, 2026
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/internal/ui/src/components/step-wizard/step-wizard.tsx`:
- Around line 186-189: The root wrapper rendered by StepWizardContext.Provider
is not positioned, so absolutely positioned step panels in StepWizard.Step
(which use "absolute inset-0") will be anchored to an unintended
ancestor/viewport; update the wrapper div rendered in StepWizard (the element
using className and cn("flex flex-col", className)) to include a positioning
class (e.g., "relative") so that StepWizard.Step panels are positioned against
this root container rather than an outer ancestor.
- Around line 65-73: When handling the "UNREGISTER_STEP" action in the reducer,
ensure state.activeStepId remains valid: if action.id === state.activeStepId,
pick a fallback from the remaining steps (for example use nextSteps[0]?.id or
null) and include that value in the returned state alongside the updated steps
and insertionOrder; update the "UNREGISTER_STEP" return to set activeStepId to a
valid id instead of leaving the old (now-deleted) id so code that computes
activeStepIndex no longer gets -1.
- Around line 96-101: The GO_TO handler currently allows jumping backward even
when the current step has preventBack; update the case in the reducer so it
first finds the current step by state.activeStepId and the indices of the
current step and target step (using state.steps and action.id), and if the
target index is less than the current index and currentStep.preventBack is true,
return state (no-op); otherwise proceed to return the new state with
activeStepId: action.id. Ensure you still validate the target exists
(state.steps.some(...)) and use the step ids/indexes to enforce the preventBack
rule.
ℹ️ Review info
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
web/internal/ui/src/components/step-wizard/index.tsweb/internal/ui/src/components/step-wizard/step-wizard.tsxweb/internal/ui/src/components/step-wizard/types.tsweb/internal/ui/src/index.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Adds a new
StepWizardcomponent to the UI library that provides a flexible multi-step wizard interface. The component includes:StepWizard.Rootcontainer that manages wizard state and navigationStepWizard.Stepcomponent for individual steps with smooth transitionsuseStepWizardhook for accessing wizard stateThe wizard handles step transitions with opacity and transform animations, prevents navigation when appropriate (e.g.,
preventBackflag), and triggers anonCompletecallback when reaching the final step.Fixes # (issue)
Type of change
How should this be tested?
StepWizard.Rootand multipleStepWizard.Stepcomponentsnext,back, andgoTofunctionsskipfunctionpreventBackflag block backward navigationonCompletecallback fires when reaching the final stepChecklist
Required
pnpm buildpnpm fmtmake fmton/godirectoryconsole.logsgit pull origin mainAppreciated