Refactor/remove react table (#642)

* Refactored tables without tan stack
* Fixed checkbox behavior with multiple handlers on click
* Fixed hotkeys scope
* Fix debounce in editable cells
* Lowered coverage

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/people/table/components/EditablePeopleCityCell.tsx

@@ -0,0 +1,30 @@
+import { useRecoilValue } from 'recoil';
+
+import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
+import { EditableCellPhone } from '@/ui/components/editable-cell/types/EditableCellPhone';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleCityCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
+
+  return (
+    <EditableCellPhone
+      value={city ?? ''}
+      onChange={async (newCity: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            city: newCity,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleCompanyCell.tsx

@@ -0,0 +1,26 @@
+import { useRecoilValue } from 'recoil';
+
+import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
+import { peopleCompanyFamilyState } from '@/people/states/peopleCompanyFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+
+export function EditablePeopleCompanyCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const company = useRecoilValue(
+    peopleCompanyFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <PeopleCompanyCell
+      people={{
+        id: currentRowEntityId ?? '',
+        company: {
+          domainName: company?.domainName ?? '',
+          name: company?.name ?? '',
+          id: company?.id ?? '',
+        },
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleCreatedAtCell.tsx

@@ -0,0 +1,33 @@
+import { DateTime } from 'luxon';
+import { useRecoilValue } from 'recoil';
+
+import { peopleCreatedAtFamilyState } from '@/people/states/peopleCreatedAtFamilyState';
+import { EditableCellDate } from '@/ui/components/editable-cell/types/EditableCellDate';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleCreatedAtCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const createdAt = useRecoilValue(
+    peopleCreatedAtFamilyState(currentRowEntityId ?? ''),
+  );
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  return (
+    <EditableCellDate
+      onChange={async (newDate: Date) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            createdAt: newDate.toISOString(),
+          },
+        });
+      }}
+      value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleEmailCell.tsx

@@ -0,0 +1,32 @@
+import { useRecoilValue } from 'recoil';
+
+import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
+import { EditableCellText } from '@/ui/components/editable-cell/types/EditableCellText';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleEmailCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const email = useRecoilValue(
+    peopleEmailFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditableCellText
+      value={email ?? ''}
+      onChange={async (newEmail: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            email: newEmail,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeopleFullNameCell.tsx

@@ -0,0 +1,38 @@
+import { useRecoilValue } from 'recoil';
+
+import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
+import { peopleNameCellFamilyState } from '@/people/states/peopleNamesFamilyState';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeopleFullNameCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const { commentCount, firstName, lastName } = useRecoilValue(
+    peopleNameCellFamilyState(currentRowEntityId ?? ''),
+  );
+
+  return (
+    <EditablePeopleFullName
+      person={{
+        id: currentRowEntityId ?? undefined,
+        _commentThreadCount: commentCount ?? undefined,
+        firstName: firstName ?? undefined,
+        lastName: lastName ?? undefined,
+      }}
+      onChange={async (firstName: string, lastName: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            firstName,
+            lastName,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/EditablePeoplePhoneCell.tsx

@@ -0,0 +1,31 @@
+import { useRecoilValue } from 'recoil';
+
+import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
+import { EditableCellPhone } from '@/ui/components/editable-cell/types/EditableCellPhone';
+import { useCurrentRowEntityId } from '@/ui/tables/hooks/useCurrentEntityId';
+import { useUpdatePeopleMutation } from '~/generated/graphql';
+
+export function EditablePeoplePhoneCell() {
+  const currentRowEntityId = useCurrentRowEntityId();
+
+  const [updatePerson] = useUpdatePeopleMutation();
+
+  const phone = useRecoilValue(
+    peoplePhoneFamilyState(currentRowEntityId ?? ''),
+  );
+  return (
+    <EditableCellPhone
+      value={phone ?? ''}
+      onChange={async (newPhone: string) => {
+        if (!currentRowEntityId) return;
+
+        await updatePerson({
+          variables: {
+            id: currentRowEntityId,
+            phone: newPhone,
+          },
+        });
+      }}
+    />
+  );
+}

front/src/modules/people/table/components/peopleColumns.tsx

@@ -0,0 +1,68 @@
+import {
+  IconBuildingSkyscraper,
+  IconCalendarEvent,
+  IconMail,
+  IconMap,
+  IconPhone,
+  IconUser,
+} from '@/ui/icons/index';
+
+import { EditablePeopleCityCell } from './EditablePeopleCityCell';
+import { EditablePeopleCompanyCell } from './EditablePeopleCompanyCell';
+import { EditablePeopleCreatedAtCell } from './EditablePeopleCreatedAtCell';
+import { EditablePeopleEmailCell } from './EditablePeopleEmailCell';
+import { EditablePeopleFullNameCell } from './EditablePeopleFullNameCell';
+import { EditablePeoplePhoneCell } from './EditablePeoplePhoneCell';
+
+export type TableColumn = {
+  id: string;
+  title: string;
+  icon: JSX.Element;
+  size: number;
+  cellComponent: JSX.Element;
+};
+
+export const peopleColumns: TableColumn[] = [
+  {
+    id: 'fullName',
+    title: 'People',
+    icon: <IconUser size={16} />,
+    size: 210,
+    cellComponent: <EditablePeopleFullNameCell />,
+  },
+  {
+    id: 'email',
+    title: 'Email',
+    icon: <IconMail size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleEmailCell />,
+  },
+  {
+    id: 'company',
+    title: 'Company',
+    icon: <IconBuildingSkyscraper size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleCompanyCell />,
+  },
+  {
+    id: 'phone',
+    title: 'Phone',
+    icon: <IconPhone size={16} />,
+    size: 150,
+    cellComponent: <EditablePeoplePhoneCell />,
+  },
+  {
+    id: 'createdAt',
+    title: 'Creation',
+    icon: <IconCalendarEvent size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleCreatedAtCell />,
+  },
+  {
+    id: 'city',
+    title: 'City',
+    icon: <IconMap size={16} />,
+    size: 150,
+    cellComponent: <EditablePeopleCityCell />,
+  },
+];