@ews-admin/global-design-system 1.1.20 → 1.1.22

package/dist/utils/index.d.ts

@@ -49,4 +49,23 @@ export declare const formatNumeric: (value: string) => string;
  * @returns Boolean indicating if the phone number is valid
  */
 export declare function isValidPhoneNumber(value: string): boolean;
+/**
+ * Blood type enum matching backend BloodTypeEnum values
+ */
+export declare enum BloodType {
+    A_POSITIVE = "A+",
+    A_NEGATIVE = "A-",
+    B_POSITIVE = "B+",
+    B_NEGATIVE = "B-",
+    AB_POSITIVE = "AB+",
+    AB_NEGATIVE = "AB-",
+    O_POSITIVE = "O+",
+    O_NEGATIVE = "O-",
+    UNKNOWN = "UNKNOWN"
+}
+/**
+ * Ordered list of all blood type values.
+ * Use this to build select/dropdown options.
+ */
+export declare const BLOOD_TYPES: BloodType[];
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,QAAQ,QAAQ,CAAC;AAE9B;;;;GAIG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,SAAW,GAAG,MAAM,CAK1E;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,EAC5B,OAAO,CAAC,EAAE,IAAI,CAAC,qBAAqB,GACnC,MAAM,CAQR;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,EAChE,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,MAAM,GACX,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAMlC;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,MAAM,SAAQ,GAAG,MAAM,CAEjD;AAED;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAMzD;AAED;;GAEG;AACH,oBAAY,SAAS;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,WAAW,QAAQ;IACnB,WAAW,QAAQ;IACnB,UAAU,OAAO;IACjB,UAAU,OAAO;IACjB,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,SAAS,EAUlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/Input/Input.tsx

@@ -53,6 +53,14 @@ export interface InputProps
    * Icon to display after the input
    */
   rightIcon?: React.ReactNode;
+  /**
+   * Text or node to display as a left addon (e.g., currency "FCFA")
+   */
+  leftAddon?: React.ReactNode;
+  /**
+   * Text or node to display as a right addon inside the input (e.g., currency "FCFA")
+   */
+  rightAddon?: React.ReactNode;
   /**
    * Whether the input should take full width
    */
@@ -86,6 +94,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       showPasswordToggle = false,
       required = false,
       countryCodeSelect,
+      leftAddon,
+      rightAddon,
       id,
       type = "text",
       ...props
@@ -274,13 +284,20 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               </div>
             </div>
           )}
-          {leftIcon && !countryCodeSelect && (
+          {leftIcon && !countryCodeSelect && !leftAddon && (
             <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
               <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {leftIcon}
               </span>
             </div>
           )}
+          {leftAddon && !countryCodeSelect && !leftIcon && (
+            <div className="flex absolute inset-y-0 left-0 items-center pointer-events-none overflow-hidden rounded-l-md">
+              <span className="flex items-center h-full px-3 text-sm font-medium whitespace-nowrap bg-ews-gray-50 border-r border-ews-gray-300 text-ews-gray-600">
+                {leftAddon}
+              </span>
+            </div>
+          )}
           <input
             id={inputId}
             type={actualType}
@@ -289,13 +306,22 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               variants[actualVariant],
               sizes[size],
               countryCodeSelect && "pl-24",
-              leftIcon && !countryCodeSelect && "pl-10",
+              leftIcon && !countryCodeSelect && !leftAddon && "pl-10",
+              leftAddon && !countryCodeSelect && !leftIcon && "pl-16",
               (rightIcon || shouldShowPasswordToggle) && "pr-10",
+              rightAddon && !rightIcon && !shouldShowPasswordToggle && "pr-16",
               className
             )}
             ref={ref}
             {...props}
           />
