@tsiky/components-r19 1.3.0 → 1.3.1

package/src/components/DynamicTable/TableauDynamique.tsx

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

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

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

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

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

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

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

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

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

@@ -1,39 +0,0 @@
-// 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/hooks/useAsyncActions.ts

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