feat(github-workflow): ✨ add github workflows with some updates

.eslintrc.json

@@ -1,9 +1,5 @@
 {
 	"root": true,
-	"env": {
-		"node": true,
-		"es6": true
-	},
 	"parserOptions": {
 		"ecmaVersion": 8,
 		"sourceType": "module"
@@ -29,11 +25,7 @@
 					"typescript": {}
 				}
 			},
-			"env": {
-				"browser": true,
-				"node": true,
-				"es6": true
-			},
+			"env": { "browser": true, "jest": true, "node": true, "es6": true },
 			"extends": [
 				"eslint:recommended",
 				"plugin:import/errors",
@@ -43,9 +35,9 @@
 				"plugin:react/recommended",
 				"plugin:react-hooks/recommended",
 				"plugin:jsx-a11y/recommended",
+				"plugin:jest-dom/recommended",
 				"plugin:prettier/recommended",
-				"plugin:testing-library/react",
-				"plugin:jest-dom/recommended"
+				"plugin:storybook/recommended"
 			],
 			"rules": {
 				"no-restricted-imports": [
@@ -104,6 +96,14 @@
 				//  a common eslint issue with nextjs when using CSS in JS
 				"react/no-unknown-property": ["error", { "ignore": ["jsx"] }]
 			}
+		},
+		// Only uses Testing Library lint rules in test files
+		{
+			"files": [
+				"**/__tests__/**/*.[jt]s?(x)",
+				"**/?(*.)+(spec|test).[jt]s?(x)"
+			],
+			"extends": ["plugin:testing-library/react"]
 		}
 	]
 }

.github/ISSUE_TEMPLATE/new-feature.md

@@ -0,0 +1,22 @@
+---
+name: New feature
+about: New component
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Task title**
+The task title
+
+**Task description**
+Put the description here (Mandatory)
+
+**Subtasks**
+Put the subtasks here if any (optional)
+
+**Screenshots**
+Put at least one screenshot here
+
+**Link to the component on Figma**
+Put the link here

.github/workflows/dependency-review.yml

@@ -0,0 +1,22 @@
+# Dependency Review Action
+#
+# This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging.
+#
+# Source repository: https://github.com/actions/dependency-review-action
+# Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement
+name: 'Dependency Review'
+on: [pull_request]
+
+permissions:
+  contents: read
+
+jobs:
+  dependency-review:
+    runs-on: ubuntu-latest
+    steps:
+      - name: 'Checkout Repository'
+        uses: actions/checkout@v4
+      - name: 'Dependency Review'
+        uses: actions/dependency-review-action@v3
+        with:
+          fail-on-severity: moderate

.github/workflows/issue-link.yml

@@ -0,0 +1,17 @@
+name: 'Issue Links'
+on:
+  pull_request:
+    types: [opened]
+
+jobs:
+  issue-links:
+    runs-on: ubuntu-latest
+    # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#permissions-for-the-github_token
+    permissions:
+      pull-requests: write
+    steps:
+      - uses: tkt-actions/add-issue-links@v1.8.2
+        with:
+          repo-token: '${{ secrets.GITHUB_TOKEN }}' # required
+          resolve: "true"
+          branch-prefix: 'issue-' # required

.github/workflows/main.yml

@@ -0,0 +1,98 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request: {}
+
+jobs:
+  lint:
+    name: 🧪 Test, 🧹 ESLint, 👔 Stylelint, 💅 Prettier, and ʦ TypeScript
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: 🗄️ Get pnpm store directory
+        id: store
+        run: echo "::set-output name=path::$(pnpm store path --silent)"
+
+      - name: 🔄 Cache pnpm dependencies
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.store.outputs.path }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: 🧰 Install dependencies
+        run: pnpm install
+
+      - name: ⬣ Build project
+        run: pnpm build
+
+      - name: 🧪 Run tests
+        run: pnpm test
+
+      - name: 🧹 Lint code
+        run: pnpm lint:next
+
+      - name: 👔 Check styles
+        run: pnpm check-styles
+
+      - name: 💅 Check formatting
+        run: pnpm check-format
+
+      - name: ʦ Check types
+        run: pnpm check-types
+
+  cypress-run:
+    name: 🌲 Cypress Tests
+    needs: lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: ⬇️ Checkout repo
+        uses: actions/checkout@v4
+
+      - name: ⎔ Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
+      - name: 🗄️ Get pnpm store directory
+        id: store
+        run: echo "::set-output name=path::$(pnpm store path --silent)"
+
+      - name: 🔄 Cache pnpm dependencies
+        uses: actions/cache@v3
+        with:
+          path: ${{ steps.store.outputs.path }}
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: 🧰 Install dependencies
+        run: pnpm install
+
+      # - run: mv .env.example .env
+      - name: 🌐 Run Cypress tests
+        uses: cypress-io/github-action@v6
+        with:
+          build: pnpm build
+          start: pnpm start

.storybook/main.ts

@@ -1,22 +1,19 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs'
 
 const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/nextjs",
-    "options": {}
-  },
-  "docs": {
-    "autodocs": "tag"
-  }
-};
-export default config;
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-onboarding',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/nextjs',
+		options: {}
+	},
+	docs: {
+		autodocs: 'tag'
+	}
+}
+export default config

.storybook/preview.ts

@@ -1,15 +1,15 @@
 import type { Preview } from '@storybook/react'
 
 const preview: Preview = {
-  parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
-};
+	parameters: {
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
+}
 
-export default preview;
+export default preview

cypress/.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
-  root: true,
-  plugins: ['eslint-plugin-cypress'],
-  parser: '@typescript-eslint/parser',
-  env: { 'cypress/globals': true },
-};
+	root: true,
+	plugins: ['eslint-plugin-cypress'],
+	parser: '@typescript-eslint/parser',
+	env: { 'cypress/globals': true }
+}

cypress/tsconfig.json

@@ -1,9 +1,9 @@
 {
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "target": "es5",
-    "lib": ["es5", "dom"],
-    "types": ["node", "cypress", "@testing-library/cypress"]
-  },
-  "include": ["**/*.ts"]
+	"compilerOptions": {
+		"esModuleInterop": true,
+		"target": "es5",
+		"lib": ["es5", "dom"],
+		"types": ["node", "cypress", "@testing-library/cypress"]
+	},
+	"include": ["**/*.ts"]
 }

next.config.js

@@ -6,6 +6,7 @@
 // Github app is just an example
 
 const nextConfig = {
+	reactStrictMode: true,
 	env: {
 		GITHUB_APP_CLIENT_ID: '',
 		GITHUB_APP_CLIENT_SECRET: '',