(BREAKING) Migrate from Formik to RHF (#349)

package.json

@@ -30,16 +30,13 @@
   },
   "dependencies": {
     "@carbon/react": ">1.47.0 <1.50.0",
-    "ace-builds": "^1.33.2",
     "classnames": "^2.5.1",
-    "dayjs": "1.x",
-    "formik": "^2.4.6",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^4.0.13",
+    "react-hook-form": "^7.52.0",
     "react-markdown": "^7.1.2",
     "react-waypoint": "^10.3.0",
-    "react-webcam": "^7.2.0",
-    "yup": "^1.4.0"
+    "react-webcam": "^7.2.0"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",
@@ -48,7 +45,6 @@
     "i18next": "23.x",
     "react": "18.x",
     "react-i18next": "11.x",
-    "rxjs": "6.x",
     "swr": "2.x"
   },
   "devDependencies": {
@@ -66,7 +62,6 @@
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^18.3.2",
     "@types/webpack-env": "^1.18.5",
-    "@types/yup": "^0.32.0",
     "@typescript-eslint/eslint-plugin": "^7.9.0",
     "@typescript-eslint/parser": "^7.9.0",
     "clean-webpack-plugin": "^3.0.0",
@@ -91,7 +86,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^11.18.6",
-    "rxjs": "^6.6.7",
     "sass": "^1.77.2",
     "swc-loader": "^0.2.6",
     "swr": "^2.2.5",

src/adapters/control-adapter.ts

@@ -0,0 +1,29 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import { type FormField, type FormProcessorContextProps, type FormFieldValueAdapter } from '../types';
+
+export const ControlAdapter: FormFieldValueAdapter = {
+  getDisplayValue: (field: FormField, value: any) => {
+    return value;
+  },
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    return null;
+  },
+  getInitialValue: function (
+    field: FormField,
+    sourceObject: OpenmrsResource,
+    context: FormProcessorContextProps,
+  ): Promise<any> {
+    return null;
+  },
+  getPreviousValue: function (
+    field: FormField,
+    sourceObject: OpenmrsResource,
+    context: FormProcessorContextProps,
+  ): Promise<any> {
+    return null;
+  },
+  tearDown: function (): void {
+    return;
+  },
+};

src/adapters/encounter-datetime-adapter.ts

@@ -0,0 +1,38 @@
+import { formatDate, type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import {
+  type FormField,
+  type FormProcessorContextProps,
+  type FormFieldValueAdapter,
+  type ValueAndDisplay,
+} from '../types';
+import { gracefullySetSubmission } from '../utils/common-utils';
+
+export const EncounterDatetimeAdapter: FormFieldValueAdapter = {
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    gracefullySetSubmission(field, value, null);
+  },
+  getInitialValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    return sourceObject?.encounterDatetime ? new Date(sourceObject.encounterDatetime) : context.sessionDate;
+  },
+  getPreviousValue: function (
+    field: FormField,
+    sourceObject: OpenmrsResource,
+    context: FormProcessorContextProps,
+  ): ValueAndDisplay {
+    if (sourceObject?.encounterDatetime) {
+      const date = new Date(sourceObject.encounterDatetime);
+      return {
+        value: date,
+        display: this.getDisplayValue(field, date),
+      };
+    }
+    return null;
+  },
+  getDisplayValue: function (field: FormField, value: Date) {
+    return formatDate(value);
+  },
+  tearDown: function (): void {
+    return;
+  },
+};

src/adapters/encounter-location-adapter.ts

@@ -0,0 +1,39 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import {
+  type ValueAndDisplay,
+  type FormField,
+  type FormFieldValueAdapter,
+  type FormProcessorContextProps,
+} from '../types';
+import { gracefullySetSubmission } from '../utils/common-utils';
+
+export const EncounterLocationAdapter: FormFieldValueAdapter = {
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    gracefullySetSubmission(field, value, null);
+  },
+  getInitialValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps): any {
+    if (sourceObject && sourceObject['location']?.uuid) {
+      return sourceObject['location'].uuid;
+    }
+
+    return context.location.uuid;
+  },
+  getPreviousValue: function (
+    field: FormField,
+    sourceObject: OpenmrsResource,
+    context: FormProcessorContextProps,
+  ): ValueAndDisplay {
+    const encounter = sourceObject ?? context.previousDomainObjectValue;
+    return {
+      value: encounter?.location?.uuid,
+      display: encounter?.location?.name,
+    };
+  },
+  getDisplayValue: function (field: FormField, value: string) {
+    return value;
+  },
+  tearDown: function (): void {
+    return;
+  },
+};

src/adapters/encounter-provider-adapter.ts

@@ -0,0 +1,48 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import {
+  type ValueAndDisplay,
+  type FormField,
+  type FormFieldValueAdapter,
+  type FormProcessorContextProps,
+} from '../types';
+import { gracefullySetSubmission } from '../utils/common-utils';
+
+export const EncounterProviderAdapter: FormFieldValueAdapter = {
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    gracefullySetSubmission(field, value, null);
+  },
+  getInitialValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    const encounter = sourceObject ?? context.previousDomainObjectValue;
+    return getLatestProvider(encounter)?.uuid;
+  },
+  getPreviousValue: function (
+    field: FormField,
+    sourceObject: OpenmrsResource,
+    context: FormProcessorContextProps,
+  ): ValueAndDisplay {
+    const encounter = sourceObject ?? context.previousDomainObjectValue;
+    const provider = getLatestProvider(encounter);
+    return {
+      value: provider?.uuid,
+      display: provider?.name,
+    };
+  },
+  getDisplayValue: function (field: FormField, value: any) {
+    if (value?.display) {
+      return value.display;
+    }
+    return value;
+  },
+  tearDown: function (): void {
+    return;
+  },
+};
+
+function getLatestProvider(encounter: OpenmrsResource) {
+  if (encounter && encounter['encounterProviders']?.length) {
+    const lastProviderIndex = encounter['encounterProviders'].length - 1;
+    return encounter['encounterProviders'][lastProviderIndex].provider;
+  }
+  return null;
+}

src/adapters/encounter-role-adapter.ts

@@ -0,0 +1,54 @@
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import {
+  type ValueAndDisplay,
+  type FormField,
+  type FormFieldValueAdapter,
+  type FormProcessorContextProps,
+} from '../types';
+import { gracefullySetSubmission } from '../utils/common-utils';
+
+export const EncounterRoleAdapter: FormFieldValueAdapter = {
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    gracefullySetSubmission(field, value, null);
+  },
+  getInitialValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    const encounter = sourceObject ?? context.domainObjectValue;
+    if (encounter) {
+      return getLatestEncounterRole(encounter)?.uuid;
+    }
+    return context.customDependencies.defaultEncounterRole.uuid;
+  },
+  getPreviousValue: function (
+    field: FormField,
+    sourceObject: OpenmrsResource,
+    context: FormProcessorContextProps,
+  ): ValueAndDisplay {
+    const encounter = sourceObject ?? context.previousDomainObjectValue;
+    if (encounter) {
+      const role = getLatestEncounterRole(encounter);
+      return {
+        value: role?.uuid,
+        display: role?.name,
+      };
+    }
+    return null;
+  },
+  getDisplayValue: function (field: FormField, value: any) {
+    if (value?.display) {
+      return value.display;
+    }
+    return value;
+  },
+  tearDown: function (): void {
+    return;
+  },
+};
+
+function getLatestEncounterRole(encounter: OpenmrsResource) {
+  if (encounter && encounter['encounterProviders']?.length) {
+    const lastProviderIndex = encounter['encounterProviders'].length - 1;
+    return encounter['encounterProviders'][lastProviderIndex].encounterRole;
+  }
+  return null;
+}

src/adapters/inline-date-adapter.ts

@@ -0,0 +1,58 @@
+import { formatDate, parseDate, toOmrsIsoString, type OpenmrsResource } from '@openmrs/esm-framework';
+import { type FormContextProps } from '../provider/form-provider';
+import { isNewSubmissionEffective } from './obs-comment-adapter';
+import { isEmpty } from '../validators/form-validator';
+import { type FormField, type FormFieldValueAdapter, type FormProcessorContextProps } from '../types';
+import { hasSubmission } from '../utils/common-utils';
+import { editObs } from './obs-adapter';
+
+export const InlineDateAdapter: FormFieldValueAdapter = {
+  transformFieldValue: function (field: FormField, value: any, context: FormContextProps) {
+    const targetField = context.getFormField(field.meta.targetField);
+    const targetFieldCurrentValue = context.methods.getValues(targetField.id);
+    const dateString = value instanceof Date ? toOmrsIsoString(value) : value;
+    if (targetField.meta.submission?.newValue) {
+      if (isEmpty(dateString) && !isNewSubmissionEffective(targetField, targetFieldCurrentValue)) {
+        // clear submission
+        targetField.meta.submission.newValue = null;
+      } else {
+        targetField.meta.submission.newValue.obsDatetime = dateString;
+      }
+    } else if (!hasSubmission(targetField) && targetField.meta.previousValue) {
+      if (isEmpty(value) && isEmpty(targetField.meta.previousValue.obsDatetime)) {
+        return null;
+      }
+      // generate submission
+      const newSubmission = editObs(targetField, targetFieldCurrentValue);
+      targetField.meta.submission = {
+        newValue: {
+          ...newSubmission,
+          obsDatetime: dateString,
+        },
+      };
+    }
+  },
+  getInitialValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    const encounter = sourceObject ?? context.domainObjectValue;
+    if (encounter) {
+      const targetFieldId = field.id.split('_inline_date')[0];
+      const targetField = context.formFields.find((field) => field.id === targetFieldId);
+      if (targetField?.meta.previousValue?.obsDatetime) {
+        return parseDate(targetField?.meta.previousValue?.obsDatetime);
+      }
+    }
+    return null;
+  },
+  getPreviousValue: function (field: FormField, sourceObject: OpenmrsResource, context: FormProcessorContextProps) {
+    return null;
+  },
+  getDisplayValue: function (field: FormField, value: Date) {
+    if (value) {
+      return formatDate(value);
+    }
+    return null;
+  },
+  tearDown: function (): void {
+    return;
+  },
+};