react-frontend-common-components 0.0.76 → 0.0.79

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

@@ -1,90 +1,90 @@
-import React, { useState, useRef } from "react";
-import Icons from "../../themes/icons/icons";
-import "./app-upload-image.css";
-
-interface AppUploadImageProps {
-  className?: string;
-  uploadIcon?: React.ReactNode;
-  value?: string;
-  text?: string;
-  onFileChange?: (file: File | null) => void;
-  alertMessages?: {
-    invalidType?: string;
-    sizeExceed?: string;
-  };
-  acceptedFormats?: string[];
-  maxSizeMb?: number;
-  altText?: string;
-}
-
-const AppUploadImage = ({
-  className,
-  uploadIcon,
-  value = "",
-  text = "Upload Image",
-  onFileChange,
-  alertMessages = {
-    invalidType: "You can only upload JPG/PNG/SVG file!",
-    sizeExceed: "Image must be smaller than 2MB!",
-  },
-  acceptedFormats = ["image/jpeg", "image/png", "image/svg+xml"],
-  maxSizeMb = 2,
-  altText = "Profile Image",
-}: AppUploadImageProps) => {
-  const [imageUrl, setImageUrl] = useState<string>(value);
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  const handleButtonClick = () => {
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const isAcceptedFormat = acceptedFormats.includes(file.type);
-      const isLtMaxSize = file.size / 1024 / 1024 < maxSizeMb;
-
-      if (!isAcceptedFormat) {
-        alert(alertMessages.invalidType);
-        return;
-      }
-
-      if (!isLtMaxSize) {
-        alert(alertMessages.sizeExceed);
-        return;
-      }
-
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        setImageUrl(reader.result as string);
-        if (onFileChange) {
-          onFileChange(file);
-        }
-      };
-      reader.readAsDataURL(file);
-    } else if (onFileChange) {
-      onFileChange(null);
-    }
-  };
-
-  return (
-    <div className={`profileImageContainer ${className}`}>
-      <div className={imageUrl === "" ? "altTextWrapper" : ""}>
-        <img className={"profileImage"} src={imageUrl} alt={altText} />
-      </div>
-      <button className={"uploadButton"} onClick={handleButtonClick}>
-        <span>{uploadIcon || Icons.uploadIcon}</span>
-        {text}
-      </button>
-      <input
-        type="file"
-        accept={acceptedFormats.join(",")}
-        className={"fileInput"}
-        ref={fileInputRef}
-        onChange={handleFileChange}
-      />
-    </div>
-  );
-};
-
-export default AppUploadImage;
+import React, { useState, useRef } from "react";
+import Icons from "../../themes/icons/icons";
+import "./app-upload-image.css";
+
+interface AppUploadImageProps {
+  className?: string;
+  uploadIcon?: React.ReactNode;
+  value?: string;
+  text?: string;
+  onFileChange?: (file: File | null) => void;
+  alertMessages?: {
+    invalidType?: string;
+    sizeExceed?: string;
+  };
+  acceptedFormats?: string[];
+  maxSizeMb?: number;
+  altText?: string;
+}
+
+const AppUploadImage = ({
+  className,
+  uploadIcon,
+  value = "",
+  text = "Upload Image",
+  onFileChange,
+  alertMessages = {
+    invalidType: "You can only upload JPG/PNG/SVG file!",
+    sizeExceed: "Image must be smaller than 2MB!",
+  },
+  acceptedFormats = ["image/jpeg", "image/png", "image/svg+xml"],
+  maxSizeMb = 2,
+  altText = "Profile Image",
+}: AppUploadImageProps) => {
+  const [imageUrl, setImageUrl] = useState<string>(value);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleButtonClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const isAcceptedFormat = acceptedFormats.includes(file.type);
+      const isLtMaxSize = file.size / 1024 / 1024 < maxSizeMb;
+
+      if (!isAcceptedFormat) {
+        alert(alertMessages.invalidType);
+        return;
+      }
+
+      if (!isLtMaxSize) {
+        alert(alertMessages.sizeExceed);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImageUrl(reader.result as string);
+        if (onFileChange) {
+          onFileChange(file);
+        }
+      };
+      reader.readAsDataURL(file);
+    } else if (onFileChange) {
+      onFileChange(null);
+    }
+  };
+
+  return (
+    <div className={`profileImageContainer ${className}`}>
+      <div className={imageUrl === "" ? "altTextWrapper" : ""}>
+        <img className={"profileImage"} src={imageUrl} alt={altText} />
+      </div>
+      <button className={"uploadButton"} onClick={handleButtonClick}>
+        <span>{uploadIcon || Icons.uploadIcon}</span>
+        {text}
+      </button>
+      <input
+        type="file"
+        accept={acceptedFormats.join(",")}
+        className={"fileInput"}
+        ref={fileInputRef}
+        onChange={handleFileChange}
+      />
+    </div>
+  );
+};
+
+export default AppUploadImage;

