react-frontend-common-components 0.0.58 → 0.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-frontend-common-components",
-  "version": "0.0.58",
+  "version": "0.0.60",
   "description": "Reusable frontend library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/components/app-phone-input/app-phone-input.tsx

@@ -1,13 +1,14 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import "react-phone-input-2/lib/style.css";
-import "./app-phone-input.css";
 import PhoneInput, { CountryData } from "react-phone-input-2";
+import "./app-phone-input.css";
 
 interface AppPhoneInputProps {
   value: string;
   countryCode?: string;
   handleChange: (phone: string, countryCode: string, uniCode: string) => void;
-  className:string;
+  className: string;
+  id: string;
 }
 
 const AppPhoneInput = ({
@@ -15,10 +16,21 @@ const AppPhoneInput = ({
   handleChange,
   countryCode,
   className,
+  id,
 }: AppPhoneInputProps) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      const inputElement = wrapperRef.current.querySelector("input");
+      if (inputElement) {
+        inputElement.id = id;
+      }
+    }
+  }, [id]);
   return (
     <div className={className}>
-      <div className={"inputContainer"}>
+      <div className={"inputContainer"} ref={wrapperRef}>
         <PhoneInput
           value={value}
           country={"ae"}

package/src/components/app-upload-image/app-upload-image.tsx

@@ -31,6 +31,7 @@ const AppUploadImage = ({
   maxSizeMb = 2,
   altText = "Profile Image",
 }: AppUploadImageProps) => {
+  
   const [imageUrl, setImageUrl] = useState<string>(value);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -42,7 +43,7 @@ const AppUploadImage = ({
     const file = event.target.files?.[0];
     if (file) {
       const isAcceptedFormat = acceptedFormats.includes(file.type);
-      const isLtMaxSize = file.size / 1024 / 1024 < maxSizeMb;
+      const isLtMaxSize = file.size / 1024 / 1024 <= maxSizeMb;
 
       if (!isAcceptedFormat) {
         alert(alertMessages.invalidType);
@@ -57,31 +58,39 @@ const AppUploadImage = ({
       const reader = new FileReader();
       reader.onloadend = () => {
         setImageUrl(reader.result as string);
-        if (onFileChange) {
-          onFileChange(file);
-        }
+        onFileChange?.(file);
       };
       reader.readAsDataURL(file);
-    } else if (onFileChange) {
-      onFileChange(null);
+    } else {
+      setImageUrl("");
+      onFileChange?.(null);
     }
   };
 
   return (
     <div className={`profileImageContainer ${className}`}>
-      <div className={imageUrl === "" ? "altTextWrapper" : ""}>
-        <img className={"profileImage"} src={imageUrl} alt={altText} />
+      <div className={imageUrl ? "imageWrapper" : "altTextWrapper"}>
+        {imageUrl ? (
+          <img className="profileImage" src={imageUrl} alt={altText} />
+        ) : (
+          <span className="altText">{altText}</span>
+        )}
       </div>
-      <button className={"uploadButton"} onClick={handleButtonClick}>
+      <button
+        className="uploadButton"
+        onClick={handleButtonClick}
+        aria-label={text}
+      >
         <span>{uploadIcon || Icons.uploadIcon}</span>
         {text}
       </button>
       <input
         type="file"
         accept={acceptedFormats.join(",")}
-        className={"fileInput"}
+        className="fileInput"
         ref={fileInputRef}
         onChange={handleFileChange}
+        style={{ display: "none" }}
       />
     </div>
   );