@ews-admin/global-design-system 1.1.12 → 1.1.14

package/package.json

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

package/src/components/Button/Button.tsx

@@ -6,7 +6,14 @@ export interface ButtonProps
   /**
    * Button variant
    */
-  variant?: "primary" | "secondary" | "success" | "warning" | "error" | "ghost";
+  variant?:
+    | "ews-primary"
+    | "ews-secondary"
+    | "success"
+    | "warning"
+    | "error"
+    | "outline"
+    | "ghost";
   /**
    * Button size
    */
@@ -33,7 +40,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
       className,
-      variant = "primary",
+      variant = "ews-primary",
       size = "md",
       loading = false,
       fullWidth = false,
@@ -46,21 +53,19 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const baseStyles =
-      "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none";
+      "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none";
 
     const variants = {
-      primary:
-        "bg-ews-primary text-white hover:bg-ews-primary-hover focus:ring-ews-primary",
-      secondary:
-        "bg-ews-secondary text-white hover:bg-ews-secondary-hover focus:ring-ews-secondary",
-      success:
-        "bg-ews-success text-white hover:bg-ews-success-hover focus:ring-ews-success",
-      warning:
-        "bg-ews-warning text-white hover:bg-ews-warning-hover focus:ring-ews-warning",
-      error:
-        "bg-ews-error text-white hover:bg-ews-error-hover focus:ring-ews-error",
+      "ews-primary": "bg-ews-primary text-white hover:bg-ews-primary-hover",
+      "ews-secondary":
+        "bg-ews-secondary text-white hover:bg-ews-secondary-hover",
+      success: "bg-ews-success text-white hover:bg-ews-success-hover",
+      warning: "bg-ews-warning text-white hover:bg-ews-warning-hover",
+      error: "bg-ews-error text-white hover:bg-ews-error-hover",
+      outline:
+        "bg-transparent text-sm font-medium text-ews-primary hover:text-ews-primary/80",
       ghost:
-        "bg-transparent text-ews-gray-700 hover:bg-ews-gray-100 focus:ring-ews-gray-500",
+        "border border-ews-primary text-ews-primary hover:bg-ews-primary hover:text-white disabled:border-gray-400 disabled:text-gray-400 focus:ring-2 focus:ring-offset-2 focus:ring-ews-primary",
     };
 
     const sizes = {
@@ -90,7 +95,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       >
         {loading && (
           <svg
-            className="animate-spin -ml-1 mr-2 h-4 w-4"
+            className="mr-2 -ml-1 w-4 h-4 animate-spin"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
@@ -111,13 +116,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           </svg>
         )}
         {!loading && leftIcon && (
-          <span className={cn("mr-2 flex items-center", iconSizes[size])}>
+          <span className={cn("flex items-center mr-2", iconSizes[size])}>
             {leftIcon}
           </span>
         )}
         {children}
         {!loading && rightIcon && (
-          <span className={cn("ml-2 flex items-center", iconSizes[size])}>
+          <span className={cn("flex items-center ml-2", iconSizes[size])}>
             {rightIcon}
           </span>
         )}

package/src/components/DropdownMultiSelect/DropdownMultiSelect.tsx

@@ -0,0 +1,271 @@
+import { useEffect, useRef, useState } from "react";
+import { Control, Controller, FieldValues, Path } from "react-hook-form";
+import { cn } from "../../utils";
+import { Input } from "../Input";
+
+export interface DropdownMultiSelectProps<T extends FieldValues, TValue> {
+  options: { value: TValue; label: string }[];
+  name: Path<T>;
+  control?: Control<T>;
+  placeholder?: string;
+  onChange?: (value: TValue[]) => void;
+  value?: TValue[];
+  defaultValue?: TValue[];
+  onValidate?: (value: TValue[]) => boolean;
+  disabled?: boolean;
+  error?: string;
+  label?: string;
+  className?: string;
+  searchPlaceholder?: string;
+}
+
+const DropdownMultiSelect = <
+  T extends FieldValues,
+  TValue extends string | number | object
+>({
+  options,
+  name,
+  control,
+  placeholder = "Select options",
+  searchPlaceholder = "Search...",
+  onChange,
+  value: controlledValue,
+  defaultValue,
+  onValidate,
+  disabled = false,
+  error,
+  label,
+  className,
+}: DropdownMultiSelectProps<T, TValue>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [uncontrolledValue, setUncontrolledValue] = useState<
+    TValue[] | undefined
+  >(defaultValue);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const handleToggle = () => {
+    if (!disabled) {
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (
+      dropdownRef.current &&
+      !dropdownRef.current.contains(event.target as Node)
+    ) {
+      setIsOpen(false);
+      setSearchTerm("");
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const removeAccents = (str: string) =>
+    str
+      .normalize("NFD")
+      .replace(/[\u0300-\u036f]/g, "")
+      .replace(/ç/g, "c")
+      .replace(/é|è|ê|ë/g, "e")
+      .replace(/à|á|â|ã|ä/g, "a")
+      .replace(/î|ï/g, "i")
+      .replace(/ô|ö/g, "o")
+      .replace(/ù|ú|û|ü/g, "u");
+
+  const getDisplayValue = (value: TValue) => {
+    if (typeof value === "string" || typeof value === "number") {
+      return String(value);
+    }
+    return options.find((opt) => opt.value === value)?.label || "";
+  };
+
+  const filteredOptions = options.filter((option) =>
+    removeAccents(option.label.toLowerCase()).includes(
+      removeAccents(searchTerm.toLowerCase())
+    )
+  );
+
+  const renderDropdown = ({
+    value = [] as TValue[],
+    onChange: fieldOnChange,
+  }: {
+    value: TValue[] | undefined;
+    onChange: (value: TValue[]) => void;
+  }) => (
+    <div className={cn("relative", className)} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={handleToggle}
+        aria-label={name}
+        disabled={disabled}
+        className={cn(
+          "flex w-full items-center justify-between rounded-md border border-ews-gray-300 bg-white px-3 py-2 text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ews-primary focus:ring-offset-0 disabled:bg-ews-gray-50 disabled:text-ews-gray-500",
+          isOpen ? "rounded-b-none border-b-0" : "rounded-md",
+          error && "border-ews-error focus:ring-ews-error"
+        )}
+      >
+        <span className={cn("truncate", !value?.length && "text-ews-gray-500")}>
+          {value?.length > 0
+            ? value.map((v) => getDisplayValue(v)).join(", ")
+            : placeholder}
+        </span>
+        <span
+          className={cn(
+            "ml-2 w-4 h-4 transition-transform transform",
+            isOpen ? "rotate-180" : "rotate-0"
+          )}
+        >
+          <svg
+            className="w-4 h-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </span>
+      </button>
+
+      {isOpen && (
+        <div className="absolute z-50 w-full bg-white rounded-b-md border border-t-0 shadow-lg border-ews-gray-300">
+          {/* Search Input */}
+          <div className="p-2 border-b border-ews-gray-200">
+            <Input
+              type="text"
+              placeholder={searchPlaceholder}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="p-0 border-0 shadow-none focus:ring-0"
+              size="sm"
+            />
+          </div>
+
+          {/* Scrollable Options List */}
+          <div className="overflow-y-auto max-h-48">
+            {filteredOptions.length > 0 ? (
+              filteredOptions.map((option) => (
+                <div
+                  key={getDisplayValue(option.value)}
+                  className="flex items-center p-2 cursor-pointer hover:bg-ews-gray-100"
+                  onClick={() => {
+                    const currentValue = value ?? [];
+                    const isSelected = currentValue.some(
+                      (item: TValue) =>
+                        JSON.stringify(item) === JSON.stringify(option.value)
+                    );
+                    const newValue = isSelected
+                      ? currentValue.filter(
+                          (item: TValue) =>
+                            JSON.stringify(item) !==
+                            JSON.stringify(option.value)
+                        )
+                      : [...currentValue, option.value];
+
+                    if (onValidate && !onValidate(newValue)) {
+                      return;
+                    }
+                    fieldOnChange(newValue);
+                    onChange?.(newValue);
+                  }}
+                >
+                  <input
+                    type="checkbox"
+                    checked={(value ?? []).some(
+                      (item: TValue) =>
+                        JSON.stringify(item) === JSON.stringify(option.value)
+                    )}
+                    onChange={(e) => {
+                      e.stopPropagation();
+                      const currentValue = value ?? [];
+                      const isSelected = currentValue.some(
+                        (item: TValue) =>
+                          JSON.stringify(item) === JSON.stringify(option.value)
+                      );
+                      const newValue = isSelected
+                        ? currentValue.filter(
+                            (item: TValue) =>
+                              JSON.stringify(item) !==
+                              JSON.stringify(option.value)
+                          )
+                        : [...currentValue, option.value];
+
+                      if (onValidate && !onValidate(newValue)) {
+                        return;
+                      }
+                      fieldOnChange(newValue);
+                      onChange?.(newValue);
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                    className="mr-3 w-4 h-4 rounded border-ews-gray-300 text-ews-primary focus:ring-ews-primary"
+                  />
+                  <label className="text-sm cursor-pointer text-ews-gray-700">
+                    {option.label}
+                  </label>
+                </div>
+              ))
+            ) : (
+              <div className="p-2 text-sm text-ews-gray-500">
+                No options found
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+  // Render controlled version with react-hook-form
+  if (control) {
+    return (
+      <Controller
+        name={name}
+        control={control}
+        render={({ field: { value, onChange } }) => (
+          <div>
+            {label && (
+              <label className="block mb-1 text-sm font-medium text-ews-gray-700">
+                {label}
+              </label>
+            )}
+            {renderDropdown({ value, onChange })}
+            {error && <p className="mt-1 text-sm text-ews-error">{error}</p>}
+          </div>
+        )}
+      />
+    );
+  }
+
+  // Render uncontrolled version
+  return (
+    <div>
+      {label && (
+        <label className="block mb-1 text-sm font-medium text-ews-gray-700">
+          {label}
+        </label>
+      )}
+      {renderDropdown({
+        value: controlledValue ?? uncontrolledValue,
+        onChange: (newValue) => {
+          if (controlledValue === undefined) {
+            setUncontrolledValue(newValue);
+          }
+          onChange?.(newValue);
+        },
+      })}
+      {error && <p className="mt-1 text-sm text-ews-error">{error}</p>}
+    </div>
+  );
+};
+
+export { DropdownMultiSelect };

package/src/components/DropdownMultiSelect/index.ts

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

package/src/components/Modal/Modal.tsx

@@ -231,7 +231,7 @@ const Modal = ({
           <div className="flex justify-end items-center p-6 pt-0 space-x-3">
             {secondaryAction && (
               <Button
-                variant="ghost"
+                variant="outline"
                 onClick={onSecondaryAction || onClose}
                 disabled={isLoading}
               >
@@ -240,7 +240,7 @@ const Modal = ({
             )}
             {primaryAction && (
               <Button
-                variant={variant === "error" ? "error" : "primary"}
+                variant={variant === "error" ? "error" : "ews-primary"}
                 onClick={onPrimaryAction}
                 loading={isLoading}
               >

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 { DropdownMultiSelect } from "./components/DropdownMultiSelect";
+export type { DropdownMultiSelectProps } from "./components/DropdownMultiSelect";
+
 export { Logo } from "./components/Logo";
 export type { LogoProps } from "./components/Logo";
 

package/src/utils/index.ts

@@ -89,6 +89,6 @@ export const formatNumeric = (value: string): string => {
  */
 export function isValidPhoneNumber(value: string): boolean {
   const trimmedValue = value.trim();
-  const phoneRegex = /^[0-9]\d{1,14}$/;
+  const phoneRegex = /^[0-9]\d{1,17}$/;
   return phoneRegex.test(trimmedValue);
 }