package/src/components/over-view-card/over-view-card.css

@@ -1,15 +1,15 @@
-.overViewCard {
-  border-radius: 12px;
-  padding: 0.5rem 1rem;
-  background-color: #f9f9f9;
-  width: max-content;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-  .text {
-    font-size: 14px;
-    font-weight: 700;
-    line-height: normal;
-  }
-}
+.overViewCard {
+  border-radius: 12px;
+  padding: 0.5rem 1rem;
+  background-color: #f9f9f9;
+  width: max-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  .text {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: normal;
+  }
+}

package/src/components/over-view-card/over-view-card.tsx

@@ -1,26 +1,26 @@
-import React from "react";
-import { Typography } from "antd";
-import "./over-view-card.css";
-
-const { Text } = Typography;
-
-interface OverViewCardProps {
-  className?: string;
-  text?: string;
-  number?: number | string;
-}
-
-const OverViewCard = ({ className, text, number }: OverViewCardProps) => {
-  // Format the number with leading zeros (e.g., display 08)
-  const formattedNumber =
-    number !== undefined ? number.toString().padStart(2, "0") : "";
-
-  return (
-    <div className={`overViewCard ${className}`}>
-      <span className="text">{text}</span>
-      <span>{formattedNumber}</span>
-    </div>
-  );
-};
-
-export default OverViewCard;
+import React from "react";
+import { Typography } from "antd";
+import "./over-view-card.css";
+
+const { Text } = Typography;
+
+interface OverViewCardProps {
+  className?: string;
+  text?: string;
+  number?: number | string;
+}
+
+const OverViewCard = ({ className, text, number }: OverViewCardProps) => {
+  // Format the number with leading zeros (e.g., display 08)
+  const formattedNumber =
+    number !== undefined ? number.toString().padStart(2, "0") : "";
+
+  return (
+    <div className={`overViewCard ${className}`}>
+      <span className="text">{text}</span>
+      <span>{formattedNumber}</span>
+    </div>
+  );
+};
+
+export default OverViewCard;

package/src/index.ts

