chore: use Nx affected tasks in CI (#5110)

Closes #5097

- Uses "nx affected" to detect what projects need to be checked in the
current PR (for now, `ci-front` and `ci-server` workflows only).
- Caches results of certain tasks (`lint`, `typecheck`, `test`,
`storybook:build`) when a PR pipeline runs. The next runs of the same
PR's pipeline will then be able to reuse the PR's task cache to execute
tasks faster.
- Caches Yarn's cache folder to install dependencies faster in CI jobs.
- Rewrites the node modules cache/install steps as a custom, reusable
Github action.
- Distributes `ci-front` jobs with a "matrix" strategy.
- Sets common tasks config at the root `nx.json`. For instance, to
activate the `typecheck` task in a project, add `typecheck: {}` to its
`project.json` and it'll use the default config set in `nx.json` for the
`typecheck` task. Options can be overridden in each individual
`project.json` if needed.
- Adds "scope" tags to some projects: `scope:frontend`, `scope:backend`,
`scope:shared`. An eslint rule ensures that `scope:frontend` only
depends on `scope:frontent` or `scope:shared` projects, same for
`scope:backend`. These tags are used by `nx affected` to filter projects
by scope and generates different task cache keys according to the
requested scope.
- Enables checks for twenty-emails in the `ci-server` workflow.

packages/twenty-emails/src/common-style.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @nx/workspace-no-hardcoded-colors */
+
 const grayScale = {
   gray100: '#000000',
   gray90: '#141414',

packages/twenty-emails/src/components/BaseEmail.tsx

@@ -1,5 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { Container, Html } from '@react-email/components';
+
 import { BaseHead } from 'src/components/BaseHead';
 import { Logo } from 'src/components/Logo';
 

packages/twenty-emails/src/components/BaseHead.tsx

@@ -1,4 +1,5 @@
 import { Font, Head } from '@react-email/components';
+
 import { emailTheme } from 'src/common-style';
 
 export const BaseHead = () => {

packages/twenty-emails/src/components/CallToAction.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Button } from '@react-email/button';
+
 import { emailTheme } from 'src/common-style';
 
 const callToActionStyle = {

packages/twenty-emails/src/components/HighlightedText.tsx

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 import { Column } from '@react-email/components';
 import { Row } from '@react-email/row';
 import { Text } from '@react-email/text';
+
 import { emailTheme } from 'src/common-style';
 
 const rowStyle = {

packages/twenty-emails/src/components/Link.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { Link as EmailLink } from '@react-email/components';
+
 import { emailTheme } from 'src/common-style';
 
 const linkStyle = {

packages/twenty-emails/src/components/MainText.tsx

@@ -1,5 +1,6 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren as MainTextProps } from 'react';
 import { Text } from '@react-email/text';
+
 import { emailTheme } from 'src/common-style';
 
 const mainTextStyle = {
@@ -8,6 +9,6 @@ const mainTextStyle = {
   color: emailTheme.font.colors.primary,
 };
 
-export const MainText = ({ children }: PropsWithChildren) => {
+export const MainText = ({ children }: MainTextProps) => {
   return <Text style={mainTextStyle}>{children}</Text>;
 };

packages/twenty-emails/src/emails/clean-inactive-workspaces.email.tsx

@@ -4,7 +4,7 @@ import { HighlightedText } from 'src/components/HighlightedText';
 import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';
 
-type CleanInactiveWorkspaceEmailData = {
+type CleanInactiveWorkspaceEmailProps = {
   daysLeft: number;
   userName: string;
   workspaceDisplayName: string;
@@ -14,7 +14,7 @@ export const CleanInactiveWorkspaceEmail = ({
   daysLeft,
   userName,
   workspaceDisplayName,
-}: CleanInactiveWorkspaceEmailData) => {
+}: CleanInactiveWorkspaceEmailProps) => {
   const dayOrDays = daysLeft > 1 ? 'days' : 'day';
   const remainingDays = daysLeft > 1 ? `${daysLeft} ` : '';
 

packages/twenty-emails/src/emails/delete-inactive-workspaces.email.tsx

@@ -1,4 +1,5 @@
 import { Column, Row, Section } from '@react-email/components';
+
 import { BaseEmail } from 'src/components/BaseEmail';
 import { MainText } from 'src/components/MainText';
 import { Title } from 'src/components/Title';

packages/twenty-emails/src/emails/password-update-notify.email.tsx

@@ -1,4 +1,5 @@
 import { format } from 'date-fns';
+
 import { BaseEmail } from 'src/components/BaseEmail';
 import { CallToAction } from 'src/components/CallToAction';
 import { MainText } from 'src/components/MainText';