+          {rightAddon && !rightIcon && !shouldShowPasswordToggle && (
+            <div className="flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none">
+              <span className="text-sm font-medium text-ews-gray-500">
+                {rightAddon}
+              </span>
+            </div>
+          )}
           {rightIcon && !shouldShowPasswordToggle && (
             <div className="flex absolute inset-y-0 right-0 items-center pr-3 pointer-events-none">
               <span className={cn("text-ews-gray-400", iconSizes[size])}>

package/src/components/Modal/Modal.tsx

@@ -36,6 +36,10 @@ export interface ModalProps {
    * Modal variant
    */
   variant?: "error" | "warning" | "confirmation" | "info";
+  /**
+   * Modal size/width
+   */
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
   /**
    * Primary action button text
    */
@@ -80,6 +84,7 @@ const Modal = ({
   title,
   children,
   variant = "info",
+  size = "md",
   primaryAction,
   secondaryAction,
   onPrimaryAction,
@@ -147,6 +152,18 @@ const Modal = ({
 
   const variantStyles = getVariantStyles();
 
+  const getSizeClasses = () => {
+    const sizeMap = {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    };
+    return sizeMap[size] || sizeMap.md;
+  };
+
   const handleOverlayClick = (e: React.MouseEvent) => {
     if (e.target === e.currentTarget && closeOnOverlayClick) {
       onClose();
@@ -164,8 +181,10 @@ const Modal = ({
       {/* Modal */}
       <div
         className={cn(
-          "relative mx-4 w-full max-w-md bg-white rounded-lg shadow-xl transition-all transform",
+          "relative w-full bg-white rounded-lg shadow-xl transition-all transform",
           "duration-200 animate-in fade-in-0 zoom-in-95",
+          getSizeClasses(),
+          "mx-4",
           className
         )}
         role="dialog"

package/src/components/ProfileImageUpload/ProfileImageUpload.tsx

@@ -0,0 +1,231 @@
+import { Pencil, Trash } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+
+import { cn } from "../../utils";
+import { Modal } from "../Modal/Modal";
+
+export interface ProfileImageUploadProps {
+  /** Current image URL */
+  imageUrl: string;
+  /** Alt text for accessibility */
+  altText: string;
+  /** Disable editing */
+  readOnly?: boolean;
+  /** Avatar diameter */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Upload progress 0–100.
+   * Progress bar is hidden when 0; auto-hides 1 s after reaching 100.
+   */
+  uploadProgress?: number;
+  /**
+   * When true the progress bar stays visible in an indeterminate (pulsing)
+   * state for phases with no measurable progress (pre-upload / post-upload).
+   * The bar auto-hides 1 s after both `isLoading` is false and progress reached 100.
+   */
+  isLoading?: boolean;
+  /**
+   * Whether to show the delete button.
+   * Pass `false` when `imageUrl` is a default/fallback image.
+   */
+  showDeleteButton?: boolean;
+  /** File input accept attribute (default: "image/*") */
+  accept?: string;
+  /** Max allowed file size in MB (default: 3) */
+  maxFileSizeMB?: number;
+  /** Called when a valid file is selected */
+  onFileSelect: (file: File) => void;
+  /** Called when the selected file exceeds `maxFileSizeMB` */
+  onFileSizeExceeded?: () => void;
+  /** Called when the user confirms deletion in the modal */
+  onDeleteConfirm: () => void;
+  /** Deletion confirmation modal — title text */
+  deleteConfirmTitle: string;
+  /** Deletion confirmation modal — body text */
+  deleteConfirmMessage: string;
+  /** Deletion confirmation modal — primary button label */
+  deleteConfirmLabel: string;
+  /** Deletion confirmation modal — secondary / cancel label */
+  cancelLabel: string;
+}
+
+const SIZE_CLASSES: Record<"sm" | "md" | "lg", string> = {
+  sm: "h-10 w-10",
+  md: "h-16 w-16",
+  lg: "h-32 w-32",
+};
+
+const INDICATOR_CLASSES: Record<"sm" | "md" | "lg", string> = {
+  sm: "h-2 w-2",
+  md: "h-4 w-4",
+  lg: "h-8 w-8",
+};
+
+function UploadProgressBar({
+  progress,
+  isLoading,
+}: {
+  progress: number;
+  isLoading?: boolean;
+}) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (isLoading) {
+      setVisible(true);
+      return;
+    }
+    // isLoading just turned false
+    if (progress >= 100) {
+      setVisible(true);
+      const t = setTimeout(() => setVisible(false), 1000);
+      return () => clearTimeout(t);
+    }
+    // Legacy path (no isLoading prop): driven purely by progress
+    if (progress > 0 && progress < 100) {
+      setVisible(true);
+      return;
+    }
+    setVisible(false);
+  }, [progress, isLoading]);
+
+  if (!visible) return null;
+
+  const indeterminate = isLoading && progress === 0;
+
+  return (
+    <div className="mt-2 h-1.5 w-32 rounded-full bg-gray-200">
+      <div
+        className={cn(
+          "h-full rounded-full bg-ews-primary transition-all duration-300",
+          indeterminate && "animate-pulse"
+        )}
+        style={{ width: indeterminate ? "35%" : `${progress}%` }}
+      />
+    </div>
+  );
+}
+
+export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
+  imageUrl,
+  altText,
+  readOnly = false,
+  size = "lg",
+  uploadProgress = 0,
+  isLoading = false,
+  showDeleteButton = true,
+  accept = "image/*",
+  maxFileSizeMB = 3,
+  onFileSelect,
+  onFileSizeExceeded,
+  onDeleteConfirm,
+  deleteConfirmTitle,
+  deleteConfirmMessage,
+  deleteConfirmLabel,
+  cancelLabel,
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isHovered, setIsHovered] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  const handleEditClick = () => fileInputRef.current?.click();
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (file.size > maxFileSizeMB * 1024 * 1024) {
+      onFileSizeExceeded?.();
+      e.target.value = "";
+      return;
+    }
+
+    onFileSelect(file);
+    e.target.value = ""; // allow re-selecting the same file
+  };
+
+  const handleConfirmDelete = () => {
+    setShowConfirm(false);
+    onDeleteConfirm();
+  };
+
+  return (
+    <>
+      <div className="inline-flex flex-col items-center">
+        <div
+          className="relative"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          <img
+            src={imageUrl}
+            alt={altText}
+            className={cn(
+              "rounded-full border-4 border-white object-cover",
+              SIZE_CLASSES[size]
+            )}
+          />
+
+          {/* Online status dot */}
+          <div
+            className={cn(
+              "absolute bottom-0 right-0 rounded-full border-4 border-white bg-green-400",
+              INDICATOR_CLASSES[size]
+            )}
+          />
+
+          <input
+            type="file"
+            ref={fileInputRef}
+            accept={accept}
+            className="hidden"
+            onChange={handleFileChange}
+          />
+
+          {isHovered && !readOnly && !isLoading && (
+            <>
+              {/* Edit / upload button */}
+              <button
+                type="button"
+                onClick={handleEditClick}
+                className="absolute left-0 top-0 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-ews-primary transition-colors hover:bg-ews-secondary"
+                aria-label="Edit profile image"
+              >
+                <Pencil className="h-4 w-4 text-white" />
+              </button>
+
+              {/* Delete button — only when not a fallback/default image */}
+              {showDeleteButton && (
+                <button
+                  type="button"
+                  onClick={() => setShowConfirm(true)}
+                  className="absolute left-0 top-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-red-600 transition-colors hover:bg-red-700"
+                  aria-label="Delete profile image"
+                >
+                  <Trash className="h-4 w-4 text-white" />
+                </button>
+              )}
+            </>
+          )}
+        </div>
+
+        <UploadProgressBar progress={uploadProgress} isLoading={isLoading} />
+      </div>
+
+      {/* Delete confirmation */}
+      <Modal
+        isOpen={showConfirm}
+        onClose={() => setShowConfirm(false)}
+        title={deleteConfirmTitle}
+        variant="error"
+        size="sm"
+        primaryAction={deleteConfirmLabel}
+        secondaryAction={cancelLabel}
+        onPrimaryAction={handleConfirmDelete}
+        onSecondaryAction={() => setShowConfirm(false)}
+      >
+        <p>{deleteConfirmMessage}</p>
+      </Modal>
+    </>
+  );
+};

package/src/components/ProfileImageUpload/index.ts

@@ -0,0 +1,2 @@
+export { ProfileImageUpload } from "./ProfileImageUpload";
+export type { ProfileImageUploadProps } from "./ProfileImageUpload";

package/src/index.ts

@@ -16,6 +16,9 @@ export { MultiSearchAutocomplete } from "./components/MultiSearchAutocomplete";
 export { Modal } from "./components/Modal";
 export type { ErrorField, ErrorObject, ModalProps } from "./components/Modal";
 
+export { ProfileImageUpload } from "./components/ProfileImageUpload";
+export type { ProfileImageUploadProps } from "./components/ProfileImageUpload";
+
 export { DropdownMultiSelect } from "./components/DropdownMultiSelect";
 export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";
 
@@ -46,6 +49,8 @@ export type { IconProps, SimpleIconProps } from "./icons";
 
 // Utils
 export {
+  BLOOD_TYPES,
+  BloodType,
   cn,
   debounce,
   formatCurrency,

package/src/utils/index.ts

@@ -94,3 +94,34 @@ export function isValidPhoneNumber(value: string): boolean {
   const phoneRegex = /^(\+\d{1,17}|\d{1,17})$/;
   return phoneRegex.test(trimmedValue);
 }
+
+/**
+ * Blood type enum matching backend BloodTypeEnum values
+ */
+export enum BloodType {
+  A_POSITIVE = "A+",
+  A_NEGATIVE = "A-",
+  B_POSITIVE = "B+",
+  B_NEGATIVE = "B-",
+  AB_POSITIVE = "AB+",
+  AB_NEGATIVE = "AB-",
+  O_POSITIVE = "O+",
+  O_NEGATIVE = "O-",
+  UNKNOWN = "UNKNOWN",
+}
+
+/**
+ * Ordered list of all blood type values.
+ * Use this to build select/dropdown options.
+ */
+export const BLOOD_TYPES: BloodType[] = [
+  BloodType.A_POSITIVE,
+  BloodType.A_NEGATIVE,
+  BloodType.B_POSITIVE,
+  BloodType.B_NEGATIVE,
+  BloodType.AB_POSITIVE,
+  BloodType.AB_NEGATIVE,
+  BloodType.O_POSITIVE,
+  BloodType.O_NEGATIVE,
+  BloodType.UNKNOWN,
+];