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

package/src/icons/Icon.tsx

@@ -1,34 +1,33 @@
+import { LucideProps } from "lucide-react";
 import React from "react";
 
-export interface IconProps extends React.SVGProps<SVGSVGElement> {
+export interface IconProps extends Omit<LucideProps, "size"> {
   /**
    * Icon size
    */
-  size?: "sm" | "md" | "lg" | "xl";
+  size?: "sm" | "md" | "lg" | "xl" | number;
   /**
-   * Icon color
+   * The Lucide icon component to render
    */
-  color?: string;
+  icon: React.ComponentType<LucideProps>;
 }
 
 const Icon = React.forwardRef<SVGSVGElement, IconProps>(
-  ({ size = "md", color = "currentColor", className, ...props }, ref) => {
+  ({ size = "md", icon: IconComponent, className, ...props }, ref) => {
     const sizes = {
-      sm: "h-4 w-4",
-      md: "h-5 w-5",
-      lg: "h-6 w-6",
-      xl: "h-8 w-8",
+      sm: 16,
+      md: 20,
+      lg: 24,
+      xl: 32,
     };
 
+    const iconSize = typeof size === "number" ? size : sizes[size];
+
     return (
-      <svg
+      <IconComponent
         ref={ref}
-        className={`${sizes[size]} ${className || ""}`}
-        fill="none"
-        stroke={color}
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        size={iconSize}
+        className={className}
         {...props}
       />
     );

package/src/icons/index.ts

@@ -1,5 +1,41 @@
-export { ArrowRight } from "./ArrowRight";
-export { Check } from "./Check";
+// Re-export commonly used Lucide icons
+export {
+  ArrowRight,
+  Bell,
+  Building,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  Clock,
+  Download,
+  Edit,
+  Eye,
+  EyeOff,
+  Filter,
+  Heart,
+  Home,
+  Lock,
+  Mail,
+  MapPin,
+  Menu,
+  Minus,
+  Phone,
+  Plus,
+  Search,
+  Settings,
+  Share,
+  Star,
+  Trash2,
+  Unlock,
+  Upload,
+  User,
+  X,
+  type LucideProps,
+} from "lucide-react";
+
+// Keep our custom Icon component for backward compatibility
 export { Icon } from "./Icon";
 export type { IconProps } from "./Icon";
-export { Search } from "./Search";

package/src/index.ts

@@ -5,6 +5,21 @@ export type { ButtonProps } from "./components/Button";
 export { Input } from "./components/Input";
 export type { InputProps } from "./components/Input";
 
+export { SearchAutocomplete } from "./components/SearchAutocomplete";
+export type { SearchableEntity } from "./components/SearchAutocomplete";
+
+export { MultiSearchAutocomplete } from "./components/MultiSearchAutocomplete";
+
+export { Modal } from "./components/Modal";
+export type { ErrorField, ErrorObject, ModalProps } from "./components/Modal";
+
+export { Logo } from "./components/Logo";
+export type { LogoProps } from "./components/Logo";
+
+// Molecules
+export { SpecialtySearchAutocomplete } from "./molecules";
+export type { Specialty, SpecialtySearchAutocompleteProps } from "./molecules";
+
 // Icons
 export { ArrowRight, Check, Icon, Search } from "./icons";
 export type { IconProps } from "./icons";
@@ -12,5 +27,9 @@ export type { IconProps } from "./icons";
 // Utils
 export { cn, debounce, formatCurrency, formatDate, generateId } from "./utils";
 
+// Hooks
+export { useDebounce, useDebouncedCallback } from "./hooks";
+
 // Styles
 import "./styles/index.css";
+import "./styles/tailwind.css";

package/src/molecules/SpecialtySearchAutocomplete/SpecialtySearchAutocomplete.tsx

@@ -0,0 +1,203 @@
+import { Stethoscope } from "lucide-react";
+import React, { useCallback, useEffect, useState } from "react";
+import { MultiSearchAutocomplete } from "../../components/MultiSearchAutocomplete";
+import { cn } from "../../utils";
+
+export interface Specialty {
+  id: string;
+  code: string;
+  label: string;
+  [key: string]: string | number | boolean | undefined;
+}
+
+export interface SpecialtySearchAutocompleteProps {
+  selectedSpecialties: Specialty[];
+  onSpecialtiesChange: (specialties: Specialty[]) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  maxSelections?: number;
+  showSelectedCount?: boolean;
+}
+
+export const SpecialtySearchAutocomplete: React.FC<
+  SpecialtySearchAutocompleteProps
+> = ({
+  selectedSpecialties = [],
+  onSpecialtiesChange,
+  placeholder = "Search and select medical specialties...",
+  className = "",
+  disabled = false,
+  maxSelections,
+  showSelectedCount = true,
+}) => {
+  const [specialties, setSpecialties] = useState<Specialty[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Mock API call - replace with actual API
+  const fetchSpecialties = useCallback(async (searchTerm: string) => {
+    setIsLoading(true);
+    try {
+      // Simulate API delay
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Mock data - replace with actual API call
+      const mockSpecialties: Specialty[] = [
+        { id: "1", code: "CARD", label: "Cardiology" },
+        { id: "2", code: "DERM", label: "Dermatology" },
+        { id: "3", code: "ENDO", label: "Endocrinology" },
+        { id: "4", code: "GAST", label: "Gastroenterology" },
+        { id: "5", code: "HEMA", label: "Hematology" },
+        { id: "6", code: "NEUR", label: "Neurology" },
+        { id: "7", code: "ONCO", label: "Oncology" },
+        { id: "8", code: "ORTH", label: "Orthopedics" },
+        { id: "9", code: "PED", label: "Pediatrics" },
+        { id: "10", code: "PSYC", label: "Psychiatry" },
+        { id: "11", code: "RAD", label: "Radiology" },
+        { id: "12", code: "SURG", label: "Surgery" },
+        { id: "13", code: "UROL", label: "Urology" },
+        { id: "14", code: "GYN", label: "Gynecology" },
+        { id: "15", code: "OPHT", label: "Ophthalmology" },
+      ];
+
+      // Filter based on search term
+      const filtered = mockSpecialties.filter(
+        (specialty) =>
+          specialty.label.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          specialty.code.toLowerCase().includes(searchTerm.toLowerCase())
+      );
+
+      setSpecialties(filtered);
+    } catch (error) {
+      console.error("Error fetching specialties:", error);
+      setSpecialties([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initial load
+  useEffect(() => {
+    fetchSpecialties("");
+  }, [fetchSpecialties]);
+
+  const handleSelectionChange = useCallback(
+    (items: Specialty[]) => {
+      // Check max selections limit
+      if (maxSelections && items.length > maxSelections) {
+        return; // Don't update if exceeding max selections
+      }
+      onSpecialtiesChange(items);
+    },
+    [onSpecialtiesChange, maxSelections]
+  );
+
+  const getEntityById = useCallback(
+    async (id: string): Promise<Specialty | undefined> => {
+      return specialties.find((specialty) => specialty.id === id);
+    },
+    [specialties]
+  );
+
+  return (
+    <div className={cn("space-y-3", className)}>
+      {/* Header with title and icon */}
+      <div className="flex items-center space-x-2">
+        <div className="flex justify-center items-center w-8 h-8 rounded-lg bg-secondary-100">
+          <Stethoscope className="w-4 h-4 text-secondary-600" />
+        </div>
+        <h3 className="text-lg font-semibold text-gray-900">
+          Medical Specialties
+        </h3>
+      </div>
+
+      {/* Label */}
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-2">
+          Select Specialties
+        </label>
+      </div>
+
+      {/* MultiSearchAutocomplete component */}
+      <MultiSearchAutocomplete<Specialty>
+        items={specialties}
+        selectedItems={selectedSpecialties}
+        onSelectionChange={handleSelectionChange}
+        onSearch={fetchSpecialties}
+        getEntityById={getEntityById}
+        getPrimaryText={(specialty) => specialty.label}
+        getSecondaryText={(specialty) => specialty.code}
+        placeholder={placeholder}
+        disabled={disabled}
+        loading={isLoading}
+        multiple={true}
+        keepOpenOnSelect={true}
+        className="w-full"
+        renderSelectedItem={(specialty) => (
+          <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">
+            {specialty.label}
+          </span>
+        )}
+        renderListItem={(specialty, isSelected) => (
+          <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 && (
+                <svg
+                  className="w-3 h-3 text-white"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+            </div>
+            <div className="flex flex-col">
+              <span
+                className={cn(
+                  "font-medium",
+                  isSelected ? "text-ews-primary" : "text-gray-900"
+                )}
+              >
+                {specialty.label}
+              </span>
+              <span
+                className={cn(
+                  "text-sm",
+                  isSelected ? "text-ews-primary/70" : "text-gray-500"
+                )}
+              >
+                {specialty.code}
+              </span>
+            </div>
+          </div>
+        )}
+      />
+
+      {/* Selected count display */}
+      {showSelectedCount && selectedSpecialties.length > 0 && (
+        <div className="flex items-center justify-between text-sm text-gray-600">
+          <span>
+            {selectedSpecialties.length} specialty
+            {selectedSpecialties.length !== 1 ? "ies" : ""} selected
+          </span>
+          {maxSelections && (
+            <span className="text-gray-400">
+              {selectedSpecialties.length}/{maxSelections}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/molecules/SpecialtySearchAutocomplete/index.ts

@@ -0,0 +1,5 @@
+export { SpecialtySearchAutocomplete } from "./SpecialtySearchAutocomplete";
+export type {
+  Specialty,
+  SpecialtySearchAutocompleteProps,
+} from "./SpecialtySearchAutocomplete";

package/src/molecules/index.ts

@@ -0,0 +1,5 @@
+export { SpecialtySearchAutocomplete } from "./SpecialtySearchAutocomplete";
+export type {
+  Specialty,
+  SpecialtySearchAutocompleteProps,
+} from "./SpecialtySearchAutocomplete";

package/src/styles/index.css

@@ -1,12 +1,15 @@
 /* EWS Global Design System - Base Styles */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
   /* Colors */
-  --ews-primary: #2563eb;
-  --ews-primary-hover: #1d4ed8;
-  --ews-primary-light: #dbeafe;
-  --ews-secondary: #64748b;
-  --ews-secondary-hover: #475569;
+  --ews-primary: #21596c;
+  --ews-primary-hover: #1a4756;
+  --ews-primary-light: #c0d0d4;
+  --ews-secondary: #3ba1a1;
+  --ews-secondary-hover: #308181;
   --ews-success: #059669;
   --ews-success-hover: #047857;
   --ews-warning: #d97706;

package/src/styles/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/utils/index.ts

@@ -1,5 +1,10 @@
 import { clsx, type ClassValue } from "clsx";
 
+/**
+ * Default currency for price formatting
+ */
+export const CURRENCY = "XOF";
+
 /**
  * Utility function to merge class names
  * @param inputs - Class values to merge
@@ -12,10 +17,10 @@ export function cn(...inputs: ClassValue[]) {
 /**
  * Utility function to format currency
  * @param amount - Amount to format
- * @param currency - Currency code (default: 'USD')
+ * @param currency - Currency code (default: CURRENCY constant)
  * @returns Formatted currency string
  */
-export function formatCurrency(amount: number, currency = "USD"): string {
+export function formatCurrency(amount: number, currency = CURRENCY): string {
   return new Intl.NumberFormat("en-US", {
     style: "currency",
     currency,