import { useForm } from "react-hook-form";
                  
export default function ValidationForm() {
  const [selectedOption, setSelectedOption] = useState(null);
  const [validate, setValidate] = useState(false);
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = () => {
    setValidate(true);
  };

return (
  <Card>
   <CardBody>
       <Form className="needs-validation custom-input" onSubmit={handleSubmit(onSubmit)}>
         <Row className="g-3">
           <Col xs={12}>
             <Label>{FirstName}</Label>
             <input type="text" className={`form-control ${errors.firstName ? 'is-invalid' : ''} ${validate && !errors.firstName ? 'is-valid' : ''}`} placeholder="Mark" {...register("firstName", { required: "Please enter your valid name" })} />
                 {errors.firstName && (<FormFeedback>{errors.firstName.message}</FormFeedback>)}
                 {validate && !errors.firstName && <FormFeedback valid>{LooksGood}</FormFeedback>}
           </Col>
           <Col xs={12}>
             <Label>{Password}</Label>
             <input type="password" className={`form-control ${errors.password ? 'is-invalid' : ''} ${validate && !errors.password ? 'is-valid' : ''}`} {...register("password", { required: "Please enter your valid password" })} />
                 {errors.password && (<FormFeedback>{errors.password.message}</FormFeedback>)}
           </Col>
           <Col md={6}>
            <FormGroup>
                <Label>{City}</Label>
                <input type="text" className={`form-control ${errors.city ? 'is-invalid' : ''} ${validate && !errors.city ? 'is-valid' : ''}`} {...register("city", { required: "Please provide a valid city" })} />
                {errors.city && (<FormFeedback>{errors.city.message}</FormFeedback>)}
                {validate && !errors.city && <FormFeedback valid>{LooksGood}</FormFeedback>}
            </FormGroup>
           </Col>
           <Col md={6}>
            <FormGroup>
                <Label htmlFor="validationCustom05">{Zip}</Label>
                <input type="text" className={`form-control ${errors.zip ? 'is-invalid' : ''} ${validate && !errors.zip ? 'is-valid' : ''}`} {...register('zip', { required: 'Please provide a valid zip' })} />
                {errors.zip && <FormFeedback>{errors.zip.message}</FormFeedback>}
                {validate && !errors.zip && <FormFeedback valid>{LooksGood}</FormFeedback>}
            </FormGroup>
           </Col>
           <Col xs="12">
             <Btn color="primary">{SubmitButton}</Btn>
           </Col>
         </Row>
       </Form>
    </CardBody>
  </Card>
  );
};

Remove package from project

npm remove react-hook-form

import { Card, CardBody, Row, FormGroup, Col, Form, Input, Label } from "reactstrap";

<Card>
 <CardBody>
  <Form >
   <Row>
    <Col>
     <FormGroup>
       <Label>Email address</label>
       <Input type="email" placeholder="name@example.com">
     </FormGroup>
    </Col>
   </Row>
  </Form>
 </CardBody>
</Card>

import { Card, CardBody, Row, Col, Input, Label } from "reactstrap";
                  
 <Card>               
  <CardBody>
   <Row>
    <Col sm={6} xl={4}>
     <FormGroup check>
      <Input id="radio1" type="radio" name="radio1" value="option1">
      <Label for="radio1" ckeck>Option<span class="digits"> 1</span></Label>
     </FormGroup>
     <FormGroup check>
      <Input id="radio3" type="radio" name="radio1" value="option1" disabled>
      <Label for="radio3" check disabled>Disabled</Label>
     </FormGroup>
     <FormGroup check>
      <Input id="radio4" type="radio" name="radio1" value="option1" checked>
      <Label for="radio4" check>Checked</Label>
     </FormGroup>
   </Col>
   <Col sm={6} xl={4}>
    <FormGroup check>
     <Input id="checkbox1" type="checkbox" >
     <Label className="my-0" for="checkbox1" check>Default</Label>
    </FormGroup>
    <FormGroup check>
     <Input id="checkbox2" type="checkbox" disabled >
     <Label className="my-0" for="checkbox2" check disabled>Disabled</Label>
    </FormGroup>
    <FormGroup check>
     <Input id="checkbox3" type="checkbox" checked >
     <Label className="my-0" for="checkbox3" check>Checked</label>
    </FormGroup>
   </Col>
   </Row>
  </CardBody>
</Card>

<Form>
  <FormGroup className="m-form__group">
   <div class="form-label">Left Addon</div>
   <InputGroup>
    <span class="input-group-text">@</span>
    <Input type="text" placeholder="Email">
   </InputGroup>
  </FormGroup>
</Form>

import DatePicker from "react-datepicker";

export default function DatePickerComponent() {
  const [startDate, setStartDate] = useState(new Date());
  const handleChange = (date: Date) => setStartDate(date);

  return (
    <Row>
      <Col xxl="9" className="box-col-12">
        <InputGroup className="flatpicker-calender">
          <DatePicker className="form-control flatpickr-input" selected={startDate} onChange={handleChange} />
        </InputGroup>
      </Col>
    </Row>
  );
};
                

Remove package from project

npm remove @types/react-datepicker

<Label className="switch">
 <Input type="checkbox" checked>
 <span className="switch-state"></span>
</Label>
<Label className="switch">
 <Input type="checkbox">
 <span className="switch-state"></span>
</Label>

export default function DefaultTouchspin() {
  const initialValues = DEFAULT_TOUCHSPIN_DATA.map((data) => data.value);
  const [values, setValues] = useState(initialValues);
  const handleIncrement = (index:number) => {
    setValues((prevValues) => {
      return prevValues.map((value, i) => (i === index ? value + 1 : value));
    });
  };
  const handleDecrement = (index:number) => {
    setValues((prevValues) => {
      return prevValues.map((value, i) => (i === index && value > 0 ? value - 1 : value));
    });
  };

  return (
      <Card>
        <CardBody className="common-flex">
          <div className="touchspin-wrapper d-flex">
            <Btn color="primary" outline className={`p-0 decrement-touchspin btn-touchspin me-1 ${btnClass}`} onClick={handleDecrement}>
              <i className="fa fa-minus" />
            </Btn>
            <Input className={`input-touchspin spin-outline-${color} me-1`} type="number" value={value} readOnly />
            <Btn color={color} outline={outline} className={`p-0 increment-touchspin btn-touchspin ${btnClass}`} onClick={handleIncrement}>
              <i className="fa fa-plus" />
            </Btn>
          </div>
        </CardBody>
      </Card>
  );
};

import { Typeahead } from "react-bootstrap-typeahead";

const BasicTypeAhead = () => {
  return (
   <Card>
     <CardBody>
       <div id="the-basics">
         <Form className="theme-form">
           <div>
             <Typeahead options={STATE_OF_USA} placeholder="States of USA" id="Basic TypeAhead" />
           </div>
         </Form>
       </div>
     </CardBody>
   </Card>
  );
};

Remove package from project

npm remove react-bootstrap-typeahead

export default function NumberingWizard() {
const [formData, setFormData] = useState({ email: "", firstName: "", password: "", confirmPassword: "", agreeTerms: false, placeHolderName: "", cardNumber: "", expiration: "", cvvNumber: "", uploadDocumentation: "", informationCheckBox: false, linkedInLink: "", gitHubLink: "", giveFeedBack: "", state: "", agreeConditions: false, });
const [step, setStep] = useState(1);
const [showFinish, setShowFinish] = useState(false);
const [finishClicked, setFinishClicked] = useState(false);

const updateFormData = (event: ChangeEvent<HTMLInputElement>) => {
    const name = event.target.name;
    const value = name == "agreeTerms" || name == "informationCheckBox" || name == "agreeConditions" ? event.target.checked : name === "uploadDocumentation" ? event.target.files && event.target.files[0].name : event.target.value;
    setFormData((prevData) => ({
        ...prevData, [name]: value,
    }));
};
const handleBackButton = () => {
    setShowFinish(false);
    setStep((prev) => prev - 1)
    setFinishClicked(false);
};
const handleNextButton = () => {
    const { linkedInLink, gitHubLink, giveFeedBack, state, agreeConditions, email, firstName, password, confirmPassword, agreeTerms, placeHolderName, cardNumber, expiration, cvvNumber, uploadDocumentation, informationCheckBox, } = formData;
    if (email !== "" && firstName !== "" && password !== "" && confirmPassword !== "" && agreeTerms !== false && step === 1) {
        setStep(2)
    } else if (placeHolderName !== "" && cardNumber !== "" && expiration !== "" && cvvNumber !== "" && informationCheckBox !== false && uploadDocumentation !== "" && step === 2) {
        setStep(3);
    } else if (linkedInLink !== "" && gitHubLink !== "" && giveFeedBack !== "" && state !== "" && agreeConditions !== false && step === 3) {
        setStep(4);
        setShowFinish(true);
    }
    else { return toast.error("please fill out all the fields before moving on to the next step"); }
};
const handleFinishButton = () => {
    setFinishClicked(true);
    return toast.success("Successfully Completed");
};
return (
    <Col xl={6}>
        <Card className="height-equal">
            <CardBody className="basic-wizard important-validation">
                <div className="stepper-horizontal" id="stepper1">
                {stepperHorizontalData.map((data, index) => (
                  <div key={index} className={`stepper-one  step ${step > index + 1 || finishClicked === true ? "done active " : ""}`}>
                      <div className="step-circle">
                          <span>{index + 1}</span>
                      </div>
                      <div className="step-title">{data}</div>
                      <div className="step-bar-left" />
                      <div className="step-bar-right" />
                  </div>
                  ))}
                </div>
                <div id="msform">
                    {step === 1 && (
                      <Form className="stepper-one needs-validation custom-input" noValidate>
                        <Row className="g-3">
                            <Col sm={6}>
                                <Label>{EmailAddress}<span className="txt-danger">{'*'}</span></Label>
                                <Input onChange={updateFormData} value={formData.email} name="email" type="email" placeholder="oliva@gmail.com" />
                            </Col>
                            <Col sm={6}>
                                <Label>{FirstName}<span className="txt-danger">{'*'}</span></Label>
                                <Input onChange={updateFormData} value={formData.firstName} name="firstName" type="text" placeholder="Enter your name" />
                            </Col>
                            <Col xs={12}>
                                <Col sm={12}><Label>{Password}<span className="txt-danger">{'*'}</span></Label></Col>
                                <Input onChange={updateFormData} value={formData.password} name="password" type="password" placeholder="Enter password" />
                            </Col>
                            <Col xs={12}>
                                <Col sm={12}><Label>{ConfirmPassword}<span className="txt-danger">{'*'}</span></Label></Col>
                                <Input onChange={updateFormData} value={formData.confirmPassword} name="confirmPassword" type="password" placeholder="Enter confirm password" />
                            </Col>
                            <Col xs={12}>
                                <FormGroup check>
                                    <Input id="inputCheckWizard" name="agreeTerms" onChange={updateFormData} type="checkbox" required />
                                    <Label className="mb-0" htmlFor="inputcheckwizard" check>{AgreeTerms}</Label>
                                </FormGroup>
                            </Col>
                        </Row>
                    </Form>
                    )}
                    {step === 2 && (<CartInfoForm updateFormData={updateFormData} formData={formData} />)}
                    {step === 3 && (<FeedbackForm updateFormData={updateFormData} formData={formData} />)}
                    {step === 4 && (<FinishForm />)}
                </div>
                <div className="wizard-footer d-flex gap-2 justify-content-end">
                    {step > 1 && (<Btn className="alert-light-primary" color="transparent" onClick={handleBackButton}>{Back}</Btn>)}
                    <Btn disabled={finishClicked} color="primary" onClick={showFinish ? handleFinishButton : handleNextButton}>{showFinish ? "Finish" : "Next"}</Btn>
                </div>
            </CardBody>
        </Card>
    </Col>
)
}