mautourco-components 0.1.1

package/src/components/atoms/Icon/icons/Youtube.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface YouTubeIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const YouTubeIcon: React.FC<YouTubeIconProps> = ({
+  size = "md",
+  className = "",
+  color,
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case "xs":
+        return "w-3 h-3";
+      case "sm":
+        return "w-4 h-4";
+      case "md":
+        return "w-5 h-5";
+      case "lg":
+        return "w-6 h-6";
+      case "xl":
+        return "w-8 h-8";
+      default:
+        return "w-5 h-5";
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const colorClass = color ? `text-${color}` : "text-current";
+  const classes = `${sizeClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={classes}
+    >
+      <path
+        d="M22.9024 6.50346C22.6407 5.51804 21.8696 4.74196 20.8906 4.47858C19.116 4 12.0001 4 12.0001 4C12.0001 4 4.88427 4 3.10965 4.47858C2.13061 4.742 1.35952 5.51804 1.09781 6.50346C0.622314 8.28958 0.622314 12.0162 0.622314 12.0162C0.622314 12.0162 0.622314 15.7427 1.09781 17.5289C1.35952 18.5143 2.13061 19.258 3.10965 19.5214C4.88427 20 12.0001 20 12.0001 20C12.0001 20 19.1159 20 20.8906 19.5214C21.8696 19.258 22.6407 18.5143 22.9024 17.5289C23.3779 15.7427 23.3779 12.0162 23.3779 12.0162C23.3779 12.0162 23.3779 8.28958 22.9024 6.50346ZM9.67282 15.3996V8.63271L15.6203 12.0162L9.67282 15.3996Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default YouTubeIcon;

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

@@ -0,0 +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;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import Icon from '../../Icon/Icon';
+
+interface InputProps {
+  variant?: 'default' | 'focus' | 'success' | 'error' | 'disabled';
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  className?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  icon?: 'search' | 'close' | 'settings' | 'user';
+  iconPosition?: 'leading' | 'trailing';
+}
+
+const Input: React.FC<InputProps> = ({
+  variant = 'default',
+  placeholder = 'Input text',
+  value,
+  disabled = false,
+  className = '',
+  onChange,
+  onFocus,
+  onBlur,
+  icon,
+  iconPosition = 'trailing',
+}) => {
+  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 inputClasses = `${baseClasses} ${variantClasses[variant]} ${icon ? `input-field--with-icon input-field--icon-${iconPosition}` : ''} ${className}`.trim();
+
+  return (
+    <div className={`input-wrapper ${icon ? 'input-wrapper--with-icon' : ''}`.trim()}>
+      {icon && iconPosition === 'leading' && (
+        <span className="input-icon input-icon--leading">
+          <Icon name={icon} size="sm" />
+        </span>
+      )}
+      <input
+        type="text"
+        className={inputClasses}
+        placeholder={placeholder}
+        value={value}
+        disabled={disabled || variant === 'disabled'}
+        onChange={onChange}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+      {icon && iconPosition === 'trailing' && (
+        <span className="input-icon input-icon--trailing">
+          <Icon name={icon} size="sm" />
+        </span>
+      )}
+    </div>
+  );
+};
+
+export default Input;

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

@@ -0,0 +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;

package/src/components/atoms/Link/Link.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { Text } from '../Typography/Typography';
+
+export interface LinkProps {
+  /**
+   * Le texte du lien
+   */
+  children: React.ReactNode;
+  /**
+   * L'URL du lien
+   */
+  href?: string;
+  /**
+   * Fonction appelée lors du clic
+   */
+  onClick?: () => void;
+  /**
+   * État du lien
+   */
+  state?: 'default' | 'hover' | 'visited' | 'focused';
+  /**
+   * Thème du lien
+   */
+  theme?: 'light' | 'dark' | 'teal';
+  /**
+   * Si le lien est associé à un radio button
+   */
+  withRadio?: boolean;
+  /**
+   * Si le radio button est sélectionné
+   */
+  radioChecked?: boolean;
+  /**
+   * Fonction appelée lors du clic sur le radio button
+   */
+  onRadioChange?: (checked: boolean) => void;
+  /**
+   * Classes CSS supplémentaires
+   */
+  className?: string;
+  /**
+   * Si le lien est désactivé
+   */
+  disabled?: boolean;
+}
+
+export const Link: React.FC<LinkProps> = ({
+  children,
+  href,
+  onClick,
+  state = 'default',
+  theme = 'light',
+  withRadio = false,
+  radioChecked = false,
+  onRadioChange,
+  className = '',
+  disabled = false,
+}) => {
+  const handleClick = (e: React.MouseEvent) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.();
+  };
+
+  const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    onRadioChange?.(e.target.checked);
+  };
+
+  const getThemeClasses = () => {
+    const baseClasses = 'inline-flex items-center gap-3 transition-all duration-200';
+    
+    switch (theme) {
+      case 'dark':
+        return `${baseClasses} text-white`;
+      case 'teal':
+        return `${baseClasses} text-teal-600`;
+      default: // light
+        return `${baseClasses} text-gray-700`;
+    }
+  };
+
+  const getStateClasses = () => {
+    if (disabled) {
+      return 'opacity-50 cursor-not-allowed';
+    }
+
+    switch (state) {
+      case 'hover':
+        return 'hover:opacity-80';
+      case 'visited':
+        return theme === 'teal' ? 'text-cyan-400' : 'text-purple-600';
+      case 'focused':
+        return 'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-current';
+      default:
+        return '';
+    }
+  };
+
+  const getRadioClasses = () => {
+    const baseClasses = 'w-5 h-5 border-2 rounded-sm transition-all duration-200';
+    
+    if (disabled) {
+      return `${baseClasses} border-gray-200 bg-gray-100`;
+    }
+
+    switch (theme) {
+      case 'dark':
+        return `${baseClasses} border-white ${radioChecked ? 'bg-transparent' : 'bg-transparent'}`;
+      case 'teal':
+        return `${baseClasses} border-teal-600 ${radioChecked ? 'bg-transparent' : 'bg-transparent'}`;
+      default: // light
+        return `${baseClasses} border-gray-400 ${radioChecked ? 'bg-transparent' : 'bg-transparent'}`;
+    }
+  };
+
+  const linkContent = (
+    <Text
+      as="span"
+      className={`underline ${getThemeClasses()} ${getStateClasses()} ${className}`}
+      onClick={handleClick}
+    >
+      {children}
+    </Text>
+  );
+
+  if (withRadio) {
+    return (
+      <label className="inline-flex items-center gap-3 cursor-pointer">
+        <input
+          type="radio"
+          checked={radioChecked}
+          onChange={handleRadioChange}
+          disabled={disabled}
+          className={getRadioClasses()}
+          aria-label={`Sélectionner ${children}`}
+        />
+        {linkContent}
+      </label>
+    );
+  }
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        className={`${getThemeClasses()} ${getStateClasses()} ${className}`}
+        onClick={handleClick}
+        aria-disabled={disabled}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      className={`${getThemeClasses()} ${getStateClasses()} ${className}`}
+      onClick={handleClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+};

package/src/components/atoms/SelectedValue/SelectedValue.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Icon from '../Icon/Icon';
+import { Text } from '../Typography/Typography';
+
+interface SelectedValueProps {
+  value: string;
+  onRemove?: () => void;
+  className?: string;
+  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: 'xs' | 'sm' | 'md' | 'lg';
+  variant?: 'filled' | 'text';
+}
+
+const SelectedValue: React.FC<SelectedValueProps> = ({
+  value,
+  onRemove,
+  className = '',
+  iconSize = 'xs',
+  size = 'md',
+  variant = 'filled',
+}) => {
+  const handleRemove = (event: React.MouseEvent) => {
+    event.stopPropagation();
+    if (onRemove) {
+      onRemove();
+    }
+  };
+
+  const classes = `selected-value selected-value--${size} selected-value--${variant} ${className}`.trim();
+
+  const getTextSize = () => {
+    return size; // Utilise directement la taille passée en prop
+  };
+
+  return (
+    <div className={classes}>
+      <Text 
+        size={getTextSize() as any} 
+        variant="medium" 
+        leading="4" 
+        className="selected-value__text"
+      >
+        {value}
+      </Text>
+      {variant !== 'text' && onRemove && (
+        <button
+          type="button"
+          className="selected-value__remove"
+          onClick={handleRemove}
+          aria-label={`Remove ${value}`}
+        >
+          <Icon name="close" size={iconSize} className="selected-value__remove-icon" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+export default SelectedValue;

package/src/components/atoms/Spinner/Spinner.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+interface SpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  color?: string;
+  speed?: 'slow' | 'normal' | 'fast';
+}
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size = 'md',
+  className = '',
+  color,
+  speed = 'normal'
+}) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'xs': return 'w-3 h-3';
+      case 'sm': return 'w-4 h-4';
+      case 'md': return 'w-5 h-5';
+      case 'lg': return 'w-6 h-6';
+      case 'xl': return 'w-8 h-8';
+      default: return 'w-5 h-5';
+    }
+  };
+
+  const getSpeedClasses = () => {
+    switch (speed) {
+      case 'slow': return 'animate-spin-slow';
+      case 'fast': return 'animate-spin-fast';
+      default: return 'animate-spin';
+    }
+  };
+
+  const sizeClasses = getSizeClasses();
+  const speedClasses = getSpeedClasses();
+  const colorClass = color ? `text-${color}` : 'text-current';
+  const classes = `${sizeClasses} ${speedClasses} ${colorClass} ${className}`;
+
+  return (
+    <svg 
+      className={classes} 
+      viewBox="0 0 24 24" 
+      fill="none" 
+      stroke="currentColor" 
+      strokeWidth="2" 
+      strokeLinecap="round" 
+      strokeLinejoin="round"
+    >
+      <path d="M21 12A9 9 0 1 1 3 12A9 9 0 0 1 21 12Z" strokeOpacity="0.25" />
+      <path d="M21 12A9 9 0 0 0 3 12" />
+    </svg>
+  );
+};
+
+export default Spinner;

package/src/components/atoms/Spinner/variants/ButtonSpinner.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Spinner from '../Spinner';
+
+interface ButtonSpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  variant?: 'primary' | 'secondary' | 'white';
+}
+
+const ButtonSpinner: React.FC<ButtonSpinnerProps> = ({
+  size = 'sm',
+  className = '',
+  variant = 'white'
+}) => {
+  const getVariantClass = () => {
+    switch (variant) {
+      case 'primary':
+        return 'text-white';
+      case 'secondary':
+        return 'text-gray-600';
+      case 'white':
+        return 'text-white';
+      default:
+        return 'text-white';
+    }
+  };
+
+  return (
+    <Spinner 
+      size={size} 
+      speed="fast" 
+      className={`${getVariantClass()} ${className}`}
+    />
+  );
+};
+
+export default ButtonSpinner;

package/src/components/atoms/Spinner/variants/LoadingSpinner.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Spinner from '../Spinner';
+
+interface LoadingSpinnerProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+}
+
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  size = 'md',
+  className = ''
+}) => {
+  return (
+    <Spinner 
+      size={size} 
+      speed="normal" 
+      className={`text-blue-500 ${className}`}
+    />
+  );
+};
+
+export default LoadingSpinner;