feat: add Table and TableSection components (#1849)

* refactor: rename ui/table to ui/data-table

* feat: add Table and TableSection components

Closes #1806

front/src/modules/ui/data-table/hooks/useTableColumns.ts

@@ -0,0 +1,115 @@
+import { useCallback, useContext } from 'react';
+import { useSetRecoilState } from 'recoil';
+
+import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import { currentViewIdScopedState } from '@/ui/view-bar/states/currentViewIdScopedState';
+import { ViewFieldForVisibility } from '@/ui/view-bar/types/ViewFieldForVisibility';
+import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
+
+import { TableContext } from '../contexts/TableContext';
+import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
+import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
+import { savedTableColumnsFamilyState } from '../states/savedTableColumnsFamilyState';
+import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
+import { ColumnDefinition } from '../types/ColumnDefinition';
+
+export const useTableColumns = () => {
+  const { onColumnsChange } = useContext(TableContext);
+
+  const [availableTableColumns] = useRecoilScopedState(
+    availableTableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const currentViewId = useRecoilScopedValue(
+    currentViewIdScopedState,
+    TableRecoilScopeContext,
+  );
+  const setSavedTableColumns = useSetRecoilState(
+    savedTableColumnsFamilyState(currentViewId),
+  );
+  const [tableColumns, setTableColumns] = useRecoilScopedState(
+    tableColumnsScopedState,
+    TableRecoilScopeContext,
+  );
+
+  const { handleColumnMove } = useMoveViewColumns();
+
+  const handleColumnsChange = useCallback(
+    async (columns: ColumnDefinition<FieldMetadata>[]) => {
+      setSavedTableColumns(columns);
+      setTableColumns(columns);
+
+      await onColumnsChange?.(columns);
+    },
+    [onColumnsChange, setSavedTableColumns, setTableColumns],
+  );
+
+  const handleColumnReorder = useCallback(
+    async (columns: ColumnDefinition<FieldMetadata>[]) => {
+      const updatedColumns = columns.map((column, index) => ({
+        ...column,
+        index,
+      }));
+
+      await handleColumnsChange(updatedColumns);
+    },
+    [handleColumnsChange],
+  );
+
+  const handleColumnVisibilityChange = useCallback(
+    async (viewField: ViewFieldForVisibility) => {
+      const isNewColumn = !tableColumns.some(
+        (tableColumns) => tableColumns.key === viewField.key,
+      );
+
+      if (isNewColumn) {
+        const newColumn = availableTableColumns.find(
+          (availableTableColumn) => availableTableColumn.key === viewField.key,
+        );
+        if (!newColumn) return;
+
+        const nextColumns = [
+          ...tableColumns,
+          { ...newColumn, isVisible: true },
+        ];
+
+        await handleColumnsChange(nextColumns);
+      } else {
+        const nextColumns = tableColumns.map((previousColumn) =>
+          previousColumn.key === viewField.key
+            ? { ...previousColumn, isVisible: !viewField.isVisible }
+            : previousColumn,
+        );
+
+        await handleColumnsChange(nextColumns);
+      }
+    },
+    [tableColumns, availableTableColumns, handleColumnsChange],
+  );
+
+  const handleMoveTableColumn = useCallback(
+    (direction: 'left' | 'right', column: ColumnDefinition<FieldMetadata>) => {
+      const currentColumnArrayIndex = tableColumns.findIndex(
+        (tableColumn) => tableColumn.key === column.key,
+      );
+      const columns = handleColumnMove(
+        direction,
+        currentColumnArrayIndex,
+        tableColumns,
+      );
+
+      setTableColumns(columns);
+    },
+    [tableColumns, setTableColumns, handleColumnMove],
+  );
+
+  return {
+    handleColumnVisibilityChange,
+    handleMoveTableColumn,
+    handleColumnReorder,
+    handleColumnsChange,
+  };
+};