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

@@ -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 {};

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 = {

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");

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

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}

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);

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

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

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());

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 ";
   }
 

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

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;

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,36 +15,21 @@ 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;
   className?: string;
   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 });
 

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>) => {

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) => {

src/Components/HCX/InsurerAutocomplete.tsx

@@ -17,14 +17,16 @@ 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");
 
   return (
     <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}

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({
       },
     },
   },
-});
+};