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/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>;
 };