@ews-admin/global-design-system 1.14.0 → 1.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ews-admin/global-design-system",
-  "version": "1.14.0",
+  "version": "1.18.0",
   "description": "EWS Global Design System - Reusable components for EWS applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -62,7 +62,8 @@
   },
   "dependencies": {
     "clsx": "^2.0.0",
-    "lucide-react": "^0.544.0"
+    "lucide-react": "^0.544.0",
+    "react-easy-crop": "^6.0.2"
   },
   "scripts": {
     "build": "rollup -c",

package/src/components/ImageCropModal/ImageCropModal.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback, useState } from "react";
+// react-easy-crop's .d.ts uses `export type *` which Node moduleResolution
+// can't resolve as a value. Cast to any here — we own all props passed below.
+import EasyCrop from "react-easy-crop";
+import type { Area, Point } from "react-easy-crop";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Cropper = EasyCrop as unknown as React.ComponentType<any>;
+
+import { Modal } from "../Modal/Modal";
+import { getCroppedFile } from "./cropImage";
+
+export interface ImageCropModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Object URL of the image to crop (created with URL.createObjectURL) */
+  imageSrc: string;
+  /** Original file name — used to derive the extension of the cropped file */
+  originalFileName: string;
+  /**
+   * Locked aspect ratio for the crop area.
+   * Pass 1 for 1:1 (profile photos), 3 for 3:1 (banners), 4/3, etc.
+   * Defaults to 1 (square).
+   */
+  aspectRatio?: number;
+  /** Called when the user cancels or closes the modal */
+  onClose: () => void;
+  /**
+   * Called with the cropped File after the user confirms.
+   * The File is a JPEG produced from the selected crop region.
+   */
+  onCropComplete: (croppedFile: File) => void;
+  // ── Label props (pass translated strings from the consuming app) ──
+  title?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  zoomLabel?: string;
+}
+
+export const ImageCropModal: React.FC<ImageCropModalProps> = ({
+  isOpen,
+  imageSrc,
+  originalFileName,
+  aspectRatio = 1,
+  onClose,
+  onCropComplete,
+  title = "Crop image",
+  confirmLabel = "Crop & Upload",
+  cancelLabel = "Cancel",
+  zoomLabel = "Zoom",
+}) => {
+  const [crop, setCrop] = useState<Point>({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
+  const [isCropping, setIsCropping] = useState(false);
+
+  const handleCropComplete = useCallback((_: Area, pixels: Area) => {
+    setCroppedAreaPixels(pixels);
+  }, []);
+
+  const handleConfirm = async () => {
+    if (!croppedAreaPixels) return;
+    setIsCropping(true);
+    try {
+      const file = await getCroppedFile(imageSrc, croppedAreaPixels, originalFileName);
+      onCropComplete(file);
+    } finally {
+      setIsCropping(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      size="lg"
+      primaryAction={confirmLabel}
+      secondaryAction={cancelLabel}
+      onPrimaryAction={handleConfirm}
+      onSecondaryAction={onClose}
+      isLoading={isCropping}
+      closeOnOverlayClick={false}
+    >
+      <div className="relative h-80 w-full bg-gray-900">
+        <Cropper
+          image={imageSrc}
+          crop={crop}
+          zoom={zoom}
+          aspect={aspectRatio}
+          onCropChange={setCrop}
+          onZoomChange={setZoom}
+          onCropComplete={handleCropComplete}
+        />
+      </div>
+      <div className="mt-4 px-1">
+        <label className="mb-1 block text-sm text-gray-500">{zoomLabel}</label>
+        <input
+          type="range"
+          min={1}
+          max={3}
+          step={0.05}
+          value={zoom}
+          onChange={(e) => setZoom(Number(e.target.value))}
+          className="w-full accent-ews-primary"
+        />
+      </div>
+    </Modal>
+  );
+};

package/src/components/ImageCropModal/cropImage.ts

@@ -0,0 +1,48 @@
+import type { Area } from "react-easy-crop";
+
+export async function getCroppedFile(
+  imageSrc: string,
+  pixelCrop: Area,
+  originalFileName: string,
+): Promise<File> {
+  const image = await loadImage(imageSrc);
+  const canvas = document.createElement("canvas");
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Could not get 2d canvas context");
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height,
+  );
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error("canvas.toBlob produced no output"));
+        return;
+      }
+      const ext =
+        originalFileName.substring(originalFileName.lastIndexOf(".")) || ".jpg";
+      resolve(new File([blob], `cropped${ext}`, { type: "image/jpeg" }));
+    }, "image/jpeg");
+  });
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.addEventListener("load", () => resolve(img));
+    img.addEventListener("error", reject);
+    img.src = src;
+  });
+}

