admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
* Fontawesome -> ReactIcons cleanup

* No need for npmrc anymore

* Complete migration

* Fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Félix Malfait
2023-05-03 17:24:07 +02:00
committed by GitHub
parent f28edd405f
commit 9bc3aa1fb9
30 changed files with 813 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/pages/people/People.tsx
View File

@ -1,4 +1,4 @@
import { faUser, faList } from '@fortawesome/pro-regular-svg-icons';
import { FaRegUser, FaList } from 'react-icons/fa';
import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
import Table from '../../components/table/Table';
import styled from '@emotion/styled';
@ -34,14 +34,14 @@ function People() {
const { data } = usePeopleQuery(orderBy);
return (
<WithTopBarContainer title="People" icon={faUser}>
<WithTopBarContainer title="People" icon={<FaRegUser />}>
<StyledPeopleContainer>
{
<Table
data={data ? data.people.map(mapPerson) : []}
columns={peopleColumns}
viewName="All People"
viewIcon={faList}
viewIcon={<FaList />}
onSortsUpdate={updateSorts}
availableSorts={availableSorts}
availableFilters={availableFilters}

56
front/src/pages/people/people-table.tsx
View File

@ -1,12 +1,12 @@
import {
faBuildings,
faCalendar,
faEnvelope,
faUser,
faMapPin,
faPhone,
faRectangleHistory,
} from '@fortawesome/pro-regular-svg-icons';
FaRegBuilding,
FaCalendar,
FaEnvelope,
FaRegUser,
FaMapPin,
FaPhone,
FaStream,
} from 'react-icons/fa';
import { createColumnHelper } from '@tanstack/react-table';
import ClickableCell from '../../components/table/ClickableCell';
import ColumnHead from '../../components/table/ColumnHead';
@ -28,56 +28,56 @@ export 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 Array<SortType<OrderByFields>>;
export 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 columnHelper = createColumnHelper<Person>();
export const peopleColumns = [
columnHelper.accessor('fullName', {
header: () => <ColumnHead viewName="People" viewIcon={faUser} />,
header: () => <ColumnHead viewName="People" viewIcon={<FaRegUser />} />,
cell: (props) => (
<>
<HorizontalyAlignedContainer>
@ -94,7 +94,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('email', {
header: () => <ColumnHead viewName="Email" viewIcon={faEnvelope} />,
header: () => <ColumnHead viewName="Email" viewIcon={<FaEnvelope />} />,
cell: (props) => (
<EditableCell
content={props.row.original.email}
@ -107,7 +107,9 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('company', {
header: () => <ColumnHead viewName="Company" viewIcon={faBuildings} />,
header: () => (
<ColumnHead viewName="Company" viewIcon={<FaRegBuilding />} />
),
cell: (props) => (
<ClickableCell href="#">
<CompanyChip
@ -118,7 +120,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('phone', {
header: () => <ColumnHead viewName="Phone" viewIcon={faPhone} />,
header: () => <ColumnHead viewName="Phone" viewIcon={<FaPhone />} />,
cell: (props) => (
<ClickableCell
href={parsePhoneNumber(
@ -134,7 +136,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('creationDate', {
header: () => <ColumnHead viewName="Creation" viewIcon={faCalendar} />,
header: () => <ColumnHead viewName="Creation" viewIcon={<FaCalendar />} />,
cell: (props) => (
<ClickableCell href="#">
{new Intl.DateTimeFormat(undefined, {
@ -146,7 +148,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('pipe', {
header: () => <ColumnHead viewName="Pipe" viewIcon={faRectangleHistory} />,
header: () => <ColumnHead viewName="Pipe" viewIcon={<FaStream />} />,
cell: (props) => (
<ClickableCell href="#">
<PipeChip
@ -157,7 +159,7 @@ export const peopleColumns = [
),
}),
columnHelper.accessor('city', {
header: () => <ColumnHead viewName="City" viewIcon={faMapPin} />,
header: () => <ColumnHead viewName="City" viewIcon={<FaMapPin />} />,
cell: (props) => (
<ClickableCell href="#">{props.row.original.city}</ClickableCell>
),