Merge pull request #37 from twentyhq/cbo-install-fa-pro

Migrate to FontAwesome pro

.github/workflows/ci.yaml

@@ -22,6 +22,8 @@ jobs:
             ${{ runner.os }}-build-
             ${{ runner.os }}-
       - name: Install Dependencies
+        env:
+          FONTAWESOME_NPM_AUTH_TOKEN: ${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}
         run: cd front && npm install
       - name: Run tests and code coverage
         run: cd front && npm run coverage-ci

front/.env.example

@@ -1 +1,2 @@
 REACT_APP_API_URL=http://localhost:3000
+FONTAWESOME_NPM_AUTH_TOKEN=REPLACE_ME

front/.npmrc

@@ -0,0 +1,2 @@
+@fortawesome:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

front/package-lock.json

@@ -12,8 +12,8 @@
         "@emotion/react": "^11.10.6",
         "@emotion/styled": "^11.10.5",
         "@fortawesome/fontawesome-svg-core": "^6.2.1",
-        "@fortawesome/free-regular-svg-icons": "^6.2.1",
+        "@fortawesome/pro-regular-svg-icons": "^6.4.0",
-        "@fortawesome/free-solid-svg-icons": "^6.2.1",
+        "@fortawesome/pro-solid-svg-icons": "^6.4.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
         "@tanstack/react-table": "^8.8.5",
         "@types/node": "^16.18.4",
@@ -3092,11 +3092,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/@fortawesome/free-regular-svg-icons": {
+    "node_modules/@fortawesome/pro-regular-svg-icons": {
       "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/6.4.0/pro-regular-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==",
+      "integrity": "sha512-yEJgoA/31qfIsD27kAg31BODCD+bvgievPp4R39F3kUp/+mu05qX6xgW366RUfs4CnTWSw0fFpc4AhFwC7xbJw==",
-      "hasInstallScript": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.4.0"
       },
@@ -3104,11 +3103,10 @@
         "node": ">=6"
       }
     },
-    "node_modules/@fortawesome/free-solid-svg-icons": {
+    "node_modules/@fortawesome/pro-solid-svg-icons": {
       "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz",
+      "resolved": "https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/6.4.0/pro-solid-svg-icons-6.4.0.tgz",
-      "integrity": "sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==",
+      "integrity": "sha512-R54gxoqHAZdlSCmE7JYpQKT64Jgw59nQIyabT6oh3jsb70O4A3ea+ojVBCKsvoW4UhYe1IOXS1o4PqDEW8Y7Tg==",
-      "hasInstallScript": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "6.4.0"
       },

front/package.json

@@ -7,8 +7,8 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-regular-svg-icons": "^6.2.1",
+    "@fortawesome/pro-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@fortawesome/pro-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@tanstack/react-table": "^8.8.5",
     "@types/node": "^16.18.4",
@@ -89,7 +89,6 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "react-scripts": "5.0.1",
     "@types/jest": "^27.5.2",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "babel-plugin-named-exports-order": "^0.0.2",
@@ -104,6 +103,7 @@
     "eslint-plugin-storybook": "^0.6.11",
     "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
+    "react-scripts": "5.0.1",
     "storybook": "^7.0.2",
     "typescript": "^4.9.3",
     "webpack": "^5.75.0"

front/src/layout/navbar/Navbar.tsx

@@ -5,8 +5,8 @@ import { Workspace } from '../../interfaces/workspace.interface';
 import NavItem from './NavItem';
 import NavTitle from './NavTitle';
 import WorkspaceContainer from './WorkspaceContainer';
-import { faUser } from '@fortawesome/free-regular-svg-icons';
+import { faUser } from '@fortawesome/pro-regular-svg-icons';
-import { faBuilding } from '@fortawesome/free-regular-svg-icons';
+import { faBuildings } from '@fortawesome/pro-regular-svg-icons';
 
 const NavbarContainer = styled.div`
   display: flex;
@@ -48,7 +48,7 @@ function Navbar({ workspace }: OwnProps) {
           <NavItem
             label="Companies"
             to="/companies"
-            icon={faBuilding}
+            icon={faBuildings}
             active={
               !!useMatch({
                 path: useResolvedPath('/companies').pathname,

front/src/layout/navbar/__stories__/NavItem.stories.tsx

@@ -1,5 +1,5 @@
 import { MemoryRouter } from 'react-router-dom';
-import { faUser } from '@fortawesome/free-regular-svg-icons';
+import { faUser } from '@fortawesome/pro-regular-svg-icons';
 import { ThemeProvider } from '@emotion/react';
 
 import NavItem from '../../../layout/navbar/NavItem';

front/src/pages/companies/Companies.tsx

@@ -1,9 +1,9 @@
-import { faBuilding } from '@fortawesome/free-regular-svg-icons';
+import { faBuildings } from '@fortawesome/pro-regular-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 
 function Companies() {
   return (
-    <WithTopBarContainer title="Companies" icon={faBuilding}>
+    <WithTopBarContainer title="Companies" icon={faBuildings}>
       <></>
     </WithTopBarContainer>
   );

front/src/pages/people/People.tsx

@@ -1,11 +1,11 @@
 import {
-  faBuilding,
+  faBuildings,
   faCalendar,
   faEnvelope,
   faRectangleList,
   faUser,
-} from '@fortawesome/free-regular-svg-icons';
+} from '@fortawesome/pro-regular-svg-icons';
-import { faList, faMapPin, faPhone } from '@fortawesome/free-solid-svg-icons';
+import { faList, faMapPin, faPhone } from '@fortawesome/pro-solid-svg-icons';
 import WithTopBarContainer from '../../layout/containers/WithTopBarContainer';
 import Table from '../../components/table/Table';
 import { Company } from '../../interfaces/company.interface';
@@ -123,7 +123,7 @@ const columns = [
     ),
   }),
   columnHelper.accessor('company', {
-    header: () => <TableHeader viewName="Company" viewIcon={faBuilding} />,
+    header: () => <TableHeader viewName="Company" viewIcon={faBuildings} />,
     cell: (props) => (
       <CellLink
         name={props.row.original.company.name}

infra/dev/front/Dockerfile

@@ -7,6 +7,7 @@ RUN apk update && apk upgrade && \
 WORKDIR /app/front
 COPY ../../front .
 
+RUN export $(xargs <.env)
 RUN npm install
 
 CMD ["npm", "run", "start"]

infra/prod/front/Dockerfile

@@ -1,5 +1,7 @@
 FROM node:18-alpine as front
 
+ARG FONTAWESOME_NPM_AUTH_TOKEN
+
 WORKDIR /app/front
 COPY ./front .