change and add into components, widgets and pages

2026-07-30 14:08:49 +02:00
parent ec900efe3a
commit 057aa628a3
39 changed files with 1620 additions and 1062 deletions
@@ -1,37 +1,90 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '@/utils/utils';

-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: 'primary' | 'outline' | 'ghost';
-  size?: 'sm' | 'md' | 'lg';
+// 1. Dictionnaire des variantes (Sémantique de couleurs GISE)
+const variantStyles = {
+  primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm border border-transparent",
+  secondary: "bg-slate-900 text-white hover:bg-slate-800 focus:ring-slate-900 shadow-sm border border-transparent",
+  danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-600 shadow-sm border border-transparent",
+  success: "bg-emerald-600 text-white hover:bg-emerald-700 focus:ring-emerald-600 shadow-sm border border-transparent",
+  outline: "bg-white text-slate-700 border border-slate-300 hover:bg-slate-50 focus:ring-slate-900",
+  ghost: "bg-transparent text-slate-600 hover:bg-slate-100 hover:text-slate-900 focus:ring-slate-900 border border-transparent",
+};
+
+// 2. Dictionnaire des tailles
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-xs",
+  md: "px-4 py-2.5 text-sm",
+  lg: "px-6 py-3 text-base w-full sm:w-auto", // w-full sur mobile par défaut, auto sur desktop
+  icon: "p-2", // Format carré optimisé pour les boutons sans texte
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles;
+  size?: keyof typeof sizeStyles;
  isLoading?: boolean;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
 }

-export const Button: React.FC<ButtonProps> = ({
-  children, variant = 'primary', size = 'md', isLoading, className, disabled, ...props
-}) => {
-  const baseStyles = "inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
-  
-  const variants = {
-    primary: "bg-blue-900 text-white hover:bg-blue-800 focus:ring-blue-900 shadow-sm",
-    outline: "border border-slate-200 text-slate-900 hover:border-blue-900 hover:bg-blue-50 focus:ring-blue-900",
-    ghost: "text-slate-600 hover:text-slate-900 hover:bg-slate-100 focus:ring-slate-500",
-  };
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    { 
+      className, 
+      variant = 'primary', 
+      size = 'md', 
+      isLoading = false, 
+      leftIcon, 
+      rightIcon, 
+      children, 
+      disabled, 
+      type = "button",
+      ...props 
+    }, 
+    ref
+  ) => {
+    const newLocal = "ml-2 flex-shrink-0";
+    return (
+      <button
+        ref={ref} // Indispensable pour l'accessibilité ou des librairies externes
+        type={type}
+        disabled={disabled || isLoading}
+        className={cn(
+          // Styles de base structurels
+          "inline-flex items-center justify-center font-medium rounded-lg transition-all duration-200",
+          "focus:outline-none active:scale-[0.98]",
+          "disabled:opacity-60 disabled:pointer-events-none disabled:active:scale-100",
+          // Application dynamique des dictionnaires
+          variantStyles[variant],
+          sizeStyles[size],
+          className
+        )}
+        {...props}
+      >
+        {/* Spinner SVG optimisé pour le chargement */}
+        {isLoading && (
+          <svg 
+            className="animate-spin -ml-1 mr-2 h-4 w-4 text-current" 
+            xmlns="http://www.w3.org/2000/svg" 
+            fill="none" 
+            viewBox="0 0 24 24"
+          >
+            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        )}
+        
+        {/* Icône de gauche (masquée si chargement) */}
+        {!isLoading && leftIcon && <span className="mr-2 shrink-0">{leftIcon}</span>}
+        
+        {/* Texte du bouton */}
+        <span className="truncate">{children}</span>

-  const sizes = {
-    sm: "px-3 py-1.5 text-sm",
-    md: "px-4 py-2 text-base",
-    lg: "w-full py-3 text-base",
-  };
+        {/* Icône de droite */}
+        {rightIcon && <span className={newLocal}>{rightIcon}</span>}
+      </button>
+    );
+  }
+);

-  return (
-    <button
-      disabled={disabled || isLoading}
-      className={cn(baseStyles, variants[variant], sizes[size], (disabled || isLoading) && "opacity-50 cursor-not-allowed", className)}
-      {...props}
-    >
-      {isLoading && <span className="mr-2 w-4 h-4 rounded-full border-2 border-current border-b-transparent animate-spin" />}
-      {children}
-    </button>
-  );
-};
+Button.displayName = "Button";