@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/SelectFilter/SelectFilter.tsx

@@ -1,219 +0,0 @@
-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/types.ts

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

package/src/components/SideComponent/PatientEditor.tsx

@@ -1,64 +0,0 @@
-import React, { useRef } from 'react';
-import SideComponent, { type SideComponentRef } from './SideComponent';
-import './SideComponent.css';
-
-export const PatientEditor: React.FC = () => {
-  const editorRef = useRef<SideComponentRef | null>(null);
-
-  return (
-    <div style={{ padding: 24 }}>
-      <h3>Card with inline drawer (parent must be position: relative)</h3>
-
-      <div
-        style={{
-          marginTop: 12,
-          position: 'relative',
-          border: '1px solid #e6e6e6',
-          padding: 16,
-          borderRadius: 8,
-          minHeight: 480,
-        }}
-      >
-        <div style={{ marginTop: 12 }}>
-          <button
-            onClick={() => editorRef.current?.open()}
-            style={{
-              padding: '8px 12px',
-              borderRadius: 6,
-              background: '#0b84ff',
-              color: '#fff',
-              border: 'none',
-            }}
-          >
-            Edit
-          </button>
-        </div>
-
-        <SideComponent
-          ref={editorRef}
-          title='Edit Patient'
-          subtitle='John WICK - IEP: 26'
-          size='360px'
-        >
-          <div style={{ padding: 16 }}>
-            <div style={{ background: '#eef6fb', padding: 12, borderRadius: 6, marginBottom: 12 }}>
-              <strong>GENDER : M</strong> <span style={{ marginLeft: 18 }} />{' '}
-              <strong>AGE : 42</strong>
-            </div>
-
-            <div style={{ marginBottom: 12 }}>
-              <label style={{ display: 'block', marginBottom: 6, textAlign: 'left' }}>Bed*</label>
-              <div className='select-wrapper'>
-                <select>
-                  <option>Select a bed</option>
-                </select>
-              </div>
-            </div>
-          </div>
-        </SideComponent>
-      </div>
-    </div>
-  );
-};
-
-export default PatientEditor;

package/src/components/SideComponent/SideComponent.css

@@ -1,179 +0,0 @@
-/* inline root (parent must be position: relative) */
-.scp-inline-root {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 999;
-}
-/* root activé uniquement quand quelque chose est visible */
-.scp-inline-root.open {
-  pointer-events: none; /* <-- on ne réactive pas directement ici */
-}
-
-/* overlay */
-.scp-overlay {
-  position: absolute;
-  inset: 0;
-  background: rgba(24, 27, 31, 0.45);
-  opacity: 0;
-  transition: opacity 250ms cubic-bezier(0.2, 0.9, 0.2, 1);
-  pointer-events: none;
-}
-.scp-overlay.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-/* panel */
-.scp-panel {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  width: 420px;
-  max-width: 100%;
-  background: #ffffff;
-  box-shadow: -20px 0 40px rgba(16, 24, 40, 0.12);
-  transform: translateX(110%);
-  opacity: 0;
-  transition:
-    transform 250ms cubic-bezier(0.2, 0.9, 0.2, 1),
-    opacity 250ms cubic-bezier(0.2, 0.9, 0.2, 1);
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  z-index: 4;
-  pointer-events: none;
-}
-
-.scp-panel.interactive {
-  pointer-events: auto;
-}
-
-/* visible state: slide in + fade in */
-.scp-panel.in {
-  transform: translateX(0%);
-  opacity: 1;
-  pointer-events: auto;
-}
-.scp-panel.out {
-  transform: translateX(110%);
-  opacity: 0;
-}
-
-/* header, body, etc. (unchanged) */
-.scp-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding: 20px 22px;
-  border-bottom: 1px solid #eef0f2;
-  background: #fff;
-  z-index: 5;
-}
-.scp-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #111827;
-}
-.scp-subtitle {
-  margin-top: 6px;
-  font-size: 13px;
-  color: #55606a;
-}
-.scp-close {
-  border: none;
-  background: transparent;
-  cursor: pointer;
-  padding: 6px;
-  color: #667080;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.scp-body {
-  padding: 20px 24px;
-  flex: 1 1 auto;
-  min-height: 0;
-  background: #fff;
-}
-
-/* footer helper */
-.scp-footer {
-  position: sticky;
-  bottom: 0;
-  background: #fff;
-  padding: 12px 24px;
-  border-top: 1px solid #eee;
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  z-index: 6;
-}
-
-/* select wrapper */
-.select-wrapper {
-  position: relative;
-  display: block;
-  margin-bottom: 0.5rem;
-}
-.scp-body select,
-.select-wrapper select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 100%;
-  padding: 10px 44px 10px 12px;
-  border-radius: 6px;
-  border: 1px solid #d8dce0;
-  background-color: #fff;
-  box-sizing: border-box;
-  font-size: 14px;
-  color: #111827;
-}
-.select-wrapper::after {
-  content: '';
-  position: absolute;
-  right: 14px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 12px;
-  height: 8px;
-  pointer-events: none;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23667080' d='M6 8L0 0h12z'/></svg>");
-  background-repeat: no-repeat;
-  background-size: 12px 8px;
-  opacity: 1;
-}
-
-/* focus */
-*:focus:not(:focus-visible) {
-  outline: none;
-  box-shadow: none;
-}
-:focus-visible {
-  outline: none;
-}
-button:focus-visible,
-input:focus-visible,
-textarea:focus-visible,
-select:focus-visible,
-.select-wrapper select:focus-visible,
-.scp-close:focus-visible {
-  box-shadow: 0 0 0 3px rgba(11, 132, 255, 0.12);
-  border-color: rgba(11, 132, 255, 0.85);
-  border-radius: 6px;
-  transition:
-    box-shadow 160ms ease,
-    border-color 160ms ease;
-}
-
-/* responsive */
-@media (max-width: 640px) {
-  .scp-panel {
-    width: 100% !important;
-  }
-}