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/pages/companies/Companies.tsx

@@ -17,6 +17,7 @@ import {
 import { SelectedFilterType } from '@/filters-and-sorts/interfaces/filters/interface';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
+import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
 import { IconBuildingSkyscraper } from '@/ui/icons/index';
 import { IconList } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
@@ -85,6 +86,10 @@ export function Companies() {
     >
       <>
         <StyledCompaniesContainer>
+          <HooksEntityTable
+            numberOfColumns={companiesColumns.length}
+            numberOfRows={companies.length}
+          />
           <EntityTable
             data={companies}
             columns={companiesColumns}

front/src/pages/companies/companies-columns.tsx

@@ -6,7 +6,6 @@ import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEdita
 import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
-import { RecoilScope } from '@/ui/hooks/RecoilScope';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -143,9 +142,7 @@ export const useCompaniesColumns = () => {
           />
         ),
         cell: (props) => (
-          <RecoilScope>
-            <CompanyAccountOwnerCell company={props.row.original} />
-          </RecoilScope>
+          <CompanyAccountOwnerCell company={props.row.original} />
         ),
       }),
     ];

front/src/pages/people/People.tsx

@@ -17,6 +17,7 @@ import {
 } from '@/people/services';
 import { EntityTableActionBar } from '@/ui/components/table/action-bar/EntityTableActionBar';
 import { EntityTable } from '@/ui/components/table/EntityTable';
+import { HooksEntityTable } from '@/ui/components/table/HooksEntityTable';
 import { IconList, IconUser } from '@/ui/icons/index';
 import { WithTopBarContainer } from '@/ui/layout/containers/WithTopBarContainer';
 import {
@@ -76,6 +77,7 @@ export function People() {
   const peopleColumns = usePeopleColumns();
 
   const theme = useTheme();
+
   return (
     <WithTopBarContainer
       title="People"
@@ -84,6 +86,10 @@ export function People() {
     >
       <>
         <StyledPeopleContainer>
+          <HooksEntityTable
+            numberOfColumns={peopleColumns.length}
+            numberOfRows={people.length}
+          />
           <EntityTable
             data={people}
             columns={peopleColumns}

front/src/pages/people/__stories__/People.inputs.stories.tsx

@@ -52,11 +52,15 @@ export const InteractWithManyRows: Story = {
 
     await sleep(25);
 
+    const secondRowEmailCellFocused = await canvas.findByText(
+      mockedPeopleData[1].email,
+    );
+
     expect(
       canvas.queryByTestId('editable-cell-edit-mode-container'),
     ).toBeNull();
 
-    await userEvent.click(secondRowEmailCell);
+    await userEvent.click(secondRowEmailCellFocused);
 
     await sleep(25);
 

front/src/pages/people/people-columns.tsx

@@ -7,7 +7,6 @@ import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate';
 import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone';
 import { EditableText } from '@/ui/components/editable-cell/types/EditableText';
 import { ColumnHead } from '@/ui/components/table/ColumnHead';
-import { RecoilScope } from '@/ui/hooks/RecoilScope';
 import {
   IconBuildingSkyscraper,
   IconCalendarEvent,
@@ -80,11 +79,7 @@ export const usePeopleColumns = () => {
             viewIcon={<IconBuildingSkyscraper size={16} />}
           />
         ),
-        cell: (props) => (
-          <RecoilScope>
-            <PeopleCompanyCell people={props.row.original} />
-          </RecoilScope>
-        ),
+        cell: (props) => <PeopleCompanyCell people={props.row.original} />,
         size: 150,
       }),
       columnHelper.accessor('phone', {