Update from projects

{{cookiecutter.project_dirname}}/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "ignorePatterns": "*.js",
+  "ignorePatterns": ["*.js", "*.mjs"],
   "parser": "@typescript-eslint/parser",
   "settings": {
     "react": {
@@ -26,16 +26,63 @@
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
     "prettier",
-    "plugin:security/recommended"
+    "plugin:security/recommended-legacy"
   ],
   "rules": {
     "@typescript-eslint/consistent-type-imports": "warn",
     "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-unused-vars": ["warn", {"argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
-    "camelcase": [2, {"properties": "always"}],
+    "@typescript-eslint/no-unused-vars": [
+      "warn",
+      {
+        "argsIgnorePattern": "^_",
+        "varsIgnorePattern": "^_"
+      }
+    ],
+    "camelcase": [
+      2,
+      {
+        "properties": "always"
+      }
+    ],
     "prettier/prettier": "error",
     "react/no-unescaped-entities": 0,
     "react/prop-types": 0,
-    "security/detect-object-injection": 0
+    "security/detect-object-injection": 0,
+    "import/order": [
+      "warn",
+      {
+        "alphabetize": {
+          "caseInsensitive": true,
+          "order": "asc"
+        },
+        "groups": [
+          [
+            "builtin",
+            "external"
+          ],
+          "internal",
+          [
+            "parent",
+            "sibling",
+            "index"
+          ],
+          "object",
+          "type"
+        ],
+        "newlines-between": "always",
+        "pathGroups": [
+          {
+            "pattern": "@/components/**",
+            "group": "internal",
+            "position": "before"
+          },
+          {
+            "pattern": "@/utils/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ]
+      }
+    ]
   }
 }

{{cookiecutter.project_dirname}}/.gitignore

@@ -41,11 +41,14 @@ yarn-error.log*
 terraform.tfvars
 
 # vercel
-.vercel
+.vercel/
 
 # VisualStudioCode
 .vscode/
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.sentryclirc

{{cookiecutter.project_dirname}}/README.md

@@ -150,6 +150,7 @@ To enable the Pact broker integration, the following variables should be set in
 
 To enable the Sentry integration, the following variables should be set in the GitLab respository:
 ```git
+  NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE: 0.1
   SENTRY_AUTH_TOKEN (protected and masked) from Sentry
   SENTRY_DSN (protected and masked) from Sentry
   SENTRY_ORG (protected) e.g.: 20tab

{{cookiecutter.project_dirname}}/__tests__/components/Navbar.test.tsx

@@ -1,13 +1,11 @@
 import { expect } from '@jest/globals'
-import { screen } from '@testing-library/react'
 import React from 'react'
 
 import { Navbar } from '@/components/Navbar'
-import { renderWithWrappers } from '@/__tests__/functions'
 
-const setup = () => renderWithWrappers(<Navbar />)
+import { renderWithWrappers } from '@/__tests__/functions'
 
 test('Navbar renders correctly', () => {
-  setup()
-  expect(screen.getByRole('img')).toBeTruthy()
+  const container = renderWithWrappers(<Navbar />)
+  expect(container).toMatchSnapshot()
 })

{{cookiecutter.project_dirname}}/__tests__/components/__snapshots__/Navbar.test.tsx.snap

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navbar renders correctly 1`] = `
+.c0 {
+  width: 100%;
+  background-color: #F4F7F8;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 5px;
+}
+
+.c0 svg {
+  height: 48px;
+}
+
+.c0 svg path {
+  fill: #4d517a;
+}
+
+.c0 svg path:last-child {
+  fill: #FFFFFF;
+}
+
+<div>
+  <nav
+    class="c0"
+  >
+    <a
+      href="/"
+    >
+      <svg
+        viewBox="0 0 395 170"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M220.5 84.7c1.7-2.2 2.9-4.3 3.6-6.2.8-1.9 1.2-3.9 1.2-5.9 0-4.3-1.5-7.9-4.4-10.8-2.9-2.9-6.7-4.3-11.2-4.3-5.1 0-9.7 1.9-13.6 5.7l3.9 4c3.1-2.9 6.3-4.4 9.7-4.4 2.9 0 5.2.9 7 2.7 1.8 1.8 2.6 4.2 2.6 7 0 1.7-.3 3.1-.9 4.5-.6 1.3-1.6 2.9-2.9 4.7l-19.8 26.4v4.1H227V107h-23.2l16.7-22.3zm46.3-9.7c-.1-1.8-.2-3.2-.4-4.1-.2-.9-.4-2-.8-3.2-.3-1.2-.7-2.2-1.2-3-.5-.8-1.1-1.7-1.9-2.5-1.3-1.4-3-2.6-5-3.4-2-.8-4.2-1.2-6.6-1.2-2.4 0-4.6.4-6.6 1.2-2 .8-3.7 2-5 3.4-.7.8-1.4 1.6-1.9 2.5-.5.8-.9 1.9-1.2 3-.3 1.2-.6 2.2-.8 3.2-.2.9-.3 2.3-.4 4.1-.1 1.8-.1 3.4-.1 4.6V91c0 1.2.1 2.7.1 4.6.1 1.8.2 3.2.4 4.1.2.9.4 2 .8 3.2.3 1.2.7 2.2 1.2 3 .5.8 1.1 1.7 1.9 2.5 1.3 1.4 3 2.6 5 3.4 2 .8 4.2 1.2 6.6 1.2 2.4 0 4.6-.4 6.6-1.2 2-.8 3.7-2 5-3.4.7-.8 1.4-1.6 1.9-2.5.5-.8.9-1.9 1.2-3 .3-1.2.6-2.2.8-3.2.2-.9.3-2.3.4-4.1.1-1.8.1-3.4.1-4.6V79.6c.1-1.3 0-2.8-.1-4.6zM261 91.2c0 1.2-.1 2.8-.2 4.5-.1 1.8-.3 3.1-.5 4-.2.9-.5 1.8-.9 2.8-.4.9-.8 1.7-1.4 2.4-1.7 1.9-4 2.8-7.1 2.8-3.1 0-5.4-.9-7.1-2.8-.6-.6-1.1-1.4-1.4-2.4-.4-.9-.7-1.9-.9-2.8-.2-.9-.4-2.2-.5-4-.1-1.8-.2-3.3-.2-4.5V79.4c0-1.2.1-2.8.2-4.5.1-1.8.3-3.1.5-4 .2-.9.5-1.8.9-2.8.4-.9.8-1.7 1.4-2.4 1.7-1.9 4-2.8 7.1-2.8 3.1 0 5.4.9 7.1 2.8.6.6 1.1 1.4 1.4 2.4.4.9.7 1.9.9 2.8.2.9.4 2.2.5 4 .1 1.8.2 3.3.2 4.5v11.8zm29.4 16.6c-1.6 0-2.7-.7-3.3-2.1-.2-.6-.3-2.2-.3-5v-25h7.6V71h-7.6v-8.9h-5.7V71h-5.7v4.7h5.7v25c0 3.1.1 5.2.4 6.2.6 1.9 1.6 3.4 3.1 4.5 1.5 1 3.3 1.6 5.5 1.6s4.6-.5 7-1.6l-2.2-4.7c-1.8.7-3.2 1.1-4.5 1.1zm35.8-35c-2.5-1.6-5.5-2.4-8.9-2.4-3.5 0-7.6 1.1-12.2 3.2l2.2 4.7c3.9-1.9 7.2-2.8 10-2.8 1.9 0 3.7.4 5.2 1.3s2.6 2.2 3.2 3.9c.3.7.5 1.6.5 2.4.1.9.1 2.3.1 4.4H317c-.8 0-1.7.1-2.7.2-1 .1-1.9.3-2.8.6-2.9.9-5.1 2.4-6.6 4.5-1.6 2.1-2.3 4.6-2.3 7.3 0 3.7 1.2 6.7 3.7 9.2 2.5 2.5 5.6 3.7 9.5 3.7 4.1 0 7.6-1.7 10.5-5v4.4h5.7V87.5c0-3.7-.2-6.3-.6-7.6-1-3.1-2.7-5.4-5.2-7.1zm0 23.6c0 .9-.1 1.8-.2 2.7-.1 1-.3 1.8-.5 2.6-.7 2.1-1.8 3.6-3.4 4.6-1.6 1-3.5 1.5-5.6 1.5-2.6 0-4.6-.7-6.1-2.2-1.4-1.5-2.2-3.3-2.2-5.5 0-1.8.4-3.3 1.3-4.6.9-1.3 2.2-2.2 3.8-2.7 1.2-.4 3.6-.5 7.3-.5h5.5c.1 1.9.1 3.2.1 4.1zm47.2-13.6c-.4-2.3-1.2-4.4-2.5-6.3-1.2-1.8-2.9-3.3-5-4.4-2.1-1.1-4.5-1.7-7.1-1.7-4.2 0-7.9 1.7-10.9 5V55.2h-5.7v57.2h5.7V108c3 3.3 6.7 5 10.9 5 2.6 0 5-.6 7.1-1.7 2.1-1.1 3.8-2.6 5-4.4 1.3-1.9 2.1-4 2.5-6.3.4-2.3.6-5.2.6-8.9s-.2-6.6-.6-8.9zm-5.6 16.5c-.3 1.9-.9 3.5-1.9 4.8-1.8 2.5-4.4 3.7-7.8 3.7-3.4 0-6-1.2-7.8-3.7-1-1.3-1.6-2.9-1.9-4.8-.3-1.9-.4-4.4-.4-7.6 0-3.2.1-5.7.4-7.6.3-1.9.9-3.5 1.9-4.8 1.8-2.5 4.4-3.7 7.8-3.7 3.4 0 6 1.2 7.8 3.7 1 1.3 1.6 2.9 1.9 4.8.3 1.9.4 4.4.4 7.6.1 3.2-.1 5.7-.4 7.6zM85 16.1c-38 0-68.9 30.8-68.9 68.9S47 153.9 85 153.9c38.1 0 68.9-30.9 68.9-68.9S123.1 16.1 85 16.1zM61.3 36.6c0-5.4 4.4-9.7 9.7-9.7 5.4 0 9.7 4.4 9.7 9.7 0 .6-.1 14.3-5.5 23-.1.1-6.2 10.1-7.6 18.5l11.6-.1c1.6 0 2.9 1.3 3 2.9 0 1.6-1.3 3-2.9 3l-14.9.1c-.8 0-1.5-.3-2.1-.9-.6-.6-.9-1.3-.9-2.1.1-10.4 8.4-24 8.8-24.5 4.6-7.2 4.6-19.8 4.6-19.9 0-2.1-1.7-3.8-3.8-3.8s-3.8 1.7-3.8 3.8v9.1c0 1.6-1.3 3-3 3-1.6 0-3-1.3-3-3v-9.1zm30.9 79.9l-13 13.2c-.6.6-1.4 1.1-2.3 1.1-1.8 0-3.2-1.5-3.2-3.3 0-.9.3-1.7 1-2.4l7.4-7.5H64.6c-1.8 0-3.3-1.4-3.3-3.2 0-1.8 1.5-3.3 3.3-3.3H82l-7.5-7.4c-.6-.6-1-1.3-1-2.2 0-1.8 1.5-3.3 3.3-3.3.9 0 1.7.4 2.3 1l13 13c.6.6 1 1.3 1 2.2s-.3 1.5-.9 2.1zm13.3 21.5c0 1.8-1.5 3.3-3.3 3.3-1.8 0-3.3-1.5-3.3-3.3V91.7c0-1.8 1.5-3.2 3.3-3.2 1.8 0 3.3 1.5 3.3 3.2V138zm.3-63c0 5.4-4.4 9.7-9.7 9.7-5.4 0-9.7-4.4-9.7-9.7V36.6c0-5.4 4.4-9.7 9.7-9.7 5.4 0 9.7 4.4 9.7 9.7V75z"
+        />
+        <path
+          d="M96 32.8c-2.1 0-3.8 1.7-3.8 3.8V75c0 2.1 1.7 3.8 3.8 3.8s3.8-1.7 3.8-3.8V36.6c.1-2.1-1.6-3.8-3.8-3.8z"
+        />
+        <path
+          d="M79.2 99.2c-.6-.6-1.4-1-2.3-1-1.8 0-3.3 1.5-3.3 3.3 0 .9.4 1.6 1 2.2l7.5 7.4H64.6c-1.8 0-3.3 1.5-3.3 3.3 0 1.8 1.5 3.2 3.3 3.2h17.5l-7.4 7.5c-.6.6-1 1.5-1 2.4 0 1.8 1.4 3.3 3.2 3.3.9 0 1.7-.5 2.3-1.1l13-13.2c.6-.6 1-1.2 1-2.1s-.4-1.6-1-2.2l-13-13zm23-10.8c-1.8 0-3.3 1.5-3.3 3.2V138c0 1.8 1.5 3.3 3.3 3.3 1.8 0 3.3-1.5 3.3-3.3V91.7c0-1.8-1.5-3.3-3.3-3.3zM96 26.9c-5.4 0-9.7 4.4-9.7 9.7V75c0 5.4 4.4 9.7 9.7 9.7 5.4 0 9.7-4.4 9.7-9.7V36.6c.1-5.3-4.3-9.7-9.7-9.7zM99.9 75c0 2.1-1.7 3.8-3.8 3.8s-3.8-1.7-3.8-3.8V36.6c0-2.1 1.7-3.8 3.8-3.8s3.8 1.7 3.8 3.8V75zM64.2 48.7c1.6 0 3-1.3 3-3v-9.1c0-2.1 1.7-3.8 3.8-3.8s3.8 1.7 3.8 3.8c0 .1-.1 12.6-4.6 19.9-.4.6-8.6 14.2-8.8 24.5 0 .8.3 1.6.9 2.1.6.6 1.3.9 2.1.9l14.8-.1c1.6 0 2.9-1.3 2.9-3 0-1.6-1.3-2.9-3-2.9l-11.5.1c1.4-8.4 7.5-18.4 7.6-18.5 5.5-8.7 5.5-22.4 5.5-23 0-5.4-4.4-9.7-9.7-9.7-5.4 0-9.7 4.4-9.7 9.7v9.1c0 1.7 1.3 3 2.9 3z"
+        />
+      </svg>
+    </a>
+  </nav>
+</div>
+`;

{{cookiecutter.project_dirname}}/__tests__/components/commons/Button.test.tsx

@@ -3,6 +3,7 @@ import { screen } from '@testing-library/react'
 import React from 'react'
 
 import { Button } from '@/components/commons/Button'
+
 import { renderWithWrappers } from '@/__tests__/functions'
 
 const solidSetup = () => renderWithWrappers(<Button />)

{{cookiecutter.project_dirname}}/__tests__/components/commons/Typography.test.tsx

@@ -2,9 +2,10 @@ import { expect } from '@jest/globals'
 import { screen } from '@testing-library/react'
 import React from 'react'
 
-import { renderWithWrappers } from '@/__tests__/functions'
 import { H1, H2, H3, H4, Text } from '@/components/commons/Typography'
 
+import { renderWithWrappers } from '@/__tests__/functions'
+
 describe('Titles', () => {
   describe('H1', () => {
     it('Normal H1 renders correctly', () => {
@@ -13,7 +14,7 @@ describe('Titles', () => {
     })
     it('Normal H1 renders correctly with style props', () => {
       renderWithWrappers(
-        <H1.Normal uppercase italic color='red'>
+        <H1.Normal $uppercase $italic color='red'>
           MainTitle
         </H1.Normal>
       )
@@ -32,7 +33,7 @@ describe('Titles', () => {
     })
     it('Big H1 renders correctly with style props', () => {
       renderWithWrappers(
-        <H1.Big uppercase italic color='red'>
+        <H1.Big $uppercase $italic color='red'>
           MainTitle
         </H1.Big>
       )
@@ -51,7 +52,7 @@ describe('Titles', () => {
     })
     it('Medium H1 renders correctly with style props', () => {
       renderWithWrappers(
-        <H1.Medium uppercase italic color='red'>
+        <H1.Medium $uppercase $italic color='red'>
           MainTitle
         </H1.Medium>
       )
@@ -72,7 +73,7 @@ describe('Titles', () => {
     })
     it('Normal H2 renders correctly with style props', () => {
       renderWithWrappers(
-        <H2.Normal uppercase italic color='red'>
+        <H2.Normal $uppercase $italic color='red'>
           MainTitle
         </H2.Normal>
       )
@@ -93,7 +94,7 @@ describe('Titles', () => {
     })
     it('H3 renders correctly with style props', () => {
       renderWithWrappers(
-        <H3.Normal uppercase italic color='red'>
+        <H3.Normal $uppercase $italic color='red'>
           MainTitle
         </H3.Normal>
       )
@@ -114,7 +115,7 @@ describe('Titles', () => {
     })
     it('H4 renders correctly with style props', () => {
       renderWithWrappers(
-        <H4.Normal uppercase italic color='red'>
+        <H4.Normal $uppercase $italic color='red'>
           MainTitle
         </H4.Normal>
       )
@@ -138,7 +139,7 @@ describe('Text', () => {
     })
     it('Normal Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.Normal uppercase italic color='red'>
+        <Text.Normal $uppercase $italic color='red'>
           MainParagraph
         </Text.Normal>
       )
@@ -159,7 +160,7 @@ describe('Text', () => {
     })
     it('NormalBold Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.NormalBold uppercase italic color='red'>
+        <Text.NormalBold $uppercase $italic color='red'>
           MainParagraph
         </Text.NormalBold>
       )
@@ -180,7 +181,7 @@ describe('Text', () => {
     })
     it('Small Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.Small uppercase italic color='red'>
+        <Text.Small $uppercase $italic color='red'>
           MainParagraph
         </Text.Small>
       )
@@ -199,7 +200,7 @@ describe('Text', () => {
     })
     it('SmallBold Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.SmallBold uppercase italic color='red'>
+        <Text.SmallBold $uppercase $italic color='red'>
           MainParagraph
         </Text.SmallBold>
       )
@@ -220,7 +221,7 @@ describe('Text', () => {
     })
     it('Medium Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.Medium uppercase italic color='red'>
+        <Text.Medium $uppercase $italic color='red'>
           MainParagraph
         </Text.Medium>
       )
@@ -239,7 +240,7 @@ describe('Text', () => {
     })
     it('MediumBold Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.MediumBold uppercase italic color='red'>
+        <Text.MediumBold $uppercase $italic color='red'>
           MainParagraph
         </Text.MediumBold>
       )
@@ -260,7 +261,7 @@ describe('Text', () => {
     })
     it('Big Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.Big uppercase italic color='red'>
+        <Text.Big $uppercase $italic color='red'>
           MainParagraph
         </Text.Big>
       )
@@ -279,7 +280,7 @@ describe('Text', () => {
     })
     it('BigBold Text renders correctly with style props', () => {
       renderWithWrappers(
-        <Text.BigBold uppercase italic color='red'>
+        <Text.BigBold $uppercase $italic color='red'>
           MainParagraph
         </Text.BigBold>
       )

{{cookiecutter.project_dirname}}/__tests__/components/layout/Base.test.tsx

@@ -0,0 +1,15 @@
+import { expect } from '@jest/globals'
+import React from 'react'
+
+import Layout from '@/components/layout/Base'
+
+import { renderWithWrappers } from '@/__tests__/functions'
+
+test('Navbar renders correctly', () => {
+  const container = renderWithWrappers(
+    <Layout>
+      <p>Test base layout</p>
+    </Layout>
+  )
+  expect(container).toMatchSnapshot()
+})