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

package/src/components/Input/Input.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import { Eye, EyeOff } from "../../icons";
 import { cn } from "../../utils";
 
 export interface InputProps
@@ -35,6 +36,10 @@ export interface InputProps
    * Whether the input should take full width
    */
   fullWidth?: boolean;
+  /**
+   * Whether to show password toggle for password inputs
+   */
+  showPasswordToggle?: boolean;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -49,7 +54,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       leftIcon,
       rightIcon,
       fullWidth = false,
+      showPasswordToggle = false,
       id,
+      type = "text",
       ...props
     },
     ref
@@ -58,16 +65,21 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const hasError = Boolean(error);
     const actualVariant = hasError ? "error" : variant;
 
+    // Password visibility state
+    const [showPassword, setShowPassword] = useState(false);
+    const isPasswordInput = type === "password";
+    const shouldShowPasswordToggle = showPasswordToggle && isPasswordInput;
+    const actualType = isPasswordInput && showPassword ? "text" : type;
+
     const baseStyles =
-      "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0";
+      "block w-full rounded-md border transition-colors focus:outline-none focus:ring-2 focus:ring-offset-0 hover:border-ews-primary";
 
     const variants = {
       default:
-        "border-[var(--ews-gray-300)] focus:border-[var(--ews-primary)] focus:ring-[var(--ews-primary)]",
-      error:
-        "border-[var(--ews-error)] focus:border-[var(--ews-error)] focus:ring-[var(--ews-error)]",
+        "border-ews-gray-300 focus:border-ews-primary focus:ring-ews-primary",
+      error: "border-ews-error focus:border-ews-error focus:ring-ews-error",
       success:
-        "border-[var(--ews-success)] focus:border-[var(--ews-success)] focus:ring-[var(--ews-success)]",
+        "border-ews-success focus:border-ews-success focus:ring-ews-success",
     };
 
     const sizes = {
@@ -87,7 +99,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {label && (
           <label
             htmlFor={inputId}
-            className="block text-sm font-medium text-[var(--ews-gray-700)]"
+            className="block text-sm font-medium text-ews-gray-700"
           >
             {label}
           </label>
@@ -95,41 +107,55 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <div className="relative">
           {leftIcon && (
             <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-              <span
-                className={cn("text-[var(--ews-gray-400)]", iconSizes[size])}
-              >
+              <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {leftIcon}
               </span>
             </div>
           )}
           <input
             id={inputId}
+            type={actualType}
             className={cn(
               baseStyles,
               variants[actualVariant],
               sizes[size],
               leftIcon && "pl-10",
-              rightIcon && "pr-10",
+              (rightIcon || shouldShowPasswordToggle) && "pr-10",
               className
             )}
             ref={ref}
             {...props}
           />
-          {rightIcon && (
+          {rightIcon && !shouldShowPasswordToggle && (
             <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-              <span
-                className={cn("text-[var(--ews-gray-400)]", iconSizes[size])}
-              >
+              <span className={cn("text-ews-gray-400", iconSizes[size])}>
                 {rightIcon}
               </span>
             </div>
           )}
+          {shouldShowPasswordToggle && (
+            <button
+              type="button"
+              className="absolute inset-y-0 right-0 pr-3 flex items-center"
+              onClick={() => setShowPassword(!showPassword)}
+              tabIndex={-1}
+            >
+              <span
+                className={cn(
+                  "text-ews-gray-400 hover:text-ews-gray-600 transition-colors",
+                  iconSizes[size]
+                )}
+              >
+                {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+              </span>
+            </button>
+          )}
         </div>
         {(error || helperText) && (
           <p
             className={cn(
               "text-sm",
-              error ? "text-[var(--ews-error)]" : "text-[var(--ews-gray-500)]"
+              error ? "text-ews-error" : "text-ews-gray-500"
             )}
           >
             {error || helperText}

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,100 @@
+import { cn } from "../../utils";
+
+export interface LogoProps {
+  /**
+   * Logo size
+   */
+  size?: "sm" | "md" | "lg" | "xl";
+  /**
+   * Whether to show the tagline
+   */
+  showTagline?: boolean;
+  /**
+   * Whether to show only the icon (favicon version)
+   */
+  iconOnly?: boolean;
+  /**
+   * Logo variant - normal, white, or favicon
+   */
+  variant?: "normal" | "white" | "favicon";
+  /**
+   * Custom className
+   */
+  className?: string;
+  /**
+   * Click handler
+   */
+  onClick?: () => void;
+}
+
+const Logo = ({
+  size = "md",
+  showTagline = true,
+  iconOnly = false,
+  variant = "normal",
+  className,
+  onClick,
+}: LogoProps) => {
+  const sizes = {
+    sm: "h-8",
+    md: "h-12",
+    lg: "h-16",
+    xl: "h-24",
+  };
+
+  const iconSizes = {
+    sm: "h-6 w-6",
+    md: "h-8 w-8",
+    lg: "h-12 w-12",
+    xl: "h-16 w-16",
+  };
+
+  // Get the appropriate logo image based on variant
+  // For iconOnly, always use favicon.ico
+  const logoSrc = iconOnly
+    ? "/favicon.ico"
+    : variant === "white"
+    ? "/image/logoWhite.png"
+    : variant === "favicon"
+    ? "/favicon.ico"
+    : "/image/logo.png";
+
+  if (iconOnly) {
+    return (
+      <div
+        className={cn(
+          "flex items-center justify-center",
+          iconSizes[size],
+          className
+        )}
+        onClick={onClick}
+        role={onClick ? "button" : undefined}
+        tabIndex={onClick ? 0 : undefined}
+      >
+        <img
+          src={logoSrc}
+          alt="MEDECINE 360 Logo"
+          className="w-full h-full object-contain"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn("flex items-center", sizes[size], className)}
+      onClick={onClick}
+      role={onClick ? "button" : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Logo Image */}
+      <img
+        src={logoSrc}
+        alt="MEDECINE 360 Logo"
+        className="h-full w-auto object-contain"
+      />
+    </div>
+  );
+};
+
+export { Logo };

package/src/components/Logo/index.ts

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

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,257 @@
+import { AlertCircle, AlertTriangle, CheckCircle, X } from "lucide-react";
+import React, { useEffect } from "react";
+import { cn } from "../../utils";
+import { Button } from "../Button/Button";
+
+export interface ErrorField {
+  name: string;
+  message: string;
+  path: string;
+}
+
+export interface ErrorObject {
+  code: string;
+  message: string;
+  fields: ErrorField[];
+}
+
+export interface ModalProps {
+  /**
+   * Whether the modal is open
+   */
+  isOpen: boolean;
+  /**
+   * Function to call when modal should be closed
+   */
+  onClose: () => void;
+  /**
+   * Modal title
+   */
+  title: string;
+  /**
+   * Modal content/description
+   */
+  children: React.ReactNode;
+  /**
+   * Modal variant
+   */
+  variant?: "error" | "warning" | "confirmation" | "info";
+  /**
+   * Primary action button text
+   */
+  primaryAction?: string;
+  /**
+   * Secondary action button text
+   */
+  secondaryAction?: string;
+  /**
+   * Function to call when primary action is clicked
+   */
+  onPrimaryAction?: () => void;
+  /**
+   * Function to call when secondary action is clicked
+   */
+  onSecondaryAction?: () => void;
+  /**
+   * Whether the primary action button is loading
+   */
+  isLoading?: boolean;
+  /**
+   * Whether the modal can be closed by clicking outside or pressing escape
+   */
+  closeOnOverlayClick?: boolean;
+  /**
+   * Custom className for the modal
+   */
+  className?: string;
+  /**
+   * Custom className for the content
+   */
+  contentClassName?: string;
+  /**
+   * Error object for error modals
+   */
+  error?: ErrorObject;
+}
+
+const Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  variant = "info",
+  primaryAction,
+  secondaryAction,
+  onPrimaryAction,
+  onSecondaryAction,
+  isLoading = false,
+  closeOnOverlayClick = true,
+  className,
+  contentClassName,
+  error,
+}: ModalProps) => {
+  // Handle escape key press
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      // Prevent body scroll when modal is open
+      document.body.style.overflow = "hidden";
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "error":
+        return {
+          icon: <AlertCircle className="w-6 h-6 text-ews-error" />,
+          iconBg: "bg-ews-error/10",
+          titleColor: "text-ews-error",
+          borderColor: "border-ews-error/20",
+        };
+      case "warning":
+        return {
+          icon: <AlertTriangle className="w-6 h-6 text-ews-warning" />,
+          iconBg: "bg-ews-warning/10",
+          titleColor: "text-ews-warning",
+          borderColor: "border-ews-warning/20",
+        };
+      case "confirmation":
+        return {
+          icon: <CheckCircle className="w-6 h-6 text-ews-success" />,
+          iconBg: "bg-ews-success/10",
+          titleColor: "text-ews-success",
+          borderColor: "border-ews-success/20",
+        };
+      default:
+        return {
+          icon: <AlertCircle className="w-6 h-6 text-ews-primary" />,
+          iconBg: "bg-ews-primary/10",
+          titleColor: "text-ews-primary",
+          borderColor: "border-ews-primary/20",
+        };
+    }
+  };
+
+  const variantStyles = getVariantStyles();
+
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget && closeOnOverlayClick) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="absolute inset-0 bg-black/50 backdrop-blur-sm"
+        onClick={handleOverlayClick}
+      />
+
+      {/* Modal */}
+      <div
+        className={cn(
+          "relative w-full max-w-md mx-4 bg-white rounded-lg shadow-xl transform transition-all",
+          "animate-in fade-in-0 zoom-in-95 duration-200",
+          className
+        )}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="modal-title"
+      >
+        {/* Header */}
+        <div
+          className={cn(
+            "flex items-center justify-between p-6 border-b",
+            variantStyles.borderColor
+          )}
+        >
+          <div className="flex items-center space-x-3">
+            <div className={cn("p-2 rounded-full", variantStyles.iconBg)}>
+              {variantStyles.icon}
+            </div>
+            <h2
+              id="modal-title"
+              className={cn("text-lg font-semibold", variantStyles.titleColor)}
+            >
+              {title}
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
+            aria-label="Close modal"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className={cn("p-6", contentClassName)}>
+          <div className="text-gray-700 leading-relaxed">
+            {error && variant === "error" ? (
+              <div className="space-y-3">
+                <p>{error.message}</p>
+                {error.fields && error.fields.length > 0 && (
+                  <div>
+                    <p className="font-semibold text-gray-900">
+                      Erreurs de champ:
+                    </p>
+                    <ul className="mt-2 space-y-1">
+                      {error.fields.map((field, index) => (
+                        <li key={index} className="text-ews-error">
+                          • {field.path}: {field.message}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+              </div>
+            ) : (
+              children
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        {(primaryAction || secondaryAction) && (
+          <div className="flex items-center justify-end space-x-3 p-6 pt-0">
+            {secondaryAction && (
+              <Button
+                variant="ghost"
+                onClick={onSecondaryAction || onClose}
+                disabled={isLoading}
+              >
+                {secondaryAction}
+              </Button>
+            )}
+            {primaryAction && (
+              <Button
+                variant={variant === "error" ? "error" : "primary"}
+                onClick={onPrimaryAction}
+                loading={isLoading}
+              >
+                {primaryAction}
+              </Button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { Modal };

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from "./Modal";
+export type { ErrorField, ErrorObject, ModalProps } from "./Modal";