@tsiky/components-r19 1.1.0 → 1.2.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/DynamicTable/tools/tableTypes.ts

@@ -1,63 +1,63 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import type { ComponentType } from 'react';
-
-export interface TableColumn<T = any> {
-  id: string;
-  label: string;
-  width?: string | number;
-  align?: 'left' | 'center' | 'right';
-  sortable?: boolean; // Rendre optionnel
-  render?: (value: any, row: T, column: TableColumn<T>) => React.ReactNode;
-  component?: ComponentType<{ value: any; row: T; column: TableColumn<T> }>;
-  type?: string;
-  options?: { value: string; label: string }[];
-}
-
-export interface TableRowData<T = any> {
-  id: string;
-  data: T;
-}
-
-export interface RendererProps<T = any> {
-  value: any;
-  row: T;
-  column: TableColumn<T>;
-}
-
-export interface TableConfigType {
-  renderers: Record<string, ComponentType<RendererProps>>;
-  icons: {
-    sortAsc: React.ReactElement;
-    sortDesc: React.ReactElement;
-    sortDefault: React.ReactElement;
-  };
-}
-
-export interface SortConfig {
-  key: string | null;
-  direction: 'asc' | 'desc';
-}
-
-export interface TableauDynamiqueProps<T = any> {
-  columns?: TableColumn<T>[];
-  data?: TableRowData<T>[];
-  pagination?: { pageSize: number; currentPage: number };
-  onSort?: (sortConfig: SortConfig) => void;
-  onPageChange?: (page: number) => void;
-  onPageSizeChange?: (size: number) => void;
-  onRowClick?: (row: T, index: number) => void;
-  filterable?: boolean;
-  searchTerm?: string;
-  onSearch?: (term: string) => void;
-  className?: string;
-  onNewPage?: (page: number) => void;
-}
-
-export interface TableBodyProps<T> {
-  data: TableRowData<T>[];
-  columns: TableColumn<T>[];
-  onRowClick?: (row: T, index: number) => void;
-  startIndex: number;
-  searchTerm?: string;
-  getRowStyle?: (row: T) => React.CSSProperties;
-}
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { ComponentType } from 'react';
+
+export interface TableColumn<T = any> {
+  id: string;
+  label: string;
+  width?: string | number;
+  align?: 'left' | 'center' | 'right';
+  sortable?: boolean; // Rendre optionnel
+  render?: (value: any, row: T, column: TableColumn<T>) => React.ReactNode;
+  component?: ComponentType<{ value: any; row: T; column: TableColumn<T> }>;
+  type?: string;
+  options?: { value: string; label: string }[];
+}
+
+export interface TableRowData<T = any> {
+  id: string;
+  data: T;
+}
+
+export interface RendererProps<T = any> {
+  value: any;
+  row: T;
+  column: TableColumn<T>;
+}
+
+export interface TableConfigType {
+  renderers: Record<string, ComponentType<RendererProps>>;
+  icons: {
+    sortAsc: React.ReactElement;
+    sortDesc: React.ReactElement;
+    sortDefault: React.ReactElement;
+  };
+}
+
+export interface SortConfig {
+  key: string | null;
+  direction: 'asc' | 'desc';
+}
+
+export interface TableauDynamiqueProps<T = any> {
+  columns?: TableColumn<T>[];
+  data?: TableRowData<T>[];
+  pagination?: { pageSize: number; currentPage: number };
+  onSort?: (sortConfig: SortConfig) => void;
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  onRowClick?: (row: T, index: number) => void;
+  filterable?: boolean;
+  searchTerm?: string;
+  onSearch?: (term: string) => void;
+  className?: string;
+  onNewPage?: (page: number) => void;
+}
+
+export interface TableBodyProps<T> {
+  data: TableRowData<T>[];
+  columns: TableColumn<T>[];
+  onRowClick?: (row: T, index: number) => void;
+  startIndex: number;
+  searchTerm?: string;
+  getRowStyle?: (row: T) => React.CSSProperties;
+}

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