Hi everyone, I am interested in the O3: Migrate vanilla React forms to RHF project on this year’s Google Summer of Code project list.
I went through the project description and some other related threads, and come to speed with the project specifications and aim.
So, I have created this thread to further clarify the necessary resources and discussions here.
I am also interested in Q3: Mirate vanilla React forms to RHF
I have developed several web applications(using HTML,CSS and js) that are responsive, interactive, and visually appealing. In addition, I have recently started learning React, and I am confident in my ability to apply my existing web development skills to build dynamic and scalable applications with this framework.
that is awesome @parthis , could place more resources to the thread as well
sorry sir I cann’t understand what kind of resource
This is great @lumuchris256 and @parthis please keep sharing your findings and progress, happy to help where I can, so feel free to share PRs of your work.
Thanks @hadijah315 for supporting the folks as they gather project ideas 
CONTINUED
Moving forward with refactoring existing forms to use the React Hook Form library as well as Zod schema validations project idea , the main objectives of the project are -
Refactor existing vanilla React forms to use React Hook Form and Zod for schema validations.
Improve form performance and user experience by using uncontrolled components and minimal re- renders.
Simplify form development and reduce the amount of boilerplate code required.
Provide a flexible and powerful way to define and enforce schema validations for form inputs.
Why Refactor Existing Vanilla React Forms with React Hook Form and Zod?
1. Improved performance: React Hook Form uses uncontrolled components and minimal re-renders, which can lead to improved performance and faster form submissions.
2. Simplified code: React Hook Form simplifies the code required to implement forms, reducing the amount of boilerplate code that developers need to write and maintain.
3. Enhanced validation: Zod provides a powerful and flexible way to define and enforce schema validations for form inputs, helping to prevent invalid data from being submitted.
4. Reusability: React Hook Form components can be easily reused across multiple forms and applications, reducing duplication of effort and promoting consistency in the user interface.
5. Easier testing: React Hook Form makes it easier to write unit tests for form components, allowing developers to more easily ensure that their code is working as expected.
6. Better user experience: React Hook Form provides several built-in features that can enhance the user experience of forms, such as automatic focus on invalid fields and support for input masking and formatting.
Moving Forward
I have gone through the dev3 server tracing all the listed forms targetted for Migration to RHF, and a sample RHF demo of one of the forms
For the forms!!
I cant seem to locate the Visit Notes Form ?? [resolved]
Patient Registration form is the heaviest lift due to Formik
Identified existing form components that will need replacing for RHF
Looking into how schema validations using Zod integrate into form components.
Thank you @lumuchris256 for this info. We look forward to work on the project
Hi @hadijah315 please could you point me to the repo where I can easily see the implementation of the following forms in reactjs.
Also i will appreciate if you can help with a guide to navigate the openMRS demo to view this forms in action.
thanks in advance
That should work for you, slide into the …chart-app, …medications-app and …appointments-app
thank you @jexsie
Hi everyone please i will appreciate a clarification here. I have gone through some forms on GitHub - openmrs/openmrs-esm-patient-chart: Patient dashboard microfrontend for the OpenMRS SPA My question is for example if working on a ticket or making changes to this forms, Do I need to setup the dev server following the readMe on the repo or I need to install and run the o3 frontend as on O3 Implementer Documentation: Set Up, Configure & Deploy - Projects - OpenMRS Wiki before anything on the frontend.
@lumuchris256 Thank you for findings,
I am also interested in the O3: Migrate vanilla React forms to RHF.
I understood from the project that they are lots of forms written in vanilla React which requires refactoring using React hook forms and Zod schema validation for performance optimization, reducing boiler plate code for easy debugging and ensuring strict validation values from form input.
I have gone through dev3 and traced that the below listed form requires refactoring to RHF i. Patient registration ii. Patient list iii. Cohort-builder iv. Appointment v. Form builder vi. Dispensing
I have been able to find my way to navigate to the forms on O3, I don’t mind setting up a call @lumuchris256 @njiddasalifu @kdaud @jayasanka for walkthrough and brainstorm about the project and as well testing out different function and props on codesandbox before implementing on O3.
Can we pick patient registration and start the RHF migration? @dkigen @hadijah315 @kdaud @vasharma05
@dkigen @hadijah315 Kindly provide more requirement to implement this project
@njiddasalifu yes you have to follow readMe instruction
How I was able to navigate my way to the repositories
yarn install and yarn start if you want to run all module or for a particular module example yarn start --sources 'packages/esm-patient-forms-app.
if you are still confused, we can set up a call@juliet I would recommend the first command be just yarn , no dependency version changes are usually required to the lock and json file in order to run a package , spin with plain yarn instead of yarn install
@juliet that is awesome , though
I have gone through dev3 and traced that the below listed form requires refactoring to RHF i. Patient registration ii. Patient list iii. Cohort-builder iv. Appointment v. Form builder vi. Dispensing
these from ii to vi ain’t the actual targeted forms for refactoring (check the initial post about the project on talk)
I have already implemented a couple of the actual forms in sandboxes as well and still implementing , I would say that is a good approach
Can we pick patient registration and start the RHF migration?
From last Monday’s call @dkigen advised we dont start migrating the forms into the codebase as yet (gsoc actual work) but work on current issues to familiarize with how components , props ,validation and current hooks are used in 3.x in relation , plus work on fine tuning proposals for now
@juliet @njiddasalifu a couple of more resources to look at as well are
thank you all for the resources and the steps given to run the setup. I appreciate
@lumuchris256 Please can you drop link to the codesandbox and list of other forms for migration, I didn’t see the list in the previous post…I can only see patient registration should I convert patient registration on sandbox
Hi check out the 03.x reference app repo. I think some of the forms are there too