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/ColumnHead.tsx

@@ -1,10 +1,9 @@
 import styled from '@emotion/styled';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ReactNode } from 'react';
 
 type OwnProps = {
   viewName: string;
-  viewIcon?: IconProp;
+  viewIcon?: ReactNode;
 };
 
 const StyledTitle = styled.div`
@@ -24,7 +23,7 @@ const StyledIcon = styled.div`
 function TableHeader({ viewName, viewIcon }: OwnProps) {
   return (
     <StyledTitle>
-      <StyledIcon>{viewIcon && <FontAwesomeIcon icon={viewIcon} />}</StyledIcon>
+      <StyledIcon>{viewIcon}</StyledIcon>
       {viewName}
     </StyledTitle>
   );

front/src/components/table/Table.tsx

@@ -7,7 +7,6 @@ import {
   useReactTable,
 } from '@tanstack/react-table';
 import TableHeader from './table-header/TableHeader';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import styled from '@emotion/styled';
 import {
   FilterType,
@@ -19,7 +18,7 @@ type OwnProps<TData, SortField> = {
   data: Array<TData>;
   columns: Array<ColumnDef<TData, any>>;
   viewName: string;
-  viewIcon?: IconProp;
+  viewIcon?: React.ReactNode;
   onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
   availableSorts?: Array<SortType<SortField>>;
   availableFilters?: FilterType[];

front/src/components/table/table-header/DropdownButton.tsx

@@ -2,8 +2,7 @@ import styled from '@emotion/styled';
 import { useRef, ReactNode } from 'react';
 import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
 import { modalBackground } from '../../../layout/styles/themes';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleDown } from '@fortawesome/pro-regular-svg-icons';
+import { FaAngleDown } from 'react-icons/fa';
 
 type OwnProps = {
   label: string;
@@ -183,7 +182,7 @@ const StyleAngleDownContainer = styled.div`
 function DropdownTopOptionAngleDown() {
   return (
     <StyleAngleDownContainer>
-      <FontAwesomeIcon icon={faAngleDown} />
+      <FaAngleDown />
     </StyleAngleDownContainer>
   );
 }

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

@@ -1,6 +1,5 @@
 import { useCallback, useState } from 'react';
 import DropdownButton from './DropdownButton';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FilterType, SelectedFilterType } from './interface';
 
 type OwnProps = {
@@ -72,9 +71,7 @@ export function FilterDropdownButton({
         setSelectedFilter(filter);
       }}
     >
-      <DropdownButton.StyledIcon>
-        {filter.icon && <FontAwesomeIcon icon={filter.icon} />}
-      </DropdownButton.StyledIcon>
+      <DropdownButton.StyledIcon>{filter.icon}</DropdownButton.StyledIcon>
       {filter.label}
     </DropdownButton.StyledDropdownItem>
   ));

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

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import SortOrFilterChip from './SortOrFilterChip';
-import { faArrowDown, faArrowUp } from '@fortawesome/pro-regular-svg-icons';
+import { FaArrowDown, FaArrowUp } from 'react-icons/fa';
 import { SelectedFilterType, SelectedSortType } from './interface';
 
 type OwnProps<SortField> = {
@@ -53,7 +53,7 @@ function SortAndFilterBar<SortField extends string>({
             key={sort.key}
             labelValue={sort.label}
             id={sort.key}
-            icon={sort.order === 'asc' ? faArrowDown : faArrowUp}
+            icon={sort.order === 'asc' ? <FaArrowDown /> : <FaArrowUp />}
             onRemove={() => onRemoveSort(sort.key)}
           />
         );

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

@@ -1,7 +1,6 @@
 import { useCallback, useState } from 'react';
 import DropdownButton from './DropdownButton';
 import { SelectedSortType, SortType } from './interface';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 type OwnProps<SortField> = {
   sorts: SelectedSortType<SortField>[];
@@ -74,7 +73,7 @@ export function SortDropdownButton<SortField extends string>({
                 }}
               >
                 <DropdownButton.StyledIcon>
-                  {sort.icon && <FontAwesomeIcon icon={sort.icon} />}
+                  {sort.icon}
                 </DropdownButton.StyledIcon>
                 {sort.label}
               </DropdownButton.StyledDropdownItem>

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

@@ -1,13 +1,12 @@
 import styled from '@emotion/styled';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { faTimes } from '@fortawesome/pro-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { FaTimes } from 'react-icons/fa';
+import { ReactNode } from 'react';
 
 type OwnProps = {
   id: string;
   labelKey?: string;
   labelValue: string;
-  icon: IconProp;
+  icon: ReactNode;
   onRemove: () => void;
 };
 
@@ -44,13 +43,11 @@ function SortOrFilterChip({
 }: OwnProps) {
   return (
     <StyledChip>
-      <StyledIcon>
-        <FontAwesomeIcon icon={icon} />
-      </StyledIcon>
+      <StyledIcon>{icon}</StyledIcon>
       {labelKey && <StyledLabelKey>{labelKey}:&nbsp;</StyledLabelKey>}
       {labelValue}
       <StyledDelete onClick={onRemove} data-testid={'remove-icon-' + id}>
-        <FontAwesomeIcon icon={faTimes} />
+        <FaTimes />
       </StyledDelete>
     </StyledChip>
   );

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

@@ -1,21 +1,19 @@
 import styled from '@emotion/styled';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import DropdownButton from './DropdownButton';
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import {
   FilterType,
   SelectedFilterType,
   SelectedSortType,
   SortType,
 } from './interface';
-import { useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState } from 'react';
 import { SortDropdownButton } from './SortDropdownButton';
 import { FilterDropdownButton } from './FilterDropdownButton';
 import SortAndFilterBar from './SortAndFilterBar';
 
 type OwnProps<SortField> = {
   viewName: string;
-  viewIcon?: IconProp;
+  viewIcon?: ReactNode;
   onSortsUpdate?: (sorts: Array<SelectedSortType<SortField>>) => void;
   onFiltersUpdate?: (sorts: Array<SelectedFilterType>) => void;
   availableSorts?: Array<SortType<SortField>>;
@@ -110,9 +108,7 @@ function TableHeader<SortField extends string>({
     <StyledContainer>
       <StyledTableHeader>
         <StyledViewSection>
-          <StyledIcon>
-            {viewIcon && <FontAwesomeIcon icon={viewIcon} />}
-          </StyledIcon>
+          <StyledIcon>{viewIcon}</StyledIcon>
           {viewName}
         </StyledViewSection>
         <StyledFilters>

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>

front/src/components/table/table-header/__tests__/FilterDropdownButton.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import { RegularFilterDropdownButton } from '../__stories__/FilterDropdownButton.stories';
-import { faEnvelope } from '@fortawesome/pro-regular-svg-icons';
+import { FaEnvelope } from 'react-icons/fa';
 
 it('Checks the default top option is Include', async () => {
   const setSorts = jest.fn();
@@ -23,7 +23,7 @@ it('Checks the default top option is Include', async () => {
       value: 'John Doe',
       label: 'Email',
       operand: { id: 'include', label: 'Include' },
-      icon: faEnvelope,
+      icon: <FaEnvelope />,
     },
   ]);
 });
@@ -55,7 +55,7 @@ it('Checks the selection of top option for Doesnot include', async () => {
       value: 'John Doe',
       label: 'Email',
       operand: { id: 'not-include', label: "Doesn't include" },
-      icon: faEnvelope,
+      icon: <FaEnvelope />,
     },
   ]);
 

front/src/components/table/table-header/__tests__/SortDropdownButton.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import { RegularSortDropdownButton } from '../__stories__/SortDropdownButton.stories';
-import { faEnvelope } from '@fortawesome/pro-regular-svg-icons';
+import { FaEnvelope } from 'react-icons/fa';
 
 it('Checks the default top option is Ascending', async () => {
   const setSorts = jest.fn();
@@ -18,7 +18,7 @@ it('Checks the default top option is Ascending', async () => {
     {
       label: 'Email',
       key: 'email',
-      icon: faEnvelope,
+      icon: <FaEnvelope />,
       order: 'asc',
     },
   ]);
@@ -46,7 +46,7 @@ it('Checks the selection of Descending', async () => {
     {
       label: 'Email',
       key: 'email',
-      icon: faEnvelope,
+      icon: <FaEnvelope />,
       order: 'desc',
     },
   ]);

front/src/components/table/table-header/interface.ts

@@ -1,15 +1,15 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ReactNode } from 'react';
 
 export type SortType<SortKey = string> = {
   label: string;
   key: SortKey;
-  icon?: IconProp;
+  icon?: ReactNode;
 };
 
 export type FilterType<FilterKey = string> = {
   label: string;
   key: FilterKey;
-  icon: IconProp;
+  icon: ReactNode;
 };
 
 export type SelectedFilterType = {
@@ -17,7 +17,7 @@ export type SelectedFilterType = {
   label: string;
   value: string;
   operand: { id: string; label: string };
-  icon: IconProp;
+  icon: ReactNode;
 };
 
 export type SelectedSortType<SortField = string> = SortType<SortField> & {