Dynamic Product Configuration Form with Live Validation

Problem Description:

Imagine you are building a flexible e-commerce platform where product customization options can vary widely. Your task is to develop a React application that renders a dynamic form based on a provided configuration object. This form needs to support various input types, perform real-time client-side validation, and handle form submission with appropriate loading and feedback states.

Core Requirements:

1. Dynamic Form Rendering:

   • Render form fields (text input, number input, select dropdown, checkbox) dynamically based on the mockFormConfig provided in App.tsx.
   • Each field should have an associated label.

2. Real-time Client-side Validation:

   • Implement validation logic for each field based on its validation rules defined in mockFormConfig.
   • Support required, minLength, maxLength (for text), min, max (for numbers), and pattern (for regex).
   • Display validation error messages immediately below the respective input field as the user types or interacts with the form.
   • The errorMessage from the validation rule should be used if provided; otherwise, a generic error message should be displayed.

3. Form State Management:

   • Efficiently manage the state of all form field values and their corresponding validation errors.
   • The form's overall validity should be derived from the validity of all individual fields.

4. Form Submission Handling:

   • The submit button should be disabled if the form is currently invalid or if a submission is in progress.
   • On form submission, simulate an asynchronous API call (e.g., using setTimeout for 1-2 seconds).
   • During the simulated API call, display a loading indicator or message (e.g., "Submitting...").
   • After the submission, display a success or error message based on the simulated API response (e.g., randomly succeed/fail or always succeed).
   • Upon successful submission, the form should reset to its initial default values.