GSoC 2023: O3: Migrate vanilla React forms to RHF

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. 1. 1. 1. Identify Forms to Refactor:
                  2. Install and Configure RHF and Zod:
                  3. Create RHF Form Components
                  4. Integrate Zod for Schema Validation:
                  5. Migrate Existing Form Data:
                  6. Test and Debug:

Issues

epic     O3-2138 - Getting issue details... STATUS

Weekly Reports/blogs

Find all of them at :

Bonding period: https://medium.com/@topherlumu_55016/gsoc-2023-with-openmrs-community-bonding-e08a3d9981ee

week 01: https://medium.com/@topherlumu_55016/gsoc-2023-with-openmrs-coding-week-01-af49f95ff00e

week 02: https://medium.com/@topherlumu_55016/gsoc-2023-week-2-exploring-the-rhf-framework-with-zod-cb956f22a9be

week 03: https://medium.com/@topherlumu_55016/coding-week-03-gsoc23-58e36a7e0c9b

week 04: https://medium.com/@topherlumu_55016/week-04-gsoc23-with-openmrs-dbf5fee9eacf

week 05:  https://medium.com/@topherlumu_55016/week-05-gsoc23-with-openmrs-c61ecf03434c

week 06: https://medium.com/@topherlumu_55016/week-06-gsoc23-with-openmrs-ebe39e762e74

Mid-term evaluation:

week 07: https://medium.com/@topherlumu_55016/week-07-gsoc23-with-openmrs-fe2953bfa2fb

week 08: https://medium.com/@topherlumu_55016/week-08-gsoc23-with-openmrs-8fd6d3014

week 09:https://medium.com/@topherlumu_55016/week-09-gsoc23-with-openmrs-4cecc0f8d84

week 10:https://medium.com/@topherlumu_55016/week-10-gsoc23-with-openmrs-6f5c24034a8a

week 11:https://medium.com/@topherlumu_55016/week-11-gsoc23-with-openmrs-4c9eca778742

week 12: https://medium.com/@topherlumu_55016/week-12-wrapping-up-a-transformative-gsoc23-journey-with-openmrs-bd6df7babb97

Final Presentation

https://talk.openmrs.org/t/gsoc-2023-migrating-vanilla-react-forms-to-reacthookform-final-evaluation/40365

Resources

OpenMRS 3.0: A Frontend Framework that enables collaboration and better User Experience
https://talk.openmrs.org/t/gsoc-2023-o3-migrate-vanilla-react-forms-to-rhf-project-updates-discussion/39625