mautourco-components 0.1.2 → 0.2.0

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

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface ShipIconProps {
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  className?: string;
+  color?: string;
+}
+
+const ShipIcon: React.FC<ShipIconProps> = ({
+  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
+      className={classes}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M11.9159 4.66638C11.9158 4.51179 11.8543 4.36359 11.745 4.25427C11.6356 4.14498 11.4875 4.08337 11.3329 4.08337H4.66586C4.51127 4.08346 4.36307 4.14495 4.25375 4.25427C4.14443 4.36359 4.08294 4.51179 4.08285 4.66638V7.5863L7.15316 6.22205H7.15414C7.42075 6.10366 7.70904 6.04236 7.99984 6.04236C8.29067 6.0424 8.57894 6.1036 8.84555 6.22205L11.9159 7.5863V4.66638ZM7.24984 9.33337V7.82068L2.75961 9.8158C2.82788 11.1514 3.27724 12.4381 4.05453 13.5238C4.09858 13.4896 4.14754 13.4549 4.19809 13.4144C4.39883 13.2538 4.66983 13.033 5.0184 12.8656C5.38322 12.6905 5.80735 12.5834 6.33285 12.5834C6.87026 12.5834 7.29979 12.6885 7.66781 12.8666C8.02062 13.0373 8.28638 13.2634 8.47934 13.4242C8.68632 13.5967 8.82043 13.7043 8.98422 13.7836C9.13281 13.8555 9.33681 13.9163 9.66586 13.9164C9.97342 13.9164 10.1749 13.8574 10.3309 13.7826C10.5028 13.7001 10.6483 13.587 10.8641 13.4144C11.0649 13.2538 11.3366 13.033 11.6854 12.8656C11.915 12.7554 12.1679 12.6719 12.4549 12.6254C12.9105 11.7536 13.1766 10.7959 13.2362 9.81482L8.74984 7.82068V9.33337C8.74984 9.74748 8.41391 10.0832 7.99984 10.0834C7.58563 10.0834 7.24984 9.74759 7.24984 9.33337ZM13.4159 8.25232L14.3045 8.64783L14.4002 8.69958C14.6138 8.83453 14.7478 9.07003 14.7498 9.32751C14.7587 10.5081 14.5199 11.6734 14.0555 12.7504C14.1526 12.7845 14.2456 12.8234 14.3348 12.8666C14.6875 13.0373 14.9534 13.2634 15.1463 13.4242C15.4644 13.6894 15.5071 14.1617 15.242 14.4799C14.977 14.7979 14.5046 14.8414 14.1864 14.5765C13.9795 14.4041 13.8452 14.2964 13.6815 14.2172C13.5329 14.1453 13.3289 14.0834 12.9998 14.0834C12.6921 14.0834 12.4908 14.1433 12.3348 14.2181C12.1629 14.3007 12.0173 14.4128 11.8016 14.5853C11.6008 14.746 11.3291 14.9667 10.9803 15.1342C10.6155 15.3093 10.1914 15.4164 9.66586 15.4164C9.12859 15.4163 8.69885 15.3112 8.3309 15.1332C7.97834 14.9625 7.71226 14.7373 7.51938 14.5765C7.31239 14.404 7.17828 14.2964 7.01449 14.2172C6.86585 14.1452 6.66209 14.0834 6.33285 14.0834C6.02502 14.0834 5.82383 14.1433 5.66781 14.2181C5.4959 14.3007 5.35034 14.4127 5.13461 14.5853C4.93379 14.746 4.66216 14.9667 4.31332 15.1342C3.9486 15.3092 3.52514 15.4163 2.99984 15.4164C2.4625 15.4164 2.03287 15.3112 1.66488 15.1332C1.4004 15.0052 1.18428 14.8467 1.01156 14.7074L0.852383 14.5765L0.796719 14.5238C0.530729 14.2522 0.508067 13.8182 0.75668 13.5199C1.00526 13.2216 1.43668 13.1648 1.7518 13.3773L1.81332 13.4242L2.08188 13.6381C2.16176 13.6965 2.23626 13.7439 2.3182 13.7836C2.36307 13.8053 2.4137 13.8238 2.47055 13.8422C1.65272 12.4872 1.22378 10.922 1.24984 9.32068C1.25478 9.02894 1.4285 8.76634 1.69516 8.64783L2.58285 8.2533V4.66638C2.58294 4.11396 2.80258 3.58435 3.1932 3.19373C3.58383 2.8031 4.11344 2.58346 4.66586 2.58337H7.24984V1.33337C7.24984 0.91916 7.58563 0.583374 7.99984 0.583374C8.41391 0.58355 8.74984 0.919269 8.74984 1.33337V2.58337H11.3329C11.8853 2.58337 12.4148 2.80313 12.8055 3.19373C13.1961 3.58435 13.4158 4.11396 13.4159 4.66638V8.25232Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default ShipIcon;

package/src/components/atoms/Illustration/Illustration.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+export interface IllustrationProps
+  extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /**
+   * Source of the illustration.
+   * This will typically be an imported SVG/PNG from the assets directory.
+   */
+  src: string;
+}
+
+/**
+ * Generic Illustration atom.
+ * It focuses on consistent rendering (responsive, block-level) while
+ * letting the caller control which asset is used.
+ */
+export const Illustration: React.FC<IllustrationProps> = ({
+  src,
+  className = '',
+  ...rest
+}) => {
+  const classes = ['illustration', className].filter(Boolean).join(' ');
+
+  return <img src={src} className={classes} {...rest} />;
+};
+
+
+

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

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

package/src/components/atoms/RatingStar/RatingStar.tsx

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

package/src/components/atoms/SegmentedButton/SegmentedButton.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+
+export interface SegmentedButtonOption {
+  /** Valeur de l'option */
+  value: string;
+  /** Libellé affiché */
+  label: string;
+  /** État désactivé */
+  disabled?: boolean;
+}
+
+export interface SegmentedButtonProps {
+  /** Options du bouton segmenté */
+  options: SegmentedButtonOption[];
+  /** Valeur sélectionnée */
+  value: string;
+  /** Handler de changement */
+  onChange: (value: string) => void;
+  /** Orientation du bouton segmenté */
+  orientation?: 'horizontal' | 'vertical';
+  /** État désactivé pour tout le groupe */
+  disabled?: boolean;
+  /** Classes CSS supplémentaires */
+  className?: string;
+  /** Nom du groupe pour l'accessibilité */
+  name?: string;
+}
+
+const SegmentedButton: React.FC<SegmentedButtonProps> = ({
+  options,
+  value,
+  onChange,
+  orientation = 'horizontal',
+  disabled = false,
+  className = '',
+  name,
+}) => {
+  const containerClasses = [
+    'segmented-button',
+    `segmented-button--${orientation}`,
+    disabled && 'segmented-button--disabled',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const handleClick = (optionValue: string, optionDisabled?: boolean) => {
+    if (!disabled && !optionDisabled && optionValue !== value) {
+      onChange(optionValue);
+    }
+  };
+
+  const getButtonClasses = (option: SegmentedButtonOption, index: number) => {
+    const isSelected = option.value === value;
+    const isFirst = index === 0;
+    const isLast = index === options.length - 1;
+    const isDisabled = disabled || option.disabled;
+
+    return [
+      'segmented-button__item',
+      isSelected && 'segmented-button__item--selected',
+      isFirst && 'segmented-button__item--first',
+      isLast && 'segmented-button__item--last',
+      isDisabled && 'segmented-button__item--disabled',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  };
+
+  return (
+    <div className={containerClasses} role="group" aria-label={name}>
+      {options.map((option, index) => {
+        const isSelected = option.value === value;
+        const isDisabled = disabled || option.disabled;
+        
+        return (
+          <button
+            key={option.value}
+            type="button"
+            className={getButtonClasses(option, index)}
+            onClick={() => handleClick(option.value, option.disabled)}
+            disabled={isDisabled}
+            aria-pressed={isSelected}
+            aria-label={option.label}
+          >
+            <span className="segmented-button__label">{option.label}</span>
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default SegmentedButton;

package/src/components/atoms/Slider/Slider.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+export type SliderVariant = 'full' | 'half';
+
+export interface SliderProps {
+  /**
+   * Current value of the slider (controlled mode).
+   */
+  value: number;
+  /**
+   * Minimum value.
+   */
+  min?: number;
+  /**
+   * Maximum value.
+   */
+  max?: number;
+  /**
+   * Step between values.
+   */
+  step?: number;
+  /**
+   * Called when the value changes.
+   */
+  onChange: (value: number) => void;
+  /**
+   * Visual variant (from Figma: Type=Full | Type=Half).
+   */
+  variant?: SliderVariant;
+  /**
+   * Whether the slider is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Accessible label (aria-label) if no visible label is provided.
+   */
+  'aria-label'?: string;
+  /**
+   * Optional id to link with an external label.
+   */
+  id?: string;
+  /**
+   * Additional CSS classes.
+   */
+  className?: string;
+}
+
+/**
+ * Slider atom.
+ *
+ * Represents a single horizontal slider control (rail + thumb),
+ * matching the Figma Slider component (Full / Half variants).
+ */
+export const Slider: React.FC<SliderProps> = ({
+  value,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  variant = 'full',
+  disabled = false,
+  id,
+  className = '',
+  'aria-label': ariaLabel,
+}) => {
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const next = Number(event.target.value);
+    onChange(next);
+  };
+
+  const classes = ['slider', `slider--${variant}`, disabled ? 'slider--disabled' : '', className]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className="slider-container">
+      <input
+        id={id}
+        type="range"
+        className={classes}
+        min={min}
+        max={max}
+        step={step}
+        value={value}
+        onChange={handleChange}
+        disabled={disabled}
+        aria-label={ariaLabel}
+      />
+    </div>
+  );
+};
+
+export default Slider;
+
+

package/src/components/molecules/Calendar/CalendarInput.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import Icon from "../../atoms/Icon/Icon";
+
+export interface CalendarInputProps {
+  /** Placeholder text */
+  placeholder?: string;
+  /** Selected date value (formatted as string) */
+  value?: string;
+  /** State of the input: default, active, typing, disabled, success, error */
+  state?: "default" | "active" | "typing" | "disabled" | "success" | "error";
+  /** Helper/support text below input */
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Callback when the input is clicked */
+  onClick?: () => void;
+  /** Callback when calendar icon is clicked */
+  onCalendarClick?: () => void;
+  /** Callback when input value changes */
+  onChange?: (value: string) => void;
+  /** Callback when input gains focus */
+  onFocus?: () => void;
+  /** Callback when input loses focus */
+  onBlur?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+  /** Whether the calendar icon has full bg*/
+  iconBGFull?: boolean;
+  /** Position of the calendar icon: left or right */
+  iconPosition?: "left" | "right";
+  /** Show chevron on the right when icon is on the left */
+  showChevron?: boolean;
+  /** Whether the calendar popover is open */
+  isOpen?: boolean;
+}
+
+const CalendarInput: React.FC<CalendarInputProps> = ({
+  placeholder = "Select date",
+  value = "",
+  state = "default",
+  disabled = false,
+  onClick,
+  onCalendarClick,
+  onChange,
+  onFocus,
+  onBlur,
+  className = "",
+  iconBGFull = true,
+  iconPosition = "right",
+  showChevron = false,
+  isOpen = false,
+}) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const [localValue, setLocalValue] = useState(value);
+  const [isTyping, setIsTyping] = useState(false);
+
+  const finalState = disabled ? "disabled" : state;
+  const displayState =
+    isFocused && isTyping ? "typing" : isFocused ? "active" : finalState;
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalValue(newValue);
+    setIsTyping(true);
+    onChange?.(newValue);
+  };
+
+  const handleFocus = () => {
+    setIsFocused(true);
+    onFocus?.();
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+    setIsTyping(false);
+    onBlur?.();
+  };
+
+  const handleCalendarClick = () => {
+    if (!disabled) {
+      onCalendarClick?.();
+    }
+  };
+
+  // keep localValue in sync when parent changes `value` (controlled)
+  React.useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+
+  const iconButton = (
+    <button
+      type="button"
+      className={`calendar-input__icon-button ${iconBGFull ? " calendar-input__icon-button--full-bg" : ""} calendar-input__icon-button--${iconPosition}`}
+      onClick={handleCalendarClick}
+      disabled={disabled}
+      aria-label="Open calendar picker"
+      title="Select date"
+    >
+      <Icon name="calendar" size="sm" className="calendar-input__icon" />
+    </button>
+  );
+
+  return (
+    <div
+      className={`calendar-input calendar-input--${displayState} calendar-input--icon-${iconPosition} ${className}`.trim()}
+      data-node-id="3425:11289"
+      onClick={onClick}
+    >
+      {iconPosition === "left" && iconButton}
+      
+      <div className="calendar-input__input-wrapper">
+        <input
+          type="text"
+          className="calendar-input__field"
+          placeholder={placeholder}
+          value={localValue || placeholder}
+          disabled={disabled}
+          onChange={handleInputChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          readOnly={true}
+          aria-label={"Select date"}
+        />
+        {iconPosition === "left" && showChevron && (
+          <div className={`calendar-input__chevron ${isOpen ? 'calendar-input__chevron--open' : ''}`}>
+            <Icon name={"chevron-down"} size="sm" />
+          </div>
+        )}
+      </div>
+
+      {iconPosition === "right" && iconButton}
+    </div>
+  );
+};
+
+export default CalendarInput;