@tsiky/components-r19 1.3.0 → 1.3.1

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

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

@@ -1,216 +0,0 @@
-// 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/tools/filterTypes.ts

@@ -1,118 +0,0 @@
-// 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/tableConfig.ts

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

@@ -1,63 +0,0 @@
-/* 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;
-}