mautourco-components 0.2.4 → 0.2.7

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

@@ -1,168 +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>
-  );
-};
+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/RatingStar/RatingStar.tsx

@@ -1,114 +1,114 @@
-import React from 'react';
-
-export interface RatingStarProps {
-  /**
-   * Current value (0–max). For display-only, you can omit onChange.
-   */
-  value: number;
-  /**
-   * Maximum number of stars.
-   */
-  max?: number;
-  /**
-   * Whether the component is interactive (hover / click).
-   */
-  interactive?: boolean;
-  /**
-   * Called when the user selects a new rating (1–max).
-   */
-  onChange?: (value: number) => void;
-  /**
-   * Whether the control is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Additional CSS classes for the root container.
-   */
-  className?: string;
-  /**
-   * Accessible label describing the rating.
-   */
-  'aria-label'?: string;
-}
-
-/**
- * Star Rating atom
- *
- * Displays a row of stars from 0 to `max` (default: 5),
- * using tokens from Components/rating-star.
- * Can be used in read-only mode or interactive mode.
- */
-export const RatingStar: React.FC<RatingStarProps> = ({
-  value,
-  max = 5,
-  interactive = false,
-  onChange,
-  disabled = false,
-  className = '',
-  'aria-label': ariaLabel,
-}) => {
-  const handleClick = (index: number) => {
-    if (!interactive || disabled || !onChange) return;
-    onChange(index + 1);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (!interactive || disabled || !onChange) return;
-
-    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
-      event.preventDefault();
-      onChange(Math.min(max, value + 1));
-    }
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
-      event.preventDefault();
-      onChange(Math.max(0, value - 1));
-    }
-  };
-
-  const stars = Array.from({ length: max }, (_, index) => {
-    const isSelected = index < value;
-    const starClass = [
-      'rating-star__icon',
-      isSelected ? 'rating-star__icon--selected' : 'rating-star__icon--default',
-    ]
-      .filter(Boolean)
-      .join(' ');
-
-    return (
-      <button
-        key={index}
-        type="button"
-        className="rating-star__button"
-        onClick={() => handleClick(index)}
-        disabled={disabled || !interactive}
-        aria-hidden={!interactive}
-        tabIndex={interactive ? 0 : -1}
-      >
-        <span className={starClass}>★</span>
-      </button>
-    );
-  });
-
-  const containerClasses = ['rating-star', interactive ? 'rating-star--interactive' : '', className]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <div
-      className={containerClasses}
-      role={interactive ? 'slider' : 'img'}
-      aria-valuemin={interactive ? 0 : undefined}
-      aria-valuemax={interactive ? max : undefined}
-      aria-valuenow={interactive ? value : undefined}
-      aria-label={ariaLabel}
-      tabIndex={interactive && !disabled ? 0 : -1}
-      onKeyDown={handleKeyDown}
-    >
-      {stars}
-    </div>
-  );
-};
-
-export default RatingStar;
-
-
+import React from 'react';
+
+export interface RatingStarProps {
+  /**
+   * Current value (0–max). For display-only, you can omit onChange.
+   */
+  value: number;
+  /**
+   * Maximum number of stars.
+   */
+  max?: number;
+  /**
+   * Whether the component is interactive (hover / click).
+   */
+  interactive?: boolean;
+  /**
+   * Called when the user selects a new rating (1–max).
+   */
+  onChange?: (value: number) => void;
+  /**
+   * Whether the control is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Additional CSS classes for the root container.
+   */
+  className?: string;
+  /**
+   * Accessible label describing the rating.
+   */
+  'aria-label'?: string;
+}
+
+/**
+ * Star Rating atom
+ *
+ * Displays a row of stars from 0 to `max` (default: 5),
+ * using tokens from Components/rating-star.
+ * Can be used in read-only mode or interactive mode.
+ */
+export const RatingStar: React.FC<RatingStarProps> = ({
+  value,
+  max = 5,
+  interactive = false,
+  onChange,
+  disabled = false,
+  className = '',
+  'aria-label': ariaLabel,
+}) => {
+  const handleClick = (index: number) => {
+    if (!interactive || disabled || !onChange) return;
+    onChange(index + 1);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!interactive || disabled || !onChange) return;
+
+    if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      onChange(Math.min(max, value + 1));
+    }
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      onChange(Math.max(0, value - 1));
+    }
+  };
+
+  const stars = Array.from({ length: max }, (_, index) => {
+    const isSelected = index < value;
+    const starClass = [
+      'rating-star__icon',
+      isSelected ? 'rating-star__icon--selected' : 'rating-star__icon--default',
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return (
+      <button
+        key={index}
+        type="button"
+        className="rating-star__button"
+        onClick={() => handleClick(index)}
+        disabled={disabled || !interactive}
+        aria-hidden={!interactive}
+        tabIndex={interactive ? 0 : -1}
+      >
+        <span className={starClass}>★</span>
+      </button>
+    );
+  });
+
+  const containerClasses = ['rating-star', interactive ? 'rating-star--interactive' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div
+      className={containerClasses}
+      role={interactive ? 'slider' : 'img'}
+      aria-valuemin={interactive ? 0 : undefined}
+      aria-valuemax={interactive ? max : undefined}
+      aria-valuenow={interactive ? value : undefined}
+      aria-label={ariaLabel}
+      tabIndex={interactive && !disabled ? 0 : -1}
+      onKeyDown={handleKeyDown}
+    >
+      {stars}
+    </div>
+  );
+};
+
+export default RatingStar;
+
+