Replace Fontawesome Pro by React-Icons/FA (#93)

* Fontawesome -> ReactIcons cleanup

* No need for npmrc anymore

* Complete migration

* Fix tests

---------

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

front/src/components/table/table-header/__stories__/FilterDropdownButton.stories.tsx

@@ -4,13 +4,13 @@ import { FilterDropdownButton } from '../FilterDropdownButton';
 import styled from '@emotion/styled';
 import { FilterType, SelectedFilterType } from '../interface';
 import {
-  faUser,
-  faBuildings,
-  faEnvelope,
-  faPhone,
-  faCalendar,
-  faMapPin,
-} from '@fortawesome/pro-regular-svg-icons';
+  FaRegUser,
+  FaRegBuilding,
+  FaEnvelope,
+  FaPhone,
+  FaCalendar,
+  FaMapPin,
+} from 'react-icons/fa';
 import { useCallback, useState } from 'react';
 
 const component = {
@@ -28,25 +28,25 @@ const availableFilters = [
   {
     key: 'fullname',
     label: 'People',
-    icon: faUser,
+    icon: <FaRegUser />,
   },
   {
     key: 'company_name',
     label: 'Company',
-    icon: faBuildings,
+    icon: <FaRegBuilding />,
   },
   {
     key: 'email',
     label: 'Email',
-    icon: faEnvelope,
+    icon: <FaEnvelope />,
   },
-  { key: 'phone', label: 'Phone', icon: faPhone },
+  { key: 'phone', label: 'Phone', icon: <FaPhone /> },
   {
     key: 'created_at',
     label: 'Created at',
-    icon: faCalendar,
+    icon: <FaCalendar />,
   },
-  { key: 'city', label: 'City', icon: faMapPin },
+  { key: 'city', label: 'City', icon: <FaMapPin /> },
 ] satisfies FilterType[];
 
 const StyleDiv = styled.div`

front/src/components/table/table-header/__stories__/SortAndFilterBar.stories.tsx

@@ -1,7 +1,7 @@
 import SortAndFilterBar from '../SortAndFilterBar';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { faArrowDown } from '@fortawesome/pro-regular-svg-icons';
+import { FaArrowDown } from 'react-icons/fa';
 
 const component = {
   title: 'SortAndFilterBar',
@@ -23,13 +23,13 @@ export const RegularSortAndFilterBar = ({ removeFunction }: OwnProps) => {
             label: 'Test sort',
             order: 'asc',
             key: 'test_sort',
-            icon: faArrowDown,
+            icon: <FaArrowDown />,
           },
           {
             label: 'Test sort 2',
             order: 'desc',
             key: 'test_sort_2',
-            icon: faArrowDown,
+            icon: <FaArrowDown />,
           },
         ]}
         onRemoveSort={removeFunction}
@@ -39,7 +39,7 @@ export const RegularSortAndFilterBar = ({ removeFunction }: OwnProps) => {
             label: 'People',
             operand: { id: 'include', label: 'Include' },
             id: 'test_filter',
-            icon: faArrowDown,
+            icon: <FaArrowDown />,
             value: 'John Doe',
           },
         ]}

front/src/components/table/table-header/__stories__/SortDropdownButton.stories.tsx

@@ -2,13 +2,13 @@ import { SelectedSortType, SortType } from '../interface';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
 import {
-  faBuildings,
-  faCalendar,
-  faEnvelope,
-  faMapPin,
-  faPhone,
-  faUser,
-} from '@fortawesome/pro-regular-svg-icons';
+  FaRegBuilding,
+  FaCalendar,
+  FaEnvelope,
+  FaMapPin,
+  FaPhone,
+  FaRegUser,
+} from 'react-icons/fa';
 import { SortDropdownButton } from '../SortDropdownButton';
 import styled from '@emotion/styled';
 
@@ -29,25 +29,25 @@ const availableSorts = [
   {
     key: 'fullname',
     label: 'People',
-    icon: faUser,
+    icon: <FaRegUser />,
   },
   {
     key: 'company_name',
     label: 'Company',
-    icon: faBuildings,
+    icon: <FaRegBuilding />,
   },
   {
     key: 'email',
     label: 'Email',
-    icon: faEnvelope,
+    icon: <FaEnvelope />,
   },
-  { key: 'phone', label: 'Phone', icon: faPhone },
+  { key: 'phone', label: 'Phone', icon: <FaPhone /> },
   {
     key: 'created_at',
     label: 'Created at',
-    icon: faCalendar,
+    icon: <FaCalendar />,
   },
-  { key: 'city', label: 'City', icon: faMapPin },
+  { key: 'city', label: 'City', icon: <FaMapPin /> },
 ] satisfies SortType[];
 
 const StyleDiv = styled.div`

front/src/components/table/table-header/__stories__/SortOrFilterChip.stories.tsx

@@ -1,7 +1,7 @@
 import SortOrFilterChip from '../SortOrFilterChip';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { faArrowDown, faPeople } from '@fortawesome/pro-regular-svg-icons';
+import { FaArrowDown, FaRegUser } from 'react-icons/fa';
 
 const component = {
   title: 'SortOrFilterChip',
@@ -19,7 +19,7 @@ export const RegularFilterChip = ({ removeFunction }: OwnProps) => {
     <ThemeProvider theme={lightTheme}>
       <SortOrFilterChip
         id="test_sort"
-        icon={faPeople}
+        icon={<FaRegUser />}
         labelKey="Account owner"
         labelValue="is Charles"
         onRemove={removeFunction}
@@ -33,7 +33,7 @@ export const RegularSortChip = ({ removeFunction }: OwnProps) => {
     <ThemeProvider theme={lightTheme}>
       <SortOrFilterChip
         id="test_sort"
-        icon={faArrowDown}
+        icon={<FaArrowDown />}
         labelValue="Created at"
         onRemove={removeFunction}
       />

front/src/components/table/table-header/__stories__/TableHeader.stories.tsx

@@ -1,7 +1,7 @@
 import TableHeader from '../TableHeader';
 import { ThemeProvider } from '@emotion/react';
 import { lightTheme } from '../../../../layout/styles/themes';
-import { faBuilding, faCalendar } from '@fortawesome/pro-regular-svg-icons';
+import { FaRegBuilding, FaCalendar } from 'react-icons/fa';
 import { SortType } from '../interface';
 
 const component = {
@@ -16,14 +16,14 @@ export const RegularTableHeader = () => {
     {
       key: 'created_at',
       label: 'Created at',
-      icon: faCalendar,
+      icon: <FaCalendar />,
     },
   ];
   return (
     <ThemeProvider theme={lightTheme}>
       <TableHeader
         viewName="Test"
-        viewIcon={faBuilding}
+        viewIcon={<FaRegBuilding />}
         availableSorts={availableSorts}
       />
     </ThemeProvider>