@tsiky/components-r19 1.3.0 → 1.3.2

package/src/components/DynamicTable/AdvancedFilters.tsx

@@ -1,196 +0,0 @@
-'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

@@ -1,185 +0,0 @@
-'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

@@ -1,115 +0,0 @@
-'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

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

@@ -1,38 +0,0 @@
-'use client';
-
-import React from 'react';
-import type { TableColumn } from './tools/tableTypes';
-import styles from './TableauDynamique.module.css';
-
-interface TableCellProps<T = unknown> {
-  value: any;
-  row: T;
-  column: TableColumn<T>;
-}
-
-const TableCell = <T,>({ value, row, column }: TableCellProps<T>) => {
-  const alignClass =
-    column.align === 'right'
-      ? styles.alignRight
-      : column.align === 'left'
-        ? styles.alignLeft
-        : styles.alignCenter;
-
-  const content =
-    typeof (column as any).render === 'function'
-      ? (column as any).render(value, row)
-      : value === null || value === undefined
-        ? ''
-        : String(value);
-
-  return (
-    <td
-      className={`${styles.tableCell} ${alignClass}`}
-      style={{ width: column.width ?? undefined }}
-    >
-      <div className={styles.cellContent}>{content}</div>
-    </td>
-  );
-};
-
-export default TableCell;

package/src/components/DynamicTable/TableHeader.tsx

@@ -1,39 +0,0 @@
-'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) => {
-          const alignClass =
-            column.align === 'right'
-              ? styles.alignRight
-              : column.align === 'left'
-                ? styles.alignLeft
-                : styles.alignCenter;
-
-          return (
-            <th
-              key={column.id}
-              className={`${styles.headerCell} ${alignClass}`}
-              style={{ width: column.width ?? undefined }}
-            >
-              <div className={styles.headerContent}>
-                <span>{column.label}</span>
-              </div>
-            </th>
-          );
-        })}
-      </tr>
-    </thead>
-  );
-};
-
-export default TableHeader;

package/src/components/DynamicTable/TableRow.tsx

@@ -1,56 +0,0 @@
-// 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;