@tsiky/components-r19 1.0.0 → 1.2.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/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;
+}

package/src/components/Grid/Grid.tsx

@@ -94,6 +94,7 @@ const Grid: React.FC<GridProps> = ({
   const handleDragStart = (e: React.DragEvent<HTMLDivElement>, index: number) => {
     e.stopPropagation();
     e.dataTransfer.setData('dragIndex', index.toString());
+    e.dataTransfer.setData('parentKey', uniqueKey.toString());
   };
 
   const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
@@ -104,6 +105,10 @@ const Grid: React.FC<GridProps> = ({
   const handleDrop = (e: React.DragEvent<HTMLDivElement>, dropIndex: number) => {
     e.preventDefault();
     const dragIndex = Number(e.dataTransfer.getData('dragIndex'));
+    const dragParent = Number(e.dataTransfer.getData('parentKey'));
+    if (container && dragParent !== uniqueKey) {
+      return;
+    }
     const updatedItems = [...items];
 
     let dropInd = -1;