@tsiky/components-r19 1.0.0 → 1.1.0

package/src/components/DynamicTable/filters/SelectFilter.tsx

@@ -1,69 +1,69 @@
-// components/TableauDynamique/filters/SelectFilter.tsx
-import { useState, useEffect } from 'react';
-import styles from '../TableauDynamique.module.css';
-import type { SelectFilterConfig } from '../tools/filterTypes';
-
-interface SelectFilterProps {
-  config: SelectFilterConfig;
-  value: string | number | boolean;
-  onChange: (value: string | number | boolean) => void;
-  disabled?: boolean;
-}
-
-const SelectFilter: React.FC<SelectFilterProps> = ({
-  config,
-  value,
-  onChange,
-  disabled = false,
-}) => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [options, setOptions] = useState<any[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    const loadOptions = async () => {
-      if (config.asyncOptions) {
-        setIsLoading(true);
-        try {
-          const asyncOptions = await config.asyncOptions();
-          setOptions(asyncOptions);
-        } catch (error) {
-          console.error('Error loading options:', error);
-        } finally {
-          setIsLoading(false);
-        }
-      } else {
-        setOptions(config.options || []);
-      }
-    };
-
-    loadOptions();
-  }, [config]);
-
-  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const newValue = e.target.value;
-    onChange(newValue);
-  };
-
-  if (isLoading) {
-    return <div>Chargement...</div>;
-  }
-
-  return (
-    <select
-      value={String(value || '')}
-      onChange={handleChange}
-      disabled={disabled}
-      className={styles.filterInput}
-    >
-      <option value=''>Select...</option>
-      {options.map((option) => (
-        <option key={option.value} value={option.value}>
-          {option.label}
-        </option>
-      ))}
-    </select>
-  );
-};
-
-export default SelectFilter;
+// components/TableauDynamique/filters/SelectFilter.tsx
+import { useState, useEffect } from 'react';
+import styles from '../TableauDynamique.module.css';
+import type { SelectFilterConfig } from '../tools/filterTypes';
+
+interface SelectFilterProps {
+  config: SelectFilterConfig;
+  value: string | number | boolean;
+  onChange: (value: string | number | boolean) => void;
+  disabled?: boolean;
+}
+
+const SelectFilter: React.FC<SelectFilterProps> = ({
+  config,
+  value,
+  onChange,
+  disabled = false,
+}) => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [options, setOptions] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    const loadOptions = async () => {
+      if (config.asyncOptions) {
+        setIsLoading(true);
+        try {
+          const asyncOptions = await config.asyncOptions();
+          setOptions(asyncOptions);
+        } catch (error) {
+          console.error('Error loading options:', error);
+        } finally {
+          setIsLoading(false);
+        }
+      } else {
+        setOptions(config.options || []);
+      }
+    };
+
+    loadOptions();
+  }, [config]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newValue = e.target.value;
+    onChange(newValue);
+  };
+
+  if (isLoading) {
+    return <div>Chargement...</div>;
+  }
+
+  return (
+    <select
+      value={String(value || '')}
+      onChange={handleChange}
+      disabled={disabled}
+      className={styles.filterInput}
+    >
+      <option value=''>Select...</option>
+      {options.map((option) => (
+        <option key={option.value} value={option.value}>
+          {option.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default SelectFilter;

package/src/components/EntryControl/EntryControl.tsx

@@ -1,117 +1,117 @@
-'use client';
-import React, { useEffect, useRef, useState } from 'react';
-import styles from './EntryControl.module.css';
-
-export interface EntryControlProps {
-  onDateChange?: (isoString: string) => void;
-  onSearch?: (query: string) => void;
-  initialDate?: string;
-}
-
-export default function EntryControl({ onDateChange, onSearch, initialDate }: EntryControlProps) {
-  const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [datetime, setDatetime] = useState<string>(initialDate ?? '');
-  const containerRef = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      const target = e.target as Node | null;
-      if (containerRef.current && target && !containerRef.current.contains(target)) {
-        setShowPicker(false);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  useEffect(() => {
-    if (initialDate) setDatetime(initialDate);
-  }, [initialDate]);
-
-  const handleToggle = () => setShowPicker((v) => !v);
-
-  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const v = e.target.value;
-    setDatetime(v);
-    onDateChange?.(v);
-  };
-
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onSearch?.(e.target.value);
-  };
-
-  return (
-    <div className={styles.wrapper} ref={containerRef}>
-      <div className={styles.leftGroup}>
-        <button
-          type='button'
-          className={`${styles.filterButton} ${showPicker ? styles.open : ''}`}
-          onClick={handleToggle}
-          aria-expanded={showPicker}
-          aria-haspopup='dialog'
-          aria-controls='entry-datetime'
-        >
-          <span>Entry time</span>
-          <svg
-            className={styles.filterIcon}
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width='14'
-            height='14'
-            aria-hidden
-          >
-            <path fill='currentColor' d='M10 18h4v-2h-4v2zm-7-8v2h18V10H3zm3-6v2h12V4H6z' />
-          </svg>
-        </button>
-
-        <div className={styles.infoText}>Confidence interval: step ± 15' / exit ± 30'</div>
-
-        {/* pickerContainer est maintenant inline sur grands écrans, absolute sur petits */}
-        {showPicker && (
-          <div
-            className={styles.pickerContainer}
-            role='dialog'
-            aria-label='Choisir la date et l’heure'
-          >
-            <label className={styles.pickerLabel} htmlFor='entry-datetime'>
-              <span className={styles.srOnly}>Choisir la date et l’heure</span>
-            </label>
-            <input
-              id='entry-datetime'
-              className={styles.datetime}
-              type='datetime-local'
-              value={datetime}
-              onChange={handleDateChange}
-              aria-label='Date et heure d’entrée'
-            />
-          </div>
-        )}
-      </div>
-
-      <div className={styles.rightGroup}>
-        <div className={styles.searchInputWrap}>
-          <input
-            className={styles.searchInput}
-            placeholder='Search...'
-            onChange={handleSearch}
-            aria-label='Search'
-          />
-          <svg
-            className={styles.searchIcon}
-            xmlns='http://www.w3.org/2000/svg'
-            viewBox='0 0 24 24'
-            width='16'
-            height='16'
-            aria-hidden
-          >
-            <path
-              fill='currentColor'
-              d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79L20 20.49 21.49 19l-5.99-5zM10 15.5A5.5 5.5 0 1115.5 10 5.5 5.5 0 0110 15.5z'
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  );
-}
+'use client';
+import React, { useEffect, useRef, useState } from 'react';
+import styles from './EntryControl.module.css';
+
+export interface EntryControlProps {
+  onDateChange?: (isoString: string) => void;
+  onSearch?: (query: string) => void;
+  initialDate?: string;
+}
+
+export default function EntryControl({ onDateChange, onSearch, initialDate }: EntryControlProps) {
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [datetime, setDatetime] = useState<string>(initialDate ?? '');
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node | null;
+      if (containerRef.current && target && !containerRef.current.contains(target)) {
+        setShowPicker(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  useEffect(() => {
+    if (initialDate) setDatetime(initialDate);
+  }, [initialDate]);
+
+  const handleToggle = () => setShowPicker((v) => !v);
+
+  const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const v = e.target.value;
+    setDatetime(v);
+    onDateChange?.(v);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSearch?.(e.target.value);
+  };
+
+  return (
+    <div className={styles.wrapper} ref={containerRef}>
+      <div className={styles.leftGroup}>
+        <button
+          type='button'
+          className={`${styles.filterButton} ${showPicker ? styles.open : ''}`}
+          onClick={handleToggle}
+          aria-expanded={showPicker}
+          aria-haspopup='dialog'
+          aria-controls='entry-datetime'
+        >
+          <span>Entry time</span>
+          <svg
+            className={styles.filterIcon}
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width='14'
+            height='14'
+            aria-hidden
+          >
+            <path fill='currentColor' d='M10 18h4v-2h-4v2zm-7-8v2h18V10H3zm3-6v2h12V4H6z' />
+          </svg>
+        </button>
+
+        <div className={styles.infoText}>Confidence interval: step ± 15' / exit ± 30'</div>
+
+        {/* pickerContainer est maintenant inline sur grands écrans, absolute sur petits */}
+        {showPicker && (
+          <div
+            className={styles.pickerContainer}
+            role='dialog'
+            aria-label='Choisir la date et l’heure'
+          >
+            <label className={styles.pickerLabel} htmlFor='entry-datetime'>
+              <span className={styles.srOnly}>Choisir la date et l’heure</span>
+            </label>
+            <input
+              id='entry-datetime'
+              className={styles.datetime}
+              type='datetime-local'
+              value={datetime}
+              onChange={handleDateChange}
+              aria-label='Date et heure d’entrée'
+            />
+          </div>
+        )}
+      </div>
+
+      <div className={styles.rightGroup}>
+        <div className={styles.searchInputWrap}>
+          <input
+            className={styles.searchInput}
+            placeholder='Search...'
+            onChange={handleSearch}
+            aria-label='Search'
+          />
+          <svg
+            className={styles.searchIcon}
+            xmlns='http://www.w3.org/2000/svg'
+            viewBox='0 0 24 24'
+            width='16'
+            height='16'
+            aria-hidden
+          >
+            <path
+              fill='currentColor'
+              d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16a6.471 6.471 0 004.23-1.57l.27.28v.79L20 20.49 21.49 19l-5.99-5zM10 15.5A5.5 5.5 0 1115.5 10 5.5 5.5 0 0110 15.5z'
+            />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/Grid/Grid.tsx

@@ -94,6 +94,7 @@ const Grid: React.FC<GridProps> = ({
   const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
     e.stopPropagation();
     e.dataTransfer.setData('dragIndex', index.toString());
+    e.dataTransfer.setData('parentKey', uniqueKey.toString());
   };
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
@@ -104,6 +105,10 @@ const Grid: React.FC<GridProps> = ({
   const handleDrop = (e: React.DragEvent<HTMLDivElement>, dropIndex: number) => {
     e.preventDefault();
     const dragIndex = Number(e.dataTransfer.getData('dragIndex'));
+    const dragParent = Number(e.dataTransfer.getData('parentKey'));
+    if (container && dragParent !== uniqueKey) {
+      return;
+    }
     const updatedItems = [...items];
 
     let dropInd = -1;

package/src/components/Header/Header.tsx

@@ -46,8 +46,10 @@ export const Header: React.FC<HeaderProps> = ({
 
         {/* Droite : menu */}
         <div className='header-right'>
-          <DraggableSwitcherButton />
-          <ThemeSwitcherButton />
+          <div className='switcher'>
+            <DraggableSwitcherButton />
+            <ThemeSwitcherButton />
+          </div>
           <DropdownMenu
             categories={dropdownItems?.categories}
             buttonContent={dropdownItems?.buttonContent}

package/src/components/Header/header.css

@@ -1,31 +1,61 @@
-.header {
-  background: var(--headerBg);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
-  max-width: 100vw;
-  font-size: var(--text-small);
-}
-
-/* container centré */
-.header-container {
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px 17px;
-  gap: 20px;
-}
-
-/* gauche : logo + nav */
-.header-left {
-  display: flex;
-  align-items: center;
-  gap: 22px;
-}
-
-/* droite : menu bouton */
-.header-right {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-}
+.header {
+  background: var(--headerBg);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
+  max-width: 100vw;
+  font-size: var(--text-small);
+}
+
+/* container centré */
+.header-container {
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px 17px;
+  gap: 20px;
+}
+
+/* gauche : logo + nav */
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+}
+
+/* droite : menu bouton */
+.header-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.switcher {
+  display: flex;
+  align-items: center;
+}
+
+@media (max-width: 500px) {
+  .switcher {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.2025rem;
+  }
+
+  .switcher {
+    animation: slideDown 0.4s ease;
+  }
+
+  @keyframes slideDown {
+    from {
+      transform: translateY(-15px);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}