react-frontend-common-components 0.0.62 → 0.0.64

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { ReactElement, useState } from "react";
 import { Input } from "antd";
 import {
   ChangeEventHandler,
@@ -24,6 +24,8 @@ interface AppPasswordInputProps {
   triggerFocus?: boolean;
   errorMessage?: string;
   autoComplete?: string;
+  icon?: React.ReactNode;
+  showIcon: boolean;
 }
 
 const AppPasswordInput = ({
@@ -40,7 +42,10 @@ const AppPasswordInput = ({
   className,
   errorMessage,
   isAutoFocus,
+  triggerFocus,
   autoComplete = "new-password",
+  icon,
+  showIcon = true,
 }: AppPasswordInputProps) => {
   const [showPassword, setShowPassword] = useState(false);
 
@@ -67,9 +72,11 @@ const AppPasswordInput = ({
           autoFocus={isAutoFocus}
           autoComplete={autoComplete}
         />
-        <span className={"icon"} onClick={togglePasswordVisibility}>
-          {Icons.eyePassword}
-        </span>
+        {showIcon && (
+          <span className={"icon"} onClick={togglePasswordVisibility}>
+            {icon || Icons.eyePassword}
+          </span>
+        )}
       </div>
       {errorMessage && <div className={"error"}>{errorMessage}</div>}
     </div>

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

@@ -1,30 +1,26 @@
 .profileImageContainer {
   display: flex;
-  flex-direction: column;
   align-items: center;
+  gap: 2rem;
 }
 
-.imageWrapper img.profileImage {
-  width: 150px;
-  height: 150px;
-  border-radius: 50%;
-  object-fit: cover;
-  display: block;
+.altTextWrapper {
+  font-size: 0.8rem;
+  text-align: center;
+  img {
+    border-radius: 0;
+  }
 }
 
-.altTextWrapper .altText {
-  width: 150px;
-  height: 150px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
+.profileImage {
+  width: 100px;
+  height: 100px;
   border-radius: 50%;
-  background-color: #f0f0f0;
-  color: #888;
+  object-fit: cover;
+  position: relative;
+  font-size: 0.8rem;
 }
 
-.uploadButton {
-  margin-top: 10px;
-  cursor: pointer;
+.fileInput {
+  display: none;
 }

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

@@ -42,7 +42,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,39 +57,31 @@ const AppUploadImage = ({
       const reader = new FileReader();
       reader.onloadend = () => {
         setImageUrl(reader.result as string);
-        onFileChange?.(file);
+        if (onFileChange) {
+          onFileChange(file);
+        }
       };
       reader.readAsDataURL(file);
-    } else {
-      setImageUrl("");
-      onFileChange?.(null);
+    } else if (onFileChange) {
+      onFileChange(null);
     }
   };
 
   return (
     <div className={`profileImageContainer ${className}`}>
-      <div className={imageUrl ? "imageWrapper" : "altTextWrapper"}>
-        {imageUrl ? (
-          <img className="profileImage" src={imageUrl} alt={altText} />
-        ) : (
-          <span className="altText">{altText}</span>
-        )}
+      <div className={imageUrl === "" ? "altTextWrapper" : ""}>
+        <img className={"profileImage"} src={imageUrl} alt={altText} />
       </div>
-      <button
-        className="uploadButton"
-        onClick={handleButtonClick}
-        aria-label={text}
-      >
+      <button className={"uploadButton"} onClick={handleButtonClick}>
         <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>
   );