Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/.storybook/preview.ts

@@ -2,7 +2,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { Preview } from '@storybook/react';
 import { ThemeProvider } from '@emotion/react';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
-import { lightTheme, darkTheme } from '../src/modules/ui/themes/themes';
+import { lightTheme, darkTheme } from '../src/modules/ui/theme/constants/theme';
 import { RootDecorator } from '../src/testing/decorators/RootDecorator';
 import 'react-loading-skeleton/dist/skeleton.css';
 import { mockedUserJWT } from '../src/testing/mock-data/jwt';

front/src/index.tsx

@@ -6,8 +6,8 @@ import { RecoilRoot } from 'recoil';
 import { ApolloProvider } from '@/apollo/components/ApolloProvider';
 import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider';
 import { SnackBarProvider } from '@/ui/snack-bar/components/SnackBarProvider';
-import { AppThemeProvider } from '@/ui/themes/components/AppThemeProvider';
+import { AppThemeProvider } from '@/ui/theme/components/AppThemeProvider';
-import { ThemeType } from '@/ui/themes/themes';
+import { ThemeType } from '@/ui/theme/constants/theme';
 import { UserProvider } from '@/users/components/UserProvider';
 
 import '@emotion/react';

front/src/modules/activities/components/ActivityAssigneePicker.tsx

@@ -1,9 +1,9 @@
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   Activity,
   User,

front/src/modules/activities/components/ActivityComments.tsx

@@ -4,8 +4,8 @@ import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { currentUserState } from '@/auth/states/currentUserState';
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { AutosizeTextInput } from '@/ui/input/autosize-text/components/AutosizeTextInput';
-import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import { Activity, useCreateCommentMutation } from '~/generated/graphql';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 

front/src/modules/activities/components/ActivityEditor.tsx

@@ -8,8 +8,8 @@ import { ActivityTypeDropdown } from '@/activities/components/ActivityTypeDropdo
 import { GET_ACTIVITIES_BY_TARGETS } from '@/activities/queries';
 import { PropertyBox } from '@/ui/editable-field/property-box/components/PropertyBox';
 import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconCalendar } from '@/ui/icon/index';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {
   Activity,
   ActivityTarget,

front/src/modules/activities/components/ActivityRelationPicker.tsx

@@ -12,12 +12,12 @@ import { CompanyChip } from '@/companies/components/CompanyChip';
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
 import { PersonChip } from '@/people/components/PersonChip';
 import { useFilteredSearchPeopleQuery } from '@/people/queries';
-import { useListenClickOutside } from '@/ui/hooks/useListenClickOutside';
+import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
-import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { useListenClickOutside } from '@/ui/utilities/click-outside/hooks/useListenClickOutside';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { MultipleEntitySelect } from '@/ui/relation-picker/components/MultipleEntitySelect';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Activity, ActivityTarget, CommentableType } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 

front/src/modules/activities/components/ActivityTitle.tsx

@@ -4,7 +4,7 @@ import {
   Checkbox,
   CheckboxShape,
   CheckboxSize,
-} from '@/ui/input/components/Checkbox';
+} from '@/ui/input/checkbox/components/Checkbox';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledEditableTitleInput = styled.input<{

front/src/modules/activities/editable-fields/components/ActivityAssigneeEditableField.tsx

@@ -1,8 +1,8 @@
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconUserCircle } from '@/ui/icon';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { UserChip } from '@/users/components/UserChip';
 import { Company, User } from '~/generated/graphql';
 

front/src/modules/activities/editable-fields/components/ActivityRelationEditableField.tsx

@@ -5,8 +5,8 @@ import { PersonChip } from '@/people/components/PersonChip';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconArrowUpRight } from '@/ui/icon';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
   Activity,
   ActivityTarget,

front/src/modules/activities/editable-fields/components/ActivityRelationEditableFieldEditMode.tsx

@@ -6,7 +6,7 @@ import { flatMapAndSortEntityForSelectArrayOfArrayByName } from '@/activities/ut
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
 import { useFilteredSearchPeopleQuery } from '@/people/queries';
 import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
-import { MultipleEntitySelect } from '@/ui/relation-picker/components/MultipleEntitySelect';
+import { MultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
 import { Activity, ActivityTarget } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 

front/src/modules/activities/hooks/useOpenActivityRightDrawer.ts

@@ -1,9 +1,9 @@
 import { useRecoilState } from 'recoil';
 
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
 import { viewableActivityIdState } from '../states/viewableActivityIdState';
 

front/src/modules/activities/hooks/useOpenCreateActivityDrawer.ts

@@ -5,10 +5,10 @@ import { v4 } from 'uuid';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { GET_COMPANIES } from '@/companies/queries';
 import { GET_PEOPLE } from '@/people/queries';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { ActivityType, useCreateActivityMutation } from '~/generated/graphql';
 
 import { GET_ACTIVITIES_BY_TARGETS, GET_ACTIVITY } from '../queries';

front/src/modules/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds.ts

@@ -5,11 +5,11 @@ import { v4 } from 'uuid';
 import { currentUserState } from '@/auth/states/currentUserState';
 import { GET_COMPANIES } from '@/companies/queries';
 import { GET_PEOPLE } from '@/people/queries';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import {
   ActivityType,
   CommentableType,

front/src/modules/activities/hooks/useOpenTimelineRightDrawer.ts

@@ -1,9 +1,9 @@
 import { useRecoilState } from 'recoil';
 
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
 import { useRightDrawer } from '@/ui/right-drawer/hooks/useRightDrawer';
 import { RightDrawerHotkeyScope } from '@/ui/right-drawer/types/RightDrawerHotkeyScope';
 import { RightDrawerPages } from '@/ui/right-drawer/types/RightDrawerPages';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 
 import { commentableEntityArrayState } from '../states/commentableEntityArrayState';
 import { CommentableEntity } from '../types/CommentableEntity';

front/src/modules/activities/right-drawer/components/RightDrawerTimeline.tsx

@@ -2,27 +2,21 @@ import { useRecoilState } from 'recoil';
 
 import { commentableEntityArrayState } from '@/activities/states/commentableEntityArrayState';
 import { Timeline } from '@/activities/timeline/components/Timeline';
-import { RightDrawerBody } from '@/ui/right-drawer/components/RightDrawerBody';
-import { RightDrawerPage } from '@/ui/right-drawer/components/RightDrawerPage';
-import { RightDrawerTopBar } from '@/ui/right-drawer/components/RightDrawerTopBar';
 
 export function RightDrawerTimeline() {
   const [commentableEntityArray] = useRecoilState(commentableEntityArrayState);
 
   return (
-    <RightDrawerPage>
+    <>
-      <RightDrawerTopBar />
+      {commentableEntityArray.map((commentableEntity) => (
-      <RightDrawerBody>
+        <Timeline
-        {commentableEntityArray.map((commentableEntity) => (
+          key={commentableEntity.id}
-          <Timeline
+          entity={{
-            key={commentableEntity.id}
+            id: commentableEntity?.id ?? '',
-            entity={{
+            type: commentableEntity.type,
-              id: commentableEntity?.id ?? '',
+          }}
-              type: commentableEntity.type,
+        />
-            }}
+      ))}
-          />
+    </>
-        ))}
-      </RightDrawerBody>
-    </RightDrawerPage>
   );
 }

front/src/modules/activities/right-drawer/components/create/RightDrawerCreateActivity.tsx

@@ -1,9 +1,6 @@
 import { useRecoilValue } from 'recoil';
 
 import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
-import { RightDrawerBody } from '@/ui/right-drawer/components/RightDrawerBody';
-import { RightDrawerPage } from '@/ui/right-drawer/components/RightDrawerPage';
-import { RightDrawerTopBar } from '@/ui/right-drawer/components/RightDrawerTopBar';
 
 import { RightDrawerActivity } from '../RightDrawerActivity';
 
@@ -11,17 +8,14 @@ export function RightDrawerCreateActivity() {
   const activityId = useRecoilValue(viewableActivityIdState);
 
   return (
-    <RightDrawerPage>
+    <>
-      <RightDrawerTopBar />
+      {activityId && (
-      <RightDrawerBody>
+        <RightDrawerActivity
-        {activityId && (
+          activityId={activityId}
-          <RightDrawerActivity
+          showComment={false}
-            activityId={activityId}
+          autoFillTitle={true}
-            showComment={false}
+        />
-            autoFillTitle={true}
+      )}
-          />
+    </>
-        )}
-      </RightDrawerBody>
-    </RightDrawerPage>
   );
 }

front/src/modules/activities/right-drawer/components/edit/RightDrawerEditActivity.tsx

@@ -1,21 +1,11 @@
 import { useRecoilValue } from 'recoil';
 
 import { viewableActivityIdState } from '@/activities/states/viewableActivityIdState';
-import { RightDrawerBody } from '@/ui/right-drawer/components/RightDrawerBody';
-import { RightDrawerPage } from '@/ui/right-drawer/components/RightDrawerPage';
-import { RightDrawerTopBar } from '@/ui/right-drawer/components/RightDrawerTopBar';
 
 import { RightDrawerActivity } from '../RightDrawerActivity';
 
 export function RightDrawerEditActivity() {
   const activityId = useRecoilValue(viewableActivityIdState);
 
-  return (
+  return <>{activityId && <RightDrawerActivity activityId={activityId} />}</>;
-    <RightDrawerPage>
-      <RightDrawerTopBar />
-      <RightDrawerBody>
-        {activityId && <RightDrawerActivity activityId={activityId} />}
-      </RightDrawerBody>
-    </RightDrawerPage>
-  );
 }

front/src/modules/activities/timeline/components/Timeline.tsx

@@ -6,8 +6,8 @@ import { ActivityCreateButton } from '@/activities/components/ActivityCreateButt
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer';
 import { CommentableEntity } from '@/activities/types/CommentableEntity';
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
 import { IconCircleDot } from '@/ui/icon';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 import {
   ActivityType,
   SortOrder,

front/src/modules/activities/timeline/components/TimelineActivityTitle.tsx

@@ -1,6 +1,9 @@
 import styled from '@emotion/styled';
 
-import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox';
+import {
+  Checkbox,
+  CheckboxShape,
+} from '@/ui/input/checkbox/components/Checkbox';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { ActivityType } from '~/generated/graphql';
 

front/src/modules/activities/types/CommentableEntityForSelect.ts

@@ -1,4 +1,4 @@
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import { CommentableType } from '~/generated/graphql';
 
 export type CommentableEntityForSelect = EntityForSelect & {

front/src/modules/activities/utils/flatMapAndSortEntityForSelectArrayByName.ts

@@ -1,4 +1,4 @@
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 
 export function flatMapAndSortEntityForSelectArrayOfArrayByName<
   T extends EntityForSelect,

front/src/modules/auth/components/Title.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { AnimatedEaseIn } from '../../ui/animation/components/AnimatedEaseIn';
+import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 
 type Props = React.PropsWithChildren & {
   animate?: boolean;

front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx

@@ -4,10 +4,10 @@ import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 
-import { AnimatedEaseIn } from '@/ui/animation/components/AnimatedEaseIn';
 import { MainButton } from '@/ui/button/components/MainButton';
 import { IconBrandGoogle } from '@/ui/icon';
-import { TextInput } from '@/ui/input/components/TextInput';
+import { TextInput } from '@/ui/input/text/components/TextInput';
+import { AnimatedEaseIn } from '@/ui/utilities/animation/components/AnimatedEaseIn';
 
 import { Logo } from '../../components/Logo';
 import { Title } from '../../components/Title';

front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -9,8 +9,8 @@ import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
 import { useAuth } from '../../hooks/useAuth';

front/src/modules/command-menu/components/CommandMenu.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { useOpenActivityRightDrawer } from '@/activities/hooks/useOpenActivityRightDrawer';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
-import { AppHotkeyScope } from '@/ui/hotkey/types/AppHotkeyScope';
 import { IconNotes } from '@/ui/icon';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 import { Avatar } from '@/users/components/Avatar';
 import {
   QueryMode,

front/src/modules/command-menu/components/CommandMenuStyles.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Command } from 'cmdk';
 
-import { useIsMobile } from '@/ui/hooks/useIsMobile';
+import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 export const StyledDialog = styled(Command.Dialog)`
   background: ${({ theme }) => theme.background.primary};

front/src/modules/command-menu/hooks/useCommandMenu.ts

@@ -1,7 +1,7 @@
 import { useRecoilState } from 'recoil';
 
-import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { AppHotkeyScope } from '@/ui/hotkey/types/AppHotkeyScope';
+import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
 
 import { isCommandMenuOpenedState } from '../states/isCommandMenuOpenedState';
 

front/src/modules/companies/__stories__/Board.stories.tsx

@@ -2,12 +2,12 @@ import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { EntityBoard } from '@/pipeline/components/EntityBoard';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
-import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope';
 import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
 import { CompanyBoardContext } from '../states/CompanyBoardContext';
 

front/src/modules/companies/__stories__/CompanyBoardCard.stories.tsx

@@ -3,6 +3,8 @@ import { MemoryRouter } from 'react-router-dom';
 import { Meta, StoryObj } from '@storybook/react';
 
 import { CompanyBoardCard } from '@/companies/components/CompanyBoardCard';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
@@ -11,8 +13,6 @@ import { defaultPipelineProgressOrderBy } from '../../pipeline/queries';
 import { BoardCardContext } from '../../pipeline/states/BoardCardContext';
 import { BoardColumnContext } from '../../pipeline/states/BoardColumnContext';
 import { pipelineProgressIdScopedState } from '../../pipeline/states/pipelineProgressIdScopedState';
-import { RecoilScope } from '../../ui/recoil-scope/components/RecoilScope';
-import { useRecoilScopedState } from '../../ui/recoil-scope/hooks/useRecoilScopedState';
 import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
 import { CompanyBoardContext } from '../states/CompanyBoardContext';
 

front/src/modules/companies/components/CompanyAccountOwnerCell.tsx

@@ -1,53 +0,0 @@
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
-import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
-import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
-import { Company, User } from '~/generated/graphql';
-
-import { UserChip } from '../../users/components/UserChip';
-
-import { CompanyAccountOwnerPicker } from './CompanyAccountOwnerPicker';
-
-export type CompanyAccountOnwer = Pick<Company, 'id'> & {
-  accountOwner?: Pick<User, 'id' | 'displayName' | 'avatarUrl'> | null;
-};
-
-export type OwnProps = {
-  company: CompanyAccountOnwer;
-};
-
-export function CompanyAccountOwnerCell({ company }: OwnProps) {
-  const { closeEditableCell } = useEditableCell();
-
-  function handleCancel() {
-    closeEditableCell();
-  }
-
-  function handleSubmit() {
-    closeEditableCell();
-  }
-
-  return (
-    <EditableCell
-      transparent
-      editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
-      editModeContent={
-        <CompanyAccountOwnerPicker
-          onCancel={handleCancel}
-          onSubmit={handleSubmit}
-          company={company}
-        />
-      }
-      nonEditModeContent={
-        company.accountOwner?.displayName ? (
-          <UserChip
-            id={company.accountOwner.id}
-            name={company.accountOwner?.displayName ?? ''}
-            pictureUrl={company.accountOwner?.avatarUrl ?? ''}
-          />
-        ) : (
-          <></>
-        )
-      }
-    />
-  );
-}

front/src/modules/companies/components/CompanyAccountOwnerPicker.tsx

@@ -1,9 +1,9 @@
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   Company,
   User,

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -10,16 +10,19 @@ import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '@/pipeline/queries';
 import { BoardCardContext } from '@/pipeline/states/BoardCardContext';
 import { pipelineProgressIdScopedState } from '@/pipeline/states/pipelineProgressIdScopedState';
 import { selectedBoardCardsState } from '@/pipeline/states/selectedBoardCardsState';
+import { EntityChipVariant } from '@/ui/chip/components/EntityChip';
 import { DateEditableField } from '@/ui/editable-field/variants/components/DateEditableField';
 import { NumberEditableField } from '@/ui/editable-field/variants/components/NumberEditableField';
 import { IconCurrencyDollar, IconProgressCheck } from '@/ui/icon';
 import { IconCalendarEvent } from '@/ui/icon';
-import { Checkbox, CheckboxVariant } from '@/ui/input/components/Checkbox';
+import {
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+  Checkbox,
+  CheckboxVariant,
+} from '@/ui/input/checkbox/components/Checkbox';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 
-import { EntityChipVariant } from '../../ui/chip/components/EntityChip';
 import { PipelineProgressForBoard } from '../types/CompanyProgress';
 
 import { CompanyChip } from './CompanyChip';

front/src/modules/companies/components/CompanyEditableNameCell.tsx

@@ -1,48 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-
-import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip';
-import {
-  GetCompaniesQuery,
-  useUpdateOneCompanyMutation,
-} from '~/generated/graphql';
-import { getLogoUrlFromDomainName } from '~/utils';
-
-import { GET_COMPANY } from '../queries';
-
-import { CompanyChip } from './CompanyChip';
-
-type OwnProps = {
-  company: Pick<
-    GetCompaniesQuery['companies'][0],
-    'id' | 'name' | 'domainName' | '_activityCount'
-  >;
-};
-
-export function CompanyEditableNameChipCell({ company }: OwnProps) {
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  return (
-    <EditableCellChip
-      value={company.name}
-      placeholder="Name"
-      ChipComponent={
-        <CompanyChip
-          id={company.id}
-          name={company.name}
-          pictureUrl={getLogoUrlFromDomainName(company.domainName)}
-        />
-      }
-      onSubmit={(newName) =>
-        updateCompany({
-          variables: {
-            where: { id: company.id },
-            data: {
-              name: newName,
-            },
-          },
-          refetchQueries: [getOperationName(GET_COMPANY) ?? ''],
-        })
-      }
-    />
-  );
-}

front/src/modules/companies/components/CompanyPickerCell.tsx

@@ -1,12 +1,11 @@
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
 import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
-
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export type OwnProps = {
   companyId: string | null;

front/src/modules/companies/components/FilterDropdownCompanySearchSelect.tsx

@@ -3,8 +3,8 @@ import { Context } from 'react';
 import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
 import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
 import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 import { useFilteredSearchCompanyQuery } from '../queries';
 

front/src/modules/companies/components/HooksCompanyBoard.tsx

@@ -15,7 +15,7 @@ import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 import {
   PipelineProgressableType,
   PipelineProgressOrderByWithRelationInput as PipelineProgresses_Order_By,

front/src/modules/companies/components/NewCompanyProgressButton.tsx

@@ -10,11 +10,11 @@ import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { pipelineStageIdScopedState } from '@/pipeline/states/pipelineStageIdScopedState';
 import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
 import { NewButton } from '@/ui/board/components/NewButton';
-import { usePreviousHotkeyScope } from '@/ui/hotkey/hooks/usePreviousHotkeyScope';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   PipelineProgressableType,
   useCreateOnePipelineProgressMutation,

front/src/modules/companies/constants/companyViewFields.tsx

@@ -7,7 +7,7 @@ import {
   IconUser,
   IconUsers,
 } from '@/ui/icon/index';
-import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import {
   ViewFieldChipMetadata,
   ViewFieldDateMetadata,

front/src/modules/companies/editable-field/components/CompanyAccountOwnerEditableField.tsx

@@ -1,8 +1,8 @@
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconUserCircle } from '@/ui/icon';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { UserChip } from '@/users/components/UserChip';
 import { Company, User } from '~/generated/graphql';
 

front/src/modules/companies/editable-field/components/CompanyAddressEditableField.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconMap } from '@/ui/icon';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
 type OwnProps = {
@@ -48,7 +48,7 @@ export function CompanyAddressEditableField({ company }: OwnProps) {
         onCancel={handleCancel}
         iconLabel={<IconMap />}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={'Address'}
             autoFocus
             value={internalValue}

front/src/modules/companies/editable-field/components/CompanyCreatedAtEditableField.tsx

@@ -4,7 +4,7 @@ import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { EditableFieldEditModeDate } from '@/ui/editable-field/variants/components/EditableFieldEditModeDate';
 import { IconCalendar } from '@/ui/icon';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 import { formatToHumanReadableDate } from '~/utils';
 import { parseDate } from '~/utils/date-utils';

front/src/modules/companies/editable-field/components/CompanyDomainNameEditableField.tsx

@@ -4,8 +4,8 @@ import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldDisplayURL } from '@/ui/editable-field/components/FieldDisplayURL';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconLink } from '@/ui/icon';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
 type OwnProps = {
@@ -49,7 +49,7 @@ export function CompanyDomainNameEditableField({ company }: OwnProps) {
         onCancel={handleCancel}
         onSubmit={handleSubmit}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={'URL'}
             autoFocus
             value={internalValue}

front/src/modules/companies/editable-field/components/CompanyEmployeesEditableField.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconUsers } from '@/ui/icon';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 import {
   canBeCastAsIntegerOrNull,
@@ -63,7 +63,7 @@ export function CompanyEmployeesEditableField({ company }: OwnProps) {
         onCancel={handleCancel}
         iconLabel={<IconUsers />}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={'Employees'}
             autoFocus
             value={internalValue ?? ''}

front/src/modules/companies/editable-field/components/CompanyNameEditableField.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, useUpdateOneCompanyMutation } from '~/generated/graphql';
 
 type OwnProps = {

front/src/modules/companies/hooks/useInitializeCompanyBoardFilters.ts

@@ -3,7 +3,7 @@ import { useEffect } from 'react';
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
 import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
 import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 export function useInitializeCompanyBoardFilters({
   availableFilters,

front/src/modules/companies/states/companyAccountOwnerFamilyState.ts

@@ -1,11 +0,0 @@
-import { atomFamily } from 'recoil';
-
-import { CompanyAccountOnwer } from '../components/CompanyAccountOwnerCell';
-
-export const companyAccountOwnerFamilyState = atomFamily<
-  CompanyAccountOnwer['accountOwner'] | null,
-  string
->({
-  key: 'companyAccountOwnerFamilyState',
-  default: null,
-});

front/src/modules/companies/states/companyAddressFamilyState.ts

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

front/src/modules/companies/states/companyCommentCountFamilyState.ts

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

front/src/modules/companies/states/companyCreatedAtFamilyState.ts

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

front/src/modules/companies/states/companyDomainNameFamilyState.ts

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

front/src/modules/companies/states/companyEmployeesFamilyState.ts

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

front/src/modules/companies/states/companyLinkedinUrlFamilyState.ts

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

front/src/modules/companies/states/companyNameFamilyState.ts

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

front/src/modules/companies/table/components/CompanyEntityTableData.tsx

@@ -1,28 +0,0 @@
-import { defaultOrderBy } from '@/companies/queries';
-import {
-  PersonOrderByWithRelationInput,
-  useGetCompaniesQuery,
-} from '~/generated/graphql';
-
-import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
-
-export function CompanyEntityTableData({
-  orderBy = defaultOrderBy,
-  whereFilters,
-}: {
-  orderBy?: PersonOrderByWithRelationInput[];
-  whereFilters?: any;
-}) {
-  const setCompanyEntityTable = useSetCompanyEntityTable();
-
-  useGetCompaniesQuery({
-    variables: { orderBy, where: whereFilters },
-    onCompleted: (data) => {
-      const companies = data.companies ?? [];
-
-      setCompanyEntityTable(companies);
-    },
-  });
-
-  return <></>;
-}

front/src/modules/companies/table/components/CompanyEntityTableDataMocked.tsx

@@ -1,15 +0,0 @@
-import { useEffect } from 'react';
-
-import { useSetCompanyEntityTable } from '../hooks/useSetCompanyEntityTable';
-
-import { mockedCompaniesData } from './companies-mock-data';
-
-export function CompanyEntityTableDataMocked() {
-  const setCompanyEntityTable = useSetCompanyEntityTable();
-
-  useEffect(() => {
-    setCompanyEntityTable(mockedCompaniesData);
-  }, [setCompanyEntityTable]);
-
-  return <></>;
-}

front/src/modules/companies/table/components/CompanyTable.tsx

@@ -1,16 +1,21 @@
 import { useCallback, useMemo, useState } from 'react';
 
+import { companyViewFields } from '@/companies/constants/companyViewFields';
 import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
-import { companyColumns } from '@/companies/table/components/companyColumns';
-import { CompanyEntityTableData } from '@/companies/table/components/CompanyEntityTableData';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { IconList } from '@/ui/icon';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
 import { EntityTable } from '@/ui/table/components/EntityTable';
+import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
-import { CompanyOrderByWithRelationInput } from '~/generated/graphql';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import {
+  CompanyOrderByWithRelationInput,
+  useGetCompaniesQuery,
+  useUpdateOneCompanyMutation,
+} from '~/generated/graphql';
+import { companiesFilters } from '~/pages/companies/companies-filters';
 import { availableSorts } from '~/pages/companies/companies-sorts';
 
 export function CompanyTable() {
@@ -29,13 +34,20 @@ export function CompanyTable() {
 
   return (
     <>
-      <CompanyEntityTableData orderBy={orderBy} whereFilters={whereFilters} />
+      <GenericEntityTableData
+        getRequestResultKey="companies"
+        useGetRequest={useGetCompaniesQuery}
+        orderBy={orderBy}
+        whereFilters={whereFilters}
+        viewFields={companyViewFields}
+        filterDefinitionArray={companiesFilters}
+      />
       <EntityTable
-        columns={companyColumns}
         viewName="All Companies"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
         onSortsUpdate={updateSorts}
+        useUpdateEntityMutation={useUpdateOneCompanyMutation}
       />
     </>
   );

front/src/modules/companies/table/components/CompanyTableMockMode.tsx

@@ -1,18 +1,16 @@
-import { companyColumns } from '@/companies/table/components/companyColumns';
-import { CompanyEntityTableDataMocked } from '@/companies/table/components/CompanyEntityTableDataMocked';
 import { IconList } from '@/ui/icon';
 import { EntityTable } from '@/ui/table/components/EntityTable';
+import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 import { availableSorts } from '~/pages/companies/companies-sorts';
 
 export function CompanyTableMockMode() {
   return (
     <>
-      <CompanyEntityTableDataMocked />
       <EntityTable
-        columns={companyColumns}
         viewName="All Companies"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
+        useUpdateEntityMutation={useUpdateOneCompanyMutation}
       />
     </>
   );

front/src/modules/companies/table/components/CompanyTableV2.tsx

@@ -1,54 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { companyViewFields } from '@/companies/constants/companyViewFields';
-import { CompaniesSelectedSortType, defaultOrderBy } from '@/companies/queries';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
-import { IconList } from '@/ui/icon';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
-import { EntityTable } from '@/ui/table/components/EntityTableV2';
-import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
-import { TableContext } from '@/ui/table/states/TableContext';
-import {
-  CompanyOrderByWithRelationInput,
-  useGetCompaniesQuery,
-  useUpdateOneCompanyMutation,
-} from '~/generated/graphql';
-import { companiesFilters } from '~/pages/companies/companies-filters';
-import { availableSorts } from '~/pages/companies/companies-sorts';
-
-export function CompanyTable() {
-  const [orderBy, setOrderBy] =
-    useState<CompanyOrderByWithRelationInput[]>(defaultOrderBy);
-
-  const updateSorts = useCallback((sorts: Array<CompaniesSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
-
-  const filters = useRecoilScopedValue(filtersScopedState, TableContext);
-
-  const whereFilters = useMemo(() => {
-    return { AND: filters.map(turnFilterIntoWhereClause) };
-  }, [filters]) as any;
-
-  return (
-    <>
-      <GenericEntityTableData
-        getRequestResultKey="companies"
-        useGetRequest={useGetCompaniesQuery}
-        orderBy={orderBy}
-        whereFilters={whereFilters}
-        viewFields={companyViewFields}
-        filterDefinitionArray={companiesFilters}
-      />
-      <EntityTable
-        viewName="All Companies"
-        viewIcon={<IconList size={16} />}
-        availableSorts={availableSorts}
-        onSortsUpdate={updateSorts}
-        useUpdateEntityMutation={useUpdateOneCompanyMutation}
-      />
-    </>
-  );
-}

front/src/modules/companies/table/components/EditableCompanyAccountOwnerCell.tsx

@@ -1,26 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { CompanyAccountOwnerCell } from '@/companies/components/CompanyAccountOwnerCell';
-import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-
-export function EditableCompanyAccountOwnerCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const accountOwner = useRecoilValue(
-    companyAccountOwnerFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <CompanyAccountOwnerCell
-      company={{
-        id: currentRowEntityId ?? '',
-        accountOwner: {
-          avatarUrl: accountOwner?.avatarUrl ?? '',
-          displayName: accountOwner?.displayName ?? '',
-          id: accountOwner?.id ?? '',
-        },
-      }}
-    />
-  );
-}

front/src/modules/companies/table/components/EditableCompanyAddressCell.tsx

@@ -1,40 +0,0 @@
-import { useEffect, useState } from 'react';
-import { useRecoilValue } from 'recoil';
-
-import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
-import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-export function EditableCompanyAddressCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  const address = useRecoilValue(
-    companyAddressFamilyState(currentRowEntityId ?? ''),
-  );
-
-  const [internalValue, setInternalValue] = useState(address ?? '');
-  useEffect(() => {
-    setInternalValue(address ?? '');
-  }, [address]);
-
-  return (
-    <EditableCellText
-      value={internalValue}
-      onSubmit={(newValue: string) =>
-        updateCompany({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              address: newValue,
-            },
-          },
-        })
-      }
-    />
-  );
-}

front/src/modules/companies/table/components/EditableCompanyCreatedAtCell.tsx

@@ -1,37 +0,0 @@
-import { DateTime } from 'luxon';
-import { useRecoilValue } from 'recoil';
-
-import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
-import { EditableCellDate } from '@/ui/table/editable-cell/types/EditableCellDate';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-export function EditableCompanyCreatedAtCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const createdAt = useRecoilValue(
-    companyCreatedAtFamilyState(currentRowEntityId ?? ''),
-  );
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  return (
-    <EditableCellDate
-      onChange={async (newDate: Date) => {
-        if (!currentRowEntityId) return;
-
-        await updateCompany({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              createdAt: newDate.toISOString(),
-            },
-          },
-        });
-      }}
-      value={createdAt ? DateTime.fromISO(createdAt).toJSDate() : new Date()}
-    />
-  );
-}

front/src/modules/companies/table/components/EditableCompanyDomainNameCell.tsx

@@ -1,35 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
-
-export function EditableCompanyDomainNameCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  const domainName = useRecoilValue(
-    companyDomainNameFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <EditableCellURL
-      url={domainName ?? ''}
-      onSubmit={(newURL) =>
-        updateCompany({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              domainName: newURL,
-            },
-          },
-        })
-      }
-    />
-  );
-}

front/src/modules/companies/table/components/EditableCompanyEmployeesCell.tsx

@@ -1,35 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
-import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-export function EditableCompanyEmployeesCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  const employees = useRecoilValue(
-    companyEmployeesFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    // TODO: Create an EditableCellNumber component
-    <EditableCellText
-      value={employees || ''}
-      onSubmit={(newValue) =>
-        updateCompany({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              employees: parseInt(newValue),
-            },
-          },
-        })
-      }
-    />
-  );
-}

front/src/modules/companies/table/components/EditableCompanyLinkedinUrlCell.tsx

@@ -1,35 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOneCompanyMutation } from '~/generated/graphql';
-
-import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
-import { companyLinkedinUrlFamilyState } from '../../states/companyLinkedinUrlFamilyState';
-
-export function EditableCompanyLinkedinUrlCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updateCompany] = useUpdateOneCompanyMutation();
-
-  const linkedinUrl = useRecoilValue(
-    companyLinkedinUrlFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <EditableCellURL
-      url={linkedinUrl || ''}
-      onSubmit={(newUrl) =>
-        updateCompany({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              linkedinUrl: newUrl,
-            },
-          },
-        })
-      }
-    />
-  );
-}

front/src/modules/companies/table/components/EditableCompanyNameCell.tsx

@@ -1,32 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { CompanyEditableNameChipCell } from '@/companies/components/CompanyEditableNameCell';
-import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
-import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
-import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-
-export function EditableCompanyNameCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const name = useRecoilValue(companyNameFamilyState(currentRowEntityId ?? ''));
-
-  const domainName = useRecoilValue(
-    companyDomainNameFamilyState(currentRowEntityId ?? ''),
-  );
-
-  const commentCount = useRecoilValue(
-    companyCommentCountFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <CompanyEditableNameChipCell
-      company={{
-        id: currentRowEntityId ?? '',
-        name: name ?? '',
-        domainName: domainName ?? '',
-        _activityCount: commentCount ?? 0,
-      }}
-    />
-  );
-}

front/src/modules/companies/table/components/companyColumns.tsx

@@ -1,70 +0,0 @@
-import { TableColumn } from '@/people/table/components/peopleColumns';
-import {
-  IconBrandLinkedin,
-  IconBuildingSkyscraper,
-  IconCalendarEvent,
-  IconLink,
-  IconMap,
-  IconUser,
-  IconUsers,
-} from '@/ui/icon/index';
-
-import { EditableCompanyAccountOwnerCell } from './EditableCompanyAccountOwnerCell';
-import { EditableCompanyAddressCell } from './EditableCompanyAddressCell';
-import { EditableCompanyCreatedAtCell } from './EditableCompanyCreatedAtCell';
-import { EditableCompanyDomainNameCell } from './EditableCompanyDomainNameCell';
-import { EditableCompanyEmployeesCell } from './EditableCompanyEmployeesCell';
-import { EditableCompanyLinkedinUrlCell } from './EditableCompanyLinkedinUrlCell';
-import { EditableCompanyNameCell } from './EditableCompanyNameCell';
-
-export const companyColumns: TableColumn[] = [
-  {
-    id: 'name',
-    title: 'Name',
-    icon: <IconBuildingSkyscraper size={16} />,
-    size: 180,
-    cellComponent: <EditableCompanyNameCell />,
-  },
-  {
-    id: 'domainName',
-    title: 'URL',
-    icon: <IconLink size={16} />,
-    size: 100,
-    cellComponent: <EditableCompanyDomainNameCell />,
-  },
-  {
-    id: 'accountOwner',
-    title: 'Account owner',
-    icon: <IconUser size={16} />,
-    size: 150,
-    cellComponent: <EditableCompanyAccountOwnerCell />,
-  },
-  {
-    id: 'createdAt',
-    title: 'Creation',
-    icon: <IconCalendarEvent size={16} />,
-    size: 150,
-    cellComponent: <EditableCompanyCreatedAtCell />,
-  },
-  {
-    id: 'employees',
-    title: 'Employees',
-    icon: <IconUsers size={16} />,
-    size: 150,
-    cellComponent: <EditableCompanyEmployeesCell />,
-  },
-  {
-    id: 'linkedinUrl',
-    title: 'Linkedin',
-    icon: <IconBrandLinkedin size={16} />,
-    size: 170,
-    cellComponent: <EditableCompanyLinkedinUrlCell />,
-  },
-  {
-    id: 'address',
-    title: 'Address',
-    icon: <IconMap size={16} />,
-    size: 170,
-    cellComponent: <EditableCompanyAddressCell />,
-  },
-];

front/src/modules/companies/table/hooks/useSetCompanyEntityTable.ts

@@ -1,141 +0,0 @@
-import { useLocation } from 'react-router-dom';
-import { useRecoilCallback } from 'recoil';
-
-import { companyAccountOwnerFamilyState } from '@/companies/states/companyAccountOwnerFamilyState';
-import { companyAddressFamilyState } from '@/companies/states/companyAddressFamilyState';
-import { companyCommentCountFamilyState } from '@/companies/states/companyCommentCountFamilyState';
-import { companyCreatedAtFamilyState } from '@/companies/states/companyCreatedAtFamilyState';
-import { companyDomainNameFamilyState } from '@/companies/states/companyDomainNameFamilyState';
-import { companyEmployeesFamilyState } from '@/companies/states/companyEmployeesFamilyState';
-import { companyLinkedinUrlFamilyState } from '@/companies/states/companyLinkedinUrlFamilyState';
-import { companyNameFamilyState } from '@/companies/states/companyNameFamilyState';
-import { GetCompaniesQuery } from '~/generated/graphql';
-
-import { companiesFilters } from '../../../../pages/companies/companies-filters';
-import { availableFiltersScopedState } from '../../../ui/filter-n-sort/states/availableFiltersScopedState';
-import { useContextScopeId } from '../../../ui/recoil-scope/hooks/useContextScopeId';
-import { currentPageLocationState } from '../../../ui/states/currentPageLocationState';
-import { useResetTableRowSelection } from '../../../ui/table/hooks/useResetTableRowSelection';
-import { entityTableDimensionsState } from '../../../ui/table/states/entityTableDimensionsState';
-import { isFetchingEntityTableDataState } from '../../../ui/table/states/isFetchingEntityTableDataState';
-import { TableContext } from '../../../ui/table/states/TableContext';
-import { tableRowIdsState } from '../../../ui/table/states/tableRowIdsState';
-import { companyColumns } from '../components/companyColumns';
-
-export function useSetCompanyEntityTable() {
-  const resetTableRowSelection = useResetTableRowSelection();
-
-  const tableContextScopeId = useContextScopeId(TableContext);
-
-  const currentLocation = useLocation().pathname;
-
-  return useRecoilCallback(
-    ({ set, snapshot }) =>
-      (newCompanyArray: GetCompaniesQuery['companies']) => {
-        for (const company of newCompanyArray) {
-          const currentName = snapshot
-            .getLoadable(companyNameFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentName !== company.name) {
-            set(companyNameFamilyState(company.id), company.name);
-          }
-
-          const currentDomainName = snapshot
-            .getLoadable(companyDomainNameFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentDomainName !== company.domainName) {
-            set(companyDomainNameFamilyState(company.id), company.domainName);
-          }
-
-          const currentLinkedinUrl = snapshot
-            .getLoadable(companyLinkedinUrlFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentLinkedinUrl !== company.linkedinUrl) {
-            set(
-              companyLinkedinUrlFamilyState(company.id),
-              company.linkedinUrl ?? '',
-            );
-          }
-
-          const currentEmployees = snapshot
-            .getLoadable(companyEmployeesFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentEmployees !== company.employees) {
-            set(
-              companyEmployeesFamilyState(company.id),
-              company.employees?.toString() ?? '',
-            );
-          }
-
-          const currentAddress = snapshot
-            .getLoadable(companyAddressFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentAddress !== company.address) {
-            set(companyAddressFamilyState(company.id), company.address);
-          }
-
-          const currentCommentCount = snapshot
-            .getLoadable(companyCommentCountFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentCommentCount !== company._activityCount) {
-            set(
-              companyCommentCountFamilyState(company.id),
-              company._activityCount,
-            );
-          }
-
-          const currentAccountOwner = snapshot
-            .getLoadable(companyAccountOwnerFamilyState(company.id))
-            .valueOrThrow();
-
-          if (
-            JSON.stringify(currentAccountOwner) !==
-            JSON.stringify(company.accountOwner)
-          ) {
-            set(
-              companyAccountOwnerFamilyState(company.id),
-              company.accountOwner,
-            );
-          }
-
-          const currentCreatedAt = snapshot
-            .getLoadable(companyCreatedAtFamilyState(company.id))
-            .valueOrThrow();
-
-          if (currentCreatedAt !== company.createdAt) {
-            set(companyCreatedAtFamilyState(company.id), company.createdAt);
-          }
-        }
-
-        const companyIds = newCompanyArray.map((company) => company.id);
-
-        set(tableRowIdsState, (currentRowIds) => {
-          if (JSON.stringify(currentRowIds) !== JSON.stringify(companyIds)) {
-            return companyIds;
-          }
-
-          return currentRowIds;
-        });
-
-        resetTableRowSelection();
-
-        set(entityTableDimensionsState, {
-          numberOfColumns: companyColumns.length,
-          numberOfRows: companyIds.length,
-        });
-
-        set(availableFiltersScopedState(tableContextScopeId), companiesFilters);
-
-        set(currentPageLocationState, currentLocation);
-
-        set(isFetchingEntityTableDataState, false);
-      },
-    [resetTableRowSelection, tableContextScopeId, currentLocation],
-  );
-}

front/src/modules/people/components/EditablePeopleFullName.tsx

@@ -1,58 +0,0 @@
-import styled from '@emotion/styled';
-
-import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText';
-import { Person } from '~/generated/graphql';
-
-import { PersonChip } from './PersonChip';
-
-type OwnProps = {
-  person:
-    | Partial<
-        Pick<
-          Person,
-          | 'id'
-          | 'firstName'
-          | 'lastName'
-          | 'displayName'
-          | 'avatarUrl'
-          | '_activityCount'
-        >
-      >
-    | null
-    | undefined;
-  onSubmit?: (firstName: string, lastName: string) => void;
-  onCancel?: () => void;
-};
-
-const NoEditModeContainer = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-export function EditablePeopleFullName({
-  person,
-  onSubmit,
-  onCancel,
-}: OwnProps) {
-  return (
-    <EditableCellDoubleText
-      firstValue={person?.firstName ?? ''}
-      secondValue={person?.lastName ?? ''}
-      firstValuePlaceholder="First name"
-      secondValuePlaceholder="Last name"
-      onSubmit={onSubmit}
-      onCancel={onCancel}
-      nonEditModeContent={
-        <NoEditModeContainer>
-          <PersonChip
-            name={`${person?.firstName ?? ''} ${person?.lastName ?? ''}`}
-            id={person?.id ?? ''}
-            pictureUrl={person?.avatarUrl ?? ''}
-          />
-        </NoEditModeContainer>
-      }
-    />
-  );
-}

front/src/modules/people/components/FilterDropdownPeopleSearchSelect.tsx

@@ -4,8 +4,8 @@ import { useFilteredSearchPeopleQuery } from '@/people/queries';
 import { FilterDropdownEntitySearchSelect } from '@/ui/filter-n-sort/components/FilterDropdownEntitySearchSelect';
 import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
 import { filterDropdownSelectedEntityIdScopedState } from '@/ui/filter-n-sort/states/filterDropdownSelectedEntityIdScopedState';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
 
 export function FilterDropdownPeopleSearchSelect({
   context,

front/src/modules/people/components/PeopleCompanyCell.tsx

@@ -1,46 +0,0 @@
-import { CompanyChip } from '@/companies/components/CompanyChip';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
-import { EditableCell } from '@/ui/table/editable-cell/components/EditableCell';
-import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
-import { Company, Person } from '~/generated/graphql';
-import { getLogoUrlFromDomainName } from '~/utils';
-
-import { PeopleCompanyCreateCell } from './PeopleCompanyCreateCell';
-import { PeopleCompanyPicker } from './PeopleCompanyPicker';
-
-export type PeopleWithCompany = Pick<Person, 'id'> & {
-  company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
-};
-
-export type OwnProps = {
-  people: Pick<Person, 'id'> & {
-    company?: Pick<Company, 'id' | 'name' | 'domainName'> | null;
-  };
-};
-
-export function PeopleCompanyCell({ people }: OwnProps) {
-  const [isCreating] = useRecoilScopedState(isCreateModeScopedState);
-
-  return (
-    <EditableCell
-      transparent
-      maxContentWidth={160}
-      editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
-      editModeContent={
-        isCreating ? (
-          <PeopleCompanyCreateCell people={people} />
-        ) : (
-          <PeopleCompanyPicker people={people} />
-        )
-      }
-      nonEditModeContent={
-        <CompanyChip
-          id={people.company?.id ?? ''}
-          name={people.company?.name ?? ''}
-          pictureUrl={getLogoUrlFromDomainName(people.company?.domainName)}
-        />
-      }
-    />
-  );
-}

front/src/modules/people/components/PeopleCompanyCreateCell.tsx

@@ -1,91 +0,0 @@
-import { useState } from 'react';
-import { getOperationName } from '@apollo/client/utilities';
-import { v4 } from 'uuid';
-
-import { GET_COMPANIES } from '@/companies/queries';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
-import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
-import { EditableCellDoubleTextEditMode } from '@/ui/table/editable-cell/types/EditableCellDoubleTextEditMode';
-import {
-  Person,
-  useInsertOneCompanyMutation,
-  useUpdateOnePersonMutation,
-} from '~/generated/graphql';
-import { logError } from '~/utils/logError';
-
-import { SEARCH_COMPANY_QUERY } from '../../search/queries/search';
-
-type OwnProps = {
-  people: Pick<Person, 'id'>;
-};
-
-export function PeopleCompanyCreateCell({ people }: OwnProps) {
-  const [, setIsCreating] = useRecoilScopedState(isCreateModeScopedState);
-
-  const [currentSearchFilter] = useRecoilScopedState(
-    relationPickerSearchFilterScopedState,
-  );
-
-  const [companyName, setCompanyName] = useState(currentSearchFilter);
-
-  const [companyDomainName, setCompanyDomainName] = useState('');
-  const [insertCompany] = useInsertOneCompanyMutation();
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  function handleDoubleTextChange(leftValue: string, rightValue: string): void {
-    setCompanyDomainName(leftValue);
-    setCompanyName(rightValue);
-  }
-
-  async function handleCompanyCreate(
-    companyName: string,
-    companyDomainName: string,
-  ) {
-    const newCompanyId = v4();
-
-    try {
-      await insertCompany({
-        variables: {
-          data: {
-            id: newCompanyId,
-            name: companyName,
-            domainName: companyDomainName,
-            address: '',
-          },
-        },
-        refetchQueries: [
-          getOperationName(GET_COMPANIES) ?? '',
-          getOperationName(SEARCH_COMPANY_QUERY) ?? '',
-        ],
-      });
-
-      await updatePerson({
-        variables: {
-          where: {
-            id: people.id,
-          },
-          data: {
-            company: { connect: { id: newCompanyId } },
-          },
-        },
-      });
-    } catch (error) {
-      // TODO: handle error better
-      logError(error);
-    }
-    setIsCreating(false);
-  }
-
-  return (
-    <EditableCellDoubleTextEditMode
-      firstValue={companyDomainName}
-      secondValue={companyName}
-      firstValuePlaceholder="URL"
-      secondValuePlaceholder="Name"
-      onChange={handleDoubleTextChange}
-      onSubmit={() => handleCompanyCreate(companyName, companyDomainName)}
-      onCancel={() => setIsCreating(false)}
-    />
-  );
-}

front/src/modules/people/components/PeopleCompanyPicker.tsx

@@ -1,19 +1,18 @@
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
-import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
 import { useEditableCell } from '@/ui/table/editable-cell/hooks/useEditableCell';
 import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
+import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   Company,
   Person,
   useUpdateOnePersonMutation,
 } from '~/generated/graphql';
 
-import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
-
 export type OwnProps = {
   people: Pick<Person, 'id'> & { company?: Pick<Company, 'id'> | null };
 };

front/src/modules/people/components/PeoplePicker.tsx

@@ -1,9 +1,9 @@
 import { useFilteredSearchEntityQuery } from '@/search/hooks/useFilteredSearchEntityQuery';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
-import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useSearchPeopleQuery } from '~/generated/graphql';
 
 export type OwnProps = {

front/src/modules/people/constants/peopleViewFields.tsx

@@ -8,7 +8,7 @@ import {
   IconPhone,
   IconUser,
 } from '@/ui/icon/index';
-import { Entity } from '@/ui/relation-picker/types/EntityTypeForSelect';
+import { Entity } from '@/ui/input/relation-picker/types/EntityTypeForSelect';
 import {
   ViewFieldDateMetadata,
   ViewFieldDefinition,

front/src/modules/people/editable-field/components/PeopleCompanyEditableField.tsx

@@ -3,8 +3,8 @@ import { IconBuildingSkyscraper } from '@tabler/icons-react';
 import { CompanyChip } from '@/companies/components/CompanyChip';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Company, Person } from '~/generated/graphql';
 import { getLogoUrlFromDomainName } from '~/utils';
 

front/src/modules/people/editable-field/components/PeopleCompanyEditableFieldEditMode.tsx

@@ -2,10 +2,10 @@ import styled from '@emotion/styled';
 
 import { useFilteredSearchCompanyQuery } from '@/companies/queries';
 import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   Company,
   Person,

front/src/modules/people/editable-field/components/PeopleFullNameEditableField.tsx

@@ -1,11 +1,10 @@
 import { useState } from 'react';
 
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { DoubleTextInputEdit } from '@/ui/input/double-text/components/DoubleTextInputEdit';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Person, useUpdateOnePersonMutation } from '~/generated/graphql';
 
-import { InplaceInputDoubleText } from '../../../ui/inplace-input/components/InplaceInputDoubleText';
-
 type OwnProps = {
   people: Pick<Person, 'id' | 'firstName' | 'lastName'>;
 };
@@ -48,7 +47,7 @@ export function PeopleFullNameEditableField({ people }: OwnProps) {
 
   return (
     <RecoilScope SpecificContext={FieldContext}>
-      <InplaceInputDoubleText
+      <DoubleTextInputEdit
         firstValuePlaceholder={'First name'}
         secondValuePlaceholder={'Last name'}
         firstValue={internalValueFirstName ?? ''}

front/src/modules/people/hooks/useSetPeopleEntityTable.ts

@@ -1,12 +1,12 @@
 import { useLocation } from 'react-router-dom';
 import { useRecoilCallback } from 'recoil';
 
+import { currentPageLocationState } from '@/ui/utilities/loading-state/states/currentPageLocationState';
+import { useContextScopeId } from '@/ui/utilities/recoil-scope/hooks/useContextScopeId';
 import { GetPeopleQuery } from '~/generated/graphql';
 
 import { peopleFilters } from '../../../pages/people/people-filters';
 import { availableFiltersScopedState } from '../../ui/filter-n-sort/states/availableFiltersScopedState';
-import { useContextScopeId } from '../../ui/recoil-scope/hooks/useContextScopeId';
-import { currentPageLocationState } from '../../ui/states/currentPageLocationState';
 import { useResetTableRowSelection } from '../../ui/table/hooks/useResetTableRowSelection';
 import { entityTableDimensionsState } from '../../ui/table/states/entityTableDimensionsState';
 import { isFetchingEntityTableDataState } from '../../ui/table/states/isFetchingEntityTableDataState';
@@ -20,7 +20,6 @@ import { peopleJobTitleFamilyState } from '../states/peopleJobTitleFamilyState';
 import { peopleLinkedinUrlFamilyState } from '../states/peopleLinkedinUrlFamilyState';
 import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
 import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
-import { peopleColumns } from '../table/components/peopleColumns';
 
 export function useSetPeopleEntityTable() {
   const resetTableRowSelection = useResetTableRowSelection();
@@ -126,7 +125,7 @@ export function useSetPeopleEntityTable() {
         resetTableRowSelection();
 
         set(entityTableDimensionsState, {
-          numberOfColumns: peopleColumns.length,
+          numberOfColumns: 10,
           numberOfRows: peopleIds.length,
         });
 

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

@@ -1,32 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
-import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOnePersonMutation } from '~/generated/graphql';
-
-export function EditablePeopleCityCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  const city = useRecoilValue(peopleCityFamilyState(currentRowEntityId ?? ''));
-
-  return (
-    <EditableCellText
-      value={city ?? ''}
-      onSubmit={(newText) =>
-        updatePerson({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              city: newText,
-            },
-          },
-        })
-      }
-    />
-  );
-}

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

@@ -1,26 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell';
-import { peopleCompanyFamilyState } from '@/people/states/peopleCompanyFamilyState';
-import { useCurrentRowEntityId } from '@/ui/table/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

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

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

@@ -1,34 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { peopleEmailFamilyState } from '@/people/states/peopleEmailFamilyState';
-import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOnePersonMutation } from '~/generated/graphql';
-
-export function EditablePeopleEmailCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  const email = useRecoilValue(
-    peopleEmailFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <EditableCellText
-      value={email || ''}
-      onSubmit={(newEmail: string) =>
-        updatePerson({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              email: newEmail,
-            },
-          },
-        })
-      }
-    />
-  );
-}

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

@@ -1,45 +0,0 @@
-import { getOperationName } from '@apollo/client/utilities';
-import { useRecoilValue } from 'recoil';
-
-import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullName';
-import { peopleNameCellFamilyState } from '@/people/states/peopleNamesFamilyState';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOnePersonMutation } from '~/generated/graphql';
-
-import { GET_PERSON } from '../../queries';
-
-export function EditablePeopleFullNameCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  const { commentCount, firstName, lastName, displayName, avatarUrl } =
-    useRecoilValue(peopleNameCellFamilyState(currentRowEntityId ?? ''));
-
-  return (
-    <EditablePeopleFullName
-      person={{
-        id: currentRowEntityId ?? undefined,
-        _activityCount: commentCount ?? undefined,
-        firstName,
-        lastName,
-        displayName: displayName ?? undefined,
-        avatarUrl: avatarUrl,
-      }}
-      onSubmit={(newFirstValue, newSecondValue) =>
-        updatePerson({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              firstName: newFirstValue,
-              lastName: newSecondValue,
-            },
-          },
-          refetchQueries: [getOperationName(GET_PERSON) ?? ''],
-        })
-      }
-    />
-  );
-}

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

@@ -1,34 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { peopleJobTitleFamilyState } from '@/people/states/peopleJobTitleFamilyState';
-import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOnePersonMutation } from '~/generated/graphql';
-
-export function EditablePeopleJobTitleCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  const jobTitle = useRecoilValue(
-    peopleJobTitleFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <EditableCellText
-      value={jobTitle ?? ''}
-      onSubmit={(newText) =>
-        updatePerson({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              jobTitle: newText,
-            },
-          },
-        })
-      }
-    />
-  );
-}

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

@@ -1,35 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { peopleLinkedinUrlFamilyState } from '@/people/states/peopleLinkedinUrlFamilyState';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOnePersonMutation } from '~/generated/graphql';
-
-import { EditableCellURL } from '../../../ui/table/editable-cell/types/EditableCellURL';
-
-export function EditablePeopleLinkedinUrlCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  const linkedinUrl = useRecoilValue(
-    peopleLinkedinUrlFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <EditableCellURL
-      url={linkedinUrl ?? ''}
-      onSubmit={(newURL) =>
-        updatePerson({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              linkedinUrl: newURL,
-            },
-          },
-        })
-      }
-    />
-  );
-}

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

@@ -1,34 +0,0 @@
-import { useRecoilValue } from 'recoil';
-
-import { peoplePhoneFamilyState } from '@/people/states/peoplePhoneFamilyState';
-import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone';
-import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
-import { useUpdateOnePersonMutation } from '~/generated/graphql';
-
-export function EditablePeoplePhoneCell() {
-  const currentRowEntityId = useCurrentRowEntityId();
-
-  const [updatePerson] = useUpdateOnePersonMutation();
-
-  const phone = useRecoilValue(
-    peoplePhoneFamilyState(currentRowEntityId ?? ''),
-  );
-
-  return (
-    <EditableCellPhone
-      value={phone?.toString() ?? ''}
-      onSubmit={(newPhone) =>
-        updatePerson({
-          variables: {
-            where: {
-              id: currentRowEntityId,
-            },
-            data: {
-              phone: newPhone,
-            },
-          },
-        })
-      }
-    />
-  );
-}

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

@@ -1,17 +1,22 @@
 import { useCallback, useMemo, useState } from 'react';
 
 import { defaultOrderBy } from '@/companies/queries';
-import { PeopleEntityTableData } from '@/people/components/PeopleEntityTableData';
+import { peopleViewFields } from '@/people/constants/peopleViewFields';
 import { PeopleSelectedSortType } from '@/people/queries';
-import { peopleColumns } from '@/people/table/components/peopleColumns';
 import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
 import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
 import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
 import { IconList } from '@/ui/icon';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
 import { EntityTable } from '@/ui/table/components/EntityTable';
+import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
 import { TableContext } from '@/ui/table/states/TableContext';
-import { PersonOrderByWithRelationInput } from '~/generated/graphql';
+import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
+import {
+  PersonOrderByWithRelationInput,
+  useGetPeopleQuery,
+  useUpdateOnePersonMutation,
+} from '~/generated/graphql';
+import { peopleFilters } from '~/pages/people/people-filters';
 import { availableSorts } from '~/pages/people/people-sorts';
 
 export function PeopleTable() {
@@ -30,13 +35,20 @@ export function PeopleTable() {
 
   return (
     <>
-      <PeopleEntityTableData orderBy={orderBy} whereFilters={whereFilters} />
+      <GenericEntityTableData
+        getRequestResultKey="people"
+        useGetRequest={useGetPeopleQuery}
+        orderBy={orderBy}
+        whereFilters={whereFilters}
+        viewFields={peopleViewFields}
+        filterDefinitionArray={peopleFilters}
+      />
       <EntityTable
-        columns={peopleColumns}
         viewName="All People"
         viewIcon={<IconList size={16} />}
         availableSorts={availableSorts}
         onSortsUpdate={updateSorts}
+        useUpdateEntityMutation={useUpdateOnePersonMutation}
       />
     </>
   );

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

@@ -1,55 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-
-import { defaultOrderBy } from '@/companies/queries';
-import { peopleViewFields } from '@/people/constants/peopleViewFields';
-import { PeopleSelectedSortType } from '@/people/queries';
-import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
-import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
-import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
-import { IconList } from '@/ui/icon';
-import { useRecoilScopedValue } from '@/ui/recoil-scope/hooks/useRecoilScopedValue';
-import { EntityTable } from '@/ui/table/components/EntityTableV2';
-import { GenericEntityTableData } from '@/ui/table/components/GenericEntityTableData';
-import { TableContext } from '@/ui/table/states/TableContext';
-import {
-  PersonOrderByWithRelationInput,
-  useGetPeopleQuery,
-  useUpdateOnePersonMutation,
-} from '~/generated/graphql';
-import { peopleFilters } from '~/pages/people/people-filters';
-import { availableSorts } from '~/pages/people/people-sorts';
-
-export function PeopleTable() {
-  const [orderBy, setOrderBy] =
-    useState<PersonOrderByWithRelationInput[]>(defaultOrderBy);
-
-  const updateSorts = useCallback((sorts: Array<PeopleSelectedSortType>) => {
-    setOrderBy(sorts.length ? reduceSortsToOrderBy(sorts) : defaultOrderBy);
-  }, []);
-
-  const filters = useRecoilScopedValue(filtersScopedState, TableContext);
-
-  const whereFilters = useMemo(() => {
-    return { AND: filters.map(turnFilterIntoWhereClause) };
-  }, [filters]) as any;
-
-  return (
-    <>
-      <GenericEntityTableData
-        getRequestResultKey="people"
-        useGetRequest={useGetPeopleQuery}
-        orderBy={orderBy}
-        whereFilters={whereFilters}
-        viewFields={peopleViewFields}
-        filterDefinitionArray={peopleFilters}
-      />
-      <EntityTable
-        viewName="All People"
-        viewIcon={<IconList size={16} />}
-        availableSorts={availableSorts}
-        onSortsUpdate={updateSorts}
-        useUpdateEntityMutation={useUpdateOnePersonMutation}
-      />
-    </>
-  );
-}

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

@@ -1,86 +0,0 @@
-import {
-  IconBrandLinkedin,
-  IconBriefcase,
-  IconBuildingSkyscraper,
-  IconCalendarEvent,
-  IconMail,
-  IconMap,
-  IconPhone,
-  IconUser,
-} from '@/ui/icon/index';
-
-import { EditablePeopleCityCell } from './EditablePeopleCityCell';
-import { EditablePeopleCompanyCell } from './EditablePeopleCompanyCell';
-import { EditablePeopleCreatedAtCell } from './EditablePeopleCreatedAtCell';
-import { EditablePeopleEmailCell } from './EditablePeopleEmailCell';
-import { EditablePeopleFullNameCell } from './EditablePeopleFullNameCell';
-import { EditablePeopleJobTitleCell } from './EditablePeopleJobTitleCell';
-import { EditablePeopleLinkedinUrlCell } from './EditablePeopleLinkedinUrlCell';
-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 />,
-  },
-  {
-    id: 'jobTitle',
-    title: 'Job title',
-    icon: <IconBriefcase size={16} />,
-    size: 150,
-    cellComponent: <EditablePeopleJobTitleCell />,
-  },
-  {
-    id: 'linkedinUrl',
-    title: 'Linkedin',
-    icon: <IconBrandLinkedin size={16} />,
-    size: 150,
-    cellComponent: <EditablePeopleLinkedinUrlCell />,
-  },
-];

front/src/modules/pipeline/components/EntityBoard.tsx

@@ -9,7 +9,7 @@ import { useRecoilState } from 'recoil';
 import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext';
 import { BoardHeader } from '@/ui/board/components/BoardHeader';
 import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
   PipelineProgress,
   PipelineProgressOrderByWithRelationInput,

front/src/modules/pipeline/components/EntityBoardCard.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { Draggable } from '@hello-pangea/dnd';
 
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { BoardCardContext } from '../states/BoardCardContext';
 import { pipelineProgressIdScopedState } from '../states/pipelineProgressIdScopedState';

front/src/modules/pipeline/components/EntityBoardColumn.tsx

@@ -6,8 +6,8 @@ import { useRecoilValue } from 'recoil';
 
 import { BoardPipelineStageColumn } from '@/ui/board/components/Board';
 import { BoardColumn } from '@/ui/board/components/BoardColumn';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import { useUpdatePipelineStageMutation } from '~/generated/graphql';
 
 import { GET_PIPELINES } from '../queries';

front/src/modules/pipeline/components/PipelineProgressPointOfContactPicker.tsx

@@ -2,19 +2,19 @@ import { getOperationName } from '@apollo/client/utilities';
 import { Key } from 'ts-key-enum';
 
 import { useFilteredSearchPeopleQuery } from '@/people/queries';
-import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
+import { SingleEntitySelect } from '@/ui/input/relation-picker/components/SingleEntitySelect';
-import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
+import { relationPickerSearchFilterScopedState } from '@/ui/input/relation-picker/states/relationPickerSearchFilterScopedState';
-import { SingleEntitySelect } from '@/ui/relation-picker/components/SingleEntitySelect';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
-import { relationPickerSearchFilterScopedState } from '@/ui/relation-picker/states/relationPickerSearchFilterScopedState';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
 import { isCreateModeScopedState } from '@/ui/table/editable-cell/states/isCreateModeScopedState';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 import {
   Person,
   PipelineProgress,
   useUpdateOnePipelineProgressMutation,
 } from '~/generated/graphql';
 
-import { EntityForSelect } from '../../ui/relation-picker/types/EntityForSelect';
 import { GET_PIPELINE_PROGRESS, GET_PIPELINES } from '../queries';
 
 export type OwnProps = {

front/src/modules/pipeline/editable-field/components/PipelineProgressPointOfContactEditableField.tsx

@@ -2,8 +2,8 @@ import { PersonChip } from '@/people/components/PersonChip';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconUser } from '@/ui/icon';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
-import { RelationPickerHotkeyScope } from '@/ui/relation-picker/types/RelationPickerHotkeyScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { Person, PipelineProgress } from '~/generated/graphql';
 
 import { PipelineProgressPointOfContactPickerFieldEditMode } from './PipelineProgressPointOfContactPickerFieldEditMode';

front/src/modules/pipeline/editable-field/components/ProbabilityEditableField.tsx

@@ -1,6 +1,6 @@
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { ProbabilityFieldEditMode } from './ProbabilityFieldEditMode';
 

front/src/modules/pipeline/editable-field/components/ProbabilityFieldEditMode.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import styled from '@emotion/styled';
 
 import { useEditableField } from '@/ui/editable-field/hooks/useEditableField';
-import { HotkeyScope } from '@/ui/hotkey/types/HotkeyScope';
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 const StyledContainer = styled.div`
   align-items: center;

front/src/modules/pipeline/progress/components/PipelineProgressAmountEditableField.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { EditableField } from '@/ui/editable-field/components/EditableField';
 import { FieldContext } from '@/ui/editable-field/states/FieldContext';
 import { IconCurrencyDollar } from '@/ui/icon';
-import { InplaceInputText } from '@/ui/inplace-input/components/InplaceInputText';
+import { TextInputEdit } from '@/ui/input/text/components/TextInputEdit';
-import { RecoilScope } from '@/ui/recoil-scope/components/RecoilScope';
+import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import {
   PipelineProgress,
   useUpdateOnePipelineProgressMutation,
@@ -63,7 +63,7 @@ export function PipelineProgressAmountEditableField({ progress }: OwnProps) {
         onCancel={handleCancel}
         iconLabel={<IconCurrencyDollar />}
         editModeContent={
-          <InplaceInputText
+          <TextInputEdit
             placeholder={'Amount'}
             autoFocus
             value={internalValue ?? ''}

front/src/modules/search/hooks/useFilteredSearchEntityQuery.ts

@@ -1,7 +1,7 @@
 import * as Apollo from '@apollo/client';
 
-import { EntitiesForMultipleEntitySelect } from '@/ui/relation-picker/components/MultipleEntitySelect';
+import { EntitiesForMultipleEntitySelect } from '@/ui/input/relation-picker/components/MultipleEntitySelect';
-import { EntityForSelect } from '@/ui/relation-picker/types/EntityForSelect';
+import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
 import {
   Exact,
   InputMaybe,

front/src/modules/settings/profile/components/DeleteAccount.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { useAuth } from '@/auth/hooks/useAuth';
 import { AppPath } from '@/types/AppPath';
 import { ButtonVariant } from '@/ui/button/components/Button';
-import { H2Title } from '@/ui/title/components/H2Title';
+import { H2Title } from '@/ui/typography/components/H2Title';
 import { useDeleteUserAccountMutation } from '~/generated/graphql';
 
 import { DeleteModal, StyledDeleteButton } from './DeleteModal';

front/src/modules/settings/profile/components/DeleteModal.tsx

@@ -5,10 +5,10 @@ import { useRecoilValue } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
-import { TextInput } from '@/ui/input/components/TextInput';
+import { TextInput } from '@/ui/input/text/components/TextInput';
 import { Modal } from '@/ui/modal/components/Modal';
 import { Section, SectionAlignment } from '@/ui/section/components/Section';
-import { H1Title, H1TitleFontColor } from '@/ui/title/components/H1Title';
+import { H1Title, H1TitleFontColor } from '@/ui/typography/components/H1Title';
 import { debounce } from '~/utils/debounce';
 
 interface DeleteModalProps {