React Stepper Component with TypeScript

This challenge asks you to build a reusable stepper component in React using TypeScript. Steppers are commonly used in multi-step forms or onboarding processes to guide users through a sequence of steps, providing clear visual cues about their progress. A well-implemented stepper enhances user experience by breaking down complex tasks into manageable chunks.

Problem Description

You need to create a Stepper component that displays a series of steps, allowing users to navigate between them. The component should accept an array of step objects as a prop, each representing a single step in the process. Each step object should have a label property (string) representing the step's title and an optional disabled property (boolean, default: false) indicating whether the step is currently unavailable.

The stepper should visually indicate the current step (based on a currentStep prop) and allow users to move to the next or previous step using buttons. The "Next" button should be disabled if the user is on the last step or if the current step is disabled. The "Previous" button should be disabled if the user is on the first step or if the current step is disabled.

Key Requirements:

• Step Display: Each step should be displayed with its label.
• Current Step Indication: Visually highlight the current step (e.g., with a different color or styling).
• Navigation Buttons: Provide "Previous" and "Next" buttons.
• Disabled State Handling: Respect the disabled property of each step, disabling navigation if necessary.
• currentStep Prop: Accept a currentStep prop (number, zero-indexed) to determine the active step.
• TypeScript: The component must be written in TypeScript with appropriate type definitions.

Expected Behavior:

• Clicking "Next" should increment currentStep (within bounds).
• Clicking "Previous" should decrement currentStep (within bounds).
• The component should re-render to reflect the updated currentStep.
• Buttons should be disabled appropriately based on currentStep and step disabled status.
• The component should handle edge cases gracefully (e.g., currentStep out of bounds).

Edge Cases to Consider:

• currentStep is less than 0.
• currentStep is greater than or equal to the number of steps.
• The input array of steps is empty.
• Steps have disabled set to true.

Examples

Example 1:

Input: steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }], currentStep = 1
Output: A stepper displaying "Step 1" (inactive), "Step 2" (active), and "Step 3" (inactive), with "Previous" and "Next" buttons enabled.
Explanation: The component correctly identifies Step 2 as the current step and renders the stepper accordingly.

Example 2:

Input: steps = [{ label: "Step 1", disabled: true }, { label: "Step 2" }, { label: "Step 3" }], currentStep = 0
Output: A stepper displaying "Step 1" (inactive and disabled), "Step 2" (inactive), and "Step 3" (inactive), with only the "Next" button disabled.
Explanation: The component respects the disabled state of Step 1 and disables the "Next" button.

Example 3:

Input: steps = [{ label: "Step 1" }, { label: "Step 2" }, { label: "Step 3" }], currentStep = 2
Output: A stepper displaying "Step 1" (inactive), "Step 2" (inactive), and "Step 3" (active), with only the "Previous" button enabled.
Explanation: The component correctly identifies Step 3 as the current step and disables the "Next" button.

Constraints

• The component should be reasonably performant (avoid unnecessary re-renders).
• The input steps array will always contain objects with a label property (string).
• currentStep will be a non-negative integer.
• The styling of the stepper is left to your discretion, but it should be visually clear and functional.
• The component should be reusable and easily customizable.

Notes

• Consider using CSS modules or styled-components for styling.
• Think about how to handle the edge cases mentioned above.
• Focus on creating a clean, well-structured, and type-safe component.
• You can use any React hooks you deem necessary (e.g., useState).
• The goal is to demonstrate your understanding of React component development, TypeScript, and state management.