@@ -1,38 +1,38 @@
-export { default as AppInput } from "./components/app-input/app-input";
-export { default as AppButton } from "./components/app-button/app-button";
-export { default as AppSidebar } from "./components/app-sidebar/app-sidebar";
-export { default as AppTextarea } from "./components/app-textarea/app-textarea";
-export { default as AppTab } from "./components/app-tab/app-tab";
-export { default as AppBackArrow } from "./components/app-back-arrow/app-back-arrow";
-export { default as AppBadge } from "./components/app-badge/app-badge";
-export { default as OverViewCard } from "./components/over-view-card/over-view-card";
-export { default as AppChart } from "./components/app-chart/app-chart";
-export { default as AppImageBox } from "./components/app-image-box/app-image-box";
-export { default as AppAvatar } from "./components/app-avatar/app-avatar";
-export { default as AppCheckboxText } from "./components/app-checkbox-text/app-checkbox-text";
-export { default as AppCollapse } from "./components/app-collapse/app-collapse";
-export { default as AppCustomLoader } from "./components/app-custom-loader/app-custom-loader";
-export { default as AppLocationMap } from "./components/app-location-map/app-location-map";
-export { default as AppModal } from "./components/app-modal/app-modal";
-export { default as AppOtpField } from "./components/app-otp-field/app-otp-field";
-export { default as AppPagination } from "./components/app-pagination/app-pagination";
-export { default as AppPasswordInput } from "./components/app-password-input/app-password-input";
-export { default as AppTitle } from "./components/app-title/app-title";
-export { default as AppToggleButton } from "./components/app-toggle-button/app-toggle-button";
-export { default as AppUploadImage } from "./components/app-upload-image/app-upload-image";
-export { default as AppRadioGroup } from "./components/app-radio-group/app-radio-group";
-export { default as AppSelect } from "./components/app-select/app-select";
-export { default as AppSelectAdd } from "./components/app-select-add/app-select-add";
-export { default as AppTag } from "./components/app-tag/app-tag";
-export { default as AppList } from "./components/app-list/app-list";
-export { default as AppLoader } from "./components/app-loader/app-loader";
-export { default as AppDivider } from "./components/app-divider/app-divider";
-export { default as AppLabel } from "./components/app-label/app-label";
-export { default as AppBreadcrumb } from "./components/app-bread-crumb/app-bread-crumb";
-export { default as AppCard } from "./components/app-card/app-card";
-export { default as AppCarousel } from "./components/app-carousel/app-carousel";
-export { default as AppTable } from "./components/app-table/app-table";
-export { default as AppProgress } from "./components/app-progress/app-progress";
-export { default as AppPopover } from "./components/app-popover/app-popover";
-export { default as AppFloatButton } from "./components/app-float-button/app-float-button";
-export { default as AppPhoneInput } from "./components/app-phone-input/app-phone-input";
+export { default as AppInput } from "./components/app-input/app-input";
+export { default as AppButton } from "./components/app-button/app-button";
+export { default as AppSidebar } from "./components/app-sidebar/app-sidebar";
+export { default as AppTextarea } from "./components/app-textarea/app-textarea";
+export { default as AppTab } from "./components/app-tab/app-tab";
+export { default as AppBackArrow } from "./components/app-back-arrow/app-back-arrow";
+export { default as AppBadge } from "./components/app-badge/app-badge";
+export { default as OverViewCard } from "./components/over-view-card/over-view-card";
+export { default as AppChart } from "./components/app-chart/app-chart";
+export { default as AppImageBox } from "./components/app-image-box/app-image-box";
+export { default as AppAvatar } from "./components/app-avatar/app-avatar";
+export { default as AppCheckboxText } from "./components/app-checkbox-text/app-checkbox-text";
+export { default as AppCollapse } from "./components/app-collapse/app-collapse";
+export { default as AppCustomLoader } from "./components/app-custom-loader/app-custom-loader";
+export { default as AppLocationMap } from "./components/app-location-map/app-location-map";
+export { default as AppModal } from "./components/app-modal/app-modal";
+export { default as AppOtpField } from "./components/app-otp-field/app-otp-field";
+export { default as AppPagination } from "./components/app-pagination/app-pagination";
+export { default as AppPasswordInput } from "./components/app-password-input/app-password-input";
+export { default as AppTitle } from "./components/app-title/app-title";
+export { default as AppToggleButton } from "./components/app-toggle-button/app-toggle-button";
+export { default as AppUploadImage } from "./components/app-upload-image/app-upload-image";
+export { default as AppRadioGroup } from "./components/app-radio-group/app-radio-group";
+export { default as AppSelect } from "./components/app-select/app-select";
+export { default as AppSelectAdd } from "./components/app-select-add/app-select-add";
+export { default as AppTag } from "./components/app-tag/app-tag";
+export { default as AppList } from "./components/app-list/app-list";
+export { default as AppLoader } from "./components/app-loader/app-loader";
+export { default as AppDivider } from "./components/app-divider/app-divider";
+export { default as AppLabel } from "./components/app-label/app-label";
+export { default as AppBreadcrumb } from "./components/app-bread-crumb/app-bread-crumb";
+export { default as AppCard } from "./components/app-card/app-card";
+export { default as AppCarousel } from "./components/app-carousel/app-carousel";
+export { default as AppTable } from "./components/app-table/app-table";
+export { default as AppProgress } from "./components/app-progress/app-progress";
+export { default as AppPopover } from "./components/app-popover/app-popover";
+export { default as AppFloatButton } from "./components/app-float-button/app-float-button";
+export { default as AppPhoneInput } from "./components/app-phone-input/app-phone-input";