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/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';