@tsiky/components-r19 1.0.0

package/src/components/DynamicTable/TableauDynamique.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import TableHeader from './TableHeader';
+import TableBody from './TableBody';
+import Pagination from './Pagination';
+import ColumnSorter from './ColumnSorter';
+import AdvancedFilters from './AdvancedFilters';
+import type { TableauDynamiqueProps, SortConfig } from './tools/tableTypes';
+import type { FilterConfig, AppliedFilter } from './tools/filterTypes';
+import styles from './TableauDynamique.module.css';
+import { useTableData } from './hooks/useTableData';
+
+export interface EnhancedTableauDynamiqueProps<T> extends TableauDynamiqueProps<T> {
+  columnFilterable?: boolean;
+  filterConfig?: FilterConfig[];
+  externalFilters?: AppliedFilter[];
+  onFiltersChange?: (filters: AppliedFilter[]) => void;
+  onApplyFilters?: (filters: AppliedFilter[]) => void;
+  filtersControlled?: boolean;
+  debounceTimeout?: number;
+  getRowStyle?: (row: T) => React.CSSProperties;
+  background?: string;
+}
+
+export const TableauDynamique = <T,>({
+  columns = [],
+  data = [],
+  pagination = { pageSize: 10, currentPage: 1 },
+  onRowClick,
+  searchTerm = '',
+  className = '',
+  filterConfig = [],
+  externalFilters = [],
+  onFiltersChange,
+  onApplyFilters,
+  filtersControlled = false,
+  debounceTimeout = 300,
+  getRowStyle,
+  background,
+  onNewPage,
+}: EnhancedTableauDynamiqueProps<T>) => {
+  const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'asc' });
+  const [currentPage, setCurrentPage] = useState(pagination.currentPage ?? 1);
+  const [pageSize, setPageSize] = useState(pagination.pageSize ?? 10);
+
+  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const [internalFilters, setInternalFilters] = useState<AppliedFilter[]>([]);
+  const appliedFilters = filtersControlled ? externalFilters : internalFilters;
+
+  const { paginatedData, sortedData, totalPages, startIndex } = useTableData<T>(
+    data,
+    columns,
+    searchTerm,
+    sortConfig,
+    currentPage,
+    pageSize,
+    appliedFilters
+  );
+
+  useEffect(() => {
+    const safeTotal = Math.max(1, Math.floor(totalPages));
+    if (currentPage > safeTotal) {
+      setCurrentPage(safeTotal);
+    }
+    if (currentPage < 1) {
+      setCurrentPage(1);
+    }
+  }, [totalPages]);
+
+  const handleFiltersChange = (filters: AppliedFilter[]) => {
+    if (!filtersControlled) setInternalFilters(filters);
+    onFiltersChange?.(filters);
+    setCurrentPage(1);
+  };
+
+  const handleApplyFilters = (filters: AppliedFilter[]) => {
+    if (!filtersControlled) setInternalFilters(filters);
+    onApplyFilters?.(filters);
+    setCurrentPage(1);
+    setFiltersExpanded(false);
+    if (containerRef.current)
+      containerRef.current.style.setProperty('--filters-panel-height', `0px`);
+  };
+
+  const handlePageChange = (page: number) => setCurrentPage(page);
+  const handlePageSizeChange = (size: number) => {
+    setPageSize(size);
+    setCurrentPage(1);
+  };
+
+  const handlePanelHeightChange = (h: number) => {
+    if (containerRef.current) {
+      containerRef.current.style.setProperty('--filters-panel-height', `${Math.round(h)}px`);
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${styles.container} ${className} ${filtersExpanded ? 'filters-open' : ''}`}
+      style={{ background }}
+    >
+      <div className={styles.tableControls}>
+        <div className={styles.controlsRight}>
+          <ColumnSorter columns={columns} sortConfig={sortConfig} onSort={setSortConfig} />
+          {filterConfig.length > 0 && (
+            <AdvancedFilters
+              filters={filterConfig}
+              externalFilters={externalFilters}
+              onFiltersChange={handleFiltersChange}
+              onApply={handleApplyFilters}
+              isControlled={filtersControlled}
+              debounceTimeout={debounceTimeout}
+              resultsCount={sortedData.length}
+              expanded={filtersExpanded}
+              onToggle={(v: boolean | ((prevState: boolean) => boolean)) => setFiltersExpanded(v)}
+              panelPlacement='top'
+              onPanelHeightChange={handlePanelHeightChange}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className={styles.topPagination}>
+        <Pagination
+          currentPage={currentPage}
+          totalPages={Math.max(1, totalPages)}
+          pageSize={pageSize}
+          totalItems={sortedData.length}
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          onNewPage={onNewPage}
+        />
+      </div>
+
+      <div className={styles.tableWrapper} data-table-wrapper>
+        <table className={styles.table}>
+          <TableHeader columns={columns} />
+          <TableBody
+            data={paginatedData}
+            columns={columns}
+            onRowClick={onRowClick}
+            startIndex={startIndex}
+            getRowStyle={getRowStyle}
+          />
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default TableauDynamique;

package/src/components/DynamicTable/filters/BooleanFilter.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from '../TableauDynamique.module.css';
+
+interface BooleanFilterConfig {
+  label: string;
+}
+
+interface BooleanFilterProps {
+  config: BooleanFilterConfig;
+  value: boolean | '';
+  onChange: (value: boolean | '') => void;
+  disabled?: boolean;
+}
+
+const BooleanFilter: React.FC<BooleanFilterProps> = ({ config, value, onChange, disabled }) => {
+  return (
+    <select
+      value={value === '' ? '' : String(value)}
+      onChange={(e) => onChange(e.target.value === '' ? '' : e.target.value === 'true')}
+      disabled={disabled}
+      className={styles.filterSelect}
+    >
+      <option value=''>{`Filtrer ${config.label}...`}</option>
+      <option value='true'>Oui</option>
+      <option value='false'>Non</option>
+    </select>
+  );
+};
+
+export default BooleanFilter;

package/src/components/DynamicTable/filters/DateFilter.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import styles from '../TableauDynamique.module.css';
+
+interface DateFilterConfig {
+  label: string;
+}
+
+interface DateFilterProps {
+  config: DateFilterConfig;
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const DateFilter: React.FC<DateFilterProps> = ({ config, value, onChange, disabled }) => {
+  return (
+    <input
+      type='date'
+      value={value || ''}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={`Filtrer ${config.label}...`}
+      disabled={disabled}
+      className={styles.filterInput}
+    />
+  );
+};
+
+export default DateFilter;

package/src/components/DynamicTable/filters/DateRangeFilter.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styles from '../TableauDynamique.module.css';
+
+interface DateRange {
+  start: string;
+  end: string;
+}
+
+interface DateRangeFilterConfig {
+  label: string;
+}
+
+interface DateRangeFilterProps {
+  config: DateRangeFilterConfig;
+  value: DateRange;
+  onChange: (value: DateRange) => void;
+  disabled?: boolean;
+}
+
+const DateRangeFilter: React.FC<DateRangeFilterProps> = ({ value, onChange, disabled }) => {
+  const safeValue = value || {};
+  const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...safeValue, start: e.target.value });
+  };
+
+  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ ...safeValue, end: e.target.value });
+  };
+
+  return (
+    <div className={styles.dateRangeContainer}>
+      <input
+        type='date'
+        value={safeValue.start || ''}
+        onChange={handleStartChange}
+        disabled={disabled}
+        className={styles.filterInput}
+      />
+      <span className={styles.rangeSeparator}>→</span>
+      <input
+        type='date'
+        value={safeValue.end || ''}
+        onChange={handleEndChange}
+        disabled={disabled}
+        className={styles.filterInput}
+      />
+    </div>
+  );
+};
+
+export default DateRangeFilter;

package/src/components/DynamicTable/filters/FilterRenderer.tsx

@@ -0,0 +1,117 @@
+// components/TableauDynamique/filters/FilterRenderer.tsx
+import type { FilterConfig } from '../tools/filterTypes';
+import TextFilter from './TextFilter';
+import NumberFilter from './NumberFilter';
+import SelectFilter from './SelectFilter';
+import OperatorFilter from './OperatorFilter';
+import DateFilter from './DateFilter';
+import DateRangeFilter from './DateRangeFilter';
+import BooleanFilter from './BooleanFilter';
+import MultiSelectFilter from './MultiSelectFilter';
+
+interface FilterRendererProps {
+  config: FilterConfig;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  disabled?: boolean;
+}
+
+const FilterRenderer: React.FC<FilterRendererProps> = ({ config, value, onChange, disabled }) => {
+  switch (config.type) {
+    case 'text':
+    case 'search':
+      return (
+        <TextFilter
+          config={config}
+          value={value as string}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'number':
+      return (
+        <NumberFilter
+          config={config}
+          value={value as number}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'range':
+      return (
+        <NumberFilter
+          config={config}
+          value={value as number}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'select':
+      return (
+        <SelectFilter
+          config={config}
+          value={value as string | number | boolean}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'operator':
+      return (
+        <OperatorFilter
+          config={config}
+          value={value as { operator: string; value: string }}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'multiselect':
+      return (
+        <MultiSelectFilter
+          config={config}
+          value={value as string[]}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'date':
+      return (
+        <DateFilter
+          config={config}
+          value={value as string}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'daterange':
+      return (
+        <DateRangeFilter
+          config={config}
+          value={(value as { start: string; end: string }) ?? { start: '', end: '' }}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    case 'boolean':
+      return (
+        <BooleanFilter
+          config={config}
+          value={value as boolean}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
+
+    default:
+      return <div>Type de filtre non supporté: {(config as FilterConfig).type}</div>;
+  }
+};
+
+export default FilterRenderer;

package/src/components/DynamicTable/filters/MultiSelectFilter.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import styles from '../TableauDynamique.module.css';
+import type { MultiSelectFilterConfig, OperatorOption } from '../tools/filterTypes';
+
+interface MultiSelectFilterProps {
+  config: MultiSelectFilterConfig;
+  value: (string | number)[];
+  onChange: (value: (string | number)[]) => void;
+  disabled?: boolean;
+}
+
+const MultiSelectFilter: React.FC<MultiSelectFilterProps> = ({
+  config,
+  value,
+  onChange,
+  disabled,
+}) => {
+  const [options, setOptions] = useState<OperatorOption[]>([]);
+
+  useEffect(() => {
+    const loadOptions = async () => {
+      if (config.asyncOptions) {
+        try {
+          const asyncOptions = await config.asyncOptions();
+          setOptions(asyncOptions ?? []);
+        } catch (err) {
+          console.error('Erreur chargement options MultiSelect:', err);
+          setOptions([]);
+        }
+      } else {
+        setOptions(config.options ?? []);
+      }
+    };
+    loadOptions();
+  }, [config]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValues = Array.from(e.target.selectedOptions, (opt) => opt.value);
+    onChange(selectedValues);
+  };
+
+  return (
+    <select
+      multiple
+      value={value.map(String)}
+      onChange={handleChange}
+      disabled={disabled}
+      className={styles.filterMultiSelect}
+    >
+      {options.map((opt, idx) => (
+        <option key={idx} value={String(opt.value)}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default MultiSelectFilter;

package/src/components/DynamicTable/filters/NumberFilter.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import styles from '../TableauDynamique.module.css';
+
+interface NumberFilterConfig {
+  label: string;
+  placeholder?: string;
+}
+
+interface NumberFilterProps {
+  config: NumberFilterConfig;
+  value: number | '';
+  onChange: (value: number | '') => void;
+  disabled?: boolean;
+}
+
+const NumberFilter: React.FC<NumberFilterProps> = ({ config, value, onChange, disabled }) => {
+  const [inputValue, setInputValue] = useState<number | ''>(value || '');
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value === '' ? '' : Number(e.target.value);
+    setInputValue(newValue);
+    onChange(newValue);
+  };
+
+  return (
+    <input
+      type='number'
+      value={inputValue}
+      onChange={handleChange}
+      placeholder={config.placeholder || `Filtrer ${config.label}...`}
+      disabled={disabled}
+      className={styles.filterInput}
+    />
+  );
+};
+
+export default NumberFilter;

package/src/components/DynamicTable/filters/OperatorFilter.tsx

@@ -0,0 +1,64 @@
+// components/TableauDynamique/filters/OperatorFilter.tsx
+import { useState, useEffect } from 'react';
+import styles from '../TableauDynamique.module.css';
+import type { OperatorFilterConfig } from '../tools/filterTypes';
+
+interface OperatorFilterProps {
+  config: OperatorFilterConfig;
+  value: { operator: string; value: string };
+  onChange: (value: { operator: string; value: string }) => void;
+  disabled?: boolean;
+}
+
+const OperatorFilter: React.FC<OperatorFilterProps> = ({
+  config,
+  value,
+  onChange,
+  disabled = false,
+}) => {
+  const [operator, setOperator] = useState(value?.operator || '');
+  const [filterValue, setFilterValue] = useState(value?.value || '');
+
+  useEffect(() => {
+    if (operator && filterValue) {
+      onChange({ operator, value: filterValue });
+    }
+  }, [operator, filterValue, onChange]);
+
+  const handleOperatorChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setOperator(e.target.value);
+  };
+
+  const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilterValue(e.target.value);
+  };
+
+  return (
+    <div className={styles.operatorFilterContainer}>
+      <select
+        value={operator}
+        onChange={handleOperatorChange}
+        disabled={disabled}
+        className={styles.operatorSelect}
+      >
+        <option value=''>Sélectionner un opérateur</option>
+        {config.operators.map((op) => (
+          <option key={String(op.value)} value={String(op.value)}>
+            {op.label}
+          </option>
+        ))}
+      </select>
+
+      <input
+        type='text'
+        value={filterValue}
+        onChange={handleValueChange}
+        placeholder='Valeur'
+        disabled={disabled || !operator}
+        className={styles.operatorInput}
+      />
+    </div>
+  );
+};
+
+export default OperatorFilter;

package/src/components/DynamicTable/filters/SelectFilter.tsx

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

package/src/components/DynamicTable/filters/TextFilter.tsx

@@ -0,0 +1,39 @@
+// components/TableauDynamique/filters/TextFilter.tsx
+import { useState, useEffect } from 'react';
+import styles from '../TableauDynamique.module.css';
+
+interface TextFilterProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  config: any;
+  value: unknown;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+}
+
+const TextFilter: React.FC<TextFilterProps> = ({ config, value, onChange, disabled = false }) => {
+  const [inputValue, setInputValue] = useState('');
+
+  useEffect(() => {
+    // Convertir la valeur en string peu importe son type d'origine
+    setInputValue(typeof value === 'string' ? value : String(value || ''));
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    onChange(newValue);
+  };
+
+  return (
+    <input
+      type='text'
+      value={inputValue}
+      onChange={handleChange}
+      placeholder={config.placeholder || `Filtrer ${config.label}...`}
+      disabled={disabled}
+      className={styles.filterInput}
+    />
+  );
+};
+
+export default TextFilter;

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

@@ -0,0 +1,9 @@
+export * from './BooleanFilter';
+export * from './DateFilter';
+export * from './MultiSelectFilter';
+export * from './NumberFilter';
+export * from './SelectFilter';
+export * from './TextFilter';
+export * from './SelectFilter';
+export * from './FilterRenderer';
+export * from './OperatorFilter';

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

@@ -0,0 +1,2 @@
+export * from './useFilters';
+export * from './useTableData';