Refactor 2: [Phase 2] Refactor Screens to use FormFieldGroup (Shared Components)

src/shared-components/DatePicker/DatePicker.tsx

@@ -17,7 +17,7 @@ import {
   DatePickerSlotProps,
   LocalizationProvider,
 } from '@mui/x-date-pickers';
-import { Form } from 'react-bootstrap';
+import { FormTextField } from 'shared-components/FormFieldGroup/FormTextField';
 import type { Dayjs } from 'dayjs';
 import commonStyles from '../SharedPicker.module.css';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
@@ -134,7 +134,7 @@ const DatePicker: React.FC<InterfaceDatePickerProps> = ({
                 <div
                   className={`${commonStyles.fullWidth} ${textFieldClassName || ''} d-flex position-relative`.trim()}
                 >
-                  <Form.Control
+                  <FormTextField
                     {...inputProps}
                     {...other}
                     id={dataTestId} // Link label to input

src/shared-components/EventForm/EventForm.tsx

@@ -24,6 +24,7 @@ import {
   validateRecurrenceInput,
 } from 'utils/recurrenceUtils';
 import type { InterfaceRecurrenceRule } from 'utils/recurrenceUtils';
+import { FormTextField } from 'shared-components/FormFieldGroup/FormTextField';
 type EventVisibility = 'PUBLIC' | 'ORGANIZATION' | 'INVITE_ONLY';
 
 const getVisibilityType = (
@@ -330,48 +331,48 @@ const EventForm: React.FC<IEventFormProps> = ({
     <>
       <Form onSubmit={handleSubmit}>
         <label htmlFor="eventTitle">{t('eventName')}</label>
-        <Form.Control
+        <FormTextField
           type="text"
           id="eventTitle"
           placeholder={t('enterName')}
           autoComplete="off"
           required
           value={formState.name}
           className={styles.inputField}
-          onChange={(e): void => {
-            setFormState({ ...formState, name: e.target.value });
+          onChange={(value): void => {
+            setFormState({ ...formState, name: value });
           }}
           data-testid="eventTitleInput"
           data-cy="eventTitleInput"
           aria-label={t('eventName')}
         />
         <label htmlFor="eventDescription">{tCommon('description')}</label>
-        <Form.Control
+        <FormTextField
           as="textarea"
           id="eventDescription"
           placeholder={t('enterDescription')}
           autoComplete="off"
           required
           value={formState.description}
           className={styles.inputField}
-          onChange={(e): void => {
-            setFormState({ ...formState, description: e.target.value });
+          onChange={(value): void => {
+            setFormState({ ...formState, name: value });
           }}
           data-testid="eventDescriptionInput"
           data-cy="eventDescriptionInput"
           aria-label={tCommon('description')}
         />
         <label htmlFor="eventLocation">{tCommon('location')}</label>
-        <Form.Control
+        <FormTextField
           type="text"
           id="eventLocation"
           placeholder={tCommon('enterLocation')}
           autoComplete="off"
           required
           value={formState.location}
           className={styles.inputField}
-          onChange={(e): void => {
-            setFormState({ ...formState, location: e.target.value });
+          onChange={(value): void => {
+            setFormState({ ...formState, name: value });
           }}
           data-testid="eventLocationInput"
           data-cy="eventLocationInput"

src/shared-components/ProfileForm/ProfileForm.tsx

@@ -111,7 +111,6 @@ import type { IEvent } from 'types/Event/interface';
 import ProfileFormWrapper from './ProfileFormWrapper';
 import DatePicker from 'shared-components/DatePicker';
 import { removeEmptyFields, validateImageFile } from 'utils/userUpdateUtils';
-
 const MemberDetail: React.FC = (): JSX.Element => {
   const { t } = useTranslation('translation', { keyPrefix: 'memberDetail' });
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -364,7 +363,7 @@ const MemberDetail: React.FC = (): JSX.Element => {
                       />
                     </div>
                   </div>
-                  <Form.Control
+                  <input
                     accept="image/*"
                     id="postphoto"
                     name="photo"

src/shared-components/Recurrence/RecurrenceEndOptionsSection.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Form, FormControl } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import DatePicker from '../DatePicker';
 import dayjs from 'dayjs';
 import type { Dayjs } from 'dayjs';
@@ -15,6 +15,7 @@ import type {
   RecurrenceEndOptionType,
 } from '../../utils/recurrenceUtils';
 import styles from '../../style/app-fixed.module.css';
+import { FormTextField } from 'shared-components/FormFieldGroup/FormTextField';
 
 interface InterfaceRecurrenceEndOptionsSectionProps {
   frequency: Frequency;
@@ -44,6 +45,14 @@ export const RecurrenceEndOptionsSection: React.FC<
   setRecurrenceRuleState,
   t,
 }) => {
+  const handleCountChange = (value: string) => {
+    const syntheticEvent = {
+      target: { value },
+      currentTarget: { value },
+    } as React.ChangeEvent<HTMLInputElement>;
+    onCountChange(syntheticEvent);
+  };
+
   return (
     <div className="mb-3">
       <span className="fw-semibold text-secondary">{t('ends')}</span>
@@ -109,14 +118,14 @@ export const RecurrenceEndOptionsSection: React.FC<
                 )}
                 {option === endsAfter && (
                   <>
-                    <FormControl
+                    <FormTextField
                       type="number"
                       value={localCount}
-                      onChange={onCountChange}
+                      onChange={handleCountChange}
                       onDoubleClick={(e) => {
                         (e.target as HTMLInputElement).select();
                       }}
-                      onKeyDown={(e) => {
+                      onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                         if (
                           e.key === '-' ||
                           e.key === '+' ||

src/shared-components/Recurrence/RecurrenceFrequencySection.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { Dropdown, FormControl } from 'react-bootstrap';
+import { Dropdown } from 'react-bootstrap';
 import { Frequency, frequencies } from '../../utils/recurrenceUtils';
 import styles from '../../style/app-fixed.module.css';
+import { FormTextField } from 'shared-components/FormFieldGroup/FormTextField';
 
 interface InterfaceRecurrenceFrequencySectionProps {
   frequency: Frequency;
   localInterval: number | string;
-  onIntervalChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onIntervalChange: (value: string) => void;
   onFrequencyChange: (newFrequency: Frequency) => void;
   t: (key: string) => string;
 }
@@ -20,14 +21,14 @@ export const RecurrenceFrequencySection: React.FC<
   return (
     <div className="mb-4">
       <span className="fw-semibold text-secondary">{t('repeatsEvery')}</span>{' '}
-      <FormControl
+      <FormTextField
         type="number"
         value={localInterval}
         onChange={onIntervalChange}
-        onDoubleClick={(e) => {
+        onDoubleClick={(e: React.MouseEvent<HTMLInputElement>) => {
           (e.target as HTMLInputElement).select();
         }}
-        onKeyDown={(e) => {
+        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
           if (
             e.key === '-' ||
             e.key === '+' ||

src/shared-components/TimePicker/TimePicker.tsx

@@ -17,12 +17,11 @@ import {
   TimePickerSlotProps,
   LocalizationProvider,
 } from '@mui/x-date-pickers';
-import { Form } from 'react-bootstrap';
 import type { Dayjs } from 'dayjs';
 import styles from './TimePicker.module.css';
 import commonStyles from '../SharedPicker.module.css';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-
+import { FormTextField } from 'shared-components/FormFieldGroup/FormTextField';
 /**
  * Component Props for TimePicker
  */
@@ -136,7 +135,7 @@ const TimePicker: React.FC<InterfaceTimePickerProps> = ({
                 <div
                   className={`${styles.fullWidth} ${textFieldClassName || ''} d-flex position-relative`.trim()}
                 >
-                  <Form.Control
+                  <FormTextField
                     {...inputProps}
                     {...other}
                     id={dataTestId} // Link label to input

src/types/FormFieldGroup/interface.ts

@@ -1,15 +1,28 @@
 export interface IFormFieldGroupProps {
-  name: string;
-  label: string;
+  name?: string;
+  label?: string;
   required?: boolean;
   helpText?: string;
   error?: string;
   touched?: boolean;
 }
 
 export interface IFormTextFieldProps extends IFormFieldGroupProps {
+  as?: 'input' | 'textarea';
   type?: 'text' | 'email' | 'password' | 'number' | 'url' | 'tel';
   placeholder?: string;
-  value: string;
-  onChange: (v: string) => void;
+  value: string | number;
+  id?: string;
+  autoComplete?: string;
+  className?: string;
+  onChange: (value: string) => void;
+  onDoubleClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  min?: string | number;
+  disabled?: boolean;
 }
+export type FileInputProps = IFormFieldGroupProps &
+  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
+    type: 'file';
+    onChange: (files: FileList | null) => void;
+  };