package/src/components/ImageCropModal/index.ts

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

package/src/components/ProfileImageUpload/ProfileImageUpload.tsx

@@ -4,8 +4,11 @@ import React, { useEffect, useRef, useState } from "react";
 import { cn } from "../../utils";
 import { Modal } from "../Modal/Modal";
 
+const ACCEPTED_MIME_TYPES = ["image/jpeg", "image/png", "image/webp"] as const;
+export type AcceptedImageMimeType = (typeof ACCEPTED_MIME_TYPES)[number];
+
 export interface ProfileImageUploadProps {
-  /** Current image URL */
+  /** Current image URL — pass your default placeholder URL when no custom image is set */
   imageUrl: string;
   /** Alt text for accessibility */
   altText: string;
@@ -29,14 +32,24 @@ export interface ProfileImageUploadProps {
    * 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) */
+  /**
+   * Accepted MIME types (default: JPEG, PNG, WEBP).
+   * Used for both the file-input `accept` attribute and client-side validation.
+   */
+  acceptedFormats?: AcceptedImageMimeType[];
+  /** Max allowed file size in MB (default: 5) */
   maxFileSizeMB?: number;
-  /** Called when a valid file is selected */
+  /**
+   * Optional aspect-ratio hint shown below the avatar (e.g. "1:1", "4:3").
+   * Pure informational — no cropping is enforced client-side.
+   */
+  aspectRatioHint?: string;
+  /** Called with the validated File once the user picks an acceptable file */
   onFileSelect: (file: File) => void;
   /** Called when the selected file exceeds `maxFileSizeMB` */
   onFileSizeExceeded?: () => void;
+  /** Called when the selected file's MIME type is not in `acceptedFormats` */
+  onInvalidFormat?: () => void;
   /** Called when the user confirms deletion in the modal */
   onDeleteConfirm: () => void;
   /** Deletion confirmation modal — title text */
@@ -114,10 +127,12 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
   uploadProgress = 0,
   isLoading = false,
   showDeleteButton = true,
-  accept = "image/*",
-  maxFileSizeMB = 3,
+  acceptedFormats = [...ACCEPTED_MIME_TYPES],
+  maxFileSizeMB = 5,
+  aspectRatioHint,
   onFileSelect,
   onFileSizeExceeded,
+  onInvalidFormat,
   onDeleteConfirm,
   deleteConfirmTitle,
   deleteConfirmMessage,
@@ -128,12 +143,20 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
   const [isHovered, setIsHovered] = useState(false);
   const [showConfirm, setShowConfirm] = useState(false);
 
+  const acceptAttr = acceptedFormats.join(",");
+
   const handleEditClick = () => fileInputRef.current?.click();
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
+    if (acceptedFormats.indexOf(file.type as AcceptedImageMimeType) === -1) {
+      onInvalidFormat?.();
+      e.target.value = "";
+      return;
+    }
+
     if (file.size > maxFileSizeMB * 1024 * 1024) {
       onFileSizeExceeded?.();
       e.target.value = "";
@@ -141,7 +164,7 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
     }
 
     onFileSelect(file);
-    e.target.value = ""; // allow re-selecting the same file
+    e.target.value = "";
   };
 
   const handleConfirmDelete = () => {
@@ -177,7 +200,7 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
           <input
             type="file"
             ref={fileInputRef}
-            accept={accept}
+            accept={acceptAttr}
             className="hidden"
             onChange={handleFileChange}
           />
@@ -210,6 +233,10 @@ export const ProfileImageUpload: React.FC<ProfileImageUploadProps> = ({
         </div>
 
         <UploadProgressBar progress={uploadProgress} isLoading={isLoading} />
+
+        {aspectRatioHint && (
+          <p className="mt-1 text-xs text-gray-400">Ratio: {aspectRatioHint}</p>
+        )}
       </div>
 
       {/* Delete confirmation */}

package/src/components/ProfileImageUpload/index.ts

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

package/src/components/Select/Select.tsx

@@ -100,6 +100,13 @@ export interface SelectProps<T = unknown> {
    * Custom render function for selected value
    */
   renderValue?: (option: SelectOption<T> | null) => React.ReactNode;
+  /**
+   * Custom render function for the trigger button content.
+   * When provided, replaces the selected-value/placeholder area and hides
+   * the built-in chevron so the trigger can render its own UI (e.g. a user
+   * avatar menu).
+   */
+  renderTrigger?: () => React.ReactNode;
 }
 
 const Select = forwardRef<HTMLDivElement, SelectProps>(
@@ -125,6 +132,7 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       clearable = false,
       renderOption,
       renderValue,
+      renderTrigger,
       ...props
     },
     ref
@@ -177,17 +185,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       // Add some buffer (20px) to prevent edge cases
       const buffer = 20;
 
-      console.log("Position calculation:", {
-        spaceBelow,
-        spaceAbove,
-        dropdownHeight,
-        viewportHeight,
-        containerBottom: containerRect.bottom,
-        shouldOpenTop:
-          spaceBelow < dropdownHeight + buffer &&
-          spaceAbove > dropdownHeight + buffer,
-      });
-
       // If there's not enough space below but enough space above, position on top
       if (
         spaceBelow < dropdownHeight + buffer &&
@@ -211,14 +208,6 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
       const spaceAbove = containerRect.top;
       const actualDropdownHeight = dropdownRect.height;
 
-      console.log("Position calculation with element:", {
-        spaceBelow,
-        spaceAbove,
-        actualDropdownHeight,
-        viewportHeight,
-        containerBottom: containerRect.bottom,
-      });
-
       // If there's not enough space below but enough space above, position on top
       if (
         spaceBelow < actualDropdownHeight &&
@@ -436,39 +425,48 @@ const Select = forwardRef<HTMLDivElement, SelectProps>(
             {...props}
           >
             <div className="flex justify-between items-center">
-              <div className="flex-1 min-w-0">
-                {selectedOption ? (
-                  renderValue ? (
-                    renderValue(selectedOption)
-                  ) : (
-                    <span className="truncate">{selectedOption.label}</span>
-                  )
-                ) : (
-                  <span className="text-ews-gray-500">{placeholder}</span>
-                )}
-              </div>
+              {renderTrigger ? (
+                renderTrigger()
+              ) : (
+                <>
+                  <div className="flex-1 min-w-0">
+                    {selectedOption ? (
+                      renderValue ? (
+                        renderValue(selectedOption)
+                      ) : (
+                        <span className="truncate">{selectedOption.label}</span>
+                      )
+                    ) : (
+                      <span className="text-ews-gray-500">{placeholder}</span>
+                    )}
+                  </div>
 
-              <div className="flex items-center ml-2 space-x-1">
-                {clearable && selectedOption && !disabled && (
-                  <button
-                    type="button"
-                    onClick={handleClear}
-                    className="p-1 rounded hover:bg-ews-gray-100"
-                  >
-                    <X
-                      className={cn(iconSizeClasses[size], "text-ews-gray-400")}
+                  <div className="flex items-center ml-2 space-x-1">
+                    {clearable && selectedOption && !disabled && (
+                      <button
+                        type="button"
+                        onClick={handleClear}
+                        className="p-1 rounded hover:bg-ews-gray-100"
+                      >
+                        <X
+                          className={cn(
+                            iconSizeClasses[size],
+                            "text-ews-gray-400"
+                          )}
+                        />
+                      </button>
+                    )}
+                    <ChevronDown
+                      className={cn(
+                        iconSizeClasses[size],
+                        hasError ? "text-ews-error" : "text-ews-gray-400",
+                        disabled && "text-ews-gray-300",
+                        isOpen && "rotate-180 transition-transform"
+                      )}
                     />
-                  </button>
-                )}
-                <ChevronDown
-                  className={cn(
-                    iconSizeClasses[size],
-                    hasError ? "text-ews-error" : "text-ews-gray-400",
-                    disabled && "text-ews-gray-300",
-                    isOpen && "rotate-180 transition-transform"
-                  )}
-                />
-              </div>
+                  </div>
+                </>
+              )}
             </div>
           </div>
 

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { cn } from "../../utils";
+
+export interface TagProps {
+  label: string;
+  variant?: "primary" | "secondary" | "plain";
+  className?: string;
+}
+
+export const Tag: React.FC<TagProps> = ({
+  label,
+  variant = "plain",
+  className,
+}) => {
+  const variantClass =
+    variant === "primary"
+      ? "bg-ews-primary text-white"
+      : variant === "secondary"
+        ? "bg-ews-secondary text-white"
+        : "bg-gray-200 text-gray-800";
+
+  return (
+    <span
+      className={cn(
+        "inline-block rounded-md px-2.5 py-1 text-sm font-medium",
+        variantClass,
+        className
+      )}
+    >
+      {label}
+    </span>
+  );
+};

package/src/components/Tag/index.ts

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

package/src/components/TagList/TagList.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { cn } from "../../utils";
+import { Tag, TagProps } from "../Tag/Tag";
+
+export interface TagListProps {
+  items: string[];
+  maxVisible?: number;
+  showMoreLabel: string;
+  showLessLabel: string;
+  variant?: TagProps["variant"];
+  className?: string;
+  /** Custom renderer for each tag. Overrides the default Tag component. */
+  renderTag?: (label: string, index: number) => React.ReactNode;
+}
+
+const DEFAULT_MAX = 3;
+
+export const TagList: React.FC<TagListProps> = ({
+  items,
+  maxVisible = DEFAULT_MAX,
+  showMoreLabel,
+  showLessLabel,
+  variant = "secondary",
+  className,
+  renderTag,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+
+  const hasMore = items.length > maxVisible;
+  const visible = expanded ? items : items.slice(0, maxVisible);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setExpanded(prev => !prev);
+  };
+
+  return (
+    <div className={cn("flex flex-wrap items-center gap-2", className)}>
+      {visible.map((label, i) =>
+        renderTag ? (
+          renderTag(label, i)
+        ) : (
+          <Tag key={i} label={label} variant={variant} />
+        )
+      )}
+      {hasMore && !expanded && (
+        <span className="text-sm text-gray-400">...</span>
+      )}
+      {hasMore && (
+        <button
+          onClick={handleToggle}
+          className="text-xs text-ews-primary hover:underline"
+        >
+          {expanded ? showLessLabel : showMoreLabel}
+        </button>
+      )}
+    </div>
+  );
+};

package/src/components/TagList/index.ts

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

package/src/index.ts

@@ -17,7 +17,13 @@ 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 type {
+  AcceptedImageMimeType,
+  ProfileImageUploadProps,
+} from "./components/ProfileImageUpload";
+
+export { ImageCropModal } from "./components/ImageCropModal";
+export type { ImageCropModalProps } from "./components/ImageCropModal";
 
 export { DropdownMultiSelect } from "./components/DropdownMultiSelect";
 export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";
@@ -37,6 +43,12 @@ export type { ThemeDebuggerProps } from "./components/ThemeDebugger";
 export { RegionSelect } from "./components/RegionSelect";
 export type { RegionSelectProps } from "./components/RegionSelect";
 
+export { Tag } from "./components/Tag";
+export type { TagProps } from "./components/Tag";
+
+export { TagList } from "./components/TagList";
+export type { TagListProps } from "./components/TagList";
+
 // Molecules
 export { SpecialtySearchAutocomplete } from "./molecules";
 export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";