mautourco-components 0.2.5 → 0.2.7

package/src/components/atoms/Illustration/illustrations.ts

@@ -1,116 +1,116 @@
-/**
- * Illustrations disponibles depuis Figma
- * Les images sont servies depuis le serveur MCP Figma (localhost:3845)
- * 
- * Note: Ces URLs sont temporaires et servies par le serveur MCP Figma local.
- * En production, ces images devront être exportées et hébergées séparément.
- */
-
-export interface IllustrationInfo {
-  /** Nom de l'illustration */
-  name: string;
-  /** URL de l'image depuis le serveur MCP Figma */
-  url: string;
-  /** Catégorie de l'illustration */
-  category: 'success' | 'background' | 'error' | 'alert';
-  /** Description de l'illustration */
-  description?: string;
-  /** Dimensions (largeur x hauteur) */
-  dimensions?: { width: number; height: number };
-}
-
-/**
- * Illustrations de succès (Quotation Success)
- */
-export const SUCCESS_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
-  quotationSuccessOption1: {
-    name: 'Quotation Success - Option 1',
-    url: 'http://localhost:3845/assets/undraw_graduation_re_gthn_1', // À remplacer par l'URL réelle
-    category: 'success',
-    description: 'Illustration de succès pour l\'ajout d\'une voiture à une quotation',
-    dimensions: { width: 426, height: 212 },
-  },
-};
-
-/**
- * Illustrations de fond (Background)
- */
-export const BACKGROUND_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
-  bgSun: {
-    name: 'BG_Sun',
-    url: 'http://localhost:3845/assets/8b482904d4764abeaaa5276f661a8bbabd874df2.png',
-    category: 'background',
-    description: 'Illustration de fond - Soleil',
-    dimensions: { width: 316, height: 314 },
-  },
-  bgCocktail: {
-    name: 'BG_Cocktail',
-    url: 'http://localhost:3845/assets/51130ed9197c5d6b4323a7e134aae153aa7cec61.png',
-    category: 'background',
-    description: 'Illustration de fond - Cocktail',
-    dimensions: { width: 624, height: 624 },
-  },
-  bgCoconut: {
-    name: 'BG_Coconut',
-    url: 'http://localhost:3845/assets/40b9073c72d20eed316693d7435c1199b3dbcf0a.png',
-    category: 'background',
-    description: 'Illustration de fond - Coco',
-    dimensions: { width: 624, height: 624 },
-  },
-};
-
-/**
- * Illustrations d'erreur
- */
-export const ERROR_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
-  illustrationError: {
-    name: 'Illustration_Error',
-    url: 'http://localhost:3845/assets/group_46', // À remplacer par l'URL réelle
-    category: 'error',
-    description: 'Illustration d\'erreur - Aucun résultat trouvé',
-    dimensions: { width: 840, height: 463 },
-  },
-  error: {
-    name: 'Error',
-    url: 'http://localhost:3845/assets/undraw_cancel_7zdh_1', // À remplacer par l'URL réelle
-    category: 'error',
-    description: 'Illustration d\'erreur - Action bloquée',
-    dimensions: { width: 350, height: 350 },
-  },
-};
-
-/**
- * Illustrations d'alerte
- */
-export const ALERT_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
-  illustrationAlert: {
-    name: 'Illustration_Alert',
-    url: 'http://localhost:3845/assets/group_47', // À remplacer par l'URL réelle
-    category: 'alert',
-    description: 'Illustration d\'alerte - Capacité dépassée',
-    dimensions: { width: 426, height: 358 },
-  },
-};
-
-/**
- * Toutes les illustrations regroupées par catégorie
- */
-export const ALL_ILLUSTRATIONS = {
-  success: SUCCESS_ILLUSTRATIONS,
-  background: BACKGROUND_ILLUSTRATIONS,
-  error: ERROR_ILLUSTRATIONS,
-  alert: ALERT_ILLUSTRATIONS,
-};
-
-/**
- * Helper pour obtenir une illustration par son nom
- */
-export function getIllustration(name: string): IllustrationInfo | undefined {
-  for (const category of Object.values(ALL_ILLUSTRATIONS)) {
-    if (category[name]) {
-      return category[name];
-    }
-  }
-  return undefined;
-}
-
+/**
+ * Illustrations disponibles depuis Figma
+ * Les images sont servies depuis le serveur MCP Figma (localhost:3845)
+ * 
+ * Note: Ces URLs sont temporaires et servies par le serveur MCP Figma local.
+ * En production, ces images devront être exportées et hébergées séparément.
+ */
+
+export interface IllustrationInfo {
+  /** Nom de l'illustration */
+  name: string;
+  /** URL de l'image depuis le serveur MCP Figma */
+  url: string;
+  /** Catégorie de l'illustration */
+  category: 'success' | 'background' | 'error' | 'alert';
+  /** Description de l'illustration */
+  description?: string;
+  /** Dimensions (largeur x hauteur) */
+  dimensions?: { width: number; height: number };
+}
+
+/**
+ * Illustrations de succès (Quotation Success)
+ */
+export const SUCCESS_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
+  quotationSuccessOption1: {
+    name: 'Quotation Success - Option 1',
+    url: 'http://localhost:3845/assets/undraw_graduation_re_gthn_1', // À remplacer par l'URL réelle
+    category: 'success',
+    description: 'Illustration de succès pour l\'ajout d\'une voiture à une quotation',
+    dimensions: { width: 426, height: 212 },
+  },
+};
+
+/**
+ * Illustrations de fond (Background)
+ */
+export const BACKGROUND_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
+  bgSun: {
+    name: 'BG_Sun',
+    url: 'http://localhost:3845/assets/8b482904d4764abeaaa5276f661a8bbabd874df2.png',
+    category: 'background',
+    description: 'Illustration de fond - Soleil',
+    dimensions: { width: 316, height: 314 },
+  },
+  bgCocktail: {
+    name: 'BG_Cocktail',
+    url: 'http://localhost:3845/assets/51130ed9197c5d6b4323a7e134aae153aa7cec61.png',
+    category: 'background',
+    description: 'Illustration de fond - Cocktail',
+    dimensions: { width: 624, height: 624 },
+  },
+  bgCoconut: {
+    name: 'BG_Coconut',
+    url: 'http://localhost:3845/assets/40b9073c72d20eed316693d7435c1199b3dbcf0a.png',
+    category: 'background',
+    description: 'Illustration de fond - Coco',
+    dimensions: { width: 624, height: 624 },
+  },
+};
+
+/**
+ * Illustrations d'erreur
+ */
+export const ERROR_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
+  illustrationError: {
+    name: 'Illustration_Error',
+    url: 'http://localhost:3845/assets/group_46', // À remplacer par l'URL réelle
+    category: 'error',
+    description: 'Illustration d\'erreur - Aucun résultat trouvé',
+    dimensions: { width: 840, height: 463 },
+  },
+  error: {
+    name: 'Error',
+    url: 'http://localhost:3845/assets/undraw_cancel_7zdh_1', // À remplacer par l'URL réelle
+    category: 'error',
+    description: 'Illustration d\'erreur - Action bloquée',
+    dimensions: { width: 350, height: 350 },
+  },
+};
+
+/**
+ * Illustrations d'alerte
+ */
+export const ALERT_ILLUSTRATIONS: Record<string, IllustrationInfo> = {
+  illustrationAlert: {
+    name: 'Illustration_Alert',
+    url: 'http://localhost:3845/assets/group_47', // À remplacer par l'URL réelle
+    category: 'alert',
+    description: 'Illustration d\'alerte - Capacité dépassée',
+    dimensions: { width: 426, height: 358 },
+  },
+};
+
+/**
+ * Toutes les illustrations regroupées par catégorie
+ */
+export const ALL_ILLUSTRATIONS = {
+  success: SUCCESS_ILLUSTRATIONS,
+  background: BACKGROUND_ILLUSTRATIONS,
+  error: ERROR_ILLUSTRATIONS,
+  alert: ALERT_ILLUSTRATIONS,
+};
+
+/**
+ * Helper pour obtenir une illustration par son nom
+ */
+export function getIllustration(name: string): IllustrationInfo | undefined {
+  for (const category of Object.values(ALL_ILLUSTRATIONS)) {
+    if (category[name]) {
+      return category[name];
+    }
+  }
+  return undefined;
+}
+

package/src/components/atoms/Inputs/DropdownInput/DropdownInput.tsx

@@ -1,96 +1,96 @@
-import React, { useState } from 'react';
-import Icon from '../../Icon/Icon';
-import Spinner from '../../Spinner/Spinner';
-
-interface DropdownInputProps {
-  placeholder?: string;
-  value?: string;
-  state?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
-  onClick?: () => void;
-  className?: string;
-  options?: string[];
-  onSelect?: (option: string) => void;
-}
-
-const DropdownInput: React.FC<DropdownInputProps> = ({
-  placeholder = 'Select item name',
-  value,
-  state = 'default',
-  onClick,
-  className = '',
-  options = [],
-  onSelect
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const handleClick = () => {
-    if (state === 'disabled' || state === 'loading') return;
-    
-    setIsOpen(!isOpen);
-    onClick?.();
-  };
-
-  const handleOptionSelect = (option: string) => {
-    onSelect?.(option);
-    setIsOpen(false);
-  };
-
-  const getStateClasses = () => {
-    const baseClasses = isOpen ? 'dropdown-input--open' : '';
-    switch (state) {
-      case 'loading':
-        return `${baseClasses} dropdown-input--loading`;
-      case 'selected':
-        return `${baseClasses} dropdown-input--selected`;
-      case 'error':
-        return `${baseClasses} dropdown-input--error`;
-      case 'disabled':
-        return `${baseClasses} dropdown-input--disabled`;
-      default:
-        return `${baseClasses} dropdown-input--default`;
-    }
-  };
-
-  const getIcon = () => {
-    if (state === 'loading') {
-      return <Spinner size="sm" className="dropdown-input__icon" />;
-    }
-    
-    return (
-      <Icon 
-        name={isOpen ? 'chevron-up' : 'chevron-down'} 
-        size="sm" 
-        className="dropdown-input__icon dropdown-input__icon--chevron" 
-      />
-    );
-  };
-
-  const displayText = state === 'loading' ? 'Loading...' : (value || placeholder);
-
-  return (
-    <div className={`dropdown-container ${className}`}>
-      <div 
-        className={`dropdown-input ${getStateClasses()}`}
-        onClick={handleClick}
-      >
-        <span className="dropdown-input__text">{displayText}</span>
-        {getIcon()}
-      </div>
-      
-      {isOpen && options.length > 0 && (
-        <div className="dropdown-menu">
-          {options.map((option, index) => (
-            <div
-              key={index}
-              className="dropdown-option"
-              onClick={() => handleOptionSelect(option)}
-            >
-              {option}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DropdownInput;
+import React, { useState } from 'react';
+import Icon from '../../Icon/Icon';
+import Spinner from '../../Spinner/Spinner';
+
+interface DropdownInputProps {
+  placeholder?: string;
+  value?: string;
+  state?: 'default' | 'loading' | 'selected' | 'error' | 'disabled';
+  onClick?: () => void;
+  className?: string;
+  options?: string[];
+  onSelect?: (option: string) => void;
+}
+
+const DropdownInput: React.FC<DropdownInputProps> = ({
+  placeholder = 'Select item name',
+  value,
+  state = 'default',
+  onClick,
+  className = '',
+  options = [],
+  onSelect
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleClick = () => {
+    if (state === 'disabled' || state === 'loading') return;
+    
+    setIsOpen(!isOpen);
+    onClick?.();
+  };
+
+  const handleOptionSelect = (option: string) => {
+    onSelect?.(option);
+    setIsOpen(false);
+  };
+
+  const getStateClasses = () => {
+    const baseClasses = isOpen ? 'dropdown-input--open' : '';
+    switch (state) {
+      case 'loading':
+        return `${baseClasses} dropdown-input--loading`;
+      case 'selected':
+        return `${baseClasses} dropdown-input--selected`;
+      case 'error':
+        return `${baseClasses} dropdown-input--error`;
+      case 'disabled':
+        return `${baseClasses} dropdown-input--disabled`;
+      default:
+        return `${baseClasses} dropdown-input--default`;
+    }
+  };
+
+  const getIcon = () => {
+    if (state === 'loading') {
+      return <Spinner size="sm" className="dropdown-input__icon" />;
+    }
+    
+    return (
+      <Icon 
+        name={isOpen ? 'chevron-up' : 'chevron-down'} 
+        size="sm" 
+        className="dropdown-input__icon dropdown-input__icon--chevron" 
+      />
+    );
+  };
+
+  const displayText = state === 'loading' ? 'Loading...' : (value || placeholder);
+
+  return (
+    <div className={`dropdown-container ${className}`}>
+      <div 
+        className={`dropdown-input ${getStateClasses()}`}
+        onClick={handleClick}
+      >
+        <span className="dropdown-input__text">{displayText}</span>
+        {getIcon()}
+      </div>
+      
+      {isOpen && options.length > 0 && (
+        <div className="dropdown-menu">
+          {options.map((option, index) => (
+            <div
+              key={index}
+              className="dropdown-option"
+              onClick={() => handleOptionSelect(option)}
+            >
+              {option}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DropdownInput;

package/src/components/atoms/Inputs/Textarea/Textarea.tsx

@@ -1,51 +1,51 @@
-import React from 'react';
-
-interface TextareaProps {
-  variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
-  placeholder?: string;
-  value?: string;
-  disabled?: boolean;
-  rows?: number;
-  className?: string;
-  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
-}
-
-const Textarea: React.FC<TextareaProps> = ({
-  variant = 'default',
-  placeholder = 'Enter your text...',
-  value,
-  disabled = false,
-  rows = 4,
-  className = '',
-  onChange,
-  onFocus,
-  onBlur,
-}) => {
-  const baseClasses = 'input-field';
-  const variantClasses = {
-    default: 'input-field--default',
-    focus: 'input-field--focus',
-    success: 'input-field--success',
-    error: 'input-field--error',
-    disabled: 'input-field--disabled'
-  };
-
-  const textareaClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
-
-  return (
-    <textarea
-      className={textareaClasses}
-      placeholder={placeholder}
-      value={value}
-      disabled={disabled || variant === 'disabled'}
-      rows={rows}
-      onChange={onChange}
-      onFocus={onFocus}
-      onBlur={onBlur}
-    />
-  );
-};
-
-export default Textarea;
+import React from 'react';
+
+interface TextareaProps {
+  variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  rows?: number;
+  className?: string;
+  onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+}
+
+const Textarea: React.FC<TextareaProps> = ({
+  variant = 'default',
+  placeholder = 'Enter your text...',
+  value,
+  disabled = false,
+  rows = 4,
+  className = '',
+  onChange,
+  onFocus,
+  onBlur,
+}) => {
+  const baseClasses = 'input-field';
+  const variantClasses = {
+    default: 'input-field--default',
+    focus: 'input-field--focus',
+    success: 'input-field--success',
+    error: 'input-field--error',
+    disabled: 'input-field--disabled'
+  };
+
+  const textareaClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
+
+  return (
+    <textarea
+      className={textareaClasses}
+      placeholder={placeholder}
+      value={value}
+      disabled={disabled || variant === 'disabled'}
+      rows={rows}
+      onChange={onChange}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    />
+  );
+};
+
+export default Textarea;