chore: add comments for EditImageFormField

Author: AbhishekA1509

src/Shared/Components/EditImageFormField/EditImageFormField.tsx

@@ -23,6 +23,21 @@ const FallbackImage = ({ showEditIcon, defaultIcon }: FallbackImageProps) => (
 )
 
 // NOTE: Have to replace component in UpsertTenantModal with EditImageFormField when prioritized.
+/**
+ * @example
+ * ```tsx
+ * <EditImageFormField
+ *      url={icon}
+ *      defaultIcon={<ICSampleIcon className="w-100 h-100 dc__opacity-1 p-5" />}
+ *      errorMessage={formError.icon}
+ *      handleError={handleError}
+ *      handleURLChange={handleURLChange}
+ *      ariaLabelPrefix="Edit icon url"
+ *      dataTestIdPrefix="edit-icon-url"
+ *      altText="Form icon"
+ *  />
+ * ```
+ */
 const EditImageFormField = ({
     defaultIcon,
     errorMessage,

src/Shared/Components/EditImageFormField/types.ts

@@ -1,19 +1,42 @@
 import { ReactNode } from 'react'
 
 export interface EditImageFormFieldProps {
+    /**
+     * Fallback icon to be shown when image is not available
+     */
     defaultIcon: ReactNode
+    /**
+     * Would be shown below input, there are two types of error messages:
+     * External - Error message handled from state above and would propagate to parent through handleError
+     * Internal - Error message handled internally and would not propagate to parent, like empty preview URL
+     */
     errorMessage: string
+    /**
+     * Would be called when there is an error in the image URL during handleChange or handlePreviewImage
+     */
     handleError: (error: string) => void
+    /**
+     * The current value of input field
+     */
     url: string
+    /**
+     * Would be called when the URL is changed in the input field
+     */
     handleURLChange: (url: string) => void
+    /**
+     * The alt text for the image
+     */
     altText: string
+    /**
+     * Prefix for aria-label
+     */
     ariaLabelPrefix: string
+    /**
+     * Prefix for data-testid
+     */
     dataTestIdPrefix: string
 }
 
 export interface FallbackImageProps extends Pick<EditImageFormFieldProps, 'defaultIcon'> {
-    /**
-     * @default - false
-     */
-    showEditIcon?: boolean
+    showEditIcon: boolean
 }