@tsiky/components-r19 1.0.0

package/src/components/DynamicTable/hooks/useAsyncActions.ts

@@ -0,0 +1,36 @@
+// hooks/useAsyncActions.ts
+import { useState, useCallback } from 'react';
+
+export const useAsyncActions = () => {
+  const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});
+  const [errorStates, setErrorStates] = useState<Record<string, string>>({});
+
+  const executeAsyncAction = useCallback(
+    async (
+      filterId: string,
+      asyncFunction: (currentValue: unknown) => Promise<unknown>,
+      currentValue: unknown
+    ) => {
+      setLoadingStates((prev) => ({ ...prev, [filterId]: true }));
+      setErrorStates((prev) => ({ ...prev, [filterId]: '' }));
+
+      try {
+        const result = await asyncFunction(currentValue);
+        setLoadingStates((prev) => ({ ...prev, [filterId]: false }));
+        return result;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : 'Une erreur est survenue';
+        setErrorStates((prev) => ({ ...prev, [filterId]: errorMessage }));
+        setLoadingStates((prev) => ({ ...prev, [filterId]: false }));
+        throw error;
+      }
+    },
+    []
+  );
+
+  return {
+    loadingStates,
+    errorStates,
+    executeAsyncAction,
+  };
+};

package/src/components/DynamicTable/hooks/useFilters.ts

@@ -0,0 +1,142 @@
+// hooks/useFilters.ts
+import { useState, useCallback } from 'react';
+import type { AppliedFilter, FilterConfig } from '../tools/filterTypes';
+
+interface UseFiltersProps {
+  filters: FilterConfig[];
+  externalFilters?: AppliedFilter[];
+  onFiltersChange?: (filters: AppliedFilter[]) => void;
+  onApply?: (filters: AppliedFilter[]) => void;
+  debounceTimeout?: number;
+  isControlled?: boolean;
+}
+
+export const useFilters = ({
+  filters,
+  externalFilters = [],
+  onFiltersChange,
+  onApply,
+  isControlled = false,
+}: UseFiltersProps) => {
+  const [internalFilters, setInternalFilters] = useState<AppliedFilter[]>([]);
+  const [tempFilters, setTempFilters] = useState<Record<string, unknown>>(() => {
+    const initialFilters: Record<string, unknown> = {};
+    filters.forEach((filter) => {
+      if (filter.type === 'daterange') {
+        initialFilters[filter.id] = { start: '', end: '' };
+      } else {
+        initialFilters[filter.id] = filter.defaultValue ?? '';
+      }
+    });
+    return initialFilters;
+  });
+
+  const appliedFilters = isControlled ? externalFilters : internalFilters;
+
+  const updateFilter = useCallback((filterId: string, value: unknown) => {
+    setTempFilters((prev) => ({ ...prev, [filterId]: value }));
+  }, []);
+
+  /**
+   * Applique les filtres.
+   * Supporte :
+   *  - valeur simple
+   *  - valeur fonction (async) : la fonction est appelée avec tempFilters et son résultat est utilisé
+   *  - config.executeOnApply : si présente, elle est appelée et son résultat est utilisé
+   */
+  const applyFilters = useCallback(async (): Promise<AppliedFilter[]> => {
+    const newFilters: AppliedFilter[] = [];
+
+    // clone snapshot parce qu'on peut appeler des fonctions asynchrones
+    const snapshot = { ...tempFilters };
+
+    for (const [filterId, rawValue] of Object.entries(snapshot)) {
+      const config = filters.find((f) => f.id === filterId);
+      if (!config) continue;
+
+      let resolvedValue: unknown = rawValue;
+
+      try {
+        // 1) Si la valeur est une fonction, exécute-la (on la considère parfois fournie par l'utilisateur)
+        if (typeof rawValue === 'function') {
+          // note : on autorise fonctions sync ou async
+          // @ts-ignore - on sait que c'est callable
+          resolvedValue = await (
+            rawValue as (temp: Record<string, unknown>) => Promise<unknown> | unknown
+          )(snapshot);
+        }
+
+        // 2) Si la config du filtre propose executeOnApply, elle prend la priorité
+        if (typeof config.executeOnApply === 'function') {
+          resolvedValue = await config.executeOnApply(resolvedValue, snapshot);
+        }
+      } catch (err) {
+        // En cas d'erreur dans la fonction fournie, on skip le filtre (ou on pourrait journaliser)
+        // Ici on considère que le filtre n'est pas appliqué si l'exécution échoue.
+        // Tu peux adapter pour propager l'erreur si tu veux.
+        // console.error(`Erreur executeOnApply pour ${filterId}`, err);
+        continue;
+      }
+
+      // 3) Condition d'ajout : valeur définie et non vide
+      const empty =
+        resolvedValue === undefined ||
+        resolvedValue === null ||
+        (typeof resolvedValue === 'string' && (resolvedValue as string).trim() === '') ||
+        (Array.isArray(resolvedValue) && resolvedValue.length === 0);
+
+      if (!empty) {
+        newFilters.push({
+          id: filterId,
+          type: config.type,
+          value: resolvedValue,
+          label: config.label,
+        });
+      }
+    }
+
+    // Notify
+    if (isControlled) {
+      onFiltersChange?.(newFilters);
+    } else {
+      setInternalFilters(newFilters);
+      onApply?.(newFilters);
+    }
+
+    return newFilters;
+  }, [tempFilters, filters, isControlled, onFiltersChange, onApply]);
+
+  const clearFilter = useCallback(
+    (filterId: string) => {
+      setTempFilters((prev) => ({ ...prev, [filterId]: undefined }));
+      updateFilter(filterId, undefined);
+    },
+    [updateFilter]
+  );
+
+  const clearAllFilters = useCallback(() => {
+    const reset: Record<string, unknown> = {};
+    filters.forEach((f) => {
+      if (f.type === 'daterange') reset[f.id] = { start: '', end: '' };
+      else reset[f.id] = f.defaultValue ?? '';
+    });
+
+    setTempFilters(reset);
+
+    if (isControlled) {
+      onFiltersChange?.([]);
+    } else {
+      setInternalFilters([]);
+      onApply?.([]);
+    }
+  }, [filters, isControlled, onFiltersChange, onApply]);
+
+  return {
+    appliedFilters,
+    tempFilters,
+    updateFilter,
+    applyFilters,
+    clearFilter,
+    clearAllFilters,
+  };
+};

package/src/components/DynamicTable/hooks/useTableData.ts

@@ -0,0 +1,216 @@
+// hooks/useTableData.ts
+import { useMemo } from 'react';
+import type { TableColumn, TableRowData, SortConfig } from '../tools/tableTypes';
+import type { AppliedFilter } from '../tools/filterTypes';
+
+// Fonction utilitaire pour comparer les valeurs en fonction du type de filtre
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const matchesFilter = (value: any, filter: AppliedFilter): boolean => {
+  if (value === null || value === undefined) return false;
+
+  const filterValue = filter.value;
+
+  // Si filterValue est undefined ou null, retourner false
+  if (filterValue === null || filterValue === undefined) {
+    return false;
+  }
+
+  switch (filter.type) {
+    case 'text':
+    case 'search':
+      return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+
+    case 'number':
+    case 'range':
+      return Number(value) === Number(filterValue);
+
+    case 'select':
+    case 'multiselect':
+      if (Array.isArray(filterValue)) {
+        return (
+          filterValue.includes(value) || filterValue.map((v) => String(v)).includes(String(value))
+        );
+      }
+      return String(value) === String(filterValue);
+
+    case 'boolean':
+      return Boolean(value) === Boolean(filterValue);
+
+    case 'date':
+      return new Date(value).getTime() === new Date(String(filterValue)).getTime();
+
+    case 'daterange':
+      try {
+        if (!filterValue || typeof filterValue !== 'object') {
+          return false;
+        }
+
+        const rangeValue = filterValue as Record<string, unknown>;
+
+        // Vérification plus robuste des propriétés
+        if (!rangeValue.start || !rangeValue.end) {
+          return false;
+        }
+
+        const start = rangeValue.start;
+        const end = rangeValue.end;
+
+        if (typeof start !== 'string' || typeof end !== 'string' || !start.trim() || !end.trim()) {
+          return false;
+        }
+
+        const dateValue = new Date(value).getTime();
+        const startDate = new Date(start).getTime();
+        const endDate = new Date(end).getTime();
+
+        if (isNaN(dateValue) || isNaN(startDate) || isNaN(endDate)) {
+          return false;
+        }
+
+        return dateValue >= startDate && dateValue <= endDate;
+      } catch (error) {
+        console.error('Error processing daterange filter:', error);
+        return false;
+      }
+
+    case 'operator':
+      if (typeof filterValue === 'object' && filterValue !== null) {
+        const operatorFilter = filterValue as { operator?: unknown; value?: unknown };
+
+        // Vérifier que les propriétés existent
+        if (!('operator' in operatorFilter) || !('value' in operatorFilter)) {
+          return false;
+        }
+
+        const { operator, value: opValue } = operatorFilter as { operator: string; value: string };
+        const numValue = Number(value);
+        const numOpValue = Number(opValue);
+
+        // Vérifier que les valeurs numériques sont valides
+        if (isNaN(numValue) || isNaN(numOpValue)) {
+          return String(value).includes(String(opValue));
+        }
+
+        switch (operator) {
+          case 'equals':
+            return numValue === numOpValue;
+          case 'gt':
+            return numValue > numOpValue;
+          case 'lt':
+            return numValue < numOpValue;
+          case 'gte':
+            return numValue >= numOpValue;
+          case 'lte':
+            return numValue <= numOpValue;
+          default:
+            return String(value).includes(String(opValue));
+        }
+      }
+      return false;
+
+    default:
+      return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+  }
+};
+
+export function useTableData<T>(
+  data: TableRowData<T>[],
+  columns: TableColumn<T>[],
+  searchTerm: string = '',
+  sortConfig: SortConfig = { key: null, direction: 'asc' },
+  currentPage: number = 1,
+  pageSize: number = 10,
+  appliedFilters: AppliedFilter[] = []
+): {
+  paginatedData: TableRowData<T>[];
+  sortedData: TableRowData<T>[];
+  filteredData: TableRowData<T>[];
+  totalPages: number;
+  startIndex: number;
+  endIndex: number;
+} {
+  const safePageSize = Math.max(1, pageSize);
+  const normalizedSearch = (searchTerm || '').trim().toLowerCase();
+
+  const filteredData = useMemo(() => {
+    let result = data;
+
+    // Filtrage par recherche globale
+    if (normalizedSearch) {
+      result = result.filter((row) =>
+        columns.some((column) => {
+          const value = row.data[column.id as keyof T];
+          if (value === null || value === undefined) return false;
+          return String(value).toLowerCase().includes(normalizedSearch);
+        })
+      );
+    }
+
+    // Filtrage par les filtres appliqués
+    if (appliedFilters.length > 0) {
+      result = result.filter((row) => {
+        return appliedFilters.every((filter) => {
+          try {
+            const value = row.data[filter.id as keyof T];
+            return matchesFilter(value, filter);
+          } catch (error) {
+            console.error('Error applying filter:', error);
+            return false;
+          }
+        });
+      });
+    }
+
+    return result;
+  }, [data, columns, normalizedSearch, appliedFilters]);
+
+  const sortedData = useMemo(() => {
+    if (!sortConfig?.key) return filteredData;
+
+    const key = sortConfig.key as keyof T;
+    return [...filteredData].sort((a, b) => {
+      const aValue = a.data[key];
+      const bValue = b.data[key];
+
+      // Gestion des valeurs nulles ou non définies
+      if (aValue === null || aValue === undefined) return 1;
+      if (bValue === null || bValue === undefined) return -1;
+
+      // Nombres
+      if (typeof aValue === 'number' && typeof bValue === 'number') {
+        return sortConfig.direction === 'desc' ? bValue - aValue : aValue - bValue;
+      }
+
+      // Dates
+      if (aValue instanceof Date && bValue instanceof Date) {
+        const diff = aValue.getTime() - bValue.getTime();
+        return sortConfig.direction === 'desc' ? -diff : diff;
+      }
+
+      // Fallback à la comparaison de chaînes
+      const cmp = String(aValue).localeCompare(String(bValue), undefined, {
+        numeric: true,
+        sensitivity: 'base',
+      });
+      return sortConfig.direction === 'desc' ? -cmp : cmp;
+    });
+  }, [filteredData, sortConfig]);
+
+  const paginatedData = useMemo(() => {
+    const start = (currentPage - 1) * safePageSize;
+    return sortedData.slice(start, start + safePageSize);
+  }, [sortedData, currentPage, safePageSize]);
+
+  const totalPages = Math.ceil(sortedData.length / safePageSize);
+  const startIndex = sortedData.length === 0 ? 0 : (currentPage - 1) * safePageSize + 1;
+  const endIndex = Math.min(currentPage * safePageSize, sortedData.length);
+
+  return {
+    paginatedData,
+    sortedData,
+    filteredData,
+    totalPages,
+    startIndex,
+    endIndex,
+  };
+}

package/src/components/DynamicTable/index.ts

@@ -0,0 +1,11 @@
+export * from './filters';
+export * from './hooks';
+export * from './tools';
+export * from './AdvancedFilters';
+export * from './ColumnSorter';
+export * from './Pagination';
+export * from './TableauDynamique';
+export * from './TableBody';
+export * from './TableHeader';
+export * from './TableRow';
+export * from './TableCell';

package/src/components/DynamicTable/tools/filterTypes.ts

@@ -0,0 +1,118 @@
+// utils/filterTypes.ts
+export type FilterType =
+  | 'text'
+  | 'number'
+  | 'date'
+  | 'select'
+  | 'checkbox'
+  | 'range'
+  | 'toggle'
+  | 'search'
+  | 'operator'
+  | 'multiselect'
+  | 'daterange'
+  | 'boolean';
+
+export interface OperatorOption {
+  value: string | number | boolean;
+  label: string;
+}
+
+export interface BaseFilterConfig {
+  id: string;
+  type: FilterType;
+  label: string;
+  placeholder?: string;
+  defaultValue?: unknown;
+  debounce?: number;
+  required?: boolean;
+  disabled?: boolean;
+
+  /**
+   * Optionnel : fonction appelée quand on "applique" les filtres.
+   * Utile si le filtre doit exécuter du code asynchrone (ex : appeler une API)
+   * avant de retourner la valeur finale à utiliser pour filtrer.
+   *
+   * signature : (value, tempFilters) => Promise<resolvedValue> | resolvedValue
+   */
+  executeOnApply?: (
+    value: unknown,
+    tempFilters: Record<string, unknown>
+  ) => Promise<unknown> | unknown;
+}
+
+export interface TextFilterConfig extends BaseFilterConfig {
+  type: 'text' | 'search';
+}
+
+export interface NumberFilterConfig extends BaseFilterConfig {
+  type: 'number';
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+export interface RangeFilterConfig extends BaseFilterConfig {
+  type: 'range';
+  min: number;
+  max: number;
+  step?: number;
+  defaultValue?: { min: number; max: number };
+}
+
+export interface SelectFilterConfig extends BaseFilterConfig {
+  type: 'select';
+  options?: OperatorOption[];
+  asyncOptions?: () => Promise<OperatorOption[]>;
+  isMulti?: boolean;
+}
+
+export interface MultiSelectFilterConfig extends BaseFilterConfig {
+  type: 'multiselect';
+  options?: OperatorOption[];
+  asyncOptions?: () => Promise<OperatorOption[]>;
+}
+
+export interface OperatorFilterConfig extends BaseFilterConfig {
+  type: 'operator';
+  operators: OperatorOption[];
+  defaultValue?: { operator: string; value: string };
+}
+
+export interface DateFilterConfig extends BaseFilterConfig {
+  type: 'date';
+}
+
+export interface DateRangeFilterConfig extends BaseFilterConfig {
+  type: 'daterange';
+  defaultValue?: { start: string; end: string };
+}
+
+export interface BooleanFilterConfig extends BaseFilterConfig {
+  type: 'boolean';
+}
+
+export type FilterConfig =
+  | TextFilterConfig
+  | NumberFilterConfig
+  | RangeFilterConfig
+  | SelectFilterConfig
+  | MultiSelectFilterConfig
+  | OperatorFilterConfig
+  | DateFilterConfig
+  | DateRangeFilterConfig
+  | BooleanFilterConfig;
+
+export interface AppliedFilter {
+  id: string;
+  type: FilterType;
+  value: unknown;
+  label: string;
+}
+
+export interface FilterComponentProps {
+  config: FilterConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled?: boolean;
+}

package/src/components/DynamicTable/tools/index.ts

@@ -0,0 +1,3 @@
+export * from './filterTypes';
+export * from './tableConfig';
+export * from './tableTypes';

package/src/components/DynamicTable/tools/tableConfig.ts

@@ -0,0 +1,96 @@
+import React, { type ComponentType } from 'react';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import type { RendererProps, TableConfigType } from './tableTypes';
+
+// Renderers par défaut (inchangés)
+export const TextRenderer: React.FC<RendererProps> = ({ value }) => value;
+export const EmailRenderer: React.FC<RendererProps> = ({ value }) =>
+  React.createElement(
+    'a',
+    {
+      href: `mailto:${value}`,
+      className: 'email-link',
+    },
+    value
+  );
+export const LinkRenderer: React.FC<RendererProps> = ({ value }) =>
+  React.createElement(
+    'a',
+    {
+      href: String(value),
+      target: '_blank',
+      rel: 'noopener noreferrer',
+      className: 'text-link',
+    },
+    value
+  );
+export const BadgeRenderer: React.FC<RendererProps> = ({ value }) => {
+  if (!value) return null;
+  const badgeTypes: Record<string, string> = {
+    success: 'success-badge',
+    warning: 'warning-badge',
+    error: 'error-badge',
+    info: 'info-badge',
+    default: 'default-badge',
+  };
+  const type = typeof value === 'object' ? value.type : 'default';
+  const text = typeof value === 'object' ? value.text : value;
+  const className = badgeTypes[type] || badgeTypes.default;
+  return React.createElement('span', { className: `badge ${className}` }, text);
+};
+export const DateRenderer: React.FC<RendererProps> = ({ value }) => {
+  try {
+    return new Date(value).toLocaleDateString();
+  } catch {
+    return String(value);
+  }
+};
+export const NumberRenderer: React.FC<RendererProps> = ({ value }) =>
+  React.createElement('span', { className: 'number-value' }, Number(value).toLocaleString());
+export const CurrencyRenderer: React.FC<RendererProps> = ({ value }) =>
+  React.createElement(
+    'span',
+    { className: 'currency-value' },
+    new Intl.NumberFormat('fr-FR', {
+      style: 'currency',
+      currency: 'EUR',
+    }).format(Number(value))
+  );
+export const ImageRenderer: React.FC<RendererProps> = ({ value }) =>
+  React.createElement(
+    'div',
+    { className: 'image-container' },
+    React.createElement('img', {
+      src: value,
+      alt: 'Table content',
+      className: 'table-image',
+      onError: (e) => (e.currentTarget.style.display = 'none'),
+    })
+  );
+
+// Configuration globale modifiée
+export const tableConfig: TableConfigType = {
+  renderers: {
+    text: TextRenderer,
+    email: EmailRenderer,
+    link: LinkRenderer,
+    badge: BadgeRenderer,
+    date: DateRenderer,
+    number: NumberRenderer,
+    currency: CurrencyRenderer,
+    image: ImageRenderer,
+  },
+  icons: {
+    sortAsc: React.createElement(ChevronUp, { className: 'sort-icon active', size: 14 }),
+    sortDesc: React.createElement(ChevronDown, { className: 'sort-icon active', size: 14 }),
+    sortDefault: React.createElement(ChevronsUpDown, { className: 'sort-icon', size: 14 }),
+  },
+};
+
+// Fonction d'extension (inchangée)
+export const registerRenderer = (name: string, renderer: ComponentType<RendererProps>) => {
+  if (tableConfig.renderers[name]) {
+    console.warn(`Le renderer "${name}" existe déjà et sera écrasé.`);
+  }
+  tableConfig.renderers[name] = renderer;
+};

package/src/components/DynamicTable/tools/tableTypes.ts

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