chore: Make a twenty Eslint Rule to make sure that icons are imported from @/ui/icons (#1370)

Fix the imports

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Mael FOSSO <fosso.mael.elvis@gmail.com>

front/.eslintrc.js

@@ -61,6 +61,17 @@ module.exports = {
     "unused-imports/no-unused-vars": [
       "warn",
       { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
-    ]
+    ],
+    'no-restricted-imports': [
+      'error',
+      {
+        'patterns': [
+          {
+            'group': ['@tabler/icons-react'],
+            'message': 'Icon imports are only allowed for `@/ui/icon`',
+          },
+        ],
+      },
+    ],
   }
 };

front/src/modules/activities/notes/components/Notes.tsx

@@ -1,12 +1,12 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconNotes } from '@tabler/icons-react';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { NoteList } from '@/activities/notes/components/NoteList';
 import { useNotes } from '@/activities/notes/hooks/useNotes';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { Button } from '@/ui/button/components/Button';
+import { IconNotes } from '@/ui/icon';
 import { ActivityType } from '~/generated/graphql';
 
 const StyledTaskGroupEmptyContainer = styled.div`

front/src/modules/activities/tasks/components/TaskGroups.tsx

@@ -1,11 +1,11 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconCheckbox } from '@tabler/icons-react';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { useTasks } from '@/activities/tasks/hooks/useTasks';
 import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
 import { Button } from '@/ui/button/components/Button';
+import { IconCheckbox } from '@/ui/icon';
 import { ActivityType } from '~/generated/graphql';
 
 import { AddTaskButton } from './AddTaskButton';

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { getOperationName } from '@apollo/client/utilities';
 import styled from '@emotion/styled';
 import { flip, offset, useFloating } from '@floating-ui/react';
-import { IconPlus } from '@tabler/icons-react';
 import { v4 } from 'uuid';
 
 import {
@@ -11,6 +10,7 @@ import {
 } from '@/people/components/PeoplePicker';
 import { GET_PEOPLE } from '@/people/graphql/queries/getPeople';
 import { LightIconButton } from '@/ui/button/components/LightIconButton';
+import { IconPlus } from '@/ui/icon';
 import { RelationPickerHotkeyScope } from '@/ui/input/relation-picker/types/RelationPickerHotkeyScope';
 import { TextInput } from '@/ui/input/text/components/TextInput';
 import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';

front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx

@@ -1,10 +1,10 @@
-import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
 import { useSetRecoilState } from 'recoil';
 
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
+import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
 import { ActivityType } from '~/generated/graphql';
 
 import { useDeleteSelectedComapnies } from './useDeleteCompanies';

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

@@ -4,12 +4,12 @@ import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
-import { IconDotsVertical, IconLinkOff, IconTrash } from '@tabler/icons-react';
 
 import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
+import { IconDotsVertical, IconLinkOff, IconTrash } from '@/ui/icon';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { Avatar } from '@/users/components/Avatar';
 import {

front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx

@@ -1,11 +1,11 @@
 import { getOperationName } from '@apollo/client/utilities';
-import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
 import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
+import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
 import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
 import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
 import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';

front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -9,7 +9,6 @@ import {
   size,
   useFloating,
 } from '@floating-ui/react';
-import { TablerIconsProps } from '@tabler/icons-react';
 import debounce from 'lodash.debounce';
 import { ReadonlyDeep } from 'type-fest';
 
@@ -20,7 +19,7 @@ import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMen
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
-import { IconChevronDown } from '@/ui/icon';
+import { IconChevronDown, TablerIconsProps } from '@/ui/icon';
 import { AppTooltip } from '@/ui/tooltip/AppTooltip';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';

front/src/modules/ui/board/components/EntityBoard.tsx

@@ -3,7 +3,6 @@ import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350
-import { IconList } from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
 import { CompanyBoardRecoilScopeContext } from '@/companies/states/recoil-scope-contexts/CompanyBoardRecoilScopeContext';
@@ -12,6 +11,7 @@ import { BoardHeader } from '@/ui/board/components/BoardHeader';
 import { StyledBoard } from '@/ui/board/components/StyledBoard';
 import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext';
 import { SelectedSortType } from '@/ui/filter-n-sort/types/interface';
+import { IconList } from '@/ui/icon';
 import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';

front/src/modules/ui/board/hooks/useBoardContextMenuEntries.tsx

@@ -1,8 +1,8 @@
-import { IconTrash } from '@tabler/icons-react';
 import { useSetRecoilState } from 'recoil';
 
 import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
 import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState';
+import { IconTrash } from '@/ui/icon';
 
 import { useDeleteSelectedBoardCards } from './useDeleteSelectedBoardCards';
 

front/src/modules/ui/button/components/Button.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import styled from '@emotion/styled';
-import { TablerIconsProps } from '@tabler/icons-react';
 
+import { TablerIconsProps } from '@/ui/icon';
 import { SoonPill } from '@/ui/pill/components/SoonPill';
 
 export type ButtonSize = 'medium' | 'small';

front/src/modules/ui/button/components/FloatingButton.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import styled from '@emotion/styled';
-import { TablerIconsProps } from '@tabler/icons-react';
+
+import { TablerIconsProps } from '@/ui/icon';
 
 export type FloatingButtonSize = 'small' | 'medium';
 export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

front/src/modules/ui/button/components/FloatingIconButton.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import styled from '@emotion/styled';
-import { TablerIconsProps } from '@tabler/icons-react';
+
+import { TablerIconsProps } from '@/ui/icon';
 
 export type FloatingIconButtonSize = 'small' | 'medium';
 export type FloatingIconButtonPosition =

front/src/modules/ui/button/components/IconButton.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import styled from '@emotion/styled';
-import { TablerIconsProps } from '@tabler/icons-react';
+
+import { TablerIconsProps } from '@/ui/icon';
 
 export type IconButtonSize = 'medium' | 'small';
 export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';

front/src/modules/ui/button/components/LightButton.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEvent, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { TablerIconsProps } from '@tabler/icons-react';
+
+import { TablerIconsProps } from '@/ui/icon';
 
 export type LightButtonAccent = 'secondary' | 'tertiary';
 

front/src/modules/ui/button/components/LightIconButton.tsx

@@ -1,6 +1,7 @@
 import React, { MouseEvent, useMemo } from 'react';
 import styled from '@emotion/styled';
-import { TablerIconsProps } from '@tabler/icons-react';
+
+import { TablerIconsProps } from '@/ui/icon';
 
 export type LightIconButtonAccent = 'secondary' | 'tertiary';
 export type LightIconButtonSize = 'small' | 'medium';

front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconCalendar } from '@tabler/icons-react';
 
+import { IconCalendar } from '@/ui/icon';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DateEditableField } from '../DateEditableField';

front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconPhone } from '@tabler/icons-react';
 
+import { IconPhone } from '@/ui/icon';
 import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
 
 import { PhoneEditableField } from '../PhoneEditableField';

front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandButton.tsx

@@ -1,8 +1,8 @@
 import { Context } from 'react';
 import { useTheme } from '@emotion/react';
-import { IconChevronDown } from '@tabler/icons-react';
 
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
+import { IconChevronDown } from '@/ui/icon';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 
 import { isFilterDropdownOperandSelectUnfoldedScopedState } from '../states/isFilterDropdownOperandSelectUnfoldedScopedState';

front/src/modules/ui/filter-n-sort/components/SingleEntityFilterDropdownButton.tsx

@@ -2,11 +2,11 @@ import { Context, useState } from 'react';
 import React from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { IconChevronDown } from '@tabler/icons-react';
 
 import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
 import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
 import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
+import { IconChevronDown } from '@/ui/icon';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 

front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx

@@ -1,11 +1,11 @@
 import { Context, useCallback, useState } from 'react';
 import { useTheme } from '@emotion/react';
-import { IconChevronDown } from '@tabler/icons-react';
 
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
+import { IconChevronDown } from '@/ui/icon';
 import { OverflowingTextWithTooltip } from '@/ui/tooltip/OverflowingTextWithTooltip';
 import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
 

front/src/modules/ui/icon/components/IconAddressBook.tsx

@@ -1,4 +1,4 @@
-import { TablerIconsProps } from '@tabler/icons-react';
+import { TablerIconsProps } from '@/ui/icon';
 
 import { ReactComponent as IconAddressBookRaw } from '../assets/address-book.svg';
 

front/src/modules/ui/icon/index.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-restricted-imports */
+export type { TablerIconsProps } from '@tabler/icons-react';
 export {
   IconAlertCircle,
   IconAlertTriangle,
@@ -29,6 +31,7 @@ export {
   IconCopy,
   IconCross,
   IconCurrencyDollar,
+  IconDotsVertical,
   IconEye,
   IconEyeOff,
   IconFileImport,
@@ -39,7 +42,9 @@ export {
   IconInbox,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarRightCollapse,
+  IconLayoutSidebarRightExpand,
   IconLink,
+  IconLinkOff,
   IconList,
   IconLogout,
   IconMail,

front/src/modules/ui/right-drawer/components/RightDrawerTopBarExpandButton.tsx

@@ -1,10 +1,10 @@
-import {
-  IconLayoutSidebarRightCollapse,
-  IconLayoutSidebarRightExpand,
-} from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
 import { LightIconButton } from '@/ui/button/components/LightIconButton';
+import {
+  IconLayoutSidebarRightCollapse,
+  IconLayoutSidebarRightExpand,
+} from '@/ui/icon';
 
 import { isRightDrawerExpandedState } from '../states/isRightDrawerExpandedState';
 

front/src/modules/ui/tab/components/__stories__/Tab.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { IconCheckbox } from '@tabler/icons-react';
 
+import { IconCheckbox } from '@/ui/icon';
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/tab/components/__stories__/Tablist.stories.tsx

@@ -1,8 +1,8 @@
 import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { within } from '@storybook/testing-library';
-import { IconCheckbox } from '@tabler/icons-react';
 
+import { IconCheckbox } from '@/ui/icon';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 

front/src/modules/ui/table/editable-cell/components/EditableCell.tsx

@@ -1,9 +1,9 @@
 import { ReactElement, useState } from 'react';
 import styled from '@emotion/styled';
-import { IconPencil } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 
 import { FloatingIconButton } from '@/ui/button/components/FloatingIconButton';
+import { IconPencil } from '@/ui/icon';
 import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
 
 import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';

front/src/modules/ui/table/editable-cell/type/components/GenericEditableBooleanCell.tsx

@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
-import { IconCheck, IconX } from '@tabler/icons-react';
 import { useRecoilState } from 'recoil';
 
 import type { ViewFieldBooleanMetadata } from '@/ui/editable-field/types/ViewField';
+import { IconCheck, IconX } from '@/ui/icon';
 import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
 import { useUpdateEntityField } from '@/ui/table/hooks/useUpdateEntityField';
 import { tableEntityFieldFamilySelector } from '@/ui/table/states/selectors/tableEntityFieldFamilySelector';

front/src/pages/tasks/tasks-filters.tsx

@@ -1,7 +1,6 @@
-import { IconUser } from '@tabler/icons-react';
-
 import { TasksRecoilScopeContext } from '@/activities/states/recoil-scope-contexts/TasksRecoilScopeContext';
 import { FilterDefinitionByEntity } from '@/ui/filter-n-sort/types/FilterDefinitionByEntity';
+import { IconUser } from '@/ui/icon';
 import { FilterDropdownUserSearchSelect } from '@/users/components/FilterDropdownUserSearchSelect';
 import { Activity } from '~/generated/graphql';
 

front/src/sync-hooks/PageChangeEffect.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { matchPath, useLocation, useNavigate } from 'react-router-dom';
-import { IconCheckbox, IconNotes } from '@tabler/icons-react';
 
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
@@ -13,11 +12,14 @@ import { AppBasePath } from '@/types/AppBasePath';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { SettingsPath } from '@/types/SettingsPath';
+import { IconCheckbox, IconNotes } from '@/ui/icon';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
 import { TableHotkeyScope } from '@/ui/table/types/TableHotkeyScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
-import { useGetWorkspaceFromInviteHashLazyQuery } from '~/generated/graphql';
-import { ActivityType } from '~/generated/graphql';
+import {
+  ActivityType,
+  useGetWorkspaceFromInviteHashLazyQuery,
+} from '~/generated/graphql';
 
 import { useIsMatchingLocation } from '../hooks/useIsMatchingLocation';