@ews-admin/global-design-system 1.0.0 → 1.1.0

package/src/components/MultiSearchAutocomplete/MultiSearchAutocomplete.tsx

@@ -0,0 +1,319 @@
+import { Check, Search, X } from "lucide-react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useDebounce } from "../../hooks";
+import { cn } from "../../utils";
+import { Input } from "../Input/Input";
+import { SearchableEntity } from "../SearchAutocomplete/SearchAutocomplete";
+
+interface MultiSearchAutocompleteProps<T extends SearchableEntity> {
+  items: T[];
+  selectedItems: T[];
+  onSelectionChange: (items: T[]) => void;
+  onSearch: (searchTerm: string) => Promise<void>;
+  getEntityById?: (id: string) => Promise<T | undefined>;
+  getPrimaryText: (entity: T) => string;
+  getSecondaryText?: (entity: T) => string | null;
+  placeholder: string;
+  disabled?: boolean;
+  loading?: boolean;
+  multiple?: boolean;
+  className?: string;
+  renderSelectedItem?: (entity: T) => React.ReactNode;
+  renderListItem?: (entity: T, isSelected: boolean) => React.ReactNode;
+  keepOpenOnSelect?: boolean;
+  error?: string;
+  minSearchLength?: number;
+  debounceTime?: number;
+}
+
+export function MultiSearchAutocomplete<T extends SearchableEntity>({
+  items,
+  selectedItems,
+  onSelectionChange,
+  onSearch,
+  getEntityById,
+  getPrimaryText,
+  getSecondaryText,
+  placeholder,
+  disabled = false,
+  loading = false,
+  multiple = true,
+  className,
+  renderSelectedItem,
+  renderListItem,
+  keepOpenOnSelect = true,
+  error,
+  minSearchLength = 2,
+  debounceTime = 300,
+}: MultiSearchAutocompleteProps<T>) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const [filteredItems, setFilteredItems] = useState<T[]>(items);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debouncedSearchTerm = useDebounce(searchTerm, debounceTime);
+
+  // Handle search term changes
+  useEffect(() => {
+    // If search term is empty, show all items
+    if (!searchTerm.trim()) {
+      setFilteredItems(items);
+      setSearchError(null);
+      return;
+    }
+
+    // If search term is too short, don't search
+    if (searchTerm.length < minSearchLength) {
+      setFilteredItems([]);
+      setSearchError(null);
+      return;
+    }
+  }, [searchTerm, items, minSearchLength]);
+
+  // Debounced search with API calls
+  useEffect(() => {
+    // If debounced search term is empty or too short, don't search
+    if (
+      !debouncedSearchTerm.trim() ||
+      debouncedSearchTerm.length < minSearchLength
+    ) {
+      return;
+    }
+
+    const performSearch = async () => {
+      try {
+        setIsSearching(true);
+        setSearchError(null);
+        await onSearch(debouncedSearchTerm);
+      } catch (err) {
+        setSearchError(err instanceof Error ? err.message : "Search failed");
+      } finally {
+        setIsSearching(false);
+      }
+    };
+
+    performSearch();
+  }, [debouncedSearchTerm, onSearch, minSearchLength]);
+
+  // Update filtered items when items prop changes
+  useEffect(() => {
+    setFilteredItems(items);
+  }, [items]);
+
+  const handleItemToggle = useCallback(
+    (item: T) => {
+      if (multiple) {
+        const isSelected = selectedItems.some(
+          (selected) => selected.id === item.id
+        );
+
+        if (isSelected) {
+          onSelectionChange(
+            selectedItems.filter((selected) => selected.id !== item.id)
+          );
+        } else {
+          onSelectionChange([...selectedItems, item]);
+        }
+        // Keep dropdown open for multiple selection
+        if (keepOpenOnSelect) {
+          setIsOpen(true);
+        }
+      } else {
+        onSelectionChange([item]);
+        setIsOpen(false);
+      }
+    },
+    [selectedItems, onSelectionChange, multiple, keepOpenOnSelect]
+  );
+
+  const handleRemoveItem = useCallback(
+    (itemToRemove: T) => {
+      onSelectionChange(
+        selectedItems.filter((item) => item.id !== itemToRemove.id)
+      );
+    },
+    [selectedItems, onSelectionChange]
+  );
+
+  const handleInputFocus = () => {
+    if (!disabled) {
+      setIsOpen(true);
+    }
+  };
+
+  const handleInputBlur = () => {
+    // Don't close immediately to allow for clicks on dropdown items
+    // Only close if keepOpenOnSelect is false
+    if (!keepOpenOnSelect) {
+      setTimeout(() => setIsOpen(false), 150);
+    }
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [isOpen]);
+
+  // Default render functions
+  const defaultRenderSelectedItem = (entity: T) => (
+    <span className="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-ews-primary/10 text-ews-primary border border-ews-primary/20">
+      {getPrimaryText(entity)}
+      <button
+        type="button"
+        onClick={() => handleRemoveItem(entity)}
+        className="ml-2 text-ews-primary/60 hover:text-ews-primary"
+        disabled={disabled}
+        title="Remove item"
+      >
+        <X className="w-3 h-3" />
+      </button>
+    </span>
+  );
+
+  const defaultRenderListItem = (entity: T, isSelected: boolean) => (
+    <div className="flex items-center space-x-3">
+      <div
+        className={cn(
+          "w-5 h-5 border-2 rounded flex items-center justify-center",
+          isSelected ? "bg-ews-primary border-ews-primary" : "border-gray-300"
+        )}
+      >
+        {isSelected && <Check className="w-3 h-3 text-white" />}
+      </div>
+      <div className="flex flex-col">
+        <span
+          className={cn(
+            "font-medium",
+            isSelected ? "text-ews-primary" : "text-gray-900"
+          )}
+        >
+          {getPrimaryText(entity)}
+        </span>
+        {getSecondaryText && (
+          <span
+            className={cn(
+              "text-sm",
+              isSelected ? "text-ews-primary/70" : "text-gray-500"
+            )}
+          >
+            {getSecondaryText(entity)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className={cn("relative", className)} ref={dropdownRef}>
+      {/* Selected items display */}
+      {selectedItems.length > 0 && (
+        <div className="flex flex-wrap gap-2 mb-3">
+          {selectedItems.map((item) => (
+            <div key={item.id}>
+              {renderSelectedItem
+                ? renderSelectedItem(item)
+                : defaultRenderSelectedItem(item)}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Search input */}
+      <Input
+        ref={inputRef}
+        type="text"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        onFocus={handleInputFocus}
+        onBlur={handleInputBlur}
+        placeholder={placeholder}
+        disabled={disabled}
+        leftIcon={<Search className="w-4 h-4" />}
+        className="w-full"
+      />
+
+      {/* Dropdown */}
+      {isOpen && !disabled && (
+        <div className="absolute z-10 mt-1 w-full max-h-60 bg-white rounded-lg border border-gray-200 shadow-lg overflow-auto">
+          {loading || isSearching ? (
+            <div className="px-4 py-3 text-sm text-gray-500 flex items-center">
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-ews-primary mr-2"></div>
+              {isSearching ? "Searching..." : "Loading..."}
+            </div>
+          ) : searchError ? (
+            <div className="px-4 py-3 text-sm text-red-600">
+              <div className="flex items-center">
+                <X className="w-4 h-4 mr-2" />
+                Error: {searchError}
+              </div>
+            </div>
+          ) : error ? (
+            <div className="px-4 py-3 text-sm text-red-600">
+              <div className="flex items-center">
+                <X className="w-4 h-4 mr-2" />
+                {error}
+              </div>
+            </div>
+          ) : filteredItems.length === 0 ? (
+            <div className="px-4 py-3 text-sm text-gray-500">
+              {searchTerm.length < minSearchLength
+                ? `Type at least ${minSearchLength} characters to search`
+                : "No items found"}
+            </div>
+          ) : (
+            <div className="py-1">
+              {filteredItems.map((item) => {
+                const isSelected = selectedItems.some(
+                  (selected) => selected.id === item.id
+                );
+
+                return (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => handleItemToggle(item)}
+                    className={cn(
+                      "w-full px-4 py-3 text-left flex items-center transition-colors",
+                      isSelected
+                        ? "bg-ews-primary/10 text-ews-primary border-l-4 border-ews-primary"
+                        : "hover:bg-ews-primary/5 text-gray-900"
+                    )}
+                  >
+                    {renderListItem
+                      ? renderListItem(item, isSelected)
+                      : defaultRenderListItem(item, isSelected)}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/MultiSearchAutocomplete/index.ts

@@ -0,0 +1 @@
+export { MultiSearchAutocomplete } from "./MultiSearchAutocomplete";

package/src/components/SearchAutocomplete/SearchAutocomplete.tsx

@@ -0,0 +1,315 @@
+import { LucideIcon, Search, X } from "lucide-react";
+import React, { useEffect, useRef, useState } from "react";
+import { useDebounce } from "../../hooks";
+import { Input } from "../Input/Input";
+
+// Generic interface for searchable entities
+export interface SearchableEntity {
+  id: string;
+  [key: string]: string | number | boolean | undefined;
+}
+
+interface SearchAutocompleteProps<T extends SearchableEntity> {
+  onSelect: (id: string) => void;
+  selectedId: string;
+  searchFunction: (keyword: string) => Promise<T[]>;
+  getEntityById?: (id: string) => Promise<T | undefined>;
+  getDisplayValue: (entity: T) => string;
+  getSecondaryText?: (entity: T) => string | null;
+  placeholder: string;
+  icon?: LucideIcon;
+  disabled?: boolean;
+  minSearchLength?: number;
+  debounceTime?: number;
+  error?: string;
+}
+
+export function SearchAutocomplete<T extends SearchableEntity>({
+  onSelect,
+  selectedId,
+  searchFunction,
+  getEntityById,
+  getDisplayValue,
+  getSecondaryText,
+  placeholder,
+  icon = Search,
+  disabled = false,
+  minSearchLength = 2,
+  debounceTime = 300,
+  error,
+}: SearchAutocompleteProps<T>) {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [entities, setEntities] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [selectedEntity, setSelectedEntity] = useState<T | null>(null);
+  const [initialLoadDone, setInitialLoadDone] = useState(false);
+  const [searchError, setSearchError] = useState<string | null>(null);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const debouncedSearchTerm = useDebounce(searchTerm, debounceTime);
+
+  // Track if this is an initial load or a user-initiated search
+  const isUserSearch = useRef(false);
+
+  // Only fetch the selected entity by ID once on initial load
+  useEffect(() => {
+    const fetchSelectedEntity = async () => {
+      // Only fetch if we have a selectedId, getEntityById function, and haven't loaded yet
+      if (!selectedId || !getEntityById || initialLoadDone) return;
+
+      setIsLoading(true);
+      try {
+        const entity = await getEntityById(selectedId);
+        if (entity) {
+          setSelectedEntity(entity);
+          setSearchTerm(getDisplayValue(entity));
+        }
+      } catch (error) {
+        console.error("Error fetching selected entity:", error);
+      } finally {
+        setIsLoading(false);
+        setInitialLoadDone(true);
+      }
+    };
+
+    fetchSelectedEntity();
+  }, [selectedId, getEntityById, getDisplayValue, initialLoadDone]);
+
+  // Handle search term changes - only for user-initiated searches
+  useEffect(() => {
+    // Skip if this is just setting the initial value
+    if (!isUserSearch.current) return;
+
+    // Clear entities if search term is too short
+    if (searchTerm.trim().length < minSearchLength) {
+      setEntities([]);
+      setSearchError(null);
+    }
+  }, [searchTerm, minSearchLength]);
+
+  // Fetch entities when debounced search term changes - only for user searches
+  useEffect(() => {
+    const fetchEntities = async () => {
+      if (
+        !debouncedSearchTerm ||
+        debouncedSearchTerm.length < minSearchLength
+      ) {
+        return;
+      }
+
+      setIsLoading(true);
+      setSearchError(null);
+      try {
+        const results = await searchFunction(debouncedSearchTerm);
+        setEntities(results);
+      } catch (error) {
+        console.error("Error fetching search results:", error);
+        setSearchError(
+          error instanceof Error ? error.message : "Search failed"
+        );
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    // Only fetch if this is a user-initiated search
+    if (isUserSearch.current) {
+      fetchEntities();
+    }
+  }, [debouncedSearchTerm, searchFunction, minSearchLength]);
+
+  // Handle click outside to close dropdown
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setShowDropdown(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    // Mark this as a user-initiated search
+    isUserSearch.current = true;
+
+    setSearchTerm(value);
+
+    if (selectedEntity) {
+      setSelectedEntity(null);
+      onSelect("");
+    }
+
+    setShowDropdown(value.trim().length >= minSearchLength);
+  };
+
+  const handleEntitySelect = (entity: T) => {
+    // This is a user selection, not an API fetch
+    isUserSearch.current = false;
+
+    console.log(`Selected entity with ID: ${entity.id}`);
+
+    setSelectedEntity(entity);
+    setSearchTerm(getDisplayValue(entity));
+    onSelect(entity.id);
+    setShowDropdown(false);
+  };
+
+  const handleClearSelection = () => {
+    // This is a user action, but not a search
+    isUserSearch.current = false;
+
+    setSelectedEntity(null);
+    setSearchTerm("");
+    onSelect("");
+  };
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <div className="relative">
+        <Input
+          type="text"
+          placeholder={`${placeholder} (min. ${minSearchLength} characters)`}
+          value={selectedEntity ? "" : searchTerm}
+          onChange={handleSearchChange}
+          onFocus={() =>
+            searchTerm.length >= minSearchLength &&
+            isUserSearch.current &&
+            setShowDropdown(true)
+          }
+          disabled={disabled}
+          autoComplete="off"
+          name="search-autocomplete"
+          leftIcon={React.createElement(icon, { size: 16 })}
+        />
+
+        {selectedEntity && (
+          <button
+            type="button"
+            className="flex absolute inset-y-0 right-0 items-center pr-3"
+            onClick={handleClearSelection}
+            disabled={disabled}
+          >
+            <X className="w-5 h-5 text-gray-400 hover:text-gray-500" />
+          </button>
+        )}
+      </div>
+
+      {/* Selected Entity Display */}
+      {selectedEntity && (
+        <div className="p-4 mt-3 rounded-lg border bg-neutral-50 border-neutral-200">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center">
+              {(selectedEntity as { photoUrl?: string }).photoUrl ? (
+                <img
+                  src={(selectedEntity as { photoUrl?: string }).photoUrl!}
+                  alt={getDisplayValue(selectedEntity)}
+                  className="object-cover mr-3 w-10 h-10 rounded-full"
+                />
+              ) : (
+                React.createElement(icon, {
+                  className: "w-10 h-10 text-neutral-400 mr-3",
+                })
+              )}
+              <div>
+                <div className="font-medium text-neutral-900">
+                  {getDisplayValue(selectedEntity)}
+                </div>
+                {getSecondaryText && getSecondaryText(selectedEntity) && (
+                  <div className="text-sm text-neutral-500">
+                    {getSecondaryText(selectedEntity)}
+                  </div>
+                )}
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={handleClearSelection}
+              className="transition-colors text-neutral-400 hover:text-neutral-600"
+              disabled={disabled}
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {showDropdown && entities?.length > 0 && (
+        <div className="overflow-auto absolute z-10 mt-1 w-full max-h-60 bg-white rounded-md shadow-lg">
+          <ul className="py-1">
+            {entities.map((entity) => (
+              <li
+                key={entity.id}
+                className="px-4 py-2 cursor-pointer hover:bg-gray-100"
+                onClick={() => handleEntitySelect(entity)}
+              >
+                <div className="flex items-center">
+                  {React.createElement(icon, {
+                    className: "w-4 h-4 text-gray-400",
+                  })}
+                  <div className="ml-2">
+                    <div className="font-medium">{getDisplayValue(entity)}</div>
+                    {getSecondaryText && getSecondaryText(entity) && (
+                      <div className="text-xs text-gray-500">
+                        {getSecondaryText(entity)}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {showDropdown && searchError && (
+        <div className="absolute z-10 p-4 mt-1 w-full text-center text-red-600 bg-white rounded-md shadow-lg border border-red-200">
+          <div className="flex items-center justify-center">
+            <X className="w-4 h-4 mr-2" />
+            Error: {searchError}
+          </div>
+        </div>
+      )}
+
+      {showDropdown && error && !searchError && (
+        <div className="absolute z-10 p-4 mt-1 w-full text-center text-red-600 bg-white rounded-md shadow-lg border border-red-200">
+          <div className="flex items-center justify-center">
+            <X className="w-4 h-4 mr-2" />
+            {error}
+          </div>
+        </div>
+      )}
+
+      {showDropdown &&
+        debouncedSearchTerm &&
+        entities?.length === 0 &&
+        !isLoading &&
+        !searchError &&
+        !error && (
+          <div className="absolute z-10 p-4 mt-1 w-full text-center text-gray-500 bg-white rounded-md shadow-lg">
+            {debouncedSearchTerm.length < minSearchLength
+              ? `Type at least ${minSearchLength} characters to search`
+              : "No results found. Try a different search term."}
+          </div>
+        )}
+
+      {isLoading && showDropdown && (
+        <div className="absolute z-10 p-4 mt-1 w-full text-center text-gray-500 bg-white rounded-md shadow-lg">
+          <div className="flex items-center justify-center">
+            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-ews-primary mr-2"></div>
+            Loading...
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/SearchAutocomplete/index.ts

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

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { useDebounce, useDebouncedCallback } from "./useDebounce";

package/src/hooks/useDebounce.ts

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+
+const DEFAULT_DELAY = 500;
+
+/**
+ * A custom hook that debounces a value
+ * @param value - The value to debounce
+ * @param delay - The delay in milliseconds (optional, defaults to 300ms)
+ * @returns The debounced value
+ */
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const actualDelay = delay ?? DEFAULT_DELAY;
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, actualDelay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, actualDelay]);
+
+  return debouncedValue;
+}
+
+/**
+ * A custom hook that provides a debounced callback function
+ * @param callback - The function to debounce
+ * @param delay - The delay in milliseconds (optional, defaults to 300ms)
+ * @returns A debounced version of the callback
+ */
+export function useDebouncedCallback<T extends (...args: unknown[]) => unknown>(
+  callback: T,
+  delay?: number
+): T {
+  const [debounceTimer, setDebounceTimer] = useState<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+
+  const debouncedCallback = ((...args: Parameters<T>) => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+
+    const actualDelay = delay ?? DEFAULT_DELAY;
+    const newTimer = setTimeout(() => {
+      callback(...args);
+    }, actualDelay);
+
+    setDebounceTimer(newTimer);
+  }) as T;
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+    };
+  }, [debounceTimer]);
+
+  return debouncedCallback;
+}