@tsiky/components-r19 1.0.0

package/src/components/DynamicTable/AdvancedFilters.tsx

@@ -0,0 +1,196 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { X, Filter } from 'lucide-react';
+import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
+import { useFilters } from './hooks/useFilters';
+import FilterRenderer from './filters/FilterRenderer';
+import styles from './TableauDynamique.module.css';
+
+interface AdvancedFiltersProps {
+  filters: FilterConfig[];
+  externalFilters?: AppliedFilter[];
+  onFiltersChange?: (filters: AppliedFilter[]) => void;
+  onApply?: (filters: AppliedFilter[]) => void;
+  isControlled?: boolean;
+  debounceTimeout?: number;
+  resultsCount?: number;
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
+  panelPlacement?: 'overlay' | 'top';
+  onPanelHeightChange?: (height: number) => void;
+}
+
+const AdvancedFilters: React.FC<AdvancedFiltersProps> = ({
+  filters,
+  externalFilters = [],
+  onFiltersChange,
+  onApply,
+  isControlled = false,
+  debounceTimeout = 300,
+  resultsCount = 0,
+  expanded,
+  onToggle,
+  panelPlacement = 'top',
+  onPanelHeightChange,
+}) => {
+  const [localExpanded, setLocalExpanded] = useState(false);
+  const isExpanded = typeof expanded === 'boolean' ? expanded : localExpanded;
+
+  const { appliedFilters, tempFilters, updateFilter, applyFilters, clearAllFilters } = useFilters({
+    filters,
+    externalFilters,
+    onFiltersChange,
+    onApply,
+    debounceTimeout,
+    isControlled,
+  });
+
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (isExpanded && panelRef.current) {
+      const h = panelRef.current.getBoundingClientRect().height;
+      onPanelHeightChange?.(h);
+    } else {
+      onPanelHeightChange?.(0);
+    }
+  }, [isExpanded, filters, tempFilters, onPanelHeightChange]);
+
+  const toggle = () => {
+    if (typeof expanded === 'boolean') {
+      onToggle?.(!expanded);
+    } else {
+      setLocalExpanded((s) => {
+        const next = !s;
+        onToggle?.(next);
+        return next;
+      });
+    }
+  };
+
+  const handleApply = async () => {
+    await applyFilters();
+    onToggle?.(false);
+    if (typeof expanded !== 'boolean') setLocalExpanded(false);
+  };
+
+  useEffect(() => {
+    const onPointerDown = (e: PointerEvent) => {
+      if (!isExpanded) return;
+      if (!wrapperRef.current) return;
+      if (!wrapperRef.current.contains(e.target as Node)) {
+        onToggle?.(false);
+        if (typeof expanded !== 'boolean') setLocalExpanded(false);
+      }
+    };
+
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isExpanded) {
+        onToggle?.(false);
+        if (typeof expanded !== 'boolean') setLocalExpanded(false);
+      }
+    };
+
+    if (isExpanded) {
+      document.addEventListener('pointerdown', onPointerDown);
+      document.addEventListener('keydown', onKey);
+    }
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [isExpanded, expanded, onToggle]);
+
+  return (
+    <div className={styles.advancedFiltersContainer} ref={wrapperRef}>
+      <div className={styles.filtersHeader}>
+        <button
+          className={styles.toggleFiltersButton}
+          onClick={toggle}
+          aria-expanded={isExpanded}
+          aria-controls='advanced-filters-panel'
+        >
+          <Filter size={14} />
+          <span className={styles.buttonTextCompact}>Advanced-Filters</span>
+        </button>
+
+        {appliedFilters.length > 0 && (
+          <button className={styles.clearFiltersButton} onClick={clearAllFilters}>
+            <X size={14} /> <span className={styles.buttonTextCompact}>Effacer</span>
+          </button>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div
+          id='advanced-filters-panel'
+          ref={panelRef}
+          className={`${styles.filtersPanel} ${
+            panelPlacement === 'top'
+              ? `${styles.filtersPanelInline} ${styles.filtersPanelHorizontal}`
+              : ''
+          }`}
+          role='region'
+          aria-label='Panneau de filtres avancés'
+        >
+          <div className={styles.filtersRow}>
+            {filters.map((filter) => (
+              <div key={filter.id} className={`${styles.filterItem} ${styles.filterItemInline}`}>
+                <label className={styles.filterLabel}>
+                  {filter.label}
+                  {filter.required && <span className={styles.required}>*</span>}
+                </label>
+                <FilterRenderer
+                  config={filter}
+                  value={tempFilters[filter.id]}
+                  onChange={(value) => updateFilter(filter.id, value)}
+                  disabled={filter.disabled}
+                />
+              </div>
+            ))}
+          </div>
+
+          <div className={styles.filtersActionsHorizontal}>
+            <div className={styles.activeFiltersWrap}>
+              {appliedFilters.length > 0 && (
+                <div className={styles.activeFilters}>
+                  <span className={styles.activeLabelCompact}>Actifs :</span>
+                  {appliedFilters.map((f) => (
+                    <div key={f.id} className={styles.activeFilterTag}>
+                      {f.label ?? f.id}
+                      <button
+                        onClick={() => updateFilter(f.id, undefined)}
+                        aria-label={`Supprimer ${f.id}`}
+                      >
+                        ×
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className={styles.actionsGroup}>
+              <button
+                className={styles.cancelButton}
+                onClick={() => {
+                  onToggle?.(false);
+                }}
+              >
+                Cancel
+              </button>
+              <button className={styles.applyButton} onClick={handleApply}>
+                Apply
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AdvancedFilters;

package/src/components/DynamicTable/ColumnSorter.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import { ChevronsUpDown, ChevronUp, ChevronDown, X } from 'lucide-react';
+import type { SortConfig, TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface ColumnSorterProps<T = unknown> {
+  columns: TableColumn<T>[];
+  sortConfig: SortConfig;
+  onSort: (sortConfig: SortConfig) => void;
+  onToggleFilters?: () => void;
+  filtersActive?: boolean;
+  showFilters?: boolean;
+}
+
+const isAlphaUpperCase = (s: string) => {
+  const letters = s.replace(/[^A-Za-zÀ-ÖØ-öø-ÿ]/g, '');
+  return letters.length > 0 && letters === letters.toUpperCase();
+};
+
+const ColumnSorter = <T,>({ columns, sortConfig, onSort }: ColumnSorterProps<T>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const sortableColumns = columns.filter((col) => col.sortable);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  const handleSort = (key: string | null, direction: 'asc' | 'desc') => {
+    onSort({ key, direction });
+    setIsOpen(false);
+  };
+
+  const toggleOpen = () => setIsOpen((v) => !v);
+
+  const handleCancel = () => {
+    setIsOpen(false);
+  };
+
+  // fermer au clic extérieur + Échap (déjà en place)
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const onPointerDown = (e: PointerEvent) => {
+      if (!wrapperRef.current) return;
+      const target = e.target as Node | null;
+      if (target && !wrapperRef.current.contains(target)) {
+        setIsOpen(false);
+      }
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', onPointerDown);
+    document.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [isOpen]);
+
+  // --> NO SCROLL on the table container while dropdown is open
+  useEffect(() => {
+    const tableWrapper = document.querySelector('[data-table-wrapper]') as HTMLElement | null;
+    if (!tableWrapper) return;
+
+    // sauvegarde la valeur inline actuelle pour restaurer plus tard
+    const previousInline = tableWrapper.style.overflow ?? '';
+
+    if (isOpen) {
+      // masquer scrollbars (on cache à la fois X et Y)
+      tableWrapper.style.overflow = 'hidden';
+    } else {
+      // restaurer à la fermeture
+      tableWrapper.style.overflow = previousInline;
+    }
+
+    // cleanup si le composant se démonte pendant que c'est ouvert
+    return () => {
+      tableWrapper.style.overflow = previousInline;
+    };
+  }, [isOpen]);
+
+  return (
+    <div className={styles.columnSorterContainer}>
+      <div className={styles.sorterControls}>
+        {sortableColumns.length > 0 && (
+          <div className={styles.sortDropdownWrapper} ref={wrapperRef}>
+            <button
+              className={styles.toggleSortButton}
+              onClick={toggleOpen}
+              aria-expanded={isOpen}
+              aria-haspopup='true'
+              type='button'
+            >
+              <ChevronsUpDown size={14} />
+              <span
+                className={`${styles.buttonTextCompact} ${
+                  isAlphaUpperCase('Sort') ? styles.uppercaseSmall : ''
+                }`}
+              >
+                Sort
+              </span>
+              {sortConfig.key &&
+                (sortConfig.direction === 'asc' ? (
+                  <ChevronUp size={14} />
+                ) : (
+                  <ChevronDown size={14} />
+                ))}
+            </button>
+
+            {isOpen && (
+              <div className={`${styles.sortDropdown} ${styles.sortDropdownInline}`} role='menu'>
+                <div className={styles.sortDropdownHeader}>
+                  <span>Trier par:</span>
+                  <button className={styles.closeButton} onClick={handleCancel} aria-label='Fermer'>
+                    <X size={16} />
+                  </button>
+                </div>
+
+                <div className={styles.sortDropdownContent}>
+                  {sortableColumns.map((column) => {
+                    const label = String(column.label ?? column.id);
+                    const smallUpper = isAlphaUpperCase(label);
+                    return (
+                      <div
+                        key={column.id}
+                        className={styles.sortDropdownItem}
+                        role='menuitem'
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter') handleSort(column.id, 'asc');
+                        }}
+                      >
+                        <span
+                          className={`${styles.columnSorterLabel} ${smallUpper ? styles.uppercaseSmall : ''}`}
+                          title={label}
+                          aria-label={label}
+                        >
+                          {label}
+                        </span>
+
+                        <div className={styles.sortDirectionButtons}>
+                          <button
+                            className={`${styles.sortDirectionButton} ${
+                              sortConfig.key === column.id && sortConfig.direction === 'asc'
+                                ? styles.activeSort
+                                : ''
+                            }`}
+                            onClick={() => handleSort(column.id, 'asc')}
+                            title='Trier par ordre croissant'
+                            type='button'
+                          >
+                            <ChevronUp size={12} />
+                          </button>
+                          <button
+                            className={`${styles.sortDirectionButton} ${
+                              sortConfig.key === column.id && sortConfig.direction === 'desc'
+                                ? styles.activeSort
+                                : ''
+                            }`}
+                            onClick={() => handleSort(column.id, 'desc')}
+                            title='Trier par ordre décroissant'
+                            type='button'
+                          >
+                            <ChevronDown size={12} />
+                          </button>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ColumnSorter;

package/src/components/DynamicTable/Pagination.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React from 'react';
+import styles from './TableauDynamique.module.css';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  pageSize: number;
+  totalItems: number;
+  onPageChange: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  onNewPage?: (page: number) => void;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  pageSize,
+  totalItems,
+  onPageChange,
+  onPageSizeChange,
+  onNewPage,
+}) => {
+  const safeTotalPages = Math.max(1, Math.floor(totalPages));
+  const safeCurrentPage = Math.min(Math.max(1, Math.floor(currentPage)), safeTotalPages);
+
+  const handlePrev = () => safeCurrentPage > 1 && onPageChange(safeCurrentPage - 1);
+  const handleNext = () => {
+    if (onNewPage && safeCurrentPage === safeTotalPages) {
+      onNewPage(safeTotalPages + 1);
+      return;
+    }
+    safeCurrentPage < safeTotalPages && onPageChange(safeCurrentPage + 1);
+  };
+
+  const startIndex = totalItems > 0 ? (safeCurrentPage - 1) * pageSize + 1 : 0;
+  const endIndex = totalItems > 0 ? Math.min(safeCurrentPage * pageSize, totalItems) : 0;
+
+  const getPageNumbers = () => {
+    const pages: number[] = [];
+    const maxVisible = 5;
+    let start = Math.max(1, safeCurrentPage - Math.floor(maxVisible / 2));
+    let end = start + maxVisible - 1;
+
+    if (end > safeTotalPages) {
+      end = safeTotalPages;
+      start = Math.max(1, end - maxVisible + 1);
+    }
+
+    for (let i = start; i <= end; i++) pages.push(i);
+    return pages;
+  };
+
+  return (
+    <div className={styles.paginationContainer} role='navigation' aria-label='Pagination'>
+      <div className={styles.leftGroup}>
+        {onPageSizeChange && (
+          <div className={styles.pageSizeControls}>
+            <label className={styles.pageSizeLabel}>Show</label>
+            <select
+              value={pageSize}
+              onChange={(e) => onPageSizeChange(Number(e.target.value))}
+              className={styles.pageSizeSelect}
+              aria-label='Taille de page'
+            >
+              {[5, 10, 20, 50].map((size) => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+            <span className={styles.pageSizeSuffix}>entries</span>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.paginationInfo} aria-live='polite'>
+        {startIndex}-{endIndex} out of {totalItems}
+      </div>
+
+      <div className={styles.paginationControls}>
+        <button
+          onClick={handlePrev}
+          disabled={safeCurrentPage === 1}
+          className={`${styles.paginationButton} ${styles.navigationButton} ${safeCurrentPage === 1 ? styles.disabledButton : ''}`}
+          aria-label='Page précédente'
+        >
+          «
+        </button>
+
+        {getPageNumbers().map((page) => (
+          <button
+            key={page}
+            onClick={() => onPageChange(page)}
+            aria-current={safeCurrentPage === page ? 'page' : undefined}
+            className={`${styles.paginationButton} ${safeCurrentPage === page ? styles.activeButton : ''}`}
+          >
+            {page}
+          </button>
+        ))}
+
+        <button
+          onClick={handleNext}
+          className={`${styles.paginationButton} ${styles.navigationButton}`}
+          aria-label='Page suivante'
+        >
+          »
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

package/src/components/DynamicTable/TableBody.tsx

@@ -0,0 +1,42 @@
+import TableRow from './TableRow';
+import type { TableBodyProps } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+const TableBody = <T,>({
+  data,
+  columns,
+  onRowClick,
+  startIndex,
+  searchTerm,
+  getRowStyle,
+}: TableBodyProps<T>) => {
+  if (data.length === 0) {
+    return (
+      <tbody>
+        <tr>
+          <td colSpan={columns.length} className={styles.emptyRow}>
+            {searchTerm ? 'Aucun résultat trouvé' : 'Aucune donnée disponible'}
+          </td>
+        </tr>
+      </tbody>
+    );
+  }
+
+  return (
+    <tbody>
+      {data.map((row, index) => (
+        <TableRow
+          key={row.id}
+          row={row.data}
+          rowId={row.id}
+          columns={columns}
+          onRowClick={onRowClick}
+          index={startIndex + index - 1}
+          getRowStyle={getRowStyle}
+        />
+      ))}
+    </tbody>
+  );
+};
+
+export default TableBody;

package/src/components/DynamicTable/TableCell.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import type { RendererProps } from './tools/tableTypes';
+import { tableConfig } from './tools/tableConfig';
+import styles from './TableauDynamique.module.css';
+
+const TableCell = <T,>({ value, row, column }: RendererProps<T>) => {
+  const getRenderer = () => {
+    if (column.component) {
+      const CustomComponent = column.component;
+      return <CustomComponent value={value} row={row} column={column} />;
+    }
+
+    if (column.render) {
+      return column.render(value, row, column);
+    }
+
+    const rendererKey = column.type || 'text';
+    const Renderer = tableConfig.renderers[rendererKey] || tableConfig.renderers.text;
+    return <Renderer value={value} row={row} column={column} />;
+  };
+
+  return (
+    <td className={styles.tableCell} style={{ textAlign: column.align || 'left' }}>
+      {getRenderer()}
+    </td>
+  );
+};
+
+export default TableCell;

package/src/components/DynamicTable/TableHeader.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface TableHeaderProps<T = unknown> {
+  columns: TableColumn<T>[];
+}
+
+const TableHeader = <T,>({ columns }: TableHeaderProps<T>) => {
+  return (
+    <thead className={styles.tableHeader}>
+      <tr>
+        {columns.map((column) => (
+          <th
+            key={column.id}
+            className={styles.headerCell}
+            style={{
+              width: column.width,
+              textAlign: column.align,
+              padding: '1rem',
+            }}
+          >
+            <div className={styles.headerContent}>
+              <span>{column.label}</span>
+            </div>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+};
+
+export default TableHeader;

package/src/components/DynamicTable/TableRow.tsx

@@ -0,0 +1,56 @@
+// TableRow.tsx
+'use client';
+
+import TableCell from './TableCell';
+import type { TableColumn } from './tools/tableTypes';
+import styles from './TableauDynamique.module.css';
+
+interface TableRowProps<T = unknown> {
+  row: T;
+  rowId: string;
+  columns: TableColumn<T>[];
+  onRowClick?: (row: T, index: number) => void;
+  index: number;
+  getRowStyle?: (row: T) => {
+    backgroundColor?: string;
+    accentColor?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  };
+}
+
+const TableRow = <T,>({
+  row,
+  rowId,
+  columns,
+  onRowClick,
+  index,
+  getRowStyle,
+}: TableRowProps<T>) => {
+  const styleConfig = getRowStyle ? getRowStyle(row) : {};
+  const { backgroundColor, accentColor, ...otherStyles } = styleConfig || {};
+  const styleWithVar = {
+    backgroundColor,
+    ...otherStyles,
+    ['--row-accent']: accentColor ?? 'transparent',
+  } as React.CSSProperties;
+
+  return (
+    <tr
+      className={`${styles.tableRow} ${onRowClick ? styles.clickableRow : ''}`}
+      onClick={() => onRowClick?.(row, index)}
+      style={styleWithVar}
+    >
+      {columns.map((column) => (
+        <TableCell
+          key={`${rowId}-${column.id}`}
+          value={row[column.id as keyof T]}
+          row={row}
+          column={column}
+        />
+      ))}
+    </tr>
+  );
+};
+
+export default TableRow;