Add tab hotkey on table page (#457)

* wip

* wip

* - Added scopes on useHotkeys
- Use new EditableCellV2
- Implemented Recoil Scoped State with specific context
- Implemented soft focus position
- Factorized open/close editable cell
- Removed editable relation old components
- Broke down entity table into multiple components
- Added Recoil Scope by CellContext
- Added Recoil Scope by RowContext

* First working version

* Use a new EditableCellSoftFocusMode

* Fixed initialize soft focus

* Fixed enter mode

* Added TODO

* Fix

* Fixes

* Fix tests

* Fix lint

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

front/src/modules/ui/tables/states/CellContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const CellContext = createContext<string | null>(null);

front/src/modules/ui/tables/states/RowContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const RowContext = createContext<string | null>(null);

front/src/modules/ui/tables/states/currentColumnNumberScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const currentColumnNumberScopedState = atomFamily<number, string>({
+  key: 'currentColumnNumberScopedState',
+  default: 0,
+});

front/src/modules/ui/tables/states/currentRowNumberScopedState.ts

@@ -0,0 +1,6 @@
+import { atomFamily } from 'recoil';
+
+export const currentRowNumberScopedState = atomFamily<number, string>({
+  key: 'currentRowNumberScopedState',
+  default: 0,
+});

front/src/modules/ui/tables/states/entityTableDimensionsState.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+import { TableDimensions } from '../hooks/useInitializeEntityTable';
+
+export const entityTableDimensionsState = atom<TableDimensions>({
+  key: 'entityTableDimensionsState',
+  default: {
+    numberOfRows: 0,
+    numberOfColumns: 0,
+  },
+});

front/src/modules/ui/tables/states/isSoftFocusOnCellFamilyState.ts

@@ -0,0 +1,8 @@
+import { atomFamily } from 'recoil';
+
+import { TablePosition } from '../types/TablePosition';
+
+export const isSoftFocusOnCellFamilyState = atomFamily<boolean, TablePosition>({
+  key: 'isSoftFocusOnCellFamilyState',
+  default: false,
+});

front/src/modules/ui/tables/states/numberOfTableColumnsSelectorState.ts

@@ -0,0 +1,12 @@
+import { selector } from 'recoil';
+
+import { entityTableDimensionsState } from './entityTableDimensionsState';
+
+export const numberOfTableColumnsSelectorState = selector<number>({
+  key: 'numberOfTableColumnsState',
+  get: ({ get }) => {
+    const { numberOfColumns } = get(entityTableDimensionsState);
+
+    return numberOfColumns;
+  },
+});

front/src/modules/ui/tables/states/numberOfTableRowsSelectorState.ts

@@ -0,0 +1,12 @@
+import { selector } from 'recoil';
+
+import { entityTableDimensionsState } from './entityTableDimensionsState';
+
+export const numberOfTableRowsSelectorState = selector<number>({
+  key: 'numberOfTableRowsState',
+  get: ({ get }) => {
+    const { numberOfRows } = get(entityTableDimensionsState);
+
+    return numberOfRows;
+  },
+});

front/src/modules/ui/tables/states/softFocusPositionState.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+import { TablePosition } from '../types/TablePosition';
+
+export const softFocusPositionState = atom<TablePosition>({
+  key: 'softFocusPositionState',
+  default: {
+    row: 0,
+    column: 1,
+  },
+});