From a62d3d1c1dc5baae920deb620f6e6e386ff40c7c Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Fri, 14 Jun 2024 07:17:36 +0530
Subject: [PATCH] Drop unused `context` from Form Fields due to unnecessary
 complexity (#7983)

* Drop unused `context` from Form Fields as it was adding unnecessary complexity and decreased type-safety

* try fixing storybook vite config

* update vite config
---
 .storybook/vite.config.mts                    | 10 +--
 .../Common/BloodPressureFormField.tsx         |  2 +-
 .../PMJAYProcedurePackageAutocomplete.tsx     |  2 +-
 .../Common/RouteToFacilitySelect.tsx          |  2 +-
 .../Common/UserAutocompleteFormField.tsx      |  4 +-
 src/Components/Form/FormContext.ts            |  4 +-
 .../Form/FormFields/DateFormField.tsx         |  2 +-
 .../Form/FormFields/DateRangeFormField.tsx    |  2 +-
 src/Components/Form/FormFields/Month.tsx      |  2 +-
 .../Form/FormFields/PhoneNumberFormField.tsx  |  9 ++-
 .../Form/FormFields/TextAreaFormField.tsx     |  2 +-
 .../Form/FormFields/TextFormField.tsx         |  2 +-
 src/Components/Form/FormFields/Utils.ts       | 62 +++----------------
 src/Components/HCX/ClaimsItemsBuilder.tsx     |  2 +-
 .../HCX/InsuranceDetailsBuilder.tsx           |  2 +-
 src/Components/HCX/InsurerAutocomplete.tsx    |  4 +-
 vite.config.mts                               |  6 +-
 17 files changed, 38 insertions(+), 81 deletions(-)

diff --git a/.storybook/vite.config.mts b/.storybook/vite.config.mts
index 1e6e2445ffa..89e6222f220 100644
--- a/.storybook/vite.config.mts
+++ b/.storybook/vite.config.mts
@@ -1,8 +1,2 @@
-import { defineConfig } from "vite";
-
-export default defineConfig({
-  esbuild: {
-    loader: "tsx",
-    include: [/src\/.*\.[tj]sx?$/, /.storybook\/.*\.[tj]sx?$/],
-  },
-});
+/** @type {import('vite').UserConfig} */
+export default {};
diff --git a/src/Components/Common/BloodPressureFormField.tsx b/src/Components/Common/BloodPressureFormField.tsx
index 3f7ecacce46..95dbad02f62 100644
--- a/src/Components/Common/BloodPressureFormField.tsx
+++ b/src/Components/Common/BloodPressureFormField.tsx
@@ -11,7 +11,7 @@ import { BloodPressure } from "../Patient/models";
 type Props = FormFieldBaseProps<BloodPressure>;
 
 export default function BloodPressureFormField(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
 
   const handleChange = (event: FieldChangeEvent<number>) => {
     const value: BloodPressure = {
diff --git a/src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx b/src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx
index f99e07ab5db..1fee5599220 100644
--- a/src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx
+++ b/src/Components/Common/PMJAYProcedurePackageAutocomplete.tsx
@@ -17,7 +17,7 @@ type PMJAYPackageItem = {
 type Props = FormFieldBaseProps<PMJAYPackageItem>;
 
 export default function PMJAYProcedurePackageAutocomplete(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
 
   const { fetchOptions, isLoading, options } =
     useAsyncOptions<PMJAYPackageItem>("code");
diff --git a/src/Components/Common/RouteToFacilitySelect.tsx b/src/Components/Common/RouteToFacilitySelect.tsx
index 0bd4e83100a..56ba5c528dc 100644
--- a/src/Components/Common/RouteToFacilitySelect.tsx
+++ b/src/Components/Common/RouteToFacilitySelect.tsx
@@ -19,7 +19,7 @@ export const keys = Object.keys(ROUTE_TO_FACILITY_OPTIONS).map((key) =>
 type Props = FormFieldBaseProps<keyof typeof ROUTE_TO_FACILITY_OPTIONS>;
 
 export default function RouteToFacilitySelect(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
 
   return (
     <SelectFormField
diff --git a/src/Components/Common/UserAutocompleteFormField.tsx b/src/Components/Common/UserAutocompleteFormField.tsx
index 11f0df6c52a..9e94c5e4e68 100644
--- a/src/Components/Common/UserAutocompleteFormField.tsx
+++ b/src/Components/Common/UserAutocompleteFormField.tsx
@@ -19,7 +19,7 @@ type Props = FormFieldBaseProps<UserModel> & {
 };
 
 export default function UserAutocompleteFormField(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   const { fetchOptions, isLoading, options } = useAsyncOptions<UserModel>(
     "id",
     { queryResponseExtractor: (data) => data.results },
@@ -65,6 +65,8 @@ export default function UserAutocompleteFormField(props: Props) {
         <Autocomplete
           id={field.id}
           disabled={field.disabled}
+          // Voluntarily casting type as true to ignore type errors.
+          required={field.required as true}
           placeholder={props.placeholder}
           value={field.value}
           onChange={field.handleChange}
diff --git a/src/Components/Form/FormContext.ts b/src/Components/Form/FormContext.ts
index f6a6378e8c2..19d2b548e87 100644
--- a/src/Components/Form/FormContext.ts
+++ b/src/Components/Form/FormContext.ts
@@ -1,4 +1,4 @@
-import { Context, createContext } from "react";
+import { createContext } from "react";
 import { FieldError, FieldValidator } from "./FieldValidators";
 import { FormDetails } from "./Utils";
 
@@ -14,7 +14,5 @@ export type FormContextValue<T extends FormDetails> = (
   error: FieldError | undefined;
 };
 
-export type FormContext<T extends FormDetails> = Context<FormContextValue<T>>;
-
 export const createFormContext = <T extends FormDetails>() =>
   createContext<FormContextValue<T>>(undefined as any);
diff --git a/src/Components/Form/FormFields/DateFormField.tsx b/src/Components/Form/FormFields/DateFormField.tsx
index adb8c2538ae..3bec3712e2b 100644
--- a/src/Components/Form/FormFields/DateFormField.tsx
+++ b/src/Components/Form/FormFields/DateFormField.tsx
@@ -29,7 +29,7 @@ type Props = FormFieldBaseProps<Date> & {
  * ```
  */
 const DateFormField = (props: Props) => {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   return (
     <FormField field={field}>
       <DateInputV2
diff --git a/src/Components/Form/FormFields/DateRangeFormField.tsx b/src/Components/Form/FormFields/DateRangeFormField.tsx
index 69702422d0d..43edbc9ad0c 100644
--- a/src/Components/Form/FormFields/DateRangeFormField.tsx
+++ b/src/Components/Form/FormFields/DateRangeFormField.tsx
@@ -25,7 +25,7 @@ type Props = FormFieldBaseProps<DateRange> & {
  * ```
  */
 const DateRangeFormField = (props: Props) => {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   return (
     <FormField field={field}>
       <DateRangeInputV2
diff --git a/src/Components/Form/FormFields/Month.tsx b/src/Components/Form/FormFields/Month.tsx
index 625308f87c6..dc04ac913c1 100644
--- a/src/Components/Form/FormFields/Month.tsx
+++ b/src/Components/Form/FormFields/Month.tsx
@@ -24,7 +24,7 @@ const MonthLabels = [
 ];
 
 const MonthFormField = (props: Props) => {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
 
   const [month, setMonth] = useState(field.value?.getMonth());
   const [year, setYear] = useState(field.value?.getFullYear());
diff --git a/src/Components/Form/FormFields/PhoneNumberFormField.tsx b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
index a22254179f8..b2034507475 100644
--- a/src/Components/Form/FormFields/PhoneNumberFormField.tsx
+++ b/src/Components/Form/FormFields/PhoneNumberFormField.tsx
@@ -27,7 +27,7 @@ interface Props extends FormFieldBaseProps<string> {
 }
 
 export default function PhoneNumberFormField(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   const [error, setError] = useState<FieldError | undefined>();
   const [country, setCountry] = useState<CountryData>({
     flag: "🇮🇳",
@@ -183,8 +183,11 @@ const conditionPhoneCode = (code: string) => {
   return code.startsWith("+") ? code : "+" + code;
 };
 
-const formatPhoneNumber = (value: string, types: PhoneNumberType[]) => {
-  if (value === undefined || value === null) {
+const formatPhoneNumber = (
+  value: string | undefined,
+  types: PhoneNumberType[],
+) => {
+  if (value == null) {
     return "+91 ";
   }
 
diff --git a/src/Components/Form/FormFields/TextAreaFormField.tsx b/src/Components/Form/FormFields/TextAreaFormField.tsx
index 20373900cd2..c19a8e3c1c9 100644
--- a/src/Components/Form/FormFields/TextAreaFormField.tsx
+++ b/src/Components/Form/FormFields/TextAreaFormField.tsx
@@ -19,7 +19,7 @@ const TextAreaFormField = forwardRef(
     { rows = 3, ...props }: TextAreaFormFieldProps,
     ref?: React.Ref<HTMLTextAreaElement>,
   ) => {
-    const field = useFormFieldPropsResolver(props as any);
+    const field = useFormFieldPropsResolver(props);
     return (
       <FormField field={field}>
         <textarea
diff --git a/src/Components/Form/FormFields/TextFormField.tsx b/src/Components/Form/FormFields/TextFormField.tsx
index 8f1ee341e34..dad558ef31e 100644
--- a/src/Components/Form/FormFields/TextFormField.tsx
+++ b/src/Components/Form/FormFields/TextFormField.tsx
@@ -27,7 +27,7 @@ export type TextFormFieldProps = FormFieldBaseProps<string> & {
 };
 
 const TextFormField = forwardRef((props: TextFormFieldProps, ref) => {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   const { leading, trailing } = props;
   const leadingFocused = props.leadingFocused || props.leading;
   const trailingFocused = props.trailingFocused || props.trailing;
diff --git a/src/Components/Form/FormFields/Utils.ts b/src/Components/Form/FormFields/Utils.ts
index 8b962d3564a..ed01f01c4ab 100644
--- a/src/Components/Form/FormFields/Utils.ts
+++ b/src/Components/Form/FormFields/Utils.ts
@@ -1,7 +1,4 @@
-import { useContext } from "react";
-import { FieldError, FieldValidator } from "../FieldValidators";
-import { FormContext } from "../FormContext";
-import { FormDetails } from "../Utils";
+import { FieldError } from "../FieldValidators";
 
 export type FieldChangeEvent<T> = { name: string; value: T };
 export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
@@ -18,10 +15,7 @@ export type FieldChangeEventHandler<T> = (event: FieldChangeEvent<T>) => void;
  * @template T The type of the field value.
  * @template Form The type of the form details.
  */
-export type FormFieldBaseProps<
-  T,
-  Form extends FormDetails | undefined = undefined,
-> = {
+export type FormFieldBaseProps<T> = {
   label?: React.ReactNode;
   labelSuffix?: React.ReactNode;
   disabled?: boolean;
@@ -29,25 +23,13 @@ export type FormFieldBaseProps<
   required?: boolean;
   labelClassName?: string;
   errorClassName?: string;
-} & (Form extends FormDetails
-  ? {
-      context: FormContext<Form>;
-      name: keyof Form;
-      validate?: FieldValidator<Form[keyof Form]>;
-      id: undefined;
-      onChange: undefined;
-      value: undefined;
-      error: undefined;
-    }
-  : {
-      context?: undefined;
-      name: string;
-      validate?: undefined;
-      id?: string;
-      onChange: FieldChangeEventHandler<T>;
-      value?: T;
-      error?: FieldError;
-    });
+  name: string;
+  validate?: undefined;
+  id?: string;
+  onChange: FieldChangeEventHandler<T>;
+  value?: T;
+  error?: FieldError;
+};
 
 /**
  * Resolves the props for a form field.
@@ -57,31 +39,7 @@ export type FormFieldBaseProps<
  * @param props The props for the field.
  * @returns The resolved props along with a handleChange function.
  */
-export const useFormFieldPropsResolver = <
-  T,
-  Form extends FormDetails | undefined = undefined,
->(
-  props: FormFieldBaseProps<T, Form>,
-) => {
-  if (props.context) {
-    // Voluntarily disabling the rule of hooks here because we want to use the
-    // context hook only if the context is defined. If the context is not
-    // defined, we want to use the props instead.
-    //
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const registerField = useContext(props.context);
-    const fieldProps = registerField(props.name, props.validate);
-
-    const handleChange = (value: T) =>
-      fieldProps.onChange({ name: props.name, value });
-
-    return {
-      ...props,
-      ...fieldProps,
-      handleChange,
-    };
-  }
-
+export const useFormFieldPropsResolver = <T>(props: FormFieldBaseProps<T>) => {
   const handleChange = (value: T) =>
     props.onChange({ name: props.name, value });
 
diff --git a/src/Components/HCX/ClaimsItemsBuilder.tsx b/src/Components/HCX/ClaimsItemsBuilder.tsx
index bcf57181f53..c65d7f84c5c 100644
--- a/src/Components/HCX/ClaimsItemsBuilder.tsx
+++ b/src/Components/HCX/ClaimsItemsBuilder.tsx
@@ -15,7 +15,7 @@ import { HCXItemModel } from "./models";
 type Props = FormFieldBaseProps<HCXItemModel[]>;
 
 export default function ClaimsItemsBuilder(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
 
   const handleUpdate = (index: number) => {
     return (event: FieldChangeEvent<any>) => {
diff --git a/src/Components/HCX/InsuranceDetailsBuilder.tsx b/src/Components/HCX/InsuranceDetailsBuilder.tsx
index 3f41e1b0c0c..f75fa387a5f 100644
--- a/src/Components/HCX/InsuranceDetailsBuilder.tsx
+++ b/src/Components/HCX/InsuranceDetailsBuilder.tsx
@@ -17,7 +17,7 @@ import useConfig from "../../Common/hooks/useConfig";
 type Props = FormFieldBaseProps<HCXPolicyModel[]> & { gridView?: boolean };
 
 export default function InsuranceDetailsBuilder(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   const dispatch = useDispatch<any>();
 
   const handleUpdate = (index: number) => {
diff --git a/src/Components/HCX/InsurerAutocomplete.tsx b/src/Components/HCX/InsurerAutocomplete.tsx
index ca73822410c..b673b37feab 100644
--- a/src/Components/HCX/InsurerAutocomplete.tsx
+++ b/src/Components/HCX/InsurerAutocomplete.tsx
@@ -17,7 +17,7 @@ type Props = FormFieldBaseProps<InsurerOptionModel> & {
 };
 
 export default function InsurerAutocomplete(props: Props) {
-  const field = useFormFieldPropsResolver(props as any);
+  const field = useFormFieldPropsResolver(props);
   const { fetchOptions, isLoading, options } =
     useAsyncOptions<InsurerOptionModel>("code");
 
@@ -25,6 +25,8 @@ export default function InsurerAutocomplete(props: Props) {
     <FormField field={field}>
       <Autocomplete
         id={field.id}
+        // Voluntarily casting type as true to ignore type errors.
+        required={field.required as true}
         disabled={field.disabled}
         placeholder={props.placeholder}
         value={field.value}
diff --git a/vite.config.mts b/vite.config.mts
index 1b102f62ed4..5a8dcbae044 100644
--- a/vite.config.mts
+++ b/vite.config.mts
@@ -1,5 +1,4 @@
 import { VitePWA } from "vite-plugin-pwa";
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import checker from "vite-plugin-checker";
 import { treeShakeCareIcons } from "./plugins/treeShakeCareIcons";
@@ -12,7 +11,8 @@ const cdnUrls =
     "http://localhost:4566",
   ].join(" ");
 
-export default defineConfig({
+/** @type {import('vite').UserConfig} */
+export default {
   envPrefix: "REACT_",
   plugins: [
     react(),
@@ -105,4 +105,4 @@ export default defineConfig({
       },
     },
   },
-});
+};