@tsiky/components-r19 1.0.0 → 1.1.0

package/src/components/SelectFilter/SelectFilter.stories.tsx

@@ -0,0 +1,321 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import SelectFilter from './SelectFilter';
+import type { SelectFilterProps, SelectOption } from './types';
+
+const mockCountries: SelectOption[] = [
+  { value: 'fr', label: 'France' },
+  { value: 'us', label: 'United States' },
+  { value: 'de', label: 'Germany' },
+  { value: 'it', label: 'Italy' },
+  { value: 'es', label: 'Spain' },
+  { value: 'uk', label: 'United Kingdom' },
+  { value: 'jp', label: 'Japan' },
+  { value: 'ca', label: 'Canada' },
+  { value: 'au', label: 'Australia' },
+  { value: 'br', label: 'Brazil' },
+];
+
+const mockUsers: SelectOption[] = [
+  { value: 1, label: 'John Doe - john@example.com' },
+  { value: 2, label: 'Jane Smith - jane@example.com' },
+  { value: 3, label: 'Bob Johnson - bob@example.com' },
+  { value: 4, label: 'Alice Brown - alice@example.com' },
+  { value: 5, label: 'Charlie Wilson - charlie@example.com' },
+];
+
+const mockLongLabels: SelectOption[] = [
+  { value: 1041, label: 'MEDECINE VASCULAIRE HOSPITALISATION COMPLETE (1041)' },
+  { value: 1042, label: 'CARDIOLOGIE HOSPITALISATION COMPLETE (1042)' },
+  { value: 1043, label: 'CHIRURGIE THORACIQUE ET CARDIO-VASCULAIRE (1043)' },
+  { value: 1044, label: 'NEUROLOGIE HOSPITALISATION COMPLETE (1044)' },
+  { value: 1045, label: 'NEUROCHIRURGIE HOSPITALISATION COMPLETE (1045)' },
+];
+
+type SelectFilterStoryProps = Omit<SelectFilterProps, 'onChange'> & {
+  onChange?: (value: string | number) => void;
+};
+
+const meta: Meta<SelectFilterStoryProps> = {
+  title: 'Components/SelectFilter',
+  component: SelectFilter,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: { type: 'radio' },
+      options: ['sm', 'md', 'lg'],
+    },
+    variant: {
+      control: { type: 'select' },
+      options: ['default', 'outline', 'filled'],
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    loading: {
+      control: { type: 'boolean' },
+    },
+    error: {
+      control: { type: 'boolean' },
+    },
+    width: {
+      control: { type: 'text' },
+      description: 'Classes Tailwind pour la largeur (ex: w-64, w-80, w-full)',
+    },
+  },
+  args: {
+    placeholder: 'Sélectionner une option...',
+    options: mockCountries,
+    width: 'w-80',
+  },
+};
+
+export default meta;
+type Story = StoryObj<SelectFilterStoryProps>;
+
+const SelectWithState = (args: SelectFilterStoryProps) => {
+  const [value, setValue] = useState<string | number>('');
+
+  const handleChange = (newValue: string | number, _option: SelectOption) => {
+    setValue(newValue);
+  };
+
+  return (
+    <div className={args.width || 'w-80'}>
+      <SelectFilter {...args} value={value} onChange={handleChange} />
+      <div className='mt-4 text-sm text-gray-600'>Valeur sélectionnée: {value || 'Aucune'}</div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <SelectWithState {...args} />,
+};
+
+export const WithCustomPlaceholder: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    placeholder: 'Choisissez un pays...',
+  },
+};
+
+export const Small: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    size: 'lg',
+  },
+};
+
+export const Outline: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    variant: 'outline',
+  },
+};
+
+export const Filled: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    variant: 'filled',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    loading: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    error: true,
+  },
+};
+
+export const WithUserData: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    options: mockUsers,
+    placeholder: 'Rechercher un utilisateur...',
+  },
+};
+
+export const WithDisabledOptions: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    options: [
+      { value: 'fr', label: 'France' },
+      { value: 'us', label: 'United States' },
+      { value: 'de', label: 'Germany', disabled: true },
+      { value: 'it', label: 'Italy' },
+      { value: 'es', label: 'Spain', disabled: true },
+    ],
+  },
+};
+
+export const WithLongLabels: Story = {
+  render: (args) => <SelectWithState {...args} />,
+  args: {
+    options: mockLongLabels,
+    placeholder: 'Sélectionnez un service médical...',
+    width: 'w-96',
+  },
+};
+
+export const DifferentWidths: Story = {
+  render: () => {
+    const [value1, setValue1] = useState('');
+    const [value2, setValue2] = useState('');
+    const [value3, setValue3] = useState('');
+
+    return (
+      <div className='space-y-6 max-w-2xl'>
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-2'>
+            Largeur normale (w-64)
+          </label>
+          <SelectFilter
+            options={mockCountries}
+            value={value1}
+            onChange={(newValue, _option) => setValue1(newValue.toString())}
+            placeholder='Pays...'
+            width='w-64'
+          />
+        </div>
+
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-2'>
+            Largeur moyenne (w-80)
+          </label>
+          <SelectFilter
+            options={mockUsers}
+            value={value2}
+            onChange={(newValue, _option) => setValue2(newValue.toString())}
+            placeholder='Utilisateurs...'
+            width='w-80'
+          />
+        </div>
+
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-2'>
+            Largeur pour labels longs (w-96)
+          </label>
+          <SelectFilter
+            options={mockLongLabels}
+            value={value3}
+            onChange={(newValue, _option) => setValue3(newValue.toString())}
+            placeholder='Services médicaux...'
+            width='w-96'
+          />
+        </div>
+
+        <div className='p-4 bg-gray-50 rounded-lg'>
+          <div className='text-sm space-y-2'>
+            <div>Pays sélectionné: {value1 || 'Aucun'}</div>
+            <div>Utilisateur sélectionné: {value2 || 'Aucun'}</div>
+            <div>Service sélectionné: {value3 || 'Aucun'}</div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const MultipleSelects: Story = {
+  render: () => {
+    const [country, setCountry] = useState('');
+    const [user, setUser] = useState('');
+
+    return (
+      <div className='space-y-4 w-80'>
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-2'>Pays</label>
+          <SelectFilter
+            options={mockCountries}
+            value={country}
+            onChange={(newValue, _option) => setCountry(newValue.toString())}
+            placeholder='Choisir un pays'
+          />
+        </div>
+
+        <div>
+          <label className='block text-sm font-medium text-gray-700 mb-2'>Utilisateur</label>
+          <SelectFilter
+            options={mockUsers}
+            value={user}
+            onChange={(newValue, _option) => setUser(newValue.toString())}
+            placeholder='Choisir un utilisateur'
+            variant='outline'
+          />
+        </div>
+
+        <div className='p-4 bg-gray-50 rounded-lg'>
+          <div className='text-sm'>
+            <div>Pays sélectionné: {country || 'Aucun'}</div>
+            <div>Utilisateur sélectionné: {user || 'Aucun'}</div>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const AsyncLoading: Story = {
+  render: () => {
+    const [options, setOptions] = useState<SelectOption[]>([]);
+    const [loading, setLoading] = useState(false);
+    const [value, setValue] = useState('');
+
+    const loadOptions = () => {
+      setLoading(true);
+      setTimeout(() => {
+        setOptions(mockCountries);
+        setLoading(false);
+      }, 2000);
+    };
+
+    return (
+      <div className='w-80'>
+        <SelectFilter
+          options={options}
+          value={value}
+          onChange={(newValue, _option) => setValue(newValue.toString())}
+          loading={loading}
+          placeholder='Cliquez pour charger les options'
+        />
+        <div className='mt-2 text-xs text-gray-500'>
+          <button
+            type='button'
+            onClick={loadOptions}
+            className='text-blue-600 hover:text-blue-800 underline'
+          >
+            Charger les options
+          </button>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/SelectFilter/SelectFilter.tsx

@@ -0,0 +1,219 @@
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import type { SelectFilterProps, SelectOption } from './types';
+import styles from './SelectFilter.module.css';
+
+const SelectFilter: React.FC<SelectFilterProps> = ({
+  options,
+  value,
+  onChange,
+  placeholder = 'Sélectionner une option...',
+  disabled = false,
+  loading = false,
+  error = false,
+  className = '',
+  size = 'md',
+  variant = 'default',
+  width = 'w-full',
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const filteredOptions = useMemo(() => {
+    if (!searchTerm) return options;
+    return options.filter((option) =>
+      option.label.toLowerCase().includes(searchTerm.toLowerCase())
+    );
+  }, [options, searchTerm]);
+
+  const selectedOption = options.find((opt) => opt.value === value);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearchTerm('');
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [filteredOptions]);
+
+  const handleSelect = (option: SelectOption) => {
+    if (option.disabled) return;
+    onChange?.(option.value, option);
+    setIsOpen(false);
+    setSearchTerm('');
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+    if (!isOpen) setIsOpen(true);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (!isOpen) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter') {
+        setIsOpen(true);
+      }
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        setHighlightedIndex((prev) => (prev < filteredOptions.length - 1 ? prev + 1 : prev));
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredOptions[highlightedIndex]) {
+          handleSelect(filteredOptions[highlightedIndex]);
+        }
+        break;
+      case 'Escape':
+        setIsOpen(false);
+        setSearchTerm('');
+        break;
+    }
+  };
+
+  const getButtonClasses = () => {
+    const baseClasses = [
+      styles.selectButton,
+      styles[size],
+      styles[variant],
+      disabled ? styles.disabled : '',
+      error ? styles.error : '',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ');
+
+    return baseClasses;
+  };
+
+  const getWidthClass = () => {
+    switch (width) {
+      case 'w-64':
+        return styles.width64;
+      case 'w-80':
+        return styles.width80;
+      case 'w-96':
+        return styles.width96;
+      default:
+        return styles.widthFull;
+    }
+  };
+
+  const getOptionClasses = (option: SelectOption, index: number) => {
+    return [
+      styles.option,
+      index === highlightedIndex ? styles.optionHighlighted : '',
+      option.value === value ? styles.optionSelected : '',
+      option.disabled ? styles.optionDisabled : '',
+    ]
+      .filter(Boolean)
+      .join(' ');
+  };
+
+  return (
+    <div className={`${styles.container} ${getWidthClass()}`} ref={dropdownRef}>
+      <button
+        className={getButtonClasses()}
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        onKeyDown={handleKeyDown}
+        tabIndex={disabled ? -1 : 0}
+        type='button'
+        aria-haspopup='listbox'
+        aria-expanded={isOpen}
+        disabled={disabled}
+      >
+        <div className={styles.buttonContent}>
+          <span className={`${styles.label} ${!selectedOption ? styles.placeholder : ''}`}>
+            {selectedOption ? selectedOption.label : placeholder}
+          </span>
+          <div className={styles.iconsContainer}>
+            {loading && <div className={styles.loadingSpinner} />}
+            <svg
+              className={`${styles.arrowIcon} ${isOpen ? styles.arrowIconOpen : ''}`}
+              fill='none'
+              stroke='currentColor'
+              viewBox='0 0 24 24'
+            >
+              <path
+                strokeLinecap='round'
+                strokeLinejoin='round'
+                strokeWidth={2}
+                d='M19 9l-7 7-7-7'
+              />
+            </svg>
+          </div>
+        </div>
+      </button>
+
+      {isOpen && (
+        <div className={`${styles.dropdown} ${getWidthClass()}`}>
+          <div className={styles.searchContainer}>
+            <input
+              ref={inputRef}
+              type='text'
+              value={searchTerm}
+              onChange={handleInputChange}
+              placeholder='Rechercher...'
+              className={styles.searchInput}
+              autoFocus
+            />
+          </div>
+
+          <div className={styles.optionsList}>
+            {filteredOptions.length === 0 ? (
+              <div className={styles.noResults}>Aucun résultat trouvé</div>
+            ) : (
+              <ul role='listbox'>
+                {filteredOptions.map((option, index) => (
+                  <li
+                    key={option.value}
+                    className={getOptionClasses(option, index)}
+                    onClick={() => handleSelect(option)}
+                    onMouseEnter={() => setHighlightedIndex(index)}
+                    role='option'
+                    aria-selected={option.value === value}
+                    aria-disabled={option.disabled}
+                  >
+                    <div className={styles.buttonContent}>
+                      <span className={styles.optionLabel} title={option.label}>
+                        {option.label}
+                      </span>
+                      {option.value === value && (
+                        <svg className={styles.checkIcon} fill='currentColor' viewBox='0 0 20 20'>
+                          <path
+                            fillRule='evenodd'
+                            d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
+                            clipRule='evenodd'
+                          />
+                        </svg>
+                      )}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SelectFilter;

package/src/components/SelectFilter/index.ts

@@ -0,0 +1,2 @@
+export { default as SelectFilter } from './SelectFilter';
+export type { SelectFilterProps, SelectOption } from './types';

package/src/components/SelectFilter/types.ts

@@ -0,0 +1,19 @@
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectFilterProps {
+  options: SelectOption[];
+  value?: string | number;
+  onChange?: (value: string | number, option: SelectOption) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  loading?: boolean;
+  error?: boolean;
+  className?: string;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'outline' | 'filled';
+  width?: 'w-full' | 'w-64' | 'w-80' | 'w-96';
+}