@tsiky/components-r19 1.1.0 → 1.3.0

package/src/components/DynamicTable/TableauDynamique.tsx

@@ -1,154 +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;
+'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/SelectFilter.tsx

@@ -1,69 +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;
+// 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/tools/tableTypes.ts

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