GSoC 2023: O3: Migrate vanilla React forms to RHF

Primary Mentor	@Dennis Kigen

Primary Mentor	@Dennis Kigen
Backup Mentor	@Hadijah Kyampeire
Assigned to	@Christopher Lumu

Abstract

Currently OpenMRS has a bunch of forms written in O3 in vanilla React. These forms, though functional, are not the most performant or extensible and for the most part, lack validation. React Hook Form offers easy-to-use validation out of the box, performance and tiny bundle size. The task is to refactor existing forms to use the React Hook Form library as well as Zod for schema validations.

Required Skills

- - - - Excellent React, Typescript, HTML , CSS skills
      - Experience with or desire to learn about refactoring

Project Rating and length

Medium

175 hours

Objectives

- - To refactor the existing forms in the application using the ReactHookForm library.
  - To introduce schema validation using the Zod library.
  - To improve form performance and maintainability.
  - Simplify form development and reduce the amount of boilerplate code required.

Identified forms to Refactor

There are 9 forms that this refactor targets which include:

- - - - Conditions form >>>>>1
        Programs form>>>2
        Allergy from >>>>>3
        Start Visit form >>>>>

- - - - Visit Notes form >>>>>
        Appointments form >>>>
        Vitals and Biometrics form >>>>>>
        Medication Order form >>>>>
        Patient Registration (heaviest lift, written in Formik) >>>>>

Methodology

1. 1. 1. 1. Identify Forms to Refactor:
        Install and Configure RHF and Zod:
        Create RHF Form Components
        Integrate Zod for Schema Validation:
        Migrate Existing Form Data:
        Test and Debug:

Issues

epic https://openmrs.atlassian.net/browse/O3-2138

Issue Number	Issue	Pull Request	Status

Issue Number	Issue	Pull Request	Status
O3-2234	Initinalization of the react hook form and zod dependencies	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1254	merged
O3-2139	Conditons form Migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1248	merged
O3-2142	Visit Note form Migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1253	merged
O3-2140	Programs form migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1250	merged
O3-2144	Start visit form Migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1278	merged
O3-2141	Medications order form migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1309	merged
O3-2143	Vitals and Biometrics form migration Migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1310	merged
O3-2236	Appointments form Migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1295	merged
O3-2235	Allergy form Migration	https://github.com/openmrs/openmrs-esm-patient-chart/pull/1308	merged