Feat/sidecar components (#1578)

* Added a new eslint plugin in TypeScript for Effect components

* Fixed edge cases

* Fixed lint

* Fix eslint

---------

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

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

@@ -6,7 +6,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { CompanyBoard } from '../board/components/CompanyBoard';
-import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
+import { HooksCompanyBoardEffect } from '../components/HooksCompanyBoardEffect';
 import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
 const meta: Meta<typeof CompanyBoard> = {
@@ -15,7 +15,7 @@ const meta: Meta<typeof CompanyBoard> = {
   decorators: [
     (Story) => (
       <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
-        <HooksCompanyBoard />
+        <HooksCompanyBoardEffect />
         <MemoryRouter>
           <Story />
         </MemoryRouter>

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

@@ -14,7 +14,7 @@ import { ComponentWithRecoilScopeDecorator } from '~/testing/decorators/Componen
 import { graphqlMocks } from '~/testing/graphqlMocks';
 import { mockedPipelineProgressData } from '~/testing/mock-data/pipeline-progress';
 
-import { HooksCompanyBoard } from '../components/HooksCompanyBoard';
+import { HooksCompanyBoardEffect } from '../components/HooksCompanyBoardEffect';
 import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
 const meta: Meta<typeof CompanyBoardCard> = {
@@ -33,7 +33,7 @@ const meta: Meta<typeof CompanyBoardCard> = {
 
       return (
         <>
-          <HooksCompanyBoard />
+          <HooksCompanyBoardEffect />
           <RecoilScope SpecificContext={BoardColumnRecoilScopeContext}>
             <BoardCardIdContext.Provider
               value={mockedPipelineProgressData[1].id}

front/src/modules/companies/board/components/CompanyBoard.tsx

@@ -9,7 +9,7 @@ import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { useBoardViews } from '@/views/hooks/useBoardViews';
 import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions';
 
-import { HooksCompanyBoard } from '../../components/HooksCompanyBoard';
+import { HooksCompanyBoardEffect } from '../../components/HooksCompanyBoardEffect';
 import { CompanyBoardRecoilScopeContext } from '../../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
 type CompanyBoardProps = Pick<
@@ -31,7 +31,7 @@ export const CompanyBoard = ({
 
   return (
     <>
-      <HooksCompanyBoard />
+      <HooksCompanyBoardEffect />
       <ViewBarContext.Provider
         value={{
           defaultViewName: 'All Opportunities',

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

@@ -24,7 +24,7 @@ import { useUpdateCompanyBoardCardIds } from '../hooks/useUpdateBoardCardIds';
 import { useUpdateCompanyBoard } from '../hooks/useUpdateCompanyBoardColumns';
 import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
 
-export function HooksCompanyBoard() {
+export function HooksCompanyBoardEffect() {
   const [, setAvailableFilters] = useRecoilScopedState(
     availableFiltersScopedState,
     CompanyBoardRecoilScopeContext,

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

@@ -9,7 +9,7 @@ import { companiesAvailableColumnDefinitions } from '../../constants/companiesAv
 
 import { mockedCompaniesData } from './companies-mock-data';
 
-export function CompanyTableMockData() {
+export function CompanyTableMockDataEffect() {
   const [, setTableColumns] = useRecoilScopedState(
     tableColumnsScopedState,
     TableRecoilScopeContext,

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

@@ -2,12 +2,12 @@ import { EntityTable } from '@/ui/table/components/EntityTable';
 import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext';
 import { useUpdateOneCompanyMutation } from '~/generated/graphql';
 
-import { CompanyTableMockData } from './CompanyTableMockData';
+import { CompanyTableMockDataEffect } from './CompanyTableMockDataEffect';
 
 export function CompanyTableMockMode() {
   return (
     <>
-      <CompanyTableMockData />
+      <CompanyTableMockDataEffect />
       <ViewBarContext.Provider value={{ defaultViewName: 'All Companies' }}>
         <EntityTable updateEntityMutation={[useUpdateOneCompanyMutation()]} />
       </ViewBarContext.Provider>

front/src/modules/debug/components/RecoilDebugObserver.tsx

@@ -14,7 +14,7 @@ const formatTitle = (stateName: string) => {
   return [parts.join(' '), ...headerCss];
 };
 
-export function RecoilDebugObserver() {
+export function RecoilDebugObserverEffect() {
   const snapshot = useRecoilSnapshot();
 
   const isDebugMode = useRecoilValue(isDebugModeState);

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

@@ -6,7 +6,7 @@ import {
 
 import { useSetPeopleEntityTable } from '../hooks/useSetPeopleEntityTable';
 
-export function PeopleEntityTableData({
+export function PeopleEntityTableDataEffect({
   orderBy = [
     {
       createdAt: SortOrder.Desc,

front/src/modules/ui/layout/components/PageHotkeysEffect.tsx

@@ -5,7 +5,7 @@ type OwnProps = {
   onAddButtonClick?: () => void;
 };
 
-export function PageHotkeys({ onAddButtonClick }: OwnProps) {
+export function PageHotkeysEffect({ onAddButtonClick }: OwnProps) {
   useScopedHotkeys('c', () => onAddButtonClick?.(), TableHotkeyScope.Table, [
     onAddButtonClick,
   ]);