@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/SelectFilter/SelectFilter.module.css

@@ -1,249 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-}
-
-.selectButton {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  text-align: left;
-  border-radius: 0.5rem;
-  border: 1px solid #d1d5db;
-  background-color: white;
-  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  transition: all 0.2s ease-in-out;
-  cursor: pointer;
-  outline: none;
-}
-
-.selectButton:focus {
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
-}
-
-.selectButton:hover:not(.disabled) {
-  border-color: #9ca3af;
-}
-
-.disabled {
-  opacity: 0.5;
-  background-color: #f9fafb;
-  cursor: not-allowed;
-}
-
-.error {
-  border-color: #ef4444;
-}
-
-.error:focus {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgb(239 68 68 / 0.5);
-}
-
-.default {
-  border-color: #d1d5db;
-  background-color: white;
-}
-
-.outline {
-  border-width: 2px;
-  border-color: #9ca3af;
-  background-color: transparent;
-}
-
-.outline:focus {
-  border-color: #2563eb;
-}
-
-.filled {
-  border: none;
-  background-color: #f3f4f6;
-}
-
-.filled:focus {
-  background-color: white;
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
-}
-
-.sm {
-  padding: 0.25rem 0.5rem;
-  font-size: 0.875rem;
-}
-
-.md {
-  padding: 0.5rem 0.75rem;
-  font-size: 1rem;
-}
-
-.lg {
-  padding: 0.75rem 1rem;
-  font-size: 1.125rem;
-}
-
-.buttonContent {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-.label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-}
-
-.placeholder {
-  color: #6b7280;
-}
-
-.iconsContainer {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-  margin-left: 0.5rem;
-}
-
-.loadingSpinner {
-  width: 1rem;
-  height: 1rem;
-  border: 2px solid #3b82f6;
-  border-top: 2px solid transparent;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-  flex-shrink: 0;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.arrowIcon {
-  width: 1rem;
-  height: 1rem;
-  color: #6b7280;
-  transition: transform 0.2s ease-in-out;
-  flex-shrink: 0;
-}
-
-.arrowIconOpen {
-  transform: rotate(180deg);
-}
-
-.dropdown {
-  position: absolute;
-  z-index: 50;
-  width: 100%;
-  margin-top: 0.25rem;
-  background-color: white;
-  border: 1px solid #d1d5db;
-  border-radius: 0.5rem;
-  box-shadow:
-    0 10px 15px -3px rgb(0 0 0 / 0.1),
-    0 4px 6px -4px rgb(0 0 0 / 0.1);
-  max-height: 15rem;
-  overflow: hidden;
-}
-
-.searchContainer {
-  padding: 0.5rem;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.searchInput {
-  width: 90%;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  outline: none;
-}
-
-.searchInput:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 2px rgb(59 130 246 / 0.5);
-}
-
-.optionsList {
-  overflow-y: auto;
-  max-height: 12rem;
-  padding: 0.25rem 0;
-}
-
-.noResults {
-  padding: 0.75rem 1rem;
-  font-size: 0.875rem;
-  color: #6b7280;
-  text-align: center;
-}
-
-.option {
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  transition:
-    background-color 0.15s ease-in-out,
-    color 0.15s ease-in-out;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.option:hover {
-  background-color: #f9fafb;
-}
-
-.optionHighlighted {
-  background-color: #eff6ff;
-  color: #1d4ed8;
-}
-
-.optionSelected {
-  background-color: #dbeafe;
-  color: #1e40af;
-  font-weight: 500;
-}
-
-.optionDisabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.optionLabel {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  display: block;
-}
-
-.checkIcon {
-  width: 1rem;
-  height: 1rem;
-  color: #2563eb;
-  flex-shrink: 0;
-  margin-left: 0.5rem;
-}
-
-.widthFull {
-  width: 100%;
-}
-
-.width64 {
-  width: 16rem;
-}
-
-.width80 {
-  width: 20rem;
-}
-
-.width96 {
-  width: 24rem;
-}

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

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