@tsiky/components-r19 1.0.0 → 1.2.0

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

@@ -0,0 +1,249 @@
+.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

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