Add rich text editor (tiptap)

.github/workflows/tests.yml

@@ -19,7 +19,6 @@ jobs:
                   cache: 'npm'
                   cache-dependency-path: client-v2/package-lock.json
 
-            - run: cd client-v2
             - run: npm ci
               working-directory: ./client-v2
 
@@ -34,6 +33,16 @@ jobs:
 
             - run: npm run comp:ci
               working-directory: ./client-v2
+              env:
+                CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+            - name: Upload component test artifacts
+              uses: actions/upload-artifact@v3
+              if: failure()
+              with:
+                  name: component test artifacts
+                  path: client-v2/.cypress/component
+                  retention-days: 7
 
             # - name: Upload coverage artifacts
             #   uses: actions/upload-artifact@v3
@@ -60,11 +69,10 @@ jobs:
                   cache: 'npm'
                   cache-dependency-path: server/package-lock.json
 
-            - run: cd server
             - run: npm ci
               working-directory: ./server
 
-            - run: npm run build --if-present
+            - run: npm run build
               working-directory: ./server
 
             - run: npm run lint
@@ -73,7 +81,7 @@ jobs:
             - run: npm run typecheck-snapshot-scripts
               working-directory: ./server
 
-            - name: Setup Postgres              
+            - name: Setup Postgres
               uses: Daniel-Marynicz/postgresql-action@master
               with:
                   postgres_image_tag: 12-alpine
@@ -130,3 +138,13 @@ jobs:
 
             - run: npm run e2e:ci
               working-directory: ./client-v2
+              env:
+                CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+
+            - name: Upload e2e test artifacts
+              uses: actions/upload-artifact@v3
+              if: failure()
+              with:
+                  name: e2e test artifacts
+                  path: client-v2/.cypress/e2e
+                  retention-days: 7

.gitignore

@@ -6,3 +6,5 @@ node_modules
 .idea
 # Local Netlify folder
 .netlify
+# Cypress artifacts folder
+.cypress

client-v2/.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-    "eslint.validate": ["html", "javascript", "typescript"]
+    "eslint.validate": ["html", "javascript", "typescript"],
+    "css.customData": [".vscode/tailwind.json"]
 }

client-v2/.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+    "version": 1.1,
+    "atDirectives": [
+        {
+            "name": "@tailwind",
+            "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+                }
+            ]
+        },
+        {
+            "name": "@apply",
+            "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+                }
+            ]
+        },
+        {
+            "name": "@responsive",
+            "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+                }
+            ]
+        },
+        {
+            "name": "@screen",
+            "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+                }
+            ]
+        },
+        {
+            "name": "@variants",
+            "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+            "references": [
+                {
+                    "name": "Tailwind Documentation",
+                    "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+                }
+            ]
+        }
+    ]
+}

client-v2/angular.json

@@ -1,11 +1,11 @@
 {
     "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
     "schematics": {
-      "@schematics/angular": {
-        "component": {
-          "changeDetection": "OnPush"
+        "@schematics/angular": {
+            "component": {
+                "changeDetection": "OnPush"
+            }
         }
-      }
     },
     "version": 1,
     "newProjectRoot": "projects",
@@ -31,20 +31,21 @@
                         "tsConfig": "tsconfig.app.json",
                         "assets": ["src/favicon.ico", "src/assets"],
                         "styles": ["src/css/main.css"],
-                        "scripts": []
+                        "scripts": [],
+                        "allowedCommonJsDependencies": ["markdown-it-task-lists"]
                     },
                     "configurations": {
                         "production": {
                             "budgets": [
                                 {
                                     "type": "initial",
                                     "maximumWarning": "500kb",
-                                    "maximumError": "1mb"
+                                    "maximumError": "1.5mb"
                                 },
                                 {
                                     "type": "anyComponentStyle",
                                     "maximumWarning": "2kb",
-                                    "maximumError": "5kb"
+                                    "maximumError": "6kb"
                                 }
                             ],
                             "fileReplacements": [
@@ -138,7 +139,8 @@
                 "e2e-ci": {
                     "builder": "@cypress/schematic:cypress",
                     "options": {
-                        "devServerTarget": "client-v2:serve"
+                        "devServerTarget": "client-v2:serve",
+                        "record": true
                     },
                     "configurations": {
                         "production": {

client-v2/colors.json

@@ -6,6 +6,7 @@
         "400": "hsl(269.9, 100%, 54.8%)",
         "500": "hsl(269.9, 100%, 46.1%)",
         "600": "hsl(269.9, 100%, 40.4%)",
+        "650": "hsl(269.9, 100%, 33.4%)",
         "700": "hsl(269.9, 100%, 22.1%)",
         "800": "hsl(269.9, 100%, 10%)",
         "900": "hsl(269.9, 100%, 6.9%)"
@@ -52,6 +53,7 @@
         "600": "hsl(262.79999999999995, 19.8%, 37%)",
         "700": "hsl(262.79999999999995, 19.8%, 27%)",
         "800": "hsl(262.79999999999995, 19.8%, 17%)",
+        "850": "hsl(262.79999999999995, 19.8%, 12%)",
         "900": "hsl(262.79999999999995, 19.8%, 8%)"
     }
 }

client-v2/cypress.config.ts

@@ -1,9 +1,16 @@
 import { defineConfig } from 'cypress'
 
 export default defineConfig({
+    projectId: 'zwatkd',
+    retries: 2,
     e2e: {
         baseUrl: 'http://localhost:4200',
         supportFile: './cypress/support/e2e.ts',
+
+        video: true,
+        videosFolder: './.cypress/e2e/videos',
+        screenshotsFolder: './.cypress/e2e/screenshots',
+        downloadsFolder: './.cypress/e2e/downloads',
     },
 
     component: {
@@ -12,5 +19,10 @@ export default defineConfig({
             bundler: 'webpack',
         },
         specPattern: '**/*.test.ts',
+
+        video: true,
+        videosFolder: './.cypress/component/videos',
+        screenshotsFolder: './.cypress/component/screenshots',
+        downloadsFolder: './.cypress/component/downloads',
     },
 })

client-v2/cypress/e2e/auth.cy.ts

@@ -25,8 +25,9 @@ describe('Authentication', () => {
 
     describe('Login', () => {
         it('can login', () => {
+            // @TODO: there's sth wrong here, fix it
             // this should not be necessary, but somehow a previous `signup` call from within `beforeEach` prevents the following signup
-            cy.clearDb()
+            // cy.clearDb()
 
             cy.signup()
             cy.clearLocalStorage()