React Multi-Step Form Wizard

Create a reusable React component that implements a multi-step form wizard. This component will guide users through a series of steps, allowing them to input information sequentially. This pattern is common in applications for sign-up flows, complex data entry, or guided setup processes.

Problem Description

You need to build a Wizard component in React using TypeScript. This component should manage the state of the current step and render different content based on the active step. It should also provide navigation controls (Next, Previous, and potentially a Finish/Submit button).

Key Requirements:

1. State Management: The Wizard component must manage which step is currently active.
2. Step Rendering: It should accept an array of Step objects, where each Step contains a title and the component to render for that step.
3. Navigation:
   • A "Next" button should advance to the subsequent step.
   • A "Previous" button should navigate back to the previous step.
   • The "Previous" button should be disabled on the first step.
   • The "Next" button should be disabled on the last step (or replaced by a "Finish" button).
4. Component Structure: The Wizard component should render the current step's component and the navigation buttons.
5. TypeScript: The solution must be written in TypeScript, leveraging types for props and state.

Expected Behavior:

• When the Wizard component mounts, it should display the first step.
• Clicking "Next" progresses to the next step.
• Clicking "Previous" moves back to the previous step.
• The wizard should not allow navigation beyond the last step or before the first step.
• On the final step, the "Next" button should be replaced with a "Finish" or "Submit" button.
• The Wizard component should accept an onFinish callback function to be executed when the user completes the wizard.

Edge Cases:

• What happens if the steps array is empty? The wizard should handle this gracefully, perhaps by rendering nothing or a message.
• What if a step component itself needs access to the current step's data or needs to pass data up? (For this challenge, focus on basic step rendering and navigation. Data sharing between steps can be an advanced extension).

Examples

Example 1: Basic Wizard Flow

Imagine a simple 3-step wizard for user registration.

Input (Conceptual):

interface StepData {
  title: string;
  component: React.FC;
}

const registrationSteps: StepData[] = [
  { title: "Basic Info", component: BasicInfoForm },
  { title: "Contact Details", component: ContactDetailsForm },
  { title: "Confirmation", component: ConfirmationPage },
];

// BasicInfoForm, ContactDetailsForm, ConfirmationPage are placeholder React components.

Expected Output (UI Representation):

• Step 1: Renders BasicInfoForm. Displays "Previous" (disabled) and "Next" buttons.
• Step 2: Renders ContactDetailsForm. Displays "Previous" and "Next" buttons.
• Step 3: Renders ConfirmationPage. Displays "Previous" and "Finish" buttons.

Explanation: The user navigates through these forms sequentially.

Example 2: Handling Empty Steps

Input:

const emptySteps: StepData[] = [];

Expected Output:

The Wizard component renders nothing or a placeholder message like "No steps defined for this wizard."

Explanation: The wizard gracefully handles the scenario where no steps are provided.

Constraints

• The Wizard component must be implemented as a functional component using React hooks.
• All props and internal state must be typed using TypeScript.
• The Step data structure should have at least a title (string) and a component (React.FC).
• The Wizard component should accept an steps prop (an array of Step objects) and an optional onFinish prop (a function).

Notes

• Consider how you will manage the current step index.
• Think about how to conditionally render the "Next" vs. "Finish" button.
• The focus of this challenge is on the wizard's structural logic and navigation, not on complex form validation or data aggregation between steps. You can assume the step components are simple and don't need to pass data back up to the wizard for this exercise.
• You'll likely need to create placeholder React components for the individual steps to test your Wizard component.