Feature/task 6

.eslintrc.json

@@ -34,7 +34,10 @@
     "@typescript-eslint/strict-boolean-expressions": "off",
     "@typescript-eslint/no-floating-promises": "off",
     "no-extra-boolean-cast": "off",
-    "no-var": "error"
+    "no-var": "error",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["off"],
+    "react/prop-types": 0
   },
   "settings": {
     "react": {

.github/workflows/common.yml

@@ -0,0 +1,30 @@
+name: 🤖 Common Workflow
+
+on:
+  pull_request:
+    types:
+      - opened
+    branches:
+      - "feature/**"
+      - "bugfix/**"
+  push:
+    branches: [main]
+
+jobs:
+  check-skip:
+    name: ✋🏼 Cancel Previous Redundant Builds
+    runs-on: ubuntu-latest
+    steps:
+      - name: ✋🏼 Cancel Previous Redundant Builds
+        uses: styfle/cancel-workflow-action@0.9.1
+        with:
+          access_token: ${{ github.token }}
+  add_assignees:
+    runs-on: ubuntu-latest
+    name: 🤓 Auto assign PR to creator
+    steps:
+      - name: 🤓 Auto assign PR to creator
+        uses: actions-ecosystem/action-add-assignees@v1
+        with:
+          github_token: ${{ secrets.github_token }}
+          assignees: ${{ github.actor }}

.github/workflows/pipeline.yml → .github/workflows/main.yml

@@ -1,29 +1,10 @@
-name: CI
+name: 🚀 Vercel Production Deployment when merging to main
 
 on:
-  pull_request:
-    branches: [main]
   push:
     branches: [main]
 
 jobs:
-  check-skip:
-    name: ✋🏼 Cancel Previous Redundant Builds
-    runs-on: ubuntu-latest
-    steps:
-      - name: ✋🏼 Cancel Previous Redundant Builds
-        uses: styfle/cancel-workflow-action@0.6.0
-        with:
-          access_token: ${{ github.token }}
-  assign_pr_owner:
-    runs-on: ubuntu-latest
-    name: 📝 Assign PR to creator
-    steps:
-      - name: 📝 Assign PR to creator
-        uses: thomaseizinger/assign-pr-creator-action@v1.0.0
-        if: github.event_name == 'pull_request' && github.event.action == 'opened'
-        with:
-          repo-token: ${{ secrets.GITHUB_TOKEN }}
   lint:
     runs-on: ubuntu-latest
     name: 💅🏼 Linting
@@ -33,8 +14,8 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
-          registry-url: 'https://registry.npmjs.org'
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
       - name: Install dependencies
         run: npm ci
       - name: 💅🏼 Linting
@@ -49,8 +30,8 @@ jobs:
           fetch-depth: 0
       - uses: actions/setup-node@v2
         with:
-          node-version: 16
-          registry-url: 'https://registry.npmjs.org'
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
       - name: Install dependencies
         run: npm ci
       - name: 👷🏻‍♀️ Build
@@ -60,26 +41,26 @@ jobs:
           name: dist
           path: dist
   testing:
-      needs: [lint, build]
-      runs-on: ubuntu-latest
-      name: 🧐 Testing
-      steps:
-        - uses: actions/checkout@v2
-          with:
-            fetch-depth: 0
-        - uses: actions/setup-node@v2
-          with:
-            node-version: 16
-            registry-url: 'https://registry.npmjs.org'
-        - name: Install dependencies
-          run: npm ci
-        - uses: actions/download-artifact@v2
-          with:
-            name: dist
-            path: dist
-        - name: 🧐 Unit testing
-          run: npm run test
-  deploy:
+    needs: [lint, build]
+    runs-on: ubuntu-latest
+    name: 🧐 Testing
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
+      - name: Install dependencies
+        run: npm ci
+      - uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: 🧐 Unit testing
+        run: npm run test
+  Deploy-Production:
     needs: [testing]
     runs-on: ubuntu-latest
     name: 🚀 Vercel Production Deployment

.github/workflows/pr.yml

@@ -0,0 +1,86 @@
+name: 🚀 Vercel Preview Deployment when opening a PR
+
+on:
+  pull_request:
+    types:
+      - opened
+    branches:
+      - "feature/**"
+      - "bugfix/**"
+  push:
+    branches-ignore:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    name: 💅🏼 Linting
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
+      - name: Install dependencies
+        run: npm ci
+      - name: 💅🏼 Linting
+        run: npm run lint
+  build:
+    needs: [lint]
+    runs-on: ubuntu-latest
+    name: 👷🏻‍♀️ Build
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
+      - name: Install dependencies
+        run: npm ci
+      - name: 👷🏻‍♀️ Build
+        run: npm run build
+      - uses: actions/upload-artifact@v2
+        with:
+          name: dist
+          path: dist
+  testing:
+    needs: [lint, build]
+    runs-on: ubuntu-latest
+    name: 🧐 Testing
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v2
+        with:
+          node-version: 18
+          registry-url: "https://registry.npmjs.org"
+      - name: Install dependencies
+        run: npm ci
+      - uses: actions/download-artifact@v2
+        with:
+          name: dist
+          path: dist
+      - name: 🧐 Unit testing
+        run: npm run test
+  Deploy-Preview:
+    needs: [testing]
+    runs-on: ubuntu-latest
+    name: 🚀 Vercel Preview Deployment
+    env:
+      VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=preview --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --token=${{ secrets.VERCEL_TOKEN }}

.nvmrc

@@ -1 +1 @@
-v16
+v18

CONTRIBUTING.md

@@ -1,3 +1,80 @@
-## Permisos para contribuir
+<h1 align="center">Invoice App - Contributing Info </h1>
 
-Debes estar en Discord y en el canal #🧾-invoice-app hilo "Usuarios GitHub" pedir que agreguemos tu usuario de GitHub al repositorio que quieras aportar, front o back.
+---
+
+> **⚠️ README en proceso de actualización ⚠️**
+
+---
+
+**🚨 Tengan en consideración al arrobar/pingear a otra persona en Discord, porque somos de diferentes países, por ende horas 🚨**
+
+- [Tablero](https://github.com/users/nsdonato/projects/4/views/1) de tareas 📋
+- [Repo](https://github.com/nsdonato/front-invoices) front 🎨
+- Canal de comunicación de la comunidad en [Discord](https://discord.io/vamoacodear) 📢
+- [Proyecto](https://www.frontendmentor.io/challenges/invoice-app-i7KaLTQjl) original de Frontend Mentor 🖼️
+
+# Pasos para realizar una tarea si empezas de cero:
+
+---
+
+ℹ️ Si tenes alguna duda sobre el proceso, primero te reto a leer el paso a paso y si no te queda claro, podes preguntar en el canal de Discord #🧾-invoices-app
+
+Si ya tenes el repo clonado anda a [🤔 Ya tengo el repo clonado](###-🤔-Ya-tengo-el-repo-clonado)
+
+---
+
+1️⃣ **Deja tu usuario de GitHub en el hilo "Usuarios GitHub" de [Discord](https://discord.io/vamoacodear) bajo el canal #🧾-invoice-app así lo agregamos al repo**
+
+2️⃣ **Clonar el repositorio**
+
+```bash
+git clone git@github.com:nsdonato/front-invoices.git
+```
+
+3️⃣ **Asignate la tarea en el [tablero](https://github.com/users/nsdonato/projects/4/views/1) y pasala a "En progreso"**
+
+![Image](https://user-images.githubusercontent.com/7875216/213684051-40ed653c-c14a-410f-a78f-db975b39e734.png)
+
+![Image](https://user-images.githubusercontent.com/7875216/213683917-c4ef4b43-e5b7-4993-bea8-d420fadd3ec5.png)
+
+3️⃣ **Crea un branch a partir de main, respetando las nomenclatura y el nro de tarea que te asignaste, ej:**
+
+    🚨 El "numeroDeTarea" es el número de la tarea que te asignaste en el tablero
+
+Si es un nuevo _feature_:
+
+```bash
+git checkout -b feature/task-numeroDeTarea
+```
+
+Si es un _bugfix_:
+
+```bash
+git checkout -b bugfix/task-tuNroDeTarea
+```
+
+ℹ️ info extra
+
+`checkout` te mueve a la rama que menciones a la derecha.
+`-b` es un flag que sirve para crear la rama que esta a la derecha en este ejemplo el nombre de la rama es feature/task-1
+
+4️⃣ **Realiza los cambios y commits que necesites**
+
+Para hacer un commit recordá que tenes que seguir [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) también está entre las extensiones recomendadas!
+
+```bash
+git add .
+git commit -m "feat: add new feature"
+```
+
+5️⃣ **Hace push de tu branch**
+
+```bash
+git push
+```
+
+⚠️ Posiblemente te salga más información en la consola. No te asustes, revisa lo que dice que seguro te dejo el comando correcto para pushear, copialo y pegalo en la consola.
+
+6️⃣ **Crea el Pull Request para que te revisen los cambios 🚀**
+
+Por favor 🙏🏼 utiliza el template de Pull Request para poder darle al code reviewer un mejor panorama de lo que va a revisar, gracias.

DESIGN_SYSTEM.md

@@ -0,0 +1,39 @@
+## Design System
+
+> Todos los colores y breakpoints utilizados en el proyecto! 🌈
+
+### Breakpoints
+
+| Tamaño | Nombre   | Descripción                        |
+| ------ | -------- | ---------------------------------- |
+| 480px  | brand-md | Medida para modales                |
+| 730px  | brand-lg | Medida para el contenido principal |
+
+### Colores
+
+| Token                       | Nombre                 | Descripción/Caso de uso                                                |
+| --------------------------- | ---------------------- | ---------------------------------------------------------------------- |
+| #FFFFFF                     | brand-white            | -                                                                      |
+| #7C5DFA                     | brand-violet           | Background del botón primario                                          |
+| #9277FF                     | brand-violet-light     | Background del botón primario en hover                                 |
+| #F9FAFE                     | brand-violet-ghost     | Background del botón secundario                                        |
+| #DFE3FA                     | brand-violet-highlight | Background del botón secundario en hover                               |
+| #7E88C3                     | brand-violet-muted     | Color de texto en el botón secundario                                  |
+| #EC5757                     | brand-red              | Background del botón `delete`                                          |
+| #FF9797                     | brand-red-light        | Background del botón `delete` en hover                                 |
+| #FF8F00                     | brand-orange           | Texto del Badge naranja                                                |
+| rgba(255, 143, 0, 0.0571)   | brand-orange-ghost     | Background del Badge naranja                                           |
+| #33D69F                     | brand-green            | Texto del Badge verde                                                  |
+| rgba(51, 214, 159, 0.0571)  | brand-green-ghost      | Background del Badge verde                                             |
+| #373B53                     | brand-gray             | Background del botón terciario y color de Badge gris                   |
+| #1E2139                     | brand-gray-dark        | Background del botón terciario (hover/Dark Mode)                       |
+| rgba(55, 59, 83, 0.0571)    | brand-gray-ghost       | Background de Badge gris                                               |
+| rgba(223, 227, 250, 0.0571) | brand-gray-light-ghost | Background de Badge gris en Dark mode                                  |
+| #494E6E                     | brand-gray-light       | Color de Divider en Sidebar lateral                                    |
+| #252945                     | brand-gray-muted       | Borde de Inputs en Dark Mode. Background botón secundario en Dark Mode |
+| #0C0E16                     | brand-text             | Color de texto base                                                    |
+| #858BB2                     | brand-text-light       | Color de texto secundario                                              |
+| #888EB0                     | brand-text-muted       | Color de botón terciario                                               |
+| #F8F8FB                     | brand-bg               | Background del sitio                                                   |
+| #141625                     | brand-bg-dark          | Background del sitio en Dark Mode                                      |
+| rgba(0, 0, 0, 0.4984)       | brand-dark-ghost       | Background transparente en modales